/* Layout: cinematic full-bleed hero slider (always dark, like the brand posters), then a left-aligned 12-col editorial grid. Amber is the brand signal taken from Ivan's own visuals. */
:root{
  --bg:#EEEFEC; --surface:#FFFFFF; --ink:#13151C; --muted:#5D616E; --line:#D7D9DE;
  --accent:#F2A20A; --accent-ink:#13151C; --accent-text:#94570A; --accent-soft:#FBEBC6;
  --night:#0A0B0F; --night-ink:#F2F1EE;
  --display:"Fira Sans Extra Condensed","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --body:"Golos Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --gutter:clamp(16px,4vw,56px); --maxw:1320px; --r:18px;
  --step-1:1.2rem; --step-2:1.6rem; --step-3:clamp(2.2rem,4.6vw,3.8rem);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E0F14; --surface:#171920; --ink:#ECEDF1; --muted:#9A9EAB; --line:#272A34;
  --accent:var(--brand); --accent-ink:#0E0F14; --accent-text:#F7BB45; --accent-soft:#2B2312; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E0F14; --surface:#171920; --ink:#ECEDF1; --muted:#9A9EAB; --line:#272A34;
  --accent:var(--brand); --accent-ink:#0E0F14; --accent-text:#F7BB45; --accent-soft:#2B2312; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.005em;text-wrap:balance;margin:0}
h2{font-size:var(--step-3);text-transform:var(--dt)}
h3{font-family:var(--body);font-weight:600;font-size:var(--step-1);letter-spacing:-.01em;line-height:1.3}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:clamp(64px,10vw,140px)}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 48px;align-items:end;margin-bottom:clamp(32px,5vw,56px)}
.sec-head p{color:var(--muted);max-width:52ch}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;text-decoration:none;border:1.5px solid currentColor;transition:background .2s,color .2s,border-color .2s,transform .2s;cursor:pointer;font:600 15px/1 var(--body);background:transparent;color:var(--ink)}
.btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:500 14px/1 var(--body);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* header: transparent over the dark hero, solid after */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:60}
header.top{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);color:var(--night-ink);transition:background .35s,color .35s,border-color .35s;border-bottom:1px solid transparent}
header.top.solid{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;gap:20px;height:72px}
.logo{font-family:var(--display);font-weight:800;font-size:22px;text-transform:var(--dt);letter-spacing:.01em;text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo i{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--brand);color:var(--brand-ink);font-style:normal;font-size:16px}
nav.main{display:flex;gap:2px;margin-left:auto}
nav.main a{text-decoration:none;padding:8px 12px;border-radius:999px;font-size:15px;opacity:.78;transition:opacity .2s,background .2s}
nav.main a:hover,nav.main a.on{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 30%,transparent);background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;flex:none}
.burger{display:none}
.bar .btn{padding:11px 18px;color:inherit}
.bar .btn.primary{color:var(--brand-ink)}
@media (max-width:1240px){nav.main{display:none}.burger{display:grid;margin-left:auto}.bar .btn{display:none}}
.mnav{position:fixed;inset:0;z-index:70;background:var(--night);color:var(--night-ink);padding:calc(env(safe-area-inset-top,0px) + 20px) var(--gutter) 40px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.mnav .x{align-self:flex-end}
.mnav a{font-family:var(--display);font-weight:800;text-transform:var(--dt);font-size:clamp(34px,10vw,52px);text-decoration:none;padding:4px 0;border-bottom:1px solid #2a2c35}

/* HERO SLIDER */
.hero{position:relative;height:clamp(620px,94vh,940px);background:var(--night);color:var(--night-ink);overflow:hidden;isolation:isolate;--px:0;--py:0;--sy:0;touch-action:pan-y}
.slide{position:absolute;inset:0;visibility:hidden;z-index:0}
.slide.is-active{visibility:visible;z-index:2}
.slide.is-leaving{visibility:visible;z-index:1}
.slide.is-active.enter{animation:wipe 1.1s cubic-bezier(.77,0,.18,1) both}
@keyframes wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.media{position:absolute;inset:0;overflow:hidden}
.media .kb{position:absolute;inset:-6%;will-change:transform}
.slide.is-active .media .kb{animation:kenburns 9s ease-out both}
@keyframes kenburns{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.media img,.media video{width:100%;height:100%;object-fit:cover;transform:translate3d(calc(var(--px)*-26px),calc(var(--py)*-18px + var(--sy)*1px),0);will-change:transform}
.shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,11,15,.92) 0%,rgba(10,11,15,.72) 38%,rgba(10,11,15,.15) 72%,rgba(10,11,15,.35) 100%),
  linear-gradient(0deg,rgba(10,11,15,.9) 0%,rgba(10,11,15,0) 38%);pointer-events:none}
.slide.split .media{left:auto;width:min(50%,720px)}
.slide.split .media img{object-position:50% 20%}
.slide.split .shade{background:linear-gradient(90deg,rgba(10,11,15,1) 0%,rgba(10,11,15,1) 46%,rgba(10,11,15,.25) 62%,rgba(10,11,15,0) 80%),linear-gradient(0deg,rgba(10,11,15,.85) 0%,rgba(10,11,15,0) 30%)}
.slide.split::before{content:"";position:absolute;right:8%;top:10%;width:46vw;max-width:680px;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 30%,transparent),transparent 65%);transform:translate3d(calc(var(--px)*30px),calc(var(--py)*20px),0)}
.copy{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:72px;padding-bottom:120px;transform:translate3d(calc(var(--px)*10px),calc(var(--sy)*-.4px),0);opacity:calc(1 - var(--sy)/500)}
.copy>*{max-width:min(720px,100%)}
.tag{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:15px;color:#E9E6DF;margin-bottom:18px}
.tag::before{content:"";width:28px;height:2px;background:var(--accent)}
.hl{font-family:var(--display);font-weight:800;text-transform:var(--dt);font-size:clamp(3rem,8.6vw,7.6rem);line-height:.9;letter-spacing:-.01em}
.hl span{display:block}
.hl .amb{color:var(--brand)}
.hl.sm{font-size:clamp(2.6rem,6.4vw,5.8rem)}
.sub{font-size:clamp(1rem,1.5vw,1.2rem);color:#CFCCC4;max-width:52ch;margin-top:22px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .btn{color:var(--night-ink)}
.hero .btn:hover{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.hero .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.hero .btn.primary:hover{background:var(--night-ink);border-color:var(--night-ink)}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.facts span{border:1px solid rgba(242,241,238,.25);border-radius:999px;padding:6px 14px;font-size:14px;color:#E9E6DF;backdrop-filter:blur(6px);background:rgba(10,11,15,.25);font-variant-numeric:tabular-nums}
.slide.is-active.enter .copy>*{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.slide.is-active.enter .copy>*:nth-child(2){animation-delay:.12s}
.slide.is-active.enter .copy>*:nth-child(3){animation-delay:.22s}
.slide.is-active.enter .copy>*:nth-child(4){animation-delay:.3s}
.slide.is-active.enter .copy>*:nth-child(5){animation-delay:.38s}
@keyframes rise{from{transform:translateY(34px);opacity:0}to{transform:none;opacity:1}}
.hero-ui{position:absolute;left:0;right:0;bottom:0;z-index:5;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 26px)}
.hero-ui .wrap{display:flex;align-items:flex-end;gap:24px}
.dots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;flex:1;max-width:820px}
.dot{background:none;border:0;padding:12px 0 0;color:#BDB9B0;text-align:left;cursor:pointer;font:500 13.5px/1.3 var(--body);position:relative}
.dot .bar2{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(242,241,238,.22);overflow:hidden}
.dot .bar2 i{position:absolute;inset:0;background:var(--brand);transform-origin:0 50%;transform:scaleX(0)}
.dot.on{color:#fff}
.dot.on .bar2 i{animation:fill 7s linear forwards}
.dot.done .bar2 i{transform:scaleX(1)}
.hero.paused .dot.on .bar2 i{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
.dot b{display:block;font-family:var(--display);font-weight:700;font-size:15px;color:var(--brand);font-variant-numeric:tabular-nums}
.arrows{display:flex;gap:8px;margin-left:auto}
.arrows .icon-btn{color:var(--night-ink);width:48px;height:48px}
.arrows .icon-btn:hover{background:var(--night-ink);color:var(--night)}
.scroll-cue{position:absolute;right:var(--gutter);top:50%;z-index:4;writing-mode:vertical-rl;font-size:12.5px;letter-spacing:.2em;color:#9C998F;text-decoration:none;display:flex;align-items:center;gap:12px}
.scroll-cue::after{content:"";width:1px;height:56px;background:linear-gradient(#9C998F,transparent);animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:820px){
  .dots{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .dot span{display:none}.dot b{font-size:13px}
  .arrows .icon-btn{width:42px;height:42px}
  .scroll-cue{display:none}
  .slide.split .media{width:100%}
  .slide.split .media img{object-position:62% 18%}
  .slide.split .shade{background:linear-gradient(0deg,rgba(10,11,15,.97) 0%,rgba(10,11,15,.8) 42%,rgba(10,11,15,.1) 75%)}
  .shade{background:linear-gradient(0deg,rgba(10,11,15,.97) 0%,rgba(10,11,15,.78) 45%,rgba(10,11,15,.2) 80%)}
  .copy{justify-content:flex-end;padding-bottom:118px}
}

/* trust strip */
.trust{background:var(--night);color:#A8A59C;border-top:1px solid #23252d;overflow:hidden}
.trust-row{display:flex;gap:52px;width:max-content;padding-block:22px;animation:marquee 42s linear infinite}
.trust:hover .trust-row{animation-play-state:paused}
.trust-row a,.trust-row span{font-family:var(--display);font-weight:700;text-transform:var(--dt);font-size:clamp(18px,2vw,24px);letter-spacing:.02em;text-decoration:none;white-space:nowrap;transition:color .2s}
.trust-row a:hover{color:var(--brand)}
.trust-row em{font-style:normal;color:var(--brand)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* orbit section */
.how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.how-grid .lede{font-size:var(--step-1);color:var(--muted);max-width:46ch;margin-top:22px}
.orbit{position:relative;width:100%;max-width:540px;aspect-ratio:1/1;margin-inline:auto}
.orbit svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit .ring{fill:none;stroke:var(--line);stroke-width:.25}
.orbit .link{stroke:var(--muted);stroke-width:.3;opacity:.55}
.orbit.ai .link{stroke:var(--accent);stroke-dasharray:1.2 1.4;opacity:1;animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-2.6}}
.core{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;text-align:center;padding:8px;z-index:3;transition:transform .8s cubic-bezier(.2,.8,.2,1),background .4s}
.core b{font-family:var(--display);text-transform:var(--dt);font-size:clamp(17px,2vw,26px);line-height:1;display:block}
.core small{display:block;font-size:clamp(10px,1vw,12.5px);opacity:.8;margin-top:4px}
.orbit.ai .core{background:var(--accent);color:var(--accent-ink);transform:translate(-50%,-50%) scale(1.08)}
.node{position:absolute;left:0;top:0;transform:translate(-50%,-50%);z-index:4;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:14px;padding:9px 13px;font:500 clamp(11.5px,1.25vw,14px)/1.2 var(--body);white-space:nowrap;box-shadow:0 10px 26px -16px color-mix(in srgb,var(--ink) 50%,transparent)}
.node .t{display:none;color:var(--accent-text);font-weight:600}
.orbit.ai .node .t{display:block}
.orbit.ai .node .d{font-size:.78em;color:var(--muted);text-decoration:line-through}
.orbit-switch{display:flex;justify-content:center;gap:6px;margin-top:18px;flex-wrap:wrap}
.orbit-cap{text-align:center;color:var(--muted);font-size:14px;margin-top:10px;min-height:1.6em}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(40px,6vw,72px)}
.stat{padding:24px 20px 22px 0}
.stat+.stat{padding-left:20px;border-left:1px solid var(--line)}
.stat b{display:block;font-family:var(--display);font-size:clamp(40px,5vw,64px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:15px}

/* parallax word band */
.band{overflow:hidden;padding-block:clamp(20px,3vw,40px);pointer-events:none;user-select:none}
.band-row{font-family:var(--display);font-weight:800;text-transform:var(--dt);font-size:clamp(72px,15vw,240px);line-height:.88;white-space:nowrap;will-change:transform}
.band-row.o{color:transparent;-webkit-text-stroke:1.5px var(--line)}
.band-row.f{color:var(--accent-soft)}
.band-row em{font-style:normal;color:var(--accent)}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.portrait{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:var(--r);overflow:hidden;background:var(--night)}
.portrait img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;object-position:50% 20%;will-change:transform}
.portrait figcaption{position:absolute;left:16px;bottom:16px;right:16px;display:flex;flex-wrap:wrap;gap:6px}
.portrait figcaption span{background:rgba(10,11,15,.7);backdrop-filter:blur(6px);color:#F2F1EE;border-radius:999px;padding:5px 12px;font-size:13px}
.about-text>p{font-size:var(--step-1);max-width:58ch}
.about-text>p+p{margin-top:18px;color:var(--muted);font-size:17px}
.path{list-style:none;padding:0;margin:34px 0 0;border-top:1px solid var(--line)}
.path li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.path .n{font-family:var(--display);font-weight:800;font-size:24px;color:var(--accent-text);line-height:1.1}
.path h3{margin-bottom:4px}
.path p{color:var(--muted);font-size:15.5px}
.now{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--accent);color:var(--brand-ink);font:600 12px/1.6 var(--body);vertical-align:middle}

/* projects horizontal */
.pin{position:relative}
.pin-sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 72px);overflow:hidden}
.track{display:flex;gap:20px;padding-inline:var(--gutter);will-change:transform;padding-bottom:8px}
.proj{flex:0 0 min(440px,82vw);min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-height:460px;position:relative;overflow:hidden;transition:border-color .25s}
.proj:hover{border-color:var(--accent)}
.proj .ph{height:200px;overflow:hidden;position:relative;background:var(--night)}
.proj .ph img{width:100%;height:120%;object-fit:cover;will-change:transform;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.proj:hover .ph img{transform:scale(1.06)}
.proj .in{padding:24px 26px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.proj .meta{font-size:14px;color:var(--muted)}
.proj h3{font-family:var(--display);font-weight:800;text-transform:var(--dt);font-size:clamp(26px,2.6vw,34px);line-height:1}
.proj p{color:var(--muted);font-size:15.5px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.kpi{background:var(--accent-soft);border-radius:12px;padding:10px 14px}
.kpi b{display:block;font-family:var(--display);font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi span{font-size:13px;color:var(--muted);line-height:1.3;display:block}
.proj a.more{margin-top:auto;font-weight:600;color:var(--accent-text);text-decoration:none}
.proj a.more:hover{text-decoration:underline}
.proj.feature{flex-basis:min(600px,88vw)}
.proj.feature .ph{height:260px}
.track-hint{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;color:var(--muted);font-size:14px}
.track-bar{flex:1;height:2px;background:var(--line);position:relative;max-width:420px}
.track-bar i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:899px){
  .pin{height:auto!important}.pin-sticky{position:static}
  .track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important}
  .proj{scroll-snap-align:start}
}

/* wiki */
.wiki-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:28px}
.search{flex:1 1 280px;display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:999px;padding:0 18px;background:var(--surface);transition:border-color .2s}
.search:focus-within{border-color:var(--accent)}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:400 16px var(--body);padding:13px 0;outline:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.wiki-count{color:var(--muted);font-size:14px;margin-bottom:14px}
.wiki-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--line)}
.term{border-bottom:1px solid var(--line)}
.term summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:18px 0}
.term summary::-webkit-details-marker{display:none}
.term summary h3{font-family:var(--display);font-weight:800;text-transform:var(--dt);font-size:clamp(24px,2.4vw,30px);line-height:1}
.term summary .tag{font-size:13px;color:var(--muted);margin:0}
.term summary .tag::before{display:none}
.term summary .pl{grid-row:1/3;grid-column:2;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .3s,background .2s}
.term[open] summary .pl{transform:rotate(45deg);background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.term .body{padding:0 0 22px;display:grid;gap:12px;max-width:62ch}
.term .use{background:var(--accent-soft);border-radius:12px;padding:12px 16px;font-size:15px}
.term .use b{font-weight:600}
.term .rel{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted)}
.term .rel a{color:var(--accent-text);text-decoration:none;font-weight:500}
.term .rel a:hover{text-decoration:underline}
.term.flash summary h3{color:var(--accent-text)}
.empty{padding:28px 0;color:var(--muted)}
@media (max-width:760px){.wiki-list{grid-template-columns:1fr}}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:14px;cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s;min-width:0}
.post:hover{transform:translateY(-4px);border-color:var(--accent)}
.post .cat{font-size:13.5px;font-weight:600;color:var(--accent-text)}
.post h3{font-size:clamp(19px,1.7vw,22px)}
.post .ex{color:var(--muted);font-size:15.5px}
.post .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted);padding-top:8px}
.post .foot button{background:none;border:0;color:var(--ink);font:600 14px var(--body);cursor:pointer;padding:0}
.post.lead{grid-column:span 2;background:var(--night);border-color:var(--night);color:var(--night-ink);position:relative;overflow:hidden}
.post.lead .cat{color:var(--brand)}
.post.lead .ex,.post.lead .foot{color:#BDB9B0}
.post.lead .foot button{color:var(--brand)}
.post.lead h3{font-family:var(--display);font-weight:800;text-transform:var(--dt);font-size:clamp(30px,3.4vw,46px);line-height:.98}
.post-body{display:none}
@media (max-width:980px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr}.post.lead{grid-column:auto}}

.posters{margin-top:clamp(48px,7vw,88px)}
.posters-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:22px}
.posters-head h3{font-family:var(--display);font-weight:800;text-transform:var(--dt);font-size:clamp(28px,3vw,40px);line-height:1}
.posters-head p{color:var(--muted);max-width:44ch;font-size:15px}
.poster-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:start}
.poster{border-radius:14px;overflow:hidden;background:var(--night);aspect-ratio:9/16;max-width:100%;cursor:zoom-in;border:0;padding:0;will-change:transform}
.poster img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.poster:hover img{transform:scale(1.04)}
@media (max-width:760px){.poster-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:58%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.poster{scroll-snap-align:start;transform:none!important}}

.reader{position:fixed;inset:0;z-index:80;background:rgba(10,11,15,.55);display:flex;justify-content:flex-end}
.reader-panel{width:min(760px,100%);height:100%;background:var(--bg);overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 24px) clamp(20px,5vw,64px) calc(env(safe-area-inset-bottom,0px) + 64px);animation:slidein .45s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{transform:translateX(40px);opacity:.4}}
.reader-panel .close{position:sticky;top:0;margin-left:auto;display:grid;background:var(--bg);color:var(--ink)}
.reader-panel .cat{color:var(--accent-text);font-weight:600;font-size:14px;margin-top:8px}
.reader-panel h2{font-size:clamp(34px,5vw,56px);margin:12px 0 18px}
.reader-panel .rmeta{color:var(--muted);font-size:14px;margin-bottom:28px}
.prose{font-size:18px;line-height:1.72;max-width:64ch}
.prose p+p,.prose h4+p,.prose ul+p,.prose p+ul,.prose p+h4{margin-top:16px}
.prose h4{font-size:20px;margin:32px 0 0;line-height:1.3}
.prose ul{padding-left:20px;margin:0}
.prose li+li{margin-top:6px}
.prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);font-size:20px}
.reader .ctas{display:flex;gap:12px}

