/* The design system's own sheet, as the redesign boards use it, copied here so the static site
   needs nothing from apps/web. Keep it in step with the boards' lumina.css, not edited apart. */
/* Lumina · refined space — v2, the craft pass.
   The shared tokens and components every artboard uses.
   One accent (gold) for selection and credits only; the one main action per screen is a
   white pill; secondary is a soft glass pill; tertiary is text.
   Every control answers in under 100 ms: hover in 120 ms, press is instant, release springs. */
:root {
  --bg: #07080d;
  --bg-2: #0a0c13;
  --surface: #10121a;
  --surface-2: #161923;
  --surface-3: #1e2230;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --line-3: rgba(255, 255, 255, 0.2);
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --ink: #f4f5f8;
  --ink-2: #b0b5c5;
  --ink-3: #868ca1;
  --gold: #f2b65a;
  --gold-2: #ffcf87;
  --gold-soft: rgba(242, 182, 90, 0.12);
  --gold-line: rgba(242, 182, 90, 0.5);
  --ring: 0 0 0 3px rgba(242, 182, 90, 0.32);
  --good: #5fd3a0;
  --bad: #f28b8b;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --my: "Noto Sans Myanmar", "Myanmar Text", "Padauk", sans-serif;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  /* Motion: out for things arriving, spring for things the hand let go of. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: linear(0, 0.157 4.2%, 0.512 9.6%, 0.86 15.6%, 1.04 21.4%, 1.1 26.7%, 1.07 33%, 1.01 41%, 0.99 52%, 1);
  --t-1: 120ms;
  --t-2: 200ms;
  --t-3: 320ms;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 30px 80px -20px rgba(0, 0, 0, 0.75), 0 8px 24px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

.lu {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  font-size: 14px;
  line-height: 1.5;
}
.lu ::selection { background: rgba(242, 182, 90, 0.3); color: #fff; }
.lu * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }

/* The sky: a faint, fixed starfield and one soft glow from above. Never planets. */
.space {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -12%, rgba(124, 140, 255, 0.14), transparent 70%),
    radial-gradient(ellipse 42% 38% at 88% 92%, rgba(139, 123, 255, 0.11), transparent 70%),
    radial-gradient(ellipse 38% 32% at 6% 78%, rgba(62, 200, 255, 0.07), transparent 70%),
    radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(1px 1px at 78% 14%, rgba(255, 255, 255, 0.3), transparent 60%),
    radial-gradient(1px 1px at 64% 72%, rgba(255, 255, 255, 0.26), transparent 60%),
    radial-gradient(1px 1px at 32% 84%, rgba(255, 255, 255, 0.24), transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 58%, rgba(255, 255, 255, 0.34), transparent 60%),
    radial-gradient(1px 1px at 46% 40%, rgba(255, 255, 255, 0.2), transparent 60%),
    radial-gradient(1px 1px at 6% 66%, rgba(255, 255, 255, 0.26), transparent 60%);
}

/* Type — size carries hierarchy, not weight. Large type is lighter and tighter;
   small type is a touch heavier and looser so it stays crisp on dark. */
