/* OpenClaude landing — same tokens, type and motion vocabulary as public/app.css (default "claude" theme) */
@font-face{font-family:'Doto';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/doto.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/geist.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/geist-mono-400.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/geist-mono-500.woff2) format('woff2')}

/* ===== theme tokens (claude theme; site.js swaps them using the app's deriveVars) ===== */
:root{--bg:#1a1612;--bg2:#292521;--fg:#f4ede2;--mu:#8c857c;--mu2:#b3ada4;--w:244,237,226;--k:26,22,18;--acc:#da7756;--on-acc:#1a1612;--glass-rgb:37,33,28;--halo:rgba(218,119,86,.15);--code-bg:rgba(0,0,0,.38);--code-fg:#ded7cd;--hl-str:#7FE0B4;--hl-num:#ffd9a0;--hl-var:#cfe1ff;--ok:#2BD576;--warn:#F5B84A;--bad:#FF5D5D;color-scheme:dark}
:root{--ln:rgba(var(--w),.1);--ln2:rgba(var(--w),.16);--glass:rgba(var(--glass-rgb),.62);--blur:20px;--ease:cubic-bezier(.2,.9,.2,1);--spr:cubic-bezier(.3,1.5,.5,1);--glow:color-mix(in srgb,var(--acc) 50%,transparent);--glow-s:color-mix(in srgb,var(--acc) 22%,transparent);--font:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'Geist Mono',ui-monospace,monospace;--max:1180px;--gut:clamp(16px,4vw,32px)}
@supports (transition-timing-function:linear(0,1)){:root{--spr:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067,1.099 24.3%,1.108 26%,1.098 28.6%,1.072 31.7%,.994 41.6%,.979 46.6%,.98 52.3%,1.001 72.1%,1.003 79.3%,1)}}

*,*:before,*:after{box-sizing:border-box;margin:0}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--bg);color:var(--fg);font:400 1rem/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .5s var(--ease),color .5s var(--ease)}
a{color:inherit}button{font:inherit;color:inherit}img,svg{display:block;max-width:100%}
::selection{background:var(--acc);color:var(--on-acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:12px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--acc);color:var(--on-acc);font-weight:600;text-decoration:none;transition:top .3s var(--ease)}.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dt{font-family:'Doto','Geist Mono',monospace;font-weight:800}
.mono{font-family:var(--mono)}
.wm{font-weight:300;letter-spacing:.02em}.wm b{font-weight:900}
.wrap{width:min(100%,var(--max));margin:0 auto;padding:0 var(--gut)}

/* ambient light (installer aurora) */
.amb{position:fixed;inset:-14%;z-index:-1;pointer-events:none;background:radial-gradient(40% 46% at 8% 92%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 70%),radial-gradient(34% 40% at 96% 6%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 70%),radial-gradient(30% 34% at 60% 50%,rgba(var(--w),.035),transparent 70%);animation:aur 22s ease-in-out infinite alternate}
.amb:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(var(--w),.07) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 30%,#000 10%,transparent 75%)}
@keyframes aur{from{transform:translate(0,0) scale(1)}to{transform:translate(2%,-2%) scale(1.06)}}

