/* Negative — Apple-style glass studio.
   Layout: floating glass nav pill; centred hero; studio = viewer column (stage with floating transport,
   timeline, caption list) + glass inspector built like iOS Settings; then steps, FAQ, footer.
   Deliberately dark-only, like a pro video app: frosted panels float over a slow aurora. */
:root{
  color-scheme: dark;
  --bg:#05060a;
  --fg:#f5f5f7;
  --muted:rgba(235,235,245,.62);
  --faint:rgba(235,235,245,.55);
  --stroke:rgba(255,255,255,.13);
  --stroke-soft:rgba(255,255,255,.07);
  --fill:rgba(120,120,128,.24);
  --fill-2:rgba(120,120,128,.36);
  --accent:#0a84ff;
  --accent-2:#5e5ce6;
  --pink:#ff375f;
  --orange:#ff9f0a;
  --green:#30d158;
  --purple:#bf5af2;
  --danger:#ff6961;
  /* canvas tokens read by app.js */
  --raise:rgba(255,255,255,.06); --line:rgba(255,255,255,.1); --base:#0a84ff; --inv:#ffffff;

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;

  --r-xl:30px; --r-lg:22px; --r-md:14px; --r-sm:10px;
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04) 40%,rgba(255,255,255,.03));
  --glass-blur:blur(34px) saturate(180%);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.02),0 30px 80px -30px rgba(0,0,0,.75);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.47 var(--font);letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}
img{max-width:100%}
a{color:var(--fg)}
svg{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
::selection{background:rgba(10,132,255,.45)}

/* ---------- ambient aurora ---------- */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;opacity:.42}
.aurora .a1{width:70vmax;height:70vmax;left:-24vmax;top:-30vmax;background:radial-gradient(circle,rgba(47,107,255,.95) 0%,rgba(47,107,255,.35) 30%,rgba(47,107,255,0) 68%)}
.aurora .a2{width:62vmax;height:62vmax;right:-22vmax;top:-16vmax;background:radial-gradient(circle,rgba(177,76,255,.9) 0%,rgba(177,76,255,.3) 30%,rgba(177,76,255,0) 68%)}
.aurora .a3{width:56vmax;height:56vmax;left:18vmax;top:34vh;background:radial-gradient(circle,rgba(255,61,127,.9) 0%,rgba(255,61,127,.25) 30%,rgba(255,61,127,0) 68%);opacity:.26}
.aurora .a4{width:46vmax;height:46vmax;right:-10vmax;bottom:-22vmax;background:radial-gradient(circle,rgba(255,159,10,.9) 0%,rgba(255,159,10,.25) 30%,rgba(255,159,10,0) 68%);opacity:.18}
.aurora::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(5,6,10,0) 0%,rgba(5,6,10,.55) 70%)}

