/* SOLARA in-page visual editor v3 — portable styles (Planet-Solara design).
   Four switchable floating "hubs" (Pill / Radial / Sheet / Dock) + a layout
   switcher. ALL chrome is scoped under .solara-edit-ui so nothing leaks onto
   the host page. The host-page effect library (.fx-*) farther down is the same
   set of persisted-class effects as before and must stay verbatim. */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── design tokens (scoped; se- prefixed so they never collide with host vars) ── */
.solara-edit-ui {
  --se-space-900:#08080b; --se-space-850:#0c0c11; --se-space-800:#111118; --se-space-750:#16161f;
  --se-space-700:#1d1d28; --se-space-650:#262633; --se-space-600:#33333f;
  --se-solar-200:#ffc99e; --se-solar-300:#ffa666; --se-solar-400:#ff8533; --se-solar-500:#ff6000; --se-solar-600:#e85200;
  --se-amber-400:#ffb84d; --se-amber-500:#ffa800; --se-ember-400:#ff4d2e; --se-ember-500:#d8281c; --se-ember-600:#a81810; --se-ember-700:#901800;
  --se-aurora-500:#1fc8b6;
  --se-white:#f6f3ef; --se-ink-100:#e7e2db; --se-ink-300:#b7b1a8; --se-ink-500:#8a857d; --se-ink-700:#5a564f;
  --se-text-strong:var(--se-white); --se-text-body:var(--se-ink-100); --se-text-muted:var(--se-ink-300); --se-text-faint:var(--se-ink-500); --se-on-solar:#1a0a00;
  --se-accent-soft:color-mix(in oklab,var(--se-solar-500) 14%,transparent);
  --se-accent-line:color-mix(in oklab,var(--se-solar-500) 38%,transparent);
  --se-border-subtle:color-mix(in oklab,var(--se-white) 7%,transparent);
  --se-border:color-mix(in oklab,var(--se-white) 11%,transparent);
  --se-border-strong:color-mix(in oklab,var(--se-white) 18%,transparent);
  --se-divider:color-mix(in oklab,var(--se-white) 6%,transparent);
  --se-glass-border:color-mix(in oklab,var(--se-white) 10%,transparent);
  --se-grad-solar:linear-gradient(135deg,var(--se-amber-500) 0%,var(--se-solar-500) 45%,var(--se-ember-600) 100%);
  --se-r-sm:6px; --se-r-md:10px; --se-r-lg:14px; --se-r-xl:20px; --se-r-pill:999px;
  --se-shadow-md:0 4px 14px rgba(0,0,0,.5);
  --se-shadow-lg:0 18px 48px -12px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.03) inset;
  --se-glow-sm:0 0 0 1px color-mix(in oklab,var(--se-solar-500) 50%,transparent), 0 0 14px -2px color-mix(in oklab,var(--se-solar-500) 60%,transparent);
  --se-glow-md:0 0 24px -4px color-mix(in oklab,var(--se-solar-500) 70%,transparent), 0 0 2px color-mix(in oklab,var(--se-amber-500) 60%,transparent);
  --se-ease:cubic-bezier(.16,1,.3,1);
  --se-font:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --se-font-d:'Michroma','Space Grotesk',system-ui,sans-serif;
  --se-font-m:'JetBrains Mono','SF Mono',ui-monospace,monospace;
}
.solara-edit-ui, .solara-edit-ui *, .solara-edit-ui *::before, .solara-edit-ui *::after { box-sizing: border-box; }

/* ── floating containers ── */
.se-switch-wrap { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100000; }
.se-shell { position: fixed; z-index: 99999; font-family: var(--se-font); }
.se-shell-pill, .se-shell-radial, .se-shell-dock { bottom: 18px; left: 50%; transform: translateX(-50%); }
.se-shell-dock { max-width: calc(100vw - 16px); }
.se-shell-sheet { left: 0; right: 0; bottom: 0; }

.se-glass { background: color-mix(in oklab, var(--se-space-800) 80%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--se-glass-border); }

/* ── brand mark ── */
.se-brand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--se-font-d); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--se-solar-400); }
.se-dot { width: 13px; height: 13px; border-radius: 50%; position: relative; flex: none; background: radial-gradient(circle at 35% 30%, var(--se-amber-400), var(--se-solar-500) 55%, var(--se-ember-700)); box-shadow: var(--se-glow-sm); }
.se-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--se-amber-400) 50%, transparent); transform: rotate(-18deg) scaleY(.42); }