/* media kit */
#mediakit,.dark-sec{background:var(--night);color:var(--night-ink);--surface:#171920;--line:#2a2d37;--muted:#A3A09A;--ink:#F2F1EE}
#mediakit .sec-head p,.dark-sec .sec-head p{color:#A3A09A}
.mk-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:32px}
.mk-tabs button{background:transparent;border:1px solid #33363f;color:#CFCCC4;border-radius:999px;padding:10px 18px;font:500 15px var(--body);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.mk-tabs button:hover{border-color:var(--brand)}
.mk-tabs button[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.mk-tabs .count{opacity:.7;margin-left:6px;font-size:13px}
@media (max-width:640px){.mk-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}.mk-tabs button{white-space:nowrap}}
.mk-panel{animation:fadein .5s ease}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}}
.bio-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,48px);align-items:start}
.bio-photo{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;max-width:100%;position:relative}
.bio-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.bio{background:#171920;border:1px solid #2a2d37;border-radius:var(--r);padding:20px 22px}
.bio+.bio{margin-top:12px}
.bio .bl{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px;font-size:14px;color:#A3A09A}
.bio p{font-size:16px}
.copy-btn{background:none;border:1px solid #3a3d47;border-radius:999px;padding:6px 12px;font:500 13px var(--body);color:inherit;cursor:pointer}
.copy-btn.ok{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.topics{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.topics li{background:#171920;border:1px solid #2a2d37;border-radius:var(--r);padding:24px;display:grid;gap:8px;align-content:start}
.topics h3{font-family:var(--display);font-weight:800;text-transform:var(--dt);font-size:clamp(24px,2.4vw,30px);line-height:1}
.topics p{color:#A3A09A;font-size:15.5px}
.topics .fmt{font-size:13.5px;color:var(--brand);font-weight:500}
@media (max-width:760px){.topics,.bio-grid{grid-template-columns:1fr}.bio-photo{max-width:360px}}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:200px;grid-auto-flow:dense;gap:12px}
.gi{position:relative;border-radius:14px;overflow:hidden;background:#171920;border:0;padding:0;cursor:zoom-in;color:#F2F1EE;text-align:left}
.gi.w2{grid-column:span 2}.gi.h2{grid-row:span 2}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.gi:hover img{transform:scale(1.06)}
.gi .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(transparent,rgba(10,11,15,.88));display:grid;gap:2px}
.gi .cap b{font-family:var(--display);font-weight:800;text-transform:var(--dt);font-size:20px;line-height:1}
.gi .cap span{font-size:13px;color:#CFCCC4;line-height:1.3}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:160px}}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vc{text-decoration:none;display:grid;gap:12px}
.vc .th{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:14px;overflow:hidden;background:#171920}
.vc .th img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.vc:hover .th img{transform:scale(1.05)}
.vc .play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--brand);display:grid;place-items:center;transform:scale(.85);opacity:.92;transition:transform .3s,opacity .3s;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.vc:hover .play{transform:scale(1);opacity:1}
.vc .play::after{content:"";border-left:15px solid var(--brand-ink);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.vc b{font-weight:600;font-size:16px;line-height:1.35;display:block}
.vc span{font-size:13.5px;color:#A3A09A}
.more-vids{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;align-items:center;color:#A3A09A;font-size:14px}
.more-vids a{border:1px solid #33363f;border-radius:999px;padding:7px 14px;text-decoration:none;color:#E9E6DF;font-size:14px}
.more-vids a:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:900px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.vgrid{grid-template-columns:1fr}}
.press-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px}
.pc{background:#171920;border:1px solid #2a2d37;border-radius:14px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:border-color .2s}
.pc:hover{border-color:var(--brand)}
.pc .th{height:170px;overflow:hidden;background:#fff}
.pc .th img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.pc:hover .th img{transform:scale(1.04)}
.pc .tx{padding:14px 16px 16px;display:grid;gap:4px}
.pc .tx b{font-family:var(--display);font-weight:800;text-transform:var(--dt);font-size:20px;color:var(--brand);line-height:1}
.pc .tx span{font-size:15px;line-height:1.35}
@media (max-width:900px){.press-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.press-cards{grid-template-columns:1fr}}
.publist{border-top:1px solid #2a2d37}
.pub{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:6px 20px;align-items:baseline;padding:14px 0;border-bottom:1px solid #2a2d37;text-decoration:none}
.pub .po{font-family:var(--display);font-weight:700;text-transform:var(--dt);font-size:17px}
.pub .pt{transition:color .2s}
.pub:hover .pt{color:var(--brand)}
.pub .pd{color:#A3A09A;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:640px){.pub{grid-template-columns:1fr auto}.pub .pt{grid-column:1/-1;grid-row:2}}
.letters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.letter{border:0;padding:0;background:#fff;border-radius:10px;overflow:hidden;aspect-ratio:3/4;max-width:100%;cursor:zoom-in;transition:transform .35s}
.letter:hover{transform:translateY(-6px) rotate(-1deg)}
.letter img{width:100%;height:100%;object-fit:contain}
.letters figcaption{font-size:13.5px;color:#A3A09A;margin-top:8px;line-height:1.35}
@media (max-width:900px){.letters{grid-template-columns:repeat(2,minmax(0,1fr))}}
.clients{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;margin-top:28px;color:var(--muted);font-size:14px}
.clients b{font-family:var(--display);font-weight:800;text-transform:var(--dt);font-size:22px;color:var(--ink)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(6,7,10,.94);display:grid;grid-template-rows:auto 1fr auto;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 18px);color:#F2F1EE}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lb-top .icon-btn{color:#F2F1EE}
.lb-stage{display:grid;place-items:center;min-height:0;position:relative}
.lb-stage img{max-width:min(1200px,100%);max-height:100%;object-fit:contain;border-radius:8px;animation:fadein .35s ease}
.lb-cap{text-align:center;font-size:15px;color:#CFCCC4;margin-top:12px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:#F2F1EE;background:rgba(10,11,15,.5)}
.lb-prev{left:0}.lb-next{right:0}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:600;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font:400 26px var(--body);color:var(--accent-text);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--muted);max-width:62ch}
@media (max-width:820px){.faq{grid-template-columns:1fr}}

/* contact */
.contact{background:var(--night);color:var(--night-ink);border-radius:clamp(20px,3vw,36px);position:relative;overflow:hidden;min-height:440px;display:grid;align-items:end}
.contact .bgimg{position:absolute;inset:-12% 0;will-change:transform}
.contact .bgimg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.55}
.contact::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,15,.95),rgba(10,11,15,.55) 60%,rgba(10,11,15,.2))}
.contact .inner{position:relative;z-index:1;padding:clamp(32px,6vw,80px)}
.contact h2{font-size:clamp(44px,7vw,96px);line-height:.9;max-width:12ch}
.contact h2 span{color:var(--brand)}
.contact p{max-width:48ch;margin-top:18px;color:#CFCCC4;font-size:var(--step-1)}
.contact .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.contact .btn{color:var(--night-ink)}
.contact .btn:hover{background:var(--night-ink);color:var(--night)}
.contact .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.handle{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:15px;color:#CFCCC4;flex-wrap:wrap}
.handle code{font:500 15px var(--body);background:rgba(242,241,238,.12);padding:6px 12px;border-radius:999px;color:#F2F1EE;user-select:all}

footer{padding-block:48px 56px;color:var(--muted);font-size:14.5px}
.foot-grid{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:flex-start;border-top:1px solid var(--line);padding-top:32px}
.socials{display:flex;flex-wrap:wrap;gap:8px 18px;max-width:640px}
.socials a{text-decoration:none}
.socials a:hover{color:var(--ink)}
footer .logo{color:var(--ink)}

@media (max-width:900px){
  .how-grid,.about-grid,.sec-head{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3){padding-left:0;border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .portrait{max-width:440px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .trust-row{animation:none}
}

/* ===== v3: brand tokens, accent presets, font pairs ===== */
:root{--brand:#F5AE1B;--brand-ink:#13151C;--dt:uppercase;--dw:800;--ds:1;--dlh:.9;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
:root[data-accent="cobalt"]{--brand:#7C87FF;--brand-ink:#0B0D1A;--accent:#2E3BEF;--accent-ink:#FFFFFF;--accent-text:#2E3BEF;--accent-soft:#E2E4FF}
:root[data-accent="emerald"]{--brand:#2FD39A;--brand-ink:#06140E;--accent:#0E9F6E;--accent-ink:#FFFFFF;--accent-text:#0B7A55;--accent-soft:#D5F5E8}
:root[data-accent="coral"]{--brand:#FF6B5B;--brand-ink:#1A0805;--accent:#E5483A;--accent-ink:#FFFFFF;--accent-text:#B8321F;--accent-soft:#FDE1DC}
:root[data-accent="violet"]{--brand:#B18CFF;--brand-ink:#12081F;--accent:#7C4DFF;--accent-ink:#FFFFFF;--accent-text:#6236E0;--accent-soft:#EBE3FF}
@media (prefers-color-scheme: dark){
  :root[data-accent="cobalt"]:not([data-theme="light"]){--accent:#8C95FF;--accent-ink:#0E0F14;--accent-text:#A3AAFF;--accent-soft:#1E2452}
  :root[data-accent="emerald"]:not([data-theme="light"]){--accent:#34D399;--accent-ink:#0E0F14;--accent-text:#5EE0B0;--accent-soft:#10291F}
  :root[data-accent="coral"]:not([data-theme="light"]){--accent:#FF7A6B;--accent-ink:#0E0F14;--accent-text:#FF9488;--accent-soft:#33160F}
  :root[data-accent="violet"]:not([data-theme="light"]){--accent:#B18CFF;--accent-ink:#0E0F14;--accent-text:#C4A8FF;--accent-soft:#24183D}
}
:root[data-accent="cobalt"][data-theme="dark"]{--accent:#8C95FF;--accent-ink:#0E0F14;--accent-text:#A3AAFF;--accent-soft:#1E2452}
:root[data-accent="emerald"][data-theme="dark"]{--accent:#34D399;--accent-ink:#0E0F14;--accent-text:#5EE0B0;--accent-soft:#10291F}
:root[data-accent="coral"][data-theme="dark"]{--accent:#FF7A6B;--accent-ink:#0E0F14;--accent-text:#FF9488;--accent-soft:#33160F}
:root[data-accent="violet"][data-theme="dark"]{--accent:#B18CFF;--accent-ink:#0E0F14;--accent-text:#C4A8FF;--accent-soft:#24183D}

:root[data-font="geo"]{--display:"Unbounded","Arial Black",system-ui,sans-serif;--body:"Manrope","Segoe UI",system-ui,sans-serif;--dt:none;--dw:700;--ds:.62;--dlh:1}
:root[data-font="journal"]{--display:"Playfair Display",Georgia,"Times New Roman",serif;--body:"Onest","Segoe UI",system-ui,sans-serif;--dt:none;--dw:800;--ds:.78;--dlh:1}
:root[data-font="techno"]{--display:"Russo One","Arial Black",system-ui,sans-serif;--body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;--dt:uppercase;--dw:400;--ds:.64;--dlh:1}
h1,h2,.hl,.band-row,.contact h2,.logo,.stat b,.kpi b,.proj h3,.term summary h3,.post.lead h3,.posters-head h3,.topics h3,.gi .cap b,.pc .tx b,.pub .po,.trust-row a,.trust-row span,.mnav a,.core b,.dot b,.path .n{font-weight:var(--dw)}
h2{font-size:calc(var(--step-3) * (0.35 + var(--ds) * .65));line-height:var(--dlh)}
.hl{font-size:calc(clamp(3rem,8.6vw,7.6rem) * var(--ds));line-height:var(--dlh)}
.hl.sm{font-size:calc(clamp(2.6rem,6.4vw,5.8rem) * var(--ds))}
.band-row{font-size:calc(clamp(72px,15vw,240px) * var(--ds))}
.contact h2{font-size:calc(clamp(44px,7vw,96px) * var(--ds))}
.post.lead h3{font-size:calc(clamp(30px,3.4vw,46px) * (0.4 + var(--ds) * .6));line-height:var(--dlh)}
.proj h3,.topics h3,.term summary h3{font-size:calc(clamp(24px,2.6vw,34px) * (0.4 + var(--ds) * .6))}

/* ===== appearance panel ===== */
.look{position:fixed;z-index:75;top:calc(env(safe-area-inset-top,0px) + 80px);right:max(16px,calc((100vw - var(--maxw))/2 + var(--gutter)));width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 100px);overflow-y:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 30px 80px -30px rgba(0,0,0,.45);animation:lookin .3s cubic-bezier(.2,.8,.2,1)}
@keyframes lookin{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.look-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.look-h b{font-size:17px}
.look .icon-btn{color:var(--ink);width:34px;height:34px}
.look fieldset{border:0;padding:0;margin:0 0 18px}
.look legend{font-size:13.5px;color:var(--muted);margin-bottom:8px;padding:0}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--bg);border-radius:12px;padding:4px}
.seg button{border:0;background:transparent;color:var(--ink);border-radius:9px;padding:9px 6px;font:500 14px var(--body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);box-shadow:0 2px 8px -3px rgba(0,0,0,.25);font-weight:600}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.sw{border:2px solid transparent;background:none;border-radius:12px;padding:6px 2px;cursor:pointer;color:var(--ink);font:500 12px var(--body);display:grid;justify-items:center;gap:6px}
.sw i{width:32px;height:32px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 3px var(--surface),0 0 0 1px var(--line)}
.sw[aria-pressed="true"]{border-color:var(--ink)}
.pairs{display:grid;gap:8px}
.pair{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:12px 14px;text-align:left;cursor:pointer;display:grid;gap:2px;transition:border-color .2s}
.pair:hover{border-color:var(--muted)}
.pair[aria-pressed="true"]{border-color:var(--accent)}
.pair .pd{font-size:22px;line-height:1.05}
.pair .pb{font-size:13.5px;color:var(--muted)}
.pair .pn{font-size:12px;color:var(--muted)}
.look-reset{width:100%;justify-content:center}

/* ===== practice ===== */
#practice{background:var(--night);color:var(--night-ink);--surface:#171920;--line:#2a2d37;--muted:#A3A09A;--ink:#F2F1EE;overflow:hidden}
#practice .sec-head p{color:#A3A09A}
.pr-grid{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:clamp(20px,4vw,56px);align-items:start}
.pr-tabs{display:grid;gap:8px}
.pr-tab{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;align-items:center;text-align:left;border:1px solid #2a2d37;background:transparent;color:#F2F1EE;border-radius:16px;padding:16px 18px;cursor:pointer;transition:border-color .25s,background .25s;position:relative;overflow:hidden}
.pr-tab:hover{border-color:#4a4d57}
.pr-tab svg{grid-row:1/3;color:var(--brand)}
.pr-tab b{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(28px * (0.45 + var(--ds) * .55));line-height:1}
.pr-tab span{font-size:14px;color:#A3A09A;line-height:1.35}
.pr-tab[aria-selected="true"]{background:#171920;border-color:var(--brand)}
.pr-tab .tp{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--brand);transform-origin:0 50%;transform:scaleX(0)}
.pr-tab[aria-selected="true"] .tp{animation:fill 9s linear forwards}
#practice.hold .pr-tab .tp{animation:none}
.pr-stage{background:#121318;border:1px solid #2a2d37;border-radius:22px;padding:clamp(18px,3vw,32px);min-width:0}
.pr-panel{display:grid;gap:22px}
.pr-panel h3{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(clamp(30px,3.4vw,46px) * (0.4 + var(--ds) * .6));line-height:var(--dlh)}
.pr-panel>p{color:#CFCCC4;max-width:60ch}
.pr-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.pr-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pr-list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:15px;color:#E9E6DF}
.pr-list li::before{content:"";width:8px;height:8px;margin-top:8px;border-radius:2px;background:var(--brand)}
.pr-tools{display:flex;flex-wrap:wrap;gap:6px;align-content:start}
.pr-tools span{border:1px solid #33363f;border-radius:999px;padding:5px 12px;font-size:13px;color:#CFCCC4}
.pr-links{display:flex;flex-wrap:wrap;gap:10px}
.pr-links .btn{color:#F2F1EE;padding:11px 18px}
.pr-links .btn:hover{background:#F2F1EE;color:#0A0B0F}
.pr-links .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
@media (max-width:900px){.pr-grid,.pr-two{grid-template-columns:1fr}.pr-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.pr-tab{grid-template-columns:1fr;padding:14px}.pr-tab svg{grid-row:auto}.pr-tab span{display:none}}
/* demo surfaces */
.demo{border-radius:16px;background:#0A0B0F;border:1px solid #23252d;overflow:hidden;font-size:14px}
.demo-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid #23252d;color:#7d7a73;font-size:12.5px}
.demo-bar i{width:10px;height:10px;border-radius:50%;background:#2c2f38}
.demo-bar em{font-style:normal;margin-left:8px}
.demo-body{padding:16px 18px;display:grid;gap:8px;min-height:230px;align-content:start}
.term-line{font-family:var(--mono);font-size:13.5px;color:#CFCCC4;white-space:pre-wrap;word-break:break-word}
.term-line.in{color:#F2F1EE}
.term-line.in::before{content:"› ";color:var(--brand)}
.term-line.ok::before{content:"✓ ";color:#4ADE80}
.term-line.cmt{color:#6f6c66}
.caret{display:inline-block;width:8px;height:1.1em;background:var(--brand);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;position:relative;padding:22px 18px 8px}
.flow::before{content:"";position:absolute;left:28px;right:28px;top:44px;height:2px;background:#2a2d37}
.flow .pulse{position:absolute;top:39px;left:28px;width:12px;height:12px;border-radius:50%;background:var(--brand);box-shadow:0 0 18px var(--brand);opacity:0}
.fnode{position:relative;display:grid;justify-items:center;gap:8px;text-align:center}
.fnode i{width:46px;height:46px;border-radius:14px;background:#171920;border:1px solid #33363f;display:grid;place-items:center;color:var(--brand);font-style:normal;font-family:var(--display);font-weight:var(--dw);font-size:18px;transition:background .3s,border-color .3s,color .3s}
.fnode b{font-size:13px;font-weight:600;color:#F2F1EE;line-height:1.2}
.fnode span{font-size:12px;color:#8d8a83;line-height:1.25}
.flow-out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px 18px 18px}
.flow-out img{width:100%;aspect-ratio:9/12;object-fit:cover;object-position:top;border-radius:10px;max-width:100%}
.roadmap{list-style:none;margin:0;padding:18px;display:grid;gap:0;position:relative}
.roadmap li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px dashed #23252d}
.roadmap li:last-child{border-bottom:0}
.roadmap .st{width:14px;height:14px;border-radius:50%;border:2px solid #4a4d57;justify-self:center}
.roadmap li.done .st{background:var(--brand);border-color:var(--brand)}
.roadmap b{font-weight:600;font-size:14.5px}
.roadmap small{display:block;color:#8d8a83;font-size:12.5px}
.roadmap em{font-style:normal;font-size:12px;color:#8d8a83;border:1px solid #2a2d37;border-radius:999px;padding:3px 9px}
.roadmap li.done em{color:var(--brand-ink);background:var(--brand);border-color:var(--brand)}
.chat{display:grid;gap:10px;padding:16px 18px 18px;min-height:250px;align-content:start}
.msg{max-width:86%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.45}
.msg.u{justify-self:end;background:#262833;border-bottom-right-radius:4px}
.msg.a{background:#171920;border:1px solid #2a2d37;border-bottom-left-radius:4px}
.msg.a b{color:var(--brand);font-weight:600}
.toolcall{font-family:var(--mono);font-size:12.5px;color:#8d8a83;display:flex;gap:8px;align-items:center}
.toolcall::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ADE80;box-shadow:0 0 8px #4ADE80}
/* play sequence: resting state is fully visible; .play replays it */
.pr-panel.play .seq{animation:seqin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * .55s)}
@keyframes seqin{from{opacity:0;transform:translateY(8px)}}
.pr-panel.play .flow .pulse{animation:pulse 4.5s ease-in-out .3s infinite}
@keyframes pulse{0%{left:28px;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(100% - 40px);opacity:0}}
.pr-panel.play .fnode i{animation:lit 4.5s .3s infinite;animation-delay:calc(.3s + var(--i,0) * .9s)}
@keyframes lit{0%,6%{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}20%,100%{background:#171920;color:var(--brand);border-color:#33363f}}
.pr-panel.play .roadmap li .st{animation:stfill .4s both;animation-delay:calc(var(--i,0) * .55s)}
@keyframes stfill{from{background:transparent;border-color:#4a4d57}}
@media (max-width:560px){.flow{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding-inline:8px}.flow::before{left:20px;right:20px}.fnode i{width:38px;height:38px;font-size:15px}.fnode span{display:none}.fnode b{font-size:11.5px}}

/* ===== courses ===== */
.cr-filter{margin-bottom:24px}
.cr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;grid-auto-flow:dense}
.cr{--mx:50%;--my:50%;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:border-color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.cr::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%);opacity:0;transition:opacity .3s}
.cr:hover{border-color:var(--accent);transform:translateY(-4px)}
.cr:hover::after{opacity:1}
.cr-img{height:190px;overflow:hidden;background:var(--night);position:relative}
.cr-img img{width:100%;height:115%;object-fit:cover;transform:translate3d(calc((var(--mx-n,0)) * -12px),calc(var(--my-n,0) * -10px - 6%),0) scale(1.04);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cr-in{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1;position:relative;z-index:1}
.cr-tag{font-size:13px;font-weight:600;color:var(--accent-text)}
.cr h3{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(clamp(28px,2.8vw,38px) * (0.42 + var(--ds) * .58));line-height:var(--dlh)}
.cr-sub{font-weight:500;font-size:16px;line-height:1.35}
.cr-list{list-style:none;padding:0;margin:4px 0 6px;display:grid;gap:6px;color:var(--muted);font-size:15px}
.cr-list li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px}
.cr-list li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);margin-top:9px}
.cr-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.cr-actions .btn{padding:11px 18px}
.cr-wide{grid-column:span 2;flex-direction:row}
.cr-wide .cr-img{height:auto;width:46%;flex:none}
.cr-wide .cr-img img{height:100%}
/* featured */
.cr-feature{grid-column:1/-1;background:var(--night);color:var(--night-ink);border-color:var(--night);padding:clamp(22px,3.4vw,40px);gap:26px}
.cr-feature::after{background:radial-gradient(520px circle at var(--mx) var(--my),color-mix(in srgb,var(--brand) 18%,transparent),transparent 60%)}
.cr-feature:hover{border-color:var(--brand);transform:none}
.cr-fhead{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px 40px;align-items:end;position:relative;z-index:1}
.cr-feature .cr-tag{color:var(--brand)}
.cr-feature h3{font-size:calc(clamp(30px,4.3vw,62px) * var(--ds));margin-top:10px}
.cr-feature h3 span{color:var(--brand)}
.cr-fhead p{color:#CFCCC4;max-width:52ch}
.pipe{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;z-index:1}
.pipe-line{position:absolute;left:0;right:0;top:50%;height:2px;background:#2a2d37;transform:translateY(-50%)}
.pipe-line i{position:absolute;inset:0;background:var(--brand);transform-origin:0 50%;transform:scaleX(.1);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pst{position:relative;border:1px solid #33363f;background:#121318;color:#F2F1EE;border-radius:16px;padding:14px 16px;text-align:left;cursor:pointer;display:grid;gap:2px;transition:background .3s,border-color .3s,color .3s,transform .3s}
.pst b{font-family:var(--display);font-weight:var(--dw);font-size:14px;color:#8d8a83;font-variant-numeric:tabular-nums}
.pst span{font-family:var(--display);font-weight:var(--dw);text-transform:uppercase;letter-spacing:.02em;font-size:calc(clamp(18px,2vw,30px) * (0.45 + var(--ds) * .55));line-height:1;overflow-wrap:anywhere}
.pst:hover{border-color:#5a5d67}
.pst.past{border-color:color-mix(in srgb,var(--brand) 50%,#33363f)}
.pst.past span{color:color-mix(in srgb,var(--brand) 70%,#F2F1EE)}
.pst[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);transform:translateY(-3px)}
.pst[aria-selected="true"] b{color:var(--brand-ink);opacity:.7}
.pipe-detail{position:relative;z-index:1;min-height:96px}
.pd-item{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px 40px;align-items:start;animation:fadein .45s ease}
.pd-item h4{margin:0;font-size:20px;font-weight:600;line-height:1.3}
.pd-item p{color:#CFCCC4}
.cr-feature .cr-actions{position:relative;z-index:1;padding-top:0}
.cr-feature .btn{color:var(--night-ink)}
.cr-feature .btn:hover{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.cr-feature .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
@media (max-width:980px){.cr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cr-wide{grid-column:1/-1}}
@media (max-width:720px){
  .cr-grid{grid-template-columns:1fr}
  .cr-wide{flex-direction:column}.cr-wide .cr-img{width:100%;height:190px}
  .cr-fhead,.pd-item{grid-template-columns:1fr}
  .pipe{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(120px,1fr);overflow-x:auto;padding:4px 2px 8px}
  .pipe-line{display:none}
}
@media (prefers-reduced-motion:reduce){.cr:hover{transform:none}}
/* ===== courses v2 ===== */
.vfacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.vfacts span{border:1px solid #33363f;border-radius:999px;padding:6px 14px;font-size:14px;color:#CFCCC4}
.vfacts b{font-family:var(--display);font-weight:var(--dw);color:var(--brand);font-size:18px;margin-right:4px}
.vcmp{position:relative;z-index:1;display:grid;gap:12px}
.vcmp-sw{display:inline-flex;gap:4px;background:#121318;border:1px solid #2a2d37;border-radius:999px;padding:4px;justify-self:start}
.vsw{border:0;background:transparent;color:#CFCCC4;border-radius:999px;padding:8px 16px;font:500 14px var(--body);cursor:pointer}
.vsw[aria-pressed="true"]{background:#F2F1EE;color:#0A0B0F;font-weight:600}
.vsw[data-m="vibe"][aria-pressed="true"]{background:#3a1f1f;color:#FF8A80}
.vflow .vf{display:flex;flex-wrap:wrap;gap:6px 0;align-items:center}
.vflow[data-m="vibe"] .vf-eng,.vflow[data-m="eng"] .vf-vibe{display:none}
.vf span{font-family:var(--mono);font-size:13px;letter-spacing:.02em;text-transform:uppercase;padding:7px 11px;border-radius:9px;background:#171920;border:1px solid #2a2d37;color:#E9E6DF}
.vf span:not(:last-child)::after{content:"→";position:relative;left:11px;margin-left:0;color:#5c5f69;display:inline-block;width:0}
.vf span:not(:last-child){margin-right:22px}
.vf-eng span{border-color:color-mix(in srgb,var(--brand) 40%,#2a2d37)}
.vf-eng span:last-child{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.vf .bad{background:#2a1515;border-color:#5a2626;color:#FF8A80}
.vflow.play span{animation:seqin .35s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k) * .09s)}
.pd-item>div{display:grid;gap:4px}
.pd-meta{font-family:var(--mono);font-size:12.5px;color:var(--brand)}
.laws{position:relative;z-index:1;overflow:hidden;border-block:1px solid #2a2d37;margin-inline:calc(-1 * clamp(22px,3.4vw,40px))}
.laws-row{display:flex;gap:40px;width:max-content;padding:14px 0;animation:marquee 30s linear infinite}
.laws:hover .laws-row{animation-play-state:paused}
.laws-row span{font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;color:#E9E6DF;display:flex;align-items:center;gap:10px}
.laws-row i{font-style:normal;font-family:var(--display);font-weight:var(--dw);font-size:22px;color:var(--brand)}
.tariffs{margin-top:6px;display:grid;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px}
.tf-sw{display:flex;flex-wrap:wrap;gap:4px}
.tf-sw button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 12px;font:500 13.5px var(--body);cursor:pointer}
.tf-sw button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tf{display:grid;gap:2px;animation:fadein .35s ease}
.tf-p{font-family:var(--display);font-weight:var(--dw);font-size:calc(34px * (0.5 + var(--ds) * .5));line-height:1;font-variant-numeric:tabular-nums}
.tf span{font-size:14px;color:var(--muted)}
.tf-note{font-size:13px;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px}
.cr-free{display:flex;flex-wrap:wrap;gap:6px}
.cr-free span{font-size:12.5px;border-radius:999px;padding:4px 10px;background:var(--accent-soft);color:var(--ink)}
.cr-free span:first-child{background:var(--accent);color:var(--accent-ink);font-weight:600}
.sheet-t{width:100%;border-collapse:collapse;font-size:15.5px;margin-top:12px}
.sheet-t th,.sheet-t td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.sheet-t th{font-size:13px;color:var(--muted);font-weight:600}
.sheet-t td:last-child{font-weight:500}
.sheet-t tr td:only-child{font-weight:400}
.prose .sheet-t{display:table}
.proj .ph.type{display:grid;place-items:end start;padding:22px;background:var(--night);color:var(--night-ink)}
.proj .ph.type b{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(54px * var(--ds));line-height:.9;color:var(--brand)}
.proj .ph.type span{font-size:13px;color:#A3A09A;margin-top:6px;display:block}
@media (max-width:720px){.laws{margin-inline:calc(-1 * 22px)}.vf span{font-size:12px;padding:6px 8px}.vf span:not(:last-child){margin-right:18px}.vf span:not(:last-child)::after{left:9px}}
/* ===== work / projects portfolio ===== */
.wk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:28px}
.wk-stats div{padding:18px 18px 16px 0;display:grid;gap:2px}
.wk-stats div+div{padding-left:18px;border-left:1px solid var(--line)}
.wk-stats b{font-family:var(--display);font-weight:var(--dw);font-size:calc(52px * (0.5 + var(--ds) * .5));line-height:1;color:var(--accent-text);font-variant-numeric:tabular-nums}
.wk-stats span{font-size:14.5px;color:var(--muted)}
.wk-filter{margin-bottom:26px}
.chip .cnt{font-size:12px;opacity:.6;margin-left:4px;font-variant-numeric:tabular-nums}
.wk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.wk{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0;transition:border-color .25s,transform .4s cubic-bezier(.2,.8,.2,1)}
.wk:hover{border-color:var(--accent);transform:translateY(-4px)}
.wk-shot{border:0;padding:0;margin:0;background:var(--night);cursor:zoom-in;display:block;text-align:left;width:100%;--tx:0;--ty:0}
.wk-bar{display:flex;align-items:center;gap:5px;padding:8px 12px;background:#1b1d24;color:#8d8a83;font-size:11.5px}
.wk-bar i{width:8px;height:8px;border-radius:50%;background:#3a3d47}
.wk-bar em{font-style:normal;margin-left:8px;background:#0E0F14;border-radius:6px;padding:2px 10px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-img{display:block;aspect-ratio:4/3;max-width:100%;overflow:hidden;position:relative}
.wk-img img{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.02) translate3d(var(--tx),var(--ty),0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.wk:hover .wk-img img{transform:scale(1.07) translate3d(var(--tx),var(--ty),0)}
.wk-in{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.wk-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12.5px}
.wk-cat{color:var(--muted)}
.wk-st{border-radius:999px;padding:3px 10px;font-weight:600;white-space:nowrap}
.wk-st.ok{background:color-mix(in srgb,#22C55E 16%,transparent);color:color-mix(in srgb,#16A34A 80%,var(--ink))}
.wk-st.demo{background:var(--accent-soft);color:var(--accent-text)}
.wk-st.dev{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)}
.wk-st.corp{background:color-mix(in srgb,#E11D48 14%,transparent);color:color-mix(in srgb,#E11D48 80%,var(--ink))}
.wk h3{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(clamp(24px,2.3vw,30px) * (0.45 + var(--ds) * .55));line-height:var(--dlh)}
.wk p{color:var(--muted);font-size:15px}
.wk-facts{display:flex;flex-wrap:wrap;gap:6px}
.wk-facts span{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.wk-act{display:flex;gap:16px;margin-top:auto;padding-top:6px;align-items:center}
.wk-more{border:0;background:none;padding:0;font:600 14.5px var(--body);color:var(--ink);cursor:pointer}
.wk-open{font-weight:600;font-size:14.5px;color:var(--accent-text);text-decoration:none}
.wk-open:hover,.wk-more:hover{text-decoration:underline}
@media (max-width:980px){.wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wk-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.wk-stats div:nth-child(3){padding-left:0;border-left:0}.wk-stats div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:620px){.wk-grid{grid-template-columns:1fr}}
/* mocks */
.mock{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.mock-tma{background:radial-gradient(circle at 70% 20%,#3b2d16,#0c0b10 60%)}
.phone{width:46%;min-width:150px;aspect-ratio:9/16;max-height:88%;border-radius:22px;border:2px solid #3a3426;background:#14120d;padding:14px 12px;display:grid;align-content:start;gap:8px;color:#EADFC4;font-size:11px}
.ph-top{font-family:var(--display);font-weight:800;letter-spacing:.12em;color:#D9B25C;font-size:12px;text-align:center}
.ph-d{color:#9b8f72!important;font-size:10px!important;text-align:center}
.ph-card{background:#221d13;border:1px solid #3a3426;border-radius:12px;padding:9px;display:grid;gap:3px}
.ph-card b{color:#D9B25C;font-size:12px}
.ph-card span{line-height:1.35}
.ph-row{display:flex;justify-content:space-between;border-bottom:1px dashed #3a3426;padding:4px 2px}
.ph-row b{color:#D9B25C}
.mock-aroma{background:linear-gradient(140deg,#f3e3d8,#c9a3b8 55%,#6d4a74);color:#2b1730;place-items:end start;padding:22px}
.mock-aroma b{font-family:var(--display);font-weight:800;font-size:34px;line-height:.95;position:relative}
.ar-bottle{position:absolute;right:16%;top:16%;width:22%;aspect-ratio:3/4;border-radius:14px 14px 20px 20px;background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.15));box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 20px 40px rgba(60,20,60,.3)}
.ar-bottle::before{content:"";position:absolute;left:32%;right:32%;top:-22%;height:22%;border-radius:6px 6px 2px 2px;background:#2b1730}
.ar-tags{position:absolute;left:22px;top:22px;display:flex;flex-wrap:wrap;gap:6px;max-width:55%}
.ar-tags span{background:rgba(255,255,255,.55);border-radius:999px;padding:3px 10px;font-size:12px}
.mock-yt{background:linear-gradient(135deg,#1a1a1f,#3a0d10);color:#fff;place-items:center;text-align:center;align-content:center;gap:12px}
.mock-yt b{font-family:var(--display);font-weight:800;font-size:30px;line-height:.95}
.yt-play{width:64px;height:44px;border-radius:12px;background:#FF0033;position:relative;justify-self:center}
.yt-play::after{content:"";position:absolute;left:26px;top:12px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.yt-h{font-size:13px;color:#d9b3b5}
.sheet-shot{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--night);margin-bottom:20px}
.sheet-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.wiki-ext{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.wiki-ext p{color:var(--muted);max-width:60ch}
.wiki-ext b{color:var(--ink)}
.cr-corp{grid-column:1/-1;flex-direction:row}
.cr-corp .cr-img{width:32%;flex:none;height:auto}
.cr-corp .cr-img img{height:100%}
.ob-mods{list-style:none;counter-reset:ob;padding:0;margin:6px 0 4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ob-mods li{counter-increment:ob;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:3px;align-content:start}
.ob-mods li b{font-size:15px;font-weight:600}
.ob-mods li b::before{content:counter(ob,decimal-leading-zero) " ";font-family:var(--display);font-weight:var(--dw);color:var(--accent-text);margin-right:4px}
.ob-mods li span{font-size:13.5px;color:var(--muted);line-height:1.4}
.ob-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px;margin-top:auto;padding-top:6px}
.ob-proof{display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;text-align:left;cursor:zoom-in;color:var(--muted);font:400 13.5px/1.4 var(--body);max-width:420px}
.ob-proof img{width:46px;height:60px;object-fit:cover;object-position:top;border-radius:6px;border:1px solid var(--line);background:#fff;flex:none}
.cr-corp .cr-actions{margin-top:0;padding-top:0}
@media (max-width:980px){.ob-mods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.cr-corp{flex-direction:column}.cr-corp .cr-img{width:100%;height:190px}.ob-mods{grid-template-columns:1fr}}

/* ===== multipage additions ===== */
body{margin:0}
img{max-width:100%}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--brand);color:var(--brand-ink);padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{left:16px}
nav.main a[aria-current="page"]{opacity:1;background:color-mix(in srgb,currentColor 14%,transparent)}
.cta-consult{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--brand);color:var(--brand-ink);font:700 14.5px/1 var(--body);text-decoration:none;white-space:nowrap;position:relative;transition:transform .2s,box-shadow .3s;box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 60%,transparent);animation:ctaPulse 2.8s infinite;flex:none}
.cta-consult:hover{box-shadow:0 10px 30px -8px color-mix(in srgb,var(--brand) 80%,transparent)}
.cta-consult i{width:8px;height:8px;border-radius:50%;background:var(--brand-ink);opacity:.75}
.cta-consult .short{display:none}
@keyframes ctaPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (max-width:1240px){.bar .icon-btn#themeBtn{margin-left:auto}.burger{margin-left:0}}
@media (max-width:640px){.cta-consult .full{display:none}.cta-consult .short{display:inline}.cta-consult{padding:10px 14px;font-size:13.5px}.logo .lt{display:none}.bar{gap:10px}}
.mnav .cta-consult{margin-top:18px;align-self:flex-start;font-size:17px;padding:16px 22px}
.mnav a.cta-consult{border-bottom:0}

/* page hero */
.page-hero{position:relative;min-height:clamp(440px,64vh,640px);background:var(--night);color:var(--night-ink);overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;--px:0;--py:0;--sy:0}
.page-hero .media{position:absolute;inset:0}
.page-hero .media img{width:100%;height:112%;object-fit:cover;transform:translate3d(calc(var(--px)*-22px),calc(var(--py)*-14px + var(--sy)*1px),0) scale(1.06);will-change:transform;animation:phIn 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes phIn{from{transform:scale(1.16)}}
.page-hero .shade{background:linear-gradient(90deg,rgba(10,11,15,.94) 0%,rgba(10,11,15,.7) 45%,rgba(10,11,15,.25) 100%),linear-gradient(0deg,rgba(10,11,15,.9) 0%,rgba(10,11,15,0) 50%)}
.page-hero .ph-copy{position:relative;z-index:2;width:100%;padding-top:110px;padding-bottom:clamp(40px,6vw,72px);transform:translate3d(calc(var(--px)*8px),calc(var(--sy)*-.3px),0)}
.page-hero .ph-copy>*{max-width:min(760px,100%)}
.page-hero .hl{font-size:calc(clamp(2.8rem,7vw,6.2rem) * var(--ds))}
.page-hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.page-hero .btn{color:var(--night-ink)}
.page-hero .btn:hover{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.page-hero .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.page-hero .ph-copy>*{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.page-hero .ph-copy>*:nth-child(2){animation-delay:.1s}.page-hero .ph-copy>*:nth-child(3){animation-delay:.2s}.page-hero .ph-copy>*:nth-child(4){animation-delay:.3s}
.crumbs{display:flex;gap:8px;font-size:14px;color:#A3A09A;margin-bottom:16px}
.crumbs a{color:#CFCCC4;text-decoration:none}
.crumbs a:hover{color:var(--brand)}
.ph-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ph-stats span{border:1px solid rgba(242,241,238,.25);border-radius:999px;padding:6px 14px;font-size:14px;color:#E9E6DF;background:rgba(10,11,15,.3);backdrop-filter:blur(6px)}
.ph-stats b{color:var(--brand);font-weight:700}

/* sticky sub-navigation */
.subnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 72px);z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto;padding-block:10px}
.subnav a{text-decoration:none;white-space:nowrap;padding:8px 14px;border-radius:999px;font-size:15px;color:var(--muted);transition:background .2s,color .2s}
.subnav a:hover{color:var(--ink)}
.subnav a.on{background:var(--ink);color:var(--bg)}
section[id]{scroll-margin-top:140px}

/* dark section (media, publications) */
.dark-sec{background:var(--night);color:var(--night-ink);--surface:#171920;--line:#2a2d37;--muted:#A3A09A;--ink:#F2F1EE}
.dark-sec .sec-head p{color:#A3A09A}
.dark-sec + .dark-sec{padding-top:0}
.subhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin:clamp(40px,6vw,72px) 0 22px}
.subhead h3{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(clamp(28px,3vw,42px) * (0.45 + var(--ds) * .55));line-height:var(--dlh)}
.subhead p{color:var(--muted);max-width:52ch;font-size:15px}

/* teaser rows on home */
.teasers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.tz{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;min-height:210px;transition:border-color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.tz:hover{border-color:var(--accent);transform:translateY(-4px)}
.tz b{overflow-wrap:anywhere;hyphens:auto;font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(26px * (0.45 + var(--ds) * .55));line-height:1}
.tz span{color:var(--muted);font-size:14.5px}
.tz em{margin-top:auto;font-style:normal;font-weight:600;color:var(--accent-text);font-size:14.5px}
.tz svg{color:var(--accent-text)}
@media (max-width:1100px){.teasers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.teasers{grid-template-columns:repeat(2,minmax(0,1fr))}.tz{min-height:0}}
.more-link{display:inline-flex;margin-top:26px;font-weight:600;color:var(--accent-text);text-decoration:none}
.more-link:hover{text-decoration:underline}
.mini-courses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mc{border-radius:var(--r);overflow:hidden;position:relative;min-height:260px;display:flex;align-items:flex-end;text-decoration:none;color:#F2F1EE;background:var(--night)}
.mc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s}
.mc:hover img{transform:scale(1.06);opacity:.75}
.mc div{position:relative;padding:18px;display:grid;gap:4px;background:linear-gradient(transparent,rgba(10,11,15,.92));width:100%;padding-top:60px}
.mc b{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(28px * (0.45 + var(--ds) * .55));line-height:1}
.mc span{font-size:13.5px;color:#CFCCC4}
@media (max-width:980px){.mini-courses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.mini-courses{grid-template-columns:1fr}}
.post-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pl{display:grid;gap:8px;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;transition:border-color .25s}
.pl:hover{border-color:var(--accent)}
.pl small{color:var(--accent-text);font-weight:600;font-size:13px}
.pl b{font-size:18px;line-height:1.3;font-weight:600}
.pl span{color:var(--muted);font-size:14.5px}
@media (max-width:860px){.post-links{grid-template-columns:1fr}}

/* about: experience + skills */
.exp{list-style:none;padding:0;margin:0;position:relative;display:grid;gap:0}
.exp::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--line)}
.exp li{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:18px;padding:0 0 30px}
.exp .dotx{width:24px;height:24px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);position:relative;z-index:1;margin-top:4px}
.exp li.cur .dotx{background:var(--accent)}
.exp .when{font-size:13.5px;color:var(--accent-text);font-weight:600}
.exp h3{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(clamp(26px,2.6vw,34px) * (0.45 + var(--ds) * .55));line-height:var(--dlh);margin:4px 0 6px}
.exp .role{font-weight:600;margin-bottom:6px}
.exp p{color:var(--muted);max-width:66ch}
.exp ul{margin:8px 0 0;padding-left:18px;color:var(--muted)}
.exp ul li{display:list-item;padding:0;grid-template-columns:none}
.exp ul li::marker{color:var(--accent)}
.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sk{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:22px;display:grid;gap:12px;align-content:start}
.sk h3{font-size:18px}
.sk p{color:var(--muted);font-size:14.5px}
.sk .meter{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.sk .meter i{display:block;height:100%;width:var(--v);background:var(--accent);border-radius:inherit;transform-origin:0 50%;animation:grow 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}}
.chips-s{display:flex;flex-wrap:wrap;gap:6px}
.chips-s span{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:4px 10px}
@media (max-width:980px){.skills{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.skills{grid-template-columns:1fr}}
.stack{display:flex;flex-wrap:wrap;gap:8px}
.stack span{padding:8px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:14px}
.stack span b{font-weight:600;color:var(--accent-text);margin-right:6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.regalia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.rg{padding:20px;border-radius:var(--r);background:var(--accent-soft);display:grid;gap:6px}
.rg b{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(28px * (0.45 + var(--ds) * .55));line-height:1}
.rg span{font-size:14px;color:var(--muted)}
@media (max-width:900px){.regalia{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* services */
.picker{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:28px}
.picker>span{color:var(--muted);font-size:15px;margin-right:6px}
.picker .linkbtn{border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer;font:500 14px var(--body)}
.svcs{display:grid;gap:18px}
.svc{--mx:50%;--my:50%;position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:border-color .3s,opacity .3s,transform .3s}
.svc::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%);opacity:0;transition:opacity .3s}
.svc:hover::after{opacity:1}
.svc.match{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.svc.dim{opacity:.45}
.svc-l{background:var(--night);color:var(--night-ink);padding:26px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;min-height:260px}
.svc-l img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;transform:translate3d(calc(var(--mx-n,0)*-14px),calc(var(--my-n,0)*-10px),0) scale(1.06);transition:transform .5s}
.svc-l>*{position:relative}
.svc-l .n{font-family:var(--mono);font-size:13px;color:var(--brand)}
.svc-l h3{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(clamp(24px,2.3vw,34px) * (0.45 + var(--ds) * .55));line-height:var(--dlh)}
.svc-l p{color:#CFCCC4}
.svc-price{margin-top:auto;display:grid;gap:2px}
.svc-price small{color:#A3A09A;font-size:13px}
.svc-price b{font-family:var(--display);font-weight:var(--dw);font-size:calc(30px * (0.5 + var(--ds) * .5));color:var(--brand);line-height:1;font-variant-numeric:tabular-nums}
.svc-r{padding:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;position:relative;z-index:1}
.svc-r h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text)}
.svc-r ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px}
.svc-r ul li::marker{color:var(--accent)}
.svc-cta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-top:1px dashed var(--line);padding-top:16px}
.svc-cta .btn{padding:11px 18px}
.svc-cta small{color:var(--muted);margin-left:auto;font-size:13px}
@media (max-width:980px){.svc{grid-template-columns:1fr}.svc-r{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.svc-r{grid-template-columns:1fr}.svc-cta small{margin-left:0}}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:st}
.steps li{counter-increment:st;padding:20px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);display:grid;gap:6px;align-content:start;position:relative}
.steps li::before{content:counter(st,decimal-leading-zero);font-family:var(--display);font-weight:var(--dw);font-size:30px;color:var(--accent-text);line-height:1}
.steps b{font-size:16px}
.steps span{color:var(--muted);font-size:14px}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* cases page search */
.cs-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:24px}
.cs-tools .search{flex:1 1 260px;max-width:420px}

/* learn: materials */
.mats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mat{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:border-color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.mat:hover{border-color:var(--accent);transform:translateY(-4px)}
.mat-cover{height:150px;position:relative;overflow:hidden;background:var(--c1);display:grid;place-items:center}
.mat-cover .doc{width:92px;height:118px;border-radius:8px;background:rgba(255,255,255,.92);box-shadow:0 14px 30px -10px rgba(0,0,0,.4);transform:rotate(-6deg) translateY(16px);transition:transform .5s cubic-bezier(.2,.8,.2,1);display:grid;align-content:start;gap:6px;padding:12px 10px}
.mat:hover .mat-cover .doc{transform:rotate(-2deg) translateY(4px)}
.mat-cover .doc i{display:block;height:6px;border-radius:3px;background:#d8d6cf}
.mat-cover .doc i:first-child{background:var(--c2);width:70%;height:8px}
.mat-cover .doc i:nth-child(3){width:80%}.mat-cover .doc i:nth-child(4){width:60%}
.mat-cover .doc.node{display:block;padding:10px;background:#16181f}
.mat-cover .doc.node svg{width:100%;height:100%}
.mat-cover .tag2{position:absolute;left:14px;top:14px;background:rgba(10,11,15,.75);color:#F2F1EE;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600}
.mat-in{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.mat-in h3{font-size:18px;line-height:1.3}
.mat-in p{color:var(--muted);font-size:14.5px}
.mat-in .fmt{font-size:12.5px;color:var(--muted)}
.mat-in .btn{margin-top:auto;align-self:flex-start;padding:10px 16px}
@media (max-width:980px){.mats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.mats{grid-template-columns:1fr}}
.lead-box{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:24px 26px;border-radius:var(--r);background:var(--night);color:var(--night-ink)}
.lead-box p{color:#CFCCC4;max-width:58ch}
.lead-box b{color:#F2F1EE}
.lead-box .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}

/* media kit press portrait */
.press-portrait{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,48px);align-items:start}
.pp-photo{display:grid;gap:10px}
.pp-photo small{color:#A3A09A;font-size:13px}
.press-contacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.press-contacts a,.press-contacts div{border:1px solid #2a2d37;border-radius:14px;padding:16px 18px;text-decoration:none;display:grid;gap:4px;background:#171920}
.press-contacts b{font-weight:600}
.press-contacts span{font-size:13.5px;color:#A3A09A}
@media (max-width:760px){.press-portrait,.press-contacts{grid-template-columns:1fr}}

/* contacts page */
.ct-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ct{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:24px;display:flex;flex-direction:column;gap:10px;min-height:230px}
.ct.hot{background:var(--night);color:var(--night-ink);border-color:var(--night)}
.ct.hot p{color:#CFCCC4}
.ct.hot .cta-consult{align-self:flex-start;margin-top:auto;font-size:16px;padding:15px 22px}
.ct h3{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(30px * (0.45 + var(--ds) * .55));line-height:1}
.ct p{color:var(--muted);font-size:15px}
.ct .handle2{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto}
.ct .handle2 code{font:600 16px var(--body);background:var(--accent-soft);padding:8px 14px;border-radius:999px;user-select:all}
.ct .copy-btn{border-color:var(--line)}
.ct .btn{align-self:flex-start;margin-top:auto;padding:11px 18px}
.soc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.soc-grid a{border:1px solid var(--line);border-radius:14px;padding:14px;text-decoration:none;display:grid;gap:2px;background:var(--surface);transition:border-color .2s}
.soc-grid a:hover{border-color:var(--accent)}
.soc-grid b{font-weight:600}
.soc-grid span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:980px){.ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.soc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.ct-grid,.soc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ct-grid{grid-template-columns:1fr}}

/* footer sitemap */
.foot-cols{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:24px 32px;border-top:1px solid var(--line);padding-top:32px}
.foot-cols h4{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot-cols a{text-decoration:none}
.foot-cols a:hover{color:var(--ink)}
@media (max-width:820px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== mega menu ===== */
.mi-list{list-style:none;margin:0;padding:0;display:flex;gap:2px;align-items:center}
.mi{display:flex;align-items:center;border-radius:999px;transition:background .2s}
.mi:hover,.mi.open{background:color-mix(in srgb,currentColor 12%,transparent)}
.mi-link{text-decoration:none;padding:8px 2px 8px 10px;font-size:15px;opacity:.85;white-space:nowrap}
.mi-link[aria-current="page"]{opacity:1;font-weight:600}
.mi-btn{border:0;background:none;color:inherit;padding:8px 10px 8px 4px;cursor:pointer;display:grid;place-items:center;opacity:.7}
.mi-btn .chev{transition:transform .25s}
.mi.open .mi-btn .chev{transform:rotate(180deg)}
nav.main .mi-link{background:none!important}
header.top.mm-open{background:var(--bg);color:var(--ink);border-bottom-color:var(--line)}
.mm{position:absolute;left:0;right:0;top:100%;background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.35);animation:mmIn .28s cubic-bezier(.2,.8,.2,1);max-height:calc(100vh - 80px);overflow-y:auto}
@keyframes mmIn{from{opacity:0;transform:translateY(-8px)}}
.mm-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.15fr);gap:28px;padding-block:28px 32px}
.mm-col h4{margin:0 0 10px;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.mm-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mm-col a{display:grid;gap:2px;padding:10px 12px;margin-inline:-12px;border-radius:12px;text-decoration:none;transition:background .2s}
.mm-col a:hover,.mm-col a:focus-visible,.mm-col a.act{background:var(--accent-soft)}
.mm-col b{font-weight:600;font-size:15.5px}
.mm-col span{font-size:13.5px;color:var(--muted)}
.mm-card{position:relative;border-radius:16px;overflow:hidden;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:18px;color:#F2F1EE;text-decoration:none;background:var(--night)}
.mm-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .3s}
.mm-card:hover img{transform:scale(1.06);opacity:.62}
.mm-card>*:not(img){position:relative}
.mm-k{font-size:12.5px;color:var(--brand);font-weight:600}
.mm-card b{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(24px * (0.45 + var(--ds) * .55));line-height:1.02}
.mm-card span:not(.mm-k){font-size:13.5px;color:#CFCCC4}
.mm-card em{font-style:normal;font-weight:700;color:var(--brand);font-size:14px;margin-top:4px}
.mm-in.mm-contacts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mm-scrim{position:fixed;inset:0;z-index:45;background:rgba(10,11,15,.35);backdrop-filter:blur(2px)}
@media (max-width:1240px){.mi-list{display:none}}
/* media: post previews */
.mm-posts ul{gap:6px}
.mm-post{grid-template-columns:96px minmax(0,1fr)!important;align-items:center;gap:14px!important}
.mm-post img{width:96px;height:68px;object-fit:cover;object-position:top;border-radius:10px;background:var(--night);transition:transform .4s}
.mm-post:hover img{transform:scale(1.05)}
.mm-post span{display:grid;gap:3px}
.mm-post small{font-size:12px;color:var(--accent-text);font-weight:600}
.mm-post b{font-size:14.5px!important;line-height:1.3}
.mm-all{display:inline-block;margin-top:8px;font-weight:600;font-size:14px;color:var(--accent-text);text-decoration:none}
.mm-all:hover{text-decoration:underline}
/* cases slider */
.cs-slider{position:relative;border-radius:16px;overflow:hidden;background:var(--night);min-height:340px;display:grid}
.cs-track{position:relative;min-height:340px}
.cs-slide{position:absolute;inset:0;color:#F2F1EE;text-decoration:none;opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform 1.2s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.cs-slide.on{opacity:1;transform:none;pointer-events:auto}
.cs-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.cs-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(10,11,15,.92))}
.cs-cap{position:absolute;left:20px;right:20px;bottom:62px;z-index:1;display:grid;gap:3px}
.cs-cap small{color:var(--brand);font-weight:600;font-size:12.5px}
.cs-cap b{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(24px * (0.45 + var(--ds) * .55));line-height:1.02}
.cs-cap span{font-size:13.5px;color:#CFCCC4}
.cs-ui{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:10px}
.cs-nav{width:32px;height:32px;border-radius:50%;border:1px solid rgba(242,241,238,.35);background:rgba(10,11,15,.5);color:#F2F1EE;display:grid;place-items:center;cursor:pointer}
.cs-nav:hover{background:#F2F1EE;color:#0A0B0F}
.cs-dots{display:flex;gap:5px;flex:1;justify-content:center}
.cs-dot{width:7px;height:7px;border-radius:999px;border:0;padding:0;background:rgba(242,241,238,.4);cursor:pointer;transition:width .3s,background .3s}
.cs-dot.on{width:22px;background:var(--brand)}
.cs-bar{position:absolute;left:0;top:0;height:3px;width:100%;background:var(--brand);transform-origin:0 50%;transform:scaleX(0);z-index:3}
.cs-slider.run .cs-bar{animation:fill 3.6s linear forwards}
/* learn: active course + strip */
.mm-in.mm-learn{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.15fr);grid-template-areas:"c1 c2 big" "strip strip big";row-gap:18px}
.mm-learn>.mm-col:nth-child(1){grid-area:c1}.mm-learn>.mm-col:nth-child(2){grid-area:c2}
.mm-course{grid-area:big;position:relative;border-radius:16px;overflow:hidden;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:22px;color:#F2F1EE;text-decoration:none;background:var(--night)}
.mm-course img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .35s,transform 1s cubic-bezier(.2,.8,.2,1)}
.mm-course.swap img{opacity:0;transform:scale(1.06)}
.mm-course::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(10,11,15,.9))}
.mm-course>*:not(img){position:relative;z-index:1;transition:opacity .3s,transform .4s}
.mm-course.swap>*:not(img){opacity:0;transform:translateY(8px)}
.mm-course b{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(34px * (0.45 + var(--ds) * .55));line-height:1}
.mc-sub{font-size:15px;color:#E9E6DF}
.mc-meta{font-size:13px;color:#A3A09A}
.mm-course em{font-style:normal;font-weight:700;color:var(--brand);font-size:14.5px;margin-top:6px}
.mm-strip{grid-area:strip;display:flex;align-items:center;gap:8px;min-width:0}
.strip-nav{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.strip-nav:hover{border-color:var(--accent)}
.mm-thumbs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px;scrollbar-width:none;min-width:0;flex:1}
.mm-thumbs::-webkit-scrollbar{display:none}
.mm-th{flex:0 0 150px;scroll-snap-align:start;border:2px solid transparent;border-radius:12px;overflow:hidden;padding:0;background:var(--night);cursor:pointer;position:relative;aspect-ratio:4/3;max-width:100%;color:#F2F1EE;text-align:left;transition:border-color .25s,transform .25s}
.mm-th img{width:100%;height:100%;object-fit:cover;opacity:.7;transition:opacity .3s,transform .5s}
.mm-th:hover img,.mm-th.on img{opacity:.95;transform:scale(1.05)}
.mm-th span{position:absolute;left:8px;right:8px;bottom:6px;font-size:12px;font-weight:600;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.mm-th::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(10,11,15,.85))}
.mm-th span{z-index:1}
.mm-th.on{border-color:var(--brand);transform:translateY(-2px)}

/* ===== mobile preview menu ===== */
.mnav2{padding:0!important;display:grid;grid-template-rows:auto auto 1fr auto;gap:0;background:var(--night);overflow:hidden}
.mnav2[hidden]{display:none!important}
.mnav2:not([hidden]){animation:m2In .35s cubic-bezier(.2,.8,.2,1)}
@keyframes m2In{from{opacity:0;transform:translateY(-12px)}}
.m2-top{display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 10px}
.m2-top .logo{font-size:20px;border:0;color:#F2F1EE}
.m2-top .x{color:#F2F1EE}
.m2-tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 16px 12px;scrollbar-width:none}
.m2-tabs::-webkit-scrollbar{display:none}
.mt-tab{flex:none;border:1px solid #33363f;background:transparent;color:#CFCCC4;border-radius:999px;padding:9px 16px;font:500 15px var(--body);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.mt-tab.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:700}
.m2-panels{overflow-y:auto;min-height:0;padding:0 0 12px}
.mp{display:grid;gap:12px}
.mp:not([hidden]) .mp-card{animation:mpIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) * 60ms)}
@keyframes mpIn{from{opacity:0;transform:translateX(24px) scale(.97)}}
.mnav2 a.mp-head{display:flex;justify-content:space-between;align-items:center;margin:0 16px;padding:6px 0 4px;border:0;font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:clamp(38px,11vw,56px);line-height:1;color:#F2F1EE;text-decoration:none}
.mp-head svg{width:30px;height:30px;color:var(--brand)}
.mp-cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 6px;scrollbar-width:none}
.mp-cards::-webkit-scrollbar{display:none}
.mnav2 a.mp-card{flex:0 0 72%;scroll-snap-align:start;position:relative;aspect-ratio:4/5;max-width:100%;border-radius:18px;overflow:hidden;background:#171920;border:0;padding:0;font:inherit;text-transform:none;color:#F2F1EE;text-decoration:none;display:block}
.mp-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.mp-card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(10,11,15,.92))}
.mp-card span{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;display:grid;gap:4px}
.mp-card b{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(22px * (0.5 + var(--ds) * .5));line-height:1.05;overflow-wrap:anywhere;hyphens:auto}
.mp-card small{font-size:13px;color:#CFCCC4;font-family:var(--body)}
.mp-links{display:flex;flex-wrap:wrap;gap:8px;padding:6px 16px 4px}
.mnav2 .mp-links a{border:1px solid rgba(242,241,238,.18);border-radius:999px;padding:9px 14px;font:500 14px/1 var(--body);text-transform:none;color:#F2F1EE;text-decoration:none}
.mnav2 .mp-links a:active{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.mp-count{margin:0 16px;color:#8d8a83;font-size:13px;font-variant-numeric:tabular-nums}
.mp-cur{color:var(--brand);font-weight:700}
.m2-foot{display:grid;gap:10px;padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 16px);border-top:1px solid #23252d;background:#0d0e13}
.mnav2 .m2-foot a{border:0;font-family:var(--body);text-transform:none;font-size:15px;padding:0}
.mnav2 .m2-foot .cta-consult{justify-content:center;padding:15px 18px;font-size:16px;margin:0;align-self:stretch}
.m2-foot .m2-home,.m2-foot .m2-tg{color:#CFCCC4;text-decoration:none;text-align:center}
.m2-foot>div{display:flex;justify-content:space-between}

/* ===================== TEMPLATE PAGES ===================== */
.t-head{background:var(--night);color:var(--night-ink);padding:clamp(108px,12vw,150px) 0 clamp(40px,6vw,72px);position:relative;overflow:hidden;isolation:isolate}
.t-head::before{content:"";position:absolute;inset:auto -10% -60% 40%;height:120%;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 22%,transparent),transparent);z-index:-1;pointer-events:none}
.t-head-in{display:grid;gap:32px}
.t-head-in.has-side{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(28px,5vw,72px)}
.t-head-copy>*{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.t-head-copy>*:nth-child(2){animation-delay:.05s}.t-head-copy>*:nth-child(3){animation-delay:.1s}.t-head-copy>*:nth-child(4){animation-delay:.15s}.t-head-copy>*:nth-child(5){animation-delay:.2s}
.t-kick{display:inline-block;color:var(--brand);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.t-kick a{color:inherit;text-decoration:none}
.t-h1{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(clamp(44px,7vw,96px) * var(--ds));line-height:var(--dlh,.95);max-width:16ch}
.t-head-post .t-h1,.t-head-pub .t-h1,.t-head-pod .t-h1{font-size:calc(clamp(34px,4.6vw,64px) * var(--ds));max-width:22ch}
.t-lead{margin-top:18px;color:#C9C6BE;font-size:clamp(17px,1.4vw,20px);max-width:62ch}
.t-head-stats,.t-pstat{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;color:#BDB9B0;font-size:15px}
.t-head-stats b{color:var(--night-ink);font-family:var(--display);font-size:26px;font-weight:var(--dw);margin-right:6px}
.t-pstat span{display:inline-flex;align-items:center}
.t-pstat span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:#6c6a66;margin-right:22px;margin-left:-12px}
.t-outlet{font-weight:700;color:var(--night-ink)}
.t-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.t-head .btn{color:var(--night-ink)}
.t-head .btn:hover{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.t-head .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.t-subcats{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;align-items:center}
.t-sub-l{color:#A3A09A;font-size:14px;margin-right:4px}
.t-head .chip{color:var(--night-ink);border-color:rgba(242,241,238,.25);text-decoration:none}
.t-head .chip:hover{border-color:var(--brand);color:var(--brand)}
.t-head-side{animation:rise 1s .15s cubic-bezier(.2,.8,.2,1) both;min-width:0}
.t-sec .sec-head{margin-bottom:clamp(24px,4vw,44px)}
.t-sec-tight{padding-block:clamp(48px,7vw,96px)}
.sec.t-sec+.sec.t-sec:not(.dark-sec):not(.t-result){padding-top:0}
.dark-sec+.t-sec{padding-top:clamp(64px,10vw,140px)!important}
.dark-sec{color:var(--night-ink)}
.t-note{color:var(--muted);font-size:14.5px;margin-top:22px}
.more-inline{color:var(--accent-text);font-weight:600;white-space:nowrap}

/* ---------- archive ---------- */
.t-filter-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:22px}
.t-active{display:flex;gap:14px;align-items:center;margin:-6px 0 20px;font-size:15px;color:var(--muted)}
.t-active span b{color:var(--ink)}
.linkbtn{background:none;border:0;padding:0;color:var(--accent-text);font:600 15px var(--body);cursor:pointer}
.t-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,56px);align-items:start}
.t-main{min-width:0}
.t-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.t-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.t-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .35s;min-width:0}
.t-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 40px -24px rgba(0,0,0,.35)}
.t-cover{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--night)}
.t-cover img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.t-card:hover .t-cover img{transform:scale(1.05)}
.t-card-in{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.t-meta-top{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--muted)}
.t-cat{color:var(--accent-text);font-weight:600;text-decoration:none}
.t-cat:hover{text-decoration:underline}
.t-card h3{font-size:clamp(18px,1.5vw,21px);line-height:1.25}
.t-card h3 a{text-decoration:none}
.t-card h3 a:hover{color:var(--accent-text)}
.t-card p{color:var(--muted);font-size:15.5px}
.t-card-foot{margin-top:auto;padding-top:6px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.t-tags-s{display:flex;gap:8px;flex-wrap:wrap}
.t-tags-s a{text-decoration:none;color:var(--muted)}
.t-tags-s a:hover{color:var(--accent-text)}
.t-card.row{flex-direction:row}
.t-card.row .t-cover{flex:0 0 38%;aspect-ratio:auto;min-height:220px}
.t-list{display:grid;gap:18px}
.t-feat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--night);color:var(--night-ink);border-radius:calc(var(--r) + 4px);overflow:hidden;margin-bottom:22px}
.t-feat-in{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:12px}
.t-feat .t-cat{color:var(--brand)}
.t-feat .t-meta-top{color:#A3A09A}
.t-feat h2{font-size:calc(clamp(28px,3vw,42px) * var(--ds));line-height:1}
.t-feat h2 a{text-decoration:none}
.t-feat h2 a:hover{color:var(--brand)}
.t-feat p{color:#C9C6BE}
.t-feat .t-card-foot{color:#A3A09A}
.t-feat .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.t-sticky{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--brand);color:var(--brand-ink);padding:5px 10px;border-radius:999px}
.t-feat-cover{display:block;min-height:320px;text-decoration:none}
/* generated GEO cover */
.gen-geo{width:100%;height:100%;min-height:100%;padding:clamp(18px,3vw,34px);display:flex;flex-direction:column;justify-content:center;gap:14px;background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--brand) 38%,#14161d) 0%,#14161d 55%,#0A0B0F 100%);color:#F2F1EE;font-size:14px}
.t-cover.gen .gen-geo{font-size:11.5px;gap:8px;padding:14px 16px}
.gg-q{align-self:flex-end;max-width:82%;background:#F2F1EE;color:#13151C;border-radius:16px 16px 4px 16px;padding:10px 14px;font-weight:500}
.gg-a{display:flex;gap:10px;align-items:flex-start;max-width:94%}
.gg-ai{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--brand-ink);font-weight:800;font-size:11px}
.gg-a>div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:4px 16px 16px 16px;padding:10px 14px}
.gg-a ol{margin:6px 0 0;padding-left:18px;display:grid;gap:4px}
.gg-a li.you{color:var(--brand)}
.gg-a li.you i{color:#BDB9B0}
.t-cover.gen .gg-a ol{gap:2px}
/* pagination */
.t-pag{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:32px}
.t-pag>span{display:inline-flex;align-items:center;gap:6px;min-width:42px;height:42px;justify-content:center;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-weight:600;font-size:15px;color:var(--muted)}
.t-pag .on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.t-pag small{flex-basis:100%;color:var(--muted);font-size:13px;margin-top:4px}
/* sidebar */
.t-side{display:grid;gap:18px;position:sticky;top:96px}
.w-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.w-box h4{font:700 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.w-box .search{max-width:none;padding:0 14px}
.w-box .search input{width:100%;border:0;background:none;padding:12px 0;font:inherit;color:inherit;outline:none}
.w-tree,.w-tree ul{list-style:none;margin:0;padding:0}
.w-tree ul{padding-left:14px;border-left:1px solid var(--line);margin:4px 0 10px 6px}
.w-tree a{display:flex;justify-content:space-between;gap:10px;padding:6px 0;text-decoration:none;font-size:15px}
.w-tree a.pcat{font-weight:600}
.w-tree a span{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.w-tree a:hover,.w-tree a.on{color:var(--accent-text)}
.w-cloud{display:flex;flex-wrap:wrap;gap:6px 10px}
.w-cloud a{text-decoration:none;color:var(--muted);font-size:14px}
.w-cloud a.w2{font-size:16px;color:var(--ink)}.w-cloud a.w3{font-size:19px;font-weight:600;color:var(--ink)}
.w-cloud a:hover,.w-cloud a.on{color:var(--accent-text)}
.w-pop{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.w-pop a{display:grid;grid-template-columns:30px 1fr;gap:8px;text-decoration:none;font-size:14.5px;line-height:1.35}
.w-pop b{font-family:var(--display);color:var(--accent-text);font-size:20px;line-height:1}
.w-pop a:hover span{color:var(--accent-text)}
.w-tg{background:var(--night);color:var(--night-ink);border-color:var(--night)}
.w-tg h4{color:var(--brand)}
.w-tg p{color:#C9C6BE;font-size:14.5px;margin-bottom:14px}
.w-tg .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.w-course{padding:0;overflow:hidden;position:relative;text-decoration:none;color:#F2F1EE;display:block;aspect-ratio:4/3}
.w-course img{width:100%;height:100%;object-fit:cover}
.w-course::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(10,11,15,.9))}
.w-course span{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;display:grid}
.w-course small{color:var(--brand);font-weight:600}
.w-course b{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:26px;line-height:1}
.t-also{margin-top:32px}
.t-also h3{margin-bottom:14px}
.t-also-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.t-also-row a{display:grid;gap:6px;padding:18px 20px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);text-decoration:none;transition:border-color .2s,transform .3s}
.t-also-row a:hover{border-color:var(--accent);transform:translateY(-3px)}
.t-also-row small{color:var(--accent-text);font-weight:600;font-size:13px}
.t-also-row b{font-weight:600;line-height:1.3}

/* ---------- single post ---------- */
.t-pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:26px}
.t-author{display:flex;gap:12px;align-items:center}
.t-author img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:top}
.t-author b{display:block;font-size:15.5px}
.t-author span{font-size:13.5px;color:#A3A09A}
.t-pm-r{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:#BDB9B0}
.t-reading{position:sticky;top:0;height:0;z-index:60}
.t-reading i{position:absolute;left:0;top:0;height:3px;width:100%;background:var(--brand);transform-origin:0 50%;transform:scaleX(0)}
.t-post-wrap{padding-block:clamp(36px,5vw,64px)}
.t-post{display:grid;grid-template-columns:64px minmax(0,720px) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start}
.t-rail{position:sticky;top:110px}
.t-rail .t-share{flex-direction:column}
.t-share{display:flex;gap:8px;align-items:center}
.t-share>span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.t-rail .t-share>span{writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:6px}
.t-share a,.t-share button{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 13px var(--body);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.t-share a:hover,.t-share button:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.t-share button.ok{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.t-share-row{flex-wrap:wrap;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.t-prose{font-size:18.5px;line-height:1.72;min-width:0}
.t-prose>p,.t-prose>ul,.t-prose>ol{margin:0 0 1.1em}
.t-prose h2{font-size:calc(clamp(28px,3vw,40px) * var(--ds));margin:1.6em 0 .55em;scroll-margin-top:110px}
.t-prose a{color:var(--accent-text)}
.t-prose ul,.t-prose ol{padding-left:1.2em}
.t-prose li{margin-bottom:.45em}
.t-prose li::marker{color:var(--accent-text);font-weight:700}
.t-dropcap::first-letter{float:left;font-family:var(--display);font-weight:800;font-size:4.2em;line-height:.82;margin:.06em .1em 0 0;color:var(--accent-text)}
.t-prose blockquote{margin:1.6em 0;padding:4px 0 4px 26px;border-left:4px solid var(--accent);font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(clamp(24px,2.4vw,32px) * var(--ds));line-height:1.12}
.t-prose blockquote p{margin:0}
.t-fig{margin:1.6em 0}
.t-fig .gen-geo{border-radius:var(--r);min-height:300px}
.t-fig figcaption{font-size:14px;color:var(--muted);margin-top:10px}
.t-table{overflow-x:auto;margin:1.2em 0 1.6em;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.t-table table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45}
.t-table th,.t-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.t-table tr:last-child td{border-bottom:0}
.t-table th{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700;background:color-mix(in srgb,var(--line) 35%,transparent)}
.t-table td:first-child{font-weight:600}
.t-callout{margin:1.6em 0;padding:18px 22px;border-radius:var(--r);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);font-size:16.5px}
.t-callout b{display:block;color:var(--accent-text);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.t-steps{list-style:none;padding:0!important;counter-reset:s;display:grid;gap:12px}
.t-steps li{counter-increment:s;position:relative;padding:14px 18px 14px 62px;background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:0!important;font-size:16.5px}
.t-steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:18px;top:13px;font-family:var(--display);font-weight:800;font-size:22px;color:var(--accent-text)}
.t-code{background:#0F1117;color:#E6E3DA;border-radius:var(--r);padding:20px 22px;overflow-x:auto;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;margin:1.2em 0 1.6em}
.t-keys{margin:2em 0;padding:24px 26px;border-radius:var(--r);background:var(--night);color:var(--night-ink)}
.t-keys h3{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:28px;color:var(--brand);margin-bottom:10px}
.t-keys ul{margin:0;padding-left:1.1em;font-size:16.5px}
.t-keys li::marker{color:var(--brand)}
.faq-s details{border-top:1px solid var(--line);padding:16px 0}
.faq-s details:last-child{border-bottom:1px solid var(--line)}
.faq-s summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq-s summary::-webkit-details-marker{display:none}
.faq-s summary::after{content:"+";font-size:22px;line-height:1;color:var(--accent-text);transition:transform .25s}
.faq-s details[open] summary::after{transform:rotate(45deg)}
.faq-s details p{margin-top:10px;color:var(--muted);font-size:16px}
.t-post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:2em}
.t-post-tags a{text-decoration:none;padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;color:var(--ink)}
.t-post-tags a:hover{border-color:var(--accent);color:var(--accent-text)}
.t-authorbox{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;margin-top:30px;padding:24px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);font-size:16px}
.t-authorbox img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:top}
.t-authorbox small{color:var(--accent-text);font-weight:600;font-size:13px}
.t-authorbox b{display:block;font-size:20px;margin-bottom:6px}
.t-authorbox p{color:var(--muted);margin:0 0 10px}
.t-ab-links{display:flex;gap:16px;flex-wrap:wrap}
.t-ab-links a{font-weight:600;color:var(--accent-text);text-decoration:none;font-size:15px}
.t-prevnext{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.t-prevnext a{display:grid;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;font-size:15.5px;line-height:1.35;transition:border-color .2s}
.t-prevnext a:hover{border-color:var(--accent)}
.t-prevnext small{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.t-prevnext .nx{text-align:right}.t-prevnext .nx small{justify-content:flex-end}
.t-toc{position:sticky;top:110px;max-width:300px}
.t-toc h4{font:700 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.t-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.t-toc a{display:block;padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;font-size:14.5px;line-height:1.35;color:var(--muted);transition:color .2s,border-color .2s}
.t-toc a:hover{color:var(--ink)}
.t-toc a.on{color:var(--ink);border-left-color:var(--accent);font-weight:600}
.t-toc-cta{margin-top:24px;padding:18px;border-radius:var(--r);background:var(--night);color:var(--night-ink);font-size:14.5px}
.t-toc-cta b{display:block;font-size:17px;margin-bottom:4px}
.t-toc-cta p{color:#C9C6BE;margin-bottom:12px}
.t-toc-cta .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-size:14px}
.t-toc-m{display:none;margin-bottom:22px;border:1px solid var(--line);border-radius:14px;padding:12px 16px;background:var(--surface);font-size:16px}
.t-toc-m summary{font-weight:600;cursor:pointer}
.t-toc-m ol{margin:10px 0 0!important}
.t-comments{max-width:780px}
.t-comments h2{font-size:calc(clamp(28px,3vw,40px) * var(--ds));margin-bottom:12px}
.t-c-empty{color:var(--muted);margin-bottom:20px}
.t-c-empty a{color:var(--accent-text)}
.t-cform{display:grid;gap:14px;padding:22px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.t-cform label{display:grid;gap:6px;font-size:14px;font-weight:600}
.t-cform textarea,.t-cform input{font:inherit;font-weight:400;font-size:16px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.t-cform textarea:focus,.t-cform input:focus{outline:none;border-color:var(--accent)}
.t-cf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.t-cform .btn{justify-self:start}
.t-cform .btn:disabled{opacity:.55;cursor:not-allowed}
.t-cform small{color:var(--muted);font-size:13px}

/* ---------- case / project / talk ---------- */
.t-facts{background:var(--night);color:var(--night-ink);border-top:1px solid rgba(242,241,238,.1)}
.t-facts-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.t-facts-in>div{padding:20px 22px;border-left:1px solid rgba(242,241,238,.1)}
.t-facts-in>div:first-child{border-left:0;padding-left:0}
.t-facts-in small{display:block;color:#A3A09A;font-size:13px;margin-bottom:4px}
.t-facts-in b{font-weight:600;font-size:16px;line-height:1.3}
.t-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);align-items:start}
.t-big-p p{font-size:clamp(20px,1.9vw,26px);line-height:1.42;font-weight:500;letter-spacing:-.01em}
.t-h3{font-size:20px;margin-bottom:14px}
.t-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.t-checks li{position:relative;padding:14px 16px 14px 48px;border-radius:14px;background:var(--surface);border:1px solid var(--line);line-height:1.4}
.t-checks li::before{content:"";position:absolute;left:16px;top:15px;width:20px;height:20px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313151C' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/13px no-repeat}
.t-checks.cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.t-approach{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.t-approach li{padding:22px 20px;border-radius:var(--r);border:1px solid rgba(242,241,238,.14);background:rgba(255,255,255,.03);display:grid;gap:12px;align-content:start}
.t-approach li>span{font-family:var(--display);font-weight:800;font-size:38px;line-height:1;color:var(--brand)}
.t-approach h3{font-size:18px}
.t-approach p{color:#BDB9B0;font-size:15px}
.t-approach.light li{border-color:var(--line);background:var(--surface)}
.t-approach.light li>span{color:var(--accent-text)}
.t-approach.light p{color:var(--muted)}
.t-areas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.t-area{padding:22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:grid;gap:8px;transition:transform .3s,border-color .2s}
.t-area:hover{transform:translateY(-4px);border-color:var(--accent)}
.t-area b{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:26px;line-height:1}
.t-area p{color:var(--muted);font-size:15px}
.t-result{background:var(--accent-soft)}
.t-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.t-metric{padding:24px 22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:grid;gap:8px}
.t-metric b{font-family:var(--display);font-weight:800;font-size:clamp(38px,4.4vw,64px);line-height:.95;color:var(--accent-text);letter-spacing:-.01em}
.t-metric span{color:var(--muted);font-size:15px}
.t-metric.small b{font-size:clamp(28px,2.6vw,38px)}
.dark-sec .t-metric{background:rgba(255,255,255,.04);border-color:rgba(242,241,238,.14)}
.dark-sec .t-metric b{color:var(--brand)}
.dark-sec .t-metric span{color:#BDB9B0}
.t-quote{margin:32px 0 0;padding:28px 30px;border-radius:var(--r);background:var(--night);color:var(--night-ink)}
.t-quote p{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(clamp(26px,3vw,42px) * var(--ds));line-height:1.05}
.t-quote cite{display:block;margin-top:12px;font-style:normal;color:var(--brand);font-size:15px}
.t-gal{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.t-gal.one{grid-template-columns:1fr}
.t-gal .gi{border:0;padding:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;background:var(--night)}
.t-gal .gi:first-child{aspect-ratio:auto;grid-row:span 1}
.t-gal.one .gi{aspect-ratio:16/8}
.t-gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.t-gal .gi:hover img{transform:scale(1.04)}
.t-rcases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.t-rcase{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;text-decoration:none;color:#F2F1EE;background:var(--night)}
.t-rcase img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.t-rcase:hover img{transform:scale(1.05)}
.t-rcase::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(10,11,15,.94))}
.t-rcase span{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;display:grid;gap:4px}
.t-rcase small{color:var(--brand);font-weight:600;font-size:13px}
.t-rcase b{font-size:20px;line-height:1.2}
.t-rcase em{font-style:normal;color:#C9C6BE;font-size:14px}
/* project */
.t-browser{border-radius:16px;overflow:hidden;background:#1a1c24;box-shadow:0 40px 80px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.t-browser:hover{transform:none}
.t-bbar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#23262f}
.t-bbar i{width:10px;height:10px;border-radius:50%;background:#4a4d57}
.t-bbar i:first-child{background:#ff5f57}.t-bbar i:nth-child(2){background:#febc2e}.t-bbar i:nth-child(3){background:#28c840}
.t-bbar em{font-style:normal;margin-left:12px;flex:1;background:#15171d;border-radius:6px;padding:4px 10px;font-size:12px;color:#A3A09A}
.t-browser img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top}
.t-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.t-feature{padding:24px 22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:grid;gap:10px;align-content:start}
.t-feature span{font-family:var(--display);font-weight:800;font-size:30px;color:var(--accent-text);line-height:1}
.t-feature p{color:var(--muted);font-size:15.5px}
.t-facts-s{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.t-facts-s span{padding:8px 14px;border-radius:999px;border:1px solid rgba(242,241,238,.25);font-size:14px}
.dark-sec .t-big-p p{color:var(--night-ink)}
.dark-sec p{color:#C9C6BE}
/* talk */
.t-theses{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:t}
.t-theses li{counter-increment:t;display:grid;grid-template-columns:44px 1fr;gap:2px 12px;padding:16px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.t-theses li::before{content:counter(t,decimal-leading-zero);grid-row:span 2;font-family:var(--display);font-weight:800;font-size:26px;color:var(--accent-text);line-height:1}
.t-theses b{font-size:16.5px}
.t-theses span{color:var(--muted);font-size:15px}
.t-deck{outline:none}
.t-deck-stage{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#F2F1EE;box-shadow:0 30px 80px -40px rgba(0,0,0,.9);touch-action:pan-y}
.t-deck:fullscreen{background:#0A0B0F;display:flex;flex-direction:column;justify-content:center;padding:3vh 4vw}
.t-deck:fullscreen .t-deck-stage{width:min(100%,calc(86vh * 16 / 9));margin:0 auto}
.t-deck:fullscreen .t-deck-thumbs{display:none}
.sl{position:absolute;inset:0;padding:6% 7%;display:flex;flex-direction:column;justify-content:center;gap:2.2cqw;color:#13151C;opacity:0;transform:translateX(30px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none;container-type:inline-size}
.t-deck-stage{container-type:inline-size}
.sl.on{opacity:1;transform:none;pointer-events:auto}
.sl.back{transform:translateX(-30px)}
.sl small{font-weight:700;color:#94570A;font-size:max(11px,1.9cqw);letter-spacing:.08em;text-transform:uppercase}
.sl h3{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(6cqw * var(--ds));line-height:.98;max-width:18ch}
.sl h3.xl{font-size:calc(7.6cqw * var(--ds))}
.sl p{font-size:max(12px,2.2cqw);color:#5D616E;max-width:44ch}
.sl ul{margin:0;padding:0;list-style:none;display:grid;gap:1.2cqw;font-size:max(12px,2.4cqw);font-weight:500}
.sl ul li{display:flex;gap:1.4cqw;align-items:center}
.sl ul li::before{content:"";width:1.2cqw;height:1.2cqw;min-width:7px;min-height:7px;border-radius:50%;background:var(--brand)}
.sl-flow{display:flex;flex-wrap:wrap;gap:1.2cqw;align-items:center}
.sl-flow span{padding:1.2cqw 1.8cqw;border-radius:1.2cqw;background:#13151C;color:#F2F1EE;font-size:max(11px,2cqw);font-weight:600}
.sl-flow span+span::before{content:"→";color:#94570A;margin-right:1.4cqw;margin-left:-.4cqw}
.sl-flow span:nth-child(3){background:var(--brand);color:var(--brand-ink)}
.sl-title,.sl-end{background:#0A0B0F;color:#F2F1EE}
.sl-title::before,.sl-end::before{content:"";position:absolute;inset:0;background:url(../img/potok.jpg) center/cover;opacity:.35;z-index:-1}
.sl-title,.sl-end{z-index:0;isolation:isolate}
.sl-title small,.sl-end small{color:var(--brand)}
.sl-title p,.sl-end p{color:#C9C6BE}
.sl-title h3{font-size:calc(8cqw * var(--ds))}
.sl-brand{position:absolute;right:3.5%;bottom:5%;font-style:normal;font-weight:800;font-size:max(10px,1.6cqw);background:var(--brand);color:var(--brand-ink);border-radius:.6cqw;padding:.4cqw .8cqw}
.t-deck-ui{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:16px}
.t-deck-ui .cs-nav{width:44px;height:44px}
.t-deck-n{font-variant-numeric:tabular-nums;min-width:64px;text-align:center;color:#C9C6BE}
.t-deck-n b{color:var(--night-ink)}
.t-deck-fs{width:44px;height:44px;border-radius:50%;border:1px solid rgba(242,241,238,.35);background:transparent;color:#F2F1EE;display:grid;place-items:center;cursor:pointer}
.t-deck-fs:hover{background:#F2F1EE;color:#0A0B0F}
.t-deck-thumbs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.t-deck-thumbs button{width:44px;height:28px;border-radius:6px;border:1px solid rgba(242,241,238,.2);background:transparent;color:#A3A09A;font:600 11px var(--body);cursor:pointer}
.t-deck-thumbs button.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.t-deck-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.dark-sec .btn{color:var(--night-ink)}
.dark-sec .btn:hover{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.dark-sec .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.t-evs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.t-ev{position:relative;border:0;padding:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;cursor:zoom-in;background:var(--night);color:#F2F1EE;text-align:left;font:inherit}
.t-ev img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.t-ev:hover img{transform:scale(1.05)}
.t-ev::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(10,11,15,.92))}
.t-ev span{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:grid;gap:2px}
.t-ev b{font-size:16px}.t-ev small{color:#C9C6BE;font-size:13px}
/* publication */
.t-pubprev{display:block;border-radius:18px;overflow:hidden;background:#F7F6F2;color:#13151C;text-decoration:none;box-shadow:0 30px 70px -36px rgba(0,0,0,.85);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.t-pubprev:hover{transform:translateY(-6px) rotate(-.4deg)}
.t-pp-img{display:block;aspect-ratio:16/9;overflow:hidden;background:#e9e7e1}
.t-pp-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.t-pp-cap{display:grid;gap:4px;padding:18px 20px}
.t-pp-cap small{color:#5D616E;font-size:13px}
.t-pp-cap b{font-size:20px;line-height:1.2}
.t-pp-cap em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-weight:600;color:#94570A;font-size:15px;margin-top:6px}
.t-publist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.t-publi{display:grid;grid-template-columns:120px 1fr auto;gap:14px;align-items:center;padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-decoration:none;transition:border-color .2s}
.t-publi:hover{border-color:var(--accent)}
.t-publi small{font-weight:700;color:var(--accent-text)}
.t-publi b{font-weight:600;line-height:1.3}
.t-publi span{color:var(--muted);font-size:13.5px;white-space:nowrap}
/* podcast */
.t-player{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0A0B0F;box-shadow:0 30px 70px -36px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);isolation:isolate}
.t-pl-bg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(22px) saturate(1.2);opacity:.65;z-index:-1;transform:scale(1.1)}
.t-player::before{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(10,11,15,.1),rgba(10,11,15,.85));z-index:-1}
.t-pl-card{position:absolute;left:24px;right:24px;bottom:22px;display:grid;gap:4px}
.t-pl-badge{justify-self:start;font-size:12px;font-weight:700;background:var(--brand);color:var(--brand-ink);padding:4px 10px;border-radius:999px;margin-bottom:6px}
.t-pl-card b{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(clamp(24px,2.6vw,38px) * var(--ds));line-height:1}
.t-pl-card small{color:#C9C6BE;font-size:15px}
.t-pl-play{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:0;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 60%,transparent);animation:ctaPulse 2.4s infinite;transition:transform .25s}
.t-pl-play:hover{transform:translate(-50%,-50%) scale(1.08)}
.t-pl-note{position:absolute;top:14px;right:16px;left:16px;text-align:right;font-size:12px;color:#A3A09A;opacity:0;transition:opacity .3s}
.t-player:hover .t-pl-note{opacity:1}
.t-pl-note a{color:var(--brand)}
.t-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.t-player.on>*:not(iframe){display:none}
.t-chapters{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.t-chapters li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.t-chapters li>span{font-family:var(--display);font-weight:800;font-size:24px;color:var(--accent-text);line-height:1.1}
.t-chapters b{display:block;font-size:16.5px}
.t-chapters p{color:var(--muted);font-size:15px}
.t-eps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.t-ep{display:grid;gap:8px;text-decoration:none}
.t-ep-img{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--night)}
.t-ep-img img{width:100%;height:100%;object-fit:cover}
.t-ep-img i{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(10,11,15,.25);transition:background .2s}
.t-ep:hover .t-ep-img i{background:rgba(10,11,15,.05);color:var(--brand)}
.t-ep b{font-weight:600;line-height:1.3}
.t-ep small{color:var(--muted)}
/* service */
.t-pains{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.t-pains li{padding:14px 16px 14px 46px;position:relative;border-radius:14px;border:1px dashed color-mix(in srgb,var(--ink) 25%,transparent);line-height:1.4}
.t-pains li::before{content:"?";position:absolute;left:16px;top:13px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:800;font-size:13px;display:grid;place-items:center}
.t-svc-card{border-radius:var(--r);overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.t-svc-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.t-svc-card p{padding:20px 22px 0}
.t-svc-card .more-link{margin:12px 22px 22px}
.t-metrics.four .t-metric b{font-size:clamp(28px,2.8vw,40px)}
.t-plan{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.t-plan::before{content:"";position:absolute;left:0;right:0;top:14px;height:2px;background:var(--line)}
.t-plan li{position:relative;padding:40px 18px 0 0}
.t-plan li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--bg)}
.t-plan span{font-size:13px;font-weight:700;color:var(--accent-text);letter-spacing:.04em;text-transform:uppercase}
.t-plan b{display:block;font-size:20px;margin:4px 0 6px}
.t-plan p{color:var(--muted);font-size:15px}
.t-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.t-tier{padding:28px 24px;border-radius:calc(var(--r) + 4px);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.t-tier small{color:var(--accent-text);font-weight:600}
.t-tier h3{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:34px;line-height:1}
.t-price{font-size:22px;font-weight:700}
.t-tier p{color:var(--muted);font-size:15.5px}
.t-tier ul{margin:4px 0 12px;padding-left:1.1em;font-size:15.5px;display:grid;gap:6px}
.t-tier ul li::marker{color:var(--accent-text)}
.t-tier .btn{margin-top:auto;align-self:flex-start}
.t-tier.hot{background:var(--night);color:var(--night-ink);border-color:var(--night);transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.t-tier.hot small{color:var(--brand)}
.t-tier.hot p{color:#C9C6BE}
.t-tier.hot .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
/* course */
.t-prog{display:grid;gap:10px}
.t-mod{border-radius:14px;border:1px solid rgba(242,241,238,.14);background:rgba(255,255,255,.03);overflow:hidden}
.t-mod summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:90px 1fr auto;gap:14px;align-items:center;padding:18px 20px;position:relative}
.t-mod summary::-webkit-details-marker{display:none}
.t-mod-n{font-size:13px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.04em}
.t-mod summary b{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(26px * var(--ds));line-height:1}
.t-mod-m{color:#A3A09A;font-size:14px;white-space:nowrap}
.t-mod summary i{position:absolute;left:0;bottom:0;height:3px;width:var(--w);background:var(--brand);border-radius:0 3px 3px 0}
.t-mod ul{margin:0;padding:0 20px 18px 124px;color:#C9C6BE;display:grid;gap:6px}
.t-mod[open]{border-color:color-mix(in srgb,var(--brand) 50%,transparent)}
.t-laws{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.t-laws li{padding:22px 18px;border-radius:var(--r);background:var(--night);color:var(--night-ink);font-weight:600;font-size:16px;line-height:1.3;display:grid;gap:14px;align-content:start;transition:transform .3s}
.t-laws li:hover{transform:translateY(-4px) rotate(-.6deg)}
.t-laws span{width:38px;height:38px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px}
.t-bars{display:grid;gap:12px}
.t-bar{display:grid;grid-template-columns:170px 1fr 48px;gap:12px;align-items:center;font-size:15px}
.t-bar i{height:10px;border-radius:999px;background:var(--line);position:relative;overflow:hidden}
.t-bar i::after{content:"";position:absolute;inset:0;width:var(--v);background:var(--accent);border-radius:inherit}
.t-bar b{text-align:right;font-variant-numeric:tabular-nums}
.t-author-card{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);align-items:start}
.t-author-card img{width:120px;height:140px;border-radius:14px;object-fit:cover;object-position:top}
.t-author-card small{color:var(--accent-text);font-weight:600;font-size:13px}
.t-author-card b{display:block;font-size:22px;margin-bottom:6px}
.t-author-card p{color:var(--muted);font-size:15.5px}
.t-author-card .more-link{margin-top:12px}
.t-enroll{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:30px 32px;border-radius:calc(var(--r) + 6px);background:var(--night);color:var(--night-ink)}
.t-enroll h3{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:36px;line-height:1;color:var(--brand);margin-bottom:8px}
.t-enroll p{color:#C9C6BE;max-width:54ch}
.t-enroll-r{display:flex;gap:12px;flex-wrap:wrap}
.t-enroll .btn{color:var(--night-ink)}
.t-enroll .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
/* templates map */
.t-tplgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.t-tplcard{display:grid;gap:6px;padding:22px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);text-decoration:none;transition:transform .3s,border-color .2s}
.t-tplcard:hover{transform:translateY(-4px);border-color:var(--accent)}
.t-tplcard code{color:var(--accent-text);font-size:13px}
.t-tplcard b{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:28px;line-height:1}
.t-tplcard span{color:var(--muted);font-size:14.5px}
.t-table code{font-size:13px;color:var(--accent-text)}
.t-table td a{color:var(--accent-text);font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .t-post{grid-template-columns:52px minmax(0,1fr)}
  .t-toc{display:none}
  .t-toc-m{display:block}
  .t-approach,.t-areas,.t-laws{grid-template-columns:repeat(3,minmax(0,1fr))}
  .t-evs,.t-eps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .t-layout{grid-template-columns:minmax(0,1fr)}
  .t-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-head-in.has-side{grid-template-columns:minmax(0,1fr)}
  .t-browser{transform:none}
  .t-2col{grid-template-columns:minmax(0,1fr)}
  .t-metrics,.t-facts-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-facts-in>div:nth-child(3){border-left:0;padding-left:0}
  .t-facts-in>div:nth-child(n+3){border-top:1px solid rgba(242,241,238,.1)}
  .t-tiers,.t-features,.t-rcases,.t-grid.three,.t-tplgrid,.t-also-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-tier.hot{transform:none}
  .t-plan{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .t-feat{grid-template-columns:minmax(0,1fr)}
  .t-feat-cover{min-height:240px}
  .t-publist{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .t-grid,.t-grid.three,.t-tiers,.t-features,.t-rcases,.t-tplgrid,.t-also-row,.t-checks.cols,.t-approach,.t-areas,.t-laws,.t-side,.t-cf-row,.t-prevnext{grid-template-columns:minmax(0,1fr)}
  .t-evs,.t-eps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .t-card.row{flex-direction:column}
  .t-card.row .t-cover{flex:none;aspect-ratio:16/9;min-height:0}
  .t-post{grid-template-columns:minmax(0,1fr)}
  .t-rail{display:none}
  .t-prose{font-size:17.5px}
  .t-authorbox{grid-template-columns:minmax(0,1fr)}
  .t-authorbox img{width:72px;height:72px}
  .t-prevnext .nx{text-align:left}.t-prevnext .nx small{justify-content:flex-start}
  .t-plan{grid-template-columns:minmax(0,1fr)}
  .t-plan::before{left:8px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .t-plan li{padding:0 0 0 36px}
  .t-plan li::before{top:4px}
  .t-mod summary{grid-template-columns:minmax(0,1fr);gap:4px}
  .t-mod ul{padding-left:38px}
  .t-bar{grid-template-columns:120px 1fr 40px;font-size:14px}
  .t-author-card{grid-template-columns:minmax(0,1fr)}
  .t-author-card img{width:100%;height:220px}
  .t-publi{grid-template-columns:minmax(0,1fr)}
  .t-pl-play{width:64px;height:64px}
  .t-pl-card{left:16px;right:16px;bottom:14px}
  .t-pl-card small{display:none}
  .t-pstat span+span::before{display:none}
  .t-pstat{gap:6px 14px}
  .t-enroll{padding:24px 20px}
  .t-metric b{font-size:40px}
  .t-gal{grid-template-columns:minmax(0,1fr)}
  .t-deck-thumbs{display:none}
  .t-table table{font-size:14.5px}
  .t-feat-cover{min-height:220px}
}
.t-archive{padding-top:clamp(28px,4vw,48px)}
.t-tier h3{font-size:calc(clamp(24px,2.3vw,32px) * var(--ds));hyphens:auto;overflow-wrap:break-word}
.t-tier{min-width:0}
.t-result+.t-sec,.t-head+.t-sec{padding-top:clamp(56px,8vw,110px)!important}
.t-metric b{font-size:clamp(34px,3.6vw,54px)}
.t-cover.gen .gg-a p,.t-cover.gen .gg-a li i{display:none}
.t-cover.gen .gen-geo{justify-content:center}
.t-comments{max-width:var(--maxw)}
.t-comments>*{max-width:780px}
@media (max-width:640px){.page-hero .hl{font-size:calc(clamp(2.2rem,10.4vw,2.8rem) * var(--ds));overflow-wrap:anywhere;hyphens:auto}.crumbs{flex-wrap:wrap;row-gap:2px}}
.sl-n{position:absolute;right:5%;top:50%;transform:translateY(-50%);font-family:var(--display);font-weight:800;font-size:34cqw;line-height:.8;color:transparent;-webkit-text-stroke:2px rgba(19,21,28,.08);pointer-events:none;letter-spacing:-.02em}

/* ===================== STYLEGUIDE + COMPONENTS ===================== */
:root{--ok:#178A57;--warn:#B86E00;--err:#D23A2C;--info:#2F5BD3;
  --sh-1:0 18px 40px -24px rgba(19,21,28,.35);--sh-2:0 14px 34px -12px rgba(19,21,28,.28),0 0 0 1px rgba(19,21,28,.06);--sh-3:0 40px 90px -30px rgba(19,21,28,.45),0 0 0 1px rgba(19,21,28,.06);--sh-glow:0 10px 30px -8px color-mix(in srgb,var(--brand) 80%,transparent);
  --ill-bg:#F4F3F0;--ill-w:#FFFFFF;--ill-d:#2B2F3A;--ill-l:#DADCE1;--ill-l2:#C3C7CF;--ill-dk:#16181F}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ok:#3DD68C;--warn:#F5B544;--err:#FF7A6B;--info:#7C9CFF;--sh-1:0 18px 40px -20px rgba(0,0,0,.7);--sh-2:0 14px 34px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);--sh-3:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08);--ill-bg:#14161C;--ill-w:#262933;--ill-d:#C9CCD6;--ill-l:#383C48;--ill-l2:#4A4F5C;--ill-dk:#0A0B0F}}
:root[data-theme="dark"]{--ok:#3DD68C;--warn:#F5B544;--err:#FF7A6B;--info:#7C9CFF;--sh-1:0 18px 40px -20px rgba(0,0,0,.7);--sh-2:0 14px 34px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);--sh-3:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08);--ill-bg:#14161C;--ill-w:#262933;--ill-d:#C9CCD6;--ill-l:#383C48;--ill-l2:#4A4F5C;--ill-dk:#0A0B0F}

/* live look controls in header */
.sg-live{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}
.sg-seg{display:inline-flex;padding:4px;border-radius:999px;background:rgba(242,241,238,.08);border:1px solid rgba(242,241,238,.14);gap:2px;flex-wrap:wrap}
.sg-seg button{border:0;background:transparent;color:#C9C6BE;font:500 14px/1 var(--body);padding:9px 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.sg-seg button:hover{color:#F2F1EE}
.sg-seg button[aria-pressed="true"]{background:#F2F1EE;color:#0A0B0F}
.sg-sws{display:inline-flex;gap:6px;padding:6px;border-radius:999px;background:rgba(242,241,238,.08);border:1px solid rgba(242,241,238,.14)}
.sg-sw{width:30px;height:30px;border-radius:50%;border:2px solid transparent;background:none;padding:2px;cursor:pointer}
.sg-sw i{display:block;width:100%;height:100%;border-radius:50%;background:var(--c)}
.sg-sw[aria-pressed="true"]{border-color:#F2F1EE}
.c-seg{background:var(--surface);border-color:var(--line)}
.c-seg button{color:var(--muted)}.c-seg button:hover{color:var(--ink)}
.c-seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

/* styleguide sections */
.sg-prins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sg-prin{padding:24px 22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:grid;gap:10px;align-content:start}
.sg-prin span{font-family:var(--display);font-weight:800;font-size:34px;color:var(--accent-text);line-height:1}
.sg-prin p{color:var(--muted);font-size:15.5px}
.sg-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sg-logo{min-height:180px;border-radius:var(--r);display:grid;place-items:center;align-content:center;gap:18px;padding:22px;border:1px solid var(--line);background:var(--surface);text-align:center}
.sg-logo small{color:var(--muted);font-size:13px}
.sg-logo .logo{pointer-events:none}
.sg-logo.l2{background:var(--night);border-color:var(--night);color:var(--night-ink)}
.sg-logo.l2 small{color:#A3A09A}
.sg-logo.l3{background:var(--brand);border-color:var(--brand)}
.sg-logo.l3 small{color:var(--brand-ink);opacity:.75}
.sg-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:14px;background:var(--night);color:var(--brand);font:800 26px var(--body)}
.sg-mark.big{width:72px;height:72px;background:var(--brand);color:var(--brand-ink);outline:2px dashed color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:18px}
.sg-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:28px}
.sg-preset{display:grid;gap:6px;text-align:left;padding:14px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .2s,transform .3s}
.sg-preset:hover{transform:translateY(-3px)}
.sg-preset[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sg-pre-sw{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;height:56px;border-radius:10px;overflow:hidden;margin-bottom:6px}
.sg-preset b{font-size:16px}
.sg-preset code{font-size:12px;color:var(--muted)}
.sg-tokgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sg-tokgroup{padding:20px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.sg-tokgroup h3{font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:12px}
.sg-toks{display:grid;gap:10px}
.sg-tok{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center}
.sg-chip{width:52px;height:52px;border-radius:12px;border:1px solid var(--line)}
.sg-tok div{display:grid;grid-template-columns:1fr auto;gap:0 10px;font-size:14.5px}
.sg-tok code{font-size:13.5px;font-weight:600}
.sg-tok span{color:var(--muted);grid-column:1}
.sg-hex{grid-column:2;grid-row:1/span 2;align-self:center;font:500 13px var(--mono);color:var(--muted)}
.sg-contrast{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.sg-contrast span{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13.5px}
.sg-contrast b{font-variant-numeric:tabular-nums}
.sg-contrast em{font-style:normal;font-weight:700;font-size:12px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.sg-contrast em.lo{background:color-mix(in srgb,var(--err) 18%,transparent);color:var(--err)}
.sg-pairs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:28px}
.sg-pair{display:grid;gap:6px;text-align:left;padding:18px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;transition:border-color .2s,transform .3s}
.sg-pair:hover{transform:translateY(-3px)}
.sg-pair[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sg-pd{font-size:26px;line-height:1.05}
.sg-pb{color:var(--muted);font-size:15px}
.sg-pn{font-size:12.5px;color:var(--muted);opacity:.85}
.sg-scale{border-top:1px solid var(--line)}
.sg-row{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;padding:20px 0;border-bottom:1px solid var(--line);align-items:center}
.sg-row-l{display:grid;gap:2px}
.sg-row-l b{font-size:15px}
.sg-row-l code{font-size:13px;color:var(--accent-text)}
.sg-row-l small{font-size:13px;color:var(--muted)}
.sg-row-r{min-width:0;overflow:hidden}
.sg-s-xl{display:block;font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(clamp(44px,7vw,99px) * var(--ds));line-height:var(--dlh);white-space:nowrap}
.sg-s-h1{display:block;font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(clamp(36px,5vw,72px) * var(--ds));line-height:var(--dlh)}
.sg-s-h2{display:block;font-family:var(--display);font-weight:800;text-transform:var(--dt);font-size:var(--step-3);line-height:1}
.sg-s-h3{font-weight:600;font-size:var(--step-1)}
.sg-s-lead{font-size:clamp(17px,1.4vw,20px);color:var(--muted)}
.sg-s-prose{font-size:18.5px;line-height:1.72}
.sg-s-small{font-size:14px;color:var(--muted)}
.sg-s-over{font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.sg-s-code{font:14px var(--mono);padding:6px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.sg-gridbox{position:relative;border-radius:var(--r);border:1px dashed var(--line);padding:16px;background:var(--surface)}
.sg-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(8px,2vw,24px);height:160px}
.sg-cols i{border-radius:8px;background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);animation:colIn .7s cubic-bezier(.2,.8,.2,1) both}
.sg-cols i:nth-child(n){animation-delay:calc(var(--k,0) * 40ms)}
@keyframes colIn{from{transform:scaleY(.2);opacity:0}}
.sg-gridlabels{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:14px;color:var(--muted)}
.sg-gridlabels code{color:var(--accent-text)}
.sg-bp{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sg-bp li{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:12px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:15px}
.sg-bp b{font-variant-numeric:tabular-nums;color:var(--accent-text)}
.sg-layouts{display:grid;gap:10px}
.sg-layouts div{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:10px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.sg-layouts i{flex:1;height:26px;border-radius:6px;background:color-mix(in srgb,var(--accent) 22%,transparent)}
.sg-layouts span{flex-basis:100%;font-size:13.5px;color:var(--muted)}
.sg-space{display:grid;gap:8px}
.sg-sp{display:grid;grid-template-columns:56px auto 1fr;gap:16px;align-items:center;font-size:15px}
.sg-sp code{text-align:right;color:var(--accent-text);font-weight:600}
.sg-sp i{height:18px;border-radius:4px;background:var(--accent);max-width:62vw}
.sg-sp span{color:var(--muted)}
.sg-rads{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.sg-rad{display:grid;gap:6px;justify-items:start}
.sg-rad i{width:100%;aspect-ratio:1.4;background:var(--accent-soft);border:2px solid var(--accent)}
.sg-rad code{font-weight:600}
.sg-rad span{font-size:13.5px;color:var(--muted)}
.sg-shs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.sg-sh{min-height:150px;border-radius:var(--r);background:var(--surface);padding:20px;display:grid;align-content:end;gap:4px}
.sg-sh code{font-weight:600}
.sg-sh span{font-size:14px;color:var(--muted)}
.sg-icsearch{max-width:360px;margin-bottom:18px;padding:0 16px}
.sg-icsearch input,.cc-tools .search input{width:100%;border:0;background:none;padding:12px 0;font:inherit;color:inherit;outline:none}
.sg-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.sg-ic{display:grid;justify-items:center;gap:10px;padding:18px 8px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:12.5px var(--body);cursor:pointer;transition:border-color .2s,transform .25s,color .2s}
.sg-ic span{color:var(--muted)}
.sg-ic:hover{border-color:var(--accent);color:var(--accent-text);transform:translateY(-3px)}
.sg-ic.ok{background:var(--accent-soft);border-color:var(--accent)}
.sg-mots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}
.sg-mot{display:grid;gap:4px;font-size:14px}
.sg-mot code{font-size:12.5px;color:var(--accent-text)}
.sg-mot span{color:var(--muted);font-size:13.5px}
.sg-mot-stage{height:110px;border-radius:14px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;margin-bottom:6px;position:relative}
.sg-mot-stage i{display:block;width:44px;height:44px;border-radius:12px;background:var(--accent)}
.m-rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) infinite alternate}
.m-lift{animation:mLift 1.4s cubic-bezier(.2,.8,.2,1) infinite alternate;box-shadow:var(--sh-1)}
@keyframes mLift{to{transform:translateY(-10px)}}
.sg-mot-stage .m-kb{width:100%;height:100%;border-radius:0;background:url(../img/stage-aisummit.jpg) center/cover;animation:mKb 6s ease-in-out infinite alternate}
@keyframes mKb{to{transform:scale(1.18)}}
.sg-mot-stage .m-pulse{border-radius:999px;width:96px;height:30px;background:var(--brand);animation:ctaPulse 2.8s infinite}
.sg-mot-stage .m-wipe{position:absolute;inset:0;width:auto;height:auto;border-radius:0;background:var(--night);animation:mWipe 2s cubic-bezier(.7,0,.2,1) infinite}
@keyframes mWipe{0%{clip-path:inset(0 100% 0 0)}50%,100%{clip-path:inset(0 0 0 0)}}
.sg-mot-stage .m-fill{width:80%;height:6px;border-radius:999px;background:var(--brand);transform-origin:0 50%;animation:fill 3.6s linear infinite}
.sg-voices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sg-voice{padding:18px 20px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.sg-voice small{font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
.sg-voice.ok small{color:var(--ok)}.sg-voice.no small{color:var(--err)}
.sg-voice.no p{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--err) 60%,transparent);color:var(--muted)}
.sg-voice p{margin-top:6px;font-size:16px}

/* catalog */
.cc-tools{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:30px}
.cc-tools .search{flex:0 1 340px;padding:0 16px}
.cc-group{margin-bottom:44px}
.cc-gh{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:18px}
.cc-gh h3{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(34px * var(--ds));line-height:1}
.cc-gh>span{font-weight:700;color:var(--accent-text)}
.cc-gh p{flex-basis:100%;color:var(--muted);font-size:15px}
.cc-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.cc{display:flex;flex-direction:column;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);overflow:hidden;text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .2s}
.cc:hover{transform:translateY(-5px);box-shadow:var(--sh-1);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.cc-ill{position:relative;display:block;aspect-ratio:1/1;background:var(--ill-bg)}
.cc-ill svg{position:absolute;inset:6% 4%;width:92%;height:88%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cc:hover .cc-ill svg{transform:scale(1.06) translateY(-2px)}
.cc>b{padding:16px 12px 18px;text-align:center;font-weight:600;font-size:16px}
.cc-b{display:inline-block;font-style:normal;font-weight:700;font-size:12px;padding:5px 10px;border-radius:10px;background:var(--line);color:var(--ink)}
.cc-ill .cc-b{position:absolute;top:10px;right:10px}
.cc-b.site{background:var(--accent-soft);color:var(--accent-text)}
.cc-b.found{background:transparent;border:1px solid var(--line);color:var(--muted)}
/* svg illustration palette */
.cc-ill .w{fill:var(--ill-w)}.cc-ill .a{fill:var(--brand)}.cc-ill .d{fill:var(--ill-d)}.cc-ill .l{fill:var(--ill-l)}.cc-ill .dk{fill:var(--ill-dk)}
.cc-ill .sh{filter:drop-shadow(0 6px 10px rgba(19,21,28,.12))}
.cc-ill .ln{fill:none;stroke:var(--ill-l2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cc-ill .dash{stroke-dasharray:4 6}
.cc-ill .ck{fill:none;stroke:var(--brand);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.cc-ill .a-s{fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round}
.cc-ill .ink-on-a{fill:var(--brand-ink)}.cc-ill .a-t{fill:var(--accent-text)}.cc-ill .a-f{fill:var(--brand)}
.cc-ill .outline{fill:none;stroke:var(--ill-l2);stroke-width:1.5}
.cc-ill .ghost{fill:#F2F1EE}.cc-ill .ghost2{fill:rgba(242,241,238,.35)}
.cc-ill text.d{fill:var(--ill-d)}.cc-ill text.a{fill:var(--brand)}

/* demos */
.cd-wrap{padding-top:0}
.cd-group{margin-bottom:56px}
.cd-gt{margin-bottom:22px}
.cd{border:1px solid var(--line);border-radius:calc(var(--r) + 4px);background:var(--surface);margin-bottom:16px;overflow:hidden;scroll-margin-top:100px}
.cd:target{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cd-h{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px 18px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.cd-h h3{font-size:19px;margin-top:6px}
.cd-h p{color:var(--muted);font-size:14.5px}
.cd-h code{font-size:12.5px;color:var(--accent-text);background:var(--accent-soft);padding:6px 10px;border-radius:8px;max-width:340px;overflow-wrap:anywhere}
.cd-top{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.cd-top:hover{color:var(--ink);border-color:var(--ink)}
.cd-demo{padding:28px 22px;background:var(--bg);min-width:0}
.sg-stack{display:grid;gap:14px}
.sg-inline{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.c-dark{background:var(--night);color:var(--night-ink);padding:18px 20px;border-radius:14px}
.c-dark .btn{color:var(--night-ink)}
.c-dark .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.c-crumbs{color:var(--muted)}.c-crumbs a{color:var(--ink)}
.btn.c-ghost{border-color:transparent}
.btn.c-sm{padding:8px 14px;font-size:13.5px}
.btn.c-lg{padding:17px 28px;font-size:17px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.cs-nav.c-nav-l{width:42px;height:42px;border-color:var(--line);background:var(--surface);color:var(--ink)}
.cs-nav.c-nav-l:hover{background:var(--ink);color:var(--bg)}
.btn.c-load.busy{pointer-events:none;opacity:.85}
.btn.c-load.busy::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.c-x{background:none;border:0;color:inherit;opacity:.6;cursor:pointer;padding:6px;border-radius:8px;display:grid;place-items:center}
.c-x:hover{opacity:1;background:color-mix(in srgb,currentColor 10%,transparent)}
.c-alert{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:14px 16px;border-radius:14px;border:1px solid;font-size:15px;max-width:640px}
.c-alert b{display:block}.c-alert span{color:var(--muted)}
.c-alert>svg{margin-top:1px}
.c-alert.info{border-color:color-mix(in srgb,var(--info) 35%,transparent);background:color-mix(in srgb,var(--info) 8%,var(--surface))}.c-alert.info>svg{color:var(--info)}
.c-alert.ok{border-color:color-mix(in srgb,var(--ok) 35%,transparent);background:color-mix(in srgb,var(--ok) 8%,var(--surface))}.c-alert.ok>svg{color:var(--ok)}
.c-alert.warn{border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 9%,var(--surface))}.c-alert.warn>svg{color:var(--warn)}
.c-alert.err{border-color:color-mix(in srgb,var(--err) 35%,transparent);background:color-mix(in srgb,var(--err) 8%,var(--surface))}.c-alert.err>svg{color:var(--err)}
.c-field{display:grid;gap:6px;font-size:14px;font-weight:600;min-width:0}
.c-input{display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);transition:border-color .2s,box-shadow .2s;font-weight:400}
.c-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);color:var(--ink)}
.c-input input,.c-input select{flex:1;min-width:0;border:0;background:none;padding:12px 0;font:16px var(--body);color:var(--ink);outline:none;appearance:none}
.c-select svg{pointer-events:none}
.c-field textarea{font:16px var(--body);padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);resize:vertical;outline:none;font-weight:400}
.c-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.c-hint{display:inline-flex;gap:6px;align-items:center;font-weight:400;font-size:13px;color:var(--muted)}
.c-field.ok .c-input{border-color:var(--ok)}.c-field.ok .c-hint{color:var(--ok)}
.c-field.err .c-input{border-color:var(--err)}.c-field.err .c-hint{color:var(--err)}
.c-field input:disabled{opacity:.55;cursor:not-allowed}
.c-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;max-width:760px}
.c-wide{grid-column:1/-1}
.c-ac{position:relative;max-width:420px}
.c-ac-list{position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-2);z-index:5;max-height:240px;overflow:auto}
.c-ac-list li{padding:10px 12px;border-radius:10px;cursor:pointer;font-size:15px}
.c-ac-list li:hover,.c-ac-list li.on{background:var(--accent-soft)}
.c-ac-list li mark{background:none;color:var(--accent-text);font-weight:700}
.c-av{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;overflow:visible;background:var(--accent-soft);color:var(--accent-text);font-weight:700;font-size:15px;flex:none}
.c-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:top}
.c-av.sm{width:32px;height:32px;font-size:12px}.c-av.lg{width:60px;height:60px;font-size:20px}.c-av.xl{width:88px;height:88px}
.c-av.on i{position:absolute;right:2px;bottom:2px;width:14px;height:14px;border-radius:50%;background:var(--ok);border:3px solid var(--bg)}
.c-avs{display:inline-flex}
.c-avs .c-av{border:3px solid var(--bg);margin-left:-12px}
.c-avs .c-av:first-child{margin-left:0}
.c-bdg-wrap{position:relative;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.c-bdg{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--brand);color:var(--brand-ink);font-size:12px;display:grid;place-items:center;border:2px solid var(--bg)}
.c-bdg.dot{min-width:14px;width:14px;height:14px;padding:0;top:-3px;right:-3px;background:var(--ok)}
.c-tag{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--ink);color:var(--bg)}
.c-check,.c-radio,.c-switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:16px;position:relative;user-select:none}
.c-check input,.c-radio input,.c-switch input{position:absolute;opacity:0;width:1px;height:1px}
.c-check span{width:22px;height:22px;border-radius:7px;border:2px solid var(--ill-l2);background:var(--surface);display:grid;place-items:center;transition:background .2s,border-color .2s;flex:none}
.c-check input:checked+span{background:var(--accent);border-color:var(--accent)}
.c-check input:checked+span::after{content:"";width:10px;height:6px;border-left:2.5px solid var(--accent-ink);border-bottom:2.5px solid var(--accent-ink);transform:rotate(-45deg) translate(1px,-1px)}
.c-radio span{width:22px;height:22px;border-radius:50%;border:2px solid var(--ill-l2);background:var(--surface);display:grid;place-items:center;flex:none}
.c-radio input:checked+span{border-color:var(--accent)}
.c-radio input:checked+span::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);animation:pop .25s}
@keyframes pop{from{transform:scale(0)}}
.c-switch span{width:46px;height:26px;border-radius:999px;background:var(--ill-l2);position:relative;transition:background .25s;flex:none}
.c-switch span::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.c-switch input:checked+span{background:var(--accent)}
.c-switch input:checked+span::after{transform:translateX(20px)}
.c-check input:focus-visible+span,.c-radio input:focus-visible+span,.c-switch input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}
.c-check input:disabled+span{opacity:.45}.c-check:has(input:disabled){color:var(--muted);cursor:not-allowed}
.c-chip-x{gap:6px;padding-right:6px}
.c-chip-x button{width:22px;height:22px;border-radius:50%;border:0;background:var(--line);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.c-chip-x button:hover{background:var(--ink);color:var(--bg)}
.c-dialog{border:0;border-radius:22px;padding:0;max-width:min(520px,calc(100vw - 32px));background:var(--surface);color:var(--ink);box-shadow:var(--sh-3)}
.c-dialog::backdrop{background:rgba(10,11,15,.55);backdrop-filter:blur(4px)}
.c-dialog[open]{animation:dlgIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes dlgIn{from{opacity:0;transform:translateY(16px) scale(.97)}}
.c-dialog form{padding:28px;display:grid;gap:12px;position:relative}
.c-dialog .c-x{position:absolute;top:14px;right:14px}
.c-dialog h3{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(32px * var(--ds));line-height:1;padding-right:30px}
.c-dialog p{color:var(--muted)}
.c-drawer{position:fixed;inset:0;z-index:120}
.c-drawer-scrim{position:absolute;inset:0;background:rgba(10,11,15,.5);animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}}
.c-drawer-p{position:absolute;right:0;top:0;bottom:0;width:min(360px,88vw);background:var(--surface);color:var(--ink);padding:22px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--sh-3);animation:drIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes drIn{from{transform:translateX(100%)}}
.c-drawer-h{display:flex;justify-content:space-between;align-items:center;font-size:18px}
.c-drawer-p .btn{margin-top:auto;justify-content:center}
.c-list{list-style:none;margin:0;padding:6px;max-width:560px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.c-list li{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:12px;transition:background .2s}
.c-list li:hover{background:var(--accent-soft)}
.c-list li+li{border-top:1px solid var(--line)}
.c-li-ic{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center}
.c-list b{display:block;font-size:15.5px}.c-list span{color:var(--muted);font-size:14px}
.c-li-r{font-weight:600;color:var(--ink)!important;white-space:nowrap}
.c-menu-wrap,.c-pop-wrap{position:relative;display:inline-block}
.c-menu{position:absolute;left:0;top:calc(100% + 8px);min-width:240px;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-2);z-index:5;animation:mIn .2s cubic-bezier(.2,.8,.2,1)}
@keyframes mIn{from{opacity:0;transform:translateY(-6px)}}
.c-menu li{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:15px}
.c-menu li:hover,.c-menu li:focus{background:var(--accent-soft);outline:none}
.c-menu li.sep{height:1px;padding:0;margin:6px 4px;background:var(--line);cursor:default}
.c-pag button{display:inline-flex;align-items:center;gap:6px;min-width:42px;height:42px;justify-content:center;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 15px var(--body);cursor:pointer}
.c-pag button:hover{border-color:var(--ink)}
.c-pag .on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.c-pop{position:absolute;left:0;top:calc(100% + 10px);width:300px;padding:16px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2);z-index:5;font-size:14.5px;animation:mIn .2s}
.c-pop::before{content:"";position:absolute;left:24px;top:-7px;width:12px;height:12px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.c-pop p{color:var(--muted);margin-top:4px}
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);white-space:nowrap;background:var(--ink);color:var(--bg);font:500 13px var(--body);padding:7px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:6}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.c-tip{color:var(--ink);border:1px solid var(--line);background:var(--surface)}
.c-tip-text{border-bottom:2px dotted var(--accent);font-weight:600;cursor:help}
.c-prog-h{display:flex;justify-content:space-between;font-size:14.5px;margin-bottom:8px}
.c-bar{height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.c-bar i{display:block;height:100%;width:var(--v);background:var(--accent);border-radius:inherit;animation:barIn 1.2s cubic-bezier(.2,.8,.2,1)}
@keyframes barIn{from{width:0}}
.c-bar.ind i{width:35%;animation:ind 1.3s ease-in-out infinite}
@keyframes ind{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
.c-ring{width:64px;height:64px;transform:rotate(-90deg)}
.c-ring circle{fill:none;stroke:var(--line);stroke-width:5}
.c-ring circle.v{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:125.6;stroke-dashoffset:calc(125.6 - 125.6 * var(--v) / 100)}
.c-ring text{transform:rotate(90deg);transform-origin:24px 24px;font:700 11px var(--body);fill:var(--ink)}
.c-spin{width:32px;height:32px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
.c-autobar{position:relative;width:160px;height:8px;min-height:0;border-radius:999px;background:var(--line);overflow:hidden;display:block}
.c-autobar .cs-bar{height:100%;animation-iteration-count:infinite!important;background:var(--accent)}
.c-rate{display:flex;align-items:center;gap:2px}
.c-rate button{background:none;border:0;padding:4px;cursor:pointer;color:var(--ill-l2);transition:transform .2s,color .2s}
.c-rate button.on{color:var(--brand)}
.c-rate button.on svg{fill:currentColor}
.c-rate button:hover{transform:scale(1.15)}
.c-rate-v{margin-left:10px;font-weight:600}
.c-range{display:grid}
.c-range input{appearance:none;-webkit-appearance:none;width:100%;height:10px;border-radius:999px;background:linear-gradient(var(--accent),var(--accent)) 0/var(--p,20%) 100% no-repeat,var(--line);outline:none;cursor:pointer}
.c-range input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--surface);border:3px solid var(--accent);box-shadow:var(--sh-2)}
.c-range input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--surface);border:3px solid var(--accent)}
.c-range input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--accent-soft)}
.c-stepper ol{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:x}
.c-stepper li{position:relative;display:grid;justify-items:center;gap:8px;text-align:center;font-size:14.5px;color:var(--muted)}
.c-stepper li::before{content:"";position:absolute;top:18px;left:-50%;right:50%;height:3px;background:var(--line);z-index:0}
.c-stepper li:first-child::before{display:none}
.c-stepper li.done::before,.c-stepper li.on::before{background:var(--accent)}
.c-stepper li span{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);font-weight:800;transition:all .3s}
.c-stepper li.on span{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);transform:scale(1.12)}
.c-stepper li.done span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.c-stepper li.on b,.c-stepper li.done b{color:var(--ink)}
.c-sort th button{all:unset;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.c-sort th button::after{content:"↕";opacity:.4;font-size:12px}
.c-sort th button[data-dir="asc"]::after{content:"↑";opacity:1}
.c-sort th button[data-dir="desc"]::after{content:"↓";opacity:1}
.c-tablist{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.c-tablist button{border:0;background:none;padding:12px 16px;font:600 15px var(--body);color:var(--muted);cursor:pointer;position:relative;white-space:nowrap}
.c-tablist button[aria-selected="true"]{color:var(--ink)}
.c-tablist button[aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}
.c-tabs [role="tabpanel"]{padding:18px 4px 0;animation:mIn .3s}
.c-tl{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:560px}
.c-tl li{display:grid;grid-template-columns:24px 1fr;gap:16px;position:relative;padding-bottom:22px}
.c-tl li::before{content:"";position:absolute;left:11px;top:16px;bottom:-4px;width:2px;background:var(--line)}
.c-tl li:last-child::before{display:none}
.c-tl-d{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);background:var(--surface);margin-top:2px;position:relative;z-index:1}
.c-tl li.on .c-tl-d{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 5px var(--accent-soft)}
.c-tl small{color:var(--accent-text);font-weight:700;font-size:13px}
.c-tl b{display:block;font-size:17px}
.c-tl p{color:var(--muted);font-size:14.5px}
.c-snack{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:130;display:flex;align-items:center;gap:14px;padding:12px 12px 12px 18px;border-radius:14px;background:var(--ink);color:var(--bg);box-shadow:var(--sh-3);font-size:15px;animation:snIn .35s cubic-bezier(.2,.8,.2,1);max-width:calc(100vw - 32px)}
@keyframes snIn{from{opacity:0;transform:translate(-50%,16px)}}
.c-snack-act{background:none;border:0;color:var(--brand);font:700 14px var(--body);cursor:pointer;padding:6px 8px}
.c-car{position:relative}
.c-car-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,32%);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.c-car-track::-webkit-scrollbar{display:none}
.c-car-track>a{scroll-snap-align:start}
.c-car-ui{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.c-heroprev{position:relative;display:block;max-width:640px;aspect-ratio:16/8;border-radius:var(--r);overflow:hidden;background:var(--night);color:#F2F1EE;text-decoration:none}
.c-heroprev img{position:absolute;right:0;top:0;height:100%;width:55%;object-fit:cover;object-position:top;animation:mKb 8s ease-in-out infinite alternate;-webkit-mask:linear-gradient(90deg,transparent,#000 40%);mask:linear-gradient(90deg,transparent,#000 40%)}
.c-heroprev span{position:absolute;left:24px;bottom:22px;right:40%;display:grid;gap:8px}
.c-heroprev small{color:var(--brand);font-weight:700}
.c-heroprev b{font-family:var(--display);font-weight:var(--dw);text-transform:var(--dt);font-size:calc(clamp(26px,4vw,44px) * var(--ds));line-height:.95}
.c-heroprev em{font-style:normal;color:var(--brand)}
.c-heroprev i{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}
.c-heroprev u{height:3px;background:rgba(242,241,238,.25);border-radius:3px;text-decoration:none}
.c-heroprev u:first-child{background:var(--brand)}
.c-one{display:block;grid-template-columns:1fr;max-width:520px;text-decoration:none}
.c-subnav{position:static;border:1px solid var(--line);border-radius:999px}

@media (max-width:1180px){.cc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.sg-mots{grid-template-columns:repeat(3,minmax(0,1fr))}.sg-prins,.sg-logos,.sg-pairs,.sg-shs,.sg-voices{grid-template-columns:repeat(2,minmax(0,1fr))}.sg-presets{grid-template-columns:repeat(3,minmax(0,1fr))}.sg-rads{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.cc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sg-tokgrid{grid-template-columns:minmax(0,1fr)}.sg-row{grid-template-columns:minmax(0,1fr);gap:8px}.cd-h{grid-template-columns:minmax(0,1fr) auto}.cd-h code{grid-column:1/-1;grid-row:2;justify-self:start}}
@media (max-width:640px){
  .cc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cc>b{font-size:14.5px;padding:12px 8px 14px}
  .cc-ill .cc-b{font-size:10.5px;padding:4px 7px;top:8px;right:8px}
  .sg-prins,.sg-logos,.sg-pairs,.sg-shs,.sg-voices,.c-form,.c-stepper ol{grid-template-columns:minmax(0,1fr)}
  .c-stepper ol{grid-template-columns:repeat(4,minmax(0,1fr))}
  .c-stepper li b{font-size:12px}
  .sg-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-rads,.sg-mots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-cols{grid-template-columns:repeat(4,minmax(0,1fr))}.sg-cols i:nth-child(n+5){display:none}
  .sg-sp{grid-template-columns:40px 1fr;gap:4px 12px}.sg-sp span{grid-column:2}
  .sg-s-xl{white-space:normal}
  .cd-demo{padding:22px 16px}
  .cd-h{padding:16px}
  .c-car-track{grid-auto-columns:78%}
  .c-heroprev span{right:24px}.c-heroprev img{width:70%;opacity:.6}
  .c-pop{width:min(300px,calc(100vw - 48px))}
  .cc-tools .search{flex:1 1 100%}
  .sg-live{gap:8px}.sg-seg button{padding:8px 11px;font-size:13px}
}
@media (prefers-reduced-motion: reduce){.m-rise,.m-lift,.m-kb,.m-pulse,.m-wipe,.m-fill,.c-heroprev img,.c-bar.ind i{animation:none!important}}
.foot-dev{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:14px}.foot-dev a{color:var(--accent-text);text-decoration:none;font-weight:600}.foot-dev a:hover{text-decoration:underline}
.cd-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.cd-group .cd-gt{grid-column:1/-1;margin-bottom:6px}
.cd{margin-bottom:0}
.cd.wide{grid-column:1/-1}
.cd-h{grid-template-columns:minmax(0,1fr) auto}
.cd-h code{grid-column:1/-1;grid-row:2;justify-self:start}
.cd-h .cd-top{grid-column:2;grid-row:1}
.sg-s-xl{white-space:normal}
@media (max-width:980px){.cd-group{grid-template-columns:minmax(0,1fr)}}
.cd-group{grid-auto-flow:row dense}