/* Studio Puig : pages de categorie (projets et demos). Charge apres site.css. */
#gl{opacity:var(--gdim,1);transition:opacity .2s linear}
.wk-hero .eyebrow span b{font-weight:400;color:var(--fg)}
.wk-hero .display{font-size:clamp(3.4rem,10vw,9.6rem)}

.wk-list{position:relative;z-index:1;padding:4vh 0 8vh}
.wk{position:relative;display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,84px);min-height:92vh;padding:9vh var(--pad);max-width:1480px;margin:0 auto}
.wk.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.32fr)}
.wk.flip .wk-stage{order:2}
.wk-stage{position:relative}
.wk-frame{position:relative;padding:7px;border-radius:30px;background:color-mix(in srgb,var(--fg) 5%,transparent);box-shadow:0 0 0 1px var(--hair),0 60px 120px -60px color-mix(in srgb,var(--blue) 60%,transparent)}
.demo{position:relative;aspect-ratio:16/10;border-radius:24px;overflow:hidden;background:radial-gradient(120% 90% at 20% 0%,color-mix(in srgb,var(--blue) 16%,transparent),transparent 60%),color-mix(in srgb,var(--bg) 90%,#000 10%);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 14%,transparent);isolation:isolate;user-select:none;-webkit-user-select:none}
.demo canvas,.demo svg.full{position:absolute;inset:0;width:100%;height:100%;display:block}
.wk-copy{max-width:520px}
.wk-n{margin:0;font:400 11px/1 var(--mono);letter-spacing:.24em;color:var(--kicker)}
.wk-t.display{margin:.35em 0 .3em;font-size:clamp(2.4rem,4.4vw,4.4rem);line-height:.95}
.wk-hook{margin:0 0 14px;font:italic 400 clamp(1.2rem,1.6vw,1.45rem)/1.3 var(--serif);color:var(--accent)}
.wk-d{margin:0;font:400 clamp(1rem,1.25vw,1.12rem)/1.6 var(--sans);color:var(--muted)}
.wk-pts{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.wk-pts li{display:flex;align-items:center;gap:12px;font:400 14.5px/1.4 var(--sans);color:var(--fg)}
.wk-pts li::before{content:"";flex:none;width:18px;height:1px;background:var(--accent)}
.wk-tags{display:flex;flex-wrap:wrap;gap:6px;margin:24px 0 0;padding:0;list-style:none}
.wk-tags li{padding:7px 11px;border-radius:999px;font:400 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--kicker);box-shadow:0 0 0 1px var(--hair)}

.wk-next{position:relative;z-index:1;padding:10vh var(--pad) 4vh;max-width:1480px;margin:0 auto}
.wk-next a{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:42px 0;border-top:1px solid var(--hair)}
.wk-next small{font:400 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--kicker)}
.wk-next .display{margin:0;font-size:clamp(2.6rem,7vw,6.4rem);transition:transform .9s var(--ease)}
.wk-next i{font-style:normal;font:400 clamp(2rem,4vw,3.4rem)/1 var(--serif);color:var(--accent);transition:transform .9s var(--ease)}
.wk-next a:hover .display{transform:translateX(12px)}
.wk-next a:hover i{transform:translateX(18px)}

@media (max-width:900px){
  .wk,.wk.flip{grid-template-columns:1fr;min-height:0;padding:9vh var(--pad);gap:28px}
  .wk.flip .wk-stage{order:0}
  .demo{aspect-ratio:4/3.2}
}

/* ===== briques communes des demos ===== */
.d-ui{position:absolute;inset:0;font-family:var(--sans);color:var(--fg)}
.d-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;font:400 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);background:color-mix(in srgb,var(--bg) 70%,transparent);box-shadow:0 0 0 1px var(--hair)}
.d-chip i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.d-tag{position:absolute;right:14px;bottom:12px;font:400 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:.8}
.d-btn{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:0;border-radius:999px;background:var(--fg);color:var(--bg);font:500 12px/1 var(--sans);cursor:pointer;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.d-btn:hover{transform:translateY(-1px)}
.d-btn:active{transform:scale(.97)}
.d-card{border-radius:16px;background:color-mix(in srgb,var(--bg) 78%,var(--fg) 4%);box-shadow:0 0 0 1px var(--hair),inset 0 1px 0 color-mix(in srgb,var(--fg) 10%,transparent)}
.d-in{opacity:0;transform:translateY(12px) scale(.97);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.d-in.on{opacity:1;transform:none}
.d-mono{font:400 9.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* 1 voix */
.dv{display:grid;grid-template-columns:44% 1fr;align-items:center;gap:4%;padding:5% 6%}
.dv-orb{position:relative;aspect-ratio:1}
.dv-orb canvas{position:absolute;inset:0}
.dv-side{display:grid;gap:10px}
.dv-say{margin:0 0 6px;min-height:3.6em;font:italic 400 clamp(1rem,1.6vw,1.35rem)/1.3 var(--serif)}
.dv-say .caret{display:inline-block;width:1.5px;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--accent);animation:dcaret 1s steps(2,jump-none) infinite}
@keyframes dcaret{50%{opacity:0}}
.dv-act{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;padding:11px 14px}
.dv-act b{grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font:400 13px/1 var(--mono)}
.dv-act span{font:500 13px/1.2 var(--sans)}
.dv-act small{font:400 9.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* 2 atelier visuel */
.dw-node{cursor:grab}
.dw-node:active{cursor:grabbing}
.dw-toast{position:absolute;left:50%;bottom:16px;translate:-50% 0;padding:10px 16px;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .7s var(--ease);font:500 12px/1 var(--sans);white-space:nowrap}
.dw-toast.on{opacity:1;transform:none}

/* 3 trading */
.dt-top{position:absolute;left:16px;top:14px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:2}
.dt-seg{display:inline-flex;padding:3px;border-radius:999px;box-shadow:0 0 0 1px var(--hair);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.dt-seg button{border:0;background:none;padding:6px 11px;border-radius:999px;font:400 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.dt-seg button.on{background:var(--fg);color:var(--bg)}
.dt-seg button[disabled]{cursor:not-allowed;opacity:.55}
.dt-alert{position:absolute;right:16px;bottom:34px;max-width:58%;padding:10px 13px;font:400 11.5px/1.35 var(--sans);opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .7s var(--ease);z-index:2}
.dt-alert.on{opacity:1;transform:none}
.dt-alert b{display:block;margin-bottom:3px;font:400 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* 4 ops */
.do{display:grid;grid-template-columns:1.25fr 1fr;gap:12px;padding:16px}
.do-g{padding:14px 14px 10px;display:grid;gap:9px;align-content:start}
.do-row{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:10px}
.do-row span{font:400 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.do-track{position:relative;height:14px;border-radius:7px;background:color-mix(in srgb,var(--fg) 5%,transparent)}
.do-bar{position:absolute;top:0;bottom:0;border-radius:7px;background:linear-gradient(90deg,var(--blue),var(--blue-l));transform-origin:left;transform:scaleX(0);transition:transform 1.3s var(--ease)}
.on .do-bar{transform:scaleX(1)}
.do-today{position:absolute;top:30px;bottom:12px;width:1px;background:var(--sand);opacity:.7}
.do-side{display:grid;gap:12px;align-content:start}
.do-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.do-kpi{padding:12px 10px}
.do-kpi b{display:block;font:400 clamp(1.2rem,2vw,1.7rem)/1 var(--serif)}
.do-kpi small{display:block;margin-top:6px;font:400 8.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.do-ap{padding:10px 12px;display:grid;gap:7px}
.do-ap li{display:flex;align-items:center;justify-content:space-between;gap:8px;font:400 12px/1.2 var(--sans);list-style:none}
.do-ap ul{margin:0;padding:0;display:grid;gap:7px}
.do-ap em{font-style:normal;font:400 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .5s}
.do-ap li.ok em{color:var(--accent)}

/* 5 carnet vocal */
.dl{display:grid;place-items:center}
.dl-phone{position:relative;width:min(46%,250px);aspect-ratio:9/17;border-radius:30px;padding:12px;background:color-mix(in srgb,var(--bg) 70%,#000 30%);box-shadow:0 0 0 1px var(--hair),0 30px 60px -30px #000}
.dl-chat{position:absolute;inset:12px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden;border-radius:20px;padding:10px}
.dl-b{max-width:86%;padding:9px 11px;border-radius:14px;font:400 11px/1.35 var(--sans)}
.dl-me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.dl-bot{align-self:flex-start;border-bottom-left-radius:4px}
.dl-wave{display:flex;align-items:center;gap:2px;height:18px}
.dl-wave i{width:2px;border-radius:2px;background:#fff;opacity:.85}
.dl-entry{display:grid;grid-template-columns:auto 1fr;gap:3px 10px}
.dl-entry dt{font:400 8.5px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dl-entry dd{margin:0;font:500 11px/1.4 var(--sans)}

/* 6 tri des mails */
.di{display:grid;grid-template-columns:1fr 1.35fr;gap:14px;padding:16px}
.di-in{position:relative;padding:12px;overflow:hidden}
.di-mail{position:absolute;left:12px;right:12px;padding:10px 12px;transition:transform 1s var(--ease),opacity .7s var(--ease)}
.di-mail b{display:block;font:500 12px/1.2 var(--sans)}
.di-mail small{font:400 9px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.di-lanes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.di-lane{padding:12px;display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.di-lane span{font:400 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.di-lane b{font:400 clamp(1.6rem,3vw,2.4rem)/1 var(--serif);transition:color .4s}
.di-lane.hit b{color:var(--accent)}
.di-lane small{font:400 11px/1.3 var(--sans);color:var(--muted)}

/* 7 rendez-vous */
.db{padding:16px 18px;display:grid;grid-template-rows:auto 1fr auto;gap:10px}
.db-head{display:flex;justify-content:space-between;align-items:center}
.db-grid{position:relative;display:grid;grid-template-columns:34px repeat(5,1fr);grid-template-rows:auto repeat(8,1fr);gap:3px}
.db-grid>span{font:400 8.5px/1 var(--mono);letter-spacing:.1em;color:var(--muted);text-transform:uppercase;align-self:center}
.db-c{border-radius:5px;background:color-mix(in srgb,var(--fg) 4%,transparent);transition:background .5s,box-shadow .5s}
.db-c.me{background:color-mix(in srgb,var(--fg) 16%,transparent)}
.db-c.them{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--sand) 30%,transparent) 0 4px,transparent 4px 8px)}
.db-c.free{box-shadow:inset 0 0 0 1px var(--accent);animation:dpulse 1.6s var(--ease) infinite}
.db-c.pick{background:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent);animation:none}
@keyframes dpulse{50%{box-shadow:inset 0 0 0 1px transparent}}
.db-foot{display:flex;gap:8px;flex-wrap:wrap}

/* 8 panneau tactile */
.dp{display:grid;place-items:center}
.dp-tab{width:72%;aspect-ratio:4/3;padding:14px;border-radius:26px;background:color-mix(in srgb,var(--bg) 70%,#000 30%);box-shadow:0 0 0 1px var(--hair),0 30px 60px -30px #000;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:10px}
.dp-k{position:relative;display:grid;place-items:center;border:0;border-radius:16px;background:color-mix(in srgb,var(--fg) 6%,transparent);box-shadow:inset 0 0 0 1px var(--hair);color:var(--fg);cursor:pointer;overflow:hidden;transition:transform .3s var(--ease),background .5s var(--ease)}
.dp-k svg{width:42%;height:42%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dp-k.hot{background:color-mix(in srgb,var(--accent) 26%,transparent);color:#fff;transform:scale(.95)}
.dp-k::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 60%,transparent),transparent 60%);opacity:0;transform:scale(.3)}
.dp-k.hot::after{animation:dripple .8s var(--ease)}
@keyframes dripple{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.dp-toast{position:absolute;left:50%;top:14px;translate:-50% 0;opacity:0;transform:translateY(-8px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.dp-toast.on{opacity:1;transform:none}

:root.paused .demo *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.d-in{opacity:1;transform:none}}

/* ===== Apps (suite) ===== */
.dc{pointer-events:none}
.dc-ai{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--blue-l) 60%,transparent),color-mix(in srgb,var(--blue) 30%,transparent) 60%,transparent 72%);box-shadow:0 0 0 1px color-mix(in srgb,var(--blue-l) 50%,transparent),0 0 50px color-mix(in srgb,var(--blue) 60%,transparent)}
.dc-ai span{font:400 1.4rem/1 var(--serif);color:#fff}
.dc-app{position:absolute;translate:-50% -50%;display:grid;justify-items:center;gap:4px;padding:10px 12px;border:0;border-radius:16px;background:color-mix(in srgb,var(--bg) 80%,var(--fg) 4%);box-shadow:0 0 0 1px var(--hair);color:var(--muted);cursor:pointer;pointer-events:auto;transition:color .5s var(--ease),box-shadow .5s var(--ease),opacity .5s var(--ease)}
.dc-app b{display:grid;place-items:center;color:inherit}
.dc-app span{font:500 12px/1 var(--sans);color:var(--fg)}
.dc-app small{font:400 8.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.dc-app.on{color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent),0 0 24px -6px var(--accent)}
.dc-app:not(.on){opacity:.55}

.dg{display:grid;grid-template-columns:1fr .8fr 1.25fr;gap:12px;padding:16px;align-items:stretch}
.dg-drop{padding:12px;display:grid;align-content:start;gap:8px}
.dg-drop ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.dg-drop li{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;background:color-mix(in srgb,var(--fg) 5%,transparent);font:400 11px/1.2 var(--mono);color:var(--fg)}
.dg-drop em{font-style:normal;padding:3px 5px;border-radius:5px;background:color-mix(in srgb,var(--accent) 22%,transparent);font-size:8.5px;letter-spacing:.1em;color:var(--accent)}
.dg-mid{display:grid;align-content:center}
.dg-mid ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.dg-mid li{display:flex;align-items:center;gap:9px;font:400 11.5px/1.3 var(--sans);color:var(--muted);transition:color .4s}
.dg-mid li i{flex:none;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair)}
.dg-mid li.run{color:var(--fg)}
.dg-mid li.run i{box-shadow:inset 0 0 0 1.5px var(--accent);animation:dspin 1s linear infinite;border-top:1.5px solid transparent}
.dg-mid li.ok{color:var(--fg)}
.dg-mid li.ok i{background:var(--accent);box-shadow:0 0 10px var(--accent)}
@keyframes dspin{to{transform:rotate(360deg)}}
.dg-out{padding:12px;display:grid;grid-template-rows:auto 1fr auto;gap:10px}
.dg-tabs{display:flex;gap:4px}
.dg-tabs span{padding:6px 10px;border-radius:999px;font:400 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dg-tabs span.on{background:var(--fg);color:var(--bg)}
.dg-view{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:8px;min-height:0}
.dg-cube{width:100%;height:100%;max-height:120px;stroke:var(--blue-l);stroke-width:1.3;fill:none}
.dg-pages{display:grid;gap:5px}
.dg-pages i{height:26px;border-radius:5px;background:linear-gradient(color-mix(in srgb,var(--fg) 12%,transparent) 0 30%,transparent 30%),color-mix(in srgb,var(--fg) 6%,transparent);box-shadow:inset 0 0 0 1px var(--hair)}

.dmv{display:grid;grid-template-rows:1fr auto;gap:10px;padding:16px}
.dmv-win{overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.dmv-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;border-bottom:1px solid var(--hair)}
.dmv-bar i{width:7px;height:7px;border-radius:50%;background:var(--hair)}
.dmv-bar span{margin-left:10px;font:400 9.5px/1 var(--mono);color:var(--muted)}
.dmv-app{display:grid;grid-template-columns:20% 1fr;min-height:0}
.dmv-app aside{display:grid;align-content:start;gap:8px;padding:12px;border-right:1px solid var(--hair)}
.dmv-app aside i{height:8px;border-radius:4px;background:color-mix(in srgb,var(--fg) 12%,transparent);transition:background .8s}
.dmv-app section{display:grid;grid-template-rows:auto auto 1fr;gap:10px;padding:12px;min-height:0}
.dmv-h{height:14px;width:40%;border-radius:5px;background:color-mix(in srgb,var(--fg) 14%,transparent);transition:background .8s,width .8s var(--ease)}
.dmv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dmv-cards i{height:44px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--hair);background:transparent;transition:background .8s,box-shadow .8s}
.dmv-chart{display:flex;align-items:flex-end;gap:7px;min-height:0;padding:6px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--hair)}
.dmv-chart b{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--fg) 10%,transparent);transform-origin:bottom;transform:scaleY(.3);transition:transform 1s var(--ease),background .8s}
.dmv[data-s="1"] .dmv-chart b,.dmv[data-s="2"] .dmv-chart b{transform:none}
.dmv[data-s="1"] .dmv-cards i,.dmv[data-s="2"] .dmv-cards i{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.dmv[data-s="2"] .dmv-chart b{background:linear-gradient(var(--blue-l),var(--blue))}
.dmv[data-s="2"] .dmv-h{background:var(--fg);width:55%}
.dmv[data-s="2"] .dmv-app aside i:first-child{background:var(--accent)}
.dmv[data-s="2"] .dmv-cards i:first-child{box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.dmv-tl{display:flex;justify-content:space-between;gap:8px}
.dmv-tl span{display:flex;align-items:center;gap:8px;font:400 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .5s}
.dmv-tl i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair);transition:background .5s,box-shadow .5s}
.dmv-tl span.on{color:var(--fg)}
.dmv-tl span.on i{background:var(--accent);box-shadow:0 0 10px var(--accent)}

/* ===== Marketing ===== */
.dk{--k0:#1F4D3A;--k1:#3E8E6A;--k2:#A7D7B8;--k3:#F2E8CF;--k4:#141414;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1.4fr 1fr;gap:10px;padding:16px}
.dk-hero{grid-row:span 1;display:flex;align-items:center;justify-content:center;gap:14px;background:var(--k0);transition:background .9s var(--ease)}
.dk-m{display:grid;place-items:center;width:58px;height:58px;color:var(--k3);transition:color .9s}
.dk-m svg{width:100%;height:100%}
.dk-m.s{width:30px;height:30px;color:var(--k0)}
.dk-w{font:400 clamp(1.4rem,2.6vw,2.2rem)/1 var(--serif);color:var(--k3);transition:color .9s}
.dk-w em{color:var(--k2)}
.dk-w.s{font-size:1rem;color:var(--k4)}
.dk-locks{display:grid;gap:8px}
.dk-l{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--k3);transition:background .9s}
.dk-l.col{flex-direction:column;gap:2px}
.dk-pal{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.dk-sw{display:grid;grid-template-rows:1fr auto;gap:5px}
.dk-sw i{border-radius:12px;box-shadow:inset 0 0 0 1px var(--hair);transition:background .9s}
.dk-sw small{font:400 8.5px/1 var(--mono);color:var(--muted);text-align:center}
.dk-type{display:flex;align-items:center;gap:16px;padding:0 16px}
.dk-type b{font:400 3rem/1 var(--serif);color:var(--fg)}
.dk-type span{font:400 9.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dk.swap .dk-m svg{animation:dmark .9s var(--ease)}
@keyframes dmark{0%{opacity:0;transform:scale(.6) rotate(-20deg)}100%{opacity:1;transform:none}}

.dty{--w:400;--x:100%;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto 1fr;gap:12px 20px;padding:20px 22px}
.dty-spec{grid-column:span 2;font:var(--w) clamp(2rem,4.6vw,3.6rem)/1 var(--sans);font-stretch:var(--x);letter-spacing:-.02em;color:var(--fg)}
.dty-spec em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)}
.dty-ctl{display:grid;align-content:start;gap:16px}
.dty-ctl label{display:grid;gap:8px}
.dty-ctl b{font-weight:400;color:var(--fg)}
.dty-ctl input{width:100%;accent-color:var(--blue-l)}
.dty-scale{margin:0;padding:0;list-style:none;display:grid;align-content:start;gap:6px}
.dty-scale li{display:grid;gap:2px}
.dty-scale b{font-weight:var(--w);font-stretch:var(--x);font-family:var(--sans);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.df{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;padding:16px}
.df-tree{padding:12px;overflow:hidden}
.df-tree ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:3px}
.df-tree li{display:flex;align-items:center;gap:7px;font:400 11px/1.5 var(--mono);color:var(--fg)}
.df-tree li>i{width:12px;height:1px;background:var(--hair)}
.df-tree li em{margin-left:auto;color:var(--accent);display:grid}
.df-prev{display:flex;flex-wrap:wrap;align-content:center;align-items:flex-end;justify-content:center;gap:10px}
.df-f{display:grid;justify-items:center;gap:5px}
.df-r{height:92px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(140deg,color-mix(in srgb,var(--blue) 50%,transparent),color-mix(in srgb,var(--blue-l) 20%,transparent));box-shadow:inset 0 0 0 1px var(--hair)}
.df-f:nth-child(2) .df-r{height:120px}.df-f:nth-child(3) .df-r{height:58px}.df-f:nth-child(5) .df-r{height:110px}
.df-mk{width:22px;height:22px;color:#fff;opacity:.85}
.df-mk svg{width:100%;height:100%}
.df-f small{font:400 8.5px/1 var(--mono);letter-spacing:.12em;color:var(--muted)}

.dr{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;padding:16px}
.dr-page{padding:14px 16px;border-radius:12px;background:#F6F4EE;color:#16242B;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;overflow:hidden}
.dr-h{display:flex;align-items:center;gap:10px}
.dr-mk{width:28px;height:28px;color:#1E40C8}
.dr-mk svg{width:100%;height:100%}
.dr-h b{display:block;font:400 1.15rem/1 var(--serif)}
.dr-h small{font:400 8.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.dr-k{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dr-k div{padding:8px;border-radius:8px;background:#E9E6DD}
.dr-k b{display:block;font:400 1.3rem/1 var(--serif);color:#1E40C8}
.dr-k small{font:400 8px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.dr-ch{display:flex;align-items:flex-end;gap:6px;min-height:50px}
.dr-ch i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:#1E40C8;transform-origin:bottom;transform:scaleY(0);transition:transform .9s var(--ease) var(--d)}
.built .dr-ch i{transform:none}
.dr-tx{display:grid;gap:5px}
.dr-tx i{height:5px;border-radius:3px;background:#D6D2C6}
.dr-chk{padding:12px}
.dr-chk ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.dr-chk li{display:flex;justify-content:space-between;align-items:center;font:400 12px/1.2 var(--sans);color:var(--muted);transition:color .4s}
.dr-chk em{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair);color:transparent;transition:all .4s var(--ease)}
.dr-chk li.ok{color:var(--fg)}
.dr-chk li.ok em{background:var(--accent);color:var(--bg);box-shadow:0 0 10px var(--accent)}

.dn{display:grid;grid-template-columns:.9fr 1.4fr;grid-template-rows:1fr auto;gap:10px 12px;padding:16px}
.dn-list{padding:8px;display:grid;align-content:start;gap:4px}
.dn-it{padding:9px 10px;border-radius:10px}
.dn-it.on{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.dn-it b{display:block;font:500 12px/1.2 var(--sans)}
.dn-it small{font:400 9px/1.6 var(--mono);color:var(--muted)}
.dn-mail{border-radius:12px;background:#F6F4EE;color:#16242B;padding:12px;display:grid;align-content:start;gap:8px;overflow:hidden}
.dn-band{display:flex;align-items:center;gap:10px;padding:10px;border-radius:9px;background:#0E4C6E;color:#F6F1E7}
.dn-mk{width:22px;height:22px}
.dn-mk svg{width:100%;height:100%}
.dn-band b{font:400 1rem/1 var(--serif)}
.dn-story{display:grid;grid-template-columns:30% 1fr;gap:8px}
.dn-story .img{height:44px;border-radius:7px;background:linear-gradient(140deg,#2E86AB,#A1D2E6)}
.dn-story div{display:grid;gap:5px;align-content:center}
.dn-story div i{height:5px;border-radius:3px;background:#D6D2C6}
.dn-cta{justify-self:start;padding:8px 12px;border-radius:999px;background:#0E4C6E;color:#F6F1E7;font:500 11px/1 var(--sans)}
.dn-val{grid-column:span 2;display:flex;flex-wrap:wrap;gap:6px}

.ds{display:grid;grid-template-rows:auto 1fr;gap:10px;padding:16px}
.ds-head{display:flex;justify-content:space-between;align-items:center}
.ds-head b{font-weight:400;color:var(--accent)}
.ds-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:auto repeat(4,1fr);gap:4px}
.ds-grid>span{font:400 8.5px/1 var(--mono);color:var(--muted);text-align:center}
.ds-d{position:relative;border-radius:8px;background:color-mix(in srgb,var(--fg) 4%,transparent);padding:4px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.ds-d small{font:400 8px/1 var(--mono);color:var(--muted)}
.ds-p{display:grid;place-items:center;height:16px;border-radius:5px;font:400 7.5px/1 var(--mono);font-style:normal;letter-spacing:.1em;color:#fff;animation:dpop .6s var(--ease)}
.ds-p.p0{background:linear-gradient(90deg,#8FA8FF,#2F5BFF)}
.ds-p.p1{background:#16242B;box-shadow:inset 0 0 0 1px var(--hair)}
.ds-p.p2{background:#B23A3A}
@keyframes dpop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}

.dd{display:grid;grid-template-rows:1fr auto;gap:10px;padding:16px}
.dd-stage{position:relative;border-radius:12px;overflow:hidden;background:#F6F4EE;color:#16242B}
.dd-s{position:absolute;inset:0;padding:6% 7%;display:flex;flex-direction:column;justify-content:center;gap:10px;opacity:0;transform:translateX(30px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.dd-s.on{opacity:1;transform:none}
.dd-s.past{transform:translateX(-30px)}
.dd-mk{width:40px;height:40px;color:#3D2C8D}
.dd-mk svg{width:100%;height:100%}
.dd-s b{font:400 clamp(1.8rem,3.4vw,2.8rem)/1 var(--serif)}
.dd-s b.sm{font-size:clamp(1.1rem,2vw,1.5rem)}
.dd-s small{font:400 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.dd-bars{display:grid;gap:8px}
.dd-bars div{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:8px}
.dd-bars i{height:12px;width:var(--w);border-radius:6px;background:#3D2C8D}
.dd-tl{display:flex;justify-content:space-between;border-top:2px solid #3D2C8D;padding-top:12px}
.dd-tl span{display:grid;gap:6px;font:400 11px/1 var(--sans)}
.dd-tl i{width:10px;height:10px;border-radius:50%;background:#3D2C8D;margin-top:-18px}
.dd-nav{display:flex;align-items:center;gap:8px}
.dd-nav button{cursor:pointer;border:0}
.dd-nav .d-chip:last-child{margin-left:auto}

.dm{perspective:900px;display:grid;place-items:center}
.dm-scene{position:relative;width:86%;height:80%;transform-style:preserve-3d}
.dm-pat{position:absolute;inset:0;width:100%;height:100%;color:#F2A65A}
.dm-poster{position:absolute;left:0;top:4%;width:34%;height:88%;overflow:hidden;background:#2B2D42;color:#FAFAF7;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:12px;transform:translateZ(40px)}
.dm-poster b{position:relative;font:400 1.5rem/1 var(--serif)}
.dm-poster b em{color:#F2A65A}
.dm-poster small{position:relative;font:400 8px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.dm-mk{position:relative;width:30px;height:30px;color:#F2A65A;margin-bottom:auto}
.dm-mk svg{width:100%;height:100%}
.dm-laptop{position:absolute;left:38%;top:16%;width:42%;transform:translateZ(10px)}
.dm-lid{position:relative;aspect-ratio:16/10.5;border-radius:10px 10px 4px 4px;overflow:hidden;background:#E2553B;display:grid;place-items:center;color:#FAFAF7}
.dm-lid .dm-pat{color:#FAFAF7;opacity:.4}
.dm-lid .dm-mk{margin:0;width:38px;height:38px;color:#FAFAF7}
.dm-base{display:block;height:8px;margin:0 -6%;border-radius:0 0 8px 8px;background:#C9C6BE}
.dm-card{position:absolute;right:0;bottom:2%;width:30%;padding:12px;display:grid;gap:4px;transform:translateZ(70px) rotate(4deg);background:#FAFAF7;color:#2B2D42}
.dm-card .dm-mk{color:#E2553B;margin:0 0 4px;width:24px;height:24px}
.dm-card b{font:400 1rem/1.1 var(--serif)}
.dm-card small{font:400 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.65}

.dst{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;padding:16px}
.dst-map{position:relative;overflow:hidden;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:25% 25%;background-position:center}
.dst-map .ax{position:absolute;font:400 8.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dst-map .ax.x{right:10px;bottom:8px}
.dst-map .ax.y{left:8px;top:10px}
.dst-map .o{position:absolute;width:12px;height:12px;translate:-50% 50%;border-radius:50%;background:color-mix(in srgb,var(--fg) 30%,transparent)}
.dst-map .you{position:absolute;left:50%;bottom:10%;translate:-50% 50%;width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent);transition:left 1.4s var(--ease),bottom 1.4s var(--ease)}
.dst-map .you em{position:absolute;left:24px;top:50%;translate:0 -50%;font:normal 400 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.dst-map .gap{position:absolute;left:40%;bottom:84%;width:64px;height:64px;translate:-50% 50%;border-radius:50%;box-shadow:inset 0 0 0 1px var(--accent);opacity:0;transition:opacity .8s}
.placed .you{left:40%;bottom:84%}
.placed .gap{opacity:.5;animation:dpulse 1.6s infinite}
.dst-side{display:grid;gap:8px;align-content:center}
.dst-p{padding:10px 12px;display:grid;gap:4px}
.dst-p b{font:500 13px/1.2 var(--sans)}
.dst-p small{font:400 9px/1.5 var(--mono);letter-spacing:.06em;color:var(--muted)}
.dst-ch{padding:10px 12px;display:grid;gap:6px}
.dst-ch div{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:8px}
.dst-ch small{font:400 9px/1 var(--mono);color:var(--muted)}
.dst-ch i{height:6px;width:var(--w);border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--blue-l))}

.dco{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:24px;padding:16px 28px}
.dco-ph{position:relative;height:88%;aspect-ratio:9/16;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px var(--hair),0 30px 60px -30px #000}
.dco-bg{position:absolute;inset:0;background:radial-gradient(80% 60% at 30% 20%,#2F5BFF,transparent 70%),radial-gradient(70% 50% at 80% 80%,#8FA8FF,transparent 70%),#0B2633;animation:dbg 8s ease-in-out infinite alternate}
@keyframes dbg{to{filter:hue-rotate(-20deg) brightness(1.1)}}
.dco-cap{position:absolute;left:10%;right:10%;top:56%;margin:0;font:600 clamp(.95rem,1.5vw,1.2rem)/1.2 var(--sans);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.dco-cap .hl{color:#0B2633;background:#EAF1EF;border-radius:5px;padding:0 4px}
.dco-wave{position:absolute;left:12%;right:12%;bottom:12%;height:22px;display:flex;align-items:center;gap:2px}
.dco-wave i{flex:1;height:100%;border-radius:2px;background:rgba(255,255,255,.85);transform-origin:center}
.dco-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff;transform-origin:left}
.dco-steps{display:grid;gap:8px;justify-items:start}
.dco-steps .d-chip{opacity:.4;transition:opacity .5s}
.dco-steps .d-chip.on{opacity:1}

.dto{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:12px;padding:16px}
.dto-c{padding:14px;display:grid;align-content:start;gap:10px}
.dto-c p{margin:0;font:400 clamp(.95rem,1.4vw,1.15rem)/1.45 var(--sans);min-height:5em}
.dto-c.gen p{color:var(--muted);font-family:var(--mono);font-size:.82rem}
.dto-c.mine{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent),0 0 30px -10px var(--accent)}
.dto-c.mine p{color:var(--fg)}
.dto-rules{grid-column:span 2;display:flex;flex-wrap:wrap;gap:6px}

.dda{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr auto;gap:10px;padding:16px}
.dda-line{padding:12px;display:grid;grid-template-rows:auto 1fr}
.dda-line svg{width:100%;height:100%}
.dda-line .ln{fill:none;stroke:var(--blue-l);stroke-width:2;vector-effect:non-scaling-stroke}
.dda-line .area{fill:color-mix(in srgb,var(--blue) 25%,transparent)}
.dda-bars{padding:12px;display:grid;align-content:start;gap:9px}
.dda-bars div{display:grid;gap:4px}
.dda-bars small{font:400 9px/1 var(--mono);color:var(--muted)}
.dda-bars i{height:7px;border-radius:4px;width:var(--w);background:linear-gradient(90deg,var(--blue),var(--blue-l));transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease)}
.dda.on .dda-bars i{transform:none}
.dda-ins{grid-column:span 2;padding:11px 14px;display:flex;gap:12px;align-items:baseline}
.dda-ins b{font:400 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.dda-ins span{font:400 12.5px/1.4 var(--sans)}

@media (max-width:900px){
  .dv,.do,.di,.dg,.df,.dr,.dn,.dst,.dto,.dda,.dk{grid-template-columns:1fr}
  .dg-mid,.do-side,.di-lanes,.dr-chk,.dn-list,.dst-side,.dk-locks,.dk-type{display:none}
  .dto .dto-c.gen{display:none}
  .dda-bars{display:none}
  .dco{grid-template-columns:1fr;justify-items:center}
  .dco-steps{display:none}
  .dv-orb{max-width:46%;margin:0 auto}
}

/* ===== Growth ===== */
.dle{padding:18px 20px;display:grid;grid-template-rows:auto auto 1fr;gap:10px}
.dle-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.dle-t{font:400 1.5rem/1 var(--serif)}
.dle-h b{font-weight:400;color:var(--accent)}
.dle-f{display:flex;gap:6px}
.dle-f button{cursor:pointer;border:0;opacity:.5;transition:opacity .4s}
.dle-f button.on{opacity:1}
.dle-r{margin:0;padding:0;list-style:none;display:grid;gap:5px;align-content:start}
.dle-r li{display:grid;grid-template-columns:1.3fr 1fr 90px 84px;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--fg) 4%,transparent);opacity:0;transform:translateX(16px);transition:opacity .6s var(--ease),transform .8s var(--ease),background .5s}
.dle-r li.on{opacity:1;transform:none}
.dle-r li.off{opacity:.18}
.dle-r li.ok{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.dle-r .nm{font:500 12.5px/1.2 var(--sans)}
.dle-r .wh{font:400 9px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dle-r .fit{height:3px;border-radius:3px;background:var(--hair);overflow:hidden}
.dle-r .fit i{display:block;height:100%;width:calc(var(--f) * 100%);background:linear-gradient(90deg,var(--blue),var(--blue-l));transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease)}
.dle-r li.on .fit i{transform:none}
.dle-r .st{display:inline-flex;align-items:center;gap:6px;justify-self:end;font:400 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:.35;transition:all .5s}
.dle-r .st i{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor}
.dle-r li.ok .st{opacity:1;color:var(--accent)}
.dle-r li.ok .st i{background:currentColor;box-shadow:0 0 8px currentColor}

.den{display:grid;place-items:center;padding:16px}
.den-c{width:min(440px,92%);padding:18px}
.den-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-bottom:14px}
.den-av{width:40px;height:40px;border-radius:12px;background:linear-gradient(140deg,var(--blue),var(--blue-l))}
.den-top b{display:block;font:500 14px/1.2 var(--sans)}
.den-top small{font:400 9px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.den-sc b{font-weight:400;color:var(--accent)}
.den dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 16px}
.den dt{font:400 9px/1.8 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--kicker)}
.den dd{position:relative;margin:0;min-height:18px}
.den dd .sk{position:absolute;left:0;top:4px;height:10px;width:70%;border-radius:5px;background:linear-gradient(90deg,var(--hair),color-mix(in srgb,var(--fg) 14%,transparent),var(--hair));background-size:200% 100%;animation:dsk 1.4s linear infinite;transition:opacity .4s}
@keyframes dsk{to{background-position:-200% 0}}
.den dd .v{font:400 13px/1.4 var(--sans);opacity:0;transition:opacity .5s .1s}
.den dd.on .sk{opacity:0}
.den dd.on .v{opacity:1}

.dou{display:grid;place-items:center;padding:16px}
.dou-c{width:min(520px,94%);padding:16px 18px;display:grid;gap:12px}
.dou-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.dou-t{margin:0;min-height:6.5em;font:400 clamp(.95rem,1.4vw,1.1rem)/1.6 var(--sans)}
.dou-t mark{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--fg);border-radius:4px;padding:0 3px}
.dou-k{display:flex;gap:6px;flex-wrap:wrap}

.dte{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;padding:16px;align-items:center}
.dte-c{padding:14px}
.dte-c ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.dte-c li{display:grid;gap:5px}
.dte-c li span{font:400 12px/1.2 var(--sans)}
.dte-c li i{height:6px;border-radius:3px;background:var(--hair);position:relative;overflow:hidden}
.dte-c li i::after{content:"";position:absolute;inset:0;width:calc(var(--v) * 100%);border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--blue-l));transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease)}
.dte.on .dte-c li i::after{transform:none}
.dte-g{display:grid;justify-items:center;gap:6px}
.dte-g svg{width:90%;overflow:visible}
.dte-g .trk{fill:none;stroke:var(--hair);stroke-width:8;stroke-linecap:round}
.dte-g .val{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:157;transition:stroke-dashoffset 1.4s var(--ease)}
.dte-g .ndl{stroke:var(--fg);stroke-width:2;transform-origin:60px 64px;transform:rotate(-90deg);transition:transform 1.4s var(--ease)}
.dte-v{font:400 2.4rem/1 var(--serif);color:var(--accent);opacity:0;transform:scale(.8);transition:all .7s var(--ease)}
.dte-g small{font:400 9.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .6s .2s}
.dte.done .dte-v{opacity:1;transform:none}
.dte.done .dte-g small{opacity:1}

.dbr{display:grid;place-items:center;padding:16px}
.dbr-doc{width:min(560px,94%);border-radius:12px;background:#F6F4EE;color:#16242B;padding:16px 18px}
.dbr-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #D6D2C6;padding-bottom:8px;margin-bottom:8px}
.dbr-h b{font:400 1.35rem/1 var(--serif)}
.dbr-h small{font:400 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.dbr ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.dbr li{display:grid;grid-template-columns:82px 1fr;align-items:center;gap:10px;font:400 12.5px/1.35 var(--sans)}
.dbr li em{font-style:normal;justify-self:start;padding:4px 8px;border-radius:999px;background:#1E40C8;color:#fff;font:400 8.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}

.dpi{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px}
.dpi-c{padding:10px;display:grid;grid-template-rows:auto auto 1fr;gap:6px;min-height:0}
.dpi-c .n{font:400 1.6rem/1 var(--serif);color:var(--accent)}
.dpi-c .st{display:grid;align-content:start;gap:5px}
.dpi-k{padding:8px 9px;border-radius:9px;background:color-mix(in srgb,var(--fg) 7%,transparent);font:500 11px/1.2 var(--sans)}
.dpi-k.mv{animation:dmv .7s var(--ease)}
@keyframes dmv{0%{transform:translateX(-30px);opacity:0}100%{transform:none;opacity:1}}

.dma{padding:16px}
.dma-c{position:absolute;inset:16px;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:25% 25%;overflow:hidden}
.dma-c .ax{position:absolute;font:400 8.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dma-c .ax.x{right:10px;bottom:8px}.dma-c .ax.y{left:8px;top:10px}
.dma-b{position:absolute;width:var(--r);height:var(--r);border:0;border-radius:50%;background:color-mix(in srgb,var(--blue) 30%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue-l) 50%,transparent);cursor:pointer;display:grid;place-items:center;transition:background .5s,box-shadow .5s}
.dma-b span{font:400 9px/1.1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);white-space:nowrap}
.dma-b.pick{background:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 0 0 2px var(--accent),0 0 30px -4px var(--accent)}

.dse{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;padding:16px;align-items:center}
.dse-r{padding:16px;display:grid;gap:6px;opacity:0;transform:translateY(10px);transition:all .8s var(--ease)}
.dse-r.on{opacity:1;transform:none}
.dse-r small{font:400 11px/1 var(--sans);color:var(--muted)}
.dse-r b{font:400 1.25rem/1.25 var(--serif);color:var(--blue-l)}
.dse-r span{font:400 12.5px/1.5 var(--sans);color:var(--muted)}
.dse-k{padding:14px}
.dse-k ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.dse-k li{display:flex;justify-content:space-between;align-items:center;gap:8px;font:400 12px/1.2 var(--sans);color:var(--muted);transition:color .4s}
.dse-k em{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair);color:transparent;transition:all .4s}
.dse-k li.ok{color:var(--fg)}
.dse-k li.ok em{background:var(--accent);color:var(--bg);box-shadow:0 0 10px var(--accent)}

/* ===== Training ===== */
.dla{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:8px;padding:18px}
.dla-l,.dla-more{display:grid;justify-items:center;align-content:center;gap:6px;border:0;border-radius:14px;background:color-mix(in srgb,var(--fg) 3%,transparent);box-shadow:inset 0 0 0 1px var(--hair);color:var(--muted);cursor:default;transition:background .5s,box-shadow .5s,color .5s}
.dla-l img{width:24px;height:24px;filter:invert(1);opacity:.42;transition:opacity .5s}
:root[data-theme="light"] .dla-l img{filter:none}
.dla-l span{font:400 8px/1.1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:center;opacity:0;transition:opacity .4s}
.dla-l:hover,.dla-l.hot{background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent);color:var(--fg)}
.dla-l:hover img,.dla-l.hot img{opacity:.95}
.dla-l:hover span,.dla-l.hot span{opacity:1}
.dla-more b{font:400 1.6rem/1 var(--serif);color:var(--accent)}
.dla-more span{font:italic 400 .8rem/1.1 var(--serif);text-align:center;color:var(--fg)}

.dcu{padding:18px 20px}
.dcu ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;height:100%;align-content:center}
.dcu li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--fg) 3%,transparent);opacity:.45;transition:opacity .5s,background .5s}
.dcu li.on{opacity:1;background:color-mix(in srgb,var(--accent) 9%,transparent)}
.dcu em{font-style:normal;font:400 10px/1 var(--mono);letter-spacing:.16em;color:var(--kicker)}
.dcu b{display:block;font:500 13.5px/1.2 var(--sans)}
.dcu small{font:400 9px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dcu .ring svg{width:26px;height:26px;transform:rotate(-90deg)}
.dcu .ring circle{fill:none;stroke:var(--hair);stroke-width:3}
.dcu .ring .p{stroke:var(--accent);stroke-dasharray:94.2;stroke-dashoffset:94.2;transition:stroke-dashoffset 1s var(--ease)}
.dcu li.done .ring .p{stroke-dashoffset:0}

.dtm{display:grid;place-items:center;padding:16px}
.dtm-w{width:94%;height:88%;border-radius:14px;background:#06141B;box-shadow:0 0 0 1px var(--hair);display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.dtm-b{display:flex;align-items:center;gap:5px;padding:9px 12px;border-bottom:1px solid var(--hair)}
.dtm-b i{width:7px;height:7px;border-radius:50%;background:var(--hair)}
.dtm-b span{margin-left:8px;font:400 9.5px/1 var(--mono);color:var(--muted)}
.dtm-o{margin:0;padding:14px 16px;font:400 clamp(10.5px,1.05vw,12.5px)/1.8 var(--mono);color:#C9D6DA;white-space:pre-wrap}
.dtm-o b{color:var(--blue-l);font-weight:400}
.dtm-o .cmd{color:#fff}
.dtm-o .ok{color:#8FD3B5}

.dkn-n{position:absolute;translate:-50% -50%;display:grid;justify-items:center;gap:2px;padding:7px 11px;border-radius:12px;background:color-mix(in srgb,var(--bg) 82%,var(--fg) 4%);box-shadow:0 0 0 1px var(--hair);font:500 11.5px/1.2 var(--sans);white-space:nowrap;transition:box-shadow .5s,transform .5s var(--ease)}
.dkn-n em{font-style:normal;font:400 8px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dkn-n.ok em{color:#8FD3B5}.dkn-n.hyp em{color:var(--sand)}.dkn-n.lock em{color:#E28B7B}.dkn-n.core em{color:var(--accent)}
.dkn-n.core{padding:10px 14px;font:400 1rem/1 var(--serif)}
.dkn-n.hot{box-shadow:0 0 0 1px var(--accent),0 0 24px -6px var(--accent);transform:scale(1.06)}

.dsk{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.dsk-l{display:grid;gap:8px;align-content:center}
.dsk-s{padding:11px 13px;display:grid;gap:3px;transition:box-shadow .5s,transform .5s var(--ease)}
.dsk-s b{font:400 12.5px/1 var(--mono);color:var(--blue-l)}
.dsk-s small{font:400 11px/1.3 var(--sans);color:var(--muted)}
.dsk-s.on{box-shadow:0 0 0 1px var(--accent),0 0 24px -8px var(--accent);transform:translateX(6px)}
.dsk-o{padding:14px;display:grid;grid-template-rows:auto 1fr;gap:10px}
.dsk-doc{border-radius:10px;background:#F6F4EE;padding:14px;display:grid;align-content:start;gap:7px}
.dsk-doc i{height:6px;border-radius:3px;background:#D6D2C6;transform-origin:left;transform:scaleX(0)}
.dsk-doc i:first-child{height:12px;width:55%;background:#1E40C8}
.dsk-doc.on i{animation:dline .6s var(--ease) forwards}
.dsk-doc.on i:nth-child(2){animation-delay:.15s}.dsk-doc.on i:nth-child(3){animation-delay:.3s}.dsk-doc.on i:nth-child(4){animation-delay:.45s}.dsk-doc.on i:nth-child(5){animation-delay:.6s;width:62%}
@keyframes dline{to{transform:none}}

.dmc{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:8px;padding:18px}
.dmc-r{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;padding:11px 12px;opacity:.6;transition:opacity .4s}
.dmc-r.on{opacity:1}
.dmc-r b{display:grid;color:var(--accent)}
.dmc-r span{font:500 12.5px/1 var(--sans)}
.dmc-r small{font:400 8.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dmc-r .sw{position:relative;width:34px;height:20px;border:0;border-radius:999px;background:var(--hair);cursor:pointer;transition:background .4s}
.dmc-r .sw i{position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .4s var(--ease)}
.dmc-r.on .sw{background:var(--blue)}
.dmc-r.on .sw i{transform:translateX(14px)}

.dpr{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;padding:16px;align-items:center}
.dpr-c{padding:14px;display:grid;gap:10px}
.dpr-c p{margin:0;font:400 12.5px/1.6 var(--mono);color:var(--muted)}
.dpr-c.good{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent),0 0 30px -12px var(--accent)}
.dpr-c.good p{color:var(--fg);font-family:var(--sans);font-size:13.5px}
.dpr-c mark{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--fg);border-radius:4px;padding:0 3px}
.dpr-c .q{display:grid;gap:5px}
.dpr-c .q small{font:400 8.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dpr-c .q i{height:6px;border-radius:3px;background:var(--hair);position:relative;overflow:hidden}
.dpr-c .q i::after{content:"";position:absolute;inset:0;width:var(--w);background:linear-gradient(90deg,var(--blue),var(--blue-l));transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease) .4s}
.dpr.on .dpr-c .q i::after{transform:none}

.dsa{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:22px;padding:18px 24px}
.dsa-sh svg{width:84px;height:98px;fill:color-mix(in srgb,var(--blue) 18%,transparent);stroke:var(--blue-l);stroke-width:1.6;stroke-linejoin:round}
.dsa-sh .ck{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .8s var(--ease)}
.dsa.done .ck{stroke-dashoffset:0}
.dsa ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.dsa li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--fg) 3%,transparent);font:400 12px/1.3 var(--sans);color:var(--muted);transition:all .5s}
.dsa li em{font-style:normal;font:400 8.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .4s}
.dsa li.ok{color:var(--fg);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.dsa li.ok em{opacity:1;color:var(--accent)}

@media (max-width:900px){
  .dle-r li{grid-template-columns:1fr 70px}
  .dle-r .wh,.dle-r .fit{display:none}
  .dte,.dse,.dsk,.dpr,.dmc{grid-template-columns:1fr}
  .dse-k,.dsk-o,.dpr-c:not(.good){display:none}
  .dla{grid-template-columns:repeat(4,1fr)}
  .dpi{grid-template-columns:repeat(2,1fr)}
  .dsa{grid-template-columns:1fr}.dsa-sh{display:none}
}

/* ===== 3D & motion ===== */
.demo>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.dmx{pointer-events:none}
.dmx-cams{position:absolute;left:14px;top:12px;display:flex;gap:6px;pointer-events:auto}
.dmx-cams button{cursor:pointer;border:0;opacity:.55;transition:opacity .4s}
.dmx-cams button.on{opacity:1;box-shadow:0 0 0 1px var(--accent)}
.dmx-lb{position:absolute;translate:-50% -140%;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--bg) 80%,transparent);box-shadow:0 0 0 1px var(--hair);font:400 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);white-space:nowrap;transition:opacity .3s}
.dmx-lb::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:12px;background:var(--hair)}

.din{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:26px;padding:16px 30px}
.din-ph{height:90%;aspect-ratio:9/16;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px var(--hair),0 30px 60px -30px #000}
.din-ph video{width:100%;height:100%;object-fit:cover;display:block}
.din-s{display:grid;gap:8px;justify-items:start}

.dlo-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dlo{display:flex;justify-content:space-between;align-items:flex-start;padding:14px}
.dlo-l{opacity:0;transition:opacity .4s}
.dlo-l.on{opacity:1}

.dmk{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px}
.dmk-f{position:relative;height:72%;display:grid;place-items:center;align-content:center;gap:8px;border-radius:12px;background:#0B2633;box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}
.dmk-f.a{height:46%}.dmk-f.b{height:58%}.dmk-f.c{height:80%}
.dmk-m{width:42px;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.dmk-m img{width:100%;display:block}
.dmk-w{font:400 clamp(.9rem,1.5vw,1.2rem)/1 var(--serif);color:#EAF1EF;white-space:nowrap}
.dmk-w em{color:#8FA8FF}
.dmk-w i{display:inline-block;font-style:normal;opacity:0;transform:translateY(60%);transition:opacity .5s var(--ease),transform .7s var(--ease);transition-delay:calc(.5s + var(--i) * .05s)}
.dmk.on .dmk-m{clip-path:inset(0 0 0 0)}
.dmk.on .dmk-w i{opacity:1;transform:none}
.dmk-f.c .dmk-w{font-size:.95rem}

.dki{display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 50%,color-mix(in srgb,var(--blue) 22%,transparent),transparent 70%)}
.dki-s{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:2px;text-align:center}
.dki-s span{display:block;overflow:hidden}
.dki-s .a{font:400 clamp(1.8rem,4vw,3.4rem)/1 var(--sans);letter-spacing:-.03em;color:var(--fg)}
.dki-s .b em{display:block;font:italic 400 clamp(2.2rem,5vw,4.4rem)/1 var(--serif);color:var(--accent);transform:translateY(110%);transition:transform .8s var(--ease) .15s}
.dki-s .a{transform:scale(1.25);opacity:0;filter:blur(8px);transition:all .8s var(--ease)}
.dki-s.on .a{transform:none;opacity:1;filter:none}
.dki-s.on .b em{transform:none}
.dki-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.dki-bar.go{animation:dbar 2.2s linear forwards}
@keyframes dbar{to{transform:scaleX(1)}}

@media (max-width:900px){
  .din{grid-template-columns:1fr;justify-items:center}.din-s{display:none}
  .dmk-f.a{display:none}
}