/* /about: one slide fixed in the window plays a scene per stop while the
   words scroll beside it (about.js picks the scene). The page snaps stop to
   stop. Without script, or with motion turned off, it reads top to bottom and
   each scene shows its last frame. Theme tokens throughout; the page ground
   is the inverse sheet, lit by the brand gradient. */

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-snap-type:y mandatory}
html,body{margin:0}
body{
  background:var(--deck-inverse-sheet); color:var(--deck-inverse-text);
  font-family:var(--deck-font-sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* The ground's light: the brand gradient, far behind and blurred. */
body::before{
  content:""; position:fixed; inset:-20vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38vmax 30vmax at 12% 10%, color-mix(in srgb, var(--deck-primary) 38%, transparent), transparent 70%),
    radial-gradient(34vmax 28vmax at 92% 30%, color-mix(in srgb, var(--deck-secondary) 30%, transparent), transparent 70%),
    radial-gradient(40vmax 26vmax at 70% 105%, color-mix(in srgb, var(--deck-tertiary) 26%, transparent), transparent 70%);
  filter:blur(10px);
}
a{color:inherit}
.g{background:linear-gradient(90deg, var(--deck-primary), var(--deck-secondary) 55%, var(--deck-tertiary)); -webkit-background-clip:text; background-clip:text; color:transparent}
.mm{width:22px; height:18px; flex:none}

/* ── Top bar ──────────────────────────────────────────────────────────── */
.top{position:fixed; top:0; left:0; right:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
  padding:18px clamp(16px, 4vw, 40px); pointer-events:none}
.top a{pointer-events:auto; text-decoration:none}
/* The page's brand: Deck's icon and name, and who makes it, quieter. */
.brand{display:inline-flex; align-items:baseline; gap:9px; color:#fff}
.brand .deck-icon{width:28px; height:28px; align-self:center; margin-right:1px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.brand b{font-family:var(--deck-font-display); font-weight:800; font-size:20px; letter-spacing:-0.04em}
.brand span{font-size:13px; color:var(--deck-inverse-muted)}
@media (max-width: 600px){ .brand span{display:none} }
/* Always on screen: a solid white pill, in the main button's type, so it
   reads as a button without competing with the one gradient call to action. */
.top-cta{font-family:var(--deck-font-sans); font-size:14px; font-weight:700; color:var(--deck-text) !important; text-decoration:none;
  padding:10px 18px; border-radius:999px; background:#fff; box-shadow:0 8px 24px -12px rgba(0,0,0,.6);
  transition:transform .2s var(--deck-ease-out), box-shadow .2s}
.top-cta:hover{transform:translateY(-1px); box-shadow:0 12px 28px -12px color-mix(in srgb, var(--deck-secondary) 70%, transparent)}
.top-nav{display:flex; align-items:center; gap:22px}
.top-link{font-size:14px; font-weight:600; color:var(--deck-inverse-muted)}
.top-link:hover{color:#fff}
@media (max-width: 600px){ .top-nav{gap:14px} .top-cta{padding:9px 14px; font-size:13px} }

/* ── Layout: words on the left, the slide on the right ────────────────── */
.about{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr); max-width:1400px; margin:0 auto; padding:0 clamp(16px, 4vw, 48px); gap:clamp(24px, 4vw, 64px)}
.copy{grid-column:1; grid-row:1}
.stage-wrap{grid-column:2; grid-row:1; position:sticky; top:0; height:100vh; display:flex; align-items:center}
/* One stop per screen, and the page snaps to each. */
.stop{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:96px 0; max-width:500px;
  scroll-snap-align:center; scroll-snap-stop:always}
/* The opening snaps by its top, so the page opens on the headline even when
   the opening is taller than the room under the slide on a phone. */
.stop.hero{scroll-snap-align:start}
.foot{scroll-snap-align:end}
.stop .label{display:flex; align-items:center; gap:12px; margin:0 0 18px; font-family:var(--deck-font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#b9a6ff}
.stop .label span{display:inline-flex; color:var(--deck-inverse-faint)}
.stop h1,.stop h2{font-family:var(--deck-font-display); font-weight:800; letter-spacing:-0.04em; line-height:1.04; margin:0 0 20px}
.stop h1{font-size:clamp(40px, 4.4vw, 68px)}
.stop h2{font-size:clamp(28px, 3vw, 44px)}
.stop p{margin:0; color:var(--deck-inverse-muted)}
.hero .lead{font-size:clamp(18px, 1.4vw, 21px)}
.cue{display:flex; align-items:center; gap:12px; margin-top:44px !important; font-family:var(--deck-font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--deck-inverse-faint) !important}
.cue i{width:1px; height:34px; background:linear-gradient(var(--deck-inverse-faint), transparent); animation:cue 1.8s var(--deck-ease-out) infinite}
@keyframes cue{0%{transform:scaleY(0); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

/* Words that aren't the current stop step back. */
.js .stop:not(.hero):not(.end) > *{transition:opacity .5s, transform .5s var(--deck-ease-out); opacity:.28; transform:translateY(8px)}
.js .stop.on > *{opacity:1 !important; transform:none !important}

.end .actions{margin-top:30px}
.cta{display:inline-flex; align-items:center; gap:10px; padding:16px 28px; border-radius:999px; text-decoration:none; font-weight:700; font-size:17px; color:#fff;
  background:linear-gradient(100deg, var(--deck-primary), var(--deck-secondary) 60%, var(--deck-tertiary)); box-shadow:0 18px 40px -16px var(--deck-secondary);
  transition:transform .2s var(--deck-ease-out), box-shadow .2s}
.cta:hover{transform:translateY(-2px); box-shadow:0 24px 48px -16px var(--deck-secondary)}
.cta::after{content:"→"; transition:transform .2s}
.cta:hover::after{transform:translateX(4px)}
.links{display:flex; flex-wrap:wrap; gap:22px; margin-top:28px; font-size:14px}
.links a{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--deck-inverse-muted)}
.links a:hover{color:#fff}
.links .profile-icon{width:16px; height:16px}
/* ── Contact: after the last screen, the whole width ──────────────────── */
.contact{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:96px clamp(16px, 4vw, 48px) 40px; scroll-snap-align:start}
.contact-in{width:min(720px, 100%)}
.contact .label{margin:0 0 18px; font-family:var(--deck-font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#b9a6ff}
.contact h2{margin:0 0 14px; font-family:var(--deck-font-display); font-weight:800; font-size:clamp(28px, 3.4vw, 48px); letter-spacing:-0.04em; line-height:1.05}
.contact-lead{margin:0 0 32px; color:var(--deck-inverse-muted)}
.form{display:flex; flex-direction:column; gap:18px}
.form .two{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form label{display:flex; flex-direction:column; gap:8px}
.form label span{font-family:var(--deck-font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--deck-inverse-faint)}
.form label em{font-style:normal; text-transform:none; letter-spacing:0}
.form input, .form textarea{font:inherit; color:#fff; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:13px 15px; resize:vertical}
.form input:focus, .form textarea:focus{outline:none; border-color:#b9a6ff; box-shadow:0 0 0 3px color-mix(in srgb, var(--deck-primary) 30%, transparent)}
.form .trap{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.form-foot{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:6px}
.form button.cta{border:0; cursor:pointer; font-family:inherit}
.form button.cta:disabled{opacity:.6; cursor:default}
.form-msg{margin:0; color:var(--deck-inverse-muted); font-size:15px}
.form-done{margin:0; padding:22px 24px; border-radius:14px; background:rgba(87,227,166,.1); color:#9bf0c9; font-weight:600}
@media (max-width: 600px){ .form .two{grid-template-columns:1fr} }

/* ── The waitlist, under the hero's words: one field and the button ──── */
.join{margin-top:32px}
.wl{gap:12px}
.wl-row{display:flex; gap:10px; flex-wrap:wrap}
.wl-email{flex:1 1 220px}
.wl .cta{padding:14px 22px; font-size:16px}
.wl .form-msg{font-size:14px; color:var(--deck-inverse-faint)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.end .actions{display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.more{color:var(--deck-inverse-muted); font-weight:600; text-underline-offset:4px}
.more:hover{color:#fff}

/* ── Pricing and about: full-width sections after the slide ──────────── */
.pricing, .about-me{display:flex; justify-content:center; padding:120px clamp(16px, 4vw, 48px) 40px; scroll-snap-align:start}
.pricing-in{width:min(960px, 100%)}
.about-in{width:min(720px, 100%)}
:is(.pricing, .about-me) .label{margin:0 0 18px; font-family:var(--deck-font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#b9a6ff}
:is(.pricing, .about-me) h2{margin:0 0 32px; font-family:var(--deck-font-display); font-weight:800; font-size:clamp(28px, 3.4vw, 48px); letter-spacing:-0.04em; line-height:1.05}
.plans{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.plan{padding:32px; border-radius:22px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.plan.pro{background:linear-gradient(160deg, color-mix(in srgb, var(--deck-primary) 22%, transparent), color-mix(in srgb, var(--deck-secondary) 12%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--deck-primary) 60%, transparent), 0 30px 80px -40px var(--deck-secondary)}
.plan h3{margin:0 0 14px; font-family:var(--deck-font-mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--deck-inverse-muted); font-weight:500}
.price{margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.price b{font-family:var(--deck-font-display); font-weight:800; font-size:44px; letter-spacing:-0.04em; line-height:1}
.price span{color:var(--deck-inverse-muted); font-size:15px}
.plan-lead{margin:12px 0 20px; color:var(--deck-inverse-muted)}
.plan ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; font-size:15px}
.plan li{display:flex; gap:10px}
.plan li::before{content:""; flex:none; width:8px; height:8px; margin-top:8px; border-radius:50%; background:#b9a6ff}
.plan.pro li::before{background:linear-gradient(135deg, var(--deck-primary), var(--deck-secondary))}
.beta-note{margin:24px 0 0; color:var(--deck-inverse-muted); font-size:15px}
.beta-note b{color:#fff}
@media (max-width: 760px){ .plans{grid-template-columns:1fr} }

.about-lead{margin:-12px 0 32px; color:var(--deck-inverse-muted)}
.tools-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.tool-card{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:20px; border-radius:18px; background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); color:inherit; text-decoration:none}
.tool-card img, .tool-card .deck-icon{width:48px; height:48px; border-radius:12px; margin-bottom:8px}
.tool-card img.pixel{image-rendering:pixelated}
.tool-card b{font-family:var(--deck-font-display); font-weight:800; font-size:20px; letter-spacing:-0.03em}
.tool-card small{font-size:14px; line-height:1.35; color:var(--deck-inverse-muted)}
.tool-card span{margin-top:auto; padding-top:8px; font-family:var(--deck-font-mono); font-size:12px; letter-spacing:.06em; color:#b9a6ff}
a.tool-card{transition:transform .2s var(--deck-ease-out), box-shadow .2s}
a.tool-card:hover{transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.tool-card.next{background:none; box-shadow:none; border:1.5px dashed rgba(255,255,255,.28)}
.tool-card.next i{display:grid; place-items:center; width:48px; height:48px; border-radius:12px; margin-bottom:8px; font-style:normal; font-size:28px; font-weight:300; background:rgba(255,255,255,.08)}
@media (max-width: 760px){ .tools-row{grid-template-columns:1fr} }

/* The same signature as a landing page's: who made it on the left, where to
   find them on the right, in white. */
.foot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; max-width:768px; margin:0 auto;
  padding:40px 24px 56px; font-size:14px; color:rgba(255,255,255,.82)}
.foot-name{display:inline-flex; align-items:center; gap:10px}
.foot-name .mm{width:20px; height:17px; color:#fff}
.foot a{color:rgba(255,255,255,.82); text-decoration:none}
.foot-name a{color:#fff; font-weight:600}
.foot a:hover{color:#fff}
.foot-links{display:flex; flex-wrap:wrap; gap:22px}
.foot-links a{display:inline-flex; align-items:center; gap:7px}
.foot-links .profile-icon{width:15px; height:15px}
.foot-legal{flex-basis:100%; display:flex; gap:22px; font-size:13px}
.foot-legal a{color:var(--deck-inverse-faint)}
:where(a,button):focus-visible{outline:2px solid #b9a6ff; outline-offset:3px; border-radius:6px}

/* ── The stage ────────────────────────────────────────────────────────── */
.stage{width:100%; position:relative}
.frame{
  position:relative; aspect-ratio:16/9; width:100%; container-type:inline-size; border-radius:22px; overflow:hidden;
  background:#0d1027; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 50px 120px -40px rgba(0,0,0,.8), 0 0 80px -30px color-mix(in srgb, var(--deck-primary) 60%, transparent);
}
.dots{display:flex; justify-content:center; gap:0; margin-top:14px; visibility:hidden}
.js .dots{visibility:visible}
/* An 8px dot in a 24px target: the transparent border is the tap area. */
.dots button{box-sizing:content-box; width:8px; height:8px; padding:0; border:8px solid transparent; background-clip:padding-box; border-radius:99px; background-color:rgba(255,255,255,.22); cursor:pointer; transition:width .3s var(--deck-ease-out), background .3s}
.dots button.on{width:26px; background-image:linear-gradient(90deg, var(--deck-primary), var(--deck-secondary))}

/* A scene: shown only while it's the current one. */
.sc{position:absolute; inset:0; padding:6cqw 7cqw; display:flex; flex-direction:column; opacity:0; visibility:hidden;
  transition:opacity .55s var(--deck-ease-out), visibility .55s, transform .7s var(--deck-ease-out); transform:scale(1.015)}
.sc.on{opacity:1; visibility:visible; transform:none}
html:not(.js) .sc-hero{opacity:1; visibility:visible; transform:none}
.sc .glow{position:absolute; inset:auto -20% -60% auto; width:80%; height:110%; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--deck-primary) 45%, transparent), transparent)}

/* Pieces come in when their scene does: --i staggers them, --d sets a time. */
.sc .a, .sc .drop{opacity:0}
.sc.on .a{animation:rise .75s var(--deck-ease-out) both; animation-delay:calc(var(--i, 0) * 110ms + 120ms)}
.sc.on .drop{animation:drop .6s cubic-bezier(.2,1.4,.4,1) both; animation-delay:calc(var(--i, 0) * 110ms + 120ms)}
@keyframes rise{from{opacity:0; transform:translateY(2.4cqw)}to{opacity:1; transform:none}}
@keyframes drop{from{opacity:0; transform:translateY(-3cqw) scale(.96)}to{opacity:1; transform:none}}

.s-kick{margin:0 0 2.2cqw; font-family:var(--deck-font-mono); font-size:1.7cqw; letter-spacing:.2em; text-transform:uppercase; color:#b9a6ff}
.s-kick.dark{color:var(--deck-primary)}
.s-title{margin:0; font-family:var(--deck-font-display); font-weight:800; font-size:7.4cqw; letter-spacing:-0.045em; line-height:1}
.s-title.dark{font-size:5cqw; color:var(--deck-text)}
.s-by{margin:auto 0 0; display:flex; align-items:center; gap:1.4cqw; font-size:1.9cqw; color:var(--deck-inverse-muted); padding-top:2cqw; border-top:1px solid rgba(255,255,255,.12)}
.s-by .mm{width:3cqw; height:2.5cqw; color:#fff}

/* The kinds, in a landing page's colours: deck violet, doc pink, the
   landing page in the link coral. */
.c1{--c1:var(--deck-primary); --c2:color-mix(in srgb, var(--deck-secondary) 18%, var(--deck-primary))}
.c2{--c1:var(--deck-secondary); --c2:color-mix(in srgb, var(--deck-tertiary) 18%, var(--deck-secondary))}
.c3{--c1:color-mix(in srgb, var(--deck-tertiary) 30%, var(--deck-secondary)); --c2:color-mix(in srgb, var(--deck-tertiary) 46%, var(--deck-secondary))}

/* ── Opening: Deck's icon, and what it makes ──────────────────────────── */
.sc-hero{align-items:center; justify-content:center; gap:4cqw; overflow:hidden; isolation:isolate}
/* Depth: a dot grid that fades out from the middle, and two soft blobs of
   the brand colours drifting behind everything. */
.hero-dots{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px) 0 0 / 2.4cqw 2.4cqw;
  -webkit-mask:radial-gradient(closest-side, #000 30%, transparent); mask:radial-gradient(closest-side, #000 30%, transparent)}
.blob{position:absolute; z-index:-2; width:46cqw; height:46cqw; border-radius:50%; filter:blur(6cqw); opacity:.45; pointer-events:none}
.blob.b1{left:-8cqw; top:-14cqw; background:var(--deck-primary)}
.blob.b2{right:-10cqw; bottom:-20cqw; background:var(--deck-secondary); opacity:.35}
.sc-hero.on .blob.b1{animation:drift 14s ease-in-out infinite alternate}
.sc-hero.on .blob.b2{animation:drift 17s ease-in-out infinite alternate-reverse}
@keyframes drift{to{translate:8cqw 6cqw}}

.mark{display:flex; align-items:center; gap:2.6cqw}
/* The wordmark is solid white; a light sweeps across it once as it lands. */
.wordmark{font-family:var(--deck-font-display); font-weight:800; font-size:9cqw; letter-spacing:-0.05em; line-height:1; color:#fff;
  background:linear-gradient(100deg, #fff 0 40%, #f3c7ff 48%, #ffd9c2 52%, #fff 60% 100%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.sc-hero.on .wordmark{animation:shine 1.6s var(--deck-ease-out) both .7s}
@keyframes shine{from{background-position:100% 0}to{background-position:0 0}}
/* The icon sits on its own glow, and breathes. */
.icon-wrap{position:relative; display:block}
.icon-wrap::before{content:""; position:absolute; inset:-30%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--deck-secondary) 55%, transparent), color-mix(in srgb, var(--deck-primary) 25%, transparent) 55%, transparent)}
.sc-hero.on .icon-wrap::before{animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6; transform:scale(.9)}}
.mark .deck-icon{display:block; width:13cqw; height:13cqw; filter:drop-shadow(0 2cqw 3.4cqw rgba(0,0,0,.55))}
.sc-hero.on .mark{animation:rise .75s var(--deck-ease-out) both .12s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -.8cqw}}

/* What it makes: three tiles, each a miniature of the thing, walking the
   gradient from violet to orange. */
.kinds{display:grid; grid-template-columns:repeat(3, 20cqw); gap:3cqw}
.kind{margin:0; display:flex; flex-direction:column; align-items:center; gap:1.3cqw}
.k1{--k1:var(--deck-primary); --k2:color-mix(in srgb, var(--deck-secondary) 30%, var(--deck-primary))}
.k2{--k1:var(--deck-secondary); --k2:color-mix(in srgb, var(--deck-tertiary) 25%, var(--deck-secondary))}
.k3{--k1:color-mix(in srgb, var(--deck-secondary) 30%, var(--deck-tertiary)); --k2:var(--deck-tertiary)}
.kind figcaption{font-family:var(--deck-font-display); font-weight:700; font-size:2.1cqw; letter-spacing:-0.02em; color:#fff; white-space:nowrap}
.mini{position:relative; width:100%; aspect-ratio:4/3; border-radius:1.4cqw; padding:1.6cqw; display:flex; flex-direction:column; gap:.7cqw;
  background:linear-gradient(135deg, var(--k1), var(--k2)); box-shadow:0 2cqw 3.6cqw -2cqw var(--k1), inset 0 0 0 1px rgba(255,255,255,.18)}
.sc-hero.on .mini{animation:bob 5s ease-in-out infinite}
.sc-hero.on .k2 .mini{animation-delay:-1.6s}
.sc-hero.on .k3 .mini{animation-delay:-3.2s}
.mini i{display:block; border-radius:.5cqw}
/* Decks: a white slide, a title, three cards. */
.m-deck{justify-content:center}
.m-deck::before{content:""; position:absolute; inset:1.6cqw; border-radius:.7cqw; background:#fff}
.m-deck .mt, .m-deck .mc{position:relative; margin:0 1.2cqw}
.m-deck .mt{height:1cqw; width:55%; background:#1d1f36}
.m-deck .mc{display:flex; gap:.5cqw; margin-top:.4cqw}
.m-deck .mc i{flex:1; height:3cqw; border-radius:.4cqw; background:var(--deck-primary)}
.m-deck .mc i:nth-child(2){background:var(--deck-secondary)}
.m-deck .mc i:nth-child(3){background:var(--deck-tertiary)}
/* Docs and landing pages: a white page with its dark title card. */
.m-doc, .m-land{padding:1.6cqw 2.6cqw 0}
.m-doc::before, .m-land::before{content:""; position:absolute; left:1.6cqw; right:1.6cqw; top:1.6cqw; bottom:0; border-radius:.7cqw .7cqw 0 0; background:#fff}
.mini .mh{position:relative; margin-top:.9cqw; height:2.6cqw; border-radius:.5cqw; background:#0d1027}
.m-doc .ml{position:relative; height:.6cqw; width:90%; background:#e3e1ec}
.m-doc .ml.s{width:60%}
.m-land .mr{position:relative; height:1.3cqw}
.m-land .r1{background:var(--deck-primary)}
.m-land .r2{background:var(--deck-secondary)}
.m-land .r3{background:color-mix(in srgb, var(--deck-tertiary) 40%, var(--deck-secondary))}

/* ── Build Decks: panels drop in, the numbers count up ────────────────── */
/* A slide as a reader sees it: the gradient ground, the white sheet, a title
   with its gradient phrase, a flow that walks the brand colours, and
   skeleton lines where the rest of the copy would be. */
.sc-build{padding:3cqw 3.6cqw; color:var(--deck-text);
  background:linear-gradient(130deg, var(--deck-primary), var(--deck-secondary) 55%, var(--deck-tertiary))}
.sm{position:relative; flex:1; background:#fff; border-radius:1.4cqw; padding:3.8cqw 4cqw; display:flex; flex-direction:column;
  box-shadow:0 2.4cqw 4.8cqw -2.4cqw rgba(10,12,31,.45)}
.sm-kick{margin:0; font-family:var(--deck-font-mono); font-size:1.3cqw; letter-spacing:.2em; text-transform:uppercase; color:var(--deck-primary)}
.sm-title{margin:1.4cqw 0 0; white-space:nowrap; font-family:var(--deck-font-display); font-weight:800; font-size:5.4cqw; letter-spacing:-0.045em; line-height:1}
.sm-title .g{background:linear-gradient(90deg, var(--deck-primary), var(--deck-secondary) 60%, var(--deck-tertiary)); -webkit-background-clip:text; background-clip:text; color:transparent}
.sm-tag{margin:2.8cqw 0 0; display:flex; flex-direction:column; gap:.9cqw}
.sm-tag i{display:block; height:1.5cqw; width:58cqw; border-radius:1cqw; background:#2a2c44}
.sm-tag i + i{width:38cqw}
.flow{display:flex; align-items:center; gap:1.1cqw; margin-top:3.8cqw}
.flow em{font-style:normal; font-size:1.8cqw; color:var(--deck-text-muted)}
/* Each step holds two skeleton lines, centred like its label would be. */
.st{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8cqw; height:6.6cqw; border-radius:1cqw; background:var(--sc); --sk:rgba(255,255,255,.85)}
.st i{display:block; width:62%; height:.9cqw; border-radius:1cqw; background:var(--sk)}
.st i + i{width:40%; opacity:.6}
.st.s1{--sc:var(--deck-primary)}
.st.s2{--sc:color-mix(in srgb, var(--deck-primary) 45%, var(--deck-secondary))}
.st.s3{--sc:var(--deck-secondary)}
.st.s4{--sc:color-mix(in srgb, var(--deck-secondary) 50%, var(--deck-tertiary))}
.st.s5{--sc:var(--deck-tertiary); --sk:rgba(10,12,31,.7)}
.sm-list{list-style:none; margin:4.4cqw 0 0; padding:0; display:flex; flex-direction:column; gap:1.9cqw}
.sm-list li{display:flex; align-items:center; gap:1cqw}
.sm-list li::before{content:""; width:.6cqw; height:.6cqw; border-radius:50%; background:linear-gradient(135deg, var(--deck-primary), var(--deck-secondary))}
.sm-list b{width:9cqw; height:1.1cqw; border-radius:1cqw; background:#2a2c44}
.sm-list i{width:var(--w, 34cqw); height:1cqw; border-radius:1cqw; background:#e3e1ec}
.sm-list li:nth-child(2) i{--w:42cqw}
.sm-list li:nth-child(3) b{width:7cqw}
.sm-list li:nth-child(3) i{--w:26cqw}
.sm-pg{position:absolute; right:4cqw; bottom:2.6cqw; font-family:var(--deck-font-mono); font-size:1cqw; color:var(--deck-text-faint, #9a9cb0)}
.p1{--pc:var(--deck-primary)} .p2{--pc:var(--deck-secondary)} .p3{--pc:var(--deck-tertiary)}

/* ── Markdown docs: the contents, a title card, and lines drawn in ─────── */
.sc-docs{flex-direction:row; gap:3cqw; background:linear-gradient(120deg, #f6f3ff, #fff3f6); color:var(--deck-text)}
.toc{flex:0 0 18cqw; display:flex; flex-direction:column; gap:1.3cqw; padding-top:1cqw}
.toc b{font-family:var(--deck-font-mono); font-size:1.2cqw; letter-spacing:.16em; text-transform:uppercase; color:var(--deck-text-muted)}
.toc i{height:.9cqw; border-radius:1cqw; background:#e4e2f0; width:80%}
.toc i:first-of-type{background:var(--deck-primary); width:90%}
.sheet{flex:1; background:#fff; border-radius:1.4cqw; padding:2.4cqw; box-shadow:0 2cqw 4cqw -2cqw rgba(10,12,31,.18); display:flex; flex-direction:column; gap:1.3cqw}
.tcard{background:var(--deck-inverse-sheet); color:#fff; border-radius:1.2cqw; padding:2cqw; margin-bottom:.6cqw}
.tcard small{display:block; font-family:var(--deck-font-mono); font-size:1.1cqw; letter-spacing:.18em; text-transform:uppercase; color:#b9a6ff}
.tcard b{font-family:var(--deck-font-display); font-size:3.4cqw; letter-spacing:-0.04em}
.line{height:1cqw; margin:0; border-radius:1cqw; background:#e9eaf0; transform-origin:left}
.sc-docs.on .line{animation:grow-x .7s var(--deck-ease-out) both; animation-delay:calc(var(--i) * 110ms + 120ms)}
@keyframes grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.w90{width:90%} .w75{width:75%} .w82{width:82%} .w88{width:88%} .w60{width:60%} .w78{width:78%}
.h2{margin:1cqw 0 0; font-family:var(--deck-font-display); font-weight:700; font-size:2.3cqw; letter-spacing:-0.02em; padding-left:1.4cqw; border-left:.45cqw solid var(--deck-secondary)}

/* ── Once it's sent: the link unfurls in a chat, a click, the gate opens,
   then the stats. About 6.5 s; it rests on the stats. ──────────────────── */
.sc-sent{padding:0}
.sn{position:absolute; inset:0; padding:6cqw 7cqw; display:flex; flex-direction:column}
.sn-chat{padding:0; background:#fff; color:#1d1c1d; opacity:0}
.sn-gate{background:linear-gradient(130deg, var(--deck-primary), var(--deck-secondary) 55%, var(--deck-tertiary)); align-items:center; justify-content:center; opacity:0}
.sn-land{padding:3cqw 0 0; align-items:center; overflow:hidden;
  background:linear-gradient(130deg, var(--deck-primary), var(--deck-secondary) 55%, var(--deck-tertiary))}
.sc-sent.on .sn-chat{animation:sn-chat 6.6s linear both}
.sc-sent.on .sn-gate{animation:sn-gate 6.6s linear both}
.sc-sent.on .sn-land{animation:sn-land 6.6s var(--deck-ease-out) both}
@keyframes sn-chat{0%{opacity:0}4%{opacity:1}34%{opacity:1}39%{opacity:0}100%{opacity:0}}
@keyframes sn-gate{0%,35%{opacity:0; transform:scale(1.04)}40%{opacity:1; transform:none}70%{opacity:1}75%{opacity:0}100%{opacity:0}}
@keyframes sn-land{0%,71%{opacity:0; transform:translateY(3cqw)}78%,100%{opacity:1; transform:none}}

/* A team chat, in the look of a Slack channel: workspace sidebar, the
   channel, a message whose link unfurls into the preview card. */
.slack{display:grid; grid-template-columns:17cqw 1fr; height:100%; font-size:1.45cqw}
.sl-side{background:#3f0e40; color:rgba(255,255,255,.72); padding:2.4cqw 1.6cqw; display:flex; flex-direction:column; gap:.7cqw}
.sl-ws{color:#fff; font-size:1.8cqw; margin-bottom:1.4cqw}
.sl-h{margin:1.2cqw 0 .2cqw; font-size:1.15cqw; text-transform:uppercase; letter-spacing:.08em; opacity:.6}
.sl-side span{display:flex; align-items:center; gap:.8cqw; padding:.35cqw .8cqw; border-radius:.6cqw}
.sl-side span.on{background:#1164a3; color:#fff; font-weight:700}
.sl-dot{width:.9cqw; height:.9cqw; border-radius:50%; background:#2bac76}
.sl-dot.away{background:none; box-shadow:inset 0 0 0 .2cqw rgba(255,255,255,.6)}
.sl-main{display:flex; flex-direction:column; min-width:0}
.sl-top{display:flex; align-items:baseline; gap:1.2cqw; padding:1.8cqw 2.6cqw; border-bottom:1px solid #e8e8e8}
.sl-top b{font-size:1.7cqw}
.sl-top small{font-size:1.15cqw; color:#616061}
.sl-feed{flex:1; padding:2.2cqw 2.6cqw; overflow:hidden}
.sl-msg{display:flex; gap:1.4cqw; align-items:flex-start}
.av{flex:none; width:3.8cqw; height:3.8cqw; border-radius:.8cqw; display:grid; place-items:center; color:#fff; font-weight:800; font-size:1.3cqw; background:linear-gradient(135deg, var(--deck-primary), var(--deck-secondary))}
.sl-body{min-width:0}
.sl-body p{margin:0}
.sl-who{display:flex; align-items:baseline; gap:.9cqw}
.sl-who time{font-size:1.1cqw; color:#616061}
.unfurl{margin-top:1cqw; border-left:.35cqw solid #dddddd; padding-left:1.4cqw}
.u-site{font-size:1.15cqw; color:#616061}
.u-title{font-weight:700; color:#1264a3; margin:.2cqw 0 .8cqw !important}
.sl-react{display:flex; gap:.7cqw; margin-top:1cqw !important}
.sl-react span{font-size:1.15cqw; padding:.25cqw .9cqw; border-radius:99px; background:#f1f1f1; box-shadow:inset 0 0 0 1px #e1e1e1}
.sl-react span:first-child{background:#e8f5fa; box-shadow:inset 0 0 0 1px #1d9bd1; color:#1264a3}
.sl-input{margin:0 2.6cqw 2.2cqw; padding:1.2cqw 1.6cqw; border:1px solid #c7c7c7; border-radius:1cqw; color:#868686; font-size:1.3cqw}
.u-card{aspect-ratio:1200/630; width:30cqw; border-radius:1cqw; padding:2cqw 2.4cqw; display:flex; flex-direction:column; color:#fff;
  background:linear-gradient(var(--deck-inverse-sheet), var(--deck-inverse-sheet)) padding-box, linear-gradient(120deg, var(--deck-primary), var(--deck-secondary), var(--deck-tertiary)) border-box;
  border:1cqw solid transparent}
.u-card small{font-family:var(--deck-font-mono); font-size:1cqw; letter-spacing:.18em; text-transform:uppercase; color:#b9a6ff}
.u-card b{font-family:var(--deck-font-display); font-weight:800; font-size:3.4cqw; letter-spacing:-0.045em; margin-top:.6cqw}
.u-card span{margin-top:auto; display:flex; align-items:center; gap:.7cqw; font-size:1.1cqw; color:rgba(255,255,255,.7); padding-top:1cqw; border-top:1px solid rgba(255,255,255,.12)}
.u-card .mm{width:1.5cqw; height:1.3cqw}
/* The pointer comes in, clicks the card, and the gate takes over. Its
   resting place is the card's middle. */
.cursor{position:absolute; width:3.4cqw; height:3.4cqw; left:42cqw; top:27cqw; fill:#fff; stroke:#1d1c1d; stroke-width:1.6; stroke-linejoin:round; opacity:0;
  filter:drop-shadow(0 .4cqw .6cqw rgba(10,12,31,.3))}
.sc-sent.on .cursor{animation:cursor 6.6s var(--deck-ease-out) both}
@keyframes cursor{
  0%,14%{opacity:0; transform:translate(22cqw, 18cqw)}
  18%{opacity:1}
  25%{opacity:1; transform:none}
  28%{transform:scale(.8)}
  31%{transform:none}
  35%,100%{opacity:0; transform:none}
}
.sc-sent.on .u-card{animation:u-click 6.6s both}
@keyframes u-click{0%,27%{transform:none}29%{transform:scale(.97)}32%,100%{transform:none}}

.gate{width:42cqw; background:#fff; border-radius:2cqw; overflow:hidden; box-shadow:0 3cqw 6cqw -2cqw rgba(10,12,31,.5); color:var(--deck-text)}
.gate-top{background:var(--deck-inverse-sheet); color:#fff; padding:2.6cqw 3cqw 2cqw; display:flex; flex-direction:column; gap:.6cqw}
.gate-top small{font-family:var(--deck-font-mono); font-size:1.1cqw; letter-spacing:.18em; text-transform:uppercase; color:#b9a6ff}
.gate-top b{font-family:var(--deck-font-display); font-weight:800; font-size:3.6cqw; letter-spacing:-0.04em}
.gate-top span{display:flex; align-items:center; gap:.8cqw; margin-top:.8cqw; padding-top:1.2cqw; border-top:1px solid rgba(255,255,255,.12); font-size:1.3cqw; color:rgba(255,255,255,.7)}
.gate-top .mm{width:1.8cqw; height:1.5cqw}
.gate-bottom{padding:2.4cqw 3cqw 3cqw; display:flex; flex-direction:column; gap:1.2cqw}
.gate-bottom small{font-family:var(--deck-font-mono); font-size:1.1cqw; letter-spacing:.14em; text-transform:uppercase; color:var(--deck-text-muted)}
.field{height:4.4cqw; border:1px solid var(--deck-primary); border-radius:1cqw; display:flex; align-items:center; gap:1cqw; padding:0 1.6cqw; box-shadow:0 0 0 .5cqw color-mix(in srgb, var(--deck-primary) 18%, transparent)}
.field i{width:1.1cqw; height:1.1cqw; border-radius:50%; background:var(--deck-text); opacity:0}
.sc-sent.on .field i{animation:dot .01s both; animation-delay:calc(var(--i) * 120ms + 2900ms)}
@keyframes dot{to{opacity:1}}
.btn{height:4.4cqw; border-radius:1cqw; background:var(--deck-text); color:#fff; display:grid; place-items:center; font-weight:600; font-size:1.6cqw; overflow:hidden}
.btn span{grid-area:1/1}
.btn .open{opacity:0}
.sc-sent.on .btn{animation:okbg .4s both 4.15s}
.sc-sent.on .btn .lock{animation:out .3s both 4.15s}
.sc-sent.on .btn .open{animation:in .3s both 4.25s}
@keyframes okbg{to{background:var(--deck-success-edge, #12805c)}}
@keyframes out{to{opacity:0; transform:translateY(-1.5cqw)}}
@keyframes in{from{opacity:0; transform:translateY(1.5cqw)}to{opacity:1; transform:none}}

/* Behind the password: the landing page, its title card and what it holds. */
/* Styled after the real one (deck.css, .title-card and .folder-card), at the
   slide's scale: gradient ground, dark title card, white sheet of cards. */
.ld-col{width:66cqw; display:flex; flex-direction:column; gap:1.6cqw}
.ld-card{border-radius:1.2cqw; padding:2.6cqw 3.4cqw; background:var(--deck-inverse-sheet); color:#fff; display:flex; flex-direction:column; gap:1cqw}
.ld-card small{font-family:var(--deck-font-mono); font-size:1.1cqw; letter-spacing:.2em; text-transform:uppercase; color:var(--deck-primary)}
.ld-card b{font-family:var(--deck-font-display); font-weight:800; font-size:4.2cqw; letter-spacing:-0.045em; line-height:.98}
.ld-sheet{list-style:none; margin:0; padding:3cqw 3.6cqw 6cqw; border-radius:1.2cqw 1.2cqw 0 0; background:#fff; display:flex; flex-direction:column; gap:1.1cqw;
  box-shadow:0 0 0 1px var(--deck-sheet-border)}
.ld-item{--pc:var(--deck-primary); --pc2:color-mix(in srgb, var(--deck-secondary) 18%, var(--deck-primary));
  position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; gap:1.5cqw; padding:1.6cqw 1.9cqw; border-radius:1.1cqw;
  color:#fff; background:linear-gradient(120deg, var(--pc), var(--pc2)); box-shadow:0 1.6cqw 3.6cqw -2.4cqw var(--pc)}
.ld-item.k-doc{--pc:var(--deck-secondary); --pc2:color-mix(in srgb, var(--deck-tertiary) 18%, var(--deck-secondary))}
.ld-item.k-link{--pc:color-mix(in srgb, var(--deck-tertiary) 30%, var(--deck-secondary)); --pc2:color-mix(in srgb, var(--deck-tertiary) 46%, var(--deck-secondary))}
.ld-n{font-family:var(--deck-font-mono); font-size:1.15cqw; opacity:.7; width:2cqw}
.ld-badge{flex:none; display:grid; place-items:center; width:4.4cqw; height:4.4cqw; border-radius:.9cqw;
  background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.ld-item svg{width:2.3cqw; height:2.3cqw; fill:currentColor; flex:none; opacity:.85}
.ld-badge svg{opacity:1}
.ld-body{display:flex; flex-direction:column; gap:.2cqw; min-width:0; flex:1}
.ld-body small{font-family:var(--deck-font-mono); font-size:1cqw; letter-spacing:.14em; text-transform:uppercase; opacity:.8}
.ld-body b{font-family:var(--deck-font-display); font-weight:700; font-size:1.85cqw; letter-spacing:-0.02em; line-height:1.2}
.ld-body em{font-style:normal; font-size:1.3cqw; opacity:.85}
.ld-ghost{position:absolute; right:4cqw; top:50%; transform:translateY(-50%) rotate(-12deg); z-index:-1; opacity:.13; display:flex}
.ld-ghost svg{width:11cqw; height:11cqw; opacity:1}
.sc-sent.on .ld-item{animation:in .5s var(--deck-ease-out) both; animation-delay:calc(var(--i) * 150ms + 5300ms)}

/* ── Agents: a terminal types a push by Claude ─────────────────────────── */
.sc-agents{background:radial-gradient(120% 90% at 0% 0%, #1b1f45, #0a0c1f); justify-content:center; align-items:center}
.term{width:72cqw; border-radius:1.6cqw; background:#05060f; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 3cqw 6cqw -2cqw rgba(0,0,0,.7); overflow:hidden; font-family:var(--deck-font-mono); font-size:1.7cqw}
.t-bar{display:flex; align-items:center; gap:.8cqw; padding:1.3cqw 1.8cqw; background:#11142b; color:var(--deck-inverse-faint); font-size:1.2cqw}
.t-bar i{width:1.1cqw; height:1.1cqw; border-radius:50%; background:#2a2f5a}
.t-bar span{margin-left:auto}
.t-line{margin:0; padding:.5cqw 2cqw; white-space:nowrap; color:#e8e6ff}
.t-line:nth-of-type(1){padding-top:2cqw}
.t-line:last-child{padding-bottom:2.4cqw}
.t-line span{display:inline-block; overflow:hidden; vertical-align:bottom; max-width:60ch}
.t-line.ok span::before{content:"✓ "; color:#57e3a6}
.sc-agents.on .l1 span{animation:type 1.2s steps(50) both .5s}
.sc-agents.on .l2 span{animation:type .5s steps(26) both 1.9s}
.sc-agents.on .l3 span{animation:type .5s steps(24) both 2.6s}
.sc-agents.on .l4 span{animation:type .1s both 3.2s}
@keyframes type{from{max-width:0}to{max-width:60ch}}
.caret{display:inline-block; width:.9cqw; height:1.8cqw; vertical-align:middle; background:#b9a6ff; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ── Backups: copies travel to the cloud ───────────────────────────────── */
.sc-backup{justify-content:center; align-items:center; gap:4cqw}
.vault{display:flex; align-items:center; gap:3cqw}
.node{display:flex; flex-direction:column; align-items:center; gap:1.2cqw; font-family:var(--deck-font-mono); font-size:1.4cqw; color:var(--deck-inverse-muted)}
.node svg{width:12cqw; height:12cqw; fill:none; stroke:#fff; stroke-width:2.2}
.node:last-child svg{stroke:#b9a6ff}
.wire{position:relative; width:26cqw; height:2px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 1cqw, transparent 1cqw 2cqw)}
.wire i{position:absolute; top:50%; left:0; width:1.6cqw; height:1.6cqw; margin-top:-.8cqw; border-radius:.4cqw; background:linear-gradient(135deg, var(--deck-primary), var(--deck-secondary)); opacity:0}
.sc-backup.on .wire i{animation:carry 1.6s var(--deck-ease-out) infinite}
.sc-backup.on .wire i:nth-child(2){animation-delay:.5s}
.sc-backup.on .wire i:nth-child(3){animation-delay:1s}
@keyframes carry{0%{left:0; opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 1.6cqw); opacity:0}}
.pill{margin:0; display:flex; align-items:center; gap:1cqw; padding:1.2cqw 2.2cqw; border-radius:99px; background:rgba(87,227,166,.12); color:#9bf0c9; font-family:var(--deck-font-mono); font-size:1.5cqw}
.pill i{width:1.1cqw; height:1.1cqw; border-radius:50%; background:#57e3a6; box-shadow:0 0 0 .5cqw rgba(87,227,166,.2)}

/* ── The end: the tools I build, and a place for the next one ──────────── */
.sc-end{justify-content:center}
.tools{display:grid; grid-template-columns:repeat(3, 1fr); gap:2.4cqw; margin-top:1cqw}
.tool{display:flex; flex-direction:column; align-items:flex-start; gap:.8cqw; padding:2.6cqw; border-radius:2cqw;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.tool img, .tool .deck-icon{width:9cqw; height:9cqw; border-radius:2cqw; margin-bottom:1.2cqw; box-shadow:0 1.6cqw 3cqw -1.6cqw rgba(0,0,0,.6)}
.tool img.pixel{image-rendering:pixelated}
.tool b{font-family:var(--deck-font-display); font-weight:800; font-size:2.6cqw; letter-spacing:-0.03em}
.tool small{font-size:1.45cqw; line-height:1.35; color:var(--deck-inverse-muted); min-height:4cqw}
.tool span{margin-top:auto; padding-top:1cqw; font-family:var(--deck-font-mono); font-size:1.15cqw; letter-spacing:.06em; color:#b9a6ff}
a.tool{text-decoration:none; color:inherit; transition:transform .2s var(--deck-ease-out), box-shadow .2s}
a.tool:hover{transform:translateY(-.4cqw); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
a.tool:hover span{color:#fff}
.tool.next{background:none; box-shadow:none; border:.25cqw dashed rgba(255,255,255,.28)}
.tool.next i{display:grid; place-items:center; width:9cqw; height:9cqw; border-radius:2cqw; margin-bottom:1.2cqw; font-style:normal; font-size:5cqw; font-weight:300; color:#fff;
  background:linear-gradient(135deg, color-mix(in srgb, var(--deck-primary) 35%, transparent), color-mix(in srgb, var(--deck-secondary) 35%, transparent))}

/* ── Phones and narrow windows: the slide on top, the words under it ──── */
@media (max-width: 900px){
  /* Snapping centres each stop in what's left under the slide. Proximity, not
     mandatory: with the slide on top, mandatory snapping pulled the page off
     its opening before the slide's height was known. */
  html{scroll-padding-top:var(--stage-h, 0px); scroll-snap-type:y proximity}
  .about{grid-template-columns:minmax(0, 1fr); gap:0}
  /* The slide stays at the top; the words scroll under it, hidden behind a
     solid ground with a short fade at its edge. */
  /* The top padding clears the bar (brand and button) with room to breathe. */
  .stage-wrap{grid-column:1; grid-row:1; z-index:5; height:auto; top:0; padding:84px 16px 14px; margin:0 -16px;
    background:var(--deck-inverse-sheet)}
  .stage-wrap::after{content:""; position:absolute; left:0; right:0; top:100%; height:28px; background:linear-gradient(var(--deck-inverse-sheet), transparent); pointer-events:none}
  .copy{grid-row:2}
  .stop{min-height:calc(100vh - var(--stage-h, 300px)); padding:32px 0}
  .stop.hero{padding-top:24px}
  /* Content scrolls under the bar: it needs its own ground here. */
  .top{background:var(--deck-inverse-sheet); padding-top:14px; padding-bottom:14px}
  .dots{margin-top:12px}
  body{font-size:16px}
}

/* Motion off: every scene shows its last frame, nothing moves, and the
   page jumps between stops instead of gliding. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sc, .sc *, .stop > *, .cue i{animation:none !important; transition:none !important}
  .sc .a, .sc .drop, .field i, .btn .open{opacity:1}
  .sn-chat, .sn-gate, .cursor{display:none}
  .t-line span{max-width:60ch}
  .btn .lock{display:none}
}