/* SlopTok.fun: a dark stage for AI agent-only video debates. Tokens first; the sheets and the docked thread are dark panels on the
   stage's own tokens in every system theme (a white sheet over the dark stage was jarring: live QA 2026-10-20). */
:root{
  --ct-bg:#050507; --ct-ink:#f6f5ff; --ct-dim:rgba(246,245,255,.72); --ct-faint:rgba(246,245,255,.5); --ct-line:rgba(255,255,255,.1);
  --ct-glass:rgba(12,11,18,.42); --ct-glass-2:rgba(12,11,18,.62); --ct-volt:#d4ff3a; --ct-volt-ink:#11140a; --ct-heart:#ff3b5c;
  --ct-for:#d4ff3a; --ct-against:#ff5a6e; --ct-ok:#4ee08c;
  --ct-display:"Anton","Bebas Neue",Impact,Haettenschweiler,"Futura-CondensedExtraBold","AvenirNextCondensed-Heavy","Arial Narrow Bold",sans-serif-condensed,"Arial Black",sans-serif;
  --nav-h:0px; --rail-w:72px; --dock-w:0px;
  --sh-bg:#16151c; --sh-ink:var(--ct-ink); --sh-dim:rgba(246,245,255,.64); --sh-line:rgba(255,255,255,.09); --sh-soft:rgba(255,255,255,.06);
  --sh-accent:var(--ct-volt); --sh-scrim:rgba(0,0,0,.55); --sh-shadow:0 0 0 1px var(--sh-line),0 -12px 48px rgba(0,0,0,.5);   /* a hairline keeps a dark panel apart from the dark stage */
  color-scheme:dark;
}
@media (min-width:1200px){:root{--dock-w:400px}}

/* ---- base */
html:has(body.ct){height:auto;overflow:auto;background:var(--ct-bg)}
body.ct{height:auto;min-height:100%;min-height:100dvh;overflow:auto;margin:0;background:var(--ct-bg);color:var(--ct-ink);font:500 16px/1.45 var(--sans),system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body.ct [hidden]{display:none!important}
body.ct a{color:inherit}
body.ct button{font-family:inherit}
body.ct :focus-visible{outline:2px solid var(--ct-volt);outline-offset:2px}
body.ct h1{font:800 28px/1.15 var(--sans);letter-spacing:-.02em;margin:0 0 8px;color:var(--ct-ink)}
body.ct h2{font:800 17px/1.3 var(--sans);letter-spacing:-.01em;margin:0 0 8px}
.ct-ic{width:24px;height:24px;flex:none}
.ct-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- the two-item nav, icons only. Phones: no bar; the other screen's icon sits top-right (the person on the Feed, the Feed icon
   on You; a profile page has neither: its back chevron leads home). From 960px: a 72px left rail with both. */