.display { font: 560 46px/1.06 var(--sans); letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.h1 { font: 580 32px/1.12 var(--sans); letter-spacing: -0.028em; margin: 0; text-wrap: balance; }
.h2 { font: 590 20px/1.28 var(--sans); letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.h3 { font: 590 15px/1.35 var(--sans); letter-spacing: -0.006em; margin: 0; }
.body { font: 400 15px/1.6 var(--sans); color: var(--ink-2); margin: 0; text-wrap: pretty; }
.small { font: 420 13px/1.5 var(--sans); color: var(--ink-2); margin: 0; letter-spacing: 0.002em; }
.label { font: 500 12.5px/1.4 var(--sans); color: var(--ink-3); margin: 0; letter-spacing: 0.006em; }
.eyebrow { font: 560 11.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.my { font-family: var(--my); line-height: 1.7; }

/* Buttons: pill, 40 high, one primary per screen.
   Rest → hover (lifts 1 px, brightens) → press (sinks to 97 %, instant) → release (springs back).
   Focus is a soft gold ring, never the browser's box. Loading keeps the width and the label. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  font: 540 14px/1 var(--sans); letter-spacing: -0.005em; white-space: nowrap; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; box-sizing: border-box; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease), color var(--t-1) var(--ease),
    box-shadow var(--t-2) var(--ease), transform var(--t-3) var(--spring), opacity var(--t-1) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.97); transition-duration: 0s; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary {
  background: linear-gradient(180deg, #ffffff 0%, #e6e8ef 100%); color: #07080d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 22px -10px rgba(255, 255, 255, 0.35);
}
.btn-primary:hover { background: #ffffff; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px -10px rgba(255, 255, 255, 0.5); }
.btn-primary:focus-visible { box-shadow: var(--ring), inset 0 1px 0 #fff; }
.btn-secondary {
  background: rgba(255, 255, 255, 0.045); color: var(--ink); border-color: var(--line-2);
  box-shadow: var(--hi), var(--shadow-1); backdrop-filter: blur(10px);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--line-3); }
.btn-ghost { background: transparent; color: var(--ink-2); padding: 0 12px; }
.btn-ghost:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); transform: none; }
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1206; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 24px -10px rgba(242, 182, 90, 0.7); }
.btn-danger { background: rgba(242, 139, 139, 0.12); color: var(--bad); border-color: rgba(242, 139, 139, 0.35); }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-color: rgba(7, 8, 13, 0.25) rgba(7, 8, 13, 0.25) rgba(7, 8, 13, 0.85) rgba(7, 8, 13, 0.25); animation: lu-spin 0.7s linear infinite; }
.btn-secondary.is-loading::after { border-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.9) rgba(255, 255, 255, 0.2); }
@keyframes lu-spin { to { transform: rotate(360deg); } }

/* Keyboard hints: shown in menus and tooltips so the fast way is always visible. */
.kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 6px; font: 500 11px/1 var(--mono); color: var(--ink-2); background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.4); }

/* Tooltip: dark glass, 6 px above, appears after 400 ms of hover and instantly for the next one. */
.tip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; background: rgba(28, 31, 43, 0.96); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); font: 500 12.5px/1 var(--sans); color: var(--ink); white-space: nowrap; }

/* Surfaces — a hairline edge and a 1 px top highlight, so cards read as lit from above. */
.card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 40%), var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--hi); }
.raised { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--hi); }
.glass { background: rgba(18, 20, 29, 0.78); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--hi), var(--shadow-3); backdrop-filter: blur(20px) saturate(140%); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
a.card, button.card { transition: border-color var(--t-1) var(--ease), background var(--t-1) var(--ease), transform var(--t-3) var(--spring), box-shadow var(--t-2) var(--ease); }
a.card:hover, button.card:hover { border-color: var(--line-2); }
a.card:active, button.card:active { transform: scale(0.99); transition-duration: 0s; }
a.card:focus-visible, button.card:focus-visible { outline: none; box-shadow: var(--ring); }

/* Chips and segmented controls — selection is the only place gold appears in UI. */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border-radius: 999px; font: 500 12.5px/1 var(--sans); color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap;
  transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
button.chip:hover { color: var(--ink); border-color: var(--line-2); }
.chip.on { background: var(--gold-soft); color: var(--gold); border-color: var(--gold-line); }
.chip.good { color: var(--good); background: rgba(95, 211, 160, 0.1); border-color: rgba(95, 211, 160, 0.35); }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.seg button {
  height: 30px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent;
  color: var(--ink-3); font: 520 13px/1 var(--sans); cursor: pointer;
  transition: background var(--t-2) var(--ease), color var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 3px rgba(0, 0, 0, 0.45); }
.seg button:focus-visible { outline: none; box-shadow: var(--ring); }