/* ── tool button ── */
.se-tbtn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; min-width: 38px; padding: 0 12px; border: 1px solid var(--se-border-subtle); background: var(--se-space-750); color: var(--se-text-body); border-radius: var(--se-r-md); font-family: var(--se-font); font-size: 13px; font-weight: 500; letter-spacing: -.01em; cursor: pointer; white-space: nowrap; transition: background .14s, border-color .14s, box-shadow .18s, transform .09s; }
.se-tbtn:hover { background: var(--se-space-700); border-color: var(--se-border); }
.se-tbtn:active { transform: translateY(1px); }
.se-tbtn.icon { padding: 0; width: 38px; }
.se-tbtn.sm { height: 32px; min-width: 32px; font-size: 12px; border-radius: var(--se-r-sm); }
.se-tbtn.sm.icon { width: 32px; }
.se-tbtn:disabled { opacity: .4; cursor: not-allowed; }
.se-tbtn.is-active, .se-tbtn.pop-on { border-color: var(--se-accent-line); background: var(--se-accent-soft); color: var(--se-solar-200); box-shadow: var(--se-glow-sm); }
.se-tbtn.danger { color: var(--se-ember-400); }
.se-tbtn.danger:hover { background: color-mix(in oklab, var(--se-ember-500) 18%, transparent); border-color: color-mix(in oklab, var(--se-ember-500) 45%, transparent); color: #ff7a63; }
.se-tbtn.se-save { background: var(--se-grad-solar); color: var(--se-on-solar); border-color: transparent; font-weight: 600; box-shadow: var(--se-glow-md); }
.se-tbtn.se-save:hover { filter: brightness(1.06); }

/* ── colour inputs ── */
.se-color { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 38px; min-width: 38px; padding: 0 7px; border: 1px solid var(--se-border-subtle); background: var(--se-space-750); border-radius: var(--se-r-md); color: var(--se-text-muted); cursor: pointer; }
.se-color input[type=color] { width: 22px; height: 22px; padding: 0; border: 0; background: none; border-radius: 6px; cursor: pointer; }
.se-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.se-color input[type=color]::-webkit-color-swatch { border: 1px solid var(--se-border); border-radius: 6px; }

/* ── shared bits ── */
.se-vr { width: 1px; align-self: stretch; min-height: 22px; background: var(--se-divider); margin: 0 3px; flex: none; }
.se-field { font-size: 11px; color: var(--se-text-faint); font-weight: 500; }
.se-row { display: flex; align-items: center; gap: 7px; }
.se-row.wrap { flex-wrap: wrap; }
.se-stack { display: flex; flex-direction: column; gap: 8px; }
.se-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.se-grid .se-tbtn, .se-stack .se-tbtn { justify-content: flex-start; }
.solara-edit-ui .muted { color: var(--se-text-faint); }

/* ── selection chip, status dot, breadcrumb ── */
.se-selchip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; background: var(--se-accent-soft); border: 1px solid var(--se-accent-line); border-radius: var(--se-r-pill); font-family: var(--se-font-m); font-size: 11px; letter-spacing: .04em; color: var(--se-solar-200); }
.se-selchip.empty { background: transparent; border-color: var(--se-border-subtle); color: var(--se-text-faint); }
.se-pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--se-solar-500); box-shadow: var(--se-glow-sm); flex: none; }
.solara-edit-ui [class^="st-"] { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #4a4f5a; flex: none; }
.solara-edit-ui .st-saved { background: #36d27a; box-shadow: 0 0 8px rgba(54,210,122,.7); }
.solara-edit-ui .st-dirty { background: var(--se-amber-500); box-shadow: 0 0 8px rgba(255,176,32,.7); }
.solara-edit-ui .st-saving { background: var(--se-amber-500); animation: se-blink .8s linear infinite; }
.solara-edit-ui .st-error { background: #ff4d4d; box-shadow: 0 0 8px rgba(255,77,77,.7); }
@keyframes se-blink { 50% { opacity: .35; } }
.se-crumb { display: inline-flex; align-items: center; gap: 3px; max-width: 220px; overflow-x: auto; }
.se-crumb::-webkit-scrollbar { height: 0; }
.se-crumb .cr { background: var(--se-space-800); border: 1px solid var(--se-border-subtle); color: var(--se-text-muted); border-radius: 6px; padding: 3px 7px; font-size: 11px; cursor: pointer; font-family: var(--se-font-m); }
.se-crumb .cr.cur { color: var(--se-solar-300); border-color: var(--se-accent-line); }
.se-crumb .cr-sep { color: var(--se-text-faint); font-size: 11px; }
.se-crumb .cr-empty { color: var(--se-text-faint); font-size: 11px; font-style: italic; padding: 0 4px; }

/* ── status toast (was inside the toolbar) ── */
#solara-edit-msg { position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%); z-index: 100002; max-width: min(420px, 92vw); color: #8af0b0; font-family: var(--se-font-m); font-size: 12px; text-align: center; pointer-events: none; }
#solara-edit-msg:not(:empty) { padding: 8px 14px; background: color-mix(in oklab, var(--se-space-800) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--se-glass-border); border-radius: var(--se-r-pill); box-shadow: var(--se-shadow-md); }

/* ── layout switcher ── */
.se-switch { display: inline-flex; gap: 3px; padding: 4px; border-radius: var(--se-r-pill); box-shadow: var(--se-shadow-md); }
.se-switch-opt { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--se-r-pill); background: transparent; color: var(--se-text-muted); font-family: var(--se-font); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: color .16s, background .16s, box-shadow .2s; }
.se-switch-opt:hover { color: var(--se-text-body); }
.se-switch-opt.on { color: var(--se-on-solar); background: var(--se-grad-solar); box-shadow: var(--se-glow-md); }
@media (max-width: 540px) { .se-switch-opt span { display: none; } .se-switch-opt { padding: 0; width: 40px; justify-content: center; } }

/* ════ 1 · DOCK — horizontal bar, all tools ════ */
.se-dock { display: flex; align-items: center; gap: 4px; padding: 7px 9px; border-radius: var(--se-r-pill); box-shadow: var(--se-shadow-lg); max-width: 100%; overflow-x: auto; }
.se-dock::-webkit-scrollbar { height: 0; }
.se-grip { width: 28px; height: 36px; border: 0; background: 0; color: var(--se-text-faint); cursor: grab; display: grid; place-items: center; border-radius: 8px; flex: none; touch-action: none; }
.se-grip:hover { color: var(--se-text-muted); background: var(--se-space-750); }
.se-grip:active { cursor: grabbing; color: var(--se-text-body); }
.se-chip { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: var(--se-r-pill); color: var(--se-text-body); cursor: pointer; box-shadow: var(--se-shadow-lg); }

/* ════ 2 · PILL — glass pill → tabbed panel ════ */
.se-pill { width: min(420px, calc(100vw - 24px)); border-radius: var(--se-r-xl); box-shadow: var(--se-shadow-lg); display: flex; flex-direction: column; overflow: hidden; animation: se-up .26s var(--se-ease); }
@keyframes se-up { from { transform: translateY(16px) scale(.985); opacity: 0; } }
.se-pill-head { display: flex; align-items: center; gap: 12px; padding: 13px 13px 11px 15px; }
.se-pill-head .se-selchip { margin-left: auto; }
.se-pill-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--se-divider); }
.se-pill-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border: 0; background: 0; cursor: pointer; color: var(--se-text-faint); font-family: var(--se-font); font-size: 12.5px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .14s, border-color .14s; }
.se-pill-tab:hover { color: var(--se-text-muted); }
.se-pill-tab.on { color: var(--se-solar-300); border-bottom-color: var(--se-solar-500); }
.se-pill-body { padding: 14px; min-height: 120px; }
.se-pill-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; border-top: 1px solid var(--se-divider); background: color-mix(in oklab, var(--se-space-850) 50%, transparent); }
.se-foot-l, .se-foot-r { display: flex; gap: 6px; align-items: center; }
.se-pill-collapsed { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 16px; border-radius: var(--se-r-pill); color: var(--se-text-body); cursor: pointer; box-shadow: var(--se-shadow-lg); }
.se-pill-mid { flex: 1; display: flex; justify-content: center; }