/* glass, buttons, pills (app vocabulary) */
.gl{background:linear-gradient(180deg,rgba(var(--w),.07),rgba(var(--w),.015)),var(--glass);border:1px solid var(--ln);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);backdrop-filter:blur(var(--blur)) saturate(1.6);box-shadow:inset 0 1px 0 rgba(var(--w),.14),0 24px 50px -26px rgba(0,0,0,.6)}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;background:var(--acc);color:var(--on-acc);font:600 .95rem var(--font);padding:13px 22px;cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 34px -12px var(--glow);transition:transform .5s var(--spr),box-shadow .4s,background-color .5s,color .5s}
.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-130%)}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 5px rgba(var(--w),.08),0 14px 38px -10px var(--glow)}
.btn:hover:after{animation:sh .9s var(--ease)}@keyframes sh{to{transform:translateX(130%)}}
.btn:active{transform:scale(.95)}
.btn.alt{background:rgba(var(--w),.04);color:var(--fg);box-shadow:inset 0 1px 0 rgba(var(--w),.14),0 0 0 1px var(--ln)}.btn.alt:hover{box-shadow:inset 0 1px 0 rgba(var(--w),.2),0 0 0 1px var(--ln2),0 0 0 6px rgba(var(--w),.04)}.btn.alt:after{display:none}
.btn.sm{padding:9px 16px;font-size:.84rem}
.btn svg{width:1.05em;height:1.05em;flex:none}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;background:rgba(var(--w),.07);color:var(--mu2);font:400 .78rem var(--mono);white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(43,213,118,.15);animation:pg 2s infinite}
@keyframes pg{0%{box-shadow:0 0 0 0 rgba(43,213,118,.6)}100%{box-shadow:0 0 0 9px rgba(43,213,118,0)}}
.eyebrow{display:inline-block;font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.h2{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.08;letter-spacing:-.025em;font-weight:700;margin-top:12px;text-wrap:balance}
.lede{color:var(--mu2);font-size:clamp(1rem,1.6vw,1.12rem);max-width:60ch;margin-top:14px;text-wrap:pretty}
.sh{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(32px,5vw,56px)}
.sh .lede{margin-inline:auto}
section{position:relative;padding:clamp(72px,10vw,128px) 0}

/* logo (installer animation) */
.logo{width:28px;height:28px;flex:none}
.logo .rays{transform-origin:16px 16px;animation:spin 48s linear infinite}
.logo .r{transform-origin:16px 16px;animation:br 3.4s ease-in-out infinite}
.logo .r:nth-child(2){animation-delay:-.29s}.logo .r:nth-child(3){animation-delay:-.58s}.logo .r:nth-child(4){animation-delay:-.87s}.logo .r:nth-child(5){animation-delay:-1.16s}.logo .r:nth-child(6){animation-delay:-1.45s}.logo .r:nth-child(7){animation-delay:-1.74s}.logo .r:nth-child(8){animation-delay:-2.03s}.logo .r:nth-child(9){animation-delay:-2.32s}.logo .r:nth-child(10){animation-delay:-2.61s}.logo .r:nth-child(11){animation-delay:-2.9s}.logo .r:nth-child(12){animation-delay:-3.19s}
.logo .core{animation:blink 2.4s steps(1) infinite}
.logo .tile{fill:var(--acc);transition:fill .5s}.logo .rays{fill:var(--on-acc);transition:fill .5s}.logo .core{fill:var(--core,#faf9f5);transition:fill .5s}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes br{50%{opacity:.7;transform:scale(.94)}}@keyframes blink{62%{opacity:.2}}

/* nav */
.nav{position:fixed;top:12px;left:0;right:0;z-index:50;padding:0 var(--gut);pointer-events:none}
.nav-in{pointer-events:auto;width:min(100%,var(--max));margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 7px 7px 16px;border-radius:999px;transition:box-shadow .4s,background-color .4s}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:1.12rem;color:var(--fg)}
.links{display:flex;align-items:center;gap:2px;list-style:none;padding:0}
.links a{display:block;padding:8px 14px;border-radius:999px;color:var(--mu2);font:500 .88rem var(--font);text-decoration:none;transition:color .3s,background-color .3s}
.links a:hover{color:var(--fg);background:rgba(var(--w),.07)}
.nav-r{display:flex;align-items:center;gap:6px}
.ib{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--ln);background:none;color:var(--mu2);cursor:pointer;transition:background-color .3s,color .3s,transform .45s var(--spr)}
.ib:hover{background:var(--acc);color:var(--on-acc);transform:translateY(-2px)}.ib:active{transform:scale(.9)}.ib svg{width:17px;height:17px}

/* theme menu */
.thm{position:relative}
.thm-pop{position:absolute;right:0;top:calc(100% + 10px);width:236px;padding:10px;border-radius:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;opacity:0;transform:translateY(-6px) scale(.96);transform-origin:top right;pointer-events:none;transition:opacity .25s,transform .5s var(--spr)}
.thm.open .thm-pop{opacity:1;transform:none;pointer-events:auto}
.thm-pop .cap{grid-column:1/-1;padding:2px 6px 6px;font:500 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mu)}
.sw-t{display:grid;place-items:center;gap:5px;padding:7px 2px;border:0;border-radius:14px;background:none;cursor:pointer;font:400 .62rem var(--mono);color:var(--mu2);transition:background-color .25s,transform .4s var(--spr)}
.sw-t:hover{background:rgba(var(--w),.07)}.sw-t:active{transform:scale(.92)}
.sw-t span{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 2px transparent;transition:box-shadow .3s}
.sw-t[aria-pressed=true]{color:var(--fg)}.sw-t[aria-pressed=true] span{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 2px var(--bg),0 0 0 4px var(--acc)}

