/* releases.okayiris.com: the app's look (DESIGN.md in AGI): #07090c, ice blue, SF, glass. Dark only, on purpose. */
:root{
  --bg:#07090c;--fg:#e8f2f7;--dim:#8fa3b0;--faint:#5a6b78;--line:#1b2430;
  --accent:#7dd3fc;--on-accent:#07171f;--glassbg:rgba(125,211,252,.08);--panel:#0e1218;
  --good:#4ade80;--warn:#fbbf24;--bad:#f87171;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:52px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:720px;margin:0 auto;padding-inline:16px}
.mono{font-family:var(--mono);font-size:11px;color:var(--dim)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:650}
h4.label{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 12px;font-weight:600}

/* bar */
.bar{position:sticky;top:0;z-index:10;background:rgba(7,9,12,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font-weight:600}
.brand img{width:24px;height:24px;border-radius:7px}
.bar nav{display:flex;align-items:center;gap:14px;font-size:14px}
.bar nav a{color:var(--dim);text-decoration:none}
.bar nav a.get{color:var(--on-accent);background:var(--accent);padding:5px 12px;border-radius:999px;font-weight:600}
#pos{white-space:nowrap;color:var(--dim)}
.still{font:inherit;font-size:13px;cursor:pointer;background:none;border:1px solid var(--line);color:var(--dim);border-radius:999px;padding:4px 10px}
.still[aria-pressed="true"]{color:var(--accent);border-color:rgba(125,211,252,.4)}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--accent);color:var(--on-accent);padding:8px 12px;border-radius:8px}
.skip:focus{left:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.scene.off *,.scene.off *::after{animation-play-state:paused!important}

/* top */
.top{padding-block:48px 24px;display:grid;gap:20px}
.top.small{padding-block:20px 0;font-size:14px}
.top.small a{color:var(--dim);text-decoration:none}
.top.small a::before{content:"← "}
.more{display:flex;justify-content:center;padding-block:40px}
.top h1{font-size:34px;line-height:1.15}
.top p{color:var(--dim);margin:0;max-width:56ch}
/* release index */
.index{list-style:none;margin:8px 0 0;padding:0;display:grid;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.index li+li{border-top:1px solid var(--line)}
.index a{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;padding:14px 18px;color:var(--fg);text-decoration:none}
.index a:hover{background:var(--glassbg)}
.index .v{font-family:var(--mono);font-size:13px;color:var(--accent)}
.index .t{min-width:0}
.index .d{font-size:13px;color:var(--dim);white-space:nowrap}
.toc{display:grid;gap:10px;margin-top:14px}
.tocrow{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:start}
.tocrow .eyebrow{padding-top:7px}
.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.toc a{display:inline-block;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--dim);font-size:13px;text-decoration:none}
.toc a.hl{color:var(--accent);border-color:rgba(125,211,252,.35);background:var(--glassbg)}
.toc a:hover{color:var(--fg);border-color:var(--accent)}
.smalls{list-style:none;margin:16px 0 0;padding:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.smalls .page.small{min-height:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 18px;border-bottom:0}
.smalls .page.small+.page.small{border-top:1px solid var(--line)}
.smalls .page.small p{margin:0;flex:1 1 320px;min-width:0}
.smalls .acts{gap:6px;opacity:0;transition:opacity .2s}
.smalls .page.small:is(:hover,:focus-within) .acts,.smalls .acts:has([aria-pressed="true"]){opacity:1}
@media (hover:none){.smalls .acts{opacity:1}}
.smalls .act{padding:6px 10px}
.smalls .tell{flex-basis:100%}
.latest{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 22px;display:grid;gap:12px}
.latest .t{color:var(--accent);font-size:14px}
.latest ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.latest li{position:relative;padding-left:16px}
.latest li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.latest li a{color:var(--fg);text-decoration:none;border-bottom:1px solid rgba(125,211,252,.35)}
.latest li a:hover{border-color:var(--accent)}

/* feed */
.rel{border-top:1px solid var(--line);padding-top:40px;margin-top:24px}
.relhead{display:grid;gap:6px;padding-bottom:8px}
.relhead h2{font-size:24px}

.page{display:grid;gap:26px;padding-block:48px 56px;border-bottom:1px solid var(--line);align-content:start}
.page .ft{font-size:28px;line-height:1.2;margin:0}
.page .label{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 12px;font-weight:600}
.lede{font-size:17px;color:var(--dim);margin:10px 0 0;max-width:58ch}
.vis{border:1px solid var(--line);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.vis .scene{height:260px}
/* Highlights get the big picture; the rest a smaller one beside its text, so fourteen features do not read as one template. */
@media (min-width:860px){
  .page:not(.hl):not(.small){grid-template-columns:1fr 300px;column-gap:28px;align-items:start}
  .page:not(.hl):not(.small)>*{grid-column:1}
  .page:not(.hl):not(.small)>.vis{grid-column:2;grid-row:1 / span 4;align-self:start;position:sticky;top:72px}
  .page:not(.hl)>.vis .scene{zoom:1!important;height:260px!important}
}
/* Wide screens: the same scene, larger, so its words read like the app and not like a sketch. */
@media (min-width:760px){.vis .scene{height:280px;zoom:1.15}.vis .scene+.scene,.vis .scene:has(+.scene){zoom:1;height:322px}}
.vis .scene+.scene{border-left:1px solid var(--line)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;counter-increment:s}
.steps li::before{content:counter(s);width:28px;height:28px;border-radius:50%;background:var(--glassbg);border:1px solid rgba(125,211,252,.25);color:var(--accent);display:grid;place-items:center;font-size:13px;font-weight:600}
.steps li span{padding-top:3px}
.know{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--dim)}
.where{display:flex;flex-wrap:wrap;gap:8px}
.where span{font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--glassbg);border:1px solid rgba(125,211,252,.18);color:var(--accent)}

/* actions */
.acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.act{font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:13.5px;background:var(--glassbg);border:1px solid rgba(125,211,252,.2);color:var(--accent);text-decoration:none}
.act:hover{border-color:var(--accent)}
.act svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.act[aria-pressed="true"] svg{fill:currentColor}
.act .n{font-variant-numeric:tabular-nums}
.act .n:empty{display:none}
.note{color:var(--dim);font-size:12.5px;overflow-wrap:anywhere}
.tell{display:grid;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.tell label{font-size:13px;color:var(--dim)}
.tell textarea,.tell input{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
.tell textarea{min-height:90px;resize:vertical}
.tell .row2{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.tell button{font:inherit;cursor:pointer;padding:8px 16px;border-radius:999px;border:0;background:var(--accent);color:var(--on-accent);font-weight:600}
.tell button:disabled{opacity:.5;cursor:default}
.end{padding-block:64px;text-align:center;display:grid;gap:12px;justify-items:center;color:var(--dim)}
.end p{margin:0;font-size:17px;color:var(--fg)}
footer{border-top:1px solid var(--line);padding-block:24px;color:var(--dim);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px}
footer a{color:var(--dim);text-decoration:none}

/* scenes */
.scene{position:relative;height:230px;background:radial-gradient(100% 80% at 50% 0%,#10202c,var(--bg) 75%);overflow:hidden}
.ease{transition:all .55s cubic-bezier(.2,.9,.2,1)}
.glass{background:rgba(232,242,247,.06);border:1px solid rgba(232,242,247,.1);border-radius:14px}
.mail{position:absolute;left:16px;right:16px;top:calc(50% - 56px);padding:12px;font-size:12px;max-width:340px;margin:0 auto}
.mail .to{color:var(--dim)}.mail .bd{margin:6px 0 10px}
.send{display:inline-block;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:4px 12px;font-weight:600}
.fid{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:22px;background:rgba(7,9,12,.85);backdrop-filter:blur(8px);border:1px solid rgba(125,211,252,.25);display:grid;place-items:center;opacity:0;transform:scale(.6)}
.fid svg{width:46px;height:46px;stroke:var(--accent);fill:none;stroke-width:2.4;stroke-linecap:round}
.fid .scan{position:absolute;left:12px;right:12px;height:2px;background:var(--accent);box-shadow:0 0 12px var(--accent);top:16px;opacity:0}
.fid .ok{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.fid .ok svg{stroke:var(--good)}
.sent{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:13px;color:var(--good);opacity:0}
[data-run="faceid"][data-s="1"] .send{transform:scale(.9)}
[data-run="faceid"][data-s="2"] .fid,[data-run="faceid"][data-s="3"] .fid{opacity:1;transform:scale(1)}
[data-run="faceid"][data-s="2"] .mail,[data-run="faceid"][data-s="3"] .mail{filter:blur(2px);opacity:.5}
[data-run="faceid"][data-s="2"] .scan{opacity:1;animation:scan .9s ease-in-out infinite alternate}
@keyframes scan{to{top:68px}}
[data-run="faceid"][data-s="3"] .face{opacity:0}[data-run="faceid"][data-s="3"] .ok{opacity:1}
[data-run="faceid"][data-s="4"] .mail{transform:translateY(-140px) scale(.7) rotate(-6deg);opacity:0}
[data-run="faceid"][data-s="4"] .sent{opacity:1}
.ring{position:absolute;left:50%;top:18px;width:150px;height:150px;margin-left:-75px}
.ring circle{fill:none}
.hand{position:absolute;left:50%;top:18px;width:2px;height:75px;margin-left:-1px;background:linear-gradient(var(--accent),transparent);transform-origin:50% 100%}
.mk{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--line);border:2px solid var(--faint);margin:-7px 0 0 -7px}
.mk.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent)}
.chip{position:absolute;left:12px;right:12px;bottom:14px;max-width:340px;margin:0 auto;background:rgba(18,22,29,.9);border:1px solid rgba(125,211,252,.2);border-radius:12px;padding:8px 10px;font-size:12px;opacity:0;transform:translateY(10px)}
.chip.on{opacity:1;transform:none}
.chip small{display:block}
.prog{height:4px;background:var(--line);border-radius:2px;margin-top:6px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent);width:0}
.q{position:absolute;left:16px;right:16px;top:40px;max-width:340px;margin:0 auto;padding:12px;font-size:12.5px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.q svg{width:30px;height:30px}
.q .t{stroke:var(--accent);stroke-dasharray:88;stroke-dashoffset:0;fill:none;stroke-width:3;transform:rotate(-90deg);transform-origin:center}
.q small{display:block;margin-top:4px}
.away,.backmsg{position:absolute;left:0;right:0;top:118px;text-align:center;font-size:12px;opacity:0}
.away{color:var(--dim)}.backmsg{color:var(--accent)}
.quiet{position:absolute;left:28px;right:28px;bottom:18px;max-width:300px;margin:0 auto;border:1px dashed rgba(125,211,252,.3);border-radius:12px;padding:8px 10px;font-size:11.5px;color:var(--dim);opacity:0;transform:translateY(10px)}
[data-run="questions"][data-s="1"] .q .t{stroke-dashoffset:88;transition:stroke-dashoffset 1.4s linear}
[data-run="questions"][data-s="2"] .q,[data-run="questions"][data-s="5"] .q{opacity:0;transform:translateY(-20px) scale(.95)}
[data-run="questions"][data-s="2"] .away,[data-run="questions"][data-s="5"] .away{opacity:1}
[data-run="questions"][data-s="3"] .backmsg{opacity:1}
[data-run="questions"][data-s="3"] .q{animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:none;opacity:1}}
[data-run="questions"][data-s="6"] .q{transform:translateY(118px) scale(.82);opacity:0}
[data-run="questions"][data-s="6"] .quiet{opacity:1;transform:none}
.ask{position:absolute;right:16px;top:12px;background:#1f6f9a;color:#fff;border-radius:16px 16px 4px 16px;padding:7px 12px;font-size:12.5px;animation:askin 6s infinite}
@keyframes askin{0%{opacity:0;transform:translateY(8px)}8%,92%{opacity:1;transform:none}100%{opacity:0}}
.mini{position:absolute;left:16px;right:16px;top:50px;max-width:280px;margin:0 auto;padding:10px 12px;display:grid;gap:6px;font-size:12px;opacity:0;animation:partin 6s infinite;animation-delay:.3s}
.mini>*{animation:partin 6s infinite;animation-delay:var(--d,.6s);opacity:0}
.mh{font-weight:650;font-size:14px;--d:.5s}
.mt{display:flex;gap:6px;--d:.7s}.mt span{padding:2px 9px;border-radius:999px;border:1px solid var(--line);font-size:11px}.mt span:first-child{background:var(--glassbg);border-color:rgba(125,211,252,.4);color:var(--accent)}
.mr{display:flex;gap:8px;align-items:center;padding:4px 0;border-top:1px solid var(--line)}
.mr i{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--faint)}
.mr i.tick{animation:tick 6s infinite}
@keyframes tick{0%,55%{background:none;border-color:var(--faint)}62%,92%{background:var(--good);border-color:var(--good)}}
.mtile{display:flex;align-items:baseline;gap:6px;padding:6px 8px;border-radius:10px;background:rgba(251,191,36,.12);color:var(--warn)}
.mtile b{font-size:16px}
@keyframes partin{0%{opacity:0;transform:translateY(6px)}4%,92%{opacity:1;transform:none}100%{opacity:0}}
.phone{position:absolute;left:50%;top:16px;width:140px;height:228px;margin-left:-70px;border-radius:28px;border:2px solid #24303c;background:#0a0e13;overflow:hidden}
.track{display:flex;width:300%;height:104px;animation:swipe 6s infinite cubic-bezier(.6,0,.2,1)}
.track div{width:33.333%;padding:14px 10px;display:grid;gap:6px;align-content:start}
.track b{font-size:12px;font-weight:650;color:var(--fg)}
.track span{display:flex;justify-content:space-between;font-size:9.5px;color:var(--dim);border-top:1px solid #1b2430;padding-top:4px}
.track span em{font-style:normal;color:var(--accent)}
@keyframes swipe{0%,20%{transform:none}30%,50%{transform:translateX(-33.333%)}60%,80%{transform:translateX(-66.666%)}90%,100%{transform:none}}
.finger{position:absolute;top:50px;left:60%;width:22px;height:22px;border-radius:50%;background:rgba(232,242,247,.25);border:1px solid rgba(232,242,247,.4);animation:fing 6s infinite}
@keyframes fing{0%,18%{transform:none;opacity:0}20%{opacity:1}28%{transform:translateX(-50px);opacity:0}48%{transform:none;opacity:0}50%{opacity:1}58%{transform:translateX(-50px);opacity:0}100%{opacity:0}}
.stack{position:absolute;left:10px;right:10px;bottom:10px;height:100px}
.stack>span{position:absolute;left:0;right:0;bottom:0;height:56px;border-radius:12px;background:#121821;border:1px solid #24303c;font-size:10px;padding:8px;color:var(--dim)}
.stack>span:nth-child(1){transform:translateY(-36px) scale(.86);opacity:.5}
.stack>span:nth-child(2){transform:translateY(-18px) scale(.93);opacity:.75}
.stack>span:nth-child(3){animation:card 6s infinite}
@keyframes card{0%,70%{transform:none;opacity:1}80%{transform:translateY(80px);opacity:0}81%{transform:translateY(-36px) scale(.86);opacity:0}100%{transform:none;opacity:1}}
.desk{position:absolute;inset:20px 16px 20px;border-radius:12px;background:linear-gradient(135deg,#0f1b26,#0a1119);border:1px solid #1e2a36;overflow:hidden}
.win{position:absolute;left:12%;top:16%;width:52%;height:52%;border-radius:8px;background:#121821;border:1px solid #24303c}
.win i{position:absolute;left:12px;top:34px;width:60%;height:8px;border-radius:4px;background:#24303c}
.win b{position:absolute;right:12px;bottom:12px;padding:3px 10px;border-radius:6px;background:#1f6f9a;font-size:10px;font-weight:600}
.mark{position:absolute;left:0;top:0;width:100%;height:100%}
.mark path{fill:none;stroke:var(--warn);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:draw 6s infinite}
@keyframes draw{0%,25%{stroke-dashoffset:240}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.cur{position:absolute;width:14px;height:14px;animation:cur 6s infinite}
.cur svg{width:14px;height:14px;fill:var(--accent);filter:drop-shadow(0 0 6px var(--accent))}
@keyframes cur{0%{left:85%;top:80%}25%{left:56%;top:58%}35%{left:66%;top:50%}45%{left:60%;top:72%}55%{left:50%;top:60%}100%{left:85%;top:80%}}
.pill{position:absolute;left:50%;bottom:8px;width:90px;height:22px;margin-left:-45px;border-radius:999px;background:rgba(18,22,29,.9);border:1px solid #24303c;display:grid;place-items:center}
.pill i{width:10px;height:10px;border-radius:50%;background:conic-gradient(#22d3ee,#3b82f6,#8b5cf6,#c026d3,#22d3ee);animation:orb 2s infinite alternate}
@keyframes orb{to{transform:scale(1.3)}}
.surf{position:absolute;inset:24px 16px 56px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sf{display:grid;align-content:start;gap:6px;padding:10px;min-width:0}
.sl{font-size:11px;color:var(--dim);font-family:var(--mono)}
.sf i{height:7px;border-radius:4px;background:#24303c}.sf i+i{width:70%}
.sf b{margin-top:auto;height:20px;border-radius:999px;animation:unify 6s infinite}
@keyframes unify{0%,30%{background:var(--from);border-radius:4px}50%,92%{background:var(--accent);border-radius:999px}100%{background:var(--from);border-radius:4px}}
.same,.seen{position:absolute;font-size:12.5px;animation:fadein 6s infinite}
.same{left:0;right:0;bottom:22px;text-align:center;color:var(--accent)}
.seen{right:16px;bottom:14px;color:var(--good)}
@keyframes fadein{0%,45%{opacity:0}55%,90%{opacity:1}100%{opacity:0}}
.edge{position:absolute;inset:0;padding:2px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,#22d3ee,#3b82f6,#8b5cf6,#c026d3,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 3s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.orbx{position:absolute;left:50%;top:44%;width:70px;height:70px;margin:-35px 0 0 -35px;display:grid;place-items:center}
.orbx i{width:54px;height:54px;border-radius:50%;background:conic-gradient(#22d3ee,#3b82f6,#8b5cf6,#c026d3,#22d3ee);box-shadow:0 0 30px rgba(59,130,246,.6),0 0 60px rgba(192,38,211,.35);animation:dance 6s infinite}
@keyframes dance{0%,40%{transform:scale(1) rotate(0)}45%{transform:scale(1.25) rotate(40deg)}50%{transform:scale(.9) rotate(-20deg)}55%{transform:scale(1.15) rotate(60deg)}62%,100%{transform:scale(1) rotate(0)}}
.ringd{position:absolute;right:22px;bottom:20px;width:46px;height:46px}
.ringd circle{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:151;stroke-dashoffset:151;transform:rotate(-90deg);transform-origin:center;animation:ringd 6s infinite;filter:drop-shadow(0 0 6px var(--accent))}
@keyframes ringd{0%,65%{stroke-dashoffset:151}85%,100%{stroke-dashoffset:0}}
.fxl{position:absolute;left:18px;bottom:24px;font-size:12px;color:var(--dim)}
.upn{position:absolute;left:16px;right:16px;top:22px;max-width:320px;margin:0 auto;padding:10px 12px;font-size:12.5px;display:grid;gap:2px;animation:upn 7s infinite}
.hb{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hb span{padding:4px 10px;border-radius:999px;font-size:11.5px;background:var(--glassbg);border:1px solid rgba(125,211,252,.2);color:var(--accent)}
.hb span:first-child{background:var(--accent);color:var(--on-accent)}
.upn .hb span:first-child{background:var(--glassbg);color:var(--accent);animation:press 7s infinite}
@keyframes upn{0%{opacity:0;transform:translateY(-10px)}6%,40%{opacity:1;transform:none}48%,100%{opacity:0;transform:translateY(-10px)}}
.upo{position:absolute;left:0;right:0;top:50%;margin-top:-30px;display:grid;justify-items:center;gap:14px;font-size:13px;color:var(--dim);letter-spacing:.02em;opacity:0;animation:upo 7s infinite}
@keyframes upo{0%,50%{opacity:0}58%,94%{opacity:1}100%{opacity:0}}
.upr{width:60px;height:60px;border-radius:50%;border:1px solid rgba(232,242,247,.08);background:radial-gradient(circle,rgba(139,92,246,.12),transparent 70%);display:grid;place-items:center}
.upr i{width:30px;height:30px;border-radius:50%;background:conic-gradient(#22d3ee,#3b82f6,#8b5cf6,#c026d3,#22d3ee);-webkit-mask:radial-gradient(circle,transparent 7px,#000 8px);mask:radial-gradient(circle,transparent 7px,#000 8px);box-shadow:0 0 18px rgba(59,130,246,.5);animation:spin2 2.4s linear infinite}
@keyframes spin2{to{transform:rotate(360deg)}}
.rows{position:absolute;left:16px;right:16px;top:18px;max-width:340px;margin:0 auto;display:grid;gap:8px}
.row{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:7px 12px;font-size:12.5px;line-height:1.3}
.row small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row em{font-style:normal;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#07090c}
.row small{display:block}
.sw{width:30px;height:18px;border-radius:999px;background:#24303c;position:relative;animation:swbg 6s infinite;animation-delay:var(--d)}
.sw::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#e8f2f7;animation:swk 6s infinite;animation-delay:var(--d)}
@keyframes swbg{0%,10%{background:#24303c}18%,90%{background:var(--accent)}100%{background:#24303c}}
@keyframes swk{0%,10%{transform:none}18%,90%{transform:translateX(12px)}100%{transform:none}}
.bub{position:absolute;right:16px;top:34px;max-width:230px;background:#1f6f9a;color:#fff;border-radius:16px 16px 4px 16px;padding:10px 12px;font-size:13px}
.bub .sec{animation:blur 6s infinite}
@keyframes blur{0%,25%{filter:none}35%,90%{filter:blur(5px)}100%{filter:none}}
.held{position:absolute;left:16px;right:16px;top:100px;max-width:320px;margin:0 auto;padding:12px;font-size:12.5px;opacity:0;transform:translateY(10px);animation:held 6s infinite}
.held b{color:var(--warn)}
@keyframes held{0%,30%{opacity:0;transform:translateY(10px)}38%,90%{opacity:1;transform:none}100%{opacity:0}}
.appt{position:absolute;left:16px;right:16px;top:22px;max-width:340px;margin:0 auto;padding:12px;font-size:13px}
.appt small{display:block}
.ladder{position:absolute;left:16px;right:16px;top:100px;max-width:340px;margin:0 auto;display:grid;gap:8px}
.lad{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 12px;border-radius:12px;border:1px solid var(--line);font-size:12.5px;opacity:.3;animation:lad 6s infinite;animation-delay:var(--d)}
.lad i{width:8px;height:8px;border-radius:50%;background:var(--c)}
@keyframes lad{0%,8%{opacity:.3;border-color:var(--line)}14%,92%{opacity:1;border-color:var(--c)}100%{opacity:.3}}
.lad.call span:last-child{animation:ring .25s infinite alternate}
@keyframes ring{to{transform:rotate(14deg)}}
.flow{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 12px;gap:6px}
.node{padding:8px;border-radius:12px;font-size:11.5px;text-align:center;opacity:.25;animation:node 6s infinite;animation-delay:var(--d)}
.node small{display:block;color:var(--dim);font-size:10px}
.col{display:grid;gap:10px}
@keyframes node{0%,5%{opacity:.25;transform:scale(.95)}12%,92%{opacity:1;transform:none;border-color:rgba(125,211,252,.4)}100%{opacity:.25}}
.score{color:var(--good);font-weight:700;font-size:15px}
.ans{position:absolute;left:16px;right:16px;top:20px;max-width:340px;margin:0 auto;padding:12px;font-size:12.5px}
.bars{display:flex;align-items:flex-end;gap:8px;height:90px;margin:10px 0}
.bars i{flex:1;border-radius:4px 4px 0 0;background:var(--accent);opacity:.8;transform-origin:bottom;animation:grow 6s infinite;animation-delay:var(--d)}
@keyframes grow{0%,8%{transform:scaleY(0)}25%,90%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.ans .sl{height:4px;border-radius:2px;background:#24303c;position:relative;margin:12px 4px 4px}
.ans .sl i{position:absolute;top:-6px;width:16px;height:16px;border-radius:50%;background:var(--fg);animation:sl 6s infinite}
@keyframes sl{0%,30%{left:20%}60%,90%{left:70%}100%{left:20%}}
.packs{position:absolute;left:16px;right:16px;top:22px;max-width:340px;margin:0 auto;padding:12px;font-size:12.5px}
.packs .ch{display:flex;gap:6px;margin:8px 0}
.packs .ch span{flex:1;text-align:center;padding:6px 0;border-radius:10px;border:1px solid var(--line);font-size:12px}
.packs .ch span:nth-child(2){animation:pick 6s infinite}
@keyframes pick{0%,15%{border-color:var(--line);background:none}22%,90%{border-color:var(--accent);background:var(--glassbg)}100%{border-color:var(--line)}}
.buy{display:block;text-align:center;padding:7px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;animation:press 6s infinite}
@keyframes press{0%,32%{transform:none}35%{transform:scale(.94)}38%{transform:none}}
.friends{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:40px}
.av{position:relative;width:44px;height:44px;border-radius:50%;background:#1b2430;border:1px solid #24303c;display:grid;place-items:center;font-size:11px;color:var(--dim)}
.av b{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--good);white-space:nowrap;animation:coin 6s infinite}
@keyframes coin{0%,55%{opacity:0;transform:translate(-50%,10px)}65%,92%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}

@media (max-width:520px){.page .ft{font-size:24px}.tocrow{grid-template-columns:1fr}.tocrow .eyebrow{padding-top:0}.top h1{font-size:28px}.page h3{font-size:24px}.bar nav a:not(.get),#pos{display:none}.index a{grid-template-columns:auto 1fr}.index .d{display:none}}
/* Still (reduced motion, or Pause motion): every scene shows its telling frame, never an empty one. */
body.paused .scene *,body.paused .scene *::after{animation:none!important;transition:none!important}
body.paused :is(.held,.seen,.same,.av b,.upo,.mini,.mini>*,.ask){opacity:1!important;transform:none!important}
body.paused .upn{opacity:0!important}
body.paused .mark path{stroke-dashoffset:0}body.paused .bars i{transform:none}body.paused .ringd circle{stroke-dashoffset:0}
body.paused .mr i.tick{background:var(--good);border-color:var(--good)}body.paused .sw{background:var(--accent)}body.paused .sw::after{transform:translateX(12px)}
body.paused .lad,body.paused .node{opacity:1}body.paused .sf b{background:var(--accent);border-radius:999px}body.paused .bub .sec{filter:blur(5px)}
@media (prefers-reduced-motion:reduce){
.scene *,.scene *::after{animation:none!important;transition:none!important}
:is(.held,.seen,.same,.av b,.upo,.mini,.mini>*,.ask){opacity:1!important;transform:none!important}
.upn{opacity:0!important}
.mark path{stroke-dashoffset:0}.bars i{transform:none}.ringd circle{stroke-dashoffset:0}
.mr i.tick{background:var(--good);border-color:var(--good)}.sw{background:var(--accent)}.sw::after{transform:translateX(12px)}
.lad,.node{opacity:1}.sf b{background:var(--accent);border-radius:999px}.bub .sec{filter:blur(5px)}
}

@media (min-width:860px){.wrap{max-width:880px}}
.draft{margin-top:24px;padding:12px 16px;border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.08);border-radius:12px;color:var(--fg);font-size:14px}
.draft b{color:var(--warn)}