/* Shiftpoint brand book.
   Layout: the chapter rail on the left (the book's route), chapters open on full-bleed Ultraviolet,
   sections split at the shift line (1 : √3), statements on Ink, a faint 60° lattice behind everything. */
@font-face{font-family:"Shiftpoint Mono";font-weight:400;font-display:swap;src:url(fonts/ShiftpointMono-Regular.otf) format("opentype")}
@font-face{font-family:"Shiftpoint Mono";font-weight:500;font-display:swap;src:url(fonts/ShiftpointMono-Medium.otf) format("opentype")}
@font-face{font-family:"Shiftpoint Mono";font-weight:700;font-display:swap;src:url(fonts/ShiftpointMono-Bold.otf) format("opentype")}
@font-face{font-family:"Shiftpoint Mono";font-weight:900;font-display:swap;src:url(fonts/ShiftpointMono-Black.otf) format("opentype")}

:root{
  /* fixed brand colours: these never change with the theme */
  --uv:#5F38ED; --uv-700:#382191; --uv-100:#E8E9FF; --lime:#DBE246; --black:#0B0B0B; --white:#FFFFFF;
  /* theme tokens, light */
  --paper:#FFFFFF; --sheet:#F6F6F9; --ink:#0B0B0B; --muted:#595A62; --line:#DDDDE3; --dot:#D3D3DB;
  --accent:#5F38ED; --accent-soft:#E8E9FF; --logo:#5F38ED; --node:#2D2D33; --ok:#007A44; --ok-soft:#DAF7E3; --bad:#B6433C; --bad-soft:#FEE9E6; --warn:#955E02; --warn-soft:#FFEBD5;
  --f-mono:"Shiftpoint Mono",ui-monospace,Consolas,monospace; --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --rail:272px; --gx:clamp(16px,4vw,56px); --pitch:48px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0D0D0F; --sheet:#1A1A1E; --ink:#FFFFFF; --muted:#9D9EA6; --line:#2D2D33; --dot:#26262C;
  --accent:#ADAEFE; --accent-soft:#1C134C; --logo:#FFFFFF; --node:#C3C3CB; --ok:#3BB974; --ok-soft:#0E2A1B; --bad:#ED756A; --bad-soft:#2E1513; --warn:#D98B09; --warn-soft:#2B1E06; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0D0D0F; --sheet:#1A1A1E; --ink:#FFFFFF; --muted:#9D9EA6; --line:#2D2D33; --dot:#26262C;
  --accent:#ADAEFE; --accent-soft:#1C134C; --logo:#FFFFFF; --node:#C3C3CB; --ok:#3BB974; --ok-soft:#0E2A1B; --bad:#ED756A; --bad-soft:#2E1513; --warn:#D98B09; --warn-soft:#2B1E06; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button,select,input,textarea{font:inherit;color:inherit}
p{margin:0;max-width:68ch}
h1,h2,h3,h4{margin:0;text-wrap:balance}
ul,ol{margin:0}
.lattice{background-image:radial-gradient(circle,var(--dot) 1.3px,transparent 1.8px),radial-gradient(circle,var(--dot) 1.3px,transparent 1.8px);background-size:var(--pitch) calc(var(--pitch) * 1.7320508);background-position:0 0,calc(var(--pitch) / 2) calc(var(--pitch) * .8660254)}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100%}
.rail{position:sticky;top:env(safe-area-inset-top,0px);height:100vh;height:100dvh;overflow-y:auto;border-right:1px solid var(--line);background:var(--paper);padding:28px 24px 24px;display:flex;flex-direction:column;gap:28px}
.rail .brand{display:block;width:132px;color:var(--logo)}
.rail .brand svg{display:block;width:100%;height:auto}
.route{list-style:none;padding:0;margin:0;position:relative;display:grid}
.route::before{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:2px;background:var(--line)}
.st{position:relative;display:grid;grid-template-columns:16px 26px minmax(0,1fr);align-items:center;gap:10px;padding:7px 0;text-decoration:none;color:var(--muted);font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.st .node{width:12px;height:12px;border-radius:50%;margin-left:2px;background:var(--paper);border:2px solid var(--node);position:relative;z-index:1}
.st.ready .node{background:var(--node)}
.st.draft .node{background:linear-gradient(90deg,var(--node) 50%,var(--paper) 50%)}
.st.planned .node{border-color:var(--dot);border-style:solid}
.st.planned{color:color-mix(in srgb,var(--muted) 70%,var(--paper))}
.st .num{font-variant-numeric:tabular-nums}
.st:hover{color:var(--ink)}
.st[aria-current="page"]{color:var(--ink);font-weight:700}
.st[aria-current="page"] .node{width:18px;height:18px;margin-left:-1px;background:var(--uv);border-color:var(--uv)}
.legend{margin-top:auto;display:grid;gap:10px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.legend .keys{display:flex;flex-wrap:wrap;gap:6px 14px}
.legend .keys span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:50%;border:2px solid var(--node);display:inline-block}
.legend i.ready{background:var(--node)} .legend i.draft{background:linear-gradient(90deg,var(--node) 50%,transparent 50%)} .legend i.planned{border-color:var(--dot)}

.topbar{display:none}
main{min-width:0}
.view{min-height:100vh}

@media (max-width:960px){
  .app{grid-template-columns:1fr}
  .topbar{display:flex;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gx);background:var(--paper);border-bottom:1px solid var(--line)}
  .topbar .brand{width:132px;color:var(--logo)}
  .topbar .brand svg{display:block;width:100%;height:auto}
  .topbar .where{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:right}
  .rail{position:fixed;inset:0;z-index:30;height:auto;border-right:0;padding-top:calc(20px + env(safe-area-inset-top,0px));transform:translateX(-100%);visibility:hidden;transition:transform .25s ease,visibility .25s}
  .rail.open{transform:none;visibility:visible}
  .rail .close{display:inline-flex}
}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--paper);padding:8px 12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;color:var(--ink);text-decoration:none}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--uv);border-color:var(--uv);color:var(--white)}
.rail .close{display:none;align-self:flex-start}

/* ---------- chapter opener (Ultraviolet in both themes) ---------- */
.opener{position:relative;overflow:hidden;background:var(--uv);color:var(--white);padding:clamp(40px,7vw,96px) var(--gx) clamp(36px,5vw,64px);display:grid;gap:18px;
  background-image:radial-gradient(circle,rgba(255,255,255,.2) 1.3px,transparent 1.8px),radial-gradient(circle,rgba(255,255,255,.2) 1.3px,transparent 1.8px);background-size:var(--pitch) calc(var(--pitch) * 1.7320508);background-position:0 0,calc(var(--pitch) / 2) calc(var(--pitch) * .8660254)}
.opener .kick{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);position:relative}
.opener h1{font-family:var(--f-mono);font-weight:900;font-size:clamp(44px,8vw,104px);line-height:.98;letter-spacing:-.03em;position:relative;max-width:12ch}
.opener p{font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--uv-100);max-width:48ch;position:relative}
.opener .ghost{position:absolute;right:calc(var(--gx) - .04em);bottom:-.17em;font-family:var(--f-mono);font-weight:900;font-size:clamp(160px,26vw,380px);line-height:1;letter-spacing:-.05em;color:rgba(255,255,255,.13);pointer-events:none;user-select:none}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;white-space:nowrap}
.opener .chip{color:var(--white)}
.chip.confirm{color:var(--warn);background:var(--warn-soft);border-color:transparent}
.chip.ok{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.chip.no{color:var(--bad);background:var(--bad-soft);border-color:transparent}
.chip.plain{color:var(--muted)}

/* ---------- sections, split at the shift line ---------- */
.body{padding:0 var(--gx) 64px}
.sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7320508fr);gap:24px 32px;padding-block:56px 8px;border-bottom:1px solid var(--line);padding-bottom:56px}
.sec:last-child{border-bottom:0}
.sec>header{display:grid;gap:8px;align-content:start;position:sticky;top:72px}
.sec.full{grid-template-columns:minmax(0,1fr)}
.sec.full>header{position:static;max-width:60ch}
.k{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sec>header .k{color:var(--accent)}
.sec h2{font-family:var(--f-mono);font-weight:700;font-size:clamp(25px,3vw,39px);line-height:1.12;letter-spacing:-.015em}
.sec>header p{color:var(--muted);font-size:15.5px}
.content{display:grid;gap:22px;min-width:0;align-content:start}
.lead{font-size:clamp(18px,1.8vw,21px);line-height:1.5}
h3{font-family:var(--f-body);font-weight:600;font-size:21px;line-height:1.3}
h4{font-family:var(--f-body);font-weight:600;font-size:17px}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono)}
@media (max-width:1100px){.sec{grid-template-columns:minmax(0,1fr)}.sec>header{position:static}}

/* ---------- statement (Ink in both themes) ---------- */
.statement{background:var(--black);color:var(--white);margin-inline:calc(var(--gx) * -1);padding:clamp(48px,7vw,96px) var(--gx);display:grid;gap:16px;
  background-image:radial-gradient(circle,rgba(255,255,255,.07) 1.3px,transparent 1.8px),radial-gradient(circle,rgba(255,255,255,.07) 1.3px,transparent 1.8px);background-size:var(--pitch) calc(var(--pitch) * 1.7320508);background-position:0 0,calc(var(--pitch) / 2) calc(var(--pitch) * .8660254)}
.statement .k{color:#9D9EA6}
.statement p{font-family:var(--f-mono);font-weight:900;font-size:clamp(38px,7vw,96px);line-height:1;letter-spacing:-.03em;max-width:14ch}
.statement .lime{color:var(--lime)}

/* ---------- lists, cards, tables ---------- */
.defs{display:grid;gap:0;border-top:2px solid var(--ink)}
.defs>div{display:grid;grid-template-columns:minmax(120px,.36fr) minmax(0,1fr);gap:8px 24px;padding:14px 0;border-bottom:1px solid var(--line)}
.defs dt,.defs .t{font-family:var(--f-mono);font-weight:700;font-size:16px}
.defs dd,.defs .d{margin:0;color:var(--muted)}
@media (max-width:560px){.defs>div{grid-template-columns:1fr}}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.cards[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.cards[data-cols]{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--sheet);padding:18px;display:grid;gap:8px;align-content:start;min-width:0}
.card .k{color:var(--accent)}
.card h3{font-family:var(--f-mono);font-weight:700;font-size:19px}
.card p{color:var(--muted);font-size:15px}
.tbl{overflow-x:auto;border:1px solid var(--line);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.45}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
th{font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--sheet);white-space:nowrap}
td.num,.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
code{font-family:var(--f-mono);font-size:.92em}
.sw-mini{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:8px;border:1px solid var(--line)}
.note{border-left:3px solid var(--warn);background:var(--warn-soft);padding:12px 16px;font-size:15px}
.note.info{border-left-color:var(--accent);background:var(--accent-soft)}

/* ---------- controls ---------- */
.tool{border:1px solid var(--line);background:var(--paper);display:grid;min-width:0}
.tool .controls{display:flex;flex-wrap:wrap;gap:14px 22px;padding:16px;border-bottom:1px solid var(--line);background:var(--sheet);align-items:flex-end}
.ctl{display:grid;gap:6px;min-width:0}
.ctl>.k{font-size:12px}
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--line);background:var(--paper)}
.seg button{border:0;border-right:1px solid var(--line);background:transparent;padding:8px 12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;color:var(--muted)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--uv);color:var(--white)}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.swatches{display:flex;flex-wrap:wrap;gap:6px}
.swatches button{width:34px;height:34px;border:1px solid var(--line);cursor:pointer;display:grid;place-items:center;padding:0}
.swatches button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.swatches button span{width:12px;height:12px;border-radius:50%}
select,input[type="text"],textarea{border:1px solid var(--line);background:var(--paper);padding:8px 10px;font-size:15px;min-width:0}
textarea{width:100%;resize:vertical;font-size:15px;line-height:1.5}
input[type="range"]{accent-color:var(--uv);width:180px;max-width:100%}
.checks{display:flex;flex-wrap:wrap;gap:8px 16px}
.checks label{display:inline-flex;gap:6px;align-items:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.checks input{accent-color:var(--uv);width:16px;height:16px}

/* ---------- home ---------- */
.cover{position:relative;overflow:hidden;background:var(--black);color:var(--white);padding:clamp(28px,4vw,56px) var(--gx) clamp(40px,6vw,72px);display:grid;gap:clamp(56px,10vw,140px);min-height:min(78vh,760px);align-content:space-between;
  background-image:radial-gradient(circle,rgba(255,255,255,.1) 1.3px,transparent 1.8px),radial-gradient(circle,rgba(255,255,255,.1) 1.3px,transparent 1.8px);background-size:var(--pitch) calc(var(--pitch) * 1.7320508);background-position:0 0,calc(var(--pitch) / 2) calc(var(--pitch) * .8660254)}
.cover .lockup{width:clamp(150px,16vw,220px);position:relative;z-index:1}
.cover .net{position:absolute;top:8%;right:var(--gx);width:min(42%,560px);height:84%;pointer-events:none}
.cover .title{display:grid;gap:16px;position:relative;z-index:1}
.cover .title .k{color:var(--lime)}
.cover h1{font-family:var(--f-mono);font-weight:900;font-size:clamp(48px,7vw,104px);line-height:.98;letter-spacing:-.03em;max-width:9ch}
.cover .meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9D9EA6;display:flex;flex-wrap:wrap;gap:6px 24px}
.progress{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.progress i{height:10px;background:var(--line)}
.progress i.ready{background:var(--uv)} .progress i.draft{background:linear-gradient(90deg,var(--uv) 50%,var(--line) 50%)}
.toc{list-style:none;padding:0;margin:0;position:relative;display:grid;border-top:2px solid var(--ink)}
.toc::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--line)}
.toc a{display:grid;grid-template-columns:24px 44px minmax(0,1fr) auto;gap:6px 16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.toc a .node{width:14px;height:14px;border-radius:50%;border:2px solid var(--node);background:var(--paper);margin-left:5px;align-self:center;position:relative;z-index:1}
.toc a.ready .node{background:var(--node)} .toc a.draft .node{background:linear-gradient(90deg,var(--node) 50%,var(--paper) 50%)} .toc a.planned .node{border-color:var(--dot)}
.toc .n{font-family:var(--f-mono);font-weight:700;color:var(--accent)}
.toc .t{font-family:var(--f-mono);font-weight:700;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.01em;line-height:1.15}
.toc .d{grid-column:3 / 5;color:var(--muted);font-size:15px;max-width:72ch}
.toc a:hover .t{color:var(--accent)}
.toc a.planned .t{color:var(--muted)}
@media (max-width:640px){.toc a{grid-template-columns:24px 36px minmax(0,1fr)}.toc a .chip{grid-column:3}.toc .d{grid-column:3}}

/* ---------- mark ---------- */
.stage{display:grid;place-items:center;min-height:clamp(300px,42vw,520px);padding:32px;transition:background .25s}
.stage .holder{width:min(42%,260px)}
.stage .holder.lockup-stack{width:min(46%,300px)}
.stage .holder.lockup-row{width:min(78%,560px)}
.stage-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;padding:12px 16px;border-top:1px solid var(--line);font-size:14px}
.art{display:block;width:100%;height:auto}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{display:grid;gap:8px;margin:0;min-width:0}
.tile .face{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);overflow:hidden}
.tile .face>*{width:46%}
.tile figcaption{font-size:14px;display:grid;gap:2px}
.tile figcaption b{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.tile.dont figcaption b{color:var(--bad)}
.tile.do figcaption b{color:var(--ok)}
.beats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--line)}
.beats div{padding:12px;border-right:1px solid var(--line);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;display:grid;gap:4px}
.beats div:last-child{border-right:0}
.beats div span{color:var(--muted)}
@media (max-width:640px){.beats{grid-template-columns:repeat(3,minmax(0,1fr))}.beats div:nth-child(3){border-right:0}.beats div:nth-child(-n+3){border-bottom:1px solid var(--line)}}

/* ---------- type ---------- */
.specimen{background:var(--sheet);padding:22px;display:grid;gap:14px;min-width:0}
.specimen .big{font-size:clamp(44px,5.5vw,80px);line-height:1;letter-spacing:-.02em}
.weights{display:grid;gap:6px}
.weights div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:clamp(20px,2.4vw,28px);line-height:1.2;border-top:1px solid var(--line);padding-top:6px;min-width:0}
.weights small{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.tester-out{padding:28px 20px;min-height:180px;overflow-wrap:anywhere;border-bottom:1px solid var(--line)}
.verdicts{display:grid;gap:8px;padding:16px}
.verdict{display:flex;gap:10px;align-items:baseline;font-size:15px}
.roles td .sample{color:var(--ink);max-width:100%;overflow-wrap:anywhere}
.roles tr.sample td{border-bottom:1px solid var(--line);padding-top:0}
.roles tr.meta td{border-bottom:0}
.glyphs{font-family:var(--f-mono);font-weight:900;font-size:clamp(44px,8vw,96px);line-height:1;letter-spacing:.02em}

/* ---------- colour ---------- */
.roles3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.role-sw{min-height:220px;padding:18px;display:grid;align-content:space-between;gap:24px}
.role-sw b{font-family:var(--f-mono);font-size:28px;font-weight:700;line-height:1.1}
.role-sw .k{color:inherit;opacity:.85}
.role-use{font-size:15px;color:var(--muted);padding-top:10px}
@media (max-width:700px){.roles3{grid-template-columns:1fr}}
.ramp{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px}
.ramp button{aspect-ratio:3/4;border:0;padding:6px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;cursor:pointer;font-family:var(--f-mono);font-size:12px;letter-spacing:.02em;text-align:left;min-width:0;overflow:hidden}
.ramp button b{font-size:12px}
.ramp button .hex{font-size:12px;letter-spacing:0;white-space:nowrap}
.ramp button .hex::before{content:"#";opacity:.6}
.ramp button.key{box-shadow:inset 0 -4px 0 currentColor}
@media (max-width:1280px){.ramp button .hex::before{content:none}}
@media (max-width:1100px){.ramp{grid-template-columns:repeat(6,minmax(0,1fr))}.ramp button .hex::before{content:"#"}}
@media (max-width:420px){.ramp button .hex::before{content:none}}
.pair-out{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);min-width:0}
.pair-prev{padding:28px 24px;display:grid;gap:10px;align-content:center;min-height:240px}
.pair-prev .h{font-family:var(--f-mono);font-weight:900;font-size:clamp(30px,4vw,48px);line-height:1;letter-spacing:-.02em}
.pair-prev .s{font-size:16px;max-width:36ch}
.pair-prev .l{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.pair-res{padding:20px;display:grid;gap:14px;align-content:start;border-left:1px solid var(--line)}
.ratio{font-family:var(--f-mono);font-weight:900;font-size:clamp(40px,5vw,60px);line-height:1;letter-spacing:-.02em}
.levels{display:grid;gap:6px}
.levels div{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;border-bottom:1px solid var(--line);padding-bottom:6px}
.brandv{padding:12px 14px;font-size:15px;display:grid;gap:4px}
.brandv b{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.brandv.ok{background:var(--ok-soft);color:var(--ok)} .brandv.no{background:var(--bad-soft);color:var(--bad)} .brandv.maybe{background:var(--warn-soft);color:var(--warn)}
.brandv span{color:var(--ink)}
@media (max-width:760px){.pair-out{grid-template-columns:1fr}.pair-res{border-left:0;border-top:1px solid var(--line)}}

/* ---------- grid explorer ---------- */
.gx-out{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);min-width:0}
.gx-art{padding:24px;display:grid;place-items:center;background:var(--sheet);min-width:0}
.gx-art svg{max-height:620px;width:auto;max-width:100%;height:auto;box-shadow:0 1px 0 var(--line),0 12px 30px rgba(0,0,0,.14)}
.gx-art.land svg{width:100%;height:auto}
.gx-num{padding:18px;display:grid;gap:0;align-content:start;border-left:1px solid var(--line)}
.gx-num div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.gx-num div span:last-child{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right}
@media (max-width:860px){.gx-out{grid-template-columns:1fr}.gx-num{border-left:0;border-top:1px solid var(--line)}}
.formula{font-family:var(--f-mono);font-size:14px;background:var(--sheet);padding:14px 16px;display:grid;gap:6px;overflow-x:auto}

/* ---------- applications, resources ---------- */
.pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
.pages figure{margin:0;display:grid;gap:8px;min-width:0}
.pages figure:first-child{grid-column:1/-1}
.pages img{display:block;width:100%;height:auto;box-shadow:0 1px 0 var(--line),0 10px 26px rgba(0,0,0,.12)}
.pages figcaption{font-size:14.5px;color:var(--muted)}
.pages figcaption b{display:block;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
@media (max-width:700px){.pages{grid-template-columns:1fr}}
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.file{border:1px solid var(--line);display:grid;min-width:0}
.file .face{aspect-ratio:4/3;display:grid;place-items:center;padding:18px}
.file .face img{max-width:70%;max-height:70%}
.file .meta{padding:10px 12px;border-top:1px solid var(--line);display:grid;gap:8px;font-size:13.5px}
.file .meta code{font-size:12px;overflow-wrap:anywhere;color:var(--muted)}
pre.json{margin:0;max-height:420px;overflow:auto;background:var(--sheet);padding:16px;font-family:var(--f-mono);font-size:12.5px;line-height:1.5;border:1px solid var(--line)}
.planned-list{list-style:none;padding:0;display:grid;border-top:2px solid var(--ink)}
.planned-list li{padding:14px 0 14px 30px;border-bottom:1px solid var(--line);position:relative}
.planned-list li::before{content:"";position:absolute;left:4px;top:21px;width:10px;height:10px;border-radius:50%;border:2px solid var(--dot)}

/* ---------- chapter footer ---------- */
.next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--ink);margin-inline:var(--gx);margin-bottom:56px}
.next a{padding:20px 0;display:grid;gap:4px;text-decoration:none;color:var(--ink)}
.next a:last-child{text-align:right;border-left:1px solid var(--line)}
.next a .t{font-family:var(--f-mono);font-weight:700;font-size:20px}
.next a:hover .t{color:var(--accent)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--black);color:var(--white);font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;padding:10px 16px;z-index:50;pointer-events:none}
footer.colophon{padding:24px var(--gx) 40px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- strategy: the client route ---------- */
.arc{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:0;position:relative}
.arc::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--uv)}
.arc li{display:grid;gap:6px;align-content:start;padding-right:14px;position:relative}
.arc .node{width:20px;height:20px;border-radius:50%;background:var(--paper);border:3px solid var(--uv);position:relative;z-index:1}
.arc li:last-child .node{background:var(--uv)}
.arc b{font-family:var(--f-mono);font-size:19px;margin-top:6px}
.arc span{color:var(--muted);font-size:15px}
.arc em{font-style:normal;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
@media (max-width:760px){
  .arc{grid-template-columns:1fr;gap:18px;padding-left:34px}
  .arc::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .arc .node{position:absolute;left:-34px;top:2px}
  .arc b{margin-top:0}
}
@media (max-width:640px){.pointsys{grid-template-columns:1fr!important}.cover .net{opacity:.45}}

/* ---------- chapter parts ---------- */
.parts{display:flex;overflow-x:auto;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding-inline:var(--gx);position:sticky;top:0;z-index:5;scrollbar-width:thin}
.parts a{display:inline-flex;gap:8px;align-items:baseline;padding:14px 16px 12px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent}
.parts a span{color:var(--accent);font-weight:700}
.parts a:hover{color:var(--ink)}
.parts a[aria-current="page"]{color:var(--ink);font-weight:700;border-bottom-color:var(--uv)}
@media (max-width:960px){.parts{top:calc(57px + env(safe-area-inset-top,0px))}}
.subroute{list-style:none;padding:0 0 6px 52px;margin:0;display:grid;gap:0}
.subroute a{display:block;padding:4px 0;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.subroute a:hover{color:var(--ink)}
.subroute a[aria-current="page"]{color:var(--accent);font-weight:700}
.src{display:block;font-size:12.5px;color:var(--muted);margin-top:auto}
.src a{color:var(--muted)}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.ticks li{padding-left:18px;position:relative;font-size:15px}
.ticks li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.fig{background:var(--paper);padding:20px;display:grid;gap:8px;align-content:start}
.fig .v{font-family:var(--f-mono);font-weight:900;font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-.03em}
.fig .k{color:var(--accent)}
.fig p{font-size:15px;color:var(--muted)}
@media (max-width:860px){.figures{grid-template-columns:minmax(0,1fr)}}
.card .src{padding-top:4px}
.ch{display:grid;gap:2px;padding-top:10px;border-top:1px solid var(--line)}
.ch b{font-weight:600}
.ch p{font-size:14.5px}
.card.rec{background:var(--accent-soft);box-shadow:inset 0 3px 0 var(--uv)}
.personas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.persona{border:1px solid var(--line);background:var(--paper);padding:20px;display:grid;gap:14px;align-content:start;min-width:0}
.persona .k{color:var(--muted);letter-spacing:.06em}
.persona h3{font-family:var(--f-mono);font-weight:700;font-size:22px;line-height:1.2}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.pgrid b{display:block;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.pgrid p{font-size:15px}
.hear{background:var(--uv);color:var(--white);padding:14px 16px;display:grid;gap:6px}
.hear .k{color:var(--lime)}
.hear p{font-size:16.5px;line-height:1.45}
@media (max-width:900px){.personas{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.pgrid{grid-template-columns:minmax(0,1fr)}}
.journey{list-style:none;padding:0;margin:0;position:relative;display:grid;border-top:2px solid var(--ink)}
.journey::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--uv)}
.journey li{display:grid;grid-template-columns:24px 36px minmax(120px,.7fr) minmax(0,1.4fr) minmax(0,1.4fr);gap:6px 16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.journey .node{width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--uv);margin-left:5px;align-self:center;position:relative;z-index:1}
.journey .n{font-family:var(--f-mono);font-weight:700;color:var(--accent)}
.journey b{font-family:var(--f-mono);font-size:17px}
.journey span{font-size:15px}
.journey .job{color:var(--accent);font-weight:500}
@media (max-width:860px){.journey li{grid-template-columns:24px 36px minmax(0,1fr)}.journey li>span:not(.node):not(.n){grid-column:3}}
.mapbox{border:1px solid var(--line);background:var(--paper);padding:12px;max-width:820px}
.map text{paint-order:stroke;stroke:var(--sheet);stroke-width:3px}
.legend-row{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted)}
.legend-row span{display:inline-flex;gap:8px;align-items:center}
.legend-row i{width:10px;height:10px;border-radius:50%}
.prof .ph{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.prof dl{margin:0;display:grid;gap:8px}
.prof dl div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;border-top:1px solid var(--line);padding-top:8px}
.prof dt{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.prof dd{margin:0;font-size:14.5px}
.manifesto{display:grid;gap:18px;max-width:62ch}
.manifesto p{font-size:clamp(19px,2vw,23px);line-height:1.5}
.manifesto p:first-child{font-family:var(--f-mono);font-weight:700;font-size:clamp(22px,2.6vw,30px);line-height:1.3;letter-spacing:-.01em}
.manifesto p.last{font-family:var(--f-mono);font-weight:700;color:var(--accent)}
.house{display:grid;gap:4px}
.house .roof{background:var(--black);color:var(--white);padding:22px;display:grid;gap:8px;text-align:left}
.house .roof .k{color:#9D9EA6}
.house .roof b{font-family:var(--f-mono);font-weight:900;font-size:clamp(26px,3.4vw,44px);line-height:1.05;letter-spacing:-.02em}
.house .promise{background:var(--uv);color:var(--white);padding:12px 22px;font-family:var(--f-mono);font-weight:700;font-size:18px;letter-spacing:.02em}
.house .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.pillar{background:var(--sheet);padding:18px;display:grid;gap:12px;align-content:start}
.pillar .k{color:var(--accent)}
.pillar h3{font-family:var(--f-mono);font-weight:700;font-size:20px}
.pillar .proof{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:6px}
.pillar .proof b{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.house .base{display:flex;flex-wrap:wrap;background:var(--sheet);border-top:2px solid var(--ink)}
.house .base span{flex:1;min-width:110px;padding:12px;text-align:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:860px){.house .cols{grid-template-columns:minmax(0,1fr)}}
.phases{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.phases li{background:var(--sheet);padding:16px;display:grid;gap:10px;align-content:start;border-top:3px solid var(--uv)}
.phases li:last-child{border-top-color:var(--lime)}
.phases b{font-family:var(--f-mono);font-size:17px}
@media (max-width:1100px){.phases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.phases{grid-template-columns:minmax(0,1fr)}}
.arc .ticks{margin-top:6px}
.arc .ticks li{font-size:14px}
.hexes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hexes figure{margin:0;display:grid;gap:8px;justify-items:center;background:var(--sheet);padding:18px}
.hexes figcaption{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-align:center}
@media (max-width:640px){.hexes{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- audit ---------- */
.ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ba figure{margin:0;display:grid;gap:8px;min-width:0}
.ba .face{aspect-ratio:16/9;display:grid;place-items:center;padding:8%;border:1px solid var(--line)}
.ba img{max-width:100%;max-height:100%}
.ba figcaption{display:grid;gap:2px;font-size:14.5px;color:var(--muted)}
.ba figcaption b{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
@media (max-width:640px){.ba{grid-template-columns:minmax(0,1fr)}}
.issues{display:grid;gap:10px}
.issue{border-left:4px solid var(--bad);background:var(--bad-soft);padding:14px 18px;display:grid;gap:4px}
.issue .k{color:var(--bad)}
.issue p{font-size:15px}
.sec.internal{background:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--bad) 5%,transparent) 14px 15px)}

/* ---------- mark: old to new ---------- */
.evo-stage{background:#FFFFFF;display:grid;place-items:center;padding:clamp(24px,4vw,48px)}
.evo{width:min(300px,60vw);height:auto;color:#0B0B0B}
.evo-controls{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;border-top:1px solid var(--line);border-bottom:0!important}
.evo-controls input[type="range"]{width:100%}
.evo-stations{grid-column:1/-1;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.evo-stations button{width:100%;border:0;border-top:3px solid var(--line);background:transparent;padding:8px 2px 0;text-align:left;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.evo-stations button[aria-current="true"]{border-top-color:var(--uv);color:var(--ink);font-weight:700}
.evo-cap{padding:14px 16px 18px;display:grid;gap:4px;border-top:1px solid var(--line);min-height:96px}
.evo-cap b{font-family:var(--f-mono);font-size:17px}
@media (max-width:640px){.evo-stations{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- mark: construction ---------- */
.con{grid-template-columns:minmax(0,1.15fr) minmax(260px,1fr)}
.con-stage{background:var(--paper);display:grid;place-items:center;padding:16px;border-right:1px solid var(--line)}
.con-stage svg{width:100%;max-width:520px;height:auto}
.con-layer{fill:none;stroke:var(--accent);stroke-width:.35;font-family:"Shiftpoint Mono",monospace;font-size:2.6px}
.con-layer text{fill:var(--accent);stroke:none;letter-spacing:.05px}
.con-layer .lbl{fill:var(--accent)}
.con-layer .hi{stroke:var(--uv)}
.con-layer .hi-fill{fill:var(--uv);fill-opacity:.22;stroke:var(--uv)}
.con-layer .hi-ring{fill:none;stroke:var(--uv);stroke-width:.4}
.con-layer .faint{stroke-opacity:.35;stroke-dasharray:1 1}
.con-side{display:grid;gap:14px;padding:18px;align-content:start}
.con-steps{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.con-steps button{width:100%;display:flex;gap:10px;align-items:baseline;border:0;background:transparent;padding:6px 8px;text-align:left;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.con-steps button span{color:var(--accent);font-weight:700;width:1.4em}
.con-steps button[aria-pressed="true"]{background:var(--accent-soft);color:var(--ink);font-weight:700}
.con-text{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:12px;min-height:150px}
.con-text h3{font-family:var(--f-mono);font-weight:700}
.con-nav{display:flex;gap:8px;flex-wrap:wrap}
.con-nav .btn:disabled{opacity:.4;cursor:not-allowed}
@media (max-width:900px){.con{grid-template-columns:minmax(0,1fr)}.con-stage{border-right:0;border-bottom:1px solid var(--line)}}

/* ---------- pattern ---------- */
.pcanvas{display:block;width:100%;height:auto}
.layers4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lay{margin:0;display:grid;gap:10px;align-content:start;min-width:0}
.lay .thumb{border:1px solid var(--line);overflow:hidden;aspect-ratio:4/3;display:grid}
.lay .thumb svg,.lay .thumb canvas{width:100%;height:100%;display:block}
.lay h3{font-family:var(--f-mono);font-weight:700;font-size:19px}
.lay p{font-size:15px}
.minicodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:100%}
.minicodes svg{height:100%!important}
@media (max-width:1100px){.layers4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.layers4{grid-template-columns:minmax(0,1fr)}}
.sig-stage{background:var(--sheet);padding:20px;display:grid;place-items:center}
.sig-stage svg{max-height:640px;width:auto!important;max-width:100%;box-shadow:0 1px 0 var(--line),0 12px 30px rgba(0,0,0,.14)}
.sig-stage.land svg{width:100%!important;height:auto}
.codes4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.codeban{aspect-ratio:1/2.2;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:1px solid var(--line)}
.codeban .tx{padding:14px;display:grid;gap:4px}
.codeban .tx span{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.codeban .tx b{font-family:var(--f-mono);font-weight:900;font-size:clamp(20px,2.2vw,30px);line-height:1}
.codeban .tx small{font-size:13px;line-height:1.35;opacity:.9}
.codeban .gl{min-height:0}
.codeban .gl svg{height:100%!important}
@media (max-width:760px){.codes4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chips4{display:flex;flex-wrap:wrap;gap:16px}
.chips4>div{display:grid;gap:6px;justify-items:center}
.chipart{width:64px;border:1px solid var(--line)}

/* ---------- icons ---------- */
.iconsets{background:var(--ibg,#0B0B0B);padding:18px;display:grid;gap:18px}
.iset>.k{display:block;margin-bottom:8px;color:#9D9EA6}
.iconsets[data-ground="white"] .iset>.k{color:#595A62}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px}
.ic{display:grid;justify-items:center;align-content:start;gap:8px;padding:12px 4px;border:1px solid transparent;background:transparent;cursor:pointer;min-width:0}
.ic .ig{min-height:52px;display:grid;place-items:center}
.ic .in{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#C3C3CB;text-align:center}
.iconsets[data-ground="white"] .ic .in{color:#414249}
.iconsets[data-ground="uv"] .ic .in{color:#E8E9FF}
.ic:hover{border-color:rgba(255,255,255,.18)}
.iconsets[data-ground="white"] .ic:hover{border-color:#DDDDE3}
.ic[aria-pressed="true"]{border-color:#8881FF}
.iconsets[data-ground="white"] .ic[aria-pressed="true"]{border-color:#5F38ED}
.icon-con{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px;align-items:center}
.icon-big{aspect-ratio:1;border:1px solid var(--line)}
.icon-big svg{display:block}
.icon-meta{display:grid;gap:8px;align-content:start}
.icon-meta h3{font-family:var(--f-mono);font-weight:700;font-size:24px}
.icon-meta p{color:var(--muted);font-size:15px}
@media (max-width:640px){.icon-con{grid-template-columns:minmax(0,1fr)}}

/* ---------- illustration ---------- */
.glyphs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px;background:var(--sheet)}
.gcard,.ucard{border:0;border-radius:10px;padding:14px;display:grid;gap:12px;align-content:space-between;text-align:left;cursor:pointer;min-width:0}
.gcard{aspect-ratio:3/3.6}
.gcard.ink,.ucard.ink{background:#141417;color:#FFFFFF}
.gcard.white,.ucard.white{background:#FFFFFF;color:#0B0B0B;box-shadow:inset 0 0 0 1px #DDDDE3}
.gcard.hi,.ucard.hi{background:#5F38ED;color:#FFFFFF}
.gtx{display:grid;gap:3px}
.gtx b{font-family:var(--f-body);font-weight:600;font-size:15px}
.gtx i{font-style:normal;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;opacity:.7}
.gcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:860px){.glyphs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.glyphs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.inuse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ucard{cursor:default;padding:18px;gap:10px;align-content:start}
.ucard .gart{margin-bottom:8px}
.ucard .uk{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;opacity:.75}
.ucard h3{font-family:var(--f-mono);font-weight:700;font-size:20px;line-height:1.15}
.ucard p{font-size:15px;opacity:.85}
.ucard .ubtn{justify-self:start;margin-top:6px;border:1px solid currentColor;border-radius:999px;padding:6px 14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
@media (max-width:760px){.inuse{grid-template-columns:minmax(0,1fr)}}

/* ---------- icon motion ---------- */
.sicon .ipoint,.sicon .iring{transform-box:fill-box;transform-origin:center}
.sicon.anim-draw path:not(.idash){stroke-dasharray:1;stroke-dashoffset:1;animation:idraw 3.2s cubic-bezier(.65,0,.35,1) infinite;animation-delay:var(--d)}
.sicon.anim-draw .idash{opacity:0;animation:ifade 3.2s ease-in-out infinite;animation-delay:var(--d)}
.sicon.anim-draw .ipoint{transform:scale(0);animation:ipop 3.2s ease-out infinite;animation-delay:var(--d)}
@keyframes idraw{0%{stroke-dashoffset:1}30%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes ifade{0%,10%{opacity:0}30%,82%{opacity:1}100%{opacity:0}}
@keyframes ipop{0%,28%{transform:scale(0)}36%{transform:scale(1.25)}42%,82%{transform:scale(1)}92%,100%{transform:scale(0)}}
.sicon.anim-pulse .iring{animation:iring 2.4s ease-out infinite;animation-delay:var(--d)}
.sicon.anim-pulse .ipoint{animation:ibeat 2.4s ease-out infinite;animation-delay:var(--d)}
@keyframes iring{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(3.2);opacity:0}}
@keyframes ibeat{0%{transform:scale(1)}10%{transform:scale(1.25)}25%,100%{transform:scale(1)}}
.sicon.anim-echo .iecho{animation:iecho 2.6s cubic-bezier(.65,0,.35,1) infinite;animation-delay:var(--d)}
@keyframes iecho{0%{transform:translateX(0);opacity:0}35%{transform:translateX(-6px);opacity:1}75%{transform:translateX(-6px);opacity:1}100%{transform:translateX(-10px);opacity:0}}
@media (prefers-reduced-motion: reduce){.sicon *{animation:none!important;transform:none!important;stroke-dashoffset:0!important;opacity:1!important}}

/* ---------- light and grain ---------- */
.lt .lt-pick{display:grid;gap:10px;padding:16px;border-bottom:1px solid var(--line)}
.lt-styles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.lt-ranges{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.lt-styles button,.lt-ranges button{all:unset;cursor:pointer;display:grid;gap:6px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);min-width:0}
.lt-styles canvas{width:100%;aspect-ratio:4/5;display:block;outline:2px solid transparent;outline-offset:2px}
.lt-ranges canvas{width:100%;height:20px;display:block;outline:2px solid transparent;outline-offset:2px}
.lt-styles button[aria-pressed="true"],.lt-ranges button[aria-pressed="true"]{color:var(--ink)}
.lt-styles button[aria-pressed="true"] canvas,.lt-ranges button[aria-pressed="true"] canvas{outline-color:var(--uv)}
.lt-styles button:focus-visible canvas,.lt-ranges button:focus-visible canvas{outline-color:var(--ink)}
.lt-main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;padding:16px;align-items:start}
.lt-main.wide{grid-template-columns:minmax(0,1fr)}
#lt-stage{cursor:crosshair;touch-action:none}
.lt-side{display:grid;gap:18px;align-content:start}
.lt-side h3{margin:4px 0 6px}
.lt-side p{margin:0 0 6px}
.lt-stops{display:grid;gap:5px;margin-top:6px}
.lt-stop{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px}
.lt-stop i,.lt-sw i{width:14px;height:14px;display:inline-block;border:1px solid var(--line)}
.lt-sw{display:inline-flex;gap:3px}
.lt-cr{font-family:var(--f-mono);font-size:30px;font-weight:700;line-height:1.2;margin-top:4px}
.lt-dl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (max-width:760px){.lt-styles,.lt-ranges{grid-template-columns:repeat(3,minmax(0,1fr))}.lt-main{grid-template-columns:minmax(0,1fr)}}

/* ---------- characters ---------- */
.ch-meet{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:28px;align-items:start}
.ch-video{margin:0;display:grid;gap:8px;position:relative}
.ch-video video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:#9D9EA6}
.ch-vbtn{position:absolute;right:10px;top:10px;background:rgba(11,11,11,.7);color:#fff;border-color:transparent}
.ch-video figcaption{font-size:14px;color:var(--muted)}
.ch-rel{display:grid;gap:16px;align-content:start}
.ch-line{font-family:var(--f-mono);font-weight:700;font-size:clamp(22px,2.6vw,30px);line-height:1.15;margin:0}
.ch-tile{background:#F4F4F6;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.ch-tile img{display:block;max-width:100%;height:auto}
.ch-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0 0 8px}
.ch-tiles figure{margin:0;display:grid;gap:6px}
.ch-tiles figcaption{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ch-tiles.tall .ch-tile img{width:100%}
.ch-tiles.round .ch-tile{aspect-ratio:1}
.ch-intro{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:28px;align-items:start;margin-bottom:12px}
.ch-herofig{margin:0}
.ch-herofig img{width:100%}
.ch-details{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ch-details figure{margin:0;display:grid;gap:8px;align-content:start}
.ch-details .ch-tile{aspect-ratio:1}
.ch-details img{width:100%;height:100%;object-fit:cover}
.ch-details figcaption{font-size:14px;color:var(--muted)}
.ch-details figcaption b{display:block;color:var(--ink)}
.ch-pt{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;padding:16px;align-items:start}
.ch-ptside{display:grid;gap:4px;align-content:start}
.ch-ptside h3{margin:0 0 4px}
.ch-ptside p{margin:0 0 10px}
.ch-ladder{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;padding:16px;border-top:1px solid var(--line)}
.ch-ladder figure{margin:0;display:grid;justify-items:center;gap:6px}
.ch-ladder figcaption{font-family:var(--f-mono);font-size:12px;color:#9D9EA6}
.ch-render{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ch-render figure{margin:0;display:grid;gap:8px}
.ch-render img{width:100%;max-height:640px;object-fit:contain}
.ch-render figcaption{font-size:15px;color:var(--muted)}
.ch-render figcaption b{display:block;color:var(--ink)}
.ch-pal{display:grid;gap:10px}
.ch-pal>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center}
.ch-pal i{width:44px;height:44px;border:1px solid var(--line)}
.ch-pal span{font-size:15px}
.ch-pal b{margin-right:8px}
.ch-pal .mono{margin-right:8px;color:var(--muted)}
.ch-scale{display:flex;align-items:flex-end;gap:18px;padding:16px;background:#F4F4F6;border:1px solid var(--line);margin-bottom:12px;width:max-content;max-width:100%}
.ch-scale img{height:300px;width:auto}
@media (max-width:900px){.ch-meet,.ch-intro,.ch-pt{grid-template-columns:minmax(0,1fr)}.ch-meet .ch-video{max-width:340px}.ch-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.ch-details{grid-template-columns:repeat(2,minmax(0,1fr))}.ch-render{grid-template-columns:minmax(0,1fr)}}
.ch-clips{display:grid;grid-template-columns:1.1fr 1.45fr .8fr;gap:14px;align-items:start;margin:0 0 8px}
.ch-clips video{aspect-ratio:var(--ar);background:#C3C3CB}
@media (max-width:900px){.ch-clips{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ch-clips figure:nth-child(2){grid-column:1/-1;order:3}}

/* ---------- motion ---------- */
:root{--sp-ease-shift:cubic-bezier(.2,.8,.2,1);--sp-ease-settle:cubic-bezier(.34,1.36,.64,1);--sp-ease-release:cubic-bezier(.55,0,.75,0);--sp-ease-glide:cubic-bezier(.22,.61,.36,1);--sp-dur-spark:120ms;--sp-dur-pulse:240ms;--sp-dur-shift:400ms;--sp-dur-exhale:640ms;--sp-dur-scene:1000ms;--sp-stagger:70ms}
.mo-curves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mo-curves figure{margin:0;display:grid;gap:8px}
.mo-curve{width:100%;aspect-ratio:1;display:block}
.mo-curves figcaption{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.mo-curves figcaption b{color:var(--ink);font-family:var(--f-mono);font-size:16px}
.mo-curves code{font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.mo-ae{font-family:var(--f-mono);font-size:12px}
.mo-durs{display:grid;gap:8px;margin:20px 0}
.mo-durs>div{display:grid;grid-template-columns:minmax(0,1.2fr) 90px 80px minmax(0,2fr);gap:12px;align-items:center;font-size:14px}
.mo-bar{height:10px;background:var(--line);display:block}
.mo-bar i{display:block;height:100%;background:var(--uv)}
.mo-codehead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mo-filter{padding:0 0 14px;border:0;background:none}
.mo-lib{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mo-item{border:1px solid var(--line);background:var(--sheet);padding:14px;display:grid;gap:8px;align-content:start;min-width:0}
.mo-item[hidden]{display:none}
.mo-item h3{margin:4px 0 0;font-size:17px}
.mo-ihead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mo-replay{min-height:30px;padding:0 10px;font-size:12px}
.mo-use{margin:0;font-size:14px}
.mo-spec{margin:0;font-size:13.5px;color:var(--muted)}
.mo-item .seg button{padding:6px 8px;font-size:12px}
.mo-stage{aspect-ratio:16/9;background:#0B0B0B;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;padding:12px;color:#fff}
.mo-btn{position:relative;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--uv);color:#fff;border:1px solid var(--uv);min-height:44px;padding:0 20px 0 20px;cursor:pointer;transition:padding var(--sp-dur-pulse) var(--sp-ease-shift),transform var(--sp-dur-spark) var(--sp-ease-shift)}
.mo-btn::before{content:"";position:absolute;left:14px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#DBE246;transform:scale(0);transition:transform var(--sp-dur-pulse) var(--sp-ease-settle)}
.mo-btn:hover,.mo-btn:focus-visible{padding-left:32px}
.mo-btn:hover::before,.mo-btn:focus-visible::before{transform:scale(1)}
.mo-btn:active{transform:scale(.98)}
.mo-btn.ghost{background:transparent;border-color:#595A62}
.mo-btn.ghost::before{background:#ADAEFE}
.mo-switch{width:56px;height:30px;border-radius:15px;border:1px solid #595A62;background:#2D2D33;position:relative;cursor:pointer;transition:background var(--sp-dur-pulse) var(--sp-ease-shift),border-color var(--sp-dur-pulse)}
.mo-switch i{position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;background:#C3C3CB;transition:transform var(--sp-dur-pulse) var(--sp-ease-settle),background var(--sp-dur-pulse)}
.mo-switch[aria-checked="true"]{background:var(--uv);border-color:var(--uv)}
.mo-switch[aria-checked="true"] i{transform:translateX(26px);background:#DBE246}
.mo-lab{font-size:14px;color:#DDDDE3}
.mo-field{position:relative;display:block;width:80%}
.mo-field input{width:100%;background:transparent;border:0;border-bottom:1px solid #595A62;color:#fff;font-size:16px;padding:10px 0 10px 18px;outline:none}
.mo-field::before{content:"";position:absolute;left:2px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#DBE246;transform:scale(0);transition:transform var(--sp-dur-spark) var(--sp-ease-settle)}
.mo-field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#ADAEFE;transform:scaleX(0);transform-origin:left;transition:transform var(--sp-dur-shift) var(--sp-ease-shift) 60ms}
.mo-field:focus-within::before{transform:scale(1)}
.mo-field:focus-within::after{transform:scaleX(1)}
.mo-hex{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:15px;color:#DDDDE3}
.mo-hex input{position:absolute;opacity:0}
.mo-hex svg{width:26px;height:26px}
.mo-hex .r{fill:none;stroke:#9D9EA6;stroke-width:1.5}
.mo-hex .p{fill:#DBE246;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform var(--sp-dur-pulse) var(--sp-ease-settle)}
.mo-hex input:checked+svg .p{transform:scale(1)}
.mo-hex input:checked+svg .r{stroke:#ADAEFE}
.mo-hex input:focus-visible+svg{outline:2px solid #DBE246;outline-offset:2px}
.mo-toastwrap{position:relative;overflow:hidden}
.mo-toast{position:absolute;right:12px;bottom:12px;background:#1A1A1E;border:1px solid #2D2D33;color:#fff;display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px;transform-origin:100% 100%}
.mo-toast i{width:9px;height:9px;border-radius:50%;background:#DBE246}
.mo-toast.in{animation:mo-exhale var(--sp-dur-shift) var(--sp-ease-shift) both}
.mo-toast.out{animation:mo-release var(--sp-dur-shift) var(--sp-ease-release) both}
@keyframes mo-exhale{from{transform:scale(.04);opacity:.2}to{transform:none;opacity:1}}
@keyframes mo-release{from{transform:none;opacity:1}to{transform:scale(.04);opacity:0}}
.mo-scrollwrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
.mo-scroll{position:relative;height:520px;overflow-y:auto;overflow-x:hidden;background:#0B0B0B;color:#fff;border:1px solid var(--line)}
.mo-sbg{position:absolute;left:0;right:0;top:0;height:300%;background-image:radial-gradient(circle,rgba(173,174,254,.22) 1.2px,transparent 1.6px);background-size:28px 24.25px;pointer-events:none}
.mo-shead{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:rgba(11,11,11,.92);transition:padding var(--sp-dur-shift) var(--sp-ease-shift)}
.mo-shead.slim{padding:8px 20px}
.mo-slogo{display:flex;align-items:center;gap:8px;font-family:var(--f-mono)}
.mo-slogo i{width:10px;height:10px;border-radius:50%;background:#DBE246;display:inline-block}
.mo-slogo b{font-weight:500;letter-spacing:.04em;max-width:120px;overflow:hidden;white-space:nowrap;transition:max-width var(--sp-dur-shift) var(--sp-ease-shift),opacity var(--sp-dur-pulse)}
.mo-shead.slim .mo-slogo b{max-width:0;opacity:0}
.mo-snav{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9D9EA6}
.mo-srail{position:sticky;top:80px;float:left;height:220px;width:18px;margin:20px 0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:space-between;z-index:1}
.mo-srail::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:1px;background:#414249}
.mo-srail li{width:9px;height:9px;border-radius:50%;border:1px solid #797982;background:#0B0B0B;margin-left:4px;position:relative;transition:background var(--sp-dur-pulse)}
.mo-srail li.on{background:#ADAEFE;border-color:#ADAEFE}
.mo-spt{position:absolute;left:3px;top:0;width:11px;height:11px;margin-top:-1px;border-radius:50%;background:#DBE246;transition:top 120ms linear}
.mo-ss{position:relative;padding:60px 28px 60px 56px;min-height:260px}
.mo-ss.hero{min-height:360px;padding-top:90px}
.mo-ss h4{font-family:var(--f-mono);font-weight:700;font-size:28px;line-height:1.15;margin:8px 0 12px;max-width:16ch}
.mo-ss p{color:#C3C3CB;max-width:40ch}
.mo-sk{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#ADAEFE!important}
.mo-sh{font-size:36px!important}
.mo-sh span{display:block;opacity:0;transform:translateY(.8em);transition:transform var(--sp-dur-exhale) var(--sp-ease-settle),opacity var(--sp-dur-shift)}
.mo-sh span.lime{color:#DBE246}
.mo-ss.in .mo-sh span{opacity:1;transform:none}
.mo-ss.in .mo-sh span:nth-child(2){transition-delay:var(--sp-stagger)}
.mo-ss.in .mo-sh span:nth-child(3){transition-delay:calc(var(--sp-stagger)*2 + 120ms)}
.mo-rv>*{opacity:0;transform:translateY(24px);transition:transform var(--sp-dur-exhale) var(--sp-ease-shift),opacity var(--sp-dur-shift)}
.mo-rv.in>*{opacity:1;transform:none}
.mo-rv.in>*:nth-child(2){transition-delay:var(--sp-stagger)}
.mo-rv.in>*:nth-child(3){transition-delay:calc(var(--sp-stagger)*2)}
.mo-snum{display:flex;align-items:baseline;gap:14px;margin-top:10px}
.mo-snum b{font-family:var(--f-mono);font-size:72px;line-height:1;color:#fff}
.mo-snum span{color:#C3C3CB;max-width:14ch}
.mo-ss.end{min-height:420px}
.mo-sonic{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;align-items:start}
.mo-logo{background:#0B0B0B;aspect-ratio:1;display:grid;place-items:center;padding:40px;color:#fff}
.mo-logo svg{width:100%;height:auto}
.mo-sonicside{display:grid;gap:14px;align-content:start}
.mo-sonicside .btn{justify-self:start}
.mo-ui{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:16px}
.mo-ui>div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14px;color:var(--muted);border:1px solid var(--line);padding:8px}
.mo-ident{position:relative}
.mo-identlogo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#fff;transition:opacity 200ms}
.mo-identlogo>*{width:min(28%,220px)}
.mo-identplay{position:absolute;right:12px;bottom:12px}
@media (max-width:900px){.mo-curves{grid-template-columns:repeat(2,minmax(0,1fr))}.mo-lib{grid-template-columns:minmax(0,1fr)}.mo-scrollwrap,.mo-sonic{grid-template-columns:minmax(0,1fr)}.mo-durs>div{grid-template-columns:minmax(0,1fr) 80px 70px;}.mo-durs>div>span:last-child{grid-column:1/-1}}
@media (prefers-reduced-motion: reduce){.mo-sh span,.mo-rv>*{opacity:1!important;transform:none!important}}
@media (max-width:1100px){.parts a{padding:14px 11px 12px}}