/* ════ 3 · SHEET — docked bottom sheet ════ */
.se-sheet { width: 100%; background: var(--se-space-800); border-top: 1px solid var(--se-border); border-radius: 18px 18px 0 0; box-shadow: 0 -18px 48px -20px rgba(0,0,0,.7); animation: se-sheetup .28s var(--se-ease); }
@keyframes se-sheetup { from { transform: translateY(40px); opacity: 0; } }
.se-sheet-grab { width: 40px; height: 4px; border-radius: 999px; background: var(--se-space-600); margin: 8px auto 2px; cursor: pointer; }
.se-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 14px 10px; border-bottom: 1px solid var(--se-divider); flex-wrap: wrap; }
.se-sheet-tabs { display: flex; gap: 4px; }
.se-sheet-tab { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; background: 0; border-radius: var(--se-r-md); cursor: pointer; color: var(--se-text-muted); font-family: var(--se-font); font-size: 13px; font-weight: 500; transition: background .14s, color .14s; }
.se-sheet-tab:hover { color: var(--se-text-body); background: var(--se-space-750); }
.se-sheet-tab.on { color: var(--se-solar-200); background: var(--se-accent-soft); }
.se-sheet-head-r { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.se-sheet-body { padding: 16px 16px 20px; min-height: 80px; }
.se-sheet-collapsed { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 10px 0 14px; background: var(--se-space-800); border-top: 1px solid var(--se-border); border-radius: 18px 18px 0 0; cursor: pointer; color: var(--se-text-body); }
.se-grab-dash { width: 40px; height: 4px; border-radius: 999px; background: var(--se-space-600); }

/* ════ 4 · RADIAL — orb that blooms tools ════ */
.se-radial { position: relative; width: 64px; height: 64px; }
.se-orb { position: relative; z-index: 3; width: 64px; height: 64px; border-radius: 50%; cursor: pointer; border: 1px solid color-mix(in oklab, var(--se-amber-400) 50%, transparent); background: radial-gradient(circle at 36% 30%, #2a1206, #0c0c11 70%); color: var(--se-white); display: grid; place-items: center; box-shadow: var(--se-glow-md), var(--se-shadow-lg); transition: transform .2s var(--se-ease); }
.se-orb svg { position: relative; z-index: 2; }
.se-orb:active { transform: scale(.94); }
.se-orb-core { position: absolute; inset: 12px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, var(--se-amber-400), var(--se-solar-500) 52%, var(--se-ember-700)); box-shadow: var(--se-glow-md); opacity: .9; }
.se-orb-ring { position: absolute; inset: 6px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--se-amber-400) 55%, transparent); transform: rotate(-18deg) scaleY(.4); pointer-events: none; }
.se-orb::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--se-solar-500) 30%, transparent); animation: se-orbpulse 2.6s ease-in-out infinite; }
@keyframes se-orbpulse { 0%,100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.12); opacity: .1; } }
.se-radarc { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.se-radbtn { position: absolute; left: 50%; top: 50%; margin: -23px; width: 46px; height: 46px; border-radius: 50%; pointer-events: auto; cursor: pointer; border: 1px solid var(--se-border); background: color-mix(in oklab, var(--se-space-750) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--se-text-body); display: grid; place-items: center; box-shadow: var(--se-shadow-md); transition: transform .36s var(--se-ease), opacity .3s, background .14s, border-color .14s, box-shadow .18s; }
.se-radbtn:hover { border-color: var(--se-accent-line); color: var(--se-solar-200); box-shadow: var(--se-glow-sm); }
.se-readout { position: absolute; bottom: calc(100% + 132px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--se-font-m); font-size: 10.5px; letter-spacing: .14em; color: var(--se-text-muted); padding: 6px 14px; border-radius: 8px; background: color-mix(in oklab, var(--se-space-850) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--se-border-subtle); opacity: 0; transition: opacity .26s .12s; pointer-events: none; }
.se-readout.on { opacity: 1; }
.se-more, .se-radsave { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; box-shadow: var(--se-shadow-md); }
.se-more { right: calc(100% + 12px); color: var(--se-text-muted); }
.se-more:hover { color: var(--se-solar-200); }
.se-radsave { left: calc(100% + 12px); }

/* ── POPOVERS (legacy rich controls — restyled to the new tokens) ── */
#solara-pop { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 100001; }
.solara-popm {
  width: min(360px, 92vw);
  background: color-mix(in oklab, var(--se-space-800) 92%, transparent);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--se-glass-border); border-radius: var(--se-r-lg); padding: 13px 14px;
  box-shadow: var(--se-shadow-lg); color: var(--se-text-body); font: 13px var(--se-font);
  animation: solara-pop-in .16s var(--se-ease);
}
@keyframes solara-pop-in { from { opacity: 0; transform: translateY(8px); } }
.solara-popm .pop-h { font-family: var(--se-font-d); font-weight: 400; letter-spacing: .04em; color: var(--se-solar-300); margin-bottom: 10px; font-size: 12px; text-transform: uppercase; }
.solara-popm .pop-note { color: var(--se-text-faint); font-size: 11.5px; margin: -4px 0 10px; line-height: 1.4; }
.solara-popm .pop-empty { color: var(--se-text-faint); font-size: 12.5px; padding: 6px 2px; }
.solara-popm .pr { display: flex; align-items: center; gap: 9px; margin: 8px 0; }
.solara-popm .prl { width: 64px; flex: 0 0 64px; color: var(--se-text-muted); font-size: 12px; }
.solara-popm .prc { flex: 1; display: flex; align-items: center; gap: 7px; }
.solara-popm .prc input[type=range] { flex: 1; accent-color: var(--se-solar-500); }
.solara-popm .prc b { min-width: 34px; text-align: right; color: var(--se-solar-300); font-family: var(--se-font-m); font-variant-numeric: tabular-nums; font-weight: 600; }
.solara-popm .prc input[type=text] { flex: 1; min-width: 0; background: var(--se-space-850); border: 1px solid var(--se-border); color: var(--se-text-strong); border-radius: 8px; padding: 7px 9px; font-size: 12px; }
.solara-popm .prc select { flex: 1; background: var(--se-space-850); border: 1px solid var(--se-border); color: var(--se-text-strong); border-radius: 8px; padding: 7px; font-size: 12px; }
.solara-popm input[type=color] { width: 30px; height: 26px; padding: 0; border: 1px solid var(--se-border); border-radius: 7px; background: none; cursor: pointer; }
.solara-popm textarea { width: 100%; min-height: 74px; resize: vertical; background: var(--se-space-850); border: 1px solid var(--se-border); color: var(--se-text-strong); border-radius: 9px; padding: 9px; font: 12.5px var(--se-font); }
.solara-popm .seg { background: var(--se-space-750); border: 1px solid var(--se-border-subtle); color: var(--se-text-body); border-radius: 8px; padding: 6px 11px; cursor: pointer; font-size: 13px; }
.solara-popm .seg.on { background: var(--se-grad-solar); border-color: transparent; color: var(--se-on-solar); }
.solara-popm .mini { background: var(--se-space-750); border: 1px solid var(--se-border); color: var(--se-text-strong); border-radius: 7px; width: 28px; height: 28px; cursor: pointer; font-size: 15px; }
.solara-popm .pop-foot { display: flex; gap: 8px; align-items: center; margin-top: 11px; flex-wrap: wrap; }
.solara-popm .mini2 { background: var(--se-space-750); border: 1px solid var(--se-border); color: var(--se-text-body); border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 12px; }
.solara-popm .mini2:hover { border-color: var(--se-accent-line); }
.solara-popm .mini2[disabled] { opacity: .4; cursor: not-allowed; }
.solara-popm .mini2.hot { background: var(--se-grad-solar); border-color: transparent; color: var(--se-on-solar); font-weight: 600; }
.solara-popm .gn-stat { font-size: 11.5px; color: var(--se-text-faint); }
.solara-popm .gn-stat.busy { color: var(--se-amber-500); }
.solara-popm .gn-stat.ok { color: #36d27a; }
.solara-popm .gn-stat.err { color: #ff6b6b; }
/* "All tools" / "Colours" mini-popovers (radial + shared) */
.solara-popm .se-morelist { display: flex; flex-direction: column; gap: 6px; max-height: min(60vh, 440px); overflow-y: auto; }
.solara-popm .se-morelist .se-tbtn { width: 100%; justify-content: flex-start; }
.solara-popm .se-row { gap: 7px; }

/* hover/selection outlines on the page (host elements — global, solar accent) */
.solara-hl { outline: 1.5px dashed color-mix(in oklab, #ff6000 60%, transparent) !important; outline-offset: 2px; cursor: pointer; }
.solara-sel { outline: 2px solid #ff6000 !important; outline-offset: 2px; box-shadow: 0 0 0 1px rgba(255,96,0,.4), 0 0 22px -6px rgba(255,96,0,.7); }

/* SE resize handle */
#solara-resize { position: fixed; width: 14px; height: 14px; background: #ff6000; border: 2px solid #f6f3ef; border-radius: 4px; z-index: 100002; cursor: nwse-resize; box-shadow: 0 1px 5px rgba(0,0,0,.45); }

/* "Tell Claude" note panel */
#solara-notepanel { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 100001;
  width: min(560px, 92vw); background: color-mix(in oklab, var(--se-space-800) 94%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--se-glass-border); border-radius: var(--se-r-lg); padding: 14px;
  box-shadow: var(--se-shadow-lg); font: 13px var(--se-font); color: var(--se-text-body); }
#solara-notepanel .np-head { font-family: var(--se-font-d); font-weight: 400; letter-spacing: .03em; margin-bottom: 9px; color: var(--se-solar-300); font-size: 12px; text-transform: uppercase; }
#solara-notepanel #np-target { color: var(--se-aurora-500); font-weight: 400; font-family: var(--se-font-m); text-transform: none; }
#solara-notepanel textarea { width: 100%; min-height: 90px; resize: vertical; background: var(--se-space-850); color: var(--se-text-strong); border: 1px solid var(--se-border); border-radius: 10px; padding: 10px; font: 13px var(--se-font); }
#solara-notepanel .np-row { display: flex; gap: 8px; margin-top: 10px; }
#solara-notepanel #np-send { background: var(--se-grad-solar); color: var(--se-on-solar); border: 0; border-radius: 9px; padding: 9px 16px; font-weight: 600; cursor: pointer; box-shadow: var(--se-glow-md); }
#solara-notepanel #np-close { background: var(--se-space-750); color: var(--se-text-body); border: 1px solid var(--se-border); border-radius: 9px; padding: 9px 14px; cursor: pointer; }

/* "The Book" panel */
#solara-book { position: fixed; right: 16px; bottom: 96px; z-index: 100001; width: min(440px, 94vw); max-height: 72vh;
  background: color-mix(in oklab, var(--se-space-800) 94%, transparent); color: var(--se-text-body);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--se-glass-border); border-radius: var(--se-r-xl); box-shadow: var(--se-shadow-lg);
  display: flex; flex-direction: column; font: 13px var(--se-font); }
#solara-book .bk-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--se-divider); }
#solara-book .bk-head b { color: var(--se-solar-300); flex: 1; font-family: var(--se-font-d); font-weight: 400; letter-spacing: .04em; font-size: 12px; }
#solara-book #bk-search { background: var(--se-space-850); border: 1px solid var(--se-border); color: var(--se-text-strong); border-radius: 9px; padding: 6px 10px; font-size: 12px; width: 130px; }
#solara-book #bk-close { background: var(--se-space-750); border: 1px solid var(--se-border); color: var(--se-text-body); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; }
#solara-book .bk-hint { padding: 8px 14px; color: var(--se-text-faint); font-size: 11.5px; border-bottom: 1px solid var(--se-divider); }
#solara-book .bk-sel { padding: 7px 14px; font-size: 11.5px; font-weight: 600; color: var(--se-solar-300); background: var(--se-accent-soft); border-bottom: 1px solid var(--se-divider); }
#solara-book #bk-body { overflow-y: auto; padding: 6px 12px 14px; }
#solara-book .bk-cat h4 { margin: 14px 0 7px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--se-text-faint); }
#solara-book .bk-items { display: flex; flex-wrap: wrap; gap: 6px; }
#solara-book .bk-item { background: var(--se-space-750); border: 1px solid var(--se-border-subtle); color: var(--se-text-body); border-radius: 9px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
#solara-book .bk-item:hover { border-color: var(--se-accent-line); background: var(--se-space-700); }
#solara-book .bk-item.idea { background: color-mix(in oklab, var(--se-aurora-500) 10%, var(--se-space-800)); border-color: color-mix(in oklab, var(--se-aurora-500) 35%, transparent); color: #9fe7dc; }
#solara-book .bk-item.on { background: var(--se-grad-solar); border-color: transparent; color: var(--se-on-solar); box-shadow: var(--se-glow-sm); }
#solara-book .bk-item.on::before { content: "✓ "; }

/* ── From "Tell Claude" notes ── */
/* note: features on one line */
.feature-grid { grid-template-columns: repeat(6, 1fr); gap: 14px; }
.feature-grid .feature { padding: 20px 16px; }
.feature-grid .feature h3 { font-size: 15px; }
.feature-grid .feature p { font-size: 12.5px; }
@media (max-width: 1000px){ .feature-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px){ .feature-grid { grid-template-columns: repeat(2,1fr); } }

/* note: travelling beam / starburst around the primary CTA rim */
@property --solara-ba { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.btn-primary { position: relative; isolation: isolate; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: -1;
  background: conic-gradient(from var(--solara-ba), transparent 58%, rgba(255,255,255,.95) 76%, #ffd7a8 84%, #ff7a3c 88%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: solara-beam 2.6s linear infinite;
}
@keyframes solara-beam { to { --solara-ba: 360deg; } }
@media (prefers-reduced-motion: reduce){ .btn-primary::after { animation: none; } }

/* fix (from notes): How-it-works = 3 clean centered steps, warm numbered circles */
#how .feature-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 18px; }
#how .feature { padding: 26px 22px; text-align: center; }
#how .feature::before { display: none; }
#how .feature .icon {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 16px;
  background: linear-gradient(135deg, #6e8cff, #b46dff); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px;
  box-shadow: 0 8px 20px -6px rgba(255,90,31,.55);
}
#how .feature h3 { font-size: 17px; -webkit-text-fill-color: #f4f6ff; color: #f4f6ff; background: none; }
#how .feature p { font-size: 14px; }
@media (max-width: 700px){ #how .feature-grid { grid-template-columns: 1fr !important; } }

/* ════════════════════════════════════════════════════════════════════
   "THE BOOK" — applyable front-end effect library (fx-* classes).
   Persisted as class:* edits; must stay verbatim.
   ════════════════════════════════════════════════════════════════════ */
/* 3D & hover */
.fx-tilt{transition:transform .3s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.fx-tilt:hover{transform:perspective(700px) rotateX(7deg) rotateY(-7deg) scale(1.03)}
.fx-lift{transition:transform .25s,box-shadow .25s}
.fx-lift:hover{transform:translateY(-5px);box-shadow:0 22px 50px -16px rgba(0,0,0,.4)}
.fx-press{transition:transform .08s}.fx-press:active{transform:translateY(2px) scale(.98)}
.fx-scale:hover{transform:scale(1.06);transition:transform .22s}
.fx-rotate:hover{transform:rotate(3deg);transition:transform .25s}
.fx-magnetic{transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.fx-grow-rotate{transition:transform .3s}.fx-grow-rotate:hover{transform:scale(1.06) rotate(-2deg)}
.fx-skew-hover{transition:transform .25s}.fx-skew-hover:hover{transform:skewX(-6deg)}
.fx-fill-up{position:relative;overflow:hidden;z-index:0}.fx-fill-up::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#6e8cff,#b46dff);transform:translateY(100%);transition:transform .3s}.fx-fill-up:hover::before{transform:translateY(0)}
.fx-grayscale{filter:grayscale(1);transition:filter .3s}.fx-grayscale:hover{filter:grayscale(0)}
.fx-invert:hover{filter:invert(1)}
.fx-blur-hover{transition:filter .3s}.fx-blur-hover:hover{filter:blur(3px)}
.fx-saturate:hover{filter:saturate(1.6)}
.fx-border-draw{position:relative}.fx-border-draw::after{content:"";position:absolute;inset:0;border:2px solid #6e8cff;transform:scale(.85);opacity:0;transition:transform .3s,opacity .3s;border-radius:inherit}.fx-border-draw:hover::after{transform:scale(1);opacity:1}
.fx-card-3d{transition:transform .3s;transform-style:preserve-3d}.fx-card-3d:hover{transform:perspective(900px) rotateX(4deg) rotateY(-4deg) translateY(-4px)}
/* Motion loops */
.fx-float{animation:fx-float 4s ease-in-out infinite}@keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.fx-pulse{animation:fx-pulse 2.4s ease-in-out infinite}@keyframes fx-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.fx-breathe{animation:fx-breathe 3.6s ease-in-out infinite}@keyframes fx-breathe{0%,100%{opacity:1}50%{opacity:.55}}
.fx-spin{animation:fx-spin 14s linear infinite}@keyframes fx-spin{to{transform:rotate(360deg)}}
.fx-wobble{animation:fx-wobble 3s ease-in-out infinite}@keyframes fx-wobble{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.fx-bounce{animation:fx-bounce 1.8s ease-in-out infinite}@keyframes fx-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.fx-swing{transform-origin:top center;animation:fx-swing 3s ease-in-out infinite}@keyframes fx-swing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.fx-jelly{animation:fx-jelly 2.2s infinite}@keyframes fx-jelly{0%,100%{transform:scale(1,1)}30%{transform:scale(1.1,.9)}50%{transform:scale(.92,1.08)}70%{transform:scale(1.03,.97)}}
.fx-heartbeat{animation:fx-heartbeat 1.5s ease-in-out infinite}@keyframes fx-heartbeat{0%,100%,40%{transform:scale(1)}20%,30%{transform:scale(1.12)}}
.fx-flicker{animation:fx-flicker 3s linear infinite}@keyframes fx-flicker{0%,19%,21%,100%{opacity:1}20%{opacity:.45}}
.fx-shake:hover{animation:fx-shake .4s}@keyframes fx-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.fx-orbit{animation:fx-spin 8s linear infinite}
/* Entrances (one-shot) */
.fx-slide-up{animation:fx-slideup .7s cubic-bezier(.2,.7,.2,1) both}@keyframes fx-slideup{from{transform:translateY(34px);opacity:0}to{transform:none;opacity:1}}
.fx-blur-in{animation:fx-blurin .8s ease both}@keyframes fx-blurin{from{filter:blur(14px);opacity:0}to{filter:blur(0);opacity:1}}
.fx-zoom-in{animation:fx-zoomin .6s cubic-bezier(.2,.7,.2,1) both}@keyframes fx-zoomin{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
.fx-fade-in{animation:fx-fade 1s ease both}@keyframes fx-fade{from{opacity:0}to{opacity:1}}
.fx-slide-left{animation:fx-sl .7s cubic-bezier(.2,.7,.2,1) both}@keyframes fx-sl{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}
.fx-slide-right{animation:fx-sr .7s cubic-bezier(.2,.7,.2,1) both}@keyframes fx-sr{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.fx-flip-in{animation:fx-flipin .8s ease both;backface-visibility:hidden}@keyframes fx-flipin{from{transform:perspective(600px) rotateY(80deg);opacity:0}to{transform:none;opacity:1}}
.fx-drop-in{animation:fx-drop .8s cubic-bezier(.3,1.5,.5,1) both}@keyframes fx-drop{from{transform:translateY(-60px);opacity:0}to{transform:none;opacity:1}}
.fx-clip-reveal{animation:fx-clip 1s cubic-bezier(.7,0,.3,1) both}@keyframes fx-clip{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* Light / glow / surfaces */
.fx-glow{box-shadow:0 0 28px rgba(255,90,31,.55)}
.fx-glow-pulse{animation:fx-glowpulse 2.4s ease-in-out infinite}@keyframes fx-glowpulse{0%,100%{box-shadow:0 0 12px rgba(255,90,31,.4)}50%{box-shadow:0 0 38px rgba(255,90,31,.85)}}
.fx-neon{color:#ff7a3c;text-shadow:0 0 6px #ff5a1f,0 0 16px #ff5a1f,0 0 34px #e7261a}
.fx-glow-text{text-shadow:0 0 18px rgba(255,90,31,.8)}
.fx-glass{background:rgba(255,255,255,.14)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.28)}
.fx-frost{backdrop-filter:blur(8px) saturate(1.4);background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3)}
.fx-neumorph{background:#f3e8d6;border-radius:18px;box-shadow:8px 8px 18px #d9cdb8,-8px -8px 18px #fffdf6}
.fx-inner-glow{box-shadow:inset 0 0 30px rgba(255,90,31,.4)}
.fx-gradient-border{position:relative;border:0;background:#05060d;background-clip:padding-box}.fx-gradient-border::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:linear-gradient(120deg,#6e8cff,#b46dff,#ffb347,#6e8cff);background-size:300% 300%;animation:fx-gradmove 4s linear infinite}@keyframes fx-gradmove{to{background-position:300% 0}}
.fx-shimmer{position:relative;overflow:hidden}.fx-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:fx-shimmer 2.6s infinite}@keyframes fx-shimmer{to{transform:translateX(120%)}}
.fx-shine{position:relative;overflow:hidden}.fx-shine::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .6s}.fx-shine:hover::after{left:130%}
.fx-btn-glow{box-shadow:0 6px 24px -6px #6e8cff;transition:box-shadow .25s,transform .2s}.fx-btn-glow:hover{box-shadow:0 10px 36px -6px #b46dff;transform:translateY(-2px)}
/* Typography */
.fx-gradient-text{background:linear-gradient(95deg,#ff5a1f,#e7261a,#ffb347,#ff5a1f);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% auto;animation:fx-gradtext 5s linear infinite}@keyframes fx-gradtext{to{background-position:220% center}}
.fx-holographic{background:linear-gradient(120deg,#ff5a1f,#ffb347,#e7261a,#ff8a4c,#ff5a1f);background-size:300% 300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-gradmove 6s linear infinite}
.fx-fire-text{background:linear-gradient(0deg,#e7261a,#ff5a1f 50%,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-rainbow{background:linear-gradient(90deg,#ff5a1f,#ffb347,#1f9d57,#5566ef,#9b46ff,#ff5a1f);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-gradmove 5s linear infinite}
.fx-stroke{-webkit-text-stroke:1.5px currentColor;color:transparent}
.fx-3dtext{text-shadow:1px 1px 0 #c2410c,2px 2px 0 #a8370b,3px 3px 0 #8a2d08,4px 4px 10px rgba(0,0,0,.35)}
.fx-shadow-long{text-shadow:4px 4px 0 rgba(120,70,30,.18),8px 8px 0 rgba(120,70,30,.1)}
.fx-retro{color:#ffb347;text-shadow:2px 2px 0 #e7261a,4px 4px 0 #8a2d08}
.fx-tracking{letter-spacing:.22em;text-transform:uppercase}
.fx-uppercase{text-transform:uppercase;letter-spacing:.05em}
.fx-underline-grow{position:relative;display:inline-block}.fx-underline-grow::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:currentColor;transition:width .3s}.fx-underline-grow:hover::after{width:100%}
.fx-balance{text-wrap:balance}
.fx-glitch{animation:fx-glitch 1.6s steps(2) infinite}
@keyframes fx-glitch{0%,100%{text-shadow:0 0 transparent}20%{text-shadow:-2px 0 #e7261a,2px 0 #5566ef}21%{text-shadow:0 0 transparent}50%{text-shadow:2px 0 #e7261a,-2px 0 #1f9d57}51%{text-shadow:0 0 transparent}70%{text-shadow:-1px 0 #5566ef,1px 0 #e7261a}}
.fx-dropcap::first-letter{float:left;font-size:3.4em;line-height:.78;font-weight:800;margin:4px 10px 0 0;color:#6e8cff}
/* Backgrounds / illusions */
.fx-aurora{position:relative;overflow:hidden;isolation:isolate}.fx-aurora::before{content:"";position:absolute;inset:-45%;z-index:-1;background:conic-gradient(from 0deg,#ff5a1f,#e7261a,#ffb347,#ff5a1f);filter:blur(70px);opacity:.35;animation:fx-spin 20s linear infinite}
.fx-mesh{background:radial-gradient(at 20% 20%,rgba(255,90,31,.18),transparent 50%),radial-gradient(at 80% 30%,rgba(231,38,26,.14),transparent 50%),radial-gradient(at 50% 90%,rgba(255,179,71,.16),transparent 50%)}
.fx-animated-gradient{background:linear-gradient(120deg,#faf3e8,#ffe8d0,#ffd9b8,#faf3e8);background-size:300% 300%;animation:fx-gradmove 8s ease infinite}
.fx-radial-pulse{position:relative;overflow:hidden}.fx-radial-pulse::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,90,31,.25),transparent 60%);animation:fx-breathe 4s ease-in-out infinite}
.fx-grid{background-image:linear-gradient(rgba(120,85,55,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(120,85,55,.12) 1px,transparent 1px);background-size:32px 32px}
.fx-dots{background-image:radial-gradient(rgba(120,85,55,.2) 1px,transparent 1px);background-size:20px 20px}
.fx-stripes{background:repeating-linear-gradient(45deg,rgba(120,70,30,.05) 0 12px,transparent 12px 24px)}
.fx-noise{position:relative}.fx-noise::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fx-scanlines{position:relative}.fx-scanlines::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(rgba(0,0,0,.04) 0 1px,transparent 1px 3px)}
.fx-vignette{position:relative}.fx-vignette::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px rgba(40,20,8,.35)}
.fx-starfield{background:#1a0e08 radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#ffb347,transparent),radial-gradient(1px 1px at 40% 80%,#fff,transparent);background-size:cover}
.fx-conic{background:conic-gradient(from 0deg,#faf3e8,#f3e8d6,#ece0c9,#faf3e8)}
.fx-blob{border-radius:42% 58% 63% 37%/41% 44% 56% 59%;animation:fx-blob 9s ease-in-out infinite}
@keyframes fx-blob{0%,100%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%}50%{border-radius:62% 38% 41% 59%/57% 63% 37% 43%}}
/* Buttons / cards / shapes / filters */
.fx-pill{border-radius:999px}
.fx-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:24px;box-shadow:0 18px 40px -22px rgba(120,70,30,.3)}
.fx-clip-slant{clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
.fx-outline-offset{outline:2px solid #6e8cff;outline-offset:6px}
.fx-duotone{filter:grayscale(1) sepia(.6) hue-rotate(-20deg) saturate(3)}
.fx-marquee{white-space:nowrap;overflow:hidden;animation:fx-scrollx 16s linear infinite}
@keyframes fx-scrollx{from{transform:translateX(30px)}to{transform:translateX(-100%)}}
.fx-sticky{position:sticky;top:14px;z-index:40}
.fx-skeleton{background:linear-gradient(100deg,rgba(120,85,55,.08) 30%,rgba(120,85,55,.2) 50%,rgba(120,85,55,.08) 70%);background-size:200% 100%;animation:fx-skel 1.4s infinite;color:transparent!important;border-radius:8px}
@keyframes fx-skel{to{background-position:-200% 0}}

/* ── editor click-preview: .fx-prev mirrors the :hover/:active state of
   interaction effects for ~1.6s so you can see them without hovering. Only the
   editor adds .fx-prev; it is never persisted, so real visitors keep the hover. ── */
.fx-tilt.fx-prev{transform:perspective(700px) rotateX(7deg) rotateY(-7deg) scale(1.03)}
.fx-lift.fx-prev{transform:translateY(-5px);box-shadow:0 22px 50px -16px rgba(0,0,0,.4)}
.fx-press.fx-prev{transform:translateY(2px) scale(.98)}
.fx-scale.fx-prev{transform:scale(1.06)}
.fx-rotate.fx-prev{transform:rotate(3deg)}
.fx-grow-rotate.fx-prev{transform:scale(1.06) rotate(-2deg)}
.fx-skew-hover.fx-prev{transform:skewX(-6deg)}
.fx-fill-up.fx-prev::before{transform:translateY(0)}
.fx-grayscale.fx-prev{filter:grayscale(0)}
.fx-invert.fx-prev{filter:invert(1)}
.fx-blur-hover.fx-prev{filter:blur(3px)}
.fx-saturate.fx-prev{filter:saturate(1.6)}
.fx-border-draw.fx-prev::after{transform:scale(1);opacity:1}
.fx-card-3d.fx-prev{transform:perspective(900px) rotateX(4deg) rotateY(-4deg) translateY(-4px)}
.fx-shake.fx-prev{animation:fx-shake .4s}
.fx-shine.fx-prev::after{left:130%}
.fx-btn-glow.fx-prev{box-shadow:0 10px 36px -6px #b46dff;transform:translateY(-2px)}
.fx-underline-grow.fx-prev::after{width:100%}

@media (prefers-reduced-motion: reduce){ [class*="fx-"]{animation:none!important} }