/* hero */
.hero{padding:clamp(128px,16vw,176px) 0 clamp(56px,8vw,96px);text-align:center}
.hero .pill{margin-bottom:26px}
.hero h1{font-size:clamp(2.6rem,7.4vw,5.6rem);line-height:.98;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.hero h1 .dt{display:block;font-weight:900;letter-spacing:.01em;margin-top:.08em;color:transparent;background:linear-gradient(100deg,var(--acc) 38%,color-mix(in srgb,var(--acc) 40%,#fff) 50%,var(--acc) 62%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 26px var(--glow-s));animation:shine 7s ease-in-out infinite}
@keyframes shine{0%,30%{background-position:100% 0}70%,100%{background-position:0 0}}

.hero .lede{margin:24px auto 0;font-size:clamp(1.05rem,1.8vw,1.22rem)}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.meta{margin-top:18px;color:var(--mu);font:400 .76rem var(--mono)}
.meta span+span:before{content:"·";margin:0 10px;opacity:.6}

/* app mock */
.stage{position:relative;margin:clamp(48px,7vw,80px) auto 0;width:min(100%,1060px);perspective:1800px}
.stage:before{content:"";position:absolute;left:8%;right:8%;top:12%;bottom:-6%;background:radial-gradient(50% 50% at 50% 50%,var(--glow-s),transparent 70%);filter:blur(40px);z-index:-1}
.win{display:grid;grid-template-columns:230px minmax(0,1fr);gap:10px;padding:10px;border-radius:32px;text-align:left;transform:rotateX(9deg) scale(.98);transform-origin:50% 0;transition:transform 1.2s var(--ease);height:540px}
.stage.in .win{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.m-side{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:24px;background:rgba(var(--w),.035);border:1px solid var(--ln);min-width:0}
.m-side .brand{font-size:.95rem;padding:2px 4px}.m-side .logo{width:22px;height:22px}
.m-search{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(var(--w),.06);color:var(--mu);font-size:.8rem}.m-search svg{width:13px;height:13px}
.m-grp{padding:8px 8px 2px;font:500 .62rem var(--mono);color:var(--mu);text-transform:uppercase;letter-spacing:.08em}
.m-it{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:14px;color:var(--mu2);font-size:.8rem;white-space:nowrap;overflow:hidden}
.m-it.on{background:rgba(var(--w),.1);color:var(--fg)}
.m-it em{font:400 .6rem var(--mono);font-style:normal;color:var(--mu);padding:1px 6px;border-radius:99px;background:rgba(var(--w),.07)}
.m-foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;background:rgba(var(--w),.05);font:400 .66rem var(--mono);color:var(--mu2)}
.m-foot i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(43,213,118,.15)}
.m-main{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:24px;overflow:hidden}
.m-top{display:flex;align-items:center;justify-content:center;padding:6px 6px 0}
.tb{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tb::-webkit-scrollbar{display:none}
.tb button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:var(--mu2);font:500 .8rem var(--font);padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .35s,transform .3s var(--spr)}
.tb button svg{width:13px;height:13px}
.tb button:hover{color:var(--fg)}.tb button:active{transform:scale(.94)}.tb button[aria-selected=true]{color:var(--on-acc)}
.tb .ind{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:var(--acc);box-shadow:0 6px 26px -6px var(--glow);transition:left .6s var(--spr),width .6s var(--spr),background-color .5s}
.m-thread{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:18px clamp(14px,3vw,34px) 8px;font-size:.86rem}
.mm{display:flex;gap:11px;animation:rise .7s var(--ease) both}.mm:nth-child(2){animation-delay:.12s}.mm:nth-child(3){animation-delay:.24s}.mm:nth-child(4){animation-delay:.36s}
.mm.u{justify-content:flex-end}
.mm .bub{max-width:80%;padding:9px 15px;border-radius:20px 20px 6px 20px;background:rgba(var(--w),.1);border:1px solid var(--ln)}
.mm .av{flex:none;width:24px;height:24px;margin-top:1px}.mm .av .logo{width:24px;height:24px}
.mm .bd{min-width:0;flex:1;color:var(--fg)}.mm .bd p{margin-bottom:8px}.mm .bd p:last-child{margin-bottom:0}
.mm ul{padding-left:1.2em;margin-bottom:6px}.mm li{margin:.2em 0}.mm li::marker{color:var(--mu)}
.mm code{font:400 .8em var(--mono);padding:1px 7px;border-radius:999px;background:rgba(var(--w),.09)}
@keyframes rise{from{opacity:0;filter:blur(8px);transform:translateY(12px) scale(.985)}to{opacity:1;filter:none;transform:none}}
.tcs{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.tc{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:14px;border:1px solid var(--ln);background:rgba(var(--w),.03);font:400 .72rem var(--mono);color:var(--mu2);animation:rise .6s var(--ease) both}
.tc:nth-child(2){animation-delay:.5s}.tc:nth-child(3){animation-delay:.9s}.tc:nth-child(4){animation-delay:1.3s}
.tc b{color:var(--fg);font-weight:500}.tc .a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mu)}
.tc .st{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ok)}.tc.run .st{background:var(--acc);animation:pa 1.2s infinite}
@keyframes pa{0%{box-shadow:0 0 0 0 var(--glow)}100%{box-shadow:0 0 0 8px transparent}}
.perm{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px 10px 9px 14px;border-radius:18px;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 7%,transparent);font-size:.78rem;animation:rise .6s .9s var(--ease) both}
.perm .q{flex:1;min-width:160px}.perm b{color:var(--warn);font:500 .72rem var(--mono);margin-right:6px}
.perm .x{padding:4px 11px;border-radius:999px;font:500 .7rem var(--font);background:rgba(var(--w),.08)}.perm .x.y{background:var(--acc);color:var(--on-acc)}
.sws{display:flex;gap:6px;margin:8px 0}.sws span{flex:1;height:44px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);animation:rise .6s var(--ease) both}
.sws span:nth-child(1){background:#1a1612}.sws span:nth-child(2){background:#292521;animation-delay:.1s}.sws span:nth-child(3){background:#b3ada4;animation-delay:.2s}.sws span:nth-child(4){background:#f4ede2;animation-delay:.3s}.sws span:nth-child(5){background:#da7756;animation-delay:.4s}
.hexes{font:400 .7rem var(--mono);color:var(--mu)}.after{margin-top:8px}
.art{border-radius:16px;border:1px solid var(--ln);overflow:hidden;animation:rise .7s .3s var(--ease) both}
.art-h{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 13px;background:rgba(var(--w),.04);font:400 .68rem var(--mono);color:var(--mu2)}
.art-h em{font-style:normal;color:var(--ok)}
.art-b{display:grid;grid-template-columns:repeat(6,1fr);align-items:end;gap:6px;height:92px;padding:12px 14px;background:var(--code-bg)}
.art-b i{border-radius:6px 6px 2px 2px;background:linear-gradient(var(--acc),color-mix(in srgb,var(--acc) 30%,transparent));transform-origin:bottom;animation:grow .9s var(--spr) both}
.art-b i:nth-child(1){height:40%;animation-delay:.5s}.art-b i:nth-child(2){height:65%;animation-delay:.58s}.art-b i:nth-child(3){height:52%;animation-delay:.66s}.art-b i:nth-child(4){height:84%;animation-delay:.74s}.art-b i:nth-child(5){height:72%;animation-delay:.82s}.art-b i:nth-child(6){height:96%;animation-delay:.9s}
@keyframes grow{from{transform:scaleY(0)}}
.cb{border-radius:14px;border:1px solid var(--ln);background:var(--code-bg);overflow:hidden;margin:6px 0 8px}
.cb .chd{padding:5px 12px;background:rgba(var(--w),.04);font:400 .66rem var(--mono);color:var(--mu2)}
.cb pre{padding:9px 13px;font:400 .72rem/1.65 var(--mono);color:var(--code-fg);overflow:hidden;white-space:pre}
.k{color:var(--fg);font-weight:500}.s{color:var(--hl-str)}.n{color:var(--hl-num)}.c{color:var(--mu)}
.cur:after{content:"";display:inline-block;width:7px;height:1.05em;margin-left:3px;vertical-align:-.15em;background:rgba(var(--w),.7);border-radius:2px;animation:blink 1s steps(1) infinite}
.m-dock{padding:6px clamp(10px,2.4vw,26px) 12px}
.m-cmp{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:24px;background:rgba(var(--w),.05);border:1px solid var(--ln);color:var(--mu);font-size:.82rem}
.m-cmp .ph{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.m-cmp .md{font:400 .66rem var(--mono);color:var(--mu2);padding:4px 10px;border-radius:999px;background:rgba(var(--w),.07);white-space:nowrap}
.m-cmp .go{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--acc);color:var(--on-acc)}.m-cmp .go svg{width:14px;height:14px}

/* numbers strip */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:clamp(48px,7vw,72px)}
.num{padding:22px 20px;border-radius:26px;text-align:left}
.num .dt{display:block;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:var(--fg)}
.num span{display:block;margin-top:8px;color:var(--mu2);font-size:.88rem;line-height:1.4}

/* surfaces */
.surf{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.card{position:relative;padding:24px 22px;border-radius:28px;overflow:hidden;transition:transform .6s var(--spr),border-color .4s}
.card:hover{transform:translateY(-4px);border-color:var(--ln2)}
.card:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at var(--mx,50%) var(--my,0%),var(--halo),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover:before{opacity:1}
.ico{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 30%,transparent),color-mix(in srgb,var(--acc) 8%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent);color:var(--acc);margin-bottom:18px}
.ico svg{width:21px;height:21px}
.card h3{font-size:1.08rem;font-weight:650;letter-spacing:-.01em}
.card p{margin-top:8px;color:var(--mu2);font-size:.9rem;line-height:1.55}
.tag{display:inline-block;margin-top:14px;font:400 .68rem var(--mono);color:var(--mu);padding:3px 9px;border-radius:99px;background:rgba(var(--w),.06)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.bento .card{grid-column:span 2}.bento .card.w3{grid-column:span 3}.bento .card.w4{grid-column:span 4}
.term{margin-top:18px;border-radius:16px;background:var(--code-bg);border:1px solid var(--ln);padding:12px 14px;font:400 .76rem/1.75 var(--mono);color:var(--code-fg);overflow-x:auto;white-space:pre}

/* motion lab */
.lab{display:grid;grid-template-columns:1.05fr 1fr;gap:10px;align-items:stretch}
.lab-l{padding:clamp(24px,4vw,40px);border-radius:32px;display:flex;flex-direction:column;justify-content:center}
.lab-l .tb{margin-top:24px;background:rgba(var(--w),.06);align-self:flex-start}
.lab-r{padding:clamp(20px,3vw,32px);border-radius:32px;display:flex;flex-direction:column;gap:18px}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-radius:20px;background:rgba(var(--w),.04);border:1px solid var(--ln)}
.row .l{font-size:.9rem}.row .l small{display:block;color:var(--mu);font:400 .7rem var(--mono);margin-top:2px}
.sw{position:relative;flex:none;width:46px;height:26px;border-radius:99px;background:rgba(var(--w),.14);border:0;cursor:pointer;transition:background-color .3s}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--mu2);transition:transform var(--dur,.6s) var(--lab,var(--spr)),background-color .3s}
.sw[aria-checked=true]{background:var(--acc)}.sw[aria-checked=true]:after{transform:translateX(20px);background:var(--bg)}
.track{position:relative;height:56px;border-radius:18px;background:rgba(var(--w),.05);border:1px solid var(--ln);overflow:hidden}
.puck{position:absolute;top:8px;left:8px;width:38px;height:38px;border-radius:13px;background:var(--acc);box-shadow:0 8px 24px -8px var(--glow);transition:left var(--dur,.6s) var(--lab,var(--spr))}
.track.on .puck{left:calc(100% - 46px)}
.curve{width:100%;height:120px;border-radius:18px;background:rgba(var(--w),.03);border:1px solid var(--ln)}
.curve path.g{stroke:rgba(var(--w),.12)}.curve path.p{stroke:var(--acc);transition:d .4s var(--ease)}
.lab-meta{display:flex;justify-content:space-between;color:var(--mu);font:400 .7rem var(--mono)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:s;list-style:none;padding:0}
.step{position:relative;padding:28px 24px;border-radius:28px}
.step .n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--acc);color:var(--on-acc);font:800 1rem 'Doto',var(--mono);box-shadow:0 0 22px var(--glow-s);margin-bottom:18px}
.step h3{font-size:1.08rem;font-weight:650}.step p{margin-top:8px;color:var(--mu2);font-size:.9rem}
.step code,.faq code{font:400 .82em var(--mono);padding:1px 7px;border-radius:999px;background:rgba(var(--w),.09);color:var(--fg)}

/* faq */
.faq{width:min(100%,820px);margin:0 auto;display:flex;flex-direction:column;gap:8px}
.faq details{border-radius:22px;border:1px solid var(--ln);background:rgba(var(--w),.03);overflow:hidden;transition:background-color .3s,border-color .3s}
.faq details[open]{background:rgba(var(--w),.05);border-color:var(--ln2)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-weight:600;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--mu2);border-bottom:2px solid var(--mu2);transform:rotate(45deg) translate(-2px,-2px);transition:transform .5s var(--spr)}
.faq details[open] summary:after{transform:rotate(225deg) translate(-2px,-2px)}
.faq .a{padding:0 22px 20px;color:var(--mu2);font-size:.95rem}
.faq .a p+p{margin-top:8px}

/* final cta */
.final{padding:clamp(40px,7vw,80px) clamp(22px,5vw,64px);border-radius:40px;text-align:center;overflow:hidden;position:relative}
.final:before{content:"";position:absolute;inset:0;background:radial-gradient(50% 70% at 50% 120%,var(--glow-s),transparent 70%);pointer-events:none}
.final .lede{margin-inline:auto}
.logo.still *{animation:none!important}
.final .logo{width:72px;height:72px;margin:0 auto 22px;filter:drop-shadow(0 10px 26px var(--glow))}
.dl{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}

/* footer */
footer{padding:48px 0 40px;color:var(--mu);font-size:.84rem}
.foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:24px;padding-top:28px;border-top:1px solid var(--ln)}
.foot nav ul{display:flex;flex-wrap:wrap;gap:4px 18px;list-style:none;padding:0}
.foot a{text-decoration:none;transition:color .3s}.foot a:hover{color:var(--fg)}
.foot .dis{flex-basis:100%;font-size:.76rem;line-height:1.6;max-width:80ch}


/* 404 */
.nf{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:24px var(--gut)}
.nf .big{font-size:clamp(5rem,22vw,11rem);line-height:.9;color:var(--acc);text-shadow:0 0 50px var(--glow-s)}
.nf p{color:var(--mu2);max-width:42ch}.nf .h2{margin-top:0}.nf-logo{width:56px;height:56px;filter:drop-shadow(0 10px 26px var(--glow))}

/* responsive */
@media (max-width:1060px){.surf{grid-template-columns:repeat(6,1fr)}.surf .card{grid-column:span 2}.surf .card:nth-child(4),.surf .card:nth-child(5){grid-column:span 3}.bento .card,.bento .card.w3,.bento .card.w4{grid-column:span 3}}
@media (max-width:900px){.links{display:none}.win{grid-template-columns:1fr;height:500px}.m-side{display:none}.lab{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.nums{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.surf .card,.surf .card:nth-child(4),.surf .card:nth-child(5),.bento .card,.bento .card.w3,.bento .card.w4{grid-column:1/-1}.win{height:470px;border-radius:26px;padding:6px}.m-main{border-radius:20px}.tb button{padding:7px 11px}.tb button svg{display:none}.nav-in .btn .lg{display:none}.cta .btn{flex:1 1 100%}.num{padding:18px 16px}.mm .bub{max-width:92%}}
@media (max-width:380px){.brand .wm{display:none}}

.links a.on{color:var(--fg);background:rgba(var(--w),.09)}
.prog{position:fixed;left:0;top:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 45%,#fff));transform-origin:0 50%;transform:scaleX(var(--p,0));box-shadow:0 0 14px var(--glow)}
.thm-pop{width:300px;max-width:calc(100vw - 32px);max-height:min(62vh,420px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.mq{display:flex;flex-direction:column;gap:10px;overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-row{display:flex;width:max-content;animation:mq 70s linear infinite}
.mq-row[data-dir="-1"]{animation-direction:reverse;animation-duration:85s}
.mq:hover .mq-row,.mq:focus-within .mq-row{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-chip{flex:none;display:inline-flex;align-items:center;gap:12px;margin-right:10px;padding:9px 20px 9px 9px;border-radius:999px;border:1px solid var(--ln);background:rgba(var(--w),.04);color:var(--mu2);font:500 .9rem var(--font);cursor:pointer;white-space:nowrap;transition:background-color .3s,color .3s,border-color .3s,transform .5s var(--spr)}
.mq-chip span{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.mq-chip:hover{color:var(--fg);border-color:var(--ln2);transform:translateY(-3px)}.mq-chip:active{transform:scale(.94)}
.mq-chip[aria-pressed=true]{background:var(--acc);color:var(--on-acc);border-color:transparent;box-shadow:0 8px 28px -10px var(--glow)}
.mq-hint{margin-top:22px;text-align:center;color:var(--mu);font:400 .76rem var(--mono)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}

/* reveal: animation with backwards fill, so hover transforms keep working afterwards */
.rv{opacity:0}
.rv.in{opacity:1;animation:rise 1s var(--ease) backwards;animation-delay:var(--rd,0s)}
.no-js .rv{opacity:1}
.surf>.rv:nth-child(2),.bento>.rv:nth-child(2),.steps>.rv:nth-child(2),.nums>.rv:nth-child(2){--rd:.08s}
.surf>.rv:nth-child(3),.bento>.rv:nth-child(3),.steps>.rv:nth-child(3),.nums>.rv:nth-child(3){--rd:.16s}
.surf>.rv:nth-child(4),.bento>.rv:nth-child(4),.nums>.rv:nth-child(4){--rd:.24s}
.surf>.rv:nth-child(5),.bento>.rv:nth-child(5){--rd:.32s}
.bento>.rv:nth-child(6){--rd:.4s}.bento>.rv:nth-child(7){--rd:.48s}
.faq>.rv:nth-child(2){--rd:.05s}.faq>.rv:nth-child(3){--rd:.1s}.faq>.rv:nth-child(4){--rd:.15s}.faq>.rv:nth-child(5){--rd:.2s}

/* wordmark shine (app: wmShine) */
.wm b{background:linear-gradient(100deg,var(--fg) 0%,var(--acc) 55%,var(--fg) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wmShine 7s ease-in-out infinite}
@keyframes wmShine{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.brand .logo,.m-side .logo{filter:drop-shadow(0 4px 14px color-mix(in srgb,var(--acc) 38%,transparent))}
.brand:hover .logo .rays{animation-duration:6s}.brand:hover .logo .tile{filter:brightness(1.08)}.brand:hover .logo{filter:drop-shadow(0 0 10px var(--glow))}

/* spinning ring (app: sp-ring / tl-ring) */
.sp-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 58%,color-mix(in srgb,var(--acc) 40%,transparent) 82%,var(--acc) 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));animation:tlSpin 1.2s linear infinite}
.sp-ring:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);animation:tlPulse 1.8s ease-out infinite}
@keyframes tlSpin{to{transform:rotate(360deg)}}
@keyframes tlPulse{0%{opacity:.7;transform:scale(.92)}100%{opacity:0;transform:scale(1.18)}}

/* splash (app: #splash) */
#splash{position:fixed;inset:0;z-index:400;display:grid;place-items:center;background:var(--bg);transition:opacity .55s ease,transform .7s var(--ease),filter .55s ease;animation:splashOut .6s 3.5s forwards}
#splash:before{content:"";position:absolute;inset:0;background:radial-gradient(46% 38% at 50% 42%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 72%);pointer-events:none}
#splash.out{opacity:0;transform:scale(1.06);filter:blur(10px);pointer-events:none}
.no-js #splash,.skip-splash #splash{display:none}
@keyframes splashOut{to{opacity:0;visibility:hidden;pointer-events:none}}
.sp-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;animation:spIn .7s var(--ease) both}
@keyframes spIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.sp-mark{position:relative;display:grid;place-items:center;width:132px;height:132px}
.sp-logo{width:82px;height:82px;overflow:visible;filter:drop-shadow(0 0 22px var(--glow))}
.sp-wm{font-size:2.6rem;line-height:1}
.sp-bar{width:220px;height:3px;border-radius:3px;background:rgba(var(--w),.1);overflow:hidden}
.sp-bar i{display:block;height:100%;width:6%;border-radius:3px;background:var(--acc);box-shadow:0 0 12px var(--glow);transition:width .5s var(--ease)}
.sp-txt{font:500 .7rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mu2);min-height:1em}

/* hero mark */
.hero-mark{position:relative;display:grid;place-items:center;width:104px;height:104px;margin:0 auto 22px}
.hero-mark .logo.big{width:68px;height:68px;overflow:visible;filter:drop-shadow(0 0 22px var(--glow))}
.hero-mark .sp-ring{animation-duration:6s;opacity:.85}
.hero-mark .sp-ring.r2{inset:10px;animation-duration:9s;animation-direction:reverse;opacity:.35}.hero-mark .sp-ring.r2:after{display:none}
.hero .wrap>:nth-child(-n+6){animation:rise 1.1s var(--ease) both}
.hero .wrap>:nth-child(1){animation-delay:.05s}.hero .wrap>:nth-child(2){animation-delay:.14s}.hero .wrap>:nth-child(3){animation-delay:.22s}.hero .wrap>:nth-child(4){animation-delay:.32s}.hero .wrap>:nth-child(5){animation-delay:.42s}.hero .wrap>:nth-child(6){animation-delay:.5s}

/* drifting ambient light (app: drift1-3) */
.amb:before{content:"";position:absolute;left:34%;top:8%;width:42vw;height:42vw;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 14%,transparent),transparent);filter:blur(30px);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-14vw,22vh) scale(1.25)}}

/* mock sidebar rows enter like the app's list rows (itemIn) */
.m-it{animation:rise .7s var(--ease) both}
.m-it:nth-of-type(1){animation-delay:.5s}.m-it:nth-of-type(2){animation-delay:.58s}.m-it:nth-of-type(3){animation-delay:.66s}.m-it:nth-of-type(4){animation-delay:.74s}.m-it:nth-of-type(5){animation-delay:.82s}.m-it:nth-of-type(6){animation-delay:.9s}

/* ===== sectioned backdrops + layers ===== */
.sec{position:relative;isolation:isolate}
.layers{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);transition:opacity .9s var(--ease)}
.hero .layers{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.L{position:absolute;inset:-8% 0;will-change:transform}
.msk-c{-webkit-mask-image:radial-gradient(60% 50% at 50% 30%,#000,transparent 80%);mask-image:radial-gradient(60% 50% at 50% 30%,#000,transparent 80%)}
#gbd{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity .9s var(--ease)}
html[data-bd] #gbd{opacity:1}
html[data-bd] .layers{opacity:.12}
html[data-bd] .amb{opacity:.45}
.hero-rays{position:absolute;left:50%;top:-6%;width:min(1500px,150vw);margin-left:calc(min(1500px,150vw) / -2);opacity:.075;fill:var(--acc);animation:spin 180s linear infinite}
.hero-rays .rays{transform-origin:16px 16px}
.fl{position:absolute;width:150px;height:150px;fill:var(--acc);opacity:.06;animation:floaty 16s ease-in-out infinite alternate}
.fl1{left:5%;top:10%}.fl2{right:7%;top:16%;width:120px;height:120px;animation-delay:-3s}.fl3{left:11%;bottom:8%;width:190px;height:190px;animation-delay:-6s}.fl4{right:12%;bottom:12%;width:130px;height:130px;animation-delay:-9s}.fl5{left:46%;top:4%;width:100px;height:100px;animation-delay:-12s}.fl6{right:34%;bottom:4%;width:110px;height:110px;animation-delay:-4s}
@keyframes floaty{from{transform:translate(0,0) rotate(-6deg)}to{transform:translate(24px,-34px) rotate(8deg)}}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--cx,50%) var(--cy,28%),var(--halo),transparent 62%)}
kbd{display:inline-block;min-width:1.7em;padding:1px 8px;border-radius:8px;background:rgba(var(--w),.1);box-shadow:inset 0 -2px 0 rgba(var(--w),.14),0 0 0 1px var(--ln);font:500 .82em var(--mono);color:var(--fg);text-align:center}

/* ===== video spotlight ===== */
@property --sa{syntax:'<angle>';inherits:false;initial-value:0deg}
.spot{position:relative;width:min(100%,1100px);margin:0 auto;border-radius:40px;padding:10px;transition:transform .8s var(--ease)}
.spot:before{content:"";position:absolute;inset:-2px;border-radius:42px;padding:2px;background:conic-gradient(from var(--sa),transparent 0 52%,color-mix(in srgb,var(--acc) 50%,transparent) 76%,var(--acc) 92%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinA 7s linear infinite;pointer-events:none}
@keyframes spinA{to{--sa:360deg}}
.spot:after{content:"";position:absolute;left:6%;right:6%;bottom:-70px;height:120px;background:radial-gradient(50% 50% at 50% 50%,var(--glow),transparent 70%);filter:blur(34px);opacity:.55;z-index:-1;pointer-events:none}
.spot-in{position:relative;border-radius:30px;overflow:hidden;background:#000;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.spot video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;pointer-events:none;user-select:none}
video::-webkit-media-controls,video::-webkit-media-controls-enclosure,video::-webkit-media-controls-panel,video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.spot-chrome{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:14px;padding:14px 18px;background:linear-gradient(rgba(0,0,0,.55),transparent);color:rgba(255,255,255,.82);font:400 .76rem var(--mono);pointer-events:none}
.spot-chrome .dots{display:flex;gap:7px}.spot-chrome .dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.28)}.spot-chrome .dots i:first-child{background:var(--acc)}
.spot-chrome .ttl{flex:1}
.spot-chrome .live{display:inline-flex;align-items:center;gap:8px;padding:4px 11px;border-radius:999px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.spot-chrome .live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pg 2s infinite}
.spot-shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--sx,50%) var(--sy,-20%),rgba(255,255,255,.12),transparent 60%);opacity:0;transition:opacity .5s}
.spot:hover .spot-shine{opacity:1}

/* ===== microinteractions ===== */
.pnav{position:relative}
.hp{position:absolute;top:0;left:0;height:100%;width:0;border-radius:999px;background:rgba(var(--w),.09);opacity:0;pointer-events:none;transition:left .5s var(--spr),width .5s var(--spr),opacity .3s}
.links a{position:relative;z-index:1;background:none!important}
.links a:hover{color:var(--fg)}
.links a.on{color:var(--on-acc);background:var(--acc)!important;box-shadow:0 8px 26px -10px var(--glow)}
.btn .rp{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:translate(-50%,-50%) scale(0);animation:rp .7s var(--ease) forwards;pointer-events:none}
.btn.alt .rp{background:rgba(var(--w),.18)}
@keyframes rp{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.btn svg:last-child:not(:first-child){transition:transform .5s var(--spr)}.btn:hover svg:last-child:not(:first-child){transform:translateX(5px)}
.btn svg:first-child:not(:last-child){transition:transform .5s var(--spr)}.btn:hover svg:first-child:not(:last-child){transform:translateY(2px) scale(1.12)}
.card:hover .ico{animation:wig .7s var(--ease)}
@keyframes wig{0%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.12)}60%{transform:rotate(7deg) scale(1.08)}100%{transform:rotate(0) scale(1)}}
.term{position:relative}
.copy{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:12px;border:1px solid var(--ln);background:rgba(var(--w),.06);color:var(--mu2);cursor:pointer;transition:background-color .3s,color .3s,transform .45s var(--spr)}
.copy:hover{background:var(--acc);color:var(--on-acc);transform:translateY(-2px)}.copy:active{transform:scale(.9)}
.copy svg{position:absolute;width:15px;height:15px;fill:currentColor;transition:transform .5s var(--spr),opacity .3s}
.copy .c2{transform:scale(0);opacity:0}.copy.done .c1{transform:scale(0);opacity:0}.copy.done .c2{transform:scale(1);opacity:1}.copy.done{background:var(--ok);color:#06210f}
.toast{position:fixed;left:50%;bottom:26px;z-index:70;display:flex;align-items:center;gap:12px;padding:11px 20px 11px 12px;border-radius:999px;background:linear-gradient(180deg,rgba(var(--w),.08),rgba(var(--w),.02)),rgba(var(--glass-rgb),.88);border:1px solid var(--ln2);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);font:500 .88rem var(--font);opacity:0;transform:translate(-50%,24px) scale(.94);transition:opacity .3s,transform .6s var(--spr);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.toast i{width:22px;height:22px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 25%,transparent)}
.toast span{color:var(--mu2);font:400 .76rem var(--mono)}
.sh .h2 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.sh .h2 .w>span{display:inline-block}
.sh.in .h2 .w>span{animation:wup .9s var(--spr) backwards;animation-delay:calc(var(--i) * .06s + .05s)}
@keyframes wup{from{transform:translateY(112%) rotate(4deg)}}
.logo.burst .rays{animation:burst 1.3s var(--ease)}
@keyframes burst{to{transform:rotate(720deg)}}
.brand{cursor:pointer}
:root{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .55s var(--ease),content-visibility .55s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq details{transition:background-color .3s,border-color .3s,transform .5s var(--spr)}.faq details:hover{transform:translateX(4px)}
.mq-chip.bd{padding:9px 20px 9px 9px}
.bd-thumb{position:relative;flex:none;width:56px;height:36px;border-radius:12px;overflow:hidden;background:var(--bg2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.bd-thumb i{position:absolute;inset:0;transform:scale(.6);transform-origin:0 0;width:167%;height:167%}
.mq-row.second{margin-top:0}
@media (max-width:900px){.fl{opacity:.04}.spot{border-radius:28px;padding:6px}.spot:before{border-radius:30px}.spot-in{border-radius:22px}.spot-chrome .ttl{display:none}}