/* ---------- glass primitives ---------- */
.glass{background:var(--glass-bg);border:1px solid var(--stroke);box-shadow:var(--glass-shadow)}
.nav.glass,.acct-menu.glass{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.glass-chip{background:rgba(28,28,32,.55);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 30px -10px rgba(0,0,0,.6)}
.card{border-radius:var(--r-xl);position:relative}

/* ---------- nav ---------- */
.nav-wrap{position:sticky;top:0;z-index:20;padding-top:calc(12px + env(safe-area-inset-top,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.nav{max-width:1180px;margin:0 auto;border-radius:999px;display:flex;align-items:center;gap:12px;padding:7px 7px 7px 10px;
  background:rgba(22,22,28,.55)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 17px/1 var(--display);letter-spacing:-.02em;margin-right:auto}
.brand img{width:30px;height:30px;border-radius:8px;box-shadow:0 4px 14px -4px rgba(10,132,255,.6)}
.nav-links{display:flex;gap:4px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;padding:7px 12px;border-radius:999px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--fg);background:rgba(255,255,255,.08)}
@media (max-width:640px){.nav-links{display:none}}

.page{position:relative;z-index:1;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(56px,8vw,96px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:8px 48px}

/* ---------- hero ---------- */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding-top:clamp(40px,7vw,84px)}
.pill-badge{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--muted);padding:7px 14px 7px 10px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--stroke-soft);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.pill-badge svg{width:15px;height:15px;fill:#ffd60a}
.hero h1{margin:0;font:700 clamp(42px,8.4vw,96px)/1.02 var(--display);letter-spacing:-.045em;text-wrap:balance;max-width:13ch;
  background:linear-gradient(180deg,#ffffff 30%,rgba(255,255,255,.72));-webkit-background-clip:text;background-clip:text;color:transparent}
.neg{position:relative;display:inline-block;isolation:isolate;padding:0 .08em;margin:0 -.02em;
  -webkit-text-fill-color:initial;background:none}
.neg-plate{position:absolute;top:.1em;bottom:.04em;left:0;width:56%;border-radius:.16em;background:#f5f5f7;
  box-shadow:0 0 40px rgba(255,255,255,.25);animation:plate 5.5s cubic-bezier(.65,0,.35,1) infinite;will-change:transform}
.neg-text{position:relative;color:#fff;-webkit-text-fill-color:#fff;mix-blend-mode:difference}
@keyframes plate{0%,12%{transform:translateX(0)}45%,58%{transform:translateX(78.6%)}88%,100%{transform:translateX(0)}}
.lede{margin:0;max-width:56ch;font-size:clamp(16px,1.9vw,19px);line-height:1.5;color:var(--muted);text-wrap:pretty}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* ---------- buttons ---------- */
.btn{--h:44px;height:var(--h);padding:0 20px;border-radius:999px;border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px/1 var(--font);letter-spacing:-.01em;color:var(--fg);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .15s ease,filter .2s ease,background .2s ease,box-shadow .2s ease;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.btn-sm{--h:36px;padding:0 14px;font-size:14px}
.btn-lg{--h:52px;padding:0 26px;font-size:17px}
.btn-block{width:100%}
.btn-primary{color:#fff;background:linear-gradient(180deg,#0a6cff,#0057d9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 28px -10px rgba(10,132,255,.9)}
.btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.btn-glass{background:rgba(255,255,255,.1);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.btn-glass:hover:not(:disabled){background:rgba(255,255,255,.15)}
.btn-ai{color:#fff;position:relative;isolation:isolate;background:linear-gradient(110deg,#5e5ce6,#a33ee0 45%,#e0284f);
  background-size:200% 100%;animation:sheen 6s ease-in-out infinite;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 30px -12px rgba(191,90,242,.9)}
.btn-ai::before{content:"";width:18px;height:18px;flex:none;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2.5l1.6 4.6 4.6 1.6-4.6 1.6L10 14.9 8.4 10.3 3.8 8.7l4.6-1.6zM18 13l.9 2.6 2.6.9-2.6.9L18 20l-.9-2.6-2.6-.9 2.6-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2.5l1.6 4.6 4.6 1.6-4.6 1.6L10 14.9 8.4 10.3 3.8 8.7l4.6-1.6zM18 13l.9 2.6 2.6.9-2.6.9L18 20l-.9-2.6-2.6-.9 2.6-.9z'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-ai:hover:not(:disabled){filter:brightness(1.1)}
@keyframes sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* ---------- studio ---------- */
.studio{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:20px;align-items:start;scroll-margin-top:90px}
@media (max-width:980px){.studio{grid-template-columns:minmax(0,1fr)}}
.viewer-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.viewer{padding:12px;display:flex;flex-direction:column;gap:12px}
.stage{position:relative;border-radius:22px;background:radial-gradient(ellipse at 50% 30%,#16171d,#050507 75%);
  display:grid;place-items:center;padding:18px 18px 82px;min-height:320px;cursor:pointer;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.stage canvas{display:block;max-width:100%;max-height:min(64vh,720px);width:auto;height:auto;border-radius:14px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.chip-src{position:absolute;top:14px;left:14px;max-width:calc(100% - 28px);font-size:12px;color:var(--muted);padding:6px 12px;border-radius:999px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;font-variant-numeric:tabular-nums}
.chip-src strong{color:var(--fg);font-weight:600}
.transport{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  padding:6px 8px 6px 6px;border-radius:999px;cursor:default;max-width:calc(100% - 24px)}
.play{width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#000;display:grid;place-items:center;cursor:pointer;flex:none;
  box-shadow:0 6px 20px -6px rgba(255,255,255,.5);transition:transform .15s}
.play:active{transform:scale(.92)}
.play svg{width:22px;height:22px;fill:currentColor;grid-area:1/1}
.play .i-play{display:none}
.play.paused .i-play{display:block}
.play.paused .i-pause{display:none}
.tc{font:500 14px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap;letter-spacing:0}
.sep{width:1px;height:22px;background:rgba(255,255,255,.16)}
.tbtn{height:34px;border-radius:999px;border:0;background:rgba(255,255,255,.1);color:var(--fg);font:600 13px var(--font);
  display:inline-flex;align-items:center;gap:6px;padding:0 12px 0 10px;cursor:pointer;white-space:nowrap}
.tbtn:hover{background:rgba(255,255,255,.17)}
.tbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (max-width:460px){.tbtn span{display:none}.tbtn{padding:0 9px}.tc{font-size:13px}}
.drop{position:absolute;inset:10px;border-radius:18px;display:grid;place-content:center;justify-items:center;gap:10px;
  font:600 19px var(--display);letter-spacing:-.02em;color:#fff;background:rgba(10,132,255,.18);
  border:2px dashed rgba(100,170,255,.8);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.drop svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.timeline canvas{display:block;width:100%;height:64px;border-radius:14px;cursor:pointer;touch-action:none}

/* ---------- captions list ---------- */
.captions{padding:18px 14px 12px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;padding:0 6px 10px}
.card-head h2{margin:0;font:700 20px/1.2 var(--display);letter-spacing:-.025em;display:flex;align-items:center;gap:8px}
.count{font:600 12px/1 var(--font);padding:4px 8px;border-radius:999px;background:rgba(10,132,255,.2);color:#64b0ff;font-variant-numeric:tabular-nums}
.hint{margin:0;font-size:13px;color:var(--muted)}
.hint code{font:500 12px var(--mono);padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.08);color:var(--fg)}
.hint em{font-family:"Instrument Serif",Georgia,serif;font-size:1.2em;color:var(--fg)}
.cues{list-style:none;margin:0;padding:0;max-height:360px;overflow:auto;display:flex;flex-direction:column;gap:2px;position:relative;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.cue{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:6px;align-items:center;padding:4px 6px;border-radius:14px;
  transition:background .2s}
.cue:hover{background:rgba(255,255,255,.04)}
.cue.on{background:linear-gradient(90deg,rgba(10,132,255,.22),rgba(94,92,230,.12));box-shadow:inset 0 0 0 1px rgba(10,132,255,.35)}
.cue-time{font:500 12px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--muted);background:rgba(255,255,255,.07);border:0;
  padding:7px 9px;border-radius:999px;cursor:pointer}
.cue.on .cue-time{background:var(--accent);color:#fff}
.cue-time:hover{color:var(--fg)}
.cue-text{font:500 15px var(--font);letter-spacing:-.01em;width:100%;min-width:0;background:transparent;color:var(--fg);border:1px solid transparent;
  border-radius:10px;padding:8px 10px;transition:background .2s,border-color .2s}
.cue-text:hover{background:rgba(255,255,255,.05)}
.cue-text:focus{outline:none;background:rgba(255,255,255,.08);border-color:rgba(10,132,255,.7)}
.icon{width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;
  transition:background .2s,color .2s}
.icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon:hover{background:rgba(255,255,255,.1);color:var(--fg)}
.icon.del:hover{color:var(--danger);background:rgba(255,105,97,.14)}
.empty{font-size:14px;color:var(--muted);padding:18px 8px;margin:0;text-align:center}

/* ---------- inspector (iOS Settings style) ---------- */
.inspector{padding:8px 18px;position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
@media (max-width:980px){.inspector{position:relative;top:0;max-height:none;overflow:visible}}
.sec{display:flex;flex-direction:column;gap:12px;padding-block:18px}
.sec+.sec{border-top:1px solid var(--stroke-soft)}
.sec-h{margin:0;display:flex;align-items:center;gap:10px;font:700 17px/1.2 var(--display);letter-spacing:-.02em}
.ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.ico svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico svg .fill{fill:#fff;stroke:none}
.ico-lg{width:46px;height:46px;border-radius:13px}
.ico-lg svg{width:24px;height:24px}
.ico-blue{background:linear-gradient(180deg,#3ea2ff,#0a6cff)}
.ico-purple{background:linear-gradient(180deg,#a874ff,#6f42f0)}
.ico-pink{background:linear-gradient(180deg,#ff6b8f,#ff2d55)}
.ico-orange{background:linear-gradient(180deg,#ffb340,#ff8a00)}
.note{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.note.warn{color:#ffb340}
.field{display:flex;flex-direction:column;gap:7px}
.field>label,.label{font-size:13px;color:var(--muted);font-weight:500}

.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:2px;border-radius:11px;background:var(--fill)}
.seg button{height:32px;border:0;border-radius:9px;background:transparent;color:var(--fg);font:500 13px var(--font);letter-spacing:-.01em;
  cursor:pointer;min-width:0;padding:0 4px;transition:background .2s,box-shadow .2s;font-variant-numeric:tabular-nums}
.seg.seg-3{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
.seg button:hover:not([aria-pressed="true"]){background:rgba(255,255,255,.06)}
.seg button[aria-pressed="true"]{background:#636366;font-weight:600;
  box-shadow:0 3px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12)}

.select{position:relative}
.select::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;margin-top:-6px;border:solid var(--muted);border-width:0 2px 2px 0;
  transform:rotate(45deg);pointer-events:none}
.select select{appearance:none;-webkit-appearance:none;width:100%;height:44px;border-radius:12px;border:1px solid var(--stroke-soft);background:var(--fill);
  color:var(--fg);font:500 15px var(--font);padding:0 36px 0 14px;cursor:pointer}
.select select option{background:#1c1c1e;color:var(--fg)}

.progress{height:4px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}
.progress i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#64d2ff);transition:width .25s}
#aiBar i{background:linear-gradient(90deg,#5e5ce6,#bf5af2,#ff375f)}
.progress.busy i{width:40%!important;animation:indet 1.2s ease-in-out infinite}
@keyframes indet{from{transform:translateX(-110%)}to{transform:translateX(260%)}}

.disclose{border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--stroke-soft)}
.disclose summary{list-style:none;cursor:pointer;padding:12px 14px;font-size:14px;font-weight:500;color:var(--fg);display:flex;align-items:center;justify-content:space-between;gap:10px}
.disclose summary::-webkit-details-marker{display:none}
.disclose summary::after{content:"";width:7px;height:7px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .25s;flex:none}
.disclose[open] summary::after{transform:rotate(45deg)}
.disclose .stack{display:flex;flex-direction:column;gap:10px;padding:0 12px 12px}
textarea{font:400 14px/1.45 var(--font);color:var(--fg);background:rgba(0,0,0,.25);border:1px solid var(--stroke-soft);border-radius:12px;
  padding:10px 12px;width:100%;min-height:110px;resize:vertical}
textarea:focus{outline:none;border-color:rgba(10,132,255,.7)}
textarea::placeholder{color:var(--faint)}

/* presets: live preview of the effect on a split light/dark plate */
.presets{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.preset{border:0;padding:0;background:none;color:var(--fg);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:7px;min-width:0;width:100%}
.preset .pv{width:100%}
.preset .pv{height:66px;border-radius:14px;position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(90deg,#ece9e4 0 50%,#16161a 50% 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .2s,transform .2s}
.preset .pv .b{font:800 1em "Inter Tight","Inter",sans-serif;letter-spacing:-.03em}
.preset .pv .s{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:1.22em;letter-spacing:-.01em}
.preset .pv .xl{font-size:1.5em}
.preset small{font-size:12px;color:var(--muted);padding-left:2px}
.preset:hover .pv{transform:translateY(-1px)}
.preset[aria-pressed="true"] .pv{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent),0 10px 24px -10px rgba(10,132,255,.8)}
.preset[aria-pressed="true"] small{color:var(--fg)}

.group{border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--stroke-soft);padding:4px 14px}
.group>*+*{border-top:1px solid var(--stroke-soft)}
.slider{padding:10px 0 6px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.row output{font:500 13px var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;font-size:14px}
.toggle-row label{cursor:pointer}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:2px 0 0;cursor:pointer;--p:50%}
input[type=range]:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0 var(--p),rgba(255,255,255,.16) var(--p) 100%)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.08);transition:transform .15s}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.1)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(10,132,255,.5),0 2px 8px rgba(0,0,0,.35)}
input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:rgba(255,255,255,.16)}
input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:var(--accent)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}

.switch{-webkit-appearance:none;appearance:none;width:51px;height:31px;border-radius:999px;background:var(--fill-2);position:relative;cursor:pointer;
  flex:none;margin:0;transition:background .25s}
.switch::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.05);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.switch:checked{background:var(--green)}
.switch:checked::before{transform:translateX(20px)}
.switch:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

#result{width:100%;max-height:320px;border-radius:16px;background:#000;box-shadow:0 0 0 1px var(--stroke-soft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two:has(#shareBtn[hidden]) #saveBtn{grid-column:1/-1}
.two:has(#saveBtn[hidden]){display:none}
.srt{font:12px/1.45 var(--mono);min-height:140px}

/* ---------- info sections ---------- */
.info{display:flex;flex-direction:column;gap:22px;scroll-margin-top:90px}
.info-h{margin:0;font:700 clamp(30px,4.4vw,48px)/1.06 var(--display);letter-spacing:-.04em;text-align:center;text-wrap:balance}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:820px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{padding:24px;display:flex;flex-direction:column;gap:10px;border-radius:var(--r-lg)}
.steps h3{margin:6px 0 0;font:700 19px/1.2 var(--display);letter-spacing:-.02em}
.steps p{margin:0;color:var(--muted);font-size:15px}
.faq{max-width:780px;width:100%;margin:0 auto;padding:6px 22px;border-radius:var(--r-lg)}
.faq details{border-top:1px solid var(--stroke-soft)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font:600 16px/1.35 var(--font);letter-spacing:-.01em;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:22px;height:22px;flex:none;border-radius:50%;background:rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 18px;color:var(--muted);font-size:15px;max-width:65ch}

.foot{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:13px;color:var(--faint);padding-top:8px}
.foot p{margin:0;max-width:70ch}
.foot a{color:var(--muted)}

/* privacy page */
.doc{max-width:68ch;margin:0 auto;padding:clamp(28px,5vw,48px);display:flex;flex-direction:column;gap:14px;border-radius:var(--r-xl)}
.doc h1{font:700 clamp(32px,5vw,48px)/1.05 var(--display);letter-spacing:-.04em;margin:0}
.doc h2{font:600 19px var(--display);letter-spacing:-.02em;margin:12px 0 0}
.doc p,.doc li{color:var(--muted);margin:0}
.doc ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav.glass,.acct-menu.glass{background:rgba(28,28,34,.94)}
  .glass-chip{background:rgba(28,28,34,.95)}
}

/* =========================================================
   Accounts, plans and paywall
   ========================================================= */
.auth{display:flex;align-items:center;gap:8px}
.icon-only{width:36px;padding:0}
@media (max-width:640px){.hide-sm{display:none}}
.avatar-btn{display:flex;align-items:center;gap:8px;height:36px;padding:3px 10px 3px 3px;border-radius:999px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.08);color:var(--fg);cursor:pointer}
.avatar-btn:hover{background:rgba(255,255,255,.14)}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--font);color:#fff;letter-spacing:.02em;flex:none;
  background:linear-gradient(135deg,#0a6cff,#5e5ce6);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.avatar-lg{width:44px;height:44px;font-size:16px}
.plan-pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font:700 11px/1 var(--font);letter-spacing:.02em;
  color:var(--fg);background:rgba(255,255,255,.12);white-space:nowrap}
.plan-pill.plan-pro{color:#fff;background:linear-gradient(135deg,#0a6cff,#5e5ce6)}
.plan-pill.plan-max{color:#fff;background:linear-gradient(120deg,#a33ee0,#e0284f 55%,#c2410c)}

.nav-wrap{position:sticky}
.acct-menu{position:absolute;right:max(16px,calc((100% - 1180px)/2));top:calc(64px + env(safe-area-inset-top,0px));width:300px;max-width:calc(100% - 32px);
  border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:14px;background:rgba(30,30,36,.72);z-index:30;
  animation:pop .22s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.am-head{display:flex;align-items:center;gap:12px;min-width:0}
.am-id{display:flex;flex-direction:column;min-width:0}
.am-id b{font:600 16px var(--display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-id span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-plan{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05)}
.am-usage{font-size:12px;color:var(--muted)}
.am-actions{display:flex;flex-direction:column;gap:8px}
.am-demo{margin:0;font-size:11px;color:var(--faint);text-align:center}

.planbar{display:flex;align-items:center;gap:10px;margin:10px 0 2px;padding:10px 10px 10px 12px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid var(--stroke-soft)}
.planbar .pb-text{flex:1;min-width:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planbar.plan-max{background:linear-gradient(120deg,rgba(191,90,242,.14),rgba(255,55,95,.1),rgba(255,159,10,.08))}
.quota{margin:-4px 0 0;font-size:12px;color:var(--muted);text-align:center}
.quota b{color:var(--fg)}

/* locks */
.lock-tag{display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:999px;font:800 9px/1 var(--font);letter-spacing:.06em;
  color:#fff;background:linear-gradient(120deg,#a33ee0,#e0284f 60%,#c2410c);vertical-align:middle;margin-left:6px}
.seg button.locked{color:var(--muted)}
.seg button.locked::after{content:"";display:inline-block;width:9px;height:10px;margin-left:5px;vertical-align:-1px;background:currentColor;opacity:.8;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3 6V4a3 3 0 0 1 6 0v2h.5A1.5 1.5 0 0 1 11 7.5v5A1.5 1.5 0 0 1 9.5 14h-7A1.5 1.5 0 0 1 1 12.5v-5A1.5 1.5 0 0 1 2.5 6zm1.5 0h3V4a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3 6V4a3 3 0 0 1 6 0v2h.5A1.5 1.5 0 0 1 11 7.5v5A1.5 1.5 0 0 1 9.5 14h-7A1.5 1.5 0 0 1 1 12.5v-5A1.5 1.5 0 0 1 2.5 6zm1.5 0h3V4a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.preset .pv .lk{position:absolute;top:6px;right:6px;z-index:2;mix-blend-mode:normal;font:800 9px/1 var(--font);letter-spacing:.06em;color:#fff;
  padding:4px 6px;border-radius:999px;background:linear-gradient(120deg,#0a6cff,#5e5ce6)}
.preset .pv .lk[hidden]{display:none}
.preset .pv .pvt{color:#fff;mix-blend-mode:difference;font-size:20px;line-height:1;white-space:nowrap}
.preset.locked .pv{filter:saturate(.6)}
.extras .xr-label{display:flex;align-items:center;flex-wrap:wrap;gap:2px 0;font-size:14px;min-width:0}
.extras .xr-label small{flex-basis:100%;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swatch{width:32px;height:32px;border-radius:50%;border:0;padding:3px;cursor:pointer;flex:none;
  background:conic-gradient(#ff375f,#ff9f0a,#ffd60a,#30d158,#64d2ff,#0a84ff,#bf5af2,#ff375f)}
.swatch i{display:block;width:100%;height:100%;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--bg)}

/* pricing */
.info-top{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.info-sub{margin:0;color:var(--muted);font-size:17px;max-width:52ch}
.bill-seg{display:inline-grid;min-width:260px;border-radius:999px;padding:3px}
.bill-seg button{border-radius:999px;height:34px;padding:0 16px;font-size:14px}
.bill-seg .save{display:inline-block;margin-left:4px;font:700 11px var(--font);color:var(--green)}
.bill-seg button[aria-pressed="true"] .save{color:#d4ffde}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
@media (max-width:900px){.plans{grid-template-columns:minmax(0,1fr);max-width:460px;margin:0 auto;width:100%}}
.plan-card{border-radius:28px;padding:28px 24px 26px;display:flex;flex-direction:column;gap:14px;position:relative}
.plan-card header h3{margin:0;font:700 22px/1.1 var(--display);letter-spacing:-.02em}
.plan-card .pc-tag{margin:6px 0 0;color:var(--muted);font-size:14px}
.pc-price{display:flex;align-items:baseline;gap:4px;margin-top:6px}
.pc-price .amt{font:700 46px/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pc-price .per{color:var(--muted);font-size:15px}
.pc-sub{margin:-6px 0 4px;font-size:13px;color:var(--muted);min-height:1.4em}
.pc-list{list-style:none;margin:6px 0 0;padding:16px 0 0;border-top:1px solid var(--stroke-soft);display:flex;flex-direction:column;gap:11px}
.pc-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
.pc-list svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.plan-card.plan-free .pc-list svg{stroke:var(--muted)}
.plan-card.plan-pro{background:linear-gradient(180deg,rgba(10,132,255,.16),rgba(94,92,230,.06) 55%,rgba(255,255,255,.03));
  border-color:rgba(100,170,255,.45);box-shadow:var(--glass-shadow),0 0 0 1px rgba(10,132,255,.25),0 30px 90px -30px rgba(10,132,255,.6)}
.plan-card.plan-max{background:linear-gradient(180deg,rgba(191,90,242,.14),rgba(255,55,95,.06) 55%,rgba(255,255,255,.03));border-color:rgba(232,120,255,.32)}
.plan-card.plan-max .pc-list svg{stroke:#e98bff}
.plan-card.plan-max .amt{background:linear-gradient(120deg,#e3a2ff,#ff7aa0 55%,#ffc06b);-webkit-background-clip:text;background-clip:text;color:transparent}
.ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font:700 12px/1 var(--font);padding:7px 12px;border-radius:999px;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,#0a6cff,#5e5ce6);box-shadow:0 8px 20px -6px rgba(10,132,255,.8)}
.btn-max{color:#fff;background:linear-gradient(120deg,#a33ee0,#e0284f 55%,#c2410c);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 30px -12px rgba(255,55,95,.85)}
.btn-max:hover:not(:disabled){filter:brightness(1.08)}
.btn-white{color:#000;background:#fff;box-shadow:0 8px 24px -10px rgba(255,255,255,.5)}
.btn-white:hover{filter:brightness(.94)}
.fine{margin:0;text-align:center;font-size:13px;color:var(--faint)}

/* sheets (dialogs) */
.sheet{width:min(420px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;border:1px solid var(--stroke);border-radius:30px;padding:30px 24px 22px;
  color:var(--fg);background:linear-gradient(180deg,rgba(44,44,52,.82),rgba(26,26,32,.86));
  -webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 120px -20px rgba(0,0,0,.8);text-align:center}
.sheet[open]{display:flex;flex-direction:column;align-items:stretch;gap:14px;animation:sheetIn .32s cubic-bezier(.2,.9,.3,1.1)}
.sheet::backdrop{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@keyframes sheetIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:520px){
  .sheet{margin:auto auto 0;width:100%;max-width:100%;border-radius:30px 30px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
  @keyframes sheetIn{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
}
.sheet h2{margin:0;font:700 24px/1.15 var(--display);letter-spacing:-.025em;text-wrap:balance}
.sheet-sub{margin:-6px 0 4px;color:var(--muted);font-size:15px;text-wrap:pretty}
.sheet-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.sheet-x:hover{background:rgba(255,255,255,.16);color:var(--fg)}
.sheet-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.sheet-icon{width:64px;height:64px;border-radius:16px;margin:0 auto;box-shadow:0 14px 34px -10px rgba(10,132,255,.7)}
.si-providers,.si-form{display:flex;flex-direction:column;gap:10px}
.or{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:12px;margin:2px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--stroke-soft)}
.field-input{height:48px;border-radius:14px;border:1px solid var(--stroke);background:rgba(0,0,0,.25);color:var(--fg);font:500 16px var(--font);padding:0 16px;width:100%}
.field-input:focus{outline:none;border-color:rgba(10,132,255,.8);box-shadow:0 0 0 4px rgba(10,132,255,.2)}
.field-input::placeholder{color:var(--faint)}
.si-err{margin:0;font-size:13px;color:var(--danger)}
.si-sent{display:flex;flex-direction:column;align-items:center;gap:12px}
.si-sent p{margin:0;color:var(--muted)}
.si-sent b{color:var(--fg)}
.sheet-fine{margin:0;font-size:12px;color:var(--faint)}
.sheet-fine a{color:var(--muted)}
.demo-note{color:#ffb340}
.pw-badge{width:56px;height:56px;border-radius:16px;margin:0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,#5e5ce6,#bf5af2 50%,#ff375f);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 40px -12px rgba(191,90,242,.9)}
.pw-badge svg{width:30px;height:30px;fill:#fff}
#paywall .bill-seg{margin:0 auto}
.pw-plans{display:flex;flex-direction:column;gap:10px;text-align:left}
.pw-plan{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;border:1px solid var(--stroke);background:rgba(255,255,255,.05);color:var(--fg);cursor:pointer;text-align:left;
  transition:border-color .2s,background .2s}
.pw-plan[aria-pressed="true"]{border-color:rgba(10,132,255,.9);background:rgba(10,132,255,.12);box-shadow:0 0 0 3px rgba(10,132,255,.18)}
.pw-plan.plan-max[aria-pressed="true"]{border-color:rgba(232,120,255,.85);background:rgba(191,90,242,.12);box-shadow:0 0 0 3px rgba(191,90,242,.18)}
.pw-radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--fill-2);flex:none;display:grid;place-items:center}
.pw-plan[aria-pressed="true"] .pw-radio{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 4px #1f2a3a}
.pw-plan.plan-max[aria-pressed="true"] .pw-radio{border-color:#d96cff;background:#d96cff;box-shadow:inset 0 0 0 4px #2a1f33}
.pw-main{display:flex;flex-direction:column;flex:1;min-width:0}
.pw-name{font:700 16px var(--display);letter-spacing:-.01em}
.pw-tag{font-size:12px;color:var(--muted)}
.pw-price{text-align:right;white-space:nowrap}
.pw-price b{font:700 18px var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pw-price small{display:block;font-size:11px;color:var(--muted)}
.link-btn{background:none;border:0;color:#64b0ff;font:500 14px var(--font);cursor:pointer;padding:4px;margin:0 auto}
.link-btn:hover{text-decoration:underline}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:60;
  max-width:calc(100% - 32px);padding:12px 18px;border-radius:999px;font:500 14px/1.35 var(--font);color:var(--fg);text-align:center;
  transition:opacity .3s,transform .35s cubic-bezier(.2,.9,.3,1.2);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}


/* =========================================================
   Accessibility, mobile, legal and safety additions
   ========================================================= */
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:12px;background:#fff;color:#000;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px))}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript{position:relative;z-index:2;max-width:640px;margin:16px auto;padding:14px 18px;border-radius:14px;background:#3a1d1d;color:#fff;text-align:center}
main:focus{outline:none}
.timeline canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* buttons for risky actions */
.btn-danger{color:#fff;background:linear-gradient(180deg,#d92d2d,#b91c1c);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.btn-danger:hover:not(:disabled){filter:brightness(1.08)}
.btn-danger-ghost{color:#ff8a80;background:transparent;border:1px solid rgba(255,105,97,.35)}
.btn-danger-ghost:hover{background:rgba(255,105,97,.12)}
.cf-type{display:flex;flex-direction:column;gap:8px;text-align:left;font-size:14px;color:var(--muted)}
.cf-type b{color:var(--fg)}
.pw-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}

/* consent checkbox in the sign-in sheet (never pre-ticked) */
.consent{display:flex;align-items:flex-start;gap:10px;text-align:left;font-size:13px;line-height:1.45;color:var(--muted);padding:12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--stroke-soft);cursor:pointer}
.consent input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}
.consent a{color:#64b0ff}

/* cookie notice: small, never covers the screen */
.cookie{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;max-width:min(380px,calc(100% - 32px));
  display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:16px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.cookie .btn{flex:none}
.cookie p{margin:0}
.cookie a{color:#64b0ff}

/* footer legal links + business details */
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;font-size:14px}
.foot-links a{color:var(--muted);text-decoration:none;padding:6px 2px}
.foot-links a:hover{color:var(--fg);text-decoration:underline}
.foot .biz a{color:var(--muted)}

/* mobile quick-action bar (thumb reach) */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;position:fixed;z-index:30;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));
    bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:6px;border-radius:22px}
  .page{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .cookie{bottom:calc(92px + env(safe-area-inset-bottom,0px));right:max(16px,env(safe-area-inset-right,0px))}
}
.mb-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border:0;border-radius:16px;background:rgba(255,255,255,.08);
  color:var(--fg);font:600 12px var(--font);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.mb-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mb-btn svg .fill{fill:currentColor;stroke:none}
.mb-btn.mb-ai{background:linear-gradient(110deg,#5e5ce6,#a33ee0 50%,#e0284f);color:#fff}
.mb-btn:disabled{opacity:.45}
.mb-btn:active{transform:scale(.97)}

/* bigger tap targets on touch screens (44px minimum) */
@media (pointer:coarse){
  .seg button{height:44px}
  .icon{width:44px;height:44px}
  .sheet-x{width:44px;height:44px;top:10px;right:10px}
  .swatch{width:44px;height:44px}
  .cue-time{padding:12px 10px;min-height:44px}
  .cue-text{min-height:44px}
  .tbtn{height:44px}
  .btn-sm{--h:44px}
  .nav-links a{padding:12px}
  .faq summary{padding:20px 0}
  input[type=range]{height:44px}
  .disclose summary{min-height:48px}
  .foot-links a{padding:12px 4px}
}

/* very small phones and landscape phones */
@media (max-width:360px){
  .hero h1{font-size:38px}
  .seg button{font-size:12px}
  .brand span{display:none}
}
@media (max-height:500px) and (orientation:landscape){
  .stage canvas{max-height:78vh}
  .hero{padding-top:20px}
}

/* legal pages */
.legal{max-width:760px;margin:0 auto;padding:clamp(24px,5vw,48px);display:flex;flex-direction:column;gap:14px;border-radius:var(--r-xl)}
.legal h1{font:700 clamp(32px,5vw,46px)/1.05 var(--display);letter-spacing:-.04em;margin:0}
.legal h2{font:700 20px/1.25 var(--display);letter-spacing:-.02em;margin:18px 0 0}
.legal h3{font:600 16px var(--font);margin:8px 0 0}
.legal p,.legal li{color:var(--muted);margin:0;line-height:1.6}
.legal ul,.legal ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.legal a{color:#64b0ff}
.legal .updated{font-size:14px;color:var(--faint)}
.legal table{width:100%;border-collapse:collapse;font-size:14px}
.legal th,.legal td{text-align:left;padding:10px 8px;border-top:1px solid var(--stroke-soft);color:var(--muted);vertical-align:top}
.legal th{color:var(--fg);font-weight:600}
.table-wrap{overflow-x:auto}