/* Inputs — the border brightens on hover and turns gold with a soft ring on focus. */
.field { display: grid; gap: 7px; }
.input {
  height: 44px; box-sizing: border-box; width: 100%; padding: 0 14px; border-radius: var(--r);
  background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line-2); color: var(--ink);
  font: 420 14px/1 var(--sans); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: border-color var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease), background var(--t-1) var(--ease);
}
.input:hover { border-color: var(--line-3); }
.input:focus { outline: none; border-color: var(--gold-line); box-shadow: var(--ring); background: rgba(0, 0, 0, 0.3); }
.input::placeholder { color: var(--ink-3); }
textarea.input { height: auto; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b0b5c5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 15px center; background-size: 10px 6px; background-repeat: no-repeat; padding-right: 38px; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 36px; height: 22px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-2); flex: none; cursor: pointer; transition: background var(--t-2) var(--ease); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #d9dce5; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transition: transform var(--t-3) var(--spring); }
.switch[aria-checked="true"] { background: var(--gold); border-color: transparent; }
.switch[aria-checked="true"]::after { transform: translateX(14px); background: #fff; }
input[type="range"] { accent-color: var(--gold); }
input[type="checkbox"] { accent-color: var(--gold); }

/* Top bar */
.topbar {
  display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 24px; box-sizing: border-box; flex: none;
  border-bottom: 1px solid var(--line); background: rgba(7, 8, 13, 0.72); backdrop-filter: blur(16px) saturate(140%);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 600 16px/1 var(--sans); letter-spacing: -0.01em; }
.nav { display: inline-flex; gap: 2px; }
.nav a { height: 34px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; color: var(--ink-2); text-decoration: none; font: 520 14px/1 var(--sans); transition: color var(--t-1) var(--ease), background var(--t-1) var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.credits { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); color: var(--ink); font: 520 13px/1 var(--sans); text-decoration: none; transition: border-color var(--t-1) var(--ease); }
.credits:hover { border-color: var(--gold-line); }
.credits i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(242, 182, 90, 0.6); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #2c2f40, #1b1e2a); color: var(--ink); font: 600 13px/1 var(--sans); border: 1px solid var(--line-2); flex: none; }

/* The logo, unchanged from the Studio: the disc, LUMINA in light Space Grotesk spaced wide,
   CREATOR STUDIO in small JetBrains Mono under it, and the gold BETA tag beside. */
.lockup { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; flex: none; }
.lockup img { width: 34px; height: 34px; border-radius: 999px; filter: drop-shadow(0 0 16px rgba(255, 178, 92, 0.5)) drop-shadow(0 0 34px rgba(90, 140, 255, 0.35)); }
.lockup-word { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.lockup b { font: 300 17px/1 "Space Grotesk", var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); }
.lockup small { font: 500 9.5px/1 "JetBrains Mono", var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.beta { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--gold-line); background: var(--gold-soft); color: var(--gold); font: 600 9.5px/1 "JetBrains Mono", var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.disc { border-radius: 999px; filter: drop-shadow(0 0 28px rgba(255, 178, 92, 0.45)) drop-shadow(0 0 60px rgba(90, 140, 255, 0.3)); }

/* The steps every project walks, one shape everywhere. */
.steps { display: inline-flex; align-items: center; gap: 6px; }
.steps a { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 6px; border-radius: 999px; color: var(--ink-3); text-decoration: none; font: 520 13px/1 var(--sans); transition: color var(--t-1) var(--ease), background var(--t-1) var(--ease); }
.steps a:hover { color: var(--ink); }
.steps a b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--sans); border: 1px solid var(--line-2); color: var(--ink-3); }
.steps a.done { color: var(--ink-2); }
.steps a.done b { background: var(--surface-3); border-color: transparent; color: var(--good); }
.steps a.now { color: var(--ink); background: rgba(255, 255, 255, 0.06); box-shadow: var(--hi); }
.steps a.now b { background: var(--ink); color: #07080d; border-color: transparent; }
.steps i { width: 16px; height: 1px; background: var(--line-2); }

/* A video frame placeholder: a still from the creator's footage would sit here. */
.still { position: relative; overflow: hidden; border-radius: var(--r); background: linear-gradient(160deg, #2b2a3d 0%, #1a2433 45%, #3a2a24 100%); }
.still.warm { background: linear-gradient(170deg, #4a3326 0%, #2a1d1a 50%, #13151d 100%); }
.still.cool { background: linear-gradient(170deg, #1d2c3f 0%, #182133 50%, #0f1219 100%); }
.still.green { background: linear-gradient(170deg, #22392f 0%, #18261f 50%, #0f1412 100%); }
.still.dusk { background: linear-gradient(170deg, #3b2742 0%, #24203a 50%, #11121b 100%); }

/* "Ask for a change": say it in words instead of hunting for the control. */
.ask { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 16px; border-radius: 999px; background: rgba(22, 25, 35, 0.9); border: 1px solid var(--line-2); box-shadow: var(--hi), 0 16px 40px rgba(0, 0, 0, 0.35); box-sizing: border-box; transition: border-color var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease); }
.ask:focus-within { border-color: var(--gold-line); box-shadow: var(--ring), 0 16px 40px rgba(0, 0, 0, 0.35); }
.ask input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font: 420 14.5px/1 var(--sans); outline: none; }
.ask input::placeholder { color: var(--ink-3); }
.ask .spark { color: var(--gold); flex: none; }

/* Takes: every version of one thing, newest last, the one in use marked — never replaced silently. */
.take-thumb { position: relative; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: border-color var(--t-1) var(--ease); }
.take-thumb.on { border-color: var(--gold); }
.take-thumb .tag { position: absolute; left: 6px; bottom: 6px; font: 500 10.5px/1 var(--sans); color: #fff; background: rgba(7, 8, 13, 0.6); padding: 4px 6px; border-radius: 6px; }

/* Sound: drawn as a flowing ribbon, not bars, in one vibrant sweep — cyan, violet, pink —
   so a voice reads as alive against the night. The front layer is brightest; the voice
   that is not selected goes quiet and grey. */
.wave { display: block; width: 100%; overflow: visible; }
.wave .w1 { fill: url(#lu-water); opacity: 0.95; }
.wave .w2 { fill: rgba(139, 123, 255, 0.3); }
.wave .w3 { fill: rgba(62, 230, 255, 0.16); }
.wave .crest { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.2; }
.wave.quiet .w1 { fill: rgba(134, 140, 161, 0.35); } .wave.quiet .w2 { fill: rgba(134, 140, 161, 0.18); } .wave.quiet .crest { stroke: rgba(176, 181, 197, 0.5); }
.wave.pool { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, #000 45%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, #000 45%, transparent 100%); mask-composite: intersect; }
.flow { animation: lu-flow 3.2s var(--ease-in-out) infinite alternate; transform-origin: center; }
@keyframes lu-flow { from { transform: scaleY(0.82); } to { transform: scaleY(1.06); } }

/* Toast: bottom centre, glass, one line, an undo when something was removed. */
.toast { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 8px 0 16px; border-radius: 999px; background: rgba(28, 31, 43, 0.96); border: 1px solid var(--line-2); box-shadow: var(--shadow-3); font: 500 13.5px/1 var(--sans); color: var(--ink); }

.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--ink-3); }
.dot.good { background: var(--good); }
.dot.gold { background: var(--gold); }

@media (prefers-reduced-motion: reduce) { .lu *, .lu *::before, .lu *::after { transition-duration: 0s !important; animation: none !important; } }


/* ---------------------------------------------------------------- glass
   Liquid glass, the way Apple, CapCut and ElevenLabs do it: surfaces are see-through and
   frosted, lit along the top edge, with a faint rim of light that catches at the corner.
   Gold is still the only accent; the AI-made things (asking for a change, cleaning up,
   trying a voice) carry the same cyan-violet-pink sweep as the voice waves. */
:root {
  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  --glass-blur: blur(24px) saturate(170%);
  --glass-edge: rgba(255, 255, 255, 0.1);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  --aurora: linear-gradient(90deg, #3ee6ff, #8b7bff, #ff5fd2, #8b7bff, #3ee6ff);
}
/* The rim: a 1 px gradient border, bright at the top-left, gone by the middle. */
.lu .card, .lu .raised, .lu .glass, .lu .btn-secondary, .lu .seg, .lu .tip, .lu .toast { position: relative; isolation: isolate; }
.lu .card::before, .lu .raised::before, .lu .glass::before, .lu .btn-secondary::before, .lu .seg::before, .lu .tip::before, .lu .toast::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.07) 28%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.card { background: var(--glass-fill); border: 1px solid var(--glass-edge); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi), 0 18px 50px -18px rgba(0, 0, 0, 0.7); }
.raised { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: var(--glass-hi); }
.glass, .tip, .toast { background: linear-gradient(180deg, rgba(40, 42, 60, 0.62), rgba(22, 24, 36, 0.62)); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); box-shadow: var(--glass-hi), 0 30px 80px -20px rgba(0, 0, 0, 0.8); }
a.card:hover, button.card:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)); }

/* Buttons. The white pill becomes liquid: a lens of light, and a sheen that sweeps
   across once when you point at it. Secondary is clear glass. */
.btn-primary {
  background: linear-gradient(180deg, #ffffff 0%, #f1f2f7 48%, #dfe2ea 100%); color: #07080d;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 5px rgba(20, 24, 40, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.35), 0 12px 32px -12px rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.95) 50%, transparent 65%);
  background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: overlay; opacity: 0;
  transition: background-position 0.9s var(--ease), opacity 0.2s var(--ease);
}
.btn-primary:hover::before { opacity: 1; background-position: -30% 0; }
.btn-primary:hover { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 5px rgba(20, 24, 40, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.5), 0 14px 40px -12px rgba(255, 255, 255, 0.65); }
.btn-secondary {
  background: var(--glass-fill); border-color: rgba(255, 255, 255, 0.12); color: var(--ink);
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 22px -10px rgba(0, 0, 0, 0.7);
}
.btn-secondary:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)); border-color: rgba(255, 255, 255, 0.2); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* AI actions: dark glass inside a slowly turning aurora rim, with a soft glow. */
.btn-ai, .ai-ring {
  border: 1px solid transparent !important;
  background: linear-gradient(180deg, rgba(30, 28, 48, 0.94), rgba(16, 16, 28, 0.94)) padding-box, var(--aurora) border-box !important;
  background-size: 100% 100%, 300% 100% !important;
  animation: lu-aurora 7s linear infinite;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 26px -8px rgba(139, 123, 255, 0.65), 0 0 40px -18px rgba(62, 230, 255, 0.5);
}
.btn-ai { color: #fff; }
.btn-ai:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 32px -6px rgba(139, 123, 255, 0.8), 0 0 50px -16px rgba(255, 95, 210, 0.55); }
.btn-ai .spark, .ai-ring .spark { color: #b9a6ff; }
@keyframes lu-aurora { to { background-position: 0 0, 300% 0; } }
.ask { border: 1px solid transparent; background: linear-gradient(180deg, rgba(30, 28, 48, 0.88), rgba(16, 16, 28, 0.88)) padding-box, var(--aurora) border-box; background-size: 100% 100%, 300% 100%; animation: lu-aurora 9s linear infinite; backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 30px -10px rgba(139, 123, 255, 0.55), 0 18px 44px -14px rgba(0, 0, 0, 0.7); }
.ask:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 40px -6px rgba(139, 123, 255, 0.8), 0 18px 44px -14px rgba(0, 0, 0, 0.7); }
.ask .spark { color: #b9a6ff; }

/* Controls: a clear glass track; the chosen segment is a lens that catches the light. */
.seg { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.09); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.seg button.on { background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 3px 10px rgba(0, 0, 0, 0.45); }
.chip { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.09); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.input { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.04); }
.input:focus { background: rgba(255, 255, 255, 0.05); }
.kbd { background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)); border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.5); }
.credits, .avatar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)); border-color: rgba(255, 255, 255, 0.11); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.steps a.now { background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 14px -6px rgba(0, 0, 0, 0.6); }
.nav a.on { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.topbar { background: rgba(9, 10, 17, 0.5); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); border-bottom-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.03), 0 10px 30px -20px rgba(0, 0, 0, 0.8); }
.switch { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); }
.switch::after { background: linear-gradient(180deg, #fff, #dcdfe8); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(0, 0, 0, 0.1); }
@media (prefers-reduced-motion: reduce) { .btn-ai, .ai-ring, .ask { animation: none; } }


/* ---------------------------------------------------------------- finish
   The last coat. Nothing moves; things are lit a little better. Headlines catch light from
   above, edges fade instead of stopping, the sky has a fine grain like film, cards sit on a
   deeper, softer shadow, and gold is a warm metal rather than a flat yellow. */
:root {
  --gold-metal: linear-gradient(135deg, #ffe2a8 0%, #f2b65a 45%, #c98f3a 100%);
  --shadow-soft: 0 1px 1px rgba(0, 0, 0, 0.25), 0 8px 24px -10px rgba(0, 0, 0, 0.55), 0 30px 70px -30px rgba(0, 0, 0, 0.75);
}
/* Headlines: white at the top, a breath of silver at the base. Coloured words keep their colour. */
.display, .h1 { background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #c8ccd8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.display [style*="color"], .h1 [style*="color"] { -webkit-text-fill-color: currentColor; }
.h2 { letter-spacing: -0.018em; }
.eyebrow { letter-spacing: 0.12em; font-weight: 540; color: #8f95aa; }
/* The sky: a fine film grain and a gentle vignette, so it has depth instead of flat black. */
.space { position: relative; }
.lu.space::after, .lu .space::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
  opacity: 0.55; mix-blend-mode: overlay;
}
.lu.space > *, .lu .space > * { position: relative; z-index: 1; }
.lu.space > [style*="position: absolute"], .lu .space > [style*="position: absolute"] { position: absolute; }
/* Hairlines fade out at both ends. */
.divider { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 18%, rgba(255, 255, 255, 0.1) 82%, transparent); }
.topbar { border-bottom-color: transparent; background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.08) 80%, transparent); background-size: 100% 1px; background-position: bottom; background-repeat: no-repeat; }
/* Cards rest on a deeper, softer shadow and lift a touch when they can be pressed. */
.card { box-shadow: var(--glass-hi), var(--shadow-soft); }
a.card:hover, button.card:hover { transform: translateY(-2px); box-shadow: var(--glass-hi), 0 2px 2px rgba(0, 0, 0, 0.25), 0 16px 40px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06); }
/* Gold, as metal. */
.chip.on { background: linear-gradient(180deg, rgba(242, 182, 90, 0.2), rgba(242, 182, 90, 0.08)); border-color: rgba(255, 214, 150, 0.45); color: #ffd48e; box-shadow: inset 0 1px 0 rgba(255, 236, 200, 0.18), 0 0 18px -8px rgba(242, 182, 90, 0.6); }
.btn-gold { background: var(--gold-metal); box-shadow: inset 0 1px 0 rgba(255, 245, 225, 0.7), inset 0 -1px 2px rgba(120, 70, 10, 0.3), 0 10px 28px -10px rgba(242, 182, 90, 0.7); }
.credits i, .dot.gold { background: radial-gradient(circle at 35% 30%, #fff1cf, #f2b65a 55%, #c98f3a); }
.steps a.now b { background: linear-gradient(180deg, #ffffff, #dfe2ea); box-shadow: 0 0 12px -2px rgba(255, 255, 255, 0.5); }
.steps a.done b { background: rgba(95, 211, 160, 0.12); }
/* Footage frames: a lit rim and a soft fall-off at the bottom, like a thumbnail on glass. */
.still { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.still::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%, transparent 65%, rgba(0, 0, 0, 0.28)); }
/* Numbers and keys: tabular and calm. */
.num { font-feature-settings: "tnum", "zero"; }
.lu ::-webkit-scrollbar { width: 8px; height: 8px; }
.lu ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }