:root{
  color-scheme: dark;
  --void:#07050d; --sky:#080a28; --night:#0e0a1c; --indigo:#2a1a5e; --magenta:#ff2e9a; --cyan:#2ef2ff;
  --cream:#f6e7c8; --gold:#ffd27a; --soft:#e8e1ff;
  --px:'Press Start 2P', ui-monospace, monospace;
  --txt:'VT323', ui-monospace, monospace;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px);}
*,*::before,*::after{box-sizing:inherit;}
[hidden]{display:none !important;}
body{
  margin:0; height:100%; background:var(--sky); color:var(--soft);
  font:20px/1.2 var(--txt);
  display:flex; flex-direction:column; align-items:center; overflow:hidden;
}
#bar{background:var(--sky); width:100%; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; padding:10px 14px;}
#hud{display:flex; align-items:center; gap:16px;}
#hudFace{
  display:block; width:64px; height:64px; image-rendering:pixelated; background:#150d2d;
  border:3px solid var(--cyan); box-shadow:0 0 0 2px var(--magenta), 0 0 14px rgba(46,242,255,.22);
}
#hudBtn{display:block; padding:0; border:0; background:none; cursor:pointer;}
#hudBtn:hover #hudFace{filter:brightness(1.18); box-shadow:0 0 0 2px var(--magenta), 0 0 18px rgba(46,242,255,.5);}
#hudBtn:active #hudFace{transform:translateY(1px);}
#hudInfo{display:flex; flex-direction:column; justify-content:center; gap:9px;}
#hudName{font:13px/1 var(--px); color:var(--cyan); letter-spacing:1px; text-shadow:1px 1px 0 var(--magenta);}
#hearts{display:flex; gap:6px;}
#hearts svg{display:block; width:39px; height:36px;}
@keyframes heartPop{0%{transform:scale(.6);} 55%{transform:scale(1.4);} 100%{transform:scale(1);}}
#hearts svg.pop{animation:heartPop .5s ease-out;}
#menu{display:flex; flex-wrap:wrap; gap:10px;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font:9px/1.3 var(--px); color:var(--soft); background:#3a1a5e;
  border:0; padding:9px 10px; cursor:pointer;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.4), inset 3px 3px 0 rgba(255,255,255,.14), 0 0 0 2px var(--void), 0 0 0 4px #ff2e9a55;
}
.btn:hover{background:#52277f;}
.btn.alt{background:#1b1038;}
.btn.alt:hover{background:#2a1a5e;}
.btn img{width:20px; height:20px; image-rendering:pixelated;}
.btn:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible{outline:3px dashed var(--cyan); outline-offset:3px;}
#stageWrap{flex:1; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; padding:4px;}
#stage{position:relative; background:var(--sky);}
#stage.soft #c{
  -webkit-mask-image:linear-gradient(to right, transparent, #000 3.5%, #000 96.5%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 96%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent, #000 3.5%, #000 96.5%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 96%, transparent);
  mask-composite:intersect;
}
#c{display:block; width:100%; height:100%;}
#fade{position:absolute; inset:0; background:var(--void); opacity:0; pointer-events:none; transition:opacity .25s;}
#prompt{
  position:absolute; left:50%; bottom:2.5%; transform:translateX(-50%);
  font:9px/1.4 var(--px); color:var(--soft); background:rgba(14,10,28,.92);
  padding:8px 11px; border:2px solid var(--cyan); box-shadow:0 0 0 2px var(--void); white-space:nowrap; cursor:pointer;
}
#toast{
  position:absolute; left:50%; top:2.5%; transform:translateX(-50%); max-width:90%; text-align:center;
  font:9px/1.5 var(--px); color:var(--void); background:var(--gold); padding:8px 11px; pointer-events:none; z-index:3;
}
#dialog{
  position:absolute; left:0; top:0; z-index:2; width:min(620px, calc(100% - 16px));
  border:16px solid transparent; padding:6px 10px 8px;
  image-rendering:pixelated;
}
#dlgRow{display:flex; gap:14px; align-items:flex-start;}
#portrait{width:96px; height:96px; flex:none; image-rendering:pixelated; margin-top:2px;}
#portrait.wide{width:180px; height:auto; image-rendering:auto; margin-top:8px;}
#dlgBody{flex:1; min-width:0;}
#dialog .who{font:10px/1 var(--px); color:var(--cyan); margin:2px 0 9px;}
#dlgText{font:23px/1.15 var(--txt); color:var(--soft); min-height:2.3em;}
#dlgHint{font:8px/1 var(--px); color:var(--magenta); text-align:right; margin-top:8px;}
#dlgChoices{margin-top:8px; display:flex; flex-direction:column; gap:2px;}
.choice{
  position:relative; text-align:left; width:100%; font:22px/1.1 var(--txt); color:var(--soft);
  background:transparent; border:0; padding:4px 8px 4px 30px; cursor:pointer;
}
.choice[aria-selected="true"]{background:rgba(46,242,255,.1);}
.choice[aria-selected="true"]::before{
  content:''; position:absolute; left:6px; top:50%; margin-top:-8px; width:16px; height:16px;
  background:var(--tri) center/contain no-repeat; image-rendering:pixelated;
}
#dialog.overPanel{position:fixed; left:50%; top:auto; bottom:18px; transform:translateX(-50%); z-index:40;}
#dialog.overPanel #tail{display:none;}
#tail{display:none;}
#dlgBg{position:absolute; left:-16px; top:-16px; z-index:-1; pointer-events:none; image-rendering:pixelated;}
#panel{position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; background:rgba(7,5,13,.8); padding:16px;}
#pCard{
  width:100%; max-width:540px; max-height:88vh; overflow:auto; background:var(--night);
  border:3px solid var(--cyan); padding:18px 18px 16px;
  box-shadow:0 0 0 3px var(--void), 0 0 0 5px var(--magenta), 0 0 28px 4px rgba(255,46,154,.3);
}
#pCard.wide{max-width:780px;}
.shelf{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px;}
.shelfCol h3{font:11px/1.4 var(--px); color:var(--magenta); margin:0 0 10px;}
.shelfItem{display:flex; gap:10px; align-items:center; width:100%; text-align:left; background:#1b1038; border:2px solid #52277f; color:var(--soft); padding:8px; margin:0 0 8px; cursor:pointer; font:inherit;}
.shelfItem:hover{background:#2a1a5e; border-color:var(--cyan);}
.shelfItem:focus-visible{outline:3px dashed var(--cyan); outline-offset:2px;}
.shelfItem{min-width:0;}
.shelfItem span{min-width:0; overflow-wrap:anywhere;}
.shelfItem img{width:58px; height:70px; object-fit:contain; flex:none; filter:drop-shadow(0 0 6px rgba(255,46,154,.35));}
.shelfItem b{display:block; font:22px/1.05 var(--txt); font-weight:400;}
.shelfItem small{display:block; font:18px/1.1 var(--txt); color:#a99cd0; margin-top:3px;}
.shelfDetail{display:flex; gap:20px; align-items:flex-start;}
.shelfDetail img{height:290px; width:auto; max-width:250px; object-fit:contain; flex:none; filter:drop-shadow(0 0 14px rgba(255,46,154,.4));}
.shelfDetail .by{color:var(--cyan); font-size:23px;}
.shelfNote{margin:14px 0 0; padding:8px 0 8px 14px; border-left:4px solid var(--magenta); color:var(--cream);}
.shelfNote small{display:block; margin-bottom:3px; font:9px/1.4 var(--px); color:var(--magenta); letter-spacing:.04em; text-transform:uppercase;}
@media (max-width:560px){ .shelf{gap:10px;} .shelfDetail{flex-direction:column;} .shelfDetail img{height:230px;} .shelfItem{flex-direction:column; align-items:flex-start; gap:6px; padding:8px 6px;} .shelfItem img{width:58px; height:70px;} .shelfItem b{font-size:19px;} .shelfItem small{font-size:16px;} }
#pTitle{font:12px/1.5 var(--px); color:var(--cyan); margin:0 0 12px;}
#pBody{font:22px/1.2 var(--txt);}
#pBody p{margin:0 0 10px;}
.abTop{display:flex; align-items:center; gap:20px;}
.abImg{flex:none; display:block; width:auto; height:170px; image-rendering:auto;}
.abTop p{margin:0;}
@media (max-width:560px){ .abImg{height:170px;} .abTop{gap:14px;} }
.skH{margin:16px 0 10px; font:12px/1.5 var(--px); color:var(--cyan);}
.skTree{display:grid; grid-template-columns:1fr 1fr; column-gap:16px; justify-items:center; padding:4px 0 6px;}
.skTree ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:center;}
.skRoot{grid-column:1 / 3;}
.skRoot::after,.skCol::before{content:''; display:block; width:4px; height:14px; background:#52277f;}
.skRoot::after{margin-top:0;}
.skFork{grid-column:1 / 3; width:50%; height:0; border-top:4px solid #52277f;}
.skCol::before{order:-1;}
.skNode{display:flex; flex-direction:column; align-items:center; gap:7px; width:100%; max-width:210px;}
.skTile{display:block; height:74px; filter:drop-shadow(0 0 10px rgba(255,46,154,.35));}
.skTile img{display:block; height:100%; width:auto;}
.skRoot .skTile{height:64px;}
.skLabel{font:22px/1.05 var(--txt); color:var(--cream); text-align:center;}
.skStem{width:4px; height:14px; margin:3px 0 4px; background:#52277f;}
.skLabel{white-space:nowrap;}
@media (max-width:560px){ .skLabel{font-size:19px;} .skTile{height:64px;} .skRoot .skTile{height:56px;} }
.pImg{display:block; width:auto; max-width:100%; height:auto; max-height:270px; margin:2px auto 14px;}
.note{color:#a99cd0; font-size:19px;}
#pActions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
#pBody label{display:block; margin-bottom:10px; font:20px/1.1 var(--txt);}
#pBody input,#pBody textarea{
  display:block; width:100%; margin-top:4px; font:22px/1.15 var(--txt); color:var(--soft);
  background:var(--void); border:2px solid #52277f; padding:6px 8px;
}
#pBody a{color:var(--cyan);}
.plist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.plist .btn{width:100%; text-align:left;}
.tapes{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px;}
.tapes .btn{flex-direction:column; text-align:center; padding:12px 8px;}
.tapes .btn img{width:80px; height:56px; object-fit:contain;}
.tapes .btn span{font:23px/1.05 var(--txt); color:var(--soft);}
.tapes .btn[aria-pressed="true"]{background:#52277f; box-shadow: inset -3px -3px 0 rgba(0,0,0,.4), inset 3px 3px 0 rgba(255,255,255,.14), 0 0 0 2px var(--cyan);}
#touch{display:none; width:100%; justify-content:space-between; align-items:center; padding:6px 16px 12px; touch-action:none; user-select:none; -webkit-user-select:none;}
#pageFoot{flex:none; width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px clamp(14px,3vw,30px) calc(10px + env(safe-area-inset-bottom,0px)); font:10px/1.5 var(--px); color:#b9a9d8;}
#pageFoot nav{display:flex; align-items:center; gap:14px;}
#pageFoot a,#pageFoot button{display:block; line-height:0; border-radius:2px; padding:0; margin:0; border:0; background:none; cursor:pointer;}
#pageFoot img{display:block; width:36px; height:36px; image-rendering:pixelated; transition:transform .12s, filter .12s;}
#pageFoot a:hover img,#pageFoot button:hover img{transform:translateY(-2px); filter:brightness(1.25) drop-shadow(0 0 6px rgba(255,46,154,.7));}
#pageFoot a:focus-visible,#pageFoot button:focus-visible{outline:2px solid var(--cyan); outline-offset:3px;}
@media (max-width:480px){ #pageFoot{font-size:8px;} #pageFoot img{width:32px; height:32px;} }
#touch .grp{display:flex; gap:10px;}
#touch .pad{width:58px; height:58px; font:16px/1 var(--px); padding:0; justify-content:center;}
#touch .pad.a{width:78px; font-size:11px;}
@media (pointer:coarse){ #touch{display:flex;} }
#arcade{position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; background:rgba(7,5,13,.985); padding:12px;}
#arcBox{width:min(960px, calc(100vw - 24px), calc((100vh - 150px) * 16 / 9)); display:flex; flex-direction:column; gap:10px;}
#arcCv{display:block; width:100%; aspect-ratio:16 / 9; image-rendering:pixelated; image-rendering:crisp-edges; background:#000; border:3px solid var(--cyan); box-shadow:0 0 0 3px var(--magenta), 0 0 28px 4px rgba(255,46,154,.3); touch-action:none;}
#arcBar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:4px;}
#arcHint{font:20px/1.1 var(--txt); color:#a99cd0;}
#arcTouch{display:none; justify-content:space-between; align-items:center; touch-action:none; user-select:none; -webkit-user-select:none;}
#arcTouch .grp{display:flex; gap:10px;}
#arcTouch .pad{width:64px; height:64px; font:16px/1 var(--px); padding:0; justify-content:center;}
#arcTouch .pad.a{width:96px; font-size:11px;}
@media (pointer:coarse){ #arcTouch{display:flex;} #arcHint{display:none;} }
@media (max-width:640px){
  #hudFace{width:52px; height:52px;}
  #hearts svg{width:30px; height:28px;}
  #hudName{font-size:11px;}
  #portrait{width:72px; height:72px;}
  #portrait.wide{width:116px; height:auto;}
  #dlgText{font-size:20px;}
  .choice{font-size:20px;}
}
@media (prefers-reduced-motion:reduce){ #fade{transition:none;} #hearts svg.pop{animation:none;} }
/* ---------- case study pages: black text on white, a traditional readable layout ---------- */
#cs{--sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; --ink:#111; --mute:#555; --teal:#0a7d8c; --mag:#c21a74;
  position:fixed; left:0; right:0; bottom:0; top:var(--barH,84px); z-index:25; overflow-y:auto; overscroll-behavior:contain;
  background:#fff; color:var(--ink); color-scheme:light; -webkit-font-smoothing:antialiased;
  font:17px/1.65 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; padding-bottom:env(safe-area-inset-bottom,0px);}
#cs *{box-sizing:border-box;}
#cs button{font-family:inherit;}
body.csOn #toast{position:fixed; z-index:40; top:calc(var(--barH,84px) + 72px);}
.csTop{position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:18px; background:#fff; border-bottom:2px solid var(--ink); padding:10px clamp(16px,4vw,40px);}
.csBack{flex:none; display:inline-flex; gap:8px; align-items:center; font:600 12px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink); background:#fff; border:2px solid var(--ink); padding:11px 13px; box-shadow:3px 3px 0 var(--ink); cursor:pointer;}
.csBack:hover{background:#d9fbff; transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink);}
.csBack .short{display:none;}
.csProg{position:relative; flex:1; min-width:0; height:44px;}
.csTrack,.csFill{position:absolute; left:0; bottom:4px; height:6px;}
.csTrack{right:0; background:repeating-linear-gradient(90deg,#c9c9c9 0 6px,transparent 6px 12px);}
.csFill{width:0; background:repeating-linear-gradient(90deg,var(--teal) 0 6px,transparent 6px 12px);}
.csWalk{position:absolute; left:0; bottom:8px; width:27px; height:39px;}
.csTag{flex:none; font:500 12px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--mute);}
#cs a:focus-visible,#cs button:focus-visible{outline:3px solid var(--teal); outline-offset:3px;}
.csWrap{max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,40px) 96px; display:grid; grid-template-columns:minmax(0,1fr); column-gap:64px;}
.csToc{display:none;}
@media (min-width:1040px){
  .csWrap{grid-template-columns:176px minmax(0,1fr);}
  .csToc{display:block; position:sticky; top:96px; align-self:start; margin-top:64px;}
}
.csToc p{margin:0 0 12px; font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mute);}
.csToc button{display:block; width:100%; text-align:left; background:none; border:0; border-left:2px solid #d4d4d4; padding:7px 0 7px 12px; font:500 14px/1.3 var(--sans); color:var(--mute); cursor:pointer;}
.csToc button:hover{color:var(--ink);}
.csToc button.on{color:var(--ink); border-left-color:var(--teal); font-weight:700;}
.csMain{min-width:0;}
.csHero{padding-top:56px;}
.csKick{display:flex; align-items:center; gap:10px; margin:0 0 18px; font:500 12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--teal);}
.csKick::before,.csNum::before{content:''; width:9px; height:9px; background:var(--teal); border:2px solid var(--ink); transform:rotate(45deg); flex:none;}
.csHero h1{margin:0 0 18px; font:700 clamp(34px,5.4vw,58px)/1.04 var(--sans); letter-spacing:-.025em;}
.csLede{margin:0; max-width:640px; font-size:clamp(18px,2.2vw,21px); line-height:1.5; color:#2a2a2a;}
.csMeta{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:36px 0 40px; padding-top:18px; border-top:2px solid var(--ink);}
.csMeta dt{font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-bottom:8px;}
.csMeta dd{margin:0; font-size:15px; line-height:1.4; font-weight:500;}
.csFig{margin:0;}
.csPh{display:flex; align-items:center; justify-content:center; width:100%; border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink);
  background:conic-gradient(#f1f1f1 25%,#fff 0 50%,#f1f1f1 0 75%,#fff 0) 0 0/24px 24px;}
.csPh span{background:#fff; border:2px solid var(--ink); padding:7px 10px; font:500 12px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase;}
.csFig figcaption{margin-top:16px; font:400 12px/1.5 var(--mono); color:var(--mute);}
.csStats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:56px 0 0;}
.csStat{border:2px solid var(--ink); padding:20px 18px; box-shadow:5px 5px 0 var(--teal);}
.csStat b{display:block; font:700 clamp(30px,4vw,42px)/1 var(--sans); letter-spacing:-.02em; margin-bottom:10px;}
.csStat span{font-size:14px; line-height:1.4; color:#2a2a2a;}
.csSec{margin-top:80px; scroll-margin-top:96px;}
.csSec h2{display:flex; align-items:baseline; gap:14px; margin:0 0 22px; padding-top:20px; border-top:2px solid var(--ink); font:700 clamp(26px,3.4vw,34px)/1.15 var(--sans); letter-spacing:-.015em;}
.csNum{display:inline-flex; align-items:center; gap:8px; font:500 13px/1 var(--mono); letter-spacing:.04em; color:var(--teal);}
.csNum::before{width:7px; height:7px;}
.csSec p{max-width:680px; margin:0 0 18px;}
.csSteps{list-style:none; max-width:680px; margin:26px 0; padding:0; display:flex; flex-direction:column; gap:16px;}
.csSteps li{position:relative; padding-left:30px;}
.csSteps li::before{content:''; position:absolute; left:3px; top:.55em; width:9px; height:9px; background:#fff; border:2px solid var(--ink); transform:rotate(45deg);}
.csSteps b{font-weight:700;}
.csQuote{max-width:680px; margin:34px 0; padding:2px 0 2px 22px; border-left:4px solid var(--mag);}
.csQuote p{margin:0 0 10px; font-size:clamp(20px,2.6vw,25px); line-height:1.4; font-weight:500; letter-spacing:-.01em;}
.csQuote cite{font:400 12px/1.4 var(--mono); font-style:normal; color:var(--mute);}
.csSec .csFig{margin:34px 0;}
.csGrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin:34px 0;}
.csGrid .csFig{margin:0;}
.csNext{margin-top:96px; padding-top:22px; border-top:2px solid var(--ink); display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; justify-content:space-between;}
.csNext small{display:block; margin-bottom:10px; font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mute);}
.csNextBtns{display:flex; flex-wrap:wrap; gap:14px;}
.csNext strong{font:700 clamp(24px,3.4vw,34px)/1.1 var(--sans); letter-spacing:-.015em;}
.csNext em{margin-left:12px; font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; font-style:normal; color:var(--mag); border:2px solid var(--mag); padding:5px 7px; vertical-align:middle;}
@media (max-width:720px){
  .csMeta{grid-template-columns:repeat(2,minmax(0,1fr));}
  .csStats{grid-template-columns:1fr;}
  .csGrid{grid-template-columns:1fr;}
  .csTag{display:none;}
}
.csTbl{width:100%; max-width:860px; margin:28px 0; border-collapse:collapse; border:2px solid var(--ink); font-size:16px; line-height:1.5; box-shadow:5px 5px 0 var(--teal);}
.csTbl th{padding:12px 16px; text-align:left; background:var(--ink); color:#fff; font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;}
.csTbl td{padding:14px 16px; vertical-align:top; border-top:2px solid var(--ink);}
.csTbl td:first-child{width:38%; font-weight:600; border-right:2px solid var(--ink);}
.csRes{list-style:none; max-width:760px; margin:28px 0; padding:0;}
.csRes li{display:flex; align-items:baseline; gap:24px; padding:16px 0; border-top:2px solid var(--ink);}
.csRes li:last-child{border-bottom:2px solid var(--ink);}
.csRes b{flex:none; min-width:116px; font:700 clamp(30px,4.4vw,44px)/1 var(--sans); letter-spacing:-.02em;}
.csRes span{font-size:18px; line-height:1.45;}
.csRes b.dot::before{content:''; display:block; width:12px; height:12px; margin:12px 0 0 12px; background:#fff; border:3px solid var(--teal); transform:rotate(45deg);}
.csStages{display:grid; grid-template-columns:minmax(0,1fr); gap:60px; margin:40px 0;}
.csNarrow{max-width:620px; margin-left:auto; margin-right:auto;}
.csBare .csImg{border:0; box-shadow:none; background:transparent;}
.csPad .csImg{padding:26px; box-sizing:border-box;}
.csStack{display:flex; flex-direction:column; gap:36px;}
.csImg{display:block; width:100%; height:auto; background:#fff; border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink);}
.csChaps{display:flex; flex-direction:column; gap:64px; margin:36px 0;}
.csChap small{display:block; margin:0 0 8px; font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--teal);}
.csChap h3{margin:0 0 12px; font:700 22px/1.25 var(--sans);}
.csChap p{max-width:680px; margin:0 0 14px;}
.csChap .csSteps{margin:16px 0 0;}
.csChap .csFig{margin:26px 0 0;}
.csStage small{display:block; margin:18px 0 6px; font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--teal);}
.csStage h3{margin:0 0 4px; font:700 19px/1.25 var(--sans);}
.csSec .csStage p{margin:0; max-width:none; font-size:15px; line-height:1.5; color:#2a2a2a;}
@media (max-width:720px){
  .csRes li{flex-direction:column; gap:6px;}
  .csTbl,.csTbl tbody,.csTbl tr,.csTbl td{display:block; width:100%;}
  .csTbl thead{display:none;}
  .csTbl td:first-child{width:100%; border-right:0; background:#f3f3f3;}
}
@media (max-width:480px){ .csBack .long{display:none;} .csBack .short{display:inline;} }