:root{
  --void:#08090C;--ink:#16171B;--ink-2:#3A3B40;--grey:#86868B;--grey-2:#A6A6AC;
  --paper:#FFFFFF;--mist:#F5F5F7;--line:#E4E4E8;--line-dark:#24252B;
  --signal:#0E6E5A;--signal-soft:#5FC7AE;--red:#C81E28;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;--w:1120px;--pad:clamp(22px,5vw,52px);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.05;}
p{margin:0;}a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--pad);}
::selection{background:var(--signal);color:#fff;}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;}
/* reveal (from index.html / index.js) */
.rev{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.rev.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){*{animation:none!important;}.rev{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

/* ---- page hero -------------------------------------------------------- */
.phero{position:relative;background:var(--void);color:#fff;padding-block:clamp(66px,13vh,140px) clamp(56px,11vh,110px);overflow:hidden;}
.phero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 130% at 82% -10%,rgba(14,110,90,.30),transparent 55%);pointer-events:none;}
.phero .wrap{position:relative;z-index:2;}
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.crumb a{color:rgba(255,255,255,.5);}.crumb a:hover{color:#fff;}.crumb .sep{opacity:.4;}
.phero h1{font-size:clamp(36px,6.6vw,80px);font-weight:600;letter-spacing:-.03em;margin-top:20px;max-width:17ch;}
.phero h1 .jp{font-weight:400;color:var(--signal-soft);letter-spacing:0;}
.phero .lede{margin-top:22px;font-size:clamp(17px,2.2vw,22px);color:rgba(255,255,255,.8);max-width:48ch;font-weight:400;}
.metaline{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.18);border-radius:980px;padding:8px 14px;background:rgba(255,255,255,.04);}
.chip b{color:var(--signal-soft);font-weight:500;}
/* ---- sections --------------------------------------------------------- */
.sec{padding-block:clamp(60px,9vh,104px);}
.sec.light{background:var(--paper);border-top:1px solid var(--line);}
.sec.mist{background:var(--mist);border-top:1px solid var(--line);}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px;}
.sec-head .eyebrow{color:var(--signal);}
.sec-head h2{font-size:clamp(26px,4vw,42px);font-weight:600;letter-spacing:-.025em;margin-top:12px;}
.sec-head p{color:var(--grey);font-size:15.5px;max-width:54ch;margin-top:10px;}
.seelink{font-family:var(--mono);font-size:12px;color:var(--signal);letter-spacing:.05em;white-space:nowrap;align-self:center;}
.seelink .arw{transition:transform .25s;display:inline-block;}.seelink:hover .arw{transform:translateX(3px);}
/* ---- media tiles ------------------------------------------------------ */
.media{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#101a22,#0b0c10 62%);border:1px solid var(--line);display:flex;align-items:flex-end;}
.media.big{aspect-ratio:16/9;}
.media::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 10px);}
.media .m-tag{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.52);z-index:2;}
.media .m-jp{position:absolute;top:10px;right:14px;font-size:22px;color:rgba(255,255,255,.22);z-index:2;}
.media .m-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.42);display:grid;place-items:center;color:#fff;z-index:2;}
.media .m-play svg{width:18px;height:18px;margin-left:3px;}
.media .m-cap{position:relative;z-index:2;padding:14px 16px;color:#fff;font-size:14.5px;font-weight:500;width:100%;background:linear-gradient(transparent,rgba(0,0,0,.55));}

/* YouTube iframe embedded into .media tiles */
.media iframe.systems-youtube-iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  z-index:1;
}
.media-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;}
.media-strip .media{scroll-snap-align:start;}
/* ---- cards ------------------------------------------------------------ */
.grid-cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s;display:flex;flex-direction:column;}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(8,9,12,.08);border-color:var(--signal-soft);}
.card .media{border:0;border-radius:0;aspect-ratio:16/10;}
.card .body{padding:18px 18px 20px;flex:1;display:flex;flex-direction:column;gap:7px;}
.card .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--signal);text-transform:uppercase;}
.card h3{font-size:19px;font-weight:600;letter-spacing:-.02em;}
.card h3 .jp{font-weight:400;color:var(--grey);font-size:15px;margin-left:6px;}
.card .sub{color:var(--grey);font-size:13.5px;line-height:1.45;}
.card .row{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;color:var(--grey-2);}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:980px;border:1px solid var(--line);color:var(--ink-2);}
.tag.on{background:var(--signal);color:#fff;border-color:var(--signal);}
.tag.soft{color:var(--grey-2);}
.card.ghost{opacity:.62;}
.card.ghost:hover{transform:none;box-shadow:none;border-color:var(--line);}
/* big category panels (system.html) */
.panels{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);}
@media(max-width:760px){.panels{grid-template-columns:1fr;}}
.panel{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper);display:grid;grid-template-columns:150px 1fr;transition:border-color .3s,box-shadow .3s;}
.panel:hover{border-color:var(--signal-soft);box-shadow:0 16px 44px rgba(8,9,12,.07);}
.panel .media{border:0;border-radius:0;aspect-ratio:auto;height:100%;}
.panel .pbody{padding:22px 22px;display:flex;flex-direction:column;gap:8px;}
.panel .k{font-family:var(--mono);font-size:11px;color:var(--signal);letter-spacing:.12em;text-transform:uppercase;}
.panel h3{font-size:23px;font-weight:600;letter-spacing:-.02em;}
.panel p{color:var(--grey);font-size:14px;}
.panel .n{margin-top:auto;font-family:var(--mono);font-size:12px;color:var(--ink-2);}
.panel .n b{color:var(--signal);}
@media(max-width:520px){.panel{grid-template-columns:1fr;}.panel .media{aspect-ratio:16/9;height:auto;}}
/* ---- statistics ------------------------------------------------------- */
.stat-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start;}
@media(max-width:860px){.stat-grid{grid-template-columns:1fr;gap:32px;}}
.bars{display:flex;flex-direction:column;gap:20px;}
.bar-row .bl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-bottom:7px;letter-spacing:.04em;}
.bar{height:28px;border-radius:8px;overflow:hidden;display:flex;background:var(--mist);border:1px solid var(--line);}
.seg{height:100%;display:flex;align-items:center;padding:0 9px;font-family:var(--mono);font-size:10.5px;color:#fff;white-space:nowrap;min-width:0;overflow:hidden;}
.formula{font-family:var(--mono);font-size:clamp(20px,3.4vw,30px);color:var(--ink);letter-spacing:.02em;}
.formula b{color:var(--signal);font-weight:500;}
.legend{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px 16px;font-family:var(--mono);font-size:11px;color:var(--grey);}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;}
/* 24-cell coverage */
.coverage{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media(max-width:520px){.coverage{grid-template-columns:1fr;}}
.cov-block .cbt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px;}
.cells{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.cell{aspect-ratio:1;border-radius:7px;border:1px solid var(--line);display:grid;place-items:center;text-align:center;font-family:var(--mono);font-size:9px;color:var(--ink-2);position:relative;background:var(--mist);}
.cell .pc{font-size:11px;color:#fff;font-weight:500;}
.cell.occ{border-color:transparent;color:#fff;}
.cell.sp{border-color:var(--signal-soft);}
.cov-key{margin-top:14px;display:flex;gap:16px;font-family:var(--mono);font-size:11px;color:var(--grey);}
.cov-key i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px;border:1px solid var(--line);}
/* ---- filter toolbar (techniques) ------------------------------------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:28px;}
.toolbar .grp{display:flex;gap:6px;align-items:center;}
.toolbar .lab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);margin-right:4px;}
.fbtn{font-family:var(--mono);font-size:12px;padding:7px 12px;border-radius:980px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);cursor:pointer;transition:all .2s;}
.fbtn:hover{border-color:var(--signal-soft);}
.fbtn.active{background:var(--signal);color:#fff;border-color:var(--signal);}
.count-note{font-family:var(--mono);font-size:12px;color:var(--grey);margin-left:auto;}
/* ---- data table (technique / step lists) ------------------------------ */
.trows{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);}
.trow{display:grid;grid-template-columns:56px 1.4fr 1fr 132px;gap:18px;align-items:center;padding:14px 18px;border-top:1px solid var(--line);}
.trow:first-child{border-top:0;}
.trow .no{font-family:var(--mono);font-size:12px;color:var(--grey);}
.trow .nm{font-weight:600;letter-spacing:-.01em;}
.trow .nm .jp{font-weight:400;color:var(--grey);font-size:14px;margin-left:6px;}
.trow .meta{font-family:var(--mono);font-size:12px;color:var(--grey);}
.coord{font-family:var(--mono);font-size:11px;display:inline-flex;gap:4px;}
.coord b{color:#fff;padding:2px 6px;border-radius:5px;font-weight:500;}
@media(max-width:680px){.trow{grid-template-columns:40px 1fr;gap:4px 12px;}.trow .meta,.trow .coord{grid-column:2;}}
.hint{font-family:var(--mono);font-size:12px;color:var(--grey);background:var(--mist);border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:8px;padding:12px 16px;margin-top:22px;line-height:1.5;}

.dp{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);}
.dp-row{display:grid;grid-template-columns:230px 1fr;gap:20px;padding:18px 22px;border-top:1px solid var(--line);align-items:baseline;}
.dp-row:first-child{border-top:0;}
.dp-q{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2);display:flex;gap:10px;align-items:center;}
.dp-a{color:var(--grey);font-size:15px;}
@media(max-width:620px){.dp-row{grid-template-columns:1fr;gap:8px;}}
a.trow{color:inherit;}
.empty-note{color:var(--grey);font-size:16px;line-height:1.6;}