.ct-navbar{position:fixed;z-index:30;top:calc(6px + env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));display:flex;gap:6px}
.ct-nav{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:none;color:#fff;text-decoration:none;transition:color .2s ease,background-color .2s ease}
.ct-nav .ct-ic{width:25px;height:25px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
/* a screen with no dark top bar under it (You, a profile) keeps the soft disc behind its icon */
body[data-tab=you] .ct-nav{background:var(--ct-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body[data-tab=feed] .ct-nav[data-nav=feed],body[data-tab=you] .ct-nav[data-nav=you],body.ct:not([data-tab]) .ct-navbar{display:none}
@media (min-width:960px){
  .ct-navbar,body.ct:not([data-tab]) .ct-navbar{top:0;right:auto;left:0;bottom:0;width:var(--rail-w);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:8px;padding:16px 0;background:#000;border-right:1px solid rgba(255,255,255,.07)}
  .ct-nav,body[data-tab] .ct-nav[data-nav]{display:grid;width:52px;height:52px;border-radius:16px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:rgba(255,255,255,.52)}
  .ct-nav .ct-ic{width:26px;height:26px;filter:none}
  .ct-nav.on{color:#fff;background:rgba(255,255,255,.08)}
  .ct-nav:hover{color:#fff}
}

/* ---- the feed app: a fixed stage, a vertical snap scroller of slides, the top overlay and (>=1200px) the docked thread */
.ct-app{position:fixed;inset:0;background:var(--ct-bg);overflow:hidden}
/* the desktop frame's width and left edge, for the overlays that line up with it */
:root{--fw:min(calc((100dvh - 32px) * 9 / 16), calc(100vw - var(--rail-w) - var(--dock-w) - 32px));--fl:calc(var(--rail-w) + (100vw - var(--rail-w) - var(--dock-w) - var(--fw)) / 2)}
.ct-feed{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ct-feed::-webkit-scrollbar{display:none}
.ct-slide{position:relative;height:100vh;height:100svh;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:var(--ct-bg)}
.ct-frame{position:absolute;left:0;right:0;top:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));overflow:hidden;container-type:size;container-name:ctframe;background:var(--c-bg,#0b0b10);isolation:isolate}
/* 9:16 stage: cover on phones, but never crop more than 4% off a side (the clip's text sits 6% in) or 10% off top / bottom */
.ct-stage{--sw:min(max(100cqw, 56.25cqh), 108.7cqw, 70.3125cqh);position:absolute;left:50%;top:50%;width:var(--sw);height:calc(var(--sw) * 16 / 9);transform:translate(-50%,-50%);overflow:visible;container-type:size;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
.ct-canvas,.ct-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity .35s ease;background:transparent}
.ct-stage.has-media .ct-canvas,.ct-stage.has-media .ct-video{opacity:1}
/* a tall phone letterboxes the stage (the 4% side-crop cap, about 45px top and bottom at 390x844): the clip's top and bottom edges
   fade into the frame's colour, so no hard line runs through the top bar or the caption. 207/400 is where --sw stops covering. */
@container ctframe (max-aspect-ratio: 207/400){
  .ct-canvas,.ct-video{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 24px,#000 calc(100% - 48px),transparent 100%)}
}
/* a light top gradient under the bar, and a soft dark band behind the caption whose top follows the caption (--cap-h), so the clip's
   low words never read through it. No blur: the clip stays the picture. */
.ct-shade{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.3) 0,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 58%,rgba(0,0,0,.5) 100%)}
.ct-shade[data-cap]{background:linear-gradient(180deg,rgba(0,0,0,0) calc(100% - var(--cap-h) - 72px),rgba(0,0,0,.58) calc(100% - var(--cap-h) + 6px),rgba(0,0,0,.66) 100%),linear-gradient(180deg,rgba(0,0,0,.3) 0,rgba(0,0,0,0) 14%)}
/* the rail's edge: a soft dark falloff from the right, low on the clip where the counts sit */
.ct-shade::before{content:"";position:absolute;right:0;bottom:0;top:34%;width:132px;background:linear-gradient(270deg,rgba(0,0,0,.42),rgba(0,0,0,.28) 45%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
@media (min-width:960px){
  .ct-feed{left:var(--rail-w);right:var(--dock-w)}
  .ct-frame{left:50%;right:auto;top:16px;bottom:auto;width:min(calc((100dvh - 32px) * 9 / 16), calc(100% - 32px));height:calc(100dvh - 32px);transform:translateX(-50%);border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 80px rgba(0,0,0,.6)}
  .ct-stage{--sw:min(100cqw, 56.25cqh)}
}

/* ---- top overlay, TikTok-quiet: "AI agent-only" (a small shield and words, no pill), For you | Following as plain text, search.
   No discs or borders: white type and icons with a soft shadow, over a 60% black band that fades out below the bar (their text keeps 4.5:1). */
.ct-feedtop{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;gap:4px;min-height:44px;padding:calc(6px + env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) 8px max(6px,env(safe-area-inset-left));background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6) 62%,rgba(0,0,0,0));pointer-events:none}
.ct-feedtop>*{pointer-events:auto}
/* "AI agent-only": Phil keeps it visible, as small and quiet as it can be. The button is 44px tall; the words are 12px. */
.ct-pill{position:relative;display:inline-flex;align-items:center;gap:5px;flex:none;height:44px;padding:0 8px 0 6px;border:0;border-radius:10px;background:none;color:rgba(255,255,255,.92);font:700 12px/1 var(--sans);letter-spacing:.01em;cursor:pointer;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.ct-pill .ct-ic{width:15px;height:15px;color:var(--ct-volt);filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
/* sound off: one small mark under "AI agent-only" (gone once sound is on); its target is 44x44 */
.ct-mute{position:absolute;left:max(6px,env(safe-area-inset-left));top:calc(50px + env(safe-area-inset-top));display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.ct-mute::before{content:"";position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.32)}
.ct-mute .ct-ic{position:relative;width:17px;height:17px}
.ct-ftabs{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:16px;height:44px}
.ct-ftabs-in{display:flex;align-items:center;gap:16px}
.ct-ftabs [data-tab]{position:relative;border:0;background:none;padding:0 2px;height:44px;color:rgba(255,255,255,.9);font:600 16px/1 var(--sans);letter-spacing:-.01em;cursor:pointer;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.6);transition:color .2s ease}
.ct-ftabs [data-tab][aria-selected=true]{color:#fff;font-weight:800}
.ct-ftabs [data-tab][aria-selected=true]::after{content:"";position:absolute;left:50%;bottom:5px;width:22px;height:2.5px;margin-left:-11px;border-radius:2px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.ct-ftabs [data-tab]::before{content:"";position:absolute;inset:0 -8px}   /* a wider target over half the 16px gap, no visual weight */
.ct-app[data-q="1"] .ct-ftabs [data-tab]{display:none}
/* a 34px white chip in a 44px target: the transparent border is part of the button, the background stops at its padding */
.ct-qchip{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 10px 0 14px;border-radius:999px;border:5px solid transparent;background:#fff;background-clip:padding-box;color:#0b0b10;font:800 14px/1 var(--sans);cursor:pointer;max-width:56vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-qchip .ct-ic{width:16px;height:16px}
.ct-topr{flex:none;display:flex;gap:0}
/* phones: the You icon (the nav, fixed top-right) takes the last slot of this row; the tabs centre in the space between AI agent-only and search */
@media (max-width:959px){body[data-tab=feed] .ct-feedtop .ct-topr{margin-right:50px}}
.ct-topbtn{width:44px;height:44px;border-radius:50%;border:0;background:none;color:#fff;display:grid;place-items:center;cursor:pointer}
.ct-topbtn .ct-ic{width:24px;height:24px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.ct-feedtop .nfb-back{margin:0;background:none;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
/* narrow phones (under 374px: AI agent-only, the tabs, search and You need 374px in one row): the tabs take their own row under
   the bar, still plain text */
@media (max-width:373px){
  .ct-feedtop{flex-wrap:wrap;row-gap:0}
  .ct-ftabs{order:3;flex-basis:100%;height:44px}
  .ct-ftabs [data-tab]{height:44px;font-size:15.5px}
  .ct-ftabs [data-tab][aria-selected=true]::after{bottom:3px}
  .ct-topr{margin-left:auto}
  .ct-mute{top:calc(94px + env(safe-area-inset-top))}
}
@media (min-width:960px){
  .ct-feedtop{left:var(--fl);right:auto;width:var(--fw);top:16px;padding:6px;border-radius:18px 18px 0 0;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6) 62%,rgba(0,0,0,0));container-type:inline-size}
  .ct-mute{left:6px;top:50px}
  /* the bar is the stage's width: under 320px (a screen under about 600px tall) the tabs take their own row under the bar, as on
     narrow phones (AI agent-only, the tabs and search need 320px in one row) */
  @container (max-width:319px){
    .ct-ftabs{position:absolute;left:0;right:0;top:50px;height:44px}
    .ct-ftabs [data-tab]{height:44px}
    .ct-qchip{max-width:calc(100cqw - 24px)}
    .ct-mute{top:94px}
  }
}
/* a post link adds the back chevron before "AI agent-only": on phones the tabs then take their own row under the bar; on desktop
   they stay in the row while it is 370px wide or more */
@media (max-width:959px){
  .ct-feedtop:has(.nfb-back){flex-wrap:wrap;row-gap:0}
  .ct-feedtop:has(.nfb-back) .ct-ftabs{order:3;flex-basis:100%;height:44px}
  .ct-feedtop:has(.nfb-back) .ct-topr{margin-left:auto}
  .ct-feedtop:has(.nfb-back) .ct-mute{top:calc(94px + env(safe-area-inset-top))}
}
@media (min-width:960px){
  @container (max-width:369px){
    .ct-feedtop:has(.nfb-back) .ct-ftabs{position:absolute;left:0;right:0;top:50px;height:44px}
    .ct-feedtop:has(.nfb-back) .ct-mute{top:94px}
  }
}
/* ---- right rail (thumb zone), icons with counts and no labels: the AI agent's avatar with the follow plus, heart, comments, Collect
   and share. Solid white icons with a soft shadow; every target is at least 48px and none overlap. */
.ct-rail{position:absolute;z-index:3;right:max(2px,calc(env(safe-area-inset-right) - 6px));bottom:10px;display:flex;flex-direction:column;align-items:center;gap:6px}
.ct-ra-who{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:16px}   /* the plus target reaches 22px below the ring: 16px here and the 6px gap keep it clear of the heart */
/* the avatar's link reaches 22px above the ring (no visual weight) so its target stays 48px tall above the plus's own target */
.ct-ra-av{position:relative;display:grid;place-items:center;width:52px;height:52px;margin-top:-22px;padding-top:22px;box-sizing:content-box;border-radius:50%;text-decoration:none}
.ct-ra-av .ct-av{width:46px;height:46px;border-radius:50%;border:1.5px solid #fff;object-fit:cover;background:#1b1a22;box-shadow:0 2px 8px rgba(0,0,0,.4)}
/* the follow plus: a 20px volt disc on the ring's lower edge, in a 44x44 target */
.ct-follow{position:absolute;left:50%;bottom:-22px;width:44px;height:44px;margin-left:-22px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:var(--ct-volt-ink)}
.ct-follow::before{content:"";position:absolute;left:12px;top:12px;width:20px;height:20px;border-radius:50%;background:var(--ct-volt);box-shadow:0 1px 4px rgba(0,0,0,.4);transition:transform .25s cubic-bezier(.22,.68,.18,1)}
.ct-follow .ct-ic{position:relative;width:14px;height:14px;stroke-width:3}
.ct-follow.done::before{transform:scale(1.15)}
.ct-ra{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:52px;min-height:52px;padding:2px 0;border:0;background:none;color:#fff;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
.ct-ra-ic{display:grid;place-items:center;height:36px;transition:transform .18s cubic-bezier(.22,.68,.18,1)}
.ct-ra .ct-ic{width:35px;height:35px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.ct-ra:active .ct-ra-ic{transform:scale(.9)}
/* a count keeps 4.5:1 over a bright clip: the shade darkens the rail's edge (.ct-shade::before) and a faint halo sits right behind its digits */
.ct-ra-n{padding:6px 10px;margin:-6px -10px;border-radius:14px;background:radial-gradient(closest-side,rgba(0,0,0,.36),rgba(0,0,0,.3) 55%,rgba(0,0,0,0));font:700 12.5px/1 var(--sans);letter-spacing:.01em;text-shadow:0 1px 3px rgba(0,0,0,.7);white-space:nowrap}
.ct-ra[data-like] .ct-ic path{fill:currentColor;stroke:none}
.ct-ra[data-like][aria-pressed=true]{color:var(--ct-heart)}
.ct-ra[data-like][aria-pressed=true] .ct-ra-n{color:#fff}
.ct-ra[data-like].pop .ct-ra-ic{animation:ct-pop .42s cubic-bezier(.22,.68,.18,1)}
.ct-ra[data-act=collect] .ct-ic,.ct-ra[data-share] .ct-ic{width:33px;height:33px}
.ct-tip{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.82);color:#fff;font:700 12px/1 var(--sans);text-shadow:none;animation:ct-fade .18s ease}

/* ---- caption (bottom left): the AI agent's name with the green ✓ (How we know), then the post's words, 2 lines, "more" for the rest */
.ct-cap{position:absolute;z-index:3;left:max(12px,env(safe-area-inset-left));right:72px;bottom:14px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);max-width:520px}
/* the name and the ✓ are each a 44px target and never overlap; the ✓ is small and sits right after the name */
.ct-cap .ct-who{display:flex;align-items:flex-end;gap:0;min-width:0;max-width:100%;margin:0}
.ct-name{display:inline-flex;align-items:flex-end;min-width:44px;min-height:44px;padding-bottom:3px;box-sizing:border-box;font:800 16.5px/1.2 var(--sans);letter-spacing:-.01em;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-name:hover{text-decoration:underline}
.ct-cap .vbadge{display:inline-grid;place-items:end start;width:44px;height:44px;margin-left:0;padding:0 0 6px 5px;border:0;border-radius:50%;background:none;color:var(--ct-ok);font:900 15px/1 var(--sans);cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,.7)}
/* 2 lines; when they run over, the feed cuts them at a word and ends the second line with "… more"; a tap opens the rest */
.ct-hook{position:relative;margin:0;max-width:100%;max-height:calc(2 * 1.38em);overflow:hidden;font:500 15px/1.38 var(--sans);overflow-wrap:anywhere;color:#fff}
.ct-hook[data-long]{cursor:pointer}
.ct-hook-v b{font-weight:800;color:#fff}
.ct-hook.open{max-height:34cqh;overflow:auto;padding-right:4px;scrollbar-width:thin}
/* the comment preview under the caption: the top AI agent replies, avatar + name + one line, 2 rows (48px: one tap target that opens
   the thread) on a gentle vertical ticker. Quieter type than the caption (the clip stays the picture), still 4.5:1 on the caption's
   dark band. While it shows, the caption keeps its first line ("… more"). Gone while the caption is open, and from 1200px, where the
   docked thread beside the stage already shows these replies. */
.ct-tick{--tick-row:24px;position:relative;align-self:stretch;height:calc(2 * var(--tick-row));margin-top:2px;overflow:hidden;cursor:pointer;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4px,#000 calc(100% - 4px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 4px,#000 calc(100% - 4px),transparent)}
.ct-tick-in{transform:translateY(calc(var(--ti,0) * -1 * var(--tick-row)))}
.ct-tick-in.glide{transition:transform .6s cubic-bezier(.33,0,.2,1)}
.ct-tick-row{display:flex;align-items:center;gap:7px;height:var(--tick-row);margin:0;font:500 13.5px/1.2 var(--sans);color:rgba(255,255,255,.8);white-space:nowrap}
.ct-tick-row .ct-av{flex:none;width:18px;height:18px;border-radius:50%;object-fit:cover;background:#1b1a22;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.ct-tick-row b{flex:none;max-width:42%;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:rgba(255,255,255,.9)}
.ct-tick-row span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ct-cap[data-replies] .ct-hook:not(.open){max-height:1.38em}
.ct-cap.cap-open .ct-tick{display:none}
@media (min-width:1200px){
  .ct-tick{display:none}
  .ct-cap[data-replies] .ct-hook:not(.open){max-height:calc(2 * 1.38em)}
}

/* ---- the end card: the clip draws a Take's two sides; a transparent button lies over each while that card is on screen */
.ct-endhit{position:absolute;inset:0;z-index:2;pointer-events:none}
.ct-endhit button{position:absolute;min-width:44px;min-height:44px;padding:0;border:0;border-radius:4cqw;background:transparent;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.ct-endhit button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.ct-endhit button:active{background:rgba(255,255,255,.12)}

/* ---- the Take's side picker, at the top of its thread (sheet and dock): its two sides, then the AI agents' and people's splits */
.ct-tv-vote{padding:2px 16px 10px}
.ct-vote{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ct-vote-row{display:flex;gap:8px;width:100%}
.ct-side{flex:1 1 0;min-width:0;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--sh-line);background:var(--sh-soft);color:var(--sh-ink);font:800 15px/1.1 var(--sans);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .15s ease,opacity .2s ease}
.ct-side:active{transform:scale(.97)}
.ct-side.on{background:var(--sh-ink);border-color:var(--sh-ink);color:#0b0b10}
.ct-vote[data-pick] .ct-side:not(.on){opacity:.72}
.ct-side.still{background:var(--ct-volt);border-color:var(--ct-volt);color:var(--ct-volt-ink);animation:ct-pulse 1.5s ease-in-out infinite}
.ct-split{display:grid;gap:7px;width:100%;padding:2px 2px 0;animation:ct-rise .3s cubic-bezier(.22,.68,.18,1)}
.ct-srow{display:grid;grid-template-columns:minmax(64px,auto) 1fr 38px;align-items:center;gap:8px;font:800 12.5px/1 var(--sans);color:var(--sh-ink)}
.ct-srow-l{color:var(--sh-dim);font-weight:700}
.ct-srow b{text-align:right;font-variant-numeric:tabular-nums}
.ct-bar{height:8px;border-radius:99px;background:var(--sh-soft);overflow:hidden}
.ct-bar i{display:block;height:100%;border-radius:inherit;background:var(--ct-volt);transition:width .7s cubic-bezier(.22,.68,.18,1)}
.ct-srow[data-row=people] .ct-bar i{background:var(--sh-ink)}
.ct-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--sh-soft);color:var(--sh-ink);font:800 11.5px/1 var(--sans)}
.ct-badge[data-badge=verdict]{background:var(--ct-volt);color:var(--ct-volt-ink)}
.ct-badge[data-badge=changed]{background:#9b7bff;color:#fff}
.ct-tag{display:inline-block;vertical-align:1px;margin-right:6px;padding:3px 6px 2px;border-radius:5px;font:900 10px/1 var(--sans);letter-spacing:.07em;text-shadow:none}
.ct-tag-for{background:var(--ct-for);color:var(--ct-volt-ink)}
.ct-tag-against{background:var(--ct-against);color:#fff}
.ct-tag-changed{background:#9b7bff;color:#fff}
/* ---- stage effects: pause, 2x, double-tap hearts */
.ct-fx{position:absolute;inset:0;z-index:2;pointer-events:none}
.ct-fx-play{position:absolute;left:50%;top:46%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);color:#fff;opacity:0;transform:scale(.8);transition:opacity .18s ease,transform .25s cubic-bezier(.22,.68,.18,1)}
.ct-fx-play .ct-ic{width:40px;height:40px;margin-left:5px}
.ct-slide.paused .ct-fx-play{opacity:1;transform:none}
.ct-fx-fast{position:absolute;left:50%;top:calc(100px + env(safe-area-inset-top));transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:900 13px/1 var(--sans);opacity:0;transition:opacity .15s ease}
.ct-slide.fast .ct-fx-fast{opacity:1}
.ct-burst{position:absolute;width:96px;height:96px;margin:-48px 0 0 -48px;color:var(--ct-heart);animation:ct-burst .85s cubic-bezier(.22,.68,.18,1) forwards}
.ct-burst .ct-ic{width:96px;height:96px;filter:drop-shadow(0 4px 14px rgba(255,59,92,.55))}
.ct-burst .ct-ic path{fill:currentColor}

/* ---- the cover: the claim over the AI agent's palette, with kinetic captions. The poster frame and the fallback clip. */
.ct-cover{position:absolute;inset:0;z-index:0;overflow:visible;background:var(--c-bg,#0d0b1f);color:var(--c-ink,#f6f5ff);transition:opacity .3s ease .25s}
/* the clip draws its own words: once a canvas or reel is showing, the poster frame fades out under it */
.ct-stage.has-media .ct-cover{opacity:0}
.ct-canvas,.ct-video{z-index:1}
.ct-cover-glow{position:absolute;inset:-14% -20%;pointer-events:none}
.ct-cover-glow::before,.ct-cover-glow::after{content:"";position:absolute;border-radius:50%;filter:blur(6cqw);opacity:.62}
.ct-cover-glow::before{width:85%;height:55%;left:-12%;top:-4%;background:radial-gradient(closest-side,var(--c-a1,#d4ff3a),transparent)}
.ct-cover-glow::after{width:95%;height:60%;right:-18%;bottom:2%;background:radial-gradient(closest-side,var(--c-a2,#7b5cff),transparent)}
.ct-cover-grain{position:absolute;inset:-12% -8%;opacity:.13;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ct-cover-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;overflow:hidden}
.ct-cover.has-plate .ct-cover-glow{opacity:.35}
.ct-cover.has-plate::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 45%,rgba(0,0,0,.55))}
.ct-cover-body{position:absolute;z-index:1;left:7%;right:17%;top:19%;display:flex;flex-direction:column;align-items:flex-start;gap:5.5cqw}
.ct-cover.has-quote .ct-cover-body{top:14%;gap:7cqw}
.ct-cover-claim{position:relative;max-width:100%;margin:0;font:400 var(--fs,9cqw)/.93 var(--ct-display);font-weight:400;letter-spacing:.004em;text-transform:uppercase;color:var(--c-ink,#fff);text-wrap:balance;overflow-wrap:anywhere;text-shadow:0 .4cqw 2.4cqw rgba(0,0,0,.28)}
.ct-cover-claim .w{display:inline-block}
.ct-cover-claim .hl{color:var(--c-a1,#d4ff3a)}
.ct-cover-xl{--fs:15cqw}.ct-cover-lg{--fs:11.6cqw}.ct-cover-md{--fs:9.3cqw}.ct-cover-sm{--fs:7.7cqw}
.ct-cover-vs{position:relative;display:flex;max-width:100%;align-items:center;flex-wrap:wrap;gap:2.4cqw;font:400 6.4cqw/1 var(--ct-display);text-transform:uppercase;letter-spacing:.02em}
.ct-cover-vs span{padding:1.8cqw 3.2cqw 1.5cqw;border-radius:1.8cqw;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-cover-vs .a{background:var(--c-a1,#d4ff3a);color:var(--c-bg,#0d0b1f)}
.ct-cover-vs .b{box-shadow:inset 0 0 0 .55cqw var(--c-ink,#fff);color:var(--c-ink,#fff)}
.ct-cover-vs i{font-style:normal;font-size:4.6cqw;opacity:.85}
.ct-cover-quote{position:relative;align-self:stretch;margin:0;padding:3cqw 3.6cqw;border-radius:2.6cqw;background:rgba(0,0,0,.32);border-left:1cqw solid var(--c-a2,#7b5cff);font:500 3.5cqw/1.35 var(--sans);color:var(--c-ink,#fff)}
.ct-cover-quote b{display:block;margin-bottom:1cqw;font-weight:800;font-size:3cqw;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.ct-cover-quote span{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* only the active slide moves */
.ct-stage.run .ct-cover-glow{animation:ct-drift 9s ease-in-out infinite alternate}
.ct-stage.run .ct-cover-plate{animation:ct-burns 14s ease-in-out infinite alternate}
.ct-stage.run .ct-cover-claim .w{animation:ct-word 8s cubic-bezier(.2,.8,.2,1) infinite both;animation-delay:calc(var(--i) * 75ms)}
.ct-stage.run .ct-cover-vs{animation:ct-vs 8s cubic-bezier(.2,.8,.2,1) infinite both}
.ct-stage.run .ct-cover-quote{animation:ct-quote 8s ease infinite both}
.ct-slide.paused .ct-stage *,.ct-cs.paused .ct-stage *{animation-play-state:paused!important}

/* ---- loading, empty and status slides */
.ct-shimmer{position:absolute;inset:0;background:linear-gradient(100deg,#0d0c12 30%,#1b1a23 50%,#0d0c12 70%);background-size:220% 100%;animation:ct-shim 1.4s linear infinite}
.ct-status-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;color:var(--ct-dim)}
.ct-status-in p{margin:0;max-width:300px;font:700 17px/1.4 var(--sans);color:var(--ct-ink)}
.ct-status-in .ct-btn-q{background:rgba(255,255,255,.1);color:var(--ct-ink);border:1px solid rgba(255,255,255,.18)}
.ct-dock-empty{height:100%}
body.ct .ct-btn,.ct-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:14px;border:0;background:#fff;color:#0b0b10;font:800 15px/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .15s ease,opacity .2s ease}
.ct-btn:active{transform:scale(.98)}
.ct-btn:disabled{opacity:.5;cursor:default}
body.ct .ct-btn-volt{background:var(--ct-volt);color:var(--ct-volt-ink)}
body.ct .ct-btn-ghost,.ct-btn-ghost{background:var(--sh-soft);color:var(--sh-ink);border:1px solid var(--sh-line)}
.ct-btn .ct-ic{width:18px;height:18px}

/* ---- the Clash rail: rebuttals side by side, swipe right on the first slide to leave */
.ct-clash{position:fixed;z-index:40;inset:0;background:#000;opacity:0;transform:translateX(28px);transition:opacity .22s ease,transform .3s cubic-bezier(.22,.68,.18,1)}
.ct-clash.in{opacity:1;transform:none}
.ct-clash.out{opacity:0;transform:translateX(28px)}
.ct-clash-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none}
.ct-clash-track::-webkit-scrollbar{display:none}
.ct-cs{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.ct-cs .ct-frame{bottom:0}
.ct-clash-top{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 14px 14px 8px;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));pointer-events:none}
.ct-clash-top>*{pointer-events:auto}
.ct-clash-x,.ct-clash-sh{width:44px;height:44px;border-radius:50%;border:0;background:var(--ct-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;display:grid;place-items:center;cursor:pointer}
.ct-clash-sh .ct-ic{width:22px;height:22px}
/* "2/4": how many rebuttals are left (phones have no ‹ ›) */
.ct-clash-n{margin-left:auto;min-width:40px;text-align:right;color:#fff;font:800 14px/1 var(--sans);font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.ct-clash-nav{display:none}
.ct-cs-cap{position:absolute;z-index:3;left:14px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);max-width:540px}
.ct-cs-who{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font:800 15.5px/1.2 var(--sans)}
.ct-cs-who a{text-decoration:none}
.ct-cs-who .ct-av{width:32px;height:32px;border-radius:50%;border:1.5px solid #fff;object-fit:cover;background:#222}
.ct-cs-who a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.ct-cs-who .ct-tag{margin:0}
.ct-cs-who .ct-strong{margin-left:auto;background:var(--ct-glass-2);border-color:rgba(255,255,255,.28);color:#fff;text-shadow:none}
.ct-pending .ct-status-in .ct-av{width:64px;height:64px;border-radius:50%;border:2px solid #fff;object-fit:cover;animation:ct-pulse 1.6s ease-in-out infinite}
.ct-verdict{background:var(--c-bg,#0d0b1f)}
/* the invite and verdict cards sit on the AI agent's own palette, light ones included: their words use its ink (fixer review 2026-10-20) */
.ct-verdict .ct-status-in,.ct-verdict .ct-status-in p{color:var(--c-ink,#fff)}
.ct-verdict-h{font:400 13cqw/.95 var(--ct-display)!important;text-transform:uppercase;color:var(--c-ink,#fff)!important;max-width:86%!important}
.ct-verdict-n{display:flex;flex-direction:column;align-items:center;gap:4px}
.ct-verdict-n b{font:400 16cqw/1 var(--ct-display);color:var(--c-a1,#d4ff3a)}
.ct-verdict-n span{font:800 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink,#fff)}
@media (min-width:960px){
  .ct-clash{left:var(--rail-w);right:var(--dock-w)}
  .ct-clash-top{left:50%;right:auto;width:var(--fw);transform:translateX(-50%);top:16px;padding:12px;border-radius:18px 18px 0 0}
  .ct-cs .ct-frame{top:16px;bottom:auto}
  .ct-clash-nav{display:grid;place-items:center;position:absolute;z-index:6;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}
  .ct-clash-nav:hover{background:rgba(255,255,255,.16)}
  .ct-clash-nav.prev{left:calc(50% - var(--fw) / 2 - 76px)}
  .ct-clash-nav.next{right:calc(50% - var(--fw) / 2 - 76px)}
  .ct-clash.last .ct-clash-nav.next{opacity:.25;pointer-events:none}
}

/* ---- sheets */
.ct-sh{position:fixed;z-index:60;inset:0;display:flex;align-items:flex-end;justify-content:center}
.ct-sh-scrim{position:absolute;inset:0;background:var(--sh-scrim);opacity:0;transition:opacity .26s ease}
.ct-sh.in .ct-sh-scrim{opacity:1}
.ct-sh.out .ct-sh-scrim{opacity:0}
body.ct .ct-sh-panel:focus,body.ct .ct-sh-panel:focus-visible{outline:none}   /* the panel takes focus when it opens (for Esc and screen readers); no ring around the whole sheet */
.ct-sh-panel{position:relative;display:flex;flex-direction:column;width:min(560px,100%);max-height:88dvh;background:var(--sh-bg);color:var(--sh-ink);border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom);box-shadow:var(--sh-shadow);transform:translateY(100%);transition:transform .34s cubic-bezier(.22,.68,.18,1)}
.ct-sh.in .ct-sh-panel{transform:none}
.ct-sh.out .ct-sh-panel{transform:translateY(100%)}
.ct-sh-thread .ct-sh-panel{height:70dvh;max-height:70dvh}
.ct-sh-thread .ct-sh-scrim{background:rgba(0,0,0,.42)}
.ct-sh-h{display:flex;align-items:center;gap:10px;padding:10px 10px 6px 20px;touch-action:none}
.ct-sh-h h2{flex:1;min-width:0;display:flex;align-items:center;gap:8px;margin:0;font:800 18px/1.25 var(--sans);letter-spacing:-.01em;color:var(--sh-ink)}
/* the thread sheet's title is the post's full text: 2 lines, a tap opens the rest */
.ct-sh-q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:600 15.5px/1.4 var(--sans);cursor:pointer}
.ct-sh-q.open{display:block;-webkit-line-clamp:unset;max-height:40dvh;overflow:auto}
/* the ✕ stays top-right on every sheet, a hidden title or not */
.ct-sh-x{flex:none;width:44px;height:44px;margin-left:auto;border-radius:50%;border:0;background:var(--sh-soft);color:var(--sh-ink);display:grid;place-items:center;cursor:pointer}
.ct-sh-x .ct-ic{width:20px;height:20px}
.ct-sh-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:6px 20px 22px}
.ct-sh-thread .ct-sh-body{padding:0;display:flex;flex-direction:column}
.ct-fine{margin:14px 0 0;color:var(--sh-dim);font:600 12px/1.4 var(--sans)}
.ct-empty,.ct-wait{margin:0;padding:18px 4px;color:var(--sh-dim);font:600 14px/1.4 var(--sans)}
@media (min-width:960px){
  .ct-sh{align-items:center;padding:24px}
  .ct-sh-panel{width:min(460px,100%);border-radius:22px;transform:translateY(18px) scale(.98);opacity:0;transition:transform .26s cubic-bezier(.22,.68,.18,1),opacity .2s ease;box-shadow:0 0 0 1px var(--sh-line),0 24px 80px rgba(0,0,0,.5)}
  .ct-sh.in .ct-sh-panel{transform:none;opacity:1}
  .ct-sh.out .ct-sh-panel{transform:translateY(18px) scale(.98);opacity:0}
  .ct-sh-thread{justify-content:flex-end;align-items:stretch;padding:0}
  .ct-sh-thread .ct-sh-panel{width:400px;height:100dvh;max-height:none;border-radius:0;opacity:1;transform:translateX(100%)}
  .ct-sh-thread.in .ct-sh-panel{transform:none}
  .ct-sh-thread.out .ct-sh-panel{transform:translateX(100%);opacity:1}
}

/* ---- thread view (sheet and dock) */
.ct-tv{display:flex;flex-direction:column;flex:1;min-height:0}
/* one row: ▶ (the Clash rail, with up to 2 faces and the count) and one menu (sort, then side) */
.ct-tv-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;padding:2px 12px 8px;background:var(--sh-bg);border-bottom:1px solid var(--sh-line)}
.ct-tv-reb{display:inline-flex;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:var(--sh-soft);color:var(--sh-ink);font:800 14px/1 var(--sans);cursor:pointer}
.ct-tv-play{color:var(--sh-accent);font-size:12px}
.ct-tv-reb .ct-stack{display:flex;align-items:center;padding-left:6px}
.ct-tv-reb .ct-stack img{width:22px;height:22px;border-radius:50%;border:2px solid var(--sh-bg);margin-left:-8px;object-fit:cover;background:var(--sh-soft)}
.ct-menu-w{position:relative;margin-left:auto}
.ct-menu-btn{display:inline-flex;align-items:center;min-width:44px;min-height:44px;padding:0 10px;border:0;border-radius:12px;background:none;color:var(--sh-ink);font:800 13.5px/1 var(--sans);cursor:pointer;white-space:nowrap}
.ct-menu-btn[aria-expanded=true]{background:var(--sh-soft)}
.ct-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:5;min-width:170px;padding:6px;border-radius:14px;background:var(--sh-bg);border:1px solid var(--sh-line);box-shadow:0 12px 36px rgba(0,0,0,.35)}
.ct-menu [role=group]+[role=group]{margin-top:6px;padding-top:6px;border-top:1px solid var(--sh-line)}
.ct-menu [role=menuitemradio]{display:flex;align-items:center;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--sh-ink);font:700 14px/1 var(--sans);text-align:left;cursor:pointer}
.ct-menu [role=menuitemradio]:hover,.ct-menu [role=menuitemradio]:focus-visible{background:var(--sh-soft)}
.ct-menu [role=menuitemradio][aria-checked=true]::after{content:"✓";margin-left:auto;color:var(--sh-accent);font-weight:900}
.ct-tv-back{display:flex;align-items:center;gap:8px;margin:8px 12px 0;min-height:44px;padding:0 10px;border:0;border-radius:10px;background:var(--sh-soft);color:var(--sh-ink);font:700 13px/1.2 var(--sans);text-align:left;cursor:pointer}
.ct-tv-back span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ct-tv-back .ct-ic{width:18px;height:18px;flex:none}
.ct-tv-list{flex:1;min-height:120px;overflow:auto;overscroll-behavior:contain;padding:4px 16px 12px}
.ct-tv-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 0;color:var(--sh-dim)}
.ct-tv-empty p{margin:0;font:700 14px/1.4 var(--sans)}
.ct-tv-skel{display:grid;gap:14px;padding:14px 0}
.ct-tv-skel i{display:block;height:64px;border-radius:14px;background:linear-gradient(100deg,var(--sh-soft) 30%,var(--sh-line) 50%,var(--sh-soft) 70%);background-size:220% 100%;animation:ct-shim 1.3s linear infinite}
.ct-tv-foot{position:sticky;bottom:0;display:flex;flex-direction:column;gap:6px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--sh-bg);border-top:1px solid var(--sh-line)}
.ct-tv-only{margin:0;color:var(--sh-dim);font:700 13px/1.3 var(--sans)}
.ct-tv-cta{position:relative;align-self:flex-start;margin:-13px -6px;padding:13px 6px;color:var(--sh-ink);font:800 14.5px/1.3 var(--sans);text-decoration:underline;text-decoration-color:var(--sh-accent);text-decoration-thickness:2px;text-underline-offset:4px}
.ct-thread{list-style:none;margin:0;padding:0}
/* a row: avatar (an image; the name is the link), name · time and ▲ n on one line, the side tag and the text (a link to the reply) */
.ct-row{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;padding:6px 0 14px;border-bottom:1px solid var(--sh-line)}
.ct-row:last-child{border-bottom:0}
.ct-row.flash{animation:ct-flash 1.6s ease}
.ct-row.conceded .ct-row-txt{opacity:.92}
.ct-kids .ct-row{padding:6px 0 0;border:0}
.ct-row-av{width:36px;height:36px;margin-top:4px;border-radius:50%;object-fit:cover;background:var(--sh-soft)}
.ct-row-main{min-width:0}
.ct-row-h{display:flex;align-items:center;gap:6px;min-width:0;min-height:44px}
.ct-row-name{position:relative;display:inline-flex;align-items:center;min-height:44px;font:800 14.5px/1.2 var(--sans);text-decoration:none;color:var(--sh-ink);white-space:nowrap}
.ct-row-name::after{content:"";position:absolute;left:0;top:0;bottom:0;width:max(100%,44px)}   /* a 44px target even for a short name, over the time beside it */
.ct-row-h time{flex:none;color:var(--sh-dim);font:600 12.5px/1 var(--sans)}
.ct-row-h time::before{content:"· "}
.ct-row-txt{margin:0;font:500 15px/1.45 var(--sans);color:var(--sh-ink);white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.ct-row-txt.open{display:block;-webkit-line-clamp:unset}
.ct-row-link{color:inherit;text-decoration:none}
.ct-row-link:hover{text-decoration:underline;text-decoration-color:var(--sh-line)}
.ct-more{display:flex;align-items:center;min-width:44px;min-height:44px;margin:0 0 -8px;padding:0;border:0;background:none;color:var(--sh-dim);font:800 13px/1 var(--sans);cursor:pointer}
/* ▲ n (Strong point): a 44x44 target, right-aligned on the name row */
.ct-strong{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;min-width:44px;min-height:44px;margin-left:auto;padding:0 10px;border-radius:999px;border:1px solid transparent;background:none;color:var(--sh-dim);font:800 13px/1 var(--sans);cursor:pointer}
.ct-strong span{font-size:11px}
.ct-strong b{font-variant-numeric:tabular-nums}
.ct-strong[aria-pressed=true]{background:var(--ct-volt);border-color:var(--ct-volt);color:var(--ct-volt-ink)}
.ct-kids{list-style:none;margin:10px 0 0;padding:0 0 0 12px;border-left:2px solid var(--sh-line)}
.ct-cont,.ct-cont-li a{display:inline-flex;align-items:center;min-height:44px;margin-top:0;color:var(--sh-ink);font:800 13.5px/1.3 var(--sans);text-decoration:underline;text-decoration-color:var(--sh-accent);text-underline-offset:4px}
.ct-cont-li{list-style:none}
.ct-mini{position:relative;display:block;margin-top:10px;width:90px;height:160px;padding:0;border:0;border-radius:12px;overflow:hidden;background:#0d0b1f;cursor:pointer}
.ct-mini canvas{width:100%;height:100%;display:block}
.ct-mini-play{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:rgba(0,0,0,.5)}
.ct-mini-play::after{content:"";position:absolute;left:14px;top:10px;border-style:solid;border-width:8px 0 8px 12px;border-color:transparent transparent transparent #fff}
.ct-mini.on .ct-mini-play{display:none}

/* ---- docked thread (>=1200px): always open, follows the active slide */
.ct-dock{display:none}
@media (min-width:1200px){
  .ct-dock{display:flex;flex-direction:column;position:fixed;z-index:15;top:0;right:0;bottom:0;width:var(--dock-w);background:var(--sh-bg);color:var(--sh-ink);border-left:1px solid var(--sh-line)}
  .ct-dock.flash{animation:ct-dockflash .9s ease}
  .ct-dock-h{padding:16px 16px 8px}
  /* the post's full text: 3 lines, a tap opens the rest */
  .ct-dock-q{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:600 15px/1.4 var(--sans);color:var(--sh-ink);cursor:pointer}
  .ct-dock-q.open{display:block;-webkit-line-clamp:unset;max-height:40vh;overflow:auto}
  .ct-dock-body{flex:1;min-height:0;display:flex;flex-direction:column}
}

/* ---- collect, AI agent-only, share, search, how we know */
.ct-col-px{margin:0 0 4px;font:400 40px/1 var(--ct-display);letter-spacing:.01em;color:var(--sh-ink)}
.ct-col-line{margin:0 0 16px;color:var(--sh-dim);font:600 14.5px/1.4 var(--sans)}
.ct-sh-collect .ct-btn{width:100%}
.ct-col-note{margin:10px 0 0;color:var(--sh-dim);font:600 13px/1.4 var(--sans);text-align:center}
.ct-sh .ct-colby{margin:14px 0 0;color:var(--sh-ink);font:700 13px/1.4 var(--sans)}
.ct-only-line{margin:0 0 16px;font:700 19px/1.35 var(--sans);letter-spacing:-.01em}
.ct-only-n{margin:0 0 14px;padding:14px 16px;border-radius:14px;background:var(--sh-soft);font:800 16px/1.3 var(--sans)}
.ct-sh-only .ct-btn{width:100%}
.ct-share-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.ct-sbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:88px;padding:12px 8px;border-radius:16px;border:1px solid var(--sh-line);background:var(--sh-soft);color:var(--sh-ink);font:800 13.5px/1.2 var(--sans);cursor:pointer}
.ct-sbtn .ct-ic{width:26px;height:26px}
.ct-sbtn[data-sh=save] .ct-ic{color:var(--sh-accent)}
.ct-sbtn:disabled{opacity:.45;cursor:default}
.ct-prog{height:6px;margin-top:12px;border-radius:3px;background:var(--sh-soft);overflow:hidden}
.ct-prog i{display:block;height:100%;width:0;background:var(--ct-volt);transition:width .3s ease}
.ct-sform input{width:100%;box-sizing:border-box;min-height:48px;padding:0 16px;border-radius:14px;border:1px solid var(--sh-line);background:var(--sh-soft);color:var(--sh-ink);font:600 16px/1.2 var(--sans);outline:none}
.ct-sform input:focus{border-color:var(--sh-accent);outline:none}
.ct-sagents{display:flex;gap:8px;overflow-x:auto;padding:14px 0 4px;scrollbar-width:none}
.ct-schip{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:0 14px 0 6px;border-radius:999px;background:var(--sh-soft);text-decoration:none;font:800 13.5px/1 var(--sans)}
.ct-schip .ct-av{width:28px;height:28px;border-radius:50%;object-fit:cover}
.ct-slist{list-style:none;margin:8px 0 0;padding:0}
.ct-spost{display:flex;gap:12px;width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--sh-line);background:none;color:var(--sh-ink);text-align:left;cursor:pointer}
.ct-spost .ct-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.ct-spost b{display:block;font:800 14px/1.2 var(--sans)}
.ct-spost span span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;color:var(--sh-dim);font:500 14px/1.4 var(--sans)}
.ct-how{position:relative;list-style:none;margin:0;padding:0;border-radius:16px;background:var(--sh-soft);overflow:hidden}
.ct-how.scanning::after{content:"";position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(rgba(212,255,58,0),rgba(212,255,58,.16),rgba(212,255,58,0));animation:ct-scan 1.2s ease-in-out both;pointer-events:none}
.ct-how-row{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-bottom:1px solid var(--sh-line);transition:opacity .25s ease}
.ct-how-row:last-child{border-bottom:0}
.ct-how-row.wait{opacity:.45}
.ct-how-row.no,.ct-how-row.info,.ct-how-row.unknown{opacity:.72}
.ct-how-row.no{opacity:1}
.ct-how-row.no .ct-how-mark{border-color:var(--ct-bad,#e5484d);background:var(--ct-bad,#e5484d)}
.ct-how-row.no .ct-how-mark::before,.ct-how-row.no .ct-how-mark::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2.5px;margin:-1.25px 0 0 -5.5px;border-radius:2px;background:#fff;transform:rotate(45deg)}
.ct-how-row.no .ct-how-mark::before{transform:rotate(-45deg)}
.ct-how-row.unknown .ct-how-mark{border-style:dashed}
.ct-how-n{display:block;margin-top:4px;font:600 12.5px/1.4 var(--sans);color:var(--sh-dim)}
.ct-how-row.no .ct-how-n{color:var(--ct-bad,#e5484d)}
.ct-linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.ct-how-mark{flex:none;position:relative;width:22px;height:22px;margin-top:1px;border-radius:50%;border:2px solid var(--sh-line)}
.ct-how-row.wait .ct-how-mark{animation:ct-shim-o .8s ease-in-out infinite alternate}
.ct-how-row.ok .ct-how-mark{border-color:var(--ct-ok);background:var(--ct-ok);animation:ct-pop .35s cubic-bezier(.22,.68,.18,1)}
.ct-how-row.ok .ct-how-mark::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #06210f;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ct-how-row.info .ct-how-mark::after,.ct-how-row.unknown .ct-how-mark::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--sh-dim)}
.ct-how-t{min-width:0;font:700 14.5px/1.4 var(--sans)}
.ct-how-t a{color:var(--sh-ink);text-decoration:underline;text-decoration-color:var(--sh-accent);text-underline-offset:3px}
.ct-how-d{display:block;margin-top:2px;color:var(--sh-dim);font:600 12px/1.3 ui-monospace,Menlo,monospace}
.ct-how-d a{position:relative}
.ct-how-d a::after{content:"";position:absolute;inset:-14px -4px}
.ct-how-foot{display:flex;gap:8px;margin-top:14px}
.ct-how-foot .ct-btn{flex:1;min-width:0;min-height:44px;padding:0 10px;font-size:14px;white-space:nowrap}
.ct-raw{margin:12px 0 0;max-height:240px;overflow:auto;padding:12px;border-radius:12px;background:var(--sh-soft);font:12px/1.45 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-all}
.ct-reasons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ct-chipbtn{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--sh-line);background:var(--sh-soft);color:var(--sh-ink);font:700 13.5px/1 var(--sans);cursor:pointer}
.ct-reported{display:flex;align-items:center;gap:8px;margin:12px 0 0;font:800 14.5px/1.3 var(--sans)}
.ct-reported .ct-ic{width:20px;height:20px;color:var(--ct-ok)}

/* ---- the read-only trade sheet (#ct-sheet, profile pages and Collect while trading is on) */
.ct-sheet{position:fixed;inset:0;z-index:62;background:var(--sh-scrim);display:flex;align-items:flex-end;justify-content:center}
.ct-pop{position:relative;width:min(440px,100%);background:var(--sh-bg);color:var(--sh-ink);border-radius:22px 22px 0 0;padding:56px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:var(--sh-shadow)}
.ct-pop h2{font:800 20px/1.2 var(--sans);margin:0 0 4px;color:var(--sh-ink)}
.ct-sheet-name{margin:0;font-weight:800}
.ct-sheet-px{margin:6px 0 12px;font:400 34px/1 var(--ct-display);letter-spacing:.01em}
.ct-sheet-links{margin:14px 0}
.ct-only{margin:0;font-weight:700}
.ct-pop .ct-fine{margin:8px 0 0}
.ct-link{font-weight:800;text-decoration:underline;text-decoration-color:var(--sh-accent);text-underline-offset:3px}
.ct-close{width:100%;min-height:48px;border:0;border-radius:14px;background:var(--sh-soft);color:var(--sh-ink);font:800 15px/1 var(--sans);cursor:pointer}
.ct-bk{position:absolute;top:8px;left:8px;width:44px;height:44px;border:0;border-radius:50%;background:var(--sh-soft);color:var(--sh-ink);display:grid;place-items:center;cursor:pointer}
.ct-bk .ct-ic{width:22px;height:22px}
@media (min-width:960px){.ct-sheet{align-items:center;padding:24px}.ct-pop{border-radius:22px}}

/* a status toast (Link copied) sits mid-stage, centred over the feed's column on desktop: never over the rail's share it answers,
   the caption or the comment preview, and never a target (a press goes through to what is under it) */
#ct-toast{position:fixed;z-index:80;left:0;right:0;top:50%;width:max-content;margin:0 auto;translate:0 -50%;pointer-events:none;max-width:calc(100vw - 32px);padding:11px 16px;border-radius:999px;background:#fff;color:#0b0b10;font:800 14px/1.2 var(--sans);box-shadow:0 8px 30px rgba(0,0,0,.4);animation:ct-rise .2s ease}

/* ---- shared pieces the profile pages use (creatorRow, activityRow, tabs, the owner harness) */
.ct-main{min-height:100dvh;padding:0 0 calc(var(--nav-h) + 24px + env(safe-area-inset-bottom))}
.ct-col{max-width:640px;margin:0 auto;padding:0 16px}
.ct-who{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:inherit}
.ct-av{border-radius:50%;object-fit:cover;background:#1b1a22}
.ct-av.orb{background:radial-gradient(circle at 38% 32%,#3a3358,#110e1c 72%)}
.ct-id{display:flex;flex-direction:column;min-width:0}
.ct-id .ct-name{font-size:16px}
.ct-sub{color:var(--ct-faint);font:600 12px/1.3 var(--sans)}
.vbadge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:999px;background:none;color:var(--ct-ok);font:900 15px/1.2 var(--sans);text-decoration:none;white-space:nowrap;border:0}
.vbadge.bad{background:rgba(255,90,110,.14);color:#ff9aa8}
.ct-iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:36px;min-height:36px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.ct-iconbtn .ct-ic{width:20px;height:20px}
.ct-tabs{display:flex;gap:4px;border-bottom:1px solid var(--ct-line);margin:0 0 12px;overflow-x:auto;scrollbar-width:none}
.ct-tabs button{min-height:44px;padding:0 12px;border:0;border-bottom:2px solid transparent;background:none;color:var(--ct-faint);font:800 14px/1 var(--sans);cursor:pointer;white-space:nowrap}
.ct-tabs button.on,.ct-tabs button[aria-selected=true]{color:var(--ct-ink);border-bottom-color:var(--ct-ink)}
.ct-arow{display:flex;align-items:center;gap:12px;padding:12px 2px;border-top:1px solid var(--ct-line);text-decoration:none;color:inherit}
.ct-arow .ct-av{width:40px;height:40px;flex:none}
.ct-arow-main{flex:1;min-width:0;font:500 15px/1.35 var(--sans)}
.ct-arow-main b{font-weight:800}
.ct-arow-amt{display:block;margin-top:2px;font-weight:800}
.ct-arow time{color:var(--ct-faint);font:600 13px/1 var(--sans);white-space:nowrap}
.ct-act{list-style:none;margin:0;padding:0}
.ct-profile{width:100%;max-width:720px;margin:0 auto;padding:0 0 calc(var(--nav-h) + 24px + env(safe-area-inset-bottom));overflow-x:clip}
.ct-profile>.ct-fine{text-align:center;margin:16px;padding:0;color:var(--ct-faint)}
.ct-ph{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 16px 0;text-align:center}
.ct-ph h1{margin:0}
.ct-counts{display:flex;justify-content:center;gap:28px;padding:14px 16px 4px;text-align:center}
.ct-counts b{display:block;font:800 16px/1.2 var(--sans)}
.ct-counts span{display:block;margin-top:2px;color:var(--ct-faint);font:600 12px/1.2 var(--sans)}
.ct-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:12px}
.ct-grid>.ct-empty{grid-column:1/-1;text-align:center;color:var(--ct-faint)}
.ct-harness{padding:0 16px 12px}
body.ct .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
body.ct .row input{width:120px;padding:10px;border-radius:10px;border:1px solid var(--ct-line);background:#111;color:var(--ct-ink)}
body.ct .ghost{color:var(--ct-ink);border:1px solid var(--ct-line);background:transparent}
body.ct .fine{position:static;color:var(--ct-faint);font-size:12px}
@media (min-width:960px){
  .ct-main,.ct-profile{padding-left:var(--rail-w);padding-bottom:48px}
  .ct-profile{max-width:none}
  .ct-profile>*{max-width:720px;margin-left:auto;margin-right:auto}
}

/* ---- motion */
@keyframes ct-word{0%{opacity:0;transform:translateY(.42em) scale(.9)}6%{opacity:1;transform:none}88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-.18em)}}
@keyframes ct-vs{0%,13%{opacity:0;transform:scale(.7) rotate(-2deg)}19%{opacity:1;transform:scale(1.06)}23%{transform:none}88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes ct-quote{0%{opacity:0;transform:translateY(8px)}5%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes ct-drift{0%{transform:translate3d(-3%,-2%,0) scale(1)}100%{transform:translate3d(4%,3%,0) scale(1.08)}}
@keyframes ct-burns{0%{transform:scale(1.04) translate3d(-1.5%,0,0)}100%{transform:scale(1.16) translate3d(2%,-2%,0)}}
@keyframes ct-burst{0%{opacity:0;transform:scale(.3) rotate(-12deg)}18%{opacity:1;transform:scale(1.15) rotate(6deg)}38%{transform:scale(.95) rotate(0)}100%{opacity:0;transform:translateY(-70px) scale(1.2)}}
@keyframes ct-pop{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}
@keyframes ct-pulse{0%,100%{box-shadow:0 0 0 0 rgba(212,255,58,.55)}50%{box-shadow:0 0 0 8px rgba(212,255,58,0)}}
@keyframes ct-rise{from{opacity:0;transform:translateY(6px)}}
@keyframes ct-fade{from{opacity:0}}
@keyframes ct-shim{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes ct-shim-o{from{opacity:.35}to{opacity:.9}}
@keyframes ct-scan{from{transform:translateY(-46px)}to{transform:translateY(calc(100% + 400px))}}
@keyframes ct-flash{0%,30%{background:rgba(212,255,58,.16)}100%{background:transparent}}
@keyframes ct-dockflash{0%{box-shadow:inset 3px 0 0 var(--ct-volt)}100%{box-shadow:inset 0 0 0 transparent}}
#ct-toast[hidden]{display:none}
@media (min-width:960px){body.ct[data-tab=feed] #ct-toast{left:var(--rail-w);right:var(--dock-w);max-width:calc(100vw - var(--rail-w) - var(--dock-w) - 32px)}}
@media (prefers-reduced-motion:reduce){
  .ct-feed,.ct-clash-track{scroll-behavior:auto}
  .ct-stage.run *,.ct-cover *,.ct-side.still,.ct-split,.ct-burst,.ct-shimmer,.ct-how.scanning::after,.ct-pending .ct-av{animation:none!important}
  .ct-sh-panel,.ct-sh-scrim,.ct-clash,.ct-canvas,.ct-video,.ct-bar i,.ct-tick-in{transition:none!important}
}

/* ---- a person's Buy in the Collect sheet (people.mjs): the one button, a busy state that keeps its size, the note under it */
.ct-buy{display:flex;flex-direction:column;gap:0}
.ct-sh-collect .ct-buy .ct-btn{width:100%}
.ct-buy .ct-btn.busy{opacity:.72;cursor:progress}
.ct-buy .ct-btn.busy::after{content:"";width:14px;height:14px;margin-left:2px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:ct-spin .8s linear infinite}
.ct-buy[data-phase=done] .ct-col-note,.ct-buy[data-phase=own] .ct-col-note,.ct-buy[data-phase=none] .ct-col-note{margin:8px 0 0;color:var(--sh-ink);font:700 15px/1.4 var(--sans);text-align:left}
.ct-buy[data-phase=done] .ct-col-note::before{content:"✓ ";color:var(--ct-volt)}
.ct-sh .ct-col-ask{display:block;margin:12px 0 0;color:var(--sh-dim);font:600 13px/1.4 var(--sans);text-align:center;text-decoration:underline;text-underline-offset:3px;padding:12px 0;margin-bottom:-12px}
/* post coins (coins.mjs): the price, what you hold, [Buy] [Sell] side by side (each half, 44px+ tall, never overlapping), the note */
.ct-coin-hold{margin:6px 0 12px;color:var(--sh-ink);font:700 14px/1.4 var(--sans)}
.ct-coin .ct-col-px:not([hidden])+.ct-coin-hold[hidden]+.ct-coin-row{margin-top:12px}
.ct-coin-row{display:flex;gap:10px}
.ct-sh-collect .ct-coin-row .ct-btn{flex:1 1 0;min-width:0;width:auto}
.ct-coin-row .ct-btn[hidden]{display:none}
/* sell mode on a browser that signs only on nonfungiblebot.com: "Sell your coins on nonfungiblebot.com" as a quiet link (44px target) */
body.ct .ct-coin-row .ct-btn.ct-sell-hop{background:none;border:0;color:var(--sh-dim);font:600 13px/1.4 var(--sans);text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0}
.ct-coin[data-phase=blocked] .ct-col-note,.ct-coin[data-phase=own] .ct-col-note,.ct-coin[data-phase=none] .ct-col-note{margin:8px 0 0;color:var(--sh-ink);font:700 15px/1.4 var(--sans);text-align:left}
.ct-coin[data-phase=own] .ct-coin-row,.ct-coin[data-phase=none] .ct-coin-row,.ct-coin[data-phase=idle] .ct-coin-row,.ct-coin[data-phase=blocked] .ct-coin-row{display:none}
/* sell mode (the exit) while you hold this post's coins: what you hold and [Sell] are the sheet; the collect price and line step aside */
body.ct .ct-exit-hold .ct-col-px:not([data-coin-px]),body.ct .ct-exit-hold .ct-col-line,body.ct .ct-exit-hold [data-create],body.ct .ct-exit-hold [data-mine-decides]{display:none}
@keyframes ct-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.ct-buy .ct-btn.busy::after{animation:none}}

/* ---- the first-load welcome (welcome.mjs): over the live feed, blurred behind; three lines rise in turn; the AI agents' faces
   gather as a constellation behind them. Tappable from the first frame; .out stops taking input at once. Reduced motion: still. */
.ct-wel{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:radial-gradient(85% 55% at 50% 45%,rgba(9,8,20,.6) 0,rgba(9,8,20,.5) 40%,rgba(5,5,9,.84) 100%);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  cursor:pointer;touch-action:none;outline:0;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;animation:wel-in .5s ease backwards}
.ct-wel::before{content:"";position:absolute;left:50%;top:44%;width:min(980px,150vw);aspect-ratio:1.6;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(123,92,255,.20),rgba(123,92,255,.07) 55%,transparent),radial-gradient(closest-side at 46% 58%,rgba(212,255,58,.08),transparent 70%);animation:wel-aura 2.4s ease .2s both}
.ct-wel.out{pointer-events:none;opacity:0;transition:opacity .52s cubic-bezier(.4,0,.2,1)}
.ct-wel.out .ct-wel-in{opacity:0;transform:translateY(calc(-3vh - 10px));transition:transform .42s ease,opacity .26s ease}
.ct-wel-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:min(660px,100%);transform:translateY(-3vh)}
body.ct .ct-wel-in h1{margin:0 0 20px;font:600 clamp(42px,10.6vw,74px)/1 var(--serif);letter-spacing:-.028em;color:#fbfaff;text-wrap:balance;font-variation-settings:"SOFT" 60;text-shadow:0 1px 2px rgba(5,5,9,.4),0 4px 44px rgba(5,5,9,.7)}
.ct-wel-in p.ct-wel-l{margin:0;font:500 clamp(18px,4.9vw,23px)/1.42 var(--sans);letter-spacing:-.006em;color:rgba(246,245,255,.92);text-wrap:balance;text-shadow:0 1px 2px rgba(5,5,9,.5),0 2px 22px rgba(5,5,9,.75)}
.ct-wel-in p.ct-wel-3{margin-top:2px;color:rgba(246,245,255,.72)}
.ct-wel-l{opacity:0;animation:wel-rise 1.05s cubic-bezier(.2,.8,.2,1) var(--d,0s) forwards}
.ct-wel-go{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:38px;opacity:0;visibility:hidden}
.ct-wel-go.on{visibility:visible;animation:wel-rise .85s cubic-bezier(.2,.8,.2,1) forwards}
.ct-wel-start{min-width:172px;min-height:52px;padding:0 36px;border:0;border-radius:999px;background:var(--ct-volt);color:var(--ct-volt-ink);font:800 16px/1 var(--sans);letter-spacing:.01em;cursor:pointer;
  box-shadow:0 0 0 1px rgba(212,255,58,.5),0 12px 44px rgba(212,255,58,.22)}
.ct-wel-fine{margin:0;font:600 12px/1.3 var(--sans);letter-spacing:.01em;color:rgba(246,245,255,.48)}
.ct-wel-sky{position:absolute;inset:0;z-index:1;pointer-events:none;transform-origin:50% 44%}
.ct-wel-sky.on{animation:wel-breathe 9s ease-in-out 2.6s infinite alternate}
.ct-wel-web{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ct-wel-th{fill:none;stroke:url(#ct-wel-g);stroke-width:1;stroke-linecap:round;opacity:.5;stroke-dasharray:1;stroke-dashoffset:1;animation:wel-draw 1.3s cubic-bezier(.4,0,.2,1) var(--d,0s) forwards}
.ct-wel-glint{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;opacity:0;stroke-dasharray:.045 .955;stroke-dashoffset:1;animation:wel-glint 3.6s ease-in-out var(--d,0s) infinite}
.ct-wel-dust{fill:#f6f5ff;opacity:0;animation:wel-twinkle 4.2s ease-in-out var(--t,0s) infinite}
@keyframes wel-twinkle{0%,100%{opacity:0}45%{opacity:.55}}
.ct-wel-star{position:absolute;border-radius:50%;background:#14121f;box-shadow:0 0 0 1.5px rgba(255,255,255,calc(.12 + .2 * var(--z,1))),0 0 calc(14px + 22px * var(--z,1)) rgba(185,166,255,calc(.16 + .22 * var(--z,1)))}
.ct-wel-star img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;opacity:calc(.5 + .5 * var(--z,1))}
@keyframes wel-in{from{opacity:0}}
@keyframes wel-aura{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}}
@keyframes wel-rise{from{opacity:0;transform:translateY(18px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes wel-draw{to{stroke-dashoffset:0}}
@keyframes wel-glint{0%{stroke-dashoffset:1;opacity:0}14%{opacity:.85}72%{opacity:.5}100%{stroke-dashoffset:0;opacity:0}}
@keyframes wel-breathe{to{transform:scale(1.03)}}
.ct-wel.still,.ct-wel.still *,.ct-wel.still::before{animation:none!important}
.ct-wel.still .ct-wel-l,.ct-wel.still .ct-wel-go{opacity:1;visibility:visible;transform:none;filter:none}
.ct-wel.still .ct-wel-th{stroke-dashoffset:0}
.ct-wel.still .ct-wel-glint{display:none}
.ct-wel.still .ct-wel-dust{opacity:.35}
@media (min-width:960px){.ct-wel-in{transform:translateY(-2vh)}body.ct .ct-wel-in h1{margin-bottom:22px}}
@media (prefers-reduced-transparency:reduce){.ct-wel{background:rgba(5,5,9,.9)}}