/* 🚪 Upload-first onboarding. Tokens follow the landing (next.css) so the embedded hero reads as
   part of that page: achromatic chrome, the violet accent used as a MARK (a ring, a dot, a check),
   never as a large fill. The one filled control is the primary action, as on the landing. */
@font-face{font-family:'Inter';src:url('/font/Inter-var.ttf');font-weight:100 900;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('/font/CapteeGrotesk.ttf');font-weight:300 700;font-display:swap;}

/* 🔥 WARM LIGHT ON NEAR-BLACK — the language of his reference board (2026-09-22, "I'm not trying to change
   only color"). What those pages share is not a hue, it is a MATERIAL: one warm light source per screen,
   everything else falling off to near-black, dark glass slabs lit along their top edge, and one accent that
   only ever means "this is the thing to press". No starfields, no circuit pulses, no second accent. */
:root{
  --bg:#08070A; --panel:#12100F; --panel-2:#171412;
  --tx:#F6F1EA; --tx2:#C9C0B4; --mut:#9A9188; --faint:#6B635A;
  --line:rgba(255,190,120,.10); --line-2:rgba(255,190,120,.20);
  --acc:#FF8A3D; --acc-l:#FEB122; --acc-d:#E4661B; --R:255,138,61;
  --warm:#FEB122;
  --disp:'Space Grotesk',system-ui,sans-serif; --ui:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{color-scheme:dark}
html,body{margin:0;height:100%}
body.st{color:var(--tx);font:14px/1.45 var(--ui);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(76% 42% at 50% -6%,rgba(255,138,61,.22),transparent 64%),
    radial-gradient(40% 26% at 50% 2%,rgba(254,177,34,.16),transparent 70%),
    radial-gradient(120% 50% at 50% 118%,rgba(255,138,61,.10),transparent 62%),
    var(--bg);
  background-attachment:fixed}
/* Embedded in the landing hero, and nothing dropped yet: the page behind shows through. */
body.st.embed:not(.expanded){background:transparent;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}

/* ------------------------------------------------------------------ hero: the circuit board */
.st-root{min-height:100%}
body.st:not(.embed) .st-root{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 16px}
.st-hero{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 0 30px}   /* room for glows: the frame clips at its edge */
body.expanded .st-hero{display:none}
.st-board{position:relative;width:min(1040px,100vw);height:430px}
.st-traces{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}

/* A trace: a dim groove, a lit copy that fills in when its tile is on, and a pulse of light
   that runs along it into the chip. */
.st-traces .groove{fill:none;stroke:rgba(255,190,120,.10);stroke-width:1.2}
.st-traces .lit{fill:none;stroke:url(#stLitGrad);stroke-width:2;stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset .9s var(--ease)}
.st-traces .lit.on{stroke-dashoffset:0}
.st-traces .pulse{fill:none;stroke:url(#stPulseGrad);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:70 1070;
  stroke-dashoffset:70;animation:stPulse var(--d,3.4s) linear infinite;animation-delay:var(--dl,0s)}
.st-traces .leg{fill:none;stroke-width:1.5}
.st-traces .pulse.on{animation-duration:1.5s}
@keyframes stPulse{to{stroke-dashoffset:-1000}}

/* GLASS TILE (Patrik's reference): frosted gradient, a lit top edge, a violet bloom in one corner,
   a heavy soft shadow underneath. */
.st-tile{--g:rgba(255,255,255,.13);display:grid;place-items:center;width:64px;height:64px;border-radius:18px;color:#EDEBFF;
  background:
    radial-gradient(120% 90% at 18% 0%,rgba(var(--R),.45),transparent 58%),
    linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 55%,rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -12px 22px rgba(0,0,0,.35),
    0 18px 36px -14px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.35);
  transition:box-shadow .35s,border-color .35s,transform .25s var(--ease)}
.st-tile svg{width:26px;height:26px}
.st-tile.sm{width:52px;height:52px;border-radius:15px}
.st-tile.sm svg{width:22px;height:22px}

.st-node{position:absolute;display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;
  transition:transform .5s var(--ease)}
.st-node.L{flex-direction:row}
.st-node.R{flex-direction:row-reverse}
/* three a side, the middle one pushed further out, like the reference's staggered nodes */
.st-node.p0{top:50px}.st-node.p1{top:172px}.st-node.p2{top:294px}
.st-node.L.p0,.st-node.L.p2{left:7%}.st-node.L.p1{left:1.5%}
.st-node.R.p0,.st-node.R.p2{right:7%}.st-node.R.p1{right:1.5%}
.st-nlab{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.st-node.R .st-nlab{align-items:flex-end}
/* not automatic yet: pickable (the pick is recorded as demand), and says so */
.st-soon{font:600 9.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--acc-l);
  padding:3px 6px;border-radius:999px;border:1px solid rgba(var(--R),.4);background:rgba(var(--R),.1)}
.st-nlab{font:500 13.5px var(--ui);color:var(--tx2);transition:color .25s;white-space:nowrap;
  /* the landing's planet rim runs behind the labels: a soft dark halo keeps them readable */
  text-shadow:0 0 6px rgba(11,11,14,.95),0 0 14px rgba(11,11,14,.9)}
.st-node:hover .st-tile{transform:translateY(-2px);border-color:rgba(255,255,255,.24)}
.st-node:hover .st-nlab{color:var(--tx)}
/* LIT: this feature will be applied. The tile glows, a check appears, its trace fills with light. */
.st-node[aria-pressed="true"] .st-tile{border-color:rgba(var(--R),.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -12px 22px rgba(0,0,0,.3),
    0 0 0 1px rgba(var(--R),.45),0 0 28px -2px rgba(var(--R),.75),0 18px 36px -14px rgba(0,0,0,.85)}
.st-node[aria-pressed="true"] .st-nlab{color:var(--tx)}
.st-node .st-tile{position:relative}
.st-node[aria-pressed="true"] .st-tile::after{content:"";position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;
  background:var(--acc-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7l4.5-5' fill='none' stroke='%23150f27' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
  box-shadow:0 0 10px rgba(var(--R),.9)}
/* A clip is in: the tiles step down slightly, out of the way of the file card. */
.st-hero.has-file .st-node{transform:translateY(14px)}

/* THE CENTRE IS A SCREEN (Patrik 2026-09-19): a glass-framed video, playing an example edit until a
   clip is in, then theirs. Big controls over the picture, the progress panel across its foot. */
.st-drop{--B:255,138,61;position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:500px;height:330px;border-radius:30px;z-index:2;
  padding:7px;outline:none;cursor:pointer;
  /* the feature cards' charcoal glass, with a faint violet bloom in one corner */
  background:radial-gradient(90% 70% at 0% 0%,rgba(var(--B),.16),transparent 60%),linear-gradient(175deg,rgba(44,44,54,.92),rgba(20,20,26,.96));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 90px -30px rgba(0,0,0,.95),0 0 50px -26px rgba(var(--B),.45);
  transition:border-color .25s,box-shadow .3s}
.st-drop:hover,.st-drop:focus-visible,.st-drop.over{border-color:rgba(var(--B),.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 40px 90px -30px rgba(0,0,0,.95),0 0 0 4px rgba(var(--B),.14),0 0 80px -18px rgba(var(--B),.85)}
.st-hero.has-file .st-drop{cursor:default}
.st-screen{position:relative;width:100%;height:100%;border-radius:24px;overflow:hidden;background:#0d0d11}
/* a blurred still of the same picture fills the sides of vertical footage */
.st-fill{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(26px) saturate(1.2) brightness(.55);transform:scale(1.1)}
.st-stage{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);aspect-ratio:9/16;max-width:100%}
.st-stage.wide{aspect-ratio:16/9;width:100%;top:50%;bottom:auto;transform:translate(-50%,-50%)}
.st-demo,.st-cardvid,.st-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-v{background:#000;transform-origin:50% 50%}
.st-stage .st-demo,.st-stage .st-cardvid{box-shadow:0 0 40px rgba(0,0,0,.6)}
.st-nopic{position:absolute;inset:0;display:grid;place-items:center;color:#EDEBFF;background:linear-gradient(160deg,rgba(var(--B),.45),rgba(30,22,64,.95))}
.st-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,6,16,.55) 0%,rgba(8,6,16,0) 28%,rgba(8,6,16,0) 45%,rgba(8,6,16,.88) 100%)}
.st-drop-empty{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 20px;
  background:radial-gradient(60% 60% at 50% 50%,rgba(8,8,12,.45),rgba(8,8,12,.72))}
.st-hero:not(.has-file) .st-scrim{display:none}
.st-drop-full{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;padding:16px}
.st-tag{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;
  font:600 12px var(--ui);color:#EDE9FF;background:rgba(16,16,20,.62);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.st-tag > i{width:7px;height:7px;border-radius:50%;background:var(--acc-l);box-shadow:0 0 8px var(--acc-l)}
.st-tag.file{position:static;align-self:flex-start;max-width:calc(100% - 50px);padding-left:5px}
.st-tag.file b{font:800 10.5px/1 var(--disp);letter-spacing:.06em;padding:5px 7px;border-radius:999px;color:#241a4a;
  background:linear-gradient(170deg,#E4DCFF,#A996FF)}
.st-tag.file span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.st-tag.file em{font-style:normal;color:#b9b0dc;font-weight:500;white-space:nowrap}
.st-sub{font-size:12.5px;color:#cfc8ee;text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* the progress panel across the foot of the screen (the "morning-routine" card he liked) */
.st-prog{position:relative;padding:14px 18px 16px;border-radius:18px;background:rgba(16,16,20,.74);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.st-prog::before{content:"";position:absolute;left:18%;right:18%;top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,206,150,.95),transparent);box-shadow:0 0 16px 3px rgba(255,138,61,.5)}
.st-prow{display:flex;align-items:center;gap:10px}
.st-plabel{color:#d2cbef;font-size:14.5px}
.st-pct{margin-left:auto;font:300 30px/1 var(--disp);letter-spacing:-.02em;color:#f6f3ff}
.st-bar{margin-top:12px;height:4px;border-radius:4px;background:rgba(255,255,255,.12)}
.st-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--acc-l),var(--acc));box-shadow:0 0 12px rgba(255,138,61,.75);transition:width .4s}
.st-prog.done .st-spin{border-color:var(--acc-l);animation:none}
.st-swap{position:absolute;top:18px;right:18px;z-index:3;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:rgba(14,10,28,.6);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.st-swap:hover{background:rgba(60,50,100,.8)}
/* chip legs */
.st-pins{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.st-pins.l{left:-9px}.st-pins.r{right:-9px}
.st-pins i{display:block;width:9px;height:3px;border-radius:2px;background:rgba(255,255,255,.22)}
/* .st-go.st-continue, not .st-continue: .st-go is declared later with position:relative and would win */
.st-go.st-continue{position:absolute;left:50%;top:calc(46% + 185px);transform:translateX(-50%);z-index:3}
.st-go.st-continue:hover{transform:translate(-50%,-1px)}
.st-hero.has-file .st-pins.b{display:none}
.st-drop-err{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);width:max-content;max-width:360px;
  text-align:center;color:#ffb4b4;font-size:12.5px}
.st-hint{margin:0;color:var(--mut);font-size:12.5px;text-align:center}

/* THE PILL (Patrik's references: the status pills). Tinted glass that deepens left to right, a rim
   that brightens the same way, and a solid disc holding the icon. Every surface here is soft: no
   blur is clipped by a mask or a filter region, so no glow ever ends in a hard edge. */
.st-go{--c:255,138,61;position:relative;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 8px 0 20px;
  border-radius:999px;border:1.5px solid transparent;color:#EFEBFF;font-weight:600;letter-spacing:.005em;white-space:nowrap;
  background:
    linear-gradient(90deg,rgba(26,16,10,.96),rgba(var(--c),.62)) padding-box,
    linear-gradient(90deg,rgba(var(--c),.35),rgba(var(--c),1)) border-box;
  box-shadow:0 10px 34px -12px rgba(var(--c),.75),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .2s var(--ease),box-shadow .25s,filter .2s}
.st-go:hover{transform:translateY(-1px);filter:brightness(1.1);box-shadow:0 14px 40px -12px rgba(var(--c),.9),inset 0 1px 0 rgba(255,255,255,.22)}
.st-go:disabled{opacity:.55;cursor:default;transform:none}
.st-go > i.st-disc:first-child{margin-left:-10px}
.st-go:has(> i.st-disc:first-child){padding:0 22px 0 8px}
.st-go.big{height:56px;font-size:16.5px;padding:0 26px 0 10px;gap:12px}
.st-go.big .st-disc{width:38px;height:38px;flex-basis:38px}
.st-go.big .st-disc svg{width:19px;height:19px}
.st-disc{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:0 0 30px;color:#2A1608;
  background:radial-gradient(circle at 35% 30%,#fff,rgb(var(--c)) 75%);box-shadow:0 0 14px rgba(var(--c),.8)}
.st-disc svg{width:16px;height:16px}

/* small pills (features, niche): the same language, quieter until picked */
.st-pills{display:flex;flex-wrap:wrap;gap:8px}
.st-pill{--c:150,132,255;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 6px;border-radius:999px;
  border:1.5px solid transparent;color:var(--tx2);font-size:13px;font-weight:500;
  background:linear-gradient(90deg,rgba(22,22,30,.96),rgba(30,30,40,.96)) padding-box,
    linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.22)) border-box;transition:color .2s,box-shadow .25s}
.st-pill .st-disc{width:24px;height:24px;flex-basis:24px;background:rgba(255,255,255,.1);box-shadow:none;color:transparent}
.st-pill .st-disc svg{width:13px;height:13px}
.st-pill:hover{color:var(--tx)}
.st-pill.plain{padding:0 16px}
.st-pill[aria-pressed="true"]{color:#EFEBFF;
  background:linear-gradient(90deg,rgba(26,16,10,.96),rgba(var(--c),.38)) padding-box,
    linear-gradient(90deg,rgba(var(--c),.35),rgba(var(--c),1)) border-box;box-shadow:0 8px 26px -12px rgba(var(--c),.8)}
.st-pill[aria-pressed="true"] .st-disc{color:#2A1608;background:radial-gradient(circle at 35% 30%,#fff,rgb(var(--c)) 75%);box-shadow:0 0 10px rgba(var(--c),.7)}
.st-pill small{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-l);opacity:.8}

/* font rows: each option set in its own face */
.st-fontrow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.st-fchip{height:46px;border-radius:14px;border:1.5px solid transparent;color:var(--tx);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;overflow:hidden;
  background:linear-gradient(160deg,rgba(28,28,38,.96),rgba(18,18,24,.96)) padding-box,
    linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05)) border-box;transition:box-shadow .25s}
.st-fchip .f{font-size:19px;line-height:1.05;white-space:nowrap}
.st-fchip .n{font:500 9.5px var(--ui);color:var(--mut);letter-spacing:.01em;max-width:94%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-fchip.def .f{font:600 12.5px var(--ui);color:var(--tx2)}
.st-fchip[aria-pressed="true"]{background:linear-gradient(160deg,rgba(40,34,70,.96),rgba(22,20,34,.96)) padding-box,
    linear-gradient(160deg,rgba(var(--R),1),rgba(var(--R),.35)) border-box;box-shadow:0 8px 26px -12px rgba(var(--R),.8)}

.st-link{background:none;border:0;padding:0;color:var(--mut);font-size:12.5px;text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}
.st-link:hover{color:var(--tx)}

/* ------------------------------------------------------------------ flow (full screen) */
.st-flow{position:fixed;inset:0;display:flex;flex-direction:column;background:
  radial-gradient(1200px 600px at 50% -10%,rgba(var(--R),.13),transparent 60%),var(--bg);
  animation:stIn .45s var(--ease)}
@keyframes stIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.st-flow::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.2px);background-size:14px 14px;
  -webkit-mask-image:radial-gradient(60% 55% at 88% 8%,#000,transparent 70%);mask-image:radial-gradient(60% 55% at 88% 8%,#000,transparent 70%)}
.st-flow::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 45% at 30% 0%,rgba(var(--R),.16),transparent 70%)}
.st-flow > *{position:relative;z-index:1}
.st-board::before{content:"";position:absolute;left:30%;right:30%;top:-10px;bottom:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);background-size:13px 13px;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000,transparent 75%);mask-image:radial-gradient(50% 50% at 50% 50%,#000,transparent 75%)}
.st-top{display:flex;align-items:center;gap:20px;padding:18px 26px;border-bottom:1px solid var(--line)}
.st-steps{display:flex;gap:6px;flex:1}
.st-steps span{padding:6px 12px;border-radius:999px;color:var(--faint);font-size:12.5px;font-weight:500;border:1px solid transparent}
.st-steps span.on{color:var(--tx);border-color:var(--line-2);background:rgba(255,255,255,.04)}
.st-steps span.done{color:var(--mut)}
.st-steps span.off{display:none}
.st-up{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:12px;white-space:nowrap}
.st-up-bar{width:120px;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.st-up-bar i{display:block;height:100%;width:0;background:var(--acc-l);transition:width .4s}
.st-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--tx2);display:grid;place-items:center}
.st-x:hover{color:var(--tx);border-color:rgba(255,255,255,.3)}

.st-pane{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 32px;
  animation:stIn .4s var(--ease)}
.st-h{font:600 30px/1.15 var(--disp);letter-spacing:-.02em;margin:0 0 8px}
.st-p{color:var(--tx2);margin:0 0 26px;max-width:460px}
#paneFormat{text-align:center}
#paneFormat .st-p{margin-left:auto;margin-right:auto}
.st-formats{display:flex;gap:18px}
.st-fmt{width:220px;padding:26px 20px 20px;border-radius:20px;background:var(--panel);border:1px solid var(--line-2);
  display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .2s,transform .2s var(--ease),box-shadow .3s}
.st-fmt:hover{border-color:rgba(var(--R),.8);transform:translateY(-2px);box-shadow:0 0 30px -8px rgba(var(--R),.6)}
.st-fmt b{font-weight:600;font-size:15px}
.st-fmt small{color:var(--mut)}
.st-fmt-box{display:block;border:1.5px solid var(--tx2);border-radius:8px;margin-bottom:12px}
.st-fmt-box.wide{width:112px;height:63px}
.st-fmt-box.tall{width:54px;height:96px}

/* brand */
.st-brand{flex-direction:row;gap:56px;align-items:center}
.st-brand-preview{flex:0 0 auto}
.st-brand-controls{width:min(560px,50vw);max-height:100%;overflow:auto;padding:0 4px 0 0;display:flex;flex-direction:column}
.st-brand .st-h{font-size:26px;margin-bottom:4px}
.st-brand .st-p{margin-bottom:16px}
.st-brand .st-group{margin-bottom:14px}
.st-brand .st-label{margin-bottom:8px}
/* the action stays in view however far the options run */
.st-brand .st-actions{position:sticky;bottom:0;margin-top:6px;padding:14px 0 4px;
  background:linear-gradient(180deg,rgba(11,11,14,0),rgba(11,11,14,.94) 40%)}
.st-wait.sm{bottom:14px}
.st-frame{position:relative;overflow:hidden;background:#000;border-radius:20px;border:1px solid var(--line-2);
  aspect-ratio:9/16;height:min(62vh,560px);box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.st-frame.wide{aspect-ratio:16/9;height:auto;width:min(58vw,820px)}
.st-frame .st-v{object-fit:cover}
.st-cap{position:absolute;inset:0;pointer-events:none;z-index:4}
/* the two players share the floor (start.js swaps them at a cut); everything drawn on the clip sits above */
.st-v{z-index:0}
.st-frame .pv-gfx{z-index:2}
.st-cap > div{position:absolute;inset:0}
.st-group{margin-bottom:22px}
.st-label{font-weight:600;font-size:13px;margin-bottom:10px;color:var(--tx)}
.st-label small{color:var(--faint);font-weight:500;margin-left:6px}
.st-colors{display:flex;flex-direction:column;gap:10px}
.st-colrow{display:flex;align-items:center;gap:14px}
.st-colname{width:70px;color:var(--tx2);font-size:13px}
.st-swatches{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.st-sw{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.12);padding:0;position:relative;transition:transform .15s}
.st-sw:hover{transform:scale(1.08)}
.st-sw[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px rgba(var(--R),.8)}
.st-sw.pick{background:conic-gradient(#ff4d4d,#ffd400,#4dff00,#00d0ff,#8c5cff,#ff4dd8,#ff4d4d)}
.st-sw.pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.st-hex{width:92px;height:30px;border-radius:9px;border:1px solid var(--line-2);background:var(--panel);color:var(--tx);
  padding:0 10px;font:500 12.5px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}
.st-hex:focus{outline:none;border-color:rgba(var(--R),.8)}
.st-actions{display:flex;align-items:center;gap:20px;margin-top:8px}

/* reveal */
.st-reveal{flex-direction:row;gap:56px;align-items:center}
.st-frame.big{height:min(76vh,720px)}
.st-frame.big.wide{height:auto;width:min(60vw,980px)}
.st-reveal-side{width:320px}
.st-did{list-style:none;margin:6px 0 26px;padding:0;display:flex;flex-direction:column;gap:10px}
.st-did li{display:flex;gap:10px;align-items:flex-start;color:var(--tx2)}
.st-did li::before{content:"";flex:0 0 6px;height:6px;margin-top:8px;border-radius:50%;background:var(--acc-l)}
.st-did b{color:var(--tx);font-weight:600}
.st-small{color:var(--mut);font-size:12.5px;margin:12px 0 0}
.st-claim{margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line-2);color:var(--tx2);font-size:13px}
.st-claim .st-up-bar{width:100%;margin-top:10px}
.st-wait{position:absolute;inset:auto 0 18px 0;margin:auto;width:max-content;display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:999px;background:rgba(10,10,14,.72);border:1px solid var(--line-2);font-size:12.5px;color:var(--tx2);
  backdrop-filter:blur(8px)}
.st-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:var(--acc-l);animation:stSpin .8s linear infinite}
@keyframes stSpin{to{transform:rotate(360deg)}}
.st-play{position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(10,10,14,.55);color:#fff;display:grid;place-items:center;backdrop-filter:blur(8px)}

/* EMBEDDED: backdrop-filter cannot reach the landing page behind the frame, so the glass effect
   silently becomes a 5% tint and the hero's shooting stars read straight through the text.
   A nearly solid surface instead. */
body.embed:not(.expanded) .st-tile{background-color:rgba(20,20,28,.9)}

/* the sign-in gate from auth.js sits above the flow */
#captee-gate{z-index:1000}
#captee-gate .cg-card{position:relative}
#captee-gate .cg-close{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;border:0;
  background:transparent;color:#888;font-size:22px;line-height:1}
#captee-gate .cg-close:hover{color:#222;background:rgba(0,0,0,.05)}

@media (max-width:1100px){
  .st-brand,.st-reveal{gap:32px}
  .st-frame{height:min(56vh,480px)}
}

/* ---- THE DASHBOARD MOCK inside the hero screen (copied from landing/next.css .app, scoped). Drawn at
   1140x540 and scaled by start.js to cover the screen; darkened under the upload button. ---- */
.st-mock{position:absolute;left:50%;top:50%;width:1140px;height:540px;transform-origin:50% 50%;pointer-events:none;
  --faint:#5C5C6B;--mut:#8A8A99;--tx:#F2F2F5;--tx2:#B9B9C6}
.st-mock .disp{font-family:var(--disp);font-weight:500;letter-spacing:-.01em}
.st-mock .phone video{width:100%;height:100%;object-fit:cover}
.st-mock .brand-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(180deg, #FEB122, #FF8A3D); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px -6px rgba(var(--R),0.28); flex: none; }
.st-mock .brand-mark.sm { width: 28px; height: 28px; border-radius: 8px; }
.st-mock .app { position: relative; height: 540px; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 250px minmax(0, 1fr); background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.045) 35%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 24px 50px -30px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.05); }
.st-mock .app-side { border-right: 1px solid rgba(255,255,255,0.07); padding: 22px 16px; display: flex; flex-direction: column; gap: 2px; background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 40%); min-width: 0; }
.st-mock .app-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 18px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.st-mock .app-brand > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.15; }
.st-mock .app-brand b { font-size: 14px; font-weight: 600; }
.st-mock .app-brand i { font-style: normal; font-size: 10.5px; color: var(--faint); }
.st-mock .app-collapse { margin-left: auto; width: 28px; height: 28px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); display: inline-flex; align-items: center; justify-content: center; color: var(--mut); font-size: 14px; }
.st-mock .app-welcome { padding: 18px 6px 14px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.st-mock .app-welcome .disp { font-size: 22px; line-height: 1.1; }
.st-mock .app-welcome small { display: block; font-size: 11.5px; color: var(--faint); margin-top: 6px; }
.st-mock .app-sec { font-size: 11.5px; color: var(--faint); padding: 12px 14px 4px; }
.st-mock .app-item { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; font-size: 13.5px; color: var(--mut); border-radius: 12px; }
.st-mock .app-item svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.st-mock .app-item.on { height: 42px; color: var(--tx); background: linear-gradient(90deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.10); }
.st-mock .app-item .bar { margin-left: auto; width: 2px; height: 16px; border-radius: 2px; background: var(--acc); }
.st-mock .app-item .dot { margin-left: auto; width: 6px; height: 6px; border-radius: 999px; background: var(--acc); }
.st-mock .app-item .tag { margin-left: auto; font-size: 10px; padding: 2px 7px; border-radius: 6px; background: rgba(var(--R),0.14); color: var(--acc-l); }
.st-mock .app-main { padding: 22px 28px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.st-mock .app-crumb { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--mut); }
.st-mock .app-crumb > span { display: inline-flex; align-items: center; gap: 10px; }
.st-mock .app-crumb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.st-mock .app-crumb i { font-style: normal; color: var(--faint); }
.st-mock .app-crumb b { color: var(--tx); font-weight: 600; }
.st-mock .app-right { gap: 14px; }
.st-mock .avatar { width: 26px; height: 26px; border-radius: 999px; background: linear-gradient(180deg, #FEB122, #FF8A3D); display: inline-block; }
.st-mock .demo { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 0; }
.st-mock .phone { position: relative; margin: 0; width: 236px; height: 420px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(var(--R),0.18); background: #0E0E13; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9); flex: none; }
.st-mock .phone.lit { border-color: rgba(var(--R),0.55); box-shadow: 0 0 60px -10px rgba(var(--R),0.45), 0 30px 60px -30px rgba(0,0,0,0.9); }
.st-mock .phone video { width: 100%; height: 100%; object-fit: cover; }
.st-mock .phone-tag { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(14,14,19,0.85); color: var(--tx2); border: 1px solid rgba(255,255,255,0.12); }
.st-mock .phone-tag.on { background: var(--acc-l); color: #1A1240; border-color: rgba(255,255,255,0.3); }
.st-mock .demo-chip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(14,14,19,0.94); border: 1px solid rgba(var(--R),0.5); font-size: 12px; font-weight: 600; color: var(--tx); white-space: nowrap; box-shadow: 0 0 28px -4px rgba(var(--R),0.65), 0 10px 24px -10px rgba(0,0,0,0.9); }
.st-mock .demo-chip .chk { width: 18px; height: 18px; border-radius: 999px; background: var(--acc-l); display: inline-flex; align-items: center; justify-content: center; }
.st-mock .demo-chip .mono { color: var(--mut); font-size: 11px; }

/* ---- A CLIP IS IN: the dashboard stays behind (darkened, still), their clip is loaded but never shown
   (under the mock, for the decode check only), and a designed tile says it arrived. ---- */
.st-stage{z-index:0;opacity:0}   /* their clip decodes here but is never shown */
.st-mock{z-index:1}
.st-hero.has-file .st-mock{filter:brightness(.5) saturate(.8)}
.st-drop-full{background:radial-gradient(60% 60% at 50% 45%,rgba(8,8,12,.35),rgba(8,8,12,.7))}
.st-got{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding-top:6px}
.st-gottile{position:relative;width:84px;height:84px;border-radius:24px;display:grid;place-items:center;overflow:hidden;color:#EDEBFF;
  background:radial-gradient(120% 90% at 18% 0%,rgba(var(--R),.45),transparent 58%),linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 55%,rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 40px -14px rgba(0,0,0,.9),0 0 36px -8px rgba(var(--R),.6)}
.st-gottile svg{width:38px;height:38px}
.st-sweep{position:absolute;top:-20%;bottom:-20%;width:40%;left:-60%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:stSweep 2.2s ease-in-out infinite}
@keyframes stSweep{to{left:130%}}
.st-gotline{font:500 16px var(--disp);color:#EDE9FF;letter-spacing:-.005em}
.st-hero.has-file .st-drop-full .st-prog{margin-top:auto}
@media (prefers-reduced-motion:reduce){.st-sweep{animation:none;display:none}}

/* the next step is the one action on screen: fully lit, like "Start creating" in the nav */
.st-go.st-continue,.st-go.big{background:linear-gradient(90deg,rgba(228,102,27,.96),rgba(254,177,34,.96)) padding-box,
  linear-gradient(90deg,rgba(255,214,160,.6),rgba(255,240,215,1)) border-box;color:#2A1608;
  box-shadow:0 14px 40px -10px rgba(255,138,61,.75),inset 0 1px 0 rgba(255,255,255,.45)}

/* ---- THE HUB (Patrik 2026-09-19: "maybe only just an Upload your footage button, and after the
   upload they see the bigger UI"). Empty, the centre is a compact glass capsule holding the button,
   the traces plugging into its sides. A clip in: it grows into the screen. The dashboard mock is
   retired from the hero. ---- */
.st-mock{display:none}
.st-drop{transition:width .55s var(--ease),height .55s var(--ease),border-radius .55s var(--ease),border-color .25s,box-shadow .3s}
.st-hero:not(.has-file) .st-drop{width:380px;height:132px;border-radius:999px;padding:6px;
  background:radial-gradient(80% 120% at 50% 0%,rgba(var(--B),.22),transparent 70%),linear-gradient(175deg,rgba(40,40,52,.92),rgba(18,18,24,.96))}
.st-hero:not(.has-file) .st-screen{border-radius:999px;background:transparent}
.st-hero:not(.has-file) .st-drop-empty{background:none;gap:10px}
.st-hero:not(.has-file) .st-pins{gap:8px}
.st-hero:not(.has-file) .st-pins.l{left:-9px}.st-hero:not(.has-file) .st-pins.r{right:-9px}
.st-hero:not(.has-file) .st-pins i:nth-child(5){visibility:hidden}   /* hidden, not display:none: a zero rect draws a trace to the corner */
.st-hero:not(.has-file) .st-pins.b{bottom:-9px}
.st-sub{font-size:12px;color:#a9a3c4}
.st-drop-full{opacity:0;animation:stFade .35s .35s var(--ease) forwards}
@keyframes stFade{to{opacity:1}}

/* in the landing the planet is the landing's own (next.css .hero-dome): never a second ring */
body.embed .st-ring{display:none}

/* ---- Patrik 2026-09-19 (10:07): no capsule, no "Soon" in the hero; the button alone, centred.
   The traces run to its ends. ---- */
.st-hero:not(.has-file) .st-drop{background:none;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  width:360px;height:120px}
.st-hero:not(.has-file) .st-drop:hover,.st-hero:not(.has-file) .st-drop.over{box-shadow:none;border-color:transparent}
.st-hero:not(.has-file) .st-pins{display:none}
.st-hero:not(.has-file) .st-drop-empty{padding:0;justify-content:center}
.st-hero:not(.has-file) .st-drop.over .st-go.big{box-shadow:0 0 0 6px rgba(var(--B),.25),0 14px 44px -10px rgba(255,138,61,1)}
/* the button: symmetric, icon disc sitting INSIDE the pill with its own margin */
.st-go.big{height:62px;padding:0 30px 0 9px;gap:14px;font-size:17px}
.st-go.big > i.st-disc:first-child{margin-left:0}
.st-go.big .st-disc{width:44px;height:44px;flex-basis:44px}
.st-sub{margin-top:4px}

/* the document icon, back from the upload card (violet, no clip showing through) */
.st-doc2{position:relative;width:96px;height:100px;display:block}
.st-docface2{position:absolute;left:22px;top:0;width:72px;height:94px;border-radius:12px;overflow:hidden;
  clip-path:polygon(0 0,70% 0,100% 26%,100% 100%,0 100%);background:linear-gradient(160deg,#CBBEFF 0%,#8E78F4 45%,#4E38B8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.st-docgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:12px 12px}
.st-docfold{position:absolute;right:0;top:0;width:30%;height:26%;background:linear-gradient(225deg,transparent 50%,rgba(255,240,215,.92) 50%,rgba(176,160,255,.95));
  border-bottom-left-radius:6px;box-shadow:-3px 3px 8px rgba(34,20,90,.5)}
.st-doc2 .st-plate{position:absolute;left:0;top:44px;width:70px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(170deg,rgba(176,166,224,.97),rgba(108,96,170,.97));border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 0 5px rgba(48,38,92,.65),0 12px 24px -8px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.5)}
.st-doc2 .st-plate b{font:800 16px/1 var(--disp);letter-spacing:.04em;color:#241a4a}
.st-doc2 .st-plate i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(30,34,70,.55)}
.st-doc2 .st-plate i:nth-child(1){left:6px;top:6px}.st-doc2 .st-plate i:nth-child(2){right:6px;top:6px}
.st-doc2 .st-plate i:nth-child(3){left:6px;bottom:6px}.st-doc2 .st-plate i:nth-child(4){right:6px;bottom:6px}
.st-got{gap:8px}
/* NEXT: pick the features. A line in the card, and the tiles that are not picked yet call out */
.st-gotnext{font-size:13px;color:var(--acc-l);display:inline-flex;gap:10px;align-items:center}
.st-gotnext i{font-style:normal;animation:stNudge 1.4s ease-in-out infinite}
.st-gotnext i:last-child{animation-name:stNudgeR}
@keyframes stNudge{50%{transform:translateX(-4px)}}
@keyframes stNudgeR{50%{transform:translateX(4px)}}
.st-hero.has-file .st-node:not([aria-pressed="true"]) .st-tile{animation:stCall 2.2s ease-in-out infinite;animation-delay:var(--cd,0s)}
@keyframes stCall{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -12px 22px rgba(0,0,0,.35),0 18px 36px -14px rgba(0,0,0,.85),0 0 0 0 rgba(var(--R),0)}
  50%{border-color:rgba(var(--R),.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -12px 22px rgba(0,0,0,.35),0 18px 36px -14px rgba(0,0,0,.85),0 0 0 6px rgba(var(--R),.18),0 0 26px -4px rgba(var(--R),.7)}}
.st-node.p1{--cd:.25s}.st-node.p2{--cd:.5s}
@media (prefers-reduced-motion:reduce){.st-gotnext i,.st-hero.has-file .st-node .st-tile{animation:none}}

/* ---- the folder (Patrik's reference, 2026-09-19) ---- */
.st-folder{position:relative;width:132px;height:104px;display:block;margin-bottom:4px}
.st-fback{position:absolute;left:8px;right:8px;top:14px;bottom:10px;border-radius:10px;
  background:linear-gradient(170deg,#FFB86B,#E4661B);box-shadow:0 14px 30px -12px rgba(200,90,20,.9)}
.st-fback::before{content:"";position:absolute;left:0;top:-8px;width:44%;height:12px;border-radius:8px 8px 0 0;background:#FFC98A}
.st-fclip{position:absolute;left:50%;top:0;width:48px;height:70px;transform:translateX(-50%) rotate(-4deg);border-radius:8px;
  background:linear-gradient(180deg,#2b211a,#171210);border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 18px -6px rgba(0,0,0,.8);
  animation:stClipIn .6s cubic-bezier(.2,.8,.2,1) both}
.st-fclip .bm{position:absolute;top:6px;left:50%;width:12px;height:12px;transform:translateX(-50%);color:#FFE7C9}
.st-fclip .pl{position:absolute;top:26px;left:50%;width:20px;height:20px;transform:translateX(-45%);color:#fff}
@keyframes stClipIn{from{transform:translate(-50%,30px) rotate(0);opacity:0}}
.st-ffront{position:absolute;left:0;right:0;bottom:0;height:52px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(255,214,170,.42),rgba(255,138,61,.28));border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.st-ffront small{font:700 10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(80,35,5,.55)}
@media (prefers-reduced-motion:reduce){.st-fclip{animation:none}}
.st-folder{width:168px;height:126px}
.st-fback{top:30px;bottom:12px}
.st-fclip{width:60px;height:86px;top:0;border-radius:10px}
.st-fclip .bm{top:9px;width:14px;height:14px}
.st-fclip .pl{top:34px;width:24px;height:24px}
.st-ffront{height:54px}
.st-ffront small{font-size:11.5px}

/* ---- GLASS (Patrik 2026-09-19): with a clip in, the card is see-through; the landing puts a frosted
   panel behind it, so the planet shows through blurred. Glossy rim, soft light in two corners. ---- */
.st-hero.has-file .st-drop{background:
    radial-gradient(60% 50% at 0% 0%,rgba(255,255,255,.10),transparent 60%),
    radial-gradient(50% 45% at 100% 100%,rgba(var(--B),.16),transparent 65%),
    linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 45%,rgba(20,18,32,.28));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.06),inset 1px 0 0 rgba(255,255,255,.06),0 40px 90px -30px rgba(0,0,0,.8)}
.st-hero.has-file .st-screen{background:transparent}
.st-hero.has-file .st-drop-full{background:none}
.st-hero.has-file .st-prog{background:rgba(12,10,22,.35);border-color:rgba(255,255,255,.14)}
.st-hero.has-file .st-swap{background:rgba(255,255,255,.08)}
body:not(.embed) .st-hero.has-file .st-drop{backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}

/* glossier glass: bright rim that catches light top-left, a diagonal sheen, very little tint */
.st-hero.has-file .st-drop{background:
    linear-gradient(125deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 22%,rgba(255,255,255,0) 40%),
    linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.01) 50%,rgba(14,12,26,.18)) padding-box,
    linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.12) 30%,rgba(255,255,255,.06) 60%,rgba(255,206,150,.45)) border-box;
  border:1.5px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 40px 90px -30px rgba(0,0,0,.7)}
.st-hero.has-file .st-prog{background:rgba(10,8,20,.28);border-color:rgba(255,255,255,.18)}

/* ---- the four steps, in the hero ---- */
.st-hero.has-file .st-board{height:470px}
.st-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);width:min(720px,92vw);margin:14px auto 0;padding:0;list-style:none}
.st-trackline{position:absolute;left:12.5%;right:12.5%;top:15px;height:2px;border-radius:2px;background:rgba(255,255,255,.1)}
.st-trackline i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#8F80FF,#C7BDFF);
  box-shadow:0 0 12px rgba(var(--R),.9);transition:width .7s var(--ease)}
.st-track li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.st-tn{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--ui);
  color:var(--faint);background:#131318;border:1px solid rgba(255,255,255,.14);transition:all .45s var(--ease)}
.st-tn em{font-style:normal}
.st-tn svg{display:none;width:14px;height:14px}
.st-track b{font:500 13px var(--ui);color:var(--mut);transition:color .3s}
.st-track li.done .st-tn{color:#fff;background:linear-gradient(180deg,#FEB122,#FF8A3D);border-color:transparent}
.st-track li.done .st-tn em{display:none}
.st-track li.done .st-tn svg{display:block}
.st-track li.done b{color:var(--tx2)}
.st-track li.now .st-tn{width:36px;height:36px;margin-top:-2px;color:#fff;background:linear-gradient(180deg,#FEB122,#FF8A3D);border-color:transparent;
  box-shadow:0 0 0 6px rgba(var(--R),.16),0 0 28px -2px rgba(var(--R),.95);animation:stNow 2.2s ease-in-out infinite}
.st-track li.now b{color:#EDE9FF;font-weight:600}
@keyframes stNow{50%{box-shadow:0 0 0 10px rgba(var(--R),.08),0 0 36px 0 rgba(var(--R),1)}}
/* step 3: Continue itself calls out */
.st-hero.step-2 .st-go.st-continue{animation:stCall2 1.8s ease-in-out infinite}
@keyframes stCall2{50%{box-shadow:0 0 0 7px rgba(255,138,61,.22),0 12px 40px -8px rgba(255,138,61,1)}}
@media (prefers-reduced-motion:reduce){.st-track li.now .st-tn,.st-hero.step-2 .st-go.st-continue{animation:none}}

/* Continue sits BELOW the steps (Patrik 2026-09-19), in the flow, centred */
.st-go.st-continue{position:static;transform:none;margin:22px auto 0;display:flex;width:max-content}
.st-go.st-continue[hidden]{display:none}
.st-go.st-continue:hover{transform:translateY(-1px)}
.st-hero.has-file .st-board{height:430px}
.st-hero{padding-bottom:12px}
.st-track{margin-top:4px}
.st-go.st-continue{margin-top:16px}

/* the steps get their own home (Patrik 2026-09-19: "separate those steps from those buttons"):
   a slim glass dock under the board, labels beside the numbers, one line */
.st-track{width:min(760px,94vw);margin-top:10px;padding:12px 18px;border-radius:999px;display:flex;justify-content:space-between;align-items:center;gap:0;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 40px -20px rgba(0,0,0,.9)}
.st-trackline{display:none}
.st-track li{flex-direction:row;gap:10px;flex:0 0 auto}
.st-track li + li::before{content:"";width:34px;height:1px;margin-right:14px;background:rgba(255,255,255,.14);transition:background .5s}
.st-track li.done + li::before,.st-track li.now::before{background:linear-gradient(90deg,#8F80FF,#C7BDFF);box-shadow:0 0 8px rgba(var(--R),.8)}
.st-tn{width:26px;height:26px;font-size:12px}
.st-track li.now .st-tn{width:28px;height:28px;margin-top:0}
.st-tn svg{width:12px;height:12px}
.st-track b{font-size:13px;white-space:nowrap}

/* Continue's signal: a FEATHERED ping, not a hard ring. A soft blurred halo leaves the button and
   dissolves outward, again and again (Patrik 2026-09-19). */
.st-hero.step-2 .st-go.st-continue{animation:none;position:relative;overflow:visible}
.st-hero.step-2 .st-go.st-continue::before,.st-hero.step-2 .st-go.st-continue::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;background:radial-gradient(closest-side,rgba(180,164,255,.55),rgba(255,138,61,.25) 60%,transparent);
  filter:blur(6px);animation:stPing 2s cubic-bezier(.2,.7,.3,1) infinite;z-index:-1}
.st-hero.step-2 .st-go.st-continue::after{animation-delay:1s}
@keyframes stPing{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9,2.6);opacity:0}}
/* room under the button for its glow: the frame ends at the hero's bottom and would cut it flat */
.st-hero{padding-bottom:80px}
@media (prefers-reduced-motion:reduce){.st-hero.step-2 .st-go.st-continue::before,.st-hero.step-2 .st-go.st-continue::after{animation:none;opacity:0}}
.st-go.st-continue{left:auto;top:auto}
.st-hero.step-2 .st-go.st-continue::before,.st-hero.step-2 .st-go.st-continue::after{display:none}
.st-hero.step-2 .st-go.st-continue{animation:stPing2 2s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes stPing2{
  0%{box-shadow:0 0 0 0 rgba(176,160,255,.75),0 0 12px 2px rgba(176,160,255,.55),0 12px 36px -10px rgba(255,138,61,.85),inset 0 1px 0 rgba(255,255,255,.3)}
  100%{box-shadow:0 0 34px 26px rgba(176,160,255,0),0 0 60px 30px rgba(176,160,255,0),0 12px 36px -10px rgba(255,138,61,.85),inset 0 1px 0 rgba(255,255,255,.3)}}
@media (prefers-reduced-motion:reduce){.st-hero.step-2 .st-go.st-continue{animation:none}}
/* thinner frame around the card (Patrik 2026-09-19): the 7px bezel becomes 3px, the rim 1px */
.st-hero.has-file .st-drop{padding:3px;border-width:1px}
.st-hero.has-file .st-screen{border-radius:27px}

/* the step circle's gradient must cover its 1px border, or it repeats there as slivers (the "trimmed" look) */
.st-tn{background-origin:border-box}
/* the card sits lower so the planet shows above it (Patrik), and the folder is bigger */
.st-hero.has-file .st-drop{top:52%}
.st-hero.has-file .st-board{height:470px}
.st-folder{transform:scale(1.3);transform-origin:50% 60%;margin:14px 0 18px}
/* APPLIED: a quick shake of the card when a feature is picked */
.st-drop.applied{animation:stShake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes stShake{10%,90%{translate:-1px 0}20%,80%{translate:2px 0}30%,50%,70%{translate:-4px 0}40%,60%{translate:4px 0}}
@media (prefers-reduced-motion:reduce){.st-drop.applied{animation:none}}
.st-drop{transition:width .55s var(--ease),height .55s var(--ease),top .55s var(--ease),border-radius .55s var(--ease),border-color .25s,box-shadow .3s}
/* PROGRESS behind the steps (Patrik 2026-09-19): a soft fill inside the dock that moves forward with
   each step, so every action visibly brings the finished video closer */
.st-track{overflow:hidden;isolation:isolate}
.st-trackbar{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.st-trackbar i{display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,rgba(255,138,61,.10),rgba(255,138,61,.30) 85%,rgba(255,214,160,.45));
  box-shadow:inset -2px 0 0 rgba(255,224,190,.6);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.st-trackbar i::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);background-size:40% 100%;background-repeat:no-repeat;
  animation:stBarSheen 2.6s ease-in-out infinite}
.st-trackbar i{position:relative}
@keyframes stBarSheen{from{background-position:-60% 0}to{background-position:160% 0}}
@media (prefers-reduced-motion:reduce){.st-trackbar i::after{animation:none}}

/* ---- SHORT SCREENS (body.short, set from the landing's window height) ---- */
body.short .st-hero{padding:14px 0 50px}
body.short .st-board{height:330px}
body.short .st-node.p0{top:14px}body.short .st-node.p1{top:124px}body.short .st-node.p2{top:234px}
body.short .st-tile{width:54px;height:54px;border-radius:16px}
body.short .st-tile svg{width:22px;height:22px}
body.short .st-hero.has-file .st-board{height:380px}
body.short .st-hero.has-file .st-drop{width:440px;height:290px}
body.short .st-hero.has-file .st-node.p0{top:40px}body.short .st-hero.has-file .st-node.p1{top:160px}body.short .st-hero.has-file .st-node.p2{top:280px}
body.short .st-folder{transform:scale(1.1)}
body.short .st-track{margin-top:0;padding:9px 14px}
body.short .st-go.st-continue{margin-top:12px}

/* the hint arrow toward the steps, only before the upload */
.st-hintarrow{display:block;width:22px;height:22px;margin:-6px auto 6px;color:var(--acc-l);opacity:.8;animation:stHintBob 1.6s ease-in-out infinite}
.st-hintarrow svg{width:100%;height:100%;filter:drop-shadow(0 0 6px rgba(var(--R),.8))}
.st-hero.has-file .st-hintarrow{display:none}
@keyframes stHintBob{50%{transform:translateY(5px);opacity:1}}
/* a bigger Continue */
.st-go.st-continue{height:58px;font-size:17px;padding:0 10px 0 28px;gap:14px}
.st-go.st-continue .st-disc{width:40px;height:40px;flex-basis:40px}
.st-go.st-continue .st-disc svg{width:19px;height:19px}
/* the shake: barely there */
.st-drop.applied{animation:stNudgeCard .28s ease-out}
@keyframes stNudgeCard{25%{translate:-1.5px 0}60%{translate:1.5px 0}100%{translate:0 0}}
@media (prefers-reduced-motion:reduce){.st-hintarrow{animation:none}}
/* the dark corners while growing: the old video scrim (made for the clip playing in the card) was
   still drawn inside, in a rectangle, behind the rounder growing card. It has no job now. */
.st-scrim{display:none!important}
/* and the corners animate from the pill's real radius (half its height), not 999px, so the card
   does not bulge into an oval on the way */
.st-hero:not(.has-file) .st-drop{border-radius:60px}
.st-hero:not(.has-file) .st-screen{border-radius:56px}
.st-screen{transition:border-radius .55s var(--ease)}
/* the depth is back (Patrik): the scrim returns, but now follows the inner panel's corners, which
   animate with the card's; it only appears with a clip, fading in as the card finishes growing */
.st-hero.has-file .st-scrim{display:block!important;border-radius:inherit;opacity:1;animation:stFade .35s .45s both}
.st-hero:not(.has-file) .st-scrim{display:none!important}
/* a hint you actually notice: a lit glass disc with the arrow, a soft pulse, bobbing toward the steps */
.st-hintarrow{width:40px;height:40px;margin:-4px auto 10px;padding:9px;border-radius:50%;color:#fff;opacity:1;
  background:radial-gradient(circle at 35% 30%,rgba(255,224,190,.55),rgba(255,138,61,.55) 70%);
  border:1px solid rgba(255,255,255,.35);box-shadow:0 0 0 0 rgba(176,160,255,.6),0 8px 24px -6px rgba(255,138,61,.9);
  animation:stHintBob 1.6s ease-in-out infinite,stHintPulse 1.6s ease-out infinite}
.st-hintarrow svg{filter:none}
@keyframes stHintPulse{0%{box-shadow:0 0 0 0 rgba(176,160,255,.55),0 8px 24px -6px rgba(255,138,61,.9)}
  100%{box-shadow:0 0 22px 14px rgba(176,160,255,0),0 8px 24px -6px rgba(255,138,61,.9)}}
body.short .st-hintarrow{width:34px;height:34px;padding:7px;margin:-6px auto 8px}
/* a longer arrow: a lit line rises from the disc toward the button, a pulse travelling down it */
.st-hintarrow{position:relative;margin-top:60px}
.st-hintarrow::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);width:2px;height:64px;transform:translateX(-50%);border-radius:2px;
  background:linear-gradient(180deg,rgba(176,160,255,0),rgba(200,188,255,.85));box-shadow:0 0 8px rgba(255,138,61,.7)}
.st-hintarrow::after{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);width:4px;height:16px;transform:translateX(-50%);border-radius:4px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);box-shadow:0 0 10px rgba(255,224,190,1);animation:stHintDrop 1.6s ease-in infinite}
@keyframes stHintDrop{0%{bottom:calc(100% + 60px);opacity:0}30%{opacity:1}100%{bottom:calc(100% + 4px);opacity:0}}
body.short .st-hintarrow{margin-top:40px}
body.short .st-hintarrow::before{height:44px}
@keyframes stHintDropS{0%{bottom:calc(100% + 40px);opacity:0}30%{opacity:1}100%{bottom:calc(100% + 4px);opacity:0}}
body.short .st-hintarrow::after{animation-name:stHintDropS}
.st-hero:not(.has-file) .st-board{margin-bottom:-50px}
body.short .st-hero:not(.has-file) .st-board{margin-bottom:-36px}
/* the line runs from just under the button's line of text down to the disc (--hl set by start.js) */
.st-hintarrow::before,body.short .st-hintarrow::before{height:var(--hl,64px)}
.st-hintarrow::after,body.short .st-hintarrow::after{animation:stHintDropV 1.8s ease-in infinite}
@keyframes stHintDropV{0%{bottom:calc(100% + var(--hl,64px) - 16px);opacity:0}20%{opacity:1}100%{bottom:calc(100% + 4px);opacity:0}}
/* the step circles, for good: the "background:" shorthand on .now/.done reset background-origin, so
   the gradient again stopped short of the 1px border and repeated there as slivers. No border at all
   on a filled circle; the ring is an inset shadow that cannot tile. */
.st-track li.now .st-tn,.st-track li.done .st-tn{border:0!important;background-origin:border-box!important;background-repeat:no-repeat!important}
.st-track li:not(.now):not(.done) .st-tn{border:0!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* =====================================================================================
   THE FLOW SCREENS in the hero's language (format, brand, reveal)
   ===================================================================================== */
/* the glass panels take the blue too, so the ground and the surfaces read as one material */
:root{--gfill:linear-gradient(168deg,rgba(46,34,26,.72),rgba(20,17,15,.92) 46%,rgba(12,10,9,.96));
  --grim:linear-gradient(180deg,rgba(255,206,150,.55),rgba(255,190,120,.10) 14%,rgba(255,255,255,.03) 46%,rgba(255,138,61,.16))}
.st-top{border-bottom:0;background:linear-gradient(180deg,rgba(11,11,14,.6),transparent)}
/* step chips at the top: a small glass dock, like the hero's */
.st-steps{flex:0 0 auto;padding:5px;border-radius:999px;border:1px solid transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)) padding-box,linear-gradient(140deg,rgba(255,255,255,.28),rgba(255,255,255,.06)) border-box}
.st-steps span{border:0}
.st-steps span.on{color:#fff;background:linear-gradient(90deg,rgba(228,102,27,.72),rgba(254,177,34,.6));box-shadow:0 6px 18px -8px rgba(255,138,61,.9)}
.st-top .st-up{margin-left:auto}
/* format: glass cards, lit on hover */
.st-fmt{width:240px;padding:30px 22px 24px;border:1px solid transparent;background:var(--gfill) padding-box,var(--grim) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 70px -34px rgba(0,0,0,.95)}
.st-fmt:hover{background:linear-gradient(165deg,rgba(62,52,108,.6),rgba(22,19,36,.85) 55%) padding-box,
  linear-gradient(140deg,rgba(255,224,190,.9),rgba(255,138,61,.3) 40%,rgba(255,138,61,.6)) border-box;
  box-shadow:0 0 60px -22px rgba(255,138,61,.7),0 30px 70px -34px rgba(0,0,0,.95)}
.st-fmt-box{border-color:rgba(255,224,190,.8);background:linear-gradient(160deg,rgba(255,138,61,.25),rgba(255,138,61,.05));box-shadow:0 0 18px -6px rgba(255,138,61,.7)}
#paneFormat .st-h{font-size:34px}
/* brand: the controls sit on a glass panel, the preview gets the lit rim */
.st-brand-controls{padding:26px 28px 0;border-radius:26px;border:1px solid transparent;background:var(--gfill) padding-box,var(--grim) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 70px -34px rgba(0,0,0,.95)}
.st-brand .st-actions{background:linear-gradient(180deg,rgba(10,8,7,0),rgba(10,8,7,.96) 40%);margin:6px -28px 0;padding:14px 28px 20px;border-radius:0 0 26px 26px}
.st-frame{border:1px solid transparent;background:#000 padding-box,linear-gradient(140deg,rgba(255,220,180,.5),rgba(255,255,255,.08) 30%,rgba(255,138,61,.45)) border-box;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 70px -30px rgba(255,138,61,.55)}
/* the primary actions of the flow are the lit pill */
#brandGo,#revOpen{background:linear-gradient(90deg,rgba(228,102,27,.96),rgba(254,177,34,.96)) padding-box,
  linear-gradient(90deg,rgba(255,214,160,.6),rgba(255,240,215,1)) border-box;color:#2A1608;
  box-shadow:0 14px 40px -10px rgba(255,138,61,.75),inset 0 1px 0 rgba(255,255,255,.45)}
#brandGo .st-disc,#revOpen .st-disc{width:38px;height:38px;flex-basis:38px}
/* reveal: the summary on glass, the planet rising behind the video */
.st-reveal{position:relative}
.st-reveal-side{padding:30px 30px 26px;border-radius:26px;border:1px solid transparent;background:var(--gfill) padding-box,var(--grim) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 70px -34px rgba(0,0,0,.95);width:360px}
.st-reveal .st-player,.st-reveal .st-reveal-side{position:relative;z-index:1}
.st-revdome{position:absolute;z-index:0;left:50%;bottom:-120px;width:min(1400px,120vw);height:420px;transform:translateX(-50%);pointer-events:none}
.st-revdome .dome{position:absolute;inset:0;border-radius:50% 50% 0 0/100% 100% 0 0;border-top:1.5px solid rgba(255,236,210,.8);
  background:radial-gradient(80% 100% at 50% 0%,rgba(255,236,210,.14),rgba(255,206,150,.08) 10%,rgba(255,255,255,.03) 28%,transparent 60%);
  box-shadow:inset 0 12px 30px -10px rgba(255,214,160,.45);
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 30%,#000 70%,transparent 92%);mask-image:linear-gradient(90deg,transparent 8%,#000 30%,#000 70%,transparent 92%)}
.st-did li::before{background:var(--acc-l);box-shadow:0 0 8px rgba(255,138,61,.9)}
.st-claim{border:1px solid transparent;background:rgba(10,8,20,.5) padding-box,linear-gradient(140deg,rgba(255,255,255,.3),rgba(255,255,255,.06)) border-box}

/* =====================================================================================
   BRAND STEP in Patrik's reference (2026-09-19): the planet rising behind, the controls as bento
   tiles on one glass panel, a lit badge on the title. Selection is a MARK (white rim + a check), never
   a violet fill: the one filled control on this screen is "Show me my edit".
   ===================================================================================== */
.st-brand{position:relative;gap:48px}
.st-brand > .st-brand-preview,.st-brand > .st-brand-controls{position:relative;z-index:1}
.st-brand .st-revdome{bottom:-330px}
/* the preview is the product: as tall as the panel */
.st-brand .st-frame{height:min(76vh,720px)}
.st-brand .st-frame.wide{height:auto;width:min(50vw,760px)}
.st-live{position:absolute;z-index:3;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 11px;
  border-radius:999px;font:500 12px var(--ui);color:#EDEBFF;background:rgba(12,10,22,.55);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.st-live i{width:7px;height:7px;border-radius:50%;background:var(--acc-l);box-shadow:0 0 8px var(--acc-l);animation:stPulse 1.8s ease-in-out infinite}
@keyframes stPulse{50%{opacity:.35}}

.st-brand-controls{width:min(600px,48vw);max-height:min(86vh,840px);padding:22px 20px 0;gap:10px}
/* the timeline takes a row of its own under both columns, so the two columns give it the height back */
.st-brand.has-tl{flex-wrap:wrap;align-content:center}
.st-brand.has-tl .st-frame{height:min(64vh,620px)}
.st-brand.has-tl .st-brand-controls{max-height:min(72vh,720px)}

/* =====================================================================================
   THE TIMELINE (step 3). One block per beat in EDITED time — where a graphic lands and how long it
   holds — a window that says which part the preview is looping, and a playhead. Sliding the window
   moves the preview; tapping a block plays that beat. Nothing here edits the video.
   ===================================================================================== */
.st-tl{flex:1 0 100%;position:relative;z-index:1;margin-top:18px;padding:12px 16px 14px;border-radius:18px;
  border:1px solid transparent;background:linear-gradient(170deg,rgba(255,255,255,.045),rgba(255,255,255,.012)) padding-box,
    linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 45%,rgba(255,206,150,.16)) border-box}
.st-tl-head{display:flex;align-items:baseline;gap:10px;margin:0 2px 9px}
.st-tl-title{font:600 12.5px var(--ui);color:var(--tx)}
.st-tl-hint{font:400 11.5px var(--ui);color:var(--mut)}
.st-tl-track{position:relative;height:58px;border-radius:12px;background:rgba(9,8,15,.6);
  border:1px solid rgba(255,255,255,.09);overflow:hidden;cursor:pointer;touch-action:none}
.st-tl-blocks{position:absolute;inset:0}
.st-tl-b{position:absolute;top:8px;bottom:8px;border-radius:9px;padding:0 9px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:1px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);transition:background .18s,border-color .18s,transform .18s}
.st-tl-b b{font:600 10.5px var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--tx2);white-space:nowrap}
.st-tl-b span{font:400 11px var(--ui);color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-tl-b:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.st-tl-b.hook{background:linear-gradient(180deg,rgba(255,138,61,.4),rgba(255,138,61,.22));border-color:rgba(200,190,255,.55)}
.st-tl-b.hook b{color:#EDEBFF}
.st-tl-b.on{border-color:rgba(255,255,255,.8);box-shadow:0 0 18px -8px rgba(255,236,210,.8)}
/* the window: what the preview is looping right now */
.st-tl-win{position:absolute;top:0;bottom:0;border-radius:10px;border:1.5px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.06);box-shadow:0 0 0 9999px rgba(8,7,14,.34);cursor:grab;touch-action:none}
.st-tl-win.drag{cursor:grabbing}
/* the grips are for fingers, not for pixels: 18px wide, the full height of the track, with a visible bar */
.st-tl-win .h{position:absolute;top:0;bottom:0;width:18px;display:grid;place-items:center;cursor:ew-resize;touch-action:none}
.st-tl-win .h::after{content:"";width:6px;height:28px;border-radius:3px;background:rgba(255,255,255,.92);
  box-shadow:0 1px 6px rgba(0,0,0,.55)}
.st-tl-win .h.l{left:-9px}
.st-tl-win .h.r{right:-9px}
.st-tl-track.bare .st-tl-b{display:none}
.st-tl-play{position:absolute;top:0;bottom:0;width:2px;background:var(--acc-l);box-shadow:0 0 10px var(--acc-l);
  pointer-events:none;opacity:0;transition:opacity .2s}
.st-tl-play.on{opacity:1}
@media (max-width:900px){.st-tl{margin-top:12px;padding:10px 12px 12px}.st-tl-track{height:50px}.st-tl-b span{display:none}}
.st-bhead{display:flex;gap:14px;align-items:flex-start;margin:0 4px 8px}
.st-badge{flex:0 0 44px;height:44px;margin-top:2px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 35% 28%,rgba(255,240,215,.95),rgba(255,138,61,.9) 45%,rgba(60,44,140,.95));
  box-shadow:0 0 0 5px rgba(255,138,61,.12),0 0 28px -4px rgba(255,138,61,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.st-badge svg{width:20px;height:20px}
.st-brand .st-h{font-size:26px;margin:0 0 4px}
.st-brand .st-p{margin:0;font-size:13.5px}

/* the bento tile: faint glass, a rim lit from the top left, dot texture fading in from the corner */
.st-bt{position:relative;flex:0 0 auto;padding:14px 14px 13px;border-radius:18px;border:1px solid transparent;overflow:hidden;
  background:linear-gradient(170deg,rgba(255,255,255,.045),rgba(255,255,255,.012)) padding-box,
    linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,rgba(255,206,150,.18)) border-box}
.st-bt::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.2px);background-size:12px 12px;
  -webkit-mask-image:radial-gradient(45% 80% at 100% 0%,#000,transparent 75%);mask-image:radial-gradient(45% 80% at 100% 0%,#000,transparent 75%)}
.st-bt > *{position:relative}
.st-brand .st-bt .st-group{margin-bottom:14px}
.st-brand .st-bt .st-group:last-child{margin-bottom:0}
.st-brand .st-label{font-size:12.5px;margin-bottom:9px}
.st-brand .st-label small{color:var(--mut)}

/* font tiles: their word in the face, the name whole underneath */
.st-brand .st-fontrow{gap:7px}
.st-brand .st-fchip{position:relative;height:54px;gap:3px;border-radius:13px;border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.03);transition:background .2s,border-color .2s,box-shadow .25s}
.st-brand .st-fchip .f{font-size:20px;max-width:92%;overflow:hidden}
.st-brand .st-fchip .n{font-size:9.5px;line-height:1.15;white-space:normal;text-align:center;max-width:92%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.st-brand .st-fchip.def .f{font:600 13px var(--ui);color:var(--tx)}
.st-brand .st-fchip:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.26)}
.st-brand .st-fchip[aria-pressed="true"]{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.9);
  box-shadow:0 0 24px -10px rgba(255,236,210,.65),inset 0 1px 0 rgba(255,255,255,.12)}
.st-brand .st-fchip[aria-pressed="true"] .n{color:var(--tx2)}
.st-brand .st-fchip[aria-pressed="true"]::after{content:"";position:absolute;top:6px;right:6px;width:13px;height:13px;border-radius:50%;
  background:var(--acc-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7l4.5-5' fill='none' stroke='%23150f27' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px no-repeat;
  box-shadow:0 0 8px rgba(255,138,61,.9)}

/* colours: rings, not borders; "Style" is a word, not a crossed-out circle */
.st-brand .st-colors{gap:9px}
.st-brand .st-colrow{gap:12px}
.st-brand .st-colname{width:64px;font-size:12.5px}
.st-brand .st-sw{width:26px;height:26px;border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.st-brand .st-sw[aria-pressed="true"]{box-shadow:0 0 0 2px #12100F,0 0 0 3.5px #fff,0 0 14px -2px rgba(255,255,255,.5)}
.st-brand .st-sw.none{width:auto;padding:0 11px;border-radius:999px;font:600 11px var(--ui);color:var(--tx2);background:rgba(255,255,255,.05)}
.st-brand .st-sw.none[aria-pressed="true"]{color:#fff;background:rgba(255,255,255,.1)}
.st-brand .st-hex{height:28px;width:88px;border-radius:9px;background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.12)}
.st-brand .st-hex::placeholder{color:var(--faint);text-transform:none}
/* More: the brand's extra colours. Each is its own picker; the x sits on the rim */
.st-brand .st-sw.more,.st-brand .st-sw.add{cursor:pointer}
.st-brand .st-sw.more input,.st-brand .st-sw.add input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.st-brand .st-sw.add{display:grid;place-items:center;color:var(--tx2);background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);border:1px dashed transparent}
.st-brand .st-sw.add:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.st-brand .st-sw.add svg{width:14px;height:14px;pointer-events:none}
.st-sw-x{position:absolute;z-index:2;top:-5px;right:-5px;width:15px;height:15px;padding:0;border-radius:50%;border:0;display:grid;place-items:center;
  color:#12100F;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.6);opacity:0;transition:opacity .15s}
.st-sw-x svg{width:9px;height:9px}
.st-sw.more:hover .st-sw-x,.st-sw-x:focus-visible{opacity:1}
@media (hover:none){.st-sw-x{opacity:1}}
.st-colhint{color:var(--faint);font-size:11.5px}

/* pills: neutral glass; picked = a white rim and the lit check disc (the mark), no violet body */
.st-brand .st-pill{height:34px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
.st-brand .st-pill:hover{border-color:rgba(255,255,255,.28)}
.st-brand .st-pill[aria-pressed="true"]{color:#fff;border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);
  box-shadow:0 0 22px -12px rgba(255,236,210,.7)}

.st-brand .st-actions{margin:4px -20px 0;padding:14px 20px 20px}
@media (max-width:1100px){.st-brand{gap:28px}.st-brand .st-frame{height:min(64vh,560px)}}

/* Log in, top right of the flow: the steps dock's glass, quiet until hovered */
.st-login{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;color:var(--tx);font:500 13px var(--ui);
  cursor:pointer;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);transition:border-color .2s,background .2s}
.st-login:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
.st-login[data-in="1"]{padding-left:4px}
.st-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--ui);font-style:normal;color:#2A1608;
  background:radial-gradient(circle at 35% 30%,#fff,var(--acc) 75%);box-shadow:0 0 10px rgba(255,138,61,.7)}
.st-top .st-up[hidden] + .st-login{margin-left:auto}

/* =====================================================================================
   BRAND STEP ON ONE SCREEN (Patrik 2026-09-19: "non scrollable so we can see all the features, buttons without
   scrolling"). Stacked, the panel ran ~810px. Wider panel, each font list as ONE row of ten, More + Text on one
   line, the pills in single rows: ~615px, inside a 768px laptop beside the preview. The panel keeps overflow:auto
   only as the last resort for a very short window, so nothing is ever cut off.
   ===================================================================================== */
.st-brand{gap:40px;padding-top:12px;padding-bottom:16px}
.st-brand .st-brand-preview{flex:0 0 auto}
.st-brand .st-frame{height:min(calc(100vh - 150px),680px)}
.st-brand .st-frame.wide{height:auto;width:min(44vw,700px)}
.st-brand-controls{flex:0 1 860px;width:auto;min-width:0;max-height:calc(100vh - 100px);padding:18px 18px 0;gap:8px}
.st-bhead{margin:0 2px 4px;gap:12px;align-items:center}
.st-badge{flex-basis:38px;height:38px;margin-top:0}
.st-badge svg{width:17px;height:17px}
.st-brand .st-h{font-size:22px;margin:0 0 2px}
.st-brand .st-p{font-size:13px}
.st-bt{padding:12px 12px 12px}
.st-brand .st-bt .st-group{margin-bottom:10px}
.st-brand .st-label{margin-bottom:7px}
/* fonts: ten across */
.st-brand .st-fontrow{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.st-brand .st-fchip{height:52px;border-radius:11px;padding:0 3px}
.st-brand .st-fchip .f{font-size:17px}
.st-brand .st-fchip .n{font-size:8.5px}
.st-brand .st-fchip[aria-pressed="true"]::after{top:4px;right:4px;width:11px;height:11px;background-size:7px}
/* colours: Highlight on its own line, More and Text share the next */
.st-brand .st-colors{gap:8px}
.st-colpair{display:flex;flex-wrap:wrap;gap:8px 28px}
.st-colpair .st-colrow{flex:0 1 auto}
/* pills: a single row each */
.st-brand .st-pills{gap:6px}
.st-brand .st-pill{height:30px;font-size:12.5px;padding:0 12px 0 4px;gap:7px}
.st-brand .st-pill .st-disc{width:22px;height:22px;flex-basis:22px}
.st-brand .st-actions{margin:2px -18px 0;padding:10px 18px 16px}
#brandGo{height:48px;font-size:15px}
#brandGo .st-disc{width:34px;height:34px;flex-basis:34px}
/* short windows: the same screen, tighter */
@media (max-height:780px){
  .st-brand-controls{padding-top:14px}
  .st-brand .st-p{display:none}
  .st-brand .st-fchip{height:44px}
  .st-brand .st-fchip .n{display:none}
  .st-bt{padding:10px 12px}
  .st-brand .st-label{margin-bottom:5px}
}
@media (max-width:1180px){
  .st-brand{gap:24px}
  .st-brand .st-fontrow{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* 🎨 LOOKS — the first choice on the brand step (Patrik 2026-09-19: "more visible style preferences so users are not
   guessing"). Each card is a small picture of the hook in that look. */
.st-looks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.st-look{position:relative;border-radius:12px;border:1px solid rgba(255,255,255,.1);padding:0;overflow:hidden;cursor:pointer;
  background:#0d0d12;aspect-ratio:720/427;display:block}
.st-look img{width:100%;height:100%;object-fit:cover;display:block}
.st-look .ln{background:rgba(0,0,0,.65);padding:3px 7px;border-radius:6px;color:#fff!important}
.st-look[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.st-look .lt{font-size:15px;line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.st-look .lb{font-size:10px;line-height:1;text-transform:uppercase;opacity:.9}
.st-look .lr{display:flex;gap:4px;margin-top:6px}.st-look .lr i{width:12px;height:18px;border-radius:3px;background:rgba(255,255,255,.18)}
.st-look .lr i.h{height:22px}
.st-look .ln{position:absolute;left:8px;bottom:6px;font:600 10px Inter,system-ui,sans-serif;color:#b9b3d0}
.st-look.light{background:linear-gradient(180deg,#fff,#dfe8fb)}.st-look.light .ln{color:#5a6a8a}.st-look.light .lr i{background:rgba(10,15,31,.12)}
/* the hook the brain will write, on their clip, in their fonts and colours */
.st-hookpv{position:absolute;z-index:6;left:0;right:0;top:60%;display:flex;flex-direction:column;align-items:center;gap:2px;
  pointer-events:none;text-align:center;padding:0 8%;animation:stHookIn .5s ease both}
.st-hookpv .t{font-size:clamp(18px,3.1vh,30px);line-height:.95;text-transform:uppercase;text-shadow:0 3px 12px rgba(0,0,0,.6)}
.st-hookpv .b{font-size:clamp(11px,1.8vh,17px);line-height:1;text-transform:uppercase;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.st-hookpv .reels{display:flex;gap:6px;align-items:flex-end;margin-top:10px}
.st-hookpv .reels i{width:34px;height:52px;border-radius:6px;background:rgba(40,40,48,.55);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(2px);filter:blur(1px)}
.st-hookpv .reels i.hot{width:44px;height:66px;filter:none;background:rgba(30,30,36,.7);border-color:rgba(255,255,255,.5);position:relative}
.st-hookpv .reels i.hot em{position:absolute;left:4px;bottom:4px;font:700 9px Inter,system-ui,sans-serif;font-style:normal}
@keyframes stHookIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.st-plan ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.st-plan li{font:500 12px Inter,system-ui,sans-serif;color:#e8e4f4;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08)}
.st-plan li b{color:var(--st-hi,#C8FF52);font-weight:700;margin-right:4px}

/* fonts + colours folded under the looks (Patrik 2026-09-19): a look is the choice, these are adjustments */
.st-fine{border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:10px 14px}
.st-fine > summary{cursor:pointer;list-style:none;margin:0}
.st-fine > summary::-webkit-details-marker{display:none}
.st-fine > summary::after{content:"＋";float:right;opacity:.6}
.st-fine[open] > summary::after{content:"－"}
.st-fine[open] > summary{margin-bottom:10px}


/* ── CAPTION STYLE SLIDER (brand step) ──────────────────────────────────────────────────────────
   Cards slide left→right; each one is the real style rendered by CaptionRuntime, so tapping is
   picking. The arrows are for a mouse; the row scrolls by touch and trackpad on its own. */
.st-caps-slide{position:relative;display:flex;align-items:center;gap:6px}
.st-capstyles{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 6px;
  scrollbar-width:none;-ms-overflow-style:none}
.st-capstyles::-webkit-scrollbar{display:none}
.st-cs{flex:0 0 auto;width:132px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);
  border-radius:12px;padding:0 0 6px;cursor:pointer;scroll-snap-align:start;overflow:hidden;
  transition:border-color .16s ease,transform .16s ease,background .16s ease}
.st-cs:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.st-cs[aria-pressed="true"]{border-color:var(--st-hi,#FF8A3D);box-shadow:0 0 0 1px var(--st-hi,#FF8A3D) inset}
.st-cs .pv{position:relative;display:block;height:78px;border-radius:11px 11px 0 0;overflow:hidden;
  background:linear-gradient(160deg,#20202a,#111117)}
.st-cs .nm{display:block;padding:6px 8px 0;font-size:11.5px;color:var(--tx2);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-cs[aria-pressed="true"] .nm{color:#fff}
.st-slidebtn{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);color:#d8d4e8;display:grid;place-items:center;cursor:pointer}
.st-slidebtn:hover{background:rgba(255,255,255,.12)}

/* ── COLOURS: each row says what the colour does, and the sample shows it ───────────────────── */
.st-colname{display:flex;flex-direction:column;gap:1px;width:176px;flex:0 0 176px}
.st-colname b{font-size:13px;font-weight:600;color:#efecff}
.st-colname i{font-style:normal;font-size:10.5px;line-height:1.2;color:var(--tx3,#8f8aa8)}
.st-brand .st-colrow{align-items:center;gap:14px;margin-bottom:2px}
.st-brand .st-colname{width:176px;font-size:13px}
.st-colsample{display:flex;align-items:center;gap:10px;margin-top:2px;padding:7px 12px;border-radius:10px;
  background:rgba(0,0,0,.28);font-size:14px}
.st-colsample b{font-weight:800}
.st-colsample i{width:14px;height:14px;border-radius:4px;display:inline-block}

/* ── FONTS: one row each, sliding, so the fine-tune block stays short ───────────────────────── */
.st-brand .st-fontrow{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.st-brand .st-fontrow::-webkit-scrollbar{display:none}
.st-brand .st-fchip{flex:0 0 auto;width:74px}


/* ── style cards: the app's own poster on top, the live runtime underneath (hover plays it) ──── */
.st-capstyles{cursor:grab}
.st-capstyles.grab{cursor:grabbing;scroll-snap-type:none}
.st-cs{width:168px}
.st-cs .pv{height:104px}
.st-cs .pv .po{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .18s ease}
.st-cs .pv .po.on{opacity:1}
.st-cs:hover .pv .po{opacity:0}
.st-cs .nm{padding-top:7px;font-size:12px}

/* ── font picker: one button, one list, every name set in its own face ──────────────────────── */
.st-fsel-wrap,.st-brand .st-fontrow.st-fsel-wrap{position:relative;display:block;overflow:visible;grid-template-columns:none}
.st-fsel{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:#efecff;font-size:15px;cursor:pointer}
.st-fsel:hover{background:rgba(255,255,255,.08)}
.st-fsel .v{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.st-fsel .ch{display:grid;place-items:center;color:#a49fc0}
.st-fmenu{position:fixed;z-index:120;max-height:300px;overflow-y:auto;
  padding:6px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#17151f;
  box-shadow:0 18px 44px rgba(0,0,0,.55)}
.st-fopt{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:8px;background:none;
  color:#d9d5ea;font-size:16px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-fopt:hover{background:rgba(255,255,255,.08);color:#fff}
.st-fopt[aria-pressed="true"]{background:rgba(139,92,246,.28);color:#fff}


/* the hook says its own name while it plays, so nobody has to guess what "Hook" bought them */
.st-hookbadge{position:absolute;left:12px;bottom:12px;z-index:6;padding:5px 10px;border-radius:999px;
  background:rgba(10,8,18,.72);border:1px solid var(--st-hi,#FF8A3D);color:#fff;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase}


/* replay the opening: always there, quiet until you want it */
.st-replay{position:absolute;right:12px;bottom:12px;z-index:7;display:flex;align-items:center;gap:7px;
  padding:7px 12px 7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(10,8,18,.66);color:#efecff;font-size:12.5px;cursor:pointer;backdrop-filter:blur(6px);
  opacity:.72;transition:opacity .16s ease,background .16s ease}
.st-replay:hover{opacity:1;background:rgba(10,8,18,.86)}
/* sound: the same pill, on the left, and it says which state it is IN, not what it will do */
.st-sound{position:absolute;left:12px;bottom:12px;z-index:7;display:flex;align-items:center;gap:7px;
  padding:7px 12px 7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(10,8,18,.66);color:#efecff;font-size:12.5px;cursor:pointer;backdrop-filter:blur(6px);
  opacity:.72;transition:opacity .16s ease,background .16s ease,border-color .16s ease}
.st-sound:hover{opacity:1;background:rgba(10,8,18,.86)}
.st-sound svg.on{display:none}
.st-sound[aria-pressed="true"]{opacity:1;border-color:rgba(255,255,255,.55)}
.st-sound[aria-pressed="true"] svg.on{display:block}
.st-sound[aria-pressed="true"] svg.off{display:none}


/* =====================================================================================
   STEP 4 · THE STORYBOARD (Patrik's sketch 2026-09-21: the edit playing, a card per beat with
   Approve / Change / Remove, and a panel of visuals on the right). Same glass language as the
   brand step: a mark is a white rim and a check, never a violet fill.
   ===================================================================================== */
/* the whole screen is one centred block: the player and its panel, the board under them */
.st-story{position:relative;flex-direction:column;gap:18px;align-items:center;justify-content:center}
.st-boardwrap{width:min(1180px,94vw);display:flex;flex-direction:column;gap:8px}
.st-boardwrap .st-label{margin:0 2px}
.st-story-top{width:min(1180px,94vw)}
.st-story > *{position:relative;z-index:1}
.st-story .st-revdome{bottom:-360px}
.st-story-top{display:flex;gap:40px;align-items:center;justify-content:center}
.st-story .st-frame{height:min(58vh,560px)}
.st-story .st-frame.wide{height:auto;width:min(46vw,700px)}
.st-story-side{width:min(560px,44vw);display:flex;flex-direction:column;gap:12px}
.st-story .st-h{font-size:26px;margin:0}
.st-story .st-p{margin:0;font-size:13.5px}
.st-tabs{display:flex;gap:6px;padding:4px;border-radius:12px;background:rgba(255,255,255,.05);align-self:flex-start}
.st-tab{height:30px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--mut);
  font:600 12.5px var(--ui);cursor:pointer}
.st-tab[aria-pressed="true"]{background:rgba(255,255,255,.12);color:#fff}
.st-libwrap{min-height:150px}
.st-libhint{margin:0 0 8px;font:400 12.5px var(--ui);color:var(--mut)}
.st-libhint b{color:var(--tx)}
.st-lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;max-height:230px;overflow:auto}
.st-lib button{position:relative;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.03);cursor:pointer;aspect-ratio:9/16;transition:border-color .18s,box-shadow .2s}
.st-lib button:hover{border-color:rgba(255,255,255,.5)}
.st-lib button img{width:100%;height:100%;object-fit:cover;display:block}
.st-lib button span{position:absolute;left:5px;right:5px;bottom:5px;padding:3px 6px;border-radius:7px;
  background:rgba(8,7,14,.72);color:#fff;font:600 9.5px var(--ui);text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-lib button[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 22px -8px rgba(255,236,210,.8)}

/* the storyboard: one card per beat, in order.
   ⚠ NOT .st-board — that is the HERO's feature graph, and styling it here put a grey panel behind the
   upload screen that took Patrik two screenshots to point at (2026-09-21). */
.st-storyboard{display:flex;gap:10px;overflow-x:auto;min-height:118px;padding:12px;border-radius:18px;border:1px solid transparent;
  background:linear-gradient(170deg,rgba(255,255,255,.045),rgba(255,255,255,.012)) padding-box,
    linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 45%,rgba(255,206,150,.16)) border-box;
  scrollbar-width:thin}
.st-card{flex:0 0 190px;display:flex;flex-direction:column;gap:7px;padding:8px;border-radius:14px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);transition:border-color .2s,opacity .25s}
.st-card[aria-selected="true"]{border-color:rgba(255,255,255,.85);box-shadow:0 0 24px -10px rgba(255,236,210,.7)}
.st-card.gone{opacity:.42}
.st-card .th{position:relative;aspect-ratio:9/16;max-height:150px;border-radius:10px;overflow:hidden;background:#0c0a16}
.st-card .th canvas,.st-card .th img{width:100%;height:100%;object-fit:cover;display:block}
.st-card .kind{font:600 10px var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--tx2)}
.st-card .line{font:400 11.5px var(--ui);color:var(--tx);line-height:1.3;max-height:30px;overflow:hidden}
.st-card .row{display:flex;gap:5px}
.st-card .row button{flex:1;height:26px;border-radius:8px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);color:var(--tx);font:600 10.5px var(--ui);cursor:pointer;
  transition:background .18s,border-color .18s}
.st-card .row button:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35)}
.st-card .row button.ok[aria-pressed="true"]{border-color:#34c759;color:#9cf0b4}
.st-card .row button.rm[aria-pressed="true"]{border-color:#ff6b6b;color:#ffb3b3}
@media (max-width:1100px){.st-story-top{flex-direction:column;gap:20px}.st-story-side{width:min(680px,92vw)}}


/* the graphic style slider: the same rail as the caption styles, its tiles showing the visuals */
.st-gfxstyles .st-cs{width:150px}
.st-gfxstyles .st-cs .pv{background:#0c0a16}
.st-gfxstyles .st-cs img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* the board with nothing in it: say what the edit is, and offer the one thing that fills it */
.st-boardempty{display:flex;align-items:center;gap:14px;padding:10px 6px}
.st-boardempty p{margin:0;font:400 13px var(--ui);color:var(--mut)}


/* =====================================================================================
   FINE-TUNE, REORGANISED (Patrik 2026-09-22: "caption previews are taking too much space …
   2 fonts below each other, I would rather have them next to each other … I don't know what is
   highlight, what is caption text, what is extra"). Smaller style tiles, fonts side by side, and
   a colour control that IS the caption: tap the part you want to change.
   ===================================================================================== */
.st-brand .st-cs{width:112px}
.st-brand .st-cs .pv{height:64px}
.st-brand .st-cs .nm{font-size:11px;padding:5px 6px 0}
.st-gfxstyles .st-cs{width:124px}

.st-tune{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media (max-width:820px){.st-tune{grid-template-columns:1fr}}
.st-tune .st-group{margin-bottom:0}

/* the colour line: a real caption, and every part of it is the control for its own colour */
.st-colgroup{position:relative;margin-top:12px}
.st-colsample.live{gap:8px;padding:9px 10px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08)}
.st-colsample.live button{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:9px;
  border:1px solid transparent;background:transparent;cursor:pointer;font:inherit;transition:border-color .16s,background .16s}
.st-colsample.live button:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.st-colsample.live button[aria-expanded="true"]{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.08)}
.st-colsample.live .hi b{font-weight:800;font-size:15px}
.st-colsample.live .tx span{font-size:14px}
.st-colsample.live .ex{margin-left:auto}
.st-colsample.live .ex i{width:14px;height:14px;border-radius:4px;display:inline-block;
  background:conic-gradient(from 210deg,#FEB122,#FF8A3D,#FFE0A8,#FEB122);opacity:.55}
.st-colsample.live .ex em{font-style:normal;font-size:11.5px;color:var(--mut)}

/* one popover per part, anchored under the line */
.st-pop{position:absolute;z-index:9;left:0;right:0;margin-top:6px;padding:10px 12px 12px;border-radius:14px;}
.st-pop.float{position:fixed;z-index:140;left:0;right:auto;margin:0;padding:10px 12px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);background:rgba(16,14,26,.97);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.9);backdrop-filter:blur(10px)}
.st-poptitle{font:500 11.5px var(--ui);color:var(--mut);margin-bottom:8px}
.st-poptitle small{opacity:.75}

/* a beat with no visual yet, and a card whose words you can type over */
.st-card.plain{opacity:.86;border-style:dashed}
.st-card.plain .kind{color:var(--mut)}
.st-card.editable .line{outline:none;border-bottom:1px dashed rgba(255,255,255,.25);cursor:text;white-space:pre-line}
.st-card.editable .line:focus{border-bottom-color:rgba(255,255,255,.7)}


/* ⚠ THE POPOVER LIVES ON <body>, so the .st-brand swatch rules do not reach it — which is why the "Style" chip
   came back as a 28px circle with its label spilling over the first colour (Patrik 2026-09-22: "those colors are
   overlapping slightly and feel too pressed"). The same rules, scoped here, with more air between them. */
.st-pop.float{padding:12px 14px 14px}
.st-pop .st-swatches{gap:11px;row-gap:12px;align-items:center}
.st-pop .st-sw{width:26px;height:26px;border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.st-pop .st-sw[aria-pressed="true"]{box-shadow:0 0 0 2px #12100F,0 0 0 3.5px #fff,0 0 14px -2px rgba(255,255,255,.5)}
.st-pop .st-sw.none{width:auto;height:26px;padding:0 12px;border-radius:999px;font:600 11px var(--ui);
  color:var(--tx2);background:rgba(255,255,255,.06);box-shadow:none;display:inline-flex;align-items:center}
.st-pop .st-sw.none[aria-pressed="true"]{color:#fff;background:rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.st-pop .st-sw.pick{background:conic-gradient(#ff4d4d,#ffd400,#4dff00,#00d0ff,#8c5cff,#ff4dd8,#ff4d4d)}
.st-pop .st-hex{flex:0 0 auto;height:30px;width:104px;margin-top:2px;border-radius:9px;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.14);color:var(--tx)}
.st-pop .st-colhint{width:100%;color:var(--faint);font-size:11px}

/* the extra-colour swatches, inside the floating popover (same reason: .st-brand does not reach <body>) */
.st-pop .st-sw.more,.st-pop .st-sw.add{cursor:pointer;width:26px;height:26px;border-radius:50%;position:relative}
.st-pop .st-sw.more input,.st-pop .st-sw.add input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.st-pop .st-sw.add{display:grid;place-items:center;color:var(--tx2);background:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.st-pop .st-sw.add:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.st-pop .st-sw.add svg{width:14px;height:14px;pointer-events:none}


/* =====================================================================================
   STEP 4, to his sketch: a big visuals panel, the TIMELINE under the player, and the three
   decisions under that. No Chrome scrollbar anywhere near it.
   ===================================================================================== */
.st-story-top{align-items:stretch}
.st-story .st-story-side{width:min(760px,52vw)}
.st-story .st-lib{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;max-height:min(46vh,430px);
  overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.st-story .st-lib::-webkit-scrollbar{width:6px}
.st-story .st-lib::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
.st-story .st-lib::-webkit-scrollbar-track{background:transparent}
.st-story .st-libwrap{min-height:0}

/* the strip sits here on this screen; it is the same element the brand step uses */
.st-tlhost{width:100%}
.st-tlhost .st-tl{margin-top:0}

/* the three decisions, under the strip, acting on whatever block is selected */
.st-beatbar{display:flex;align-items:center;gap:14px;margin-top:10px;padding:10px 14px;border-radius:14px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.st-beatbar .who{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.st-beatbar .who b{font:600 11px var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--tx2)}
.st-beatbar .who i{font:400 13px var(--ui);font-style:normal;color:var(--tx);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-beatbar .acts{display:flex;gap:8px}
.st-beatbar .acts button{height:32px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);color:var(--tx);font:600 12px var(--ui);cursor:pointer;
  transition:background .16s,border-color .16s}
.st-beatbar .acts button:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.34)}
.st-beatbar .acts .ok[aria-pressed="true"]{border-color:#34c759;color:#9cf0b4}
.st-beatbar .acts .rm[aria-pressed="true"]{border-color:#ff6b6b;color:#ffb3b3}
.st-tl-b.plain{background:rgba(255,255,255,.05);border-style:dashed}
.st-tl-b.plain b{color:var(--faint)}
.st-boardlab{margin:14px 2px 0}


/* ⚠ Four rounds of "make it fit" patches used to live here, each overriding the last (flex:1 1 auto,
   min-height 54vh, then 48vh, then a shorter board). They fought the layout block at the end of this file,
   which is now the one place step 4 is sized. */

/* the font menu: a heading per tier, and the upload row at the end */
.st-fgrp{padding:8px 12px 4px;font:600 10.5px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.st-fup{position:relative;display:flex;flex-direction:column;gap:1px;margin-top:4px;cursor:pointer;
  border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 8px 8px;padding-top:10px}
.st-fup span{font:600 13px var(--ui);color:var(--tx)}
.st-fup small{font:400 11px var(--ui);color:var(--faint)}
.st-fup input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

/* Make my video: the progress of the real export, on this screen */
.st-actions-story{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.st-make{width:100%;margin-top:4px}
.st-make-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.st-make-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--acc-l);transition:width .4s ease}
.st-make-txt{margin:6px 0 0;font:400 12.5px var(--ui);color:var(--mut)}
.st-make-dl{margin-top:10px}
#storyMakeUp b{color:var(--tx);cursor:pointer;text-decoration:underline}

/* a card shows the decision, it does not repeat the buttons */
.st-card .mark{font:600 10px var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);min-height:12px}
.st-card.gone .mark{color:#ffb3b3}
.st-ctahint{margin:2px 0 0}

/* the three caption sliders: compact, one line each */
.st-capset{margin-top:12px}
.st-sliders{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:820px){.st-sliders{grid-template-columns:1fr}}
.st-slider{display:flex;flex-direction:column;gap:4px}
.st-slider span{font:500 11.5px var(--ui);color:var(--mut)}
.st-slider i{font:500 11px var(--ui);font-style:normal;color:var(--tx2)}
.st-slider input[type=range]{width:100%;accent-color:var(--acc-l);height:18px}

/* two ways on, side by side: the editor is the wide door, the render is beside it */
.st-twocta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.st-go.ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);box-shadow:none;color:var(--tx)}
.st-go.ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.st-ctahint b{color:var(--tx)}

/* a visual built from the line, not from the library: the tile IS the words it will draw */
.st-lib button.txt{display:flex;align-items:center;justify-content:center;padding:10px;
  background:linear-gradient(160deg,rgba(255,138,61,.18),rgba(255,255,255,.03))}
.st-lib button.txt u{font:800 15px/1.15 var(--ui);text-decoration:none;color:var(--tx);text-align:center;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-transform:uppercase}
.st-lib button i{position:absolute;left:5px;right:5px;bottom:26px;padding:2px 6px;border-radius:6px;
  font:400 10px/1.25 var(--ui);font-style:normal;color:rgba(255,255,255,.72);background:rgba(0,0,0,.55);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-lib button.txt i{display:none}
.st-lib button[aria-pressed="true"]{border-color:var(--st-hi,#FF8A3D);box-shadow:0 0 0 2px rgba(255,138,61,.45)}

/* the rail fades out at both ends instead of slicing a card in half (Patrik 2026-09-22:
   "can we also fade the edges of these previews") — the mask follows the scroll, so a rail
   sitting at its start or end shows a hard edge only where there is nothing more to see */
.st-capstyles{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
.st-capstyles.at-start{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%)}
.st-capstyles.at-end{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 100%)}
.st-capstyles.at-start.at-end{-webkit-mask-image:none;mask-image:none}
/* the visuals grid scrolls down, so it fades at the bottom */
.st-lib{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 22px),transparent 100%)}
.st-lib.at-end{-webkit-mask-image:none;mask-image:none}


/* =====================================================================================
   STEP 4 — LAYOUT (Patrik 2026-09-22: "now this step, we need to work on layout and design").
   One subject per area: the player on the left, the beat and everything that acts on it in one
   panel on the right, and the edit itself — strip then board — in one band underneath. The old
   screen had the beat's three buttons in a strip of their own, a panel that ended halfway across
   its column, and a board with half a screen of empty floor beside four cards.
   ===================================================================================== */
/* the step is a column of blocks that must not be squeezed: the flex parent was shrinking this row and the
   player hung over the band below it */
.st-pane.st-story{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:flex-start;
  overflow:auto;padding:14px 0 10px}
.st-story .st-story-top,.st-story .st-boardwrap{flex:0 0 auto}
.st-story .st-story-side{min-height:0}
.st-story-top{display:grid;grid-template-columns:minmax(260px,30%) 1fr;gap:26px;align-items:stretch;
  width:min(1180px,94vw)}
/* the player states its HEIGHT (a stretched grid item with aspect-ratio reported the wrong one and
   the picture hung over the band below it) */
.st-story .st-frame{height:min(58vh,560px);width:auto;aspect-ratio:9/16;align-self:start;justify-self:center}
.st-story .st-frame.wide{height:auto;aspect-ratio:16/9;width:100%;max-height:min(40vh,380px)}
.st-story .st-story-side{width:auto;gap:12px;padding:18px 20px 16px;border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.st-story .st-h{font-size:24px}
/* the tiles keep their size instead of stretching across an empty panel */
.st-story .st-lib{grid-template-columns:repeat(auto-fill,minmax(132px,164px));justify-content:start;
  min-height:238px;max-height:min(38vh,340px)}
.st-story .st-beatbar{margin-top:0;background:rgba(255,255,255,.05)}
.st-story .st-tabs{margin-top:2px}
.st-story .st-ctahint{margin-top:2px;max-width:62ch}

/* the edit itself, in one band: the strip, then the board it belongs to */
.st-boardwrap{padding:14px 16px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(168deg,rgba(255,255,255,.045),rgba(255,255,255,.012));gap:6px}
.st-boardwrap .st-tlhost .st-tl{background:transparent;border:0;padding:6px 0 0}
.st-boardwrap .st-boardlab{margin:12px 2px 2px}
.st-boardwrap .st-boardlab:first-child{margin-top:0}
/* the cards fill the band instead of huddling on the left */
.st-storyboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;
  overflow-x:visible;overflow-y:auto;max-height:min(34vh,320px);padding:2px;border:0;background:none}
.st-card{flex:0 0 auto;width:auto}
.st-card .th{max-height:118px}
@media (max-width:1100px){
  .st-story-top{grid-template-columns:1fr}
  .st-story .st-frame{max-height:min(52vh,460px);justify-self:center}
}


/* ── THE SPECIMEN PANEL: the font, set in the font, and the palette as chips ─────────────────── */
.st-spec{padding:16px 18px 14px;border-radius:16px;border:1px solid var(--line-2);
  background:linear-gradient(150deg,rgba(255,138,61,.20),rgba(22,17,14,.72) 60%)}
.st-spec-lab{font:600 10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);text-align:center}
.st-spec-name{margin:6px 0 10px;font-size:clamp(28px,4.2vw,46px);line-height:1;text-align:center;color:#fff}
.st-spec-roles{display:flex;justify-content:space-between;gap:12px;font:400 12.5px var(--ui);color:var(--tx2)}
.st-spec-roles span{max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-spec-roles span:last-child{text-align:right}

.st-colsample.chips{display:flex;flex-wrap:wrap;gap:8px;background:none;padding:0;margin-top:6px}
.st-colsample.chips button{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 8px;
  border-radius:999px;border:1px solid var(--line-2);background:rgba(22,17,14,.62);color:var(--tx);
  font:600 13px var(--ui);cursor:pointer;transition:border-color .16s,background .16s}
.st-colsample.chips button:hover{border-color:rgba(255,190,120,.45);background:rgba(38,28,22,.8)}
.st-colsample.chips i{width:24px;height:24px;border-radius:50%;flex:0 0 24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.st-colsample.chips u{margin-left:2px;font:500 11px var(--ui);text-decoration:none;color:var(--mut);
  font-variant-numeric:tabular-nums}
.st-colsample.chips b,.st-colsample.chips span,.st-colsample.chips em{font-style:normal;font-weight:600}


/* ONE scroller on this panel: the controls column. A second one inside the details block put the palette
   in a box of its own and the sticky action bar floated in the middle of the sliders. */
.st-brand .st-bt{display:flex;flex-direction:column;gap:12px}
.st-brand .st-spec{padding:12px 16px 10px}
.st-brand .st-spec-name{font-size:clamp(24px,3vw,36px);margin:4px 0 8px}


/* the actions bar is sticky over the scrolling controls, so the last row needs room to clear it —
   the colour palette was ending up underneath "Show me my edit" */
.st-brand .st-fine{margin-bottom:70px}
.st-brand .st-actions{background:linear-gradient(180deg,rgba(4,8,17,0),rgba(4,8,17,.92) 38%);padding-top:10px}

/* the panel never grows past the window */
.st-brand .st-brand-controls{max-height:min(84vh,900px)}


/* =====================================================================================
   THE FIRST SCREEN, MADE SIMPLE (Patrik 2026-09-22: "I'm not trying to change only color" …
   "I'm trying to make it as easy as possible for new users").
   The circuit board — six tiles scattered left and right, traces carrying light into a chip,
   pulses running along them — is a picture of how it works, not a thing to use. It asked a
   first-time visitor to read a diagram before they could drop a clip. What is left is one
   light, one card to drop on, and the features as a plain row of switches underneath.
   ===================================================================================== */
.st-traces,.st-board .st-ring{display:none!important}
.st-board{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:14px;
  width:min(920px,94vw);height:auto}
/* before a clip lands the card IS the button (one thing to press); with a clip it grows into the slab */
.st-drop{position:static!important;transform:none!important;order:1;flex:0 0 100%;margin:0 auto}
.st-hero.has-file .st-drop{width:min(640px,92vw);height:min(46vh,380px)}
.st-go.st-continue{position:static!important;transform:none!important;order:3;flex:0 0 100%;margin:4px auto 0}
.st-node{position:static!important;order:2;display:inline-flex;flex-direction:row;align-items:center;gap:9px;
  width:auto;height:40px;padding:0 16px 0 9px;border-radius:999px;border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:none;transition:border-color .18s,background .18s,box-shadow .2s}
.st-node:hover{border-color:rgba(255,190,120,.42);background:rgba(255,190,120,.07)}
.st-node .st-tile{width:24px;height:24px;min-width:24px;border-radius:50%;padding:0;background:rgba(255,255,255,.06);
  border:0;box-shadow:none;display:grid;place-items:center}
.st-node .st-tile svg{width:14px;height:14px}
.st-node .st-nlab{position:static;font:600 13px var(--ui);color:var(--tx2);white-space:nowrap}
.st-node[aria-pressed="true"]{border-color:rgba(255,138,61,.55);
  background:linear-gradient(180deg,rgba(255,138,61,.20),rgba(255,138,61,.08));
  box-shadow:0 0 22px -10px rgba(255,138,61,.9)}
.st-node[aria-pressed="true"] .st-nlab{color:#fff}
.st-node[aria-pressed="true"] .st-tile{background:linear-gradient(180deg,var(--acc-l),var(--acc));color:#20140A}
/* the check that used to float on a tile corner now reads inside the switch */
.st-node::after{content:none!important}

/* one warm arc under the card, where the ring used to be */
.st-hero{position:relative}
.st-hero::before{content:"";position:absolute;left:50%;top:-40px;width:min(1100px,120vw);height:420px;
  transform:translateX(-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(60% 50% at 50% 0%,rgba(255,138,61,.22),transparent 68%);filter:blur(4px)}


/* the card the clip lands on: dark glass, lit along its top edge, one warm glow beneath */
.st-hero.has-file .st-drop{border:1px solid transparent;
  background:linear-gradient(170deg,rgba(40,29,22,.72),rgba(14,12,11,.92)) padding-box,
    linear-gradient(180deg,rgba(255,206,150,.55),rgba(255,190,120,.08) 18%,rgba(255,138,61,.20)) border-box;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 90px -40px rgba(255,138,61,.55)}
.st-hero.has-file .st-drop:hover{box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 110px -36px rgba(255,138,61,.75)}
/* the hint disc under the card takes the accent like everything else */
.st-hintarrow,.st-hint-disc{--c:255,138,61}

/* every remaining cool glass mark takes the warm light */
.st-hintarrow{color:var(--acc-l)}
.st-hintarrow svg{filter:drop-shadow(0 0 8px rgba(255,138,61,.85))}


/* ── SPACING AFTER THE CIRCUIT BOARD CAME OUT ────────────────────────────────────────────────
   The hint used to be a lit line rising from a disc up to the upload button, drawn through empty
   space. The feature switches now live in that space, so the line ran straight through the Hook
   pill (Patrik 2026-09-22: "now you're overlapping those buttons"). The arrow stays, the line goes,
   and every row in the stack gets its own air. */
.st-hintarrow::before,.st-hintarrow::after{display:none!important}
.st-hintarrow{margin:16px auto 0!important}
.st-board{gap:20px 10px}
.st-node{margin-top:4px}
.st-hero:not(.has-file) .st-board{margin-bottom:0}
.st-hero{padding-bottom:18px}

/* the pins were where the traces plugged into the card; with the board gone they are loose dots */
.st-pins{display:none!important}


/* ── THE FIRST VIEW HOLDS ONE DECISION ───────────────────────────────────────────────────────
   Headline, sub, seven stacked things and an arc was a lot to meet (Patrik 2026-09-22: "the hero
   is overcrowded"). Before a clip is in there is the button and one line saying what the edit
   will do. The switches and the step track arrive WITH the clip, when they mean something. */
.st-hero:not(.has-file) .st-node,
.st-hero:not(.has-file) .st-track,
.st-hero:not(.has-file) .st-hintarrow{display:none!important}
.st-onnote{margin:14px auto 0;max-width:46ch;text-align:center;font:400 13px var(--ui);color:var(--mut)}
.st-hero.has-file .st-onnote{display:none}


/* ═══ THE SAME QUALITY BAR INSIDE THE FLOW ═══════════════════════════════════════════════════
   Metal type on the headings, a lit top edge and a pool of light under every panel, and the
   feature switches drawn to one geometry instead of five different hands. */
.st-h,.st-brand .st-h,.st-story .st-h{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF6EC 24%,#D9CFC2 62%,#FFF1E2 88%,#FFFFFF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}
.st-brand-controls,.st-story-side,.st-boardwrap,.st-hero.has-file .st-drop{position:relative}
.st-brand-controls::before,.st-story-side::before,.st-boardwrap::before,.st-hero.has-file .st-drop::before{
  content:"";position:absolute;left:14%;right:14%;top:-1px;height:2px;border-radius:2px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,235,210,.7),transparent);
  box-shadow:0 0 16px rgba(255,190,120,.5)}
.st-brand-controls::after,.st-story-side::after,.st-boardwrap::after{
  /* ⚠ bottom:-24px made this glow overflow a scroll container: scrollHeight grew by exactly 24px and
     the panel reported itself scrollable for ever. Decoration sits INSIDE the box. */
  content:"";position:absolute;left:10%;right:10%;bottom:0;height:54px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,138,61,.18),transparent);filter:blur(12px)}
/* the switch icons: one weight, one geometry, on a lit disc */
.st-node .st-tile svg{width:15px;height:15px;stroke-width:2}
.st-node .st-tile{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.16),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.st-node[aria-pressed="true"] .st-tile{background:radial-gradient(circle at 34% 28%,#FFE7C9,var(--acc) 72%);
  box-shadow:0 0 14px rgba(255,138,61,.75),inset 0 1px 0 rgba(255,255,255,.5);color:#2A1608}


/* ── THE CARD IS A CARD, NOT THE PAGE ────────────────────────────────────────────────────────
   flex-basis:100% made the clip card span the whole board once a file was in, so a 30-second clip
   got a 1150px panel (Patrik 2026-09-22: "this UI is taking entire size we don't need that"). */
.st-drop{flex:0 0 auto!important;order:1}
/* a zero-height flex item forces the break, so the card keeps its own row without being page-wide */
.st-board::after{content:"";order:2;flex:0 0 100%;height:0}
.st-node{order:3}
.st-hintarrow{order:4}
.st-track{order:5}
.st-go.st-continue{order:6}
.st-hero.has-file .st-drop{width:min(520px,92vw)!important;height:auto!important;
  min-height:0;padding:16px!important;margin:0 auto}
.st-hero.has-file .st-drop-full{position:static;gap:12px}
.st-hero.has-file .st-folder{width:96px;height:76px;margin:2px auto 0}
.st-hero.has-file .st-prog{padding:10px 14px 12px;border-radius:14px}
.st-hero.has-file .st-screen{position:static;height:auto;background:none}
.st-hero.has-file .st-swap{top:10px;right:10px;width:30px;height:30px}


/* ── STEP 2 IN ONE WINDOW (Patrik 2026-09-22: "we can size down some panels and create a one
   window without having users to scroll down"). Every row loses the padding it did not need;
   nothing is removed, it just stops wasting height. */
.st-brand .st-h{font-size:21px;margin-bottom:2px}
.st-brand .st-p{font-size:12.5px;margin-bottom:10px}
.st-brand-controls{padding:18px 20px 0}
.st-brand .st-group{margin-bottom:10px}
.st-brand .st-label{margin-bottom:6px;font-size:12.5px}
.st-brand .st-cs{width:124px}
.st-brand .st-cs .pv{height:72px}
.st-brand .st-cs .nm{font-size:10.5px;padding-top:4px}
.st-brand .st-caps-slide{gap:4px}
.st-brand .st-spec{padding:9px 14px 7px;border-radius:13px}
.st-brand .st-spec-lab{font-size:9.5px;letter-spacing:.16em}
.st-brand .st-spec-name{font-size:clamp(20px,2.3vw,30px);margin:2px 0 4px}
.st-brand .st-spec-roles{font-size:11.5px}
.st-brand .st-fsel{height:40px}
.st-brand .st-colsample.chips button{height:36px;font-size:12.5px;padding:0 12px 0 7px}
.st-brand .st-colsample.chips i{width:20px;height:20px;flex-basis:20px}
.st-brand .st-sliders{gap:10px}
.st-brand .st-slider input{margin-top:2px}
.st-brand .st-fine{margin-bottom:56px;padding:8px 12px}
.st-brand .st-actions{padding:10px 0 12px}
.st-brand .st-pill{height:32px}
.st-brand .st-capset .st-label{margin-bottom:2px}


/* the fine-tune block in two columns: the specimen across the top, fonts on the left, colours and
   the caption knobs on the right — half the height of the same controls stacked */
.st-brand .st-bt{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:start}
.st-brand .st-spec{grid-column:1 / -1}
.st-brand .st-tune{grid-column:1;display:flex;flex-direction:column;gap:8px}
.st-brand .st-colgroup{grid-column:2;grid-row:2}
.st-brand .st-capset{grid-column:1 / -1}
.st-brand .st-sliders{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.st-brand .st-fine{margin-bottom:46px}


/* ── ONE WINDOW, MEASURED ────────────────────────────────────────────────────────────────────
   The panel came to 933px against 754 of room. This block is the final word on step 2's sizes:
   rail 157->118, fine-tune 420->260 (two columns), features 130->74, head 54->46. */
.st-brand .st-cs .pv{height:64px!important}
.st-brand .st-cs{width:118px!important}
.st-brand .st-caps-slide{margin-bottom:2px}
.st-brand .st-bhead{margin-bottom:6px}
.st-brand .st-fine[open]>summary{margin-bottom:6px}
.st-brand .st-spec{padding:7px 12px 6px!important}
.st-brand .st-spec-name{font-size:24px!important;margin:1px 0 3px!important}
.st-brand .st-spec-roles{font-size:11px!important}
.st-brand .st-tune{gap:6px!important}
.st-brand .st-fsel{height:36px!important}
.st-brand .st-colsample.chips button{height:32px!important}
.st-brand .st-sliders{gap:10px!important}
.st-brand .st-slider span{font-size:11px}
.st-brand .st-slider i{font-size:10.5px}
.st-brand .st-capset{margin-bottom:0!important}
/* the features row: a label and one line of pills, nothing else */
.st-brand .st-bt:last-of-type{padding:8px 10px!important}
.st-brand .st-pill{height:30px!important;font-size:12px}
.st-brand .st-fine{margin-bottom:40px!important;padding:6px 10px!important}
.st-brand .st-actions{padding:8px 0 10px!important}

/* the two font pickers sit side by side inside the left column */
.st-brand .st-tune{display:grid!important;grid-template-columns:1fr 1fr;gap:8px 10px}
/* the features fit on one line */
.st-brand .st-bt:last-of-type .st-pills,.st-brand .st-pills{display:flex;flex-wrap:wrap;gap:6px}
.st-brand .st-pill{padding:0 10px}
.st-brand .st-pill .st-disc{width:18px;height:18px;flex-basis:18px}

/* the panel may use the height the window actually has, not a fixed 84vh */
.st-brand .st-brand-controls{max-height:calc(100vh - 196px)!important}
.st-brand .st-frame{height:min(calc(100vh - 210px),560px)!important}
/* the style rail: smaller tiles, the name under each still readable */
.st-brand .st-cs{width:104px!important}
.st-brand .st-cs .pv{height:56px!important}
.st-brand .st-cs .nm{font-size:10px}
.st-brand .st-slidebtn{width:24px;height:24px}

/* the two tabs over the shared slot */
.st-btabs{display:flex;gap:6px;padding:4px;margin-bottom:8px;border-radius:12px;
  background:rgba(255,255,255,.05);align-self:flex-start}
.st-btab{height:30px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--mut);
  font:600 12.5px var(--ui);cursor:pointer;transition:background .16s,color .16s}
.st-btab[aria-pressed="true"]{background:linear-gradient(180deg,rgba(255,138,61,.28),rgba(255,138,61,.12));color:#fff}
.st-brand .st-fine>summary{display:none}
.st-brand .st-fine{border:0;background:none;padding:0!important;margin-bottom:40px!important}

/* the sticky bar sits at the panel floor; a smaller clearance is enough now that one block shows */
.st-brand .st-fine{margin-bottom:14px!important}
.st-brand .st-bt{margin-bottom:10px}

/* the last row ends where the action bar begins: no phantom gap, no scrollbar */
.st-brand .st-fine,.st-brand .st-bt:last-of-type{margin-bottom:0!important}
.st-brand .st-actions{margin-top:0!important}
.st-brand-controls{padding-bottom:0!important}

/* the panel is not tied to the player's height: it may run a little taller, up to the window */
.st-brand{align-items:flex-start}
.st-brand .st-brand-controls{max-height:calc(100vh - 188px)!important;height:auto}


/* ── THE HERO WITH A CLIP IN, TIGHTENED ──────────────────────────────────────────────────────
   Patrik, after an upload: "pretty unoptimized" — the card, the switches, the track and Continue
   were spread down a screen and a half. Same parts, half the height. */
.st-hero.has-file .st-board{gap:12px 10px}
.st-hero.has-file .st-drop{padding:12px!important}
.st-hero.has-file .st-folder{width:78px;height:62px}
.st-hero.has-file .st-prog{padding:8px 12px 10px}
.st-hero.has-file .st-node{height:34px;padding:0 13px 0 7px}
.st-hero.has-file .st-node .st-tile{width:20px;height:20px;min-width:20px}
.st-hero.has-file .st-node .st-nlab{font-size:12px}
.st-hero.has-file .st-track{margin-top:2px}
.st-hero.has-file .st-go.st-continue{height:48px;font-size:15px;margin-top:2px}
.st-hero.has-file{padding-bottom:8px}
.st-hero.has-file::before{opacity:.5}

/* ⚠ a wrapped flex container STRETCHES its lines apart when it is taller than its content
   (align-content defaults to stretch) — that was the 150px hole between the card and the
   switches, not a margin anywhere. */
.st-board{align-content:flex-start}

/* ⚠ THE EMBED STAYS TRANSPARENT IN EVERY STATE. Once a clip landed the page took .expanded and the
   body painted its full warm gradient INSIDE the iframe — a big opaque rectangle sitting over the
   landing's horizon (Patrik 2026-09-22: "this is how it's all overlapping"). */
body.st.embed{background-color:#08070A}


/* ── THE FOLDER KEEPS ITS SHAPE ──────────────────────────────────────────────────────────────
   Shrinking the box squashed the art: the clip card inside is a fixed 48x70 and the pocket a fixed
   52 tall, so a 78x62 box left a pale square with a ghost behind it (Patrik 2026-09-22: "make sure
   that folder has the shape we designed"). It is SCALED now, never resized. */
.st-hero.has-file .st-folder{width:132px!important;height:104px!important;transform:scale(.68);
  transform-origin:top center;margin:0 auto -30px}
/* …and it stands with the button before a clip is in */
.st-folder-idle{margin:0 auto 14px;transform:scale(.92);transform-origin:bottom center}
.st-hero.has-file .st-folder-idle{display:none}
.st-drop-empty{display:flex;flex-direction:column;align-items:center;gap:2px}

/* the idle folder is a board item of its own, above the card — inside the card it overlapped the
   pill, because the empty card is a fixed-height pill and its contents are absolutely placed */
.st-folder-idle{order:0;flex:0 0 100%;display:block;margin:0 auto 10px;transform:scale(.9);transform-origin:bottom center}
.st-drop-empty{position:absolute}

/* the order of the first screen, with a zero-height break after the folder and after the card so each
   keeps its own row without being stretched to the full width */
.st-folder-idle{order:0!important;flex:0 0 132px!important;width:132px;height:104px;margin:0 auto 6px}
.st-board::before{content:"";order:1;flex:0 0 100%;height:0}
.st-drop{order:2!important}
.st-board::after{order:3}
.st-node{order:4}
.st-hintarrow{order:5}
.st-track{order:6}
.st-go.st-continue{order:7}
.st-hero.has-file .st-board::before{display:none}

/* folder and button stand side by side, centred as one pair (his sketch: the folder WITH the upload) */
.st-board::before{display:none}
.st-hero:not(.has-file) .st-board{align-items:center;gap:18px}
.st-folder-idle{margin:0 0 4px}

.st-hero:not(.has-file) .st-drop{margin:0!important}


/* ── THE FOLDER AS THE CALL TO ACTION ────────────────────────────────────────────────────────
   Its pocket carries the words, it lifts and lights on hover, and it is the only thing to press
   before a clip is in — the pill beside it was the same instruction twice. */
.st-folder-idle{appearance:none;border:0;background:none;padding:0;cursor:pointer;
  transform:scale(1.12);transform-origin:bottom center;transition:transform .22s var(--ease),filter .22s}
.st-folder-idle:hover{transform:scale(1.18) translateY(-2px);filter:drop-shadow(0 14px 28px rgba(255,138,61,.45))}
.st-folder-idle:active{transform:scale(1.12)}
.st-folder-idle:focus-visible{outline:2px solid var(--acc-l);outline-offset:6px;border-radius:14px}
.st-folder-idle .st-ffront{height:46px;background:linear-gradient(180deg,rgba(255,226,190,.52),rgba(255,138,61,.34));
  border:1px solid rgba(255,255,255,.5)}
.st-folder-idle .st-ffront small{font:800 11px var(--ui);letter-spacing:.1em;white-space:nowrap}
/* one control on the first screen */
.st-hero:not(.has-file) .st-drop{display:none}
.st-hero:not(.has-file) .st-board{gap:10px}
.st-idle-sub{order:1;flex:0 0 100%;text-align:center;margin:10px auto 0;font:400 12.5px var(--ui);color:var(--mut)}
.st-hero.has-file .st-idle-sub{display:none}

/* the idle folder is wider than the small one in the card: its pocket carries a sentence */
.st-folder-idle{width:232px!important;height:136px!important;flex:0 0 232px!important;transform:scale(1)}
.st-folder-idle:hover{transform:translateY(-3px) scale(1.03)}
.st-folder-idle:active{transform:translateY(0) scale(1)}
.st-folder-idle .st-fback{top:18px}
.st-folder-idle .st-fclip{top:0}
.st-folder-idle .st-ffront{height:52px}
.st-folder-idle .st-ffront small{font-size:12px;letter-spacing:.08em}


/* ── THE PILL IS THE BUTTON AGAIN (Patrik 2026-09-22: "our UPLOAD YOUR FOOTAGE button looked better
   than this folder"). The folder stands beside it as the object the clip goes into. */
.st-hero:not(.has-file) .st-drop{display:flex!important}
.st-folder-idle{width:150px!important;height:112px!important;flex:0 0 150px!important;cursor:default;
  transform:none;transition:none}
.st-folder-idle:hover{transform:none;filter:none}
.st-folder-idle .st-ffront{height:44px}
.st-folder-idle .st-ffront small{font-size:10.5px;letter-spacing:.14em}
.st-idle-sub{display:none}


/* ONE CALL TO ACTION on the first screen (Patrik 2026-09-22: "let's just have one CTA"). The folder
   stays in the markup for the uploading state; on the idle screen there is the pill and nothing else. */
.st-folder-idle{display:none!important}
.st-hero:not(.has-file) .st-board{justify-content:center}


/* ── THE HORIZON ON STEP 2 (Patrik 2026-09-22: "now let's have that half circle there as well").
   Same arc as the landing's, its crest just under Show me my edit, so the step inside the app ends
   the way the hero does. */
.st-brand .st-revdome{width:min(1180px,110vw)!important;height:420px!important;bottom:auto!important;
  top:calc(100% - 275px)!important;z-index:0}
.st-brand .st-revdome .dome{border-top:1.5px solid rgba(255,240,215,.8);
  background:radial-gradient(80% 100% at 50% 0%,rgba(255,240,215,.16) 0%,rgba(255,206,150,.10) 8%,rgba(255,255,255,.04) 24%,transparent 60%);
  box-shadow:inset 0 12px 30px -10px rgba(255,214,160,.45);
  -webkit-mask-image:linear-gradient(90deg,transparent 10%,#000 32%,#000 68%,transparent 90%),
                     linear-gradient(180deg,#000 0,#000 28%,transparent 60%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 10%,#000 32%,#000 68%,transparent 90%),
             linear-gradient(180deg,#000 0,#000 28%,transparent 60%);mask-composite:intersect}
.st-pane.st-brand{overflow:visible}


/* ── NO GLOW AROUND THE CONTROL, NO RECTANGLE AROUND THE FRAME ───────────────────────────────
   Patrik 2026-09-22: "that orange colour around the CTA I would remove" — and it was also the
   cause of the hard edges he spotted: the bloom was painted INSIDE the embedded frame, so it was
   clipped to the iframe's box and left a rectangle in the middle of the landing's ground. The
   light comes from the page now; the frame paints nothing but its content. */
.st-hero::before{display:none!important}

body.st.embed{background:transparent!important}

/* the control's own light, drawn inside the frame so nothing can clip it into a rectangle: it
   fades out well before the frame's edges */
.st-hero:not(.has-file)::after{content:"";position:absolute;left:50%;top:-40px;width:min(560px,80%);height:320px;
  transform:translateX(-50%);pointer-events:none;z-index:-1;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,150,80,.16),transparent 72%);filter:blur(30px)}

/* the page's own light reaches the control now, so the frame draws none of its own */
.st-hero:not(.has-file)::after{display:none}

/* ⛔ ARCHIVED 2026-09-22 at his word: the line naming what is on. The switches say it themselves
   once a clip is in, and the first screen is one object plus one action. Unhide .st-onnote to
   bring it back. */
.st-onnote{display:none!important}

/* the embed's ground is flat; the light lives on its own masked layer (see start.js stLightLayer) */
html:has(body.st.embed){background:#070709}
body.st.embed{background:#070709!important}

/* the control's own light, small and well inside the frame */
.st-hero:not(.has-file)::after{content:"";position:absolute;left:50%;top:-30px;width:min(520px,76%);height:260px;
  transform:translateX(-50%);pointer-events:none;z-index:-1;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,150,80,.13),transparent 74%);filter:blur(34px)}


/* ── THE STANDALONE FLOW PAGE (what the landing's button opens) ──────────────────────────────
   On its own page there is no landing behind it, so it carries its own light — and the rows sit as
   one group instead of drifting apart down an empty screen. */
body.st:not(.embed) .st-root{position:relative}
body.st:not(.embed) .st-root::before{content:"";position:fixed;left:50%;top:-40px;width:min(1200px,96vw);height:620px;
  transform:translateX(-50%);pointer-events:none;z-index:0;filter:blur(30px);
  background:conic-gradient(from 166deg at 50% 0%,transparent 0deg,rgba(255,214,164,.05) 8deg,
    rgba(255,222,180,.22) 12deg,rgba(255,232,200,.30) 14deg,rgba(255,222,180,.22) 16deg,
    rgba(255,214,164,.05) 20deg,transparent 28deg);
  -webkit-mask-image:radial-gradient(58% 100% at 50% 0%,#000 6%,rgba(0,0,0,.6) 38%,rgba(0,0,0,.2) 58%,transparent 80%);
  mask-image:radial-gradient(58% 100% at 50% 0%,#000 6%,rgba(0,0,0,.6) 38%,rgba(0,0,0,.2) 58%,transparent 80%)}
body.st:not(.embed) .st-hero{position:relative;z-index:1}
body.st:not(.embed) .st-board{gap:14px 10px}
body.st:not(.embed) .st-hero.has-file .st-track{margin-top:4px}
body.st:not(.embed) .st-hero.has-file .st-go.st-continue{margin-top:6px}

/* ⚠ the board still carried its old fixed 430px height, so 200px of empty space sat between the
   switches and the step track on the standalone page */
.st-board{height:auto!important}

.st-hero.has-file .st-track{margin-top:18px!important}
.st-hero.has-file .st-go.st-continue{margin-top:14px!important}

/* ⚠ the card must stay a positioned ancestor: with position:static the close button resolved against
   the board and flew out to the section's right edge */
.st-hero.has-file .st-drop{position:relative!important}
.st-hero.has-file .st-swap{top:12px;right:12px}

/* the card is centred in every state (the centring rule was scoped to the empty state only) */
.st-board{justify-content:center!important}
/* ⚠ auto margins in a flex row EAT the free space: margin:0 auto pushed the card to the right edge
   instead of centring it. justify-content does the centring; the card keeps zero side margins. */
.st-hero.has-file .st-drop{margin-left:0!important;margin-right:0!important}

/* the last word on the card's placement: centred by the board, no auto margins anywhere */
.st-hero .st-drop{margin:0!important}
.st-board{justify-content:center!important;align-content:flex-start}

/* ⚠ and the old absolute placement's left:50% was still applying: with position:relative that
   SHIFTS the card 50% of the board to the right (460px), which is exactly where it kept landing. */
.st-hero .st-drop{left:auto!important;right:auto!important;top:auto!important;bottom:auto!important}


/* ── THE CARD'S TOP RIM IS FEATHERED ─────────────────────────────────────────────────────────
   A border-box gradient draws a hard hairline right across the card's top (Patrik 2026-09-22:
   "can you see that orange line… we need to feather it out"). The border goes; the rim is a soft
   line that fades out well before the corners. */
.st-hero.has-file .st-drop{border-color:transparent!important;
  background:linear-gradient(170deg,rgba(40,29,22,.72),rgba(14,12,11,.92)) padding-box!important}
.st-hero.has-file .st-drop::before{left:16%!important;right:16%!important;height:1.5px!important;
  background:linear-gradient(90deg,transparent,rgba(255,226,190,.75),transparent)!important;
  box-shadow:0 0 22px rgba(255,190,120,.45)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)!important;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)!important}


/* ── THE PILLS LOSE THEIR HARD RIM TOO ───────────────────────────────────────────────────────
   The border-box gradient drew a bright hairline all the way round every primary button. The rim
   is a soft top highlight now — bright where the light hits it, gone by the sides — with the glow
   doing the rest (Patrik 2026-09-22: "same on this CTA"). */
.st-go.st-continue,.st-go.big,#brandGo,#revOpen{
  border-color:transparent!important;
  background:linear-gradient(90deg,rgba(228,102,27,.98),rgba(246,178,52,.98)) padding-box!important;
  box-shadow:0 16px 44px -12px rgba(255,138,61,.85),inset 0 1.5px 0 rgba(255,244,228,.55),
             inset 0 -1px 0 rgba(120,50,10,.35)!important}
.st-go.st-continue:hover,.st-go.big:hover,#brandGo:hover,#revOpen:hover{
  box-shadow:0 20px 52px -12px rgba(255,138,61,1),inset 0 1.5px 0 rgba(255,250,240,.7),
             inset 0 -1px 0 rgba(120,50,10,.3)!important}


/* ── THE HORIZON BELONGS TO THE FLOW WHEN THE FLOW IS ON SCREEN ──────────────────────────────
   The page's arc is painted over the frame, so its rim cut straight across the clip card. The flow
   draws its own arc instead, behind its own content — which is what "the circle sits behind the
   upload and the buttons" actually means (Patrik 2026-09-22). */
.st-hero.has-file{position:relative}
.st-hero.has-file::after{content:"";position:absolute;left:50%;top:46%;width:150vw;height:520px;
  transform:translateX(-50%);pointer-events:none;z-index:-1;border-radius:50% 50% 0 0 / 100% 100% 0 0;
  border-top:1.5px solid rgba(255,236,206,.75);
  background:radial-gradient(80% 100% at 50% 0%,rgba(255,226,190,.14) 0%,rgba(255,180,110,.07) 10%,rgba(255,255,255,.03) 26%,transparent 60%);
  box-shadow:inset 0 14px 36px -12px rgba(255,200,140,.45);
  -webkit-mask-image:linear-gradient(90deg,transparent 6%,rgba(0,0,0,.5) 22%,#000 44%,#000 56%,rgba(0,0,0,.5) 78%,transparent 94%),
                     linear-gradient(180deg,#000 0,#000 28%,transparent 62%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 6%,rgba(0,0,0,.5) 22%,#000 44%,#000 56%,rgba(0,0,0,.5) 78%,transparent 94%),
             linear-gradient(180deg,#000 0,#000 28%,transparent 62%);mask-composite:intersect}
.st-hero.has-file .st-board,.st-hero.has-file .st-track,.st-hero.has-file .st-go.st-continue{position:relative;z-index:1}

/* ── ONE STEPPER ON THE PAGE (Patrik 2026-09-22: "it uses this UI for steps") ────────────────
   Embedded in the landing, the page's own four-step stepper is the one the visitor watches, so the
   frame stops drawing its compact pill track. On its own page the flow keeps it. */
body.st.embed .st-track{display:none!important}
body.st.embed .st-hero.has-file .st-go.st-continue{margin-top:20px!important}

/* embedded, the page carries Continue under its stepper */
body.st.embed .st-go.st-continue{display:none!important}


/* ══ STEP 3 IS ONE WINDOW (Patrik 2026-09-22) ═════════════════════════════════════════════════
   "super simple — picking up primary + secondary font, caption style, colours… and a preview of
   their video already a pay off". All of it was built; it was split across two tabs, with step 2's
   feature pills repeated underneath and three sliders taking the height that forced the split.
   Now: the type specimen and the palette first (the reference he sent groups them), the caption
   style under it, the sliders folded, nothing asked twice. */
.st-brand-controls .st-fine{order:1}
.st-brand-controls #blockStyles{order:2}
.st-brand-controls .st-plan{order:3}
.st-brand-controls .st-actions{order:4}
/* the fine block is the panel now, not a disclosure: its summary marker and label come off */
.st-brand .st-fine > summary{display:none}
.st-brand .st-fine{border:0;padding:0;background:none}
/* the folded sliders read as one quiet line until opened */
.st-brand .st-capset > summary{cursor:pointer;list-style:none;opacity:.78;padding:2px 0}
.st-brand .st-capset > summary::-webkit-details-marker{display:none}
.st-brand .st-capset > summary::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);
  vertical-align:middle;opacity:.6}
.st-brand .st-capset[open] > summary::after{transform:rotate(-135deg)}
.st-brand .st-capset[open] > summary{opacity:1}
/* ⚠ the same trap as .cta on the landing: .st-btabs sets display:flex, which beats the UA's
   [hidden]{display:none} — the hidden tab bar was still holding an empty 26px bar at the top. */
.st-btabs[hidden]{display:none!important}
.st-bt[hidden]{display:none!important}


/* ══ THE CLIP STATE IS A BAR, NOT A CARD (Patrik's layout map, 2026-09-23) ════════════════════
   Boards 1 and 2 of the map: with a clip in, the hero keeps the statement and shows one slim
   progress bar, the five switches under it, and Continue. The folder art and the card panel are
   out — they were 250px saying what the bar already says. */
.st-hero.has-file .st-drop{width:min(620px,92vw)!important;padding:0!important;border:0!important;
  background:none!important;box-shadow:none!important;min-height:0!important}
.st-hero.has-file .st-drop::before{display:none!important}
.st-hero.has-file .st-drop::after{display:none!important}
.st-hero.has-file .st-folder{display:none!important}
.st-hero.has-file .st-screen{padding:0!important;background:none!important;border:0!important}
.st-hero.has-file .st-drop-full{gap:0!important;padding:0!important}
.st-hero.has-file .st-prog{width:100%;margin:0;padding:14px 18px 16px;border-radius:16px;
  border:1px solid rgba(255,190,120,.28);background:rgba(20,15,12,.72)}
.st-hero.has-file .st-prog::before{left:14%;right:14%}
/* the close sits ON the bar, at its right end */
.st-hero.has-file .st-swap{top:50%;right:10px;transform:translateY(-50%);width:28px;height:28px}
.st-hero.has-file .st-board{gap:16px 10px}
.st-hero.has-file .st-node{margin-top:0}


/* ── THE UPLOAD BAR, REBUILT FROM HIS REFERENCES ─────────────────────────────────────────────
   Patrik 2026-09-23 (Baymar's cards and the "Create Your Listing" board): "Build upload bar from
   these reference designs". Their recipe, not ours: a dark glass card with a hairline warm edge,
   a warm pool of light INSIDE it low down, a generous radius, and the one live thing — the
   progress — carrying the only saturated colour. The bright top hairline is out; it read as a
   drawn line across the card instead of light falling on it. */
body.st.embed{background:transparent!important}
html:has(body.st.embed){background:transparent}

.st-hero.has-file .st-prog{padding:16px 20px 18px;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,190,120,.20);
  background:
    radial-gradient(76% 130% at 50% 118%,rgba(255,138,61,.16),transparent 70%),
    linear-gradient(180deg,rgba(38,30,26,.78),rgba(16,13,12,.86));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,222,186,.14),0 26px 60px -30px rgba(0,0,0,.95),
             0 0 60px -30px rgba(255,138,61,.5)}
.st-hero.has-file .st-prog::before{display:none}
.st-hero.has-file .st-plabel{color:#EFE6DC;font-size:14px;letter-spacing:-.01em}
.st-hero.has-file .st-pct{margin-right:40px;font-size:26px;color:#FBF4EC;font-variant-numeric:tabular-nums}
.st-hero.has-file .st-bar{margin-top:14px;height:5px;background:rgba(255,255,255,.07)}
.st-hero.has-file .st-bar i{background:linear-gradient(90deg,var(--acc-d),var(--acc),var(--acc-l));
  box-shadow:0 0 18px rgba(255,138,61,.8)}
.st-hero.has-file .st-spin{border-color:rgba(255,190,120,.35);border-top-color:var(--acc-l)}
/* the close sits clear of the number, not on top of it */
.st-hero.has-file .st-swap{top:50%;right:14px;transform:translateY(-50%);width:26px;height:26px;
  background:rgba(255,255,255,.06);border-color:rgba(255,190,120,.22)}
.st-hero.has-file .st-swap:hover{background:rgba(255,138,61,.22)}

/* ⛔ ARCHIVED 2026-09-23 at his word ("from this step, remove that half circle"): the horizon arc
   behind step 4. On step 2 it sits under one object and reads as ground; here it cuts straight
   across the visuals library and the beat cards. Unhide .st-story .st-revdome to bring it back. */
.st-story .st-revdome{display:none!important}


/* the standalone flow page takes the landing's metallic ground (Patrik 2026-09-23) */
body.st:not(.embed){background:#121213!important}
body.st:not(.embed) .st-root::before{background:
    radial-gradient(52% 44% at 26% 0%,rgba(228,232,240,.11),transparent 70%),
    radial-gradient(54% 46% at 88% 0%,rgba(255,104,30,.20),transparent 68%)!important}

/* the arc is gone from the embedded flow too (Patrik 2026-09-23: "LOOK HOW THAT page changes when
   I hit upload" — the dome swept right across the hero the moment the bar appeared). The page's
   own light is the ground now; the frame paints nothing but its content. */
body.st.embed .st-revdome{display:none!important}

/* the frame paints NOTHING: the landing's ground and its light run underneath it (Patrik
   2026-09-23). html kept its old near-black without !important, and .st-hero.has-file::after was
   the 150vw arc that swept across the hero the moment the bar appeared. */
html:has(body.st.embed){background:transparent!important}
body.st.embed .st-hero.has-file::after{display:none!important}

/* ── THREE UPLOAD BARS (Patrik 2026-09-23: "I would like to see other design of loading bar").
   ?bar=2 / ?bar=3 on the landing rides into the frame and picks one; 1 is what ships.
     1  CARD   — the glass card with the track under it (current)
     2  FILL   — the pill IS the progress: one rounded object that fills with light left to right
     3  LINE   — no card at all: one centred line on the page's ground and a hairline rule under it */
html[data-bar="2"] .st-hero.has-file .st-prog{padding:0;height:64px;border-radius:999px;display:flex;
  align-items:center;overflow:hidden;background:rgba(255,255,255,.035)}
html[data-bar="2"] .st-hero.has-file .st-prow{width:100%;padding:0 24px;position:relative;z-index:2}
html[data-bar="2"] .st-hero.has-file .st-bar{position:absolute;inset:0;margin:0;height:auto;
  background:none;border-radius:inherit;z-index:1}
html[data-bar="2"] .st-hero.has-file .st-bar i{height:100%;border-radius:inherit;
  background:linear-gradient(90deg,rgba(228,102,27,.58),rgba(255,138,61,.42),rgba(255,177,34,.28));
  box-shadow:none}
html[data-bar="2"] .st-hero.has-file .st-pct{margin-right:44px;font-size:24px}

html[data-bar="3"] .st-hero.has-file .st-prog{padding:0;border:0;background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-bar="3"] .st-hero.has-file .st-prow{justify-content:center;gap:14px}
html[data-bar="3"] .st-hero.has-file .st-spin{display:none}
html[data-bar="3"] .st-hero.has-file .st-plabel{font-size:15px;color:#CFC6BC}
html[data-bar="3"] .st-hero.has-file .st-pct{margin:0;font-size:15px;font-weight:500;color:#FBF4EC}
html[data-bar="3"] .st-hero.has-file .st-bar{margin-top:14px;height:2px;border-radius:0;
  background:rgba(255,255,255,.09)}
html[data-bar="3"] .st-hero.has-file .st-bar i{border-radius:0;box-shadow:0 0 16px rgba(255,138,61,.75)}
html[data-bar="3"] .st-hero.has-file .st-swap{right:-4px;background:none;border-color:transparent}

/* LINE: nothing but type and a rule — the card's own background/border had to be beaten with
   !important because the shipping bar declares them in one shorthand (2026-09-23) */
html[data-bar="3"] .st-hero.has-file .st-prog{background:none!important;border:0!important;
  box-shadow:none!important}
html[data-bar="3"] .st-hero.has-file .st-swap{top:50%;right:0}

/* ── THE SWITCHES AND THE BUTTON, IN THE BAYMAR LANGUAGE ─────────────────────────────────────
   Patrik 2026-09-23 ("next step is the loading button, and buttons below it" + the Baymar board:
   "build them in this look, colors, style"). On that board nothing is painted: every control is
   the same warm glass with a hairline edge, white type and a soft top highlight, and the only
   colour in the frame is the light behind it. So the orange halos come off the switches, the
   coloured tick becomes a warm-white one, and "on" is told by a brighter edge and a filled tick
   instead of a glow. The bar keeps the one saturated thing on the screen: its own progress. */
.st-hero.has-file .st-node{border-radius:999px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.03))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 28px -18px rgba(0,0,0,.9)!important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.st-hero.has-file .st-node[aria-pressed="true"]{border-color:rgba(255,236,214,.36)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.045))!important}
.st-hero.has-file .st-node .st-tile{background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important;color:#F3EDE6!important;
  animation:none!important}
.st-hero.has-file .st-node[aria-pressed="true"] .st-tile{border-color:rgba(255,238,218,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)!important}
.st-hero.has-file .st-node[aria-pressed="true"] .st-tile::after{width:15px;height:15px;top:-5px;right:-5px;
  background:#F4EEE7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7l4.5-5' fill='none' stroke='%23171310' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat!important;
  box-shadow:0 2px 8px rgba(0,0,0,.6)!important}
.st-hero.has-file .st-node .st-nlab{color:#EFE8E1!important}
.st-hero.has-file .st-node:hover{border-color:rgba(255,255,255,.22)!important}

/* the frame's own Continue takes the same glass (it shows on the standalone flow page) */
.st-hero.has-file .st-go.st-continue{border:1px solid rgba(255,238,218,.34)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.04))!important;
  color:#F6F0E9!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 18px 38px -22px rgba(0,0,0,.95)!important}
.st-hero.has-file .st-go.st-continue:hover{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06))!important}

/* ── AND THE BAR ITSELF (Patrik 2026-09-23: "still upload button is untouched"). It was still the
   warm-tinted card from this morning: an amber border, an orange pool inside it and a second
   outline above it from the glow. Same rule as the switches now — neutral warm glass, one
   hairline edge, a top highlight, and the progress is the only colour in it. */
.st-hero.has-file .st-prog{
  border:1px solid rgba(255,255,255,.12)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 22px 48px -28px rgba(0,0,0,.95)!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
.st-hero.has-file .st-plabel{color:#D8D0C8!important}
.st-hero.has-file .st-pct{color:#F6F1EA!important}
.st-hero.has-file .st-bar{background:rgba(255,255,255,.08)!important}
.st-hero.has-file .st-bar i{box-shadow:0 0 14px rgba(255,138,61,.55)!important}
.st-hero.has-file .st-spin{border-color:rgba(255,255,255,.22)!important;border-top-color:#F3E7DA!important}
.st-hero.has-file .st-swap{background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.14)!important;color:#EFE8E1!important;box-shadow:none!important}
.st-hero.has-file .st-swap:hover{background:rgba(255,255,255,.12)!important}

/* ── THE LIGHT TRAVELS THROUGH THE GLASS (Patrik 2026-09-23, the "Upload" pill and the "+ Create |
   Strategic Design" pill: "what if we do something like this"). Both do the same thing: one glass
   pill with a LIGHT INSIDE it — a bright vertical edge with a soft bloom trailing behind. So the
   progress stops being a line under a card and becomes the light itself: it fills the pill from
   the left, its leading edge is the brightest thing on the screen, and the type rides on top.
   ?ub=2 and ?ub=3 still hold the other two designs. */
html:not([data-bar]) .st-hero.has-file .st-prog{position:relative;height:72px;padding:0 24px;
  display:flex;align-items:center;border-radius:999px!important;overflow:hidden}
html:not([data-bar]) .st-hero.has-file .st-prow{width:100%;position:relative;z-index:2}
html:not([data-bar]) .st-hero.has-file .st-bar{position:absolute!important;inset:0!important;
  margin:0!important;height:auto!important;background:none!important;border-radius:inherit;z-index:1}
html:not([data-bar]) .st-hero.has-file .st-bar i{position:relative;height:100%;border-radius:inherit;
  box-shadow:none!important;
  background:linear-gradient(90deg,rgba(255,120,40,.05),rgba(255,140,60,.16) 62%,rgba(255,190,130,.30) 100%)}
/* the leading edge: a hairline of light with its own bloom, clipped by the pill like the reference */
html:not([data-bar]) .st-hero.has-file .st-bar i::after{content:"";position:absolute;right:-1px;top:6%;bottom:6%;
  width:2.5px;border-radius:2px;
  background:linear-gradient(180deg,transparent,#FFE9D2 22%,#FFF6EC 50%,#FFE9D2 78%,transparent);
  box-shadow:0 0 26px 9px rgba(255,150,80,.42),0 0 70px 26px rgba(255,120,44,.16)}
html:not([data-bar]) .st-hero.has-file .st-prog.done .st-bar i::after{opacity:0;transition:opacity .4s}
html:not([data-bar]) .st-hero.has-file .st-pct{margin-right:44px;font-size:26px}

/* ON READS AS ON (Patrik 2026-09-23: "now it's hard to see which buttons are on"). The glass took
   the shout out of the switches and took the answer with it. The difference is carried by weight
   now: a lit switch is brighter glass with a warm edge and white type; an unlit one sits back. */
.st-hero.has-file .st-node[aria-pressed="true"]{
  border-color:rgba(255,214,170,.55)!important;
  background:linear-gradient(180deg,rgba(255,238,220,.20),rgba(255,214,170,.085))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 0 0 1px rgba(255,190,130,.14),
             0 14px 30px -18px rgba(0,0,0,.9)!important}
.st-hero.has-file .st-node[aria-pressed="true"] .st-nlab{color:#FFF6EC!important;font-weight:600!important}
.st-hero.has-file .st-node[aria-pressed="true"] .st-tile{background:rgba(255,236,214,.16)!important;
  border-color:rgba(255,214,170,.6)!important;color:#FFF7EF!important}
.st-hero.has-file .st-node:not([aria-pressed="true"]){
  border-color:rgba(255,255,255,.09)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018))!important}
.st-hero.has-file .st-node:not([aria-pressed="true"]) .st-nlab{color:#A79E96!important}
.st-hero.has-file .st-node:not([aria-pressed="true"]) .st-tile{color:#A79E96!important;
  border-color:rgba(255,255,255,.10)!important;background:rgba(255,255,255,.03)!important}

/* ⛔ ARCHIVED 2026-09-23 at his word ("remove that tool that allows me to set start + end"): the
   draggable window on the edit strip. It still exists and still tells the player which stretch to
   preview — it is simply not drawn, so the strip is a strip. Unhide .st-tl-win to bring it back. */
.st-tl-win{display:none!important}

/* ── THE BUTTON IS THE UPLOADER (Patrik 2026-09-23: "let's turn our CTA button into a UI button
   that will also be the uploading UI"). One object, not two: the pill he clicked keeps its shape,
   its size and its round icon, and the upload happens INSIDE it — the light fills from the left
   with a bright edge, the way "+ Create | Strategic Design" does. Nothing new appears on the page;
   the same control just changes what it is saying. */
html:not([data-bar]) .st-hero.has-file .st-drop{width:min(400px,92vw)!important}
html:not([data-bar]) .st-hero.has-file .st-prog{height:56px!important;padding:0 20px 0 7px!important;
  border-radius:999px!important;display:flex;align-items:center;overflow:hidden;
  border:1px solid rgba(255,214,170,.30)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 40px -24px rgba(0,0,0,.95)!important}
html:not([data-bar]) .st-hero.has-file .st-prow{width:100%;gap:12px;position:relative;z-index:2}
/* the CTA's round icon, now the spinner */
html:not([data-bar]) .st-hero.has-file .st-spin{width:38px!important;height:38px!important;
  border-width:2px!important;border-color:rgba(255,222,190,.35)!important;border-top-color:#FFF3E6!important;
  background:rgba(255,255,255,.06);border-radius:50%}
html:not([data-bar]) .st-hero.has-file .st-plabel{font-size:15px!important;font-weight:600!important;
  color:#FBF3EB!important}
html:not([data-bar]) .st-hero.has-file .st-pct{font-size:17px!important;font-weight:600!important;
  margin-right:34px!important;color:#FBF3EB!important}
/* the fill, and its leading edge — only once there is something to lead */
html:not([data-bar]) .st-hero.has-file .st-bar i::after{opacity:0;transition:opacity .25s}
html:not([data-bar]) .st-hero.has-file .st-bar.lit i::after{opacity:1}
html:not([data-bar]) .st-hero.has-file .st-bar i{
  background:linear-gradient(90deg,rgba(255,120,40,.10),rgba(255,145,62,.30) 60%,rgba(255,190,130,.48) 100%)}
/* full: the pill reads as the amber CTA it started as */
html:not([data-bar]) .st-hero.has-file .st-prog.done{border-color:rgba(255,214,170,.55)!important}
html:not([data-bar]) .st-hero.has-file .st-prog.done .st-bar i{
  background:linear-gradient(90deg,rgba(228,102,27,.55),rgba(255,138,61,.42),rgba(255,177,34,.34))}
html:not([data-bar]) .st-hero.has-file .st-swap{right:10px!important;width:24px!important;height:24px!important}
/* …and when it is full it IS the CTA again: solid amber, dark type, the cream disc on the left */
html:not([data-bar]) .st-hero.has-file .st-spin{background:radial-gradient(60% 60% at 50% 35%,#FFF8F0,#F6E3CE)!important;
  border-color:rgba(255,255,255,.55)!important;border-top-color:#fff!important;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
html:not([data-bar]) .st-hero.has-file .st-prog.done .st-bar i{
  background:linear-gradient(90deg,#E4661B,#FF8A3D 52%,#FFB122)!important}
html:not([data-bar]) .st-hero.has-file .st-prog.done .st-plabel,
html:not([data-bar]) .st-hero.has-file .st-prog.done .st-pct{color:#1B1007!important}
html:not([data-bar]) .st-hero.has-file .st-prog.done .st-swap{color:#1B1007!important;
  background:rgba(0,0,0,.14)!important;border-color:rgba(0,0,0,.18)!important}

/* the full pill IS the next step: it carries an arrow disc and takes the click (2026-09-23) */
html:not([data-bar]) .st-hero.has-file .st-prog.go{cursor:pointer}
html:not([data-bar]) .st-hero.has-file .st-prog.go .st-pct{display:none}
html:not([data-bar]) .st-hero.has-file .st-prog.go::after{content:"";position:absolute;right:16px;top:50%;
  width:30px;height:30px;margin-top:-15px;border-radius:50%;z-index:3;
  background:#1B1007 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF3E6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/15px no-repeat}
html:not([data-bar]) .st-hero.has-file .st-prog.go .st-swap{display:none!important}
html:not([data-bar]) .st-hero.has-file .st-prog.go:hover{filter:brightness(1.06)}

/* ── THE SWITCHES IN HIS 869 CARDS (Patrik 2026-09-23: "can we have those buttons in this type of
   a look"). Those cards are dark glass with a COOL white beam falling across them from above and
   icons sitting in hairline rings — no warm fill anywhere. Ours take the same: a cool sheen across
   the top of each pill, a ringed icon, and the lit ones simply catch more of the light. */
.st-hero.has-file .st-node{position:relative;overflow:hidden;
  border:1px solid rgba(214,222,238,.14)!important;
  background:linear-gradient(180deg,rgba(226,232,244,.055),rgba(226,232,244,.02))!important}
.st-hero.has-file .st-node::before{content:"";position:absolute;left:-14%;top:-160%;width:70%;height:320%;
  pointer-events:none;transform:rotate(18deg);filter:blur(12px);
  background:linear-gradient(90deg,rgba(236,242,255,.24),rgba(236,242,255,.05) 58%,transparent)}
.st-hero.has-file .st-node[aria-pressed="true"]{
  border-color:rgba(232,238,250,.34)!important;
  background:linear-gradient(180deg,rgba(232,238,250,.135),rgba(226,232,244,.05))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 14px 30px -18px rgba(0,0,0,.9)!important}
.st-hero.has-file .st-node[aria-pressed="true"]::before{
  background:linear-gradient(90deg,rgba(255,255,255,.42),rgba(240,246,255,.10) 58%,transparent)}
.st-hero.has-file .st-node .st-tile{border-radius:50%!important;
  border:1px solid rgba(224,232,246,.22)!important;background:rgba(226,232,244,.05)!important;
  color:#E8EDF7!important}
.st-hero.has-file .st-node[aria-pressed="true"] .st-tile{border-color:rgba(240,246,255,.42)!important;
  background:rgba(240,246,255,.13)!important;color:#FFFFFF!important}
.st-hero.has-file .st-node[aria-pressed="true"] .st-nlab{color:#FFFFFF!important}
.st-hero.has-file .st-node:not([aria-pressed="true"]) .st-nlab{color:#98A0AE!important}
.st-hero.has-file .st-node:not([aria-pressed="true"]) .st-tile{color:#98A0AE!important}
.st-hero.has-file .st-node > *{position:relative;z-index:1}

/* the × moves outside the pill once the pill is the Continue button, so it stops sitting on the
   arrow — and it still cancels (2026-09-23) */
html:not([data-bar]) .st-hero.has-file .st-drop{position:relative}
html:not([data-bar]) .st-hero.has-file .st-drop:has(.st-prog.go) .st-swap{right:-44px!important;
  background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important;
  color:#CFC7BF!important}

/* ⚡ NO FLASH OF THE OLD BUTTON (Patrik 2026-09-23: "when I click on upload there's a half-frame
   blink of that orange old button"). The frame mounts on the pick and paints its idle screen for
   one frame before the file lands — and that screen still had the old amber CTA on it. In the
   embed the idle screen is never used (the landing hands the file over), so it does not paint. */
/* …but it must come back when the file is REFUSED (too long): that screen is where the reason is
   printed. So the idle screen is not hidden, it is held for 450ms after the frame mounts — long
   enough to cover the hand-over, short enough that an error is on screen immediately. */
@keyframes stHold{from{visibility:hidden}to{visibility:visible}}
body.st.embed .st-hero:not(.has-file){animation:stHold .01s linear .45s both}
/* and nothing in the frame is allowed to be the old amber lozenge */
body.st.embed .st-go{border:1px solid rgba(255,214,170,.34)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.04))!important;
  color:#F6F0E9!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 18px 38px -22px rgba(0,0,0,.95)!important}


/* the frame's own upload control is the landing's pill, in the same glass (2026-09-23) */
body.st.embed .st-hero:not(.has-file) .st-go{height:64px;padding:0 28px!important;border-radius:999px!important;
  font-size:17px!important;font-weight:500!important}
body.st.embed .st-hero:not(.has-file) .st-go .st-disc{background:radial-gradient(60% 60% at 50% 35%,#FFF8F0,#F3DEC8)!important;
  color:#1B1007!important;box-shadow:0 2px 10px rgba(0,0,0,.4)!important}
body.st.embed .st-drop-err{color:#FFC9A6!important;font-size:13.5px}

/* ── ONE BUTTON, THREE THINGS TO SAY (Patrik 2026-09-23: "this is a progress of our buttons, it
   changes style in every stage — we want all 3 to look like our first one"). The pill's material
   never changes: same height, same radius, same hairline, same glass. Only the words change, and
   the light inside it moves. These rules supersede the filled-bar treatment above. */
html:not([data-bar]) .st-hero.has-file .st-drop{width:min(470px,92vw)!important}
html:not([data-bar]) .st-hero.has-file .st-prog{height:74px!important;padding:0 30px 0 26px!important;
  border:1px solid rgba(255,214,170,.34)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.04))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 42px -26px rgba(0,0,0,.95)!important}
/* the progress is light passing through the glass, never a painted fill */
html:not([data-bar]) .st-hero.has-file .st-bar i{background:none!important}
html:not([data-bar]) .st-hero.has-file .st-bar i::after{right:-40px;top:-60%;bottom:-60%;width:120px;
  border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,138,61,.85),rgba(255,110,40,.34) 55%,transparent 74%)!important;
  box-shadow:none!important;filter:blur(24px)}
/* the type: the verb plain, the number lit, a hairline between them — the idle pill's anatomy */
html:not([data-bar]) .st-hero.has-file .st-plabel{font-size:19px!important;font-weight:500!important;
  color:#F3ECE4!important}
html:not([data-bar]) .st-hero.has-file .st-pct{font-size:19px!important;font-weight:600!important;
  color:#FFF6EC!important;margin-right:0!important;padding-left:20px;
  border-left:1.5px solid rgba(255,255,255,.55)}
html:not([data-bar]) .st-hero.has-file .st-spin{width:20px!important;height:20px!important;
  background:none!important;border-width:2px!important;box-shadow:none!important;
  border-color:rgba(255,177,34,.30)!important;border-top-color:var(--acc-l)!important}
/* done: same glass, the word changes, the arrow appears. No amber slug. */
html:not([data-bar]) .st-hero.has-file .st-prog.done,
html:not([data-bar]) .st-hero.has-file .st-prog.go{
  background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.04))!important;
  border-color:rgba(255,214,170,.5)!important}
html:not([data-bar]) .st-hero.has-file .st-prog.done .st-bar i::after{opacity:.55}
html:not([data-bar]) .st-hero.has-file .st-prog.done .st-plabel,
html:not([data-bar]) .st-hero.has-file .st-prog.go .st-plabel{color:#FFF6EC!important;font-weight:600!important}
html:not([data-bar]) .st-hero.has-file .st-prog.go::after{right:22px;width:32px;height:32px;margin-top:-16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1007' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat,
             radial-gradient(60% 60% at 50% 35%,#FFF8F0,#F3DEC8);
  box-shadow:0 2px 10px rgba(0,0,0,.4)}
html:not([data-bar]) .st-hero.has-file .st-prog.go .st-spin{display:none}
html:not([data-bar]) .st-hero.has-file .st-prog.go .st-plabel{padding-left:2px}
/* the done state keeps the glass too: the old rule painted the FILL solid amber at 100% */
html:not([data-bar]) .st-hero.has-file .st-prog.done .st-bar i,
html:not([data-bar]) .st-hero.has-file .st-prog.go .st-bar i{background:none!important}
/* the × lives outside the pill in every state, not on top of the number (2026-09-23) */
html:not([data-bar]) .st-hero.has-file .st-swap{right:-46px!important;width:28px!important;height:28px!important;
  background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.13)!important;
  color:#CFC7BF!important;box-shadow:none!important;backdrop-filter:none!important}
html:not([data-bar]) .st-hero.has-file .st-swap:hover{background:rgba(255,255,255,.12)!important}

/* ON IS WARM (Patrik 2026-09-23: "can we at least have those buttons which are selected slightly
   highlighted with light orange so it's clear which are selected"). The cool glass stays for the
   unlit ones; a lit switch takes a light amber wash, an amber edge and white type — enough to
   read across the row at a glance, nowhere near the old halo. */
.st-hero.has-file .st-node[aria-pressed="true"]{
  border-color:rgba(255,186,120,.52)!important;
  background:linear-gradient(180deg,rgba(255,168,92,.24),rgba(255,138,61,.10))!important;
  box-shadow:inset 0 1px 0 rgba(255,236,214,.34),0 14px 30px -18px rgba(0,0,0,.9)!important}
.st-hero.has-file .st-node[aria-pressed="true"]::before{
  background:linear-gradient(90deg,rgba(255,224,196,.40),rgba(255,190,140,.10) 58%,transparent)!important}
.st-hero.has-file .st-node[aria-pressed="true"] .st-tile{
  border-color:rgba(255,210,168,.60)!important;background:rgba(255,196,146,.20)!important;
  color:#FFF8F1!important}
.st-hero.has-file .st-node[aria-pressed="true"] .st-nlab{color:#FFF6EC!important}
.st-hero.has-file .st-node[aria-pressed="true"] .st-tile::after{
  background:#FFD9B0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7l4.5-5' fill='none' stroke='%23241505' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat!important}

/* the frame's own upload control IS the landing's pill — same anatomy, same light (Patrik
   2026-09-23: "look how it's using different designs"). It shows on a drag-and-drop refusal and
   on the standalone /start page, and there is no reason for it to be a second design. */
.st-go.pickpill{display:inline-flex;align-items:center;gap:14px;height:74px;padding:0 34px 0 26px!important;
  border-radius:999px!important;font-size:19px!important;font-weight:500!important;letter-spacing:-.01em;
  border:1px solid rgba(255,214,170,.34)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.04))!important;
  color:#F3ECE4!important;overflow:hidden;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 42px -26px rgba(0,0,0,.95)!important}
.st-go.pickpill .pp-gly{display:inline-flex;color:var(--acc-l)}
.st-go.pickpill .pp-gly svg{width:20px;height:20px}
.st-go.pickpill .pp-div{width:1.5px;height:30px;border-radius:2px;background:rgba(255,255,255,.55);margin:0 4px}
.st-go.pickpill .pp-lit{position:relative;color:#FFF6EC;font-weight:600}
.st-go.pickpill .pp-lit::before{content:"";position:absolute;left:-26%;top:-260%;width:152%;height:620%;
  z-index:-1;pointer-events:none;border-radius:50%;filter:blur(26px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,138,61,.78),rgba(255,110,40,.30) 55%,transparent 74%)}
.st-go.pickpill:hover{border-color:rgba(255,214,170,.55)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06))!important}
/* the same halo came off the frame's pills (2026-09-23) */
.st-go.pickpill{box-shadow:inset 0 1px 0 rgba(255,255,255,.22)!important}
html:not([data-bar]) .st-hero.has-file .st-prog{box-shadow:inset 0 1px 0 rgba(255,255,255,.22)!important}
/* the ring hugging the pill was .st-drop::before — a 22px warm glow left from the drop zone
   (Patrik 2026-09-23: "that edge is still there"). The pill has no ring of its own. */
html:not([data-bar]) .st-hero.has-file .st-drop::before{display:none!important}

/* ── STEP 3, TO HIS SKETCH (Patrik 2026-09-23, the notebook drawing: preview on the left; on the
   right two font pickers and a settings button in one row, the brand colours in the next, a rule
   under them, and Styles filling the rest; the timeline runs full width underneath).
   Nothing is deleted — the typography specimen and the caption knobs still exist, the specimen is
   archived and the knobs moved behind the ⚙ button. */
.st-brand-controls{display:flex;flex-direction:column}
.st-brand-controls > .st-bhead{order:1}
.st-brand-controls > .st-bt:nth-of-type(2){order:2;position:relative}   /* fonts · colours · knobs */
.st-brand-controls > #blockStyles{order:3;position:relative;padding-top:18px;margin-top:4px}
.st-brand-controls > #blockStyles::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(255,255,255,.10)}
.st-brand-controls > .st-plan{order:4}
.st-brand-controls > .st-actions{order:5}

/* ⛔ ARCHIVED 2026-09-23 (his sketch has no specimen): the big TYPOGRAPHY block. Unhide .st-spec. */
.st-spec{display:none!important}

/* row 1: primary font · secondary font · settings */
.st-tune{display:grid!important;grid-template-columns:1fr 1fr 56px;gap:12px;align-items:end}
.st-set{display:grid;align-content:center;justify-items:stretch;gap:5px;height:44px;padding:0 14px;
  border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05)}
.st-set i{display:block;height:1.5px;border-radius:2px;background:rgba(240,236,230,.75)}
.st-set i:nth-child(2){width:70%}
.st-set i:nth-child(3){width:45%}
.st-set:hover{border-color:rgba(255,214,170,.42);background:rgba(255,255,255,.09)}
.st-brand-controls.setopen .st-set{border-color:rgba(255,214,170,.55);background:rgba(255,168,92,.16)}

/* the knobs are a panel that opens under that button, not a row on the first screen */
.st-bt .st-sliders{position:absolute;right:0;top:calc(100% - 4px);z-index:20;width:min(420px,92%);
  display:none;grid-template-columns:1fr;gap:14px;padding:16px 18px;border-radius:16px;
  border:1px solid rgba(255,255,255,.13);background:rgba(22,20,19,.96);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95);backdrop-filter:blur(14px)}
.st-brand-controls.setopen .st-bt .st-sliders{display:grid}

/* row 2: the brand colours, as three chips */
.st-colgroup{margin-top:14px}
.st-colsample.chips{display:grid!important;grid-template-columns:repeat(3,1fr);gap:10px}
.st-colsample.chips > button{width:auto!important;justify-content:flex-start}

/* the knobs live in a <details class="st-capset">; the ⚙ button opens it now, so its own summary
   is out and the panel is anchored to the button instead (2026-09-23) */
.st-bt .st-capset{position:static}
.st-bt .st-capset > summary{display:none!important}
.st-bt .st-capset{display:block!important}
.st-brand-controls:not(.setopen) .st-bt .st-capset .st-sliders{display:none!important}
.st-brand-controls.setopen .st-bt .st-capset .st-sliders{display:grid!important}
/* the two font pickers and the button sit on one line; the colours are the line under them */
.st-brand-controls > .st-bt:nth-of-type(2){display:block!important}
.st-tune > .st-group{min-width:0}
.st-tune .st-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-colgroup .st-colsample.chips{margin-top:8px}
/* a later rule was still pinning .st-tune to two columns (2026-09-23) */
.st-bt .st-tune{grid-template-columns:1fr 1fr 56px!important;align-items:end!important}
.st-bt .st-tune > .st-set{align-self:end;height:44px;margin-bottom:0}
/* the colours are their own line under the fonts, left-aligned like his sketch */
.st-bt .st-colgroup{display:block!important;text-align:left!important;margin-top:16px}
.st-bt .st-colgroup .st-label{justify-content:flex-start}
.st-bt .st-colsample.chips{grid-template-columns:repeat(3,minmax(0,1fr))!important;justify-content:flex-start}
/* the fonts/colours block sits inside <details class="st-fine">; it stacks, it is not a 2-up grid */
.st-fine .st-bt{display:block!important;position:relative}
.st-fine .st-bt .st-colgroup{display:block!important;margin-top:18px}
.st-fine .st-bt .st-colgroup .st-label{display:flex;justify-content:flex-start}
.st-fine .st-bt .st-colsample.chips{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px;margin-top:8px}
/* the knobs panel, anchored under the ⚙ */
.st-capset[open] .st-sliders{display:grid!important}
.st-capset{position:static!important}
/* the knobs hang off the ⚙ itself, and nothing clips them */
.st-fine .st-bt,.st-brand-controls,.st-pane.st-brand{overflow:visible!important}
.st-bt .st-tune{position:relative}
.st-bt .st-capset .st-sliders{position:absolute;right:0;top:calc(100% + 10px);z-index:40;
  width:min(440px,96%)}

/* ⛔ FOUND IT: the "edge" around the pill was .st-fill — the clip's own first frame, blurred 26px
   at brightness .55 and inset -30px, painted behind the old drop CARD. With the card gone it had
   nothing to fill, so all that was left of it was a dark cloud hugging the pill (measured 14,13,18
   against a 22,22,23 ground). The page's light is the ground now. (Patrik 2026-09-23, three times:
   "that edge is still there".) Unhide .st-fill to bring the blurred frame back. */
body.st.embed .st-hero.has-file .st-fill{display:none!important}
/* …and the rest of the old card came with it: .st-cardvid (a 40px black glow), the <video> itself
   (.st-v, painted black) and .st-scrim (rgba(8,6,16,.55)) were still stacked behind the pill —
   that bluish-dark box is what read as an edge at 3x. The pill stands on the page's ground. */
body.st.embed .st-hero.has-file .st-cardvid,
body.st.embed .st-hero.has-file .st-v,
body.st.embed .st-hero.has-file .st-scrim{display:none!important}
/* the frame is warmed before the pick now, so its idle screen is held until a file is actually
   in — not for 450ms after mounting (2026-09-23) */
body.st.embed .st-hero:not(.has-file){animation:none!important;visibility:visible}

/* ── STYLES FILL THE PANEL (Patrik's sketch again, 2026-09-23: "let's keep building this second
   step" — on the drawing, Styles is the big area under the rule, not a one-line rail you scroll
   with arrows). Four across, wrapping, with the rest of the panel's height to live in; the arrows
   go, since nothing is hidden off to the side any more. */
.st-brand-controls #blockStyles .st-caps-slide{display:block}
.st-brand-controls #blockStyles .st-slidebtn{display:none!important}
.st-brand-controls #blockStyles .st-capstyles{display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;overflow:visible!important;
  transform:none!important;width:auto!important}
.st-brand-controls #blockStyles .st-capstyles > *{width:auto!important;min-width:0!important;
  scroll-snap-align:none}
/* the preview stands as tall as the panel beside it */
.st-brand-preview{align-self:stretch}
.st-brand-preview .st-frame{height:100%}
/* a refusal ("too many clips…") must push the row, not print over it (2026-09-23) */
body.st.embed .st-hero.has-file .st-drop-err{position:static!important;transform:none!important;
  margin:12px auto 0;max-width:520px}
/* Styles fills the panel but does not become a catalogue: four across, about three rows deep,
   and it scrolls inside its own box (2026-09-23) */
.st-brand-controls #blockStyles .st-capstyles{max-height:330px;overflow-y:auto!important;
  padding-right:6px;align-content:start}
/* the grid uses the whole panel width, as many across as fit (2026-09-23) */
.st-brand-controls #blockStyles .st-caps-slide{width:100%}
.st-brand-controls #blockStyles .st-capstyles{
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;width:100%!important;
  max-width:none!important}
/* #blockStyles is itself a two-column grid — that is why the tiles only ever had half the panel */
.st-brand-controls > #blockStyles{display:block!important}
.st-brand-controls #blockStyles > .st-group{width:100%}
.st-brand-controls #blockStyles .st-capstyles{
  grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* ── HOVER SHOWS THE CARD, NOT A DIFFERENT ONE (Patrik 2026-09-23: "when I put my cursor on a
   preview it shows something else; it needs to show what is on the card"). Each tile carries a
   rendered poster of the style's own specimen AND a live caption render underneath fed with the
   visitor's words — and the poster faded out on hover, so hovering swapped one wording for
   another. The poster stays; the live render still plays under it for the selected tile. */
.st-cs:hover .pv .po{opacity:1}
/* the selected tile only drops its poster once the clip has words to render in its place — with
   no transcript the live layer says "YOUR WORD", which is not what the card shows (Patrik
   2026-09-23: "if I click on each preview, this happens") */
body.has-words .st-cs[aria-pressed="true"] .pv .po,
body.has-words .st-cs.on .pv .po{opacity:0}

/* the preview starts where the panel starts, and is sized to it (Patrik 2026-09-23: "position or
   size up the preview so it aligns with the top of the other UI") */
.st-brand-preview{display:flex;align-items:flex-start;justify-content:center;
  flex:0 0 372px!important;width:372px!important}
.st-brand-preview .st-frame{width:100%;height:auto;max-height:none}
/* a true 9:16 frame: something upstream still pinned its height (2026-09-23) */
.st-brand-preview .st-frame{aspect-ratio:9/16!important;height:auto!important;min-height:0!important;
  max-height:none!important}
/* the pair sits in the middle of the screen, tops level, both the same height */
.st-pane.st-brand{align-items:center!important}
.st-brand-preview{align-self:center!important;height:var(--bph,auto)}
.st-brand-preview .st-frame{height:var(--bph,auto)!important;width:auto!important;
  aspect-ratio:9/16!important;max-width:100%}

/* ── THE WHOLE ROW IS ONE ROW (Patrik 2026-09-23: "size down the font buttons because they're
   taking the entire width, and we can have those 3 settings right there without having it
   opened"). The two pickers take only what they need; size, position and line gap sit beside
   them, always visible. The ⚙ is gone — there is nothing left behind it. */
.st-fine .st-bt{display:grid!important;grid-template-columns:auto minmax(320px,1fr);
  gap:16px 22px;align-items:end}
.st-bt .st-tune{grid-column:1;grid-template-columns:196px 196px!important}
.st-bt .st-set,#stSet{display:none!important}
.st-bt .st-capset{grid-column:2;grid-row:1;position:static!important;margin:0}
.st-bt .st-capset .st-sliders{position:static!important;display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;padding:0!important;border:0!important;
  background:none!important;box-shadow:none!important;backdrop-filter:none!important;width:auto!important}
.st-bt .st-capset .st-slider{font-size:11.5px}
.st-bt .st-colgroup{grid-column:1/-1;margin-top:2px}

/* ⛔ ARCHIVED 2026-09-23 at his word: the "Graphics · pick one" chip. Unhide #colEx (and its
   popover #popEx) to bring the second graphics colour back. */
#colEx{display:none!important}
/* the older ".setopen" gate is moot now — the knobs are always in the row (2026-09-23) */
.st-brand-controls .st-bt .st-capset .st-sliders,
.st-brand-controls:not(.setopen) .st-bt .st-capset .st-sliders{display:grid!important}
/* four knobs in the row now (2026-09-23) */
.st-bt .st-capset .st-sliders{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* ── THE STRIP LOOKS LIKE A TIMELINE (Patrik 2026-09-23: "turn this into a timeline look so the
   user can see it IS a timeline — you don't need those two boxes saying NO VISUAL"). The cards
   become segments on a track: no dashed outlines, no 'NO VISUAL' label, just the words that are
   spoken there, butted against each other with a hairline between. */
.st-tl-track{background:rgba(255,255,255,.035);border-radius:10px;overflow:hidden}
.st-tl-b{top:0!important;bottom:0!important;border-radius:0!important;
  border:0!important;border-right:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.045)!important;padding:0 12px!important;
  display:flex!important;align-items:center}
.st-tl-b.plain{background:rgba(255,255,255,.03)!important;border-style:solid!important}
.st-tl-b b{display:none!important}                 /* the "NO VISUAL" / kind label */
.st-tl-b span{font-size:11.5px;color:#B7AEA6}
.st-tl-b:hover{background:rgba(255,255,255,.08)!important}
.st-tl-b.on{background:rgba(255,168,92,.16)!important;
  box-shadow:inset 0 0 0 1px rgba(255,190,130,.35)!important}
.st-tl-b.hook{background:linear-gradient(180deg,rgba(255,138,61,.30),rgba(255,138,61,.16))!important}
.st-tl-b.hook span{color:#FFF3E6}
/* …and no words inside the segments either (Patrik 2026-09-23: "why are there still those texts
   on the timeline"). A timeline is blocks and a playhead; the words stay in the tooltip. */
.st-tl-b span{display:none!important}
.st-tl-b{padding:0!important}

/* ── THE STRIP, BUILT LIKE THE EDITOR'S TIMELINE (his own, 2026-09-23) ───────────────────────── */
.st-tl-ruler{position:relative;height:16px;margin:0 0 4px}
.st-tl-ruler i{position:absolute;top:8px;width:1px;height:8px;background:rgba(255,255,255,.16)}
.st-tl-ruler b{position:absolute;top:0;transform:translateX(3px);font:500 10px var(--ui);
  color:#7E766F;letter-spacing:.02em}
.st-tl-track{position:relative}
.st-tl-wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.st-tl-blocks{position:absolute;inset:0;z-index:1}
/* the segments are boundaries over the wave, with their length on them */
.st-tl-b{background:rgba(255,255,255,.028)!important;border-right:1px solid rgba(255,255,255,.14)!important}
.st-tl-b::after{content:attr(data-dur);position:absolute;left:7px;top:5px;font:500 10px var(--ui);
  color:rgba(255,236,214,.55);pointer-events:none}