/* ══════════════════════════════════════════════════════════
   dot+ Brand System — stylesheet
   Dark-primary. Mono foundation, themeable. Foundation over decoration.
   ══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* primitive — mono */
  --mono-0:#FFFFFF; --mono-50:#FAFAFC; --mono-100:#F2F2F5; --mono-200:#E6E6EB;
  --mono-300:#C8C8D4; --mono-400:#9494A3; --mono-500:#6B6B78; --mono-600:#2E2E38;
  --mono-700:#222229; --mono-800:#18181F; --mono-900:#0F0F14; --mono-1000:#05050A;
  /* primitive — accents */
  --positive:#05944F; --warning:#BB7A00; --negative:#E11900; --info:#276EF1;
  /* mark — logo only, pure values */
  --ink:#000000; --paper:#FFFFFF; --recording:#E11900;
  /* semantic — dark (primary) */
  --bg:var(--mono-900); --bg-2:var(--mono-800); --bg-3:var(--mono-700); --bg-4:var(--mono-600);
  --fg:var(--mono-0); --fg-2:var(--mono-300); --fg-3:var(--mono-400); --fg-4:var(--mono-500);
  --line:var(--mono-700); --line-2:var(--mono-600);
  --fs:'Inter',system-ui,sans-serif; --fm:'JetBrains Mono',ui-monospace,monospace;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--fs);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}

/* ── Mark ── */
.mk{position:relative;display:inline-block;border-radius:22.5%;background:var(--paper);flex:none}
.mk .d{position:absolute;width:31%;aspect-ratio:1;border-radius:50%;left:27.3%;top:72.7%;transform:translate(-50%,-50%);background:var(--ink)}
.mk.inv{background:var(--ink)} .mk.inv .d{background:var(--paper)}
.mk.rec .d{background:var(--negative)} .mk.ai .d{background:var(--info)}
.mk.rec.live .d{animation:recpulse 1.6s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}50%{opacity:.55;transform:translate(-50%,-50%) scale(.84)}}
.wm{font-family:var(--fs);font-weight:900;letter-spacing:-.06em;line-height:1;color:var(--fg);display:inline-flex;align-items:baseline}
.wm .ld{display:inline-block;background:currentColor;border-radius:50%;flex:none;width:.17em;height:.17em;margin-right:.055em;margin-bottom:.1em}
.wm.ink{color:var(--ink)}
.wm.redp{color:var(--ink)} .wm.redp .ld{background:var(--negative)}

/* ── Sidebar ── */
.sn{position:fixed;top:0;left:0;bottom:0;width:236px;background:var(--bg-2);border-right:1px solid var(--line);overflow-y:auto;padding:22px 0;z-index:50}
.sn-hd{padding:0 22px 18px;border-bottom:1px solid var(--line);margin-bottom:12px}
.sn-lk{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.sn-lk .mk{width:26px;height:26px}
.sn-lk .wm{font-size:17px}
.sn-tag{font-family:var(--fm);font-size:9px;color:var(--fg-4);letter-spacing:.12em;text-transform:uppercase}
.sn-l{padding:14px 22px 6px;font-family:var(--fm);font-size:9px;color:var(--fg-4);letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.sn-a{display:block;padding:6px 22px;font-size:12.5px;color:var(--fg-3);text-decoration:none;border-left:2px solid transparent;transition:.1s}
.sn-a:hover{color:var(--fg);background:var(--bg-3)}
.sn-a.on{color:var(--fg);border-left-color:var(--negative);background:var(--bg-3)}

.main{margin-left:236px;max-width:1180px;padding:0 clamp(28px,5vw,72px) 120px}
@media(max-width:940px){.sn{display:none}.main{margin-left:0}}

/* ── Section scaffolding ── */
.sec{padding:64px 0 8px;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:none}
.sec-top{display:flex;gap:20px;align-items:baseline;margin-bottom:30px;flex-wrap:wrap}
.sec-num{font-family:var(--fm);font-size:11px;color:var(--negative);letter-spacing:.1em;font-weight:600;flex:none}
.sec-h{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.sec-d{font-size:14.5px;color:var(--fg-2);line-height:1.6;max-width:64ch;margin-top:8px;text-wrap:pretty;flex-basis:100%}
.sub-h{font-family:var(--fm);font-size:11px;color:var(--fg-2);letter-spacing:.1em;text-transform:uppercase;margin:34px 0 16px;padding-bottom:8px;border-bottom:1px solid var(--line);font-weight:600}
.note{font-size:13px;color:var(--fg-2);line-height:1.6;background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--negative);border-radius:8px;padding:14px 17px;margin-top:22px;text-wrap:pretty}
.note b{color:var(--fg)}
code.ic{font-family:var(--fm);font-size:.85em;background:var(--bg-3);border:1px solid var(--bg-4);border-radius:5px;padding:1px 6px;color:var(--fg)}

/* ── Hero ── */
.hero{padding:76px 0 60px}
.hero .eye{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--negative);margin-bottom:26px;display:flex;align-items:center;gap:9px}
.hero .eye::before{content:"";width:22px;height:1.5px;background:var(--negative)}
.hero .mk{width:96px;height:96px;margin-bottom:34px}
.hero h1{font-size:clamp(48px,8vw,84px);font-weight:900;letter-spacing:-.05em;line-height:.92;margin-bottom:22px}
.hero .sub{font-size:19px;color:var(--fg-2);line-height:1.55;max-width:60ch;text-wrap:pretty}
.hero .meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:44px}
.hero .meta div{background:var(--bg-2);padding:16px 18px}
.hero .meta .k{font-family:var(--fm);font-size:9px;color:var(--fg-4);letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.hero .meta .v{font-size:13.5px;font-weight:600}
@media(max-width:680px){.hero .meta{grid-template-columns:repeat(2,1fr)}}

/* ── Generic cards / grids ── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:820px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column}
.card .tag{align-self:flex-start;font-family:var(--fm);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--fg);color:var(--bg);padding:3px 9px;border-radius:5px;margin-bottom:14px}
.card .cn{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.card .cd{font-size:12.5px;color:var(--fg-2);line-height:1.55;margin-bottom:18px;text-wrap:pretty}
.stage{background:var(--bg);border:1px solid var(--line);border-radius:10px;min-height:170px;display:flex;align-items:center;justify-content:center;padding:26px;gap:18px}
.cm{font-family:var(--fm);font-size:10px;color:var(--fg-4);line-height:1.7;margin-top:14px}
.cm b{color:var(--fg-2);font-weight:600}

/* principle cards */
.prin{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
@media(max-width:820px){.prin{grid-template-columns:1fr}}
.pc{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:22px}
.pc .pn{font-family:var(--fm);font-size:11px;color:var(--negative);font-weight:600;margin-bottom:12px}
.pc h4{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.pc p{font-size:13px;color:var(--fg-2);line-height:1.55;text-wrap:pretty}

/* ── Construction ── */
.constr{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
@media(max-width:820px){.constr{grid-template-columns:1fr}}
.cstage{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:36px;display:flex;align-items:center;justify-content:center}
.cx{position:relative;width:220px;height:220px}
.cx .gl{position:absolute;background:var(--negative);opacity:.3}
.cx .gl.h{height:1px;left:0;right:0}.cx .gl.v{width:1px;top:0;bottom:0}
.cx .mkc{position:absolute;inset:0;border-radius:22.5%;background:var(--paper)}
.cx .d{position:absolute;width:31%;aspect-ratio:1;border-radius:50%;left:27.3%;top:72.7%;transform:translate(-50%,-50%);background:var(--ink);box-shadow:0 0 0 1.5px var(--negative)}
.cx .rl{position:absolute;font-family:var(--fm);font-size:10px;color:var(--negative);font-weight:600}
.clear-box{position:relative;width:180px;height:180px}
.clear-box .mk{position:absolute;inset:25%}
.clear-box .cs{position:absolute;border:1px dashed var(--fg-4)}

/* surfaces */
.surf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
@media(max-width:820px){.surf-grid{grid-template-columns:repeat(2,1fr)}}
.surf{padding:30px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:13px;border:1px solid transparent}
.surf .l{font-family:var(--fm);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-3)}
.surf.dark{background:var(--bg);border-color:var(--line)}
.surf.mid{background:var(--bg-4)}
.surf.light{background:var(--mono-50)} .surf.light .l{color:var(--mono-500)}
.surf.info-bg{background:var(--info)} .surf.info-bg .l{color:#fff;opacity:.85}
.surf.rec-bg{background:var(--bg);border-color:var(--line)}
.surf .mk{width:60px;height:60px}

/* sizes */
.sizes{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:32px;margin-top:16px}
.sz{display:flex;flex-direction:column;align-items:center;gap:10px}
.sz .l{font-family:var(--fm);font-size:9px;color:var(--fg-4);text-transform:uppercase;letter-spacing:.05em}

/* do/don't */
.dd{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
@media(max-width:820px){.dd{grid-template-columns:1fr}}
.ddc{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dds{height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.dds.x::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 13px,rgba(225,25,0,.09) 13px 15px)}
.ddi{padding:13px 15px}
.ddt{display:inline-block;font-family:var(--fm);font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:2px 7px;border-radius:4px;margin-bottom:7px}
.ddt.no{background:rgba(225,25,0,.16);color:var(--negative)}
.ddt.yes{background:rgba(5,148,79,.16);color:var(--positive)}
.ddd{font-size:12px;color:var(--fg-2);line-height:1.5}

/* ── Color ── */
.swrow{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:8px}
@media(max-width:820px){.swrow{grid-template-columns:repeat(3,1fr)}}
.sw{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sw .chip{height:72px;border-bottom:1px solid var(--line)}
.sw .in{padding:9px 11px}
.sw .nm{font-family:var(--fm);font-size:9px;color:var(--fg-4);letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.sw .hx{font-family:var(--fm);font-size:11px;font-weight:600}
.acc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
@media(max-width:820px){.acc-grid{grid-template-columns:repeat(2,1fr)}}
.acc{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.acc .chip{height:90px;display:flex;align-items:flex-end;padding:10px 12px}
.acc .chip .role{font-family:var(--fm);font-size:9px;color:#fff;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.acc .in{padding:12px}
.acc .nm{font-size:13px;font-weight:700;margin-bottom:2px}
.acc .hx{font-family:var(--fm);font-size:11px;color:var(--fg-3)}
/* token table */
.ttable{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:16px}
.trow{display:grid;grid-template-columns:1.2fr 1fr 2fr;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line);align-items:center;font-size:12.5px}
.trow:last-child{border-bottom:none}
.trow.head{font-family:var(--fm);font-size:10px;color:var(--fg-4);letter-spacing:.08em;text-transform:uppercase}
.trow .tk{font-family:var(--fm);font-size:11px;color:var(--fg)}
.trow .mp{font-family:var(--fm);font-size:11px;color:var(--fg-3)}
.trow .us{color:var(--fg-2)}
.trow .sw-in{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--line-2);vertical-align:-2px;margin-right:7px}

/* ── Type ── */
.type-row{display:flex;align-items:baseline;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.type-row:last-child{border-bottom:none}
.type-l{font-family:var(--fm);font-size:10px;color:var(--fg-4);letter-spacing:.06em;text-transform:uppercase;width:120px;flex-shrink:0}
.type-spec{font-family:var(--fm);font-size:10px;color:var(--fg-3);margin-left:auto;text-align:right;line-height:1.5}
.t-display{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.t-headline{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.t-title{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.t-body{font-size:15px;font-weight:400;line-height:1.47}
.t-label{font-size:13px;font-weight:500;line-height:1.4}
.t-caption{font-family:var(--fm);font-size:11px;font-weight:400;line-height:1.27}
.fam{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
@media(max-width:820px){.fam{grid-template-columns:1fr}}
.fam .fc{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:24px}
.fam .big{font-size:64px;font-weight:900;letter-spacing:-.04em;line-height:1;margin-bottom:16px}
.fam .big.mono{font-family:var(--fm);font-weight:600;font-size:52px;letter-spacing:-.02em}
.fam .fn{font-size:15px;font-weight:700;margin-bottom:4px}
.fam .fd{font-family:var(--fm);font-size:11px;color:var(--fg-3);line-height:1.6}
.fam .wts{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap;font-size:13px;color:var(--fg-2)}

/* ── Spacing / radius ── */
.scale{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
@media(max-width:820px){.scale{grid-template-columns:1fr}}
.sbox{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:24px}
.sbox h4{font-family:var(--fm);font-size:11px;color:var(--fg-2);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
.sp-row{display:flex;align-items:center;gap:14px;padding:6px 0}
.sp-bar{height:14px;background:var(--fg);border-radius:2px}
.sp-meta{font-family:var(--fm);font-size:11px;color:var(--fg-3);width:150px;flex:none}
.sp-meta b{color:var(--fg);font-weight:600}
.rad-row{display:flex;gap:18px;flex-wrap:wrap}
.rad{display:flex;flex-direction:column;align-items:center;gap:8px}
.rad .sq{width:66px;height:66px;background:var(--bg-3);border:1px solid var(--bg-4)}
.rad .l{font-family:var(--fm);font-size:10px;color:var(--fg-3);text-align:center;line-height:1.4}
.rad .l b{display:block;color:var(--fg);font-weight:600}

/* ── Icons ── */
.icons{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:8px}
@media(max-width:820px){.icons{grid-template-columns:repeat(4,1fr)}}
.ico-c{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px}
.ico-c svg{width:26px;height:26px;stroke:var(--fg);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ico-c .l{font-family:var(--fm);font-size:8.5px;color:var(--fg-4);letter-spacing:.02em;text-transform:uppercase}

/* ── Components ── */
.cmp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:820px){.cmp-grid{grid-template-columns:1fr}}
.cmp{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:22px}
.cmp-h{font-family:var(--fm);font-size:11px;color:var(--fg-2);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
.cmp-stage{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:20px;background:var(--bg);border:1px solid var(--line);border-radius:10px;min-height:92px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:none;font-family:inherit}
.btn.primary{background:var(--fg);color:var(--bg)}
.btn.secondary{background:var(--bg-3);color:var(--fg)}
.btn.tertiary{background:transparent;color:var(--fg);border:1px solid var(--line-2)}
.btn.destructive{background:var(--negative);color:#fff}
.btn.pill{border-radius:999px}
.dtag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:5px;font-family:var(--fm);font-size:11px;line-height:1}
.dtag.def{background:var(--bg-3);color:var(--fg)}
.dtag.pos{background:rgba(5,148,79,.16);color:var(--positive)}
.dtag.warn{background:rgba(187,122,0,.16);color:var(--warning)}
.dtag.neg{background:rgba(225,25,0,.16);color:var(--negative)}
.dtag.info{background:rgba(39,110,241,.16);color:var(--info)}
.toggle{position:relative;width:42px;height:24px;background:var(--bg-4);border-radius:24px;cursor:pointer}
.toggle.on{background:var(--fg)}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--bg);border-radius:50%;transition:.18s cubic-bezier(.4,0,.2,1)}
.toggle.on::after{left:20px}
.dinput{display:flex;align-items:center;height:44px;background:var(--bg-3);border:1px solid transparent;border-radius:8px;padding:0 14px;color:var(--fg-3);font-size:14px;min-width:200px}
.dinput.focus{border-color:var(--info);color:var(--fg)}
/* status pill (dot+ extension) */
.spill{display:inline-flex;flex-direction:column;align-items:center;gap:6px;background:var(--bg-3);border-radius:12px;padding:12px 16px}
.spill .row{display:flex;align-items:center;gap:8px}
.spill .rd{width:9px;height:9px;border-radius:50%;background:var(--negative);animation:recpulse2 1.6s ease-in-out infinite}
@keyframes recpulse2{0%,100%{opacity:1}50%{opacity:.4}}
.spill .t{font-family:var(--fm);font-size:12px;font-weight:600}
.spill .wave{display:flex;align-items:center;gap:2px;height:18px}
.spill .wave i{width:2px;border-radius:1px;background:var(--negative)}

/* ── iOS surfaces ── */
.ios{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
@media(max-width:820px){.ios{grid-template-columns:1fr}}
.gcard{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:16px}
.gcard .gt{font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.gstage{background:#000;border-radius:14px;padding:26px 20px;display:flex;flex-direction:column;align-items:center;gap:16px;min-height:130px;justify-content:center}
.island{background:#000;border-radius:22px;display:flex;align-items:center;height:37px;padding:0 13px;gap:9px;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.island .rd{width:8px;height:8px;border-radius:50%;background:var(--negative)}
.island .it{font-family:var(--fm);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.island .iw{display:flex;align-items:center;gap:2px;height:14px}
.island .iw i{width:2px;border-radius:1px;background:var(--negative)}
.island.exp{flex-direction:column;height:auto;border-radius:28px;padding:15px 17px;align-items:stretch;width:230px;gap:13px}
.island.exp .r1{display:flex;align-items:center;gap:11px}
.island.exp .r1 .mk{width:32px;height:32px}
.island.exp .it{font-size:21px;margin-left:auto}
.island.exp .ctrl{display:flex;gap:9px}
.island.exp .cbtn{flex:1;height:32px;border-radius:9px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff}
.island.exp .cbtn.stop{background:var(--negative)}
.island.exp .cbtn.stop span{width:10px;height:10px;border-radius:2px;background:#fff}
.notif{width:100%;background:rgba(38,36,46,.92);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:13px 14px;display:flex;gap:11px;align-items:flex-start;color:#fff;text-align:left}
.notif .mk{width:34px;height:34px}
.notif .nb{flex:1}
.notif .nt{font-size:13px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.notif .nt .when{margin-left:auto;font-size:11px;font-weight:400;color:var(--fg-3)}
.notif .nm{font-size:12.5px;color:var(--fg-2);line-height:1.4;margin-top:3px}
.notif .aidot{width:7px;height:7px;border-radius:50%;background:var(--info)}
/* home widget */
.wgt{border-radius:18px;background:#15131C;border:1px solid rgba(255,255,255,.07);overflow:hidden;color:#fff;padding:15px;width:100%;max-width:230px}
.wgt-hd{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.wgt-hd .mk{width:22px;height:22px}
.wgt-nm{font-size:11px;font-weight:700}
.wgt-hd .rt{margin-left:auto;font-family:var(--fm);font-size:9px;color:var(--fg-3)}
.wgt-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid rgba(255,255,255,.07)}
.wgt-row:first-of-type{border-top:0}
.wgt-row .nm{font-size:11.5px;font-weight:600}.wgt-row .mt{font-family:var(--fm);font-size:9.5px;color:var(--fg-3);margin-left:auto}
.wgt-dot{width:7px;height:7px;border-radius:50%;background:var(--info);flex:none}
.wgt-rd{width:7px;height:7px;border-radius:50%;background:var(--negative);flex:none}

/* ── Presentation cards ── */
.pres{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
@media(max-width:820px){.pres{grid-template-columns:1fr}}
.slide{aspect-ratio:16/9;border-radius:14px;overflow:hidden;position:relative;border:1px solid var(--line)}
.slide.title{background:var(--bg);padding:34px;display:flex;flex-direction:column;justify-content:space-between}
.slide .stop{display:flex;align-items:center;gap:10px}
.slide .stop .mk{width:26px;height:26px}
.slide .stop .wm{font-size:16px}
.slide .kick{font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--negative);margin-bottom:12px}
.slide h3{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.02}
.slide .sfoot{font-family:var(--fm);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-4);display:flex;justify-content:space-between}
.slide.section{background:var(--negative);padding:34px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.slide.section .kick{color:rgba(255,255,255,.7)}
.slide.section .big-n{font-family:var(--fm);font-size:13px;font-weight:600}
.slide.section h3{font-size:34px;color:#fff}
.slide.section .mk{width:22px;height:22px}
.slide.light{background:var(--mono-50);color:var(--mono-1000)}
.slide.light h3{color:var(--mono-1000)}
.slide.light .sfoot{color:var(--mono-400)}
.slide.light .kick{color:var(--negative)}
.slide.light .stop .wm{color:var(--mono-1000)}
.slide.content{background:var(--bg);padding:30px;display:flex;flex-direction:column}
.slide.content .cbody{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto;margin-bottom:auto}
.slide.content .stat .n{font-size:34px;font-weight:800;letter-spacing:-.03em}
.slide.content .stat .lb{font-family:var(--fm);font-size:9px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}

/* ── Email signatures ── */
.sig-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
@media(max-width:820px){.sig-grid{grid-template-columns:1fr}}
.sigcard{background:var(--mono-50);border:1px solid var(--line);border-radius:14px;padding:28px;color:var(--mono-1000)}
.sigcard.dark{background:var(--bg);color:var(--fg)}
.sig{display:flex;gap:16px;align-items:center;font-family:var(--fs)}
.sig .savatar{width:56px;height:56px;flex:none}
.sig .sdiv{width:1px;align-self:stretch;background:var(--mono-200)}
.sigcard.dark .sig .sdiv{background:var(--line-2)}
.sig .snm{font-size:15px;font-weight:700;letter-spacing:-.01em}
.sig .sti{font-size:12.5px;color:var(--mono-500);margin-top:1px}
.sigcard.dark .sig .sti{color:var(--fg-3)}
.sig .smeta{font-family:var(--fm);font-size:10.5px;color:var(--mono-500);line-height:1.7;margin-top:8px}
.sigcard.dark .sig .smeta{color:var(--fg-3)}
.sig .smeta a{color:var(--negative);text-decoration:none}
.sig-h{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mono-400)}
.sigcard.dark .sig-h{color:var(--fg-4)}

/* ── Stationery / print ── */
.stat-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:8px}
@media(max-width:820px){.stat-grid{grid-template-columns:1fr}}
.letter{background:var(--mono-50);border:1px solid var(--line);border-radius:12px;aspect-ratio:1/1.2;padding:30px;color:var(--mono-1000);display:flex;flex-direction:column;overflow:hidden}
.letter .lh{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1.5px solid var(--mono-1000)}
.letter .lh .lk{display:flex;align-items:center;gap:9px}
.letter .lh .lk .wm{font-size:18px}
.letter .lh .ref{font-family:var(--fm);font-size:9px;color:var(--mono-500);text-align:right;line-height:1.6}
.letter .lbody{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.letter .lbody .ln{height:8px;background:var(--mono-200);border-radius:2px}
.letter .lbody .ln.s{width:40%}.letter .lbody .ln.m{width:75%}.letter .lbody .ln.t{width:88%}
.letter .lbody .lt{font-size:15px;font-weight:700;color:var(--mono-1000);margin-bottom:6px}
.letter .lfoot{margin-top:auto;padding-top:14px;border-top:1px solid var(--mono-200);font-family:var(--fm);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mono-400);display:flex;justify-content:space-between}
.bcards{display:flex;flex-direction:column;gap:16px}
.bc{aspect-ratio:1.75/1;border-radius:12px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.bc.front{background:var(--mono-1000)}
.bc.front .mk{width:36px;height:36px}
.bc.front .bn{font-size:15px;font-weight:700;letter-spacing:-.01em;color:#fff}
.bc.front .bt{font-family:var(--fm);font-size:10px;color:var(--fg-3);margin-top:2px}
.bc.front .bmeta{font-family:var(--fm);font-size:9.5px;color:var(--fg-3);line-height:1.7}
.bc .brow{display:flex;align-items:flex-end;justify-content:space-between}
/* card-back options — anchored, disc stays ink */
.backrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
@media(max-width:820px){.backrow{grid-template-columns:1fr}}
.bopt{display:flex;flex-direction:column;gap:10px}
.bopt .bcap{font-family:var(--fm);font-size:9.5px;color:var(--fg-4);letter-spacing:.03em;line-height:1.5}
.bopt .bcap b{color:var(--fg-2);font-weight:600}
.bk{aspect-ratio:1.75/1;border-radius:12px;padding:18px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
.bk .lock{display:flex;align-items:center;gap:8px}
.bk .lock .mk{width:26px;height:26px}
.bk .lock .wm{font-size:19px}
/* A — white, ink mark, red typographic period */
.bk.wa{background:#fff}
/* B — white, ink mark top-left, red baseline rule */
.bk.wb{justify-content:space-between;background:#fff}
.bk.wb .top{display:flex;align-items:center;justify-content:space-between;width:100%}
.bk.wb .top .mk{width:28px;height:28px}
.bk.wb .top .url{font-family:var(--fm);font-size:9px;color:var(--mono-500);letter-spacing:.04em}
.bk.wb .base{display:flex;align-items:baseline;justify-content:space-between;width:100%;padding-top:10px;border-top:2px solid var(--negative)}
.bk.wb .base .wm{font-size:17px}
.bk.wb .base .who{font-family:var(--fm);font-size:9px;color:var(--mono-500);letter-spacing:.04em}
/* C — red field, white mark, anchored bottom-left */
.bk.rc{background:var(--negative)}
.bk.rc .lock .wm{color:#fff}

/* linked artifact card */
.artifact{display:flex;align-items:center;gap:18px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;text-decoration:none;color:inherit;transition:.12s;margin-top:16px}
.artifact:hover{border-color:var(--fg-3);background:var(--bg-3)}
.artifact .athumb{width:120px;height:84px;border-radius:8px;background:var(--mono-50);border:1px solid var(--line);flex:none;padding:12px;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.artifact .athumb .ln{height:5px;background:var(--mono-200);border-radius:1px}
.artifact .athumb .ln.red{background:var(--negative);width:40%;height:6px;border-radius:50px}
.artifact .athumb .ln.dk{background:var(--mono-1000);height:8px;width:70%}
.artifact .ainfo{flex:1}
.artifact .ainfo .at{font-family:var(--fm);font-size:9px;color:var(--fg-4);letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.artifact .ainfo .an{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:3px}
.artifact .ainfo .ad{font-size:12.5px;color:var(--fg-2);line-height:1.5}
.artifact .arrow{font-size:20px;color:var(--fg-3);flex:none}

/* ── Digital applications ── */
.dig{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
@media(max-width:820px){.dig{grid-template-columns:repeat(2,1fr)}}
.digc{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:14px}
.digc .dstage{width:100%;aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.digc .l{font-family:var(--fm);font-size:9px;color:var(--fg-4);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.app-icon{width:64%;height:64%;border-radius:22.5%}
.avatar-c{background:var(--mono-1000);width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.avatar-c .mk{width:56%;height:56%}
.cover-c{background:var(--bg);width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:16px}
.cover-c .mk{width:34px;height:34px;margin-bottom:8px}
.cover-c .ct{font-size:14px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.cover-c .cs{font-family:var(--fm);font-size:8px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.favi-c{background:var(--paper);width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.favi-c .mk{width:40%;height:40%}

/* ── Document output template ── */
.doc-tpl{display:grid;grid-template-columns:326px 1fr;gap:24px;margin-top:8px;align-items:start}
@media(max-width:860px){.doc-tpl{grid-template-columns:1fr}}
.mini{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 20px 15px;color:var(--mono-1000);display:flex;flex-direction:column;box-shadow:0 14px 36px rgba(0,0,0,.34)}
.mini .m-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:9px;border-bottom:1.5px solid #05050A}
.mini .m-lk{display:flex;align-items:center;gap:5px}
.mini .m-lk .mk{width:15px;height:15px}
.mini .m-lk .wm{font-size:10px;color:#05050A}
.mini .bar{background:#E6E6EB;border-radius:1px;height:4px}
.mini .bar.red{background:#E11900}
.mini .bar.dk{background:#05050A;height:7px}
.mini .m-ref{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.mini .m-ref .bar{width:34px;height:3px;background:#C8C8D4}
.mini .m-eye{display:flex;align-items:center;gap:5px;margin:12px 0 8px}
.mini .m-eye .dot{width:6px;height:6px;border-radius:50%;background:#E11900}
.mini .m-eye .bar{width:60px}
.mini .m-title{display:flex;flex-direction:column;gap:5px}
.mini .m-title .bar.dk{width:92%}.mini .m-title .bar.dk.two{width:64%}
.mini .m-meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:13px 0;padding:10px 0;border-top:1px solid #E6E6EB;border-bottom:1px solid #E6E6EB}
.mini .m-col{display:flex;flex-direction:column;gap:4px}
.mini .m-col .bar:first-child{width:60%;background:#C8C8D4;height:3px}
.mini .m-sec{margin-top:11px}
.mini .m-slabel{height:4px;width:48%;background:#E11900;border-radius:1px;margin-bottom:8px;opacity:.85}
.mini .m-body{display:flex;flex-direction:column;gap:5px}
.mini .m-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:12px}
.mini .m-card{height:38px;border:1px solid #E6E6EB;border-radius:5px;padding:5px}
.mini .m-card .edge{height:3px;width:13px;border-radius:1px;margin-bottom:5px}
.mini .m-foot{display:flex;align-items:center;justify-content:space-between;margin-top:13px;padding-top:9px;border-top:1.5px solid #05050A}
.mini .m-foot .bar{width:44px;height:3px;background:#C8C8D4}
.mini .m-foot .mk{width:11px;height:11px}
/* anatomy list */
.anat{display:flex;flex-direction:column}
.anat .ar{display:grid;grid-template-columns:24px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);align-items:start}
.anat .ar:last-child{border-bottom:none}
.anat .an{font-family:var(--fm);font-size:11px;color:var(--negative);font-weight:600;padding-top:1px}
.anat .at{font-size:14.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:3px}
.anat .ad{font-size:12.5px;color:var(--fg-2);line-height:1.55;text-wrap:pretty}
.anat .ad code{font-family:var(--fm);font-size:11px;color:var(--fg-3);background:var(--bg-3);padding:1px 5px;border-radius:4px}
/* rules */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
@media(max-width:820px){.rules{grid-template-columns:1fr}}
.rule{display:grid;grid-template-columns:auto 1fr;gap:12px;background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:16px 18px;align-items:start}
.rule .rk{width:22px;height:22px;border-radius:50%;background:rgba(5,148,79,.14);color:var(--positive);display:flex;align-items:center;justify-content:center;flex:none}
.rule .rk svg{width:13px;height:13px;stroke:var(--positive);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rule .rt{font-size:13.5px;line-height:1.5;color:var(--fg-2)}
.rule .rt b{color:var(--fg);font-weight:600}
/* severity map */
.sevmap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
@media(max-width:820px){.sevmap{grid-template-columns:repeat(2,1fr)}}
.sev{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:15px}
.sev .dotc{width:11px;height:11px;border-radius:50%;margin-bottom:11px}
.sev .sn{font-size:13px;font-weight:700;margin-bottom:3px}
.sev .sd{font-size:11.5px;color:var(--fg-2);line-height:1.5}
.sev .tk{font-family:var(--fm);font-size:9.5px;color:var(--fg-4);margin-top:9px;letter-spacing:.03em}
/* schema */
.schema{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:16px}
.schema .srow{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:11px 18px;border-bottom:1px solid var(--line);font-size:12.5px;align-items:baseline}
.schema .srow:last-child{border-bottom:none}
.schema .srow.head{font-family:var(--fm);font-size:10px;color:var(--fg-4);letter-spacing:.08em;text-transform:uppercase}
.schema .sk{font-family:var(--fm);font-size:11.5px;color:var(--info)}
.schema .sv{color:var(--fg-2);line-height:1.55}
.schema .sv code{font-family:var(--fm);font-size:11px;color:var(--fg-3);background:var(--bg-3);padding:1px 5px;border-radius:4px}

/* ── Document variants ── */
.vargrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
@media(max-width:820px){.vargrid{grid-template-columns:1fr}}
.varc{display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:20px;text-decoration:none;color:inherit;transition:.12s}
.varc:hover{border-color:var(--fg-3);background:var(--bg-3)}
.varc .vprev{background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px;height:118px;margin-bottom:15px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 20px rgba(0,0,0,.24)}
.varc .vph{display:flex;align-items:center;justify-content:space-between;border-bottom:1.5px solid #05050A;padding-bottom:6px;margin-bottom:7px}
.varc .vph .vmk{width:11px;height:11px;border-radius:2.5px;background:#05050A;position:relative}
.varc .vph .vmk::after{content:"";position:absolute;width:31%;aspect-ratio:1;border-radius:50%;left:27.3%;top:72.7%;transform:translate(-50%,-50%);background:#fff}
.varc .vph .vr{width:26px;height:3px;border-radius:1px;background:#C8C8D4}
.varc .vp2{display:grid;grid-template-columns:1.9fr 1fr;gap:8px;flex:1}
.varc .vp1{display:flex;flex-direction:column;gap:5px;flex:1}
.varc .vcolL,.varc .vcolR{display:flex;flex-direction:column;gap:4px}
.varc .vbar{height:4px;border-radius:1px;background:#E6E6EB}
.varc .vbar.red{background:#E11900;width:38%}
.varc .vbar.dk{background:#05050A;height:6px;width:80%}
.varc .vpanel{background:#05050A;border-radius:4px;height:34px}
.varc .vcard{border:1px solid #E6E6EB;border-radius:3px;height:20px}
.varc .vtop{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.varc .vbadge{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:5px}
.varc .vbadge.digest{background:rgba(39,110,241,.14);color:var(--info)}
.varc .vbadge.record{background:var(--bg-3);color:var(--fg-2)}
.varc .vn{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.varc .vd{font-size:12.5px;color:var(--fg-2);line-height:1.55;margin-bottom:12px;text-wrap:pretty}
.varc .vwhen{font-family:var(--fm);font-size:10px;color:var(--fg-3);letter-spacing:.02em;line-height:1.7;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.varc .vwhen b{color:var(--fg);font-weight:600}
.varc .vgo{font-family:var(--fm);font-size:10px;color:var(--info);margin-top:9px;display:flex;align-items:center;gap:6px}

/* footer */
.foot{margin-top:76px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--fm);font-size:10px;color:var(--fg-4);letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}