:root{--ink:#193d3e;--muted:#4a6260;--paper:#fbfaf5;--green:#214e43;--line:#dce2d7;--accent:#e38363;font-family:Arial,Helvetica,sans-serif;color:var(--ink);font-synthesis:none;font-weight:400;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:#dce6cc}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.6}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #c85d36;outline-offset:5px}button{border:0}button:active{filter:brightness(.96)}[hidden]{display:none!important}#game,#scene{position:fixed;inset:0}#scene{outline:none;touch-action:none}#scene:focus-visible{outline:3px solid #557c68;outline-offset:-4px}canvas{display:block;width:100%;height:100%}.back-button{position:fixed;top:max(26px,env(safe-area-inset-top));left:max(28px,env(safe-area-inset-left));display:flex;align-items:center;gap:11px;min-height:46px;padding:10px 18px;background:rgba(251,250,245,.96);color:var(--ink);border-radius:50px;font-size:14px;font-weight:600;z-index:5;box-shadow:0 2px 7px #173d3020}.back-button span{font-size:21px;font-weight:400}.back-button:hover{background:#fff}.welcome{position:absolute;left:7vw;top:50%;transform:translateY(-42%);max-width:440px;z-index:2;pointer-events:none}.welcome>*{pointer-events:auto}.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:700;line-height:1.6}.welcome .eyebrow{font-size:10px;letter-spacing:.15em;margin-bottom:22px}h1,h2,p{margin-top:0}.welcome h1{font-size:clamp(46px,5.4vw,84px);line-height:1.01;letter-spacing:-.064em;font-weight:600;margin-bottom:24px}.welcome>p:not(.eyebrow){font-size:17px;line-height:1.6;color:#34564c;margin-bottom:28px}.primary{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:48px;border-radius:40px;padding:15px 24px;background:var(--green);color:#fff;font-size:14px;font-weight:600;transition:background .16s}.primary:hover{background:#12382e}.primary>span{font-size:23px;font-weight:400}.welcome-controls{display:flex;flex-direction:column;gap:8px;margin-top:24px;font-size:12px;color:#36584e}.welcome-controls kbd{margin-right:4px}kbd{font-family:inherit;font-size:12px;padding:4px 6px;border:1px solid #6b806e65;border-radius:5px;display:inline-block;background:#fff9;color:var(--ink);line-height:1.15;white-space:nowrap}.text-button{padding:12px 0;margin-top:12px;background:transparent;border-radius:0;font-size:12px;color:#214e43;text-decoration:underline;text-underline-offset:4px}.route-hint{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);display:flex;gap:9px;align-items:center;padding:13px 19px;background:#fbfaf5ec;border-radius:30px;font-size:12px;white-space:nowrap;box-shadow:0 3px 16px #153b3010}.route-hint>span{color:#879688;margin:0 4px}.interact{position:fixed;left:50%;bottom:36px;transform:translateX(-50%);background:var(--paper);color:var(--ink);border-radius:18px;min-width:275px;text-align:left;padding:16px 20px;box-shadow:0 5px 30px #173d3026;border:1px solid #fff;z-index:4}.interact:hover{background:#fff}.stop-caption{display:block;font-size:9px;letter-spacing:.14em;font-weight:700;margin-bottom:9px;color:#5e7364}#interact-label{font-size:15px;font-weight:600;display:flex;gap:30px;align-items:center;justify-content:space-between}#notice{position:fixed;bottom:110px;width:min(90%,420px);left:50%;transform:translateX(-50%);text-align:center;background:#fbfaf5ed;padding:12px 20px;border-radius:25px;font-size:13px;pointer-events:none;opacity:0;transition:opacity .18s}#notice.visible{opacity:1}#touch-controls{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:24px;right:24px;display:flex;justify-content:space-between;pointer-events:none;z-index:3}#touch-controls>div{display:flex;gap:9px;pointer-events:auto}#touch-controls button{height:53px;min-width:53px;padding:0 15px;border-radius:50px;background:#fbfaf5ed;color:var(--ink);border:1px solid #fff9;box-shadow:0 2px 10px #173d301a;font-weight:600;touch-action:none;user-select:none}#touch-controls button.pressed{background:var(--green);color:white}#failure{position:absolute;inset:25% 10%;max-width:550px;z-index:7;background:var(--paper);padding:40px;border-radius:20px}#failure h1{font-size:30px}#failure p{line-height:1.6}#portfolio{position:relative;min-height:100vh;background:var(--paper);padding:30px 5vw 70px;z-index:10}.mockup-top{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px;color:var(--muted);max-width:1200px;margin:auto auto 30px}#portfolio img{display:block;width:min(100%,1200px);margin:auto;height:auto}.mockup-note{font-size:14px;color:var(--muted);text-align:center;line-height:1.6;margin:24px auto;max-width:640px}dialog{color:var(--ink);border:0;background:var(--paper)}dialog::backdrop{background:#183b3666;backdrop-filter:blur(5px)}#reader{position:fixed;inset:0 0 0 auto;width:min(100%,1060px);max-width:100%;height:100dvh;max-height:100dvh;margin:0;overflow-y:auto;overscroll-behavior:contain;padding:0;scroll-behavior:smooth;scroll-padding-top:100px;border-radius:0;box-shadow:-20px 0 70px #153a3026}#reader[open]{animation:reader-in .3s ease-out}.reader-top{display:flex;justify-content:space-between;align-items:center;background:#fbfaf5f5;position:sticky;top:0;z-index:3;padding:24px 30px;min-height:94px;border-bottom:1px solid #dce2d744}.reader-top .back-button{position:static;box-shadow:none;padding-left:0;background:transparent}.close-button{display:inline-flex;gap:20px;align-items:center;min-height:44px;background:transparent;color:var(--ink);font-size:13px;font-weight:600}.close-button span{font-size:28px;font-weight:400}article{padding:28px clamp(26px,7vw,100px) 80px}.case-header{padding:25px 0 36px}.case-header .eyebrow{margin-bottom:24px;color:#5d7066}.case-header h1{font-size:clamp(40px,5vw,62px);font-weight:600;letter-spacing:-.05em;line-height:1.06;margin-bottom:25px}.case-deck{font-size:19px;line-height:1.6;max-width:560px;color:var(--muted)}.case-meta{display:flex;gap:40px;border-top:1px solid var(--line);padding-top:23px;margin-top:35px}.case-meta span{font-size:11px;color:var(--muted);line-height:1.6}.case-meta strong{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-top:5px}.route-diagram{margin:0;background:#e9eddc;border-radius:8px;overflow:hidden}.route-diagram svg{display:block;width:100%;height:auto}.river{stroke:#9ccfc7;stroke-width:40;fill:none}.track{stroke:#fbfaf2;stroke-width:20;fill:none;stroke-linecap:round}.bridge{stroke:#af8261;stroke-width:23}.map-dot{fill:#dc775a;stroke:#fff;stroke-width:4}.map-label{font-family:Arial,sans-serif;font-size:12px;letter-spacing:1px;fill:#294c43}.route-diagram figcaption{font-size:12px;padding:0 22px 22px;color:#4a6259}.case-sections{display:flex;gap:25px;margin:34px 0 65px;padding-bottom:18px;border-bottom:1px solid var(--line)}.case-sections a{font-size:13px;color:var(--ink);text-decoration:none;min-height:30px;padding-top:6px}.case-sections a:hover{text-decoration:underline}article section{margin-bottom:70px;scroll-margin-top:115px}article h2{font-size:31px;letter-spacing:-.035em;line-height:1.17;font-weight:600;margin:14px 0 25px}article section>p,details p{font-size:17px;line-height:1.7;max-width:65ch;color:#3c5350}article section>.eyebrow{font-size:10px;line-height:1.5;color:#5d7066}.case-note{border-left:3px solid #ce9b6a;padding:16px 22px;background:#f0eddf;font-size:14px;line-height:1.6;margin-top:30px;color:#4c584d}details{border-top:1px solid var(--line);padding:23px 0}details:last-of-type{border-bottom:1px solid var(--line)}summary{font-weight:600;font-size:17px;cursor:pointer;line-height:1.5;list-style:none;display:flex;align-items:baseline;gap:20px}summary:after{content:'+';margin-left:auto;font-size:23px;font-weight:400}details[open] summary:after{content:'−'}summary span{font-size:11px;color:#708274}details p{font-size:16px;margin:20px 0 0;padding-left:36px}.decision-tradeoff{color:#596f62!important;font-size:14px!important}.next-list{padding-left:21px;color:#3c5350;font-size:16px;line-height:1.7}.next-list li{padding-bottom:9px}.case-footer{border-top:1px solid var(--line);padding-top:36px;display:flex;justify-content:space-between;align-items:center;gap:24px}.case-footer p{margin:0;font-size:17px}#help{border-radius:20px;max-width:min(92%,500px);padding:38px;box-shadow:0 10px 80px #133a3033}#help>.close-button{position:absolute;right:25px;top:15px;font-size:27px}#help h2{font-size:28px;letter-spacing:-.04em;margin:14px 0 26px}#help dl{margin-bottom:25px}#help dl div{display:flex;gap:18px;justify-content:space-between;align-items:center;margin:13px 0}#help dt{flex:0 0 150px;font-size:12px}#help dd{margin:0;font-size:14px}#help p:not(.eyebrow){font-size:14px;line-height:1.6;color:var(--muted)}.check{display:flex;align-items:center;gap:11px;font-size:14px;margin:23px 0}.check input{width:18px;height:18px;accent-color:var(--green)}.no-script{position:fixed;inset:20%;background:var(--paper);padding:40px;z-index:20}@keyframes reader-in{from{opacity:.5;transform:translateX(40px)}to{opacity:1;transform:none}}@media(max-width:700px){.back-button{top:18px;left:18px;min-height:44px;font-size:12px;padding:8px 14px}.welcome{left:25px;top:auto;bottom:33px;transform:none;max-width:320px}.welcome h1{font-size:49px;letter-spacing:-.06em}.welcome .eyebrow{font-size:8px;margin-bottom:16px}.welcome>p:not(.eyebrow){font-size:15px;margin-bottom:19px}.welcome-controls{font-size:11px;margin-top:18px}.welcome .text-button{font-size:11px}.welcome-controls span:last-child{display:none}.route-hint{bottom:95px;font-size:10px;gap:4px;padding:10px 13px;max-width:95%;white-space:normal}.route-hint kbd{font-size:10px}.route-hint>span{margin:0 1px}.interact{bottom:96px;min-width:260px;padding:14px 17px}#touch-controls{left:16px;right:16px;bottom:20px}#touch-controls button{height:48px;min-width:48px;font-size:12px;padding:0 13px}#notice{bottom:167px;font-size:12px}.reader-top{padding:14px 20px;min-height:75px}.reader-top .back-button{font-size:11px}.close-button{font-size:11px;gap:10px}article{padding:15px 25px 45px}.case-header{padding-top:18px}.case-header h1{font-size:43px}.case-deck{font-size:17px}.case-meta{gap:18px}.case-meta span{font-size:10px}.case-meta strong{font-size:11px}.case-sections{gap:18px;margin:23px 0 45px;flex-wrap:wrap}.case-sections a{font-size:12px}article h2{font-size:28px}article section>p{font-size:16px}article section{margin-bottom:50px}summary{font-size:16px;gap:13px}details p{padding-left:26px;font-size:15px}.case-footer{display:block}.case-footer p{margin-bottom:22px}.mockup-top{align-items:flex-start;font-size:11px}.mockup-top .primary{font-size:12px;min-height:44px;padding:12px 18px}.mockup-note{font-size:12px}#help{padding:30px 24px}#help dt{flex:0 0 130px}#help dd{font-size:12px}#help h2{font-size:25px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
#reader{width:100%;max-width:100%}#reader article{max-width:1000px;margin:0 auto}.reader-top{padding-left:28px;padding-right:28px}.reader-top .back-button{min-height:46px;padding:10px 18px;margin-left:-18px}#help .back-button{position:fixed;top:26px;left:28px}@media(max-width:700px){.reader-top{padding-left:18px;padding-right:18px}.reader-top .back-button{min-height:44px}#help .back-button{top:18px;left:18px}}
.skip-read{position:fixed;left:24px;top:-90px;z-index:25;background:var(--paper);color:var(--ink);padding:14px 20px;border-radius:8px}.skip-read:focus{top:90px}#touch-controls>#touch-help{pointer-events:auto;align-self:center;width:44px;min-width:44px;padding:0;height:44px}.help-actions{display:flex;flex-wrap:wrap;gap:0 20px;margin:0 0 24px}.help-actions .text-button{margin-top:0;padding:12px 0}html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}:root{font-synthesis:weight style;-webkit-font-smoothing:antialiased}article p{text-wrap:pretty}article h1,article h2{text-wrap:balance}@media(max-height:580px){.welcome{top:96px;bottom:14px;transform:none;overflow:auto;max-width:400px;padding-right:18px}.welcome h1{font-size:40px}.welcome>p:not(.eyebrow){font-size:14px;margin-bottom:15px}.welcome .eyebrow{margin-bottom:14px}.welcome-controls{margin-top:12px}.welcome .text-button{margin-top:6px}}
@media(max-width:360px){.case-header h1{font-size:36px;line-height:1.14}.reader-top .back-button,.close-button{font-size:12px}.reader-top{padding-left:14px;padding-right:14px}.close-button{gap:8px}.case-meta{gap:14px}}
.reader-top .back-button{margin-left:0;padding:10px 18px;background:var(--paper)}@media(max-width:700px){.reader-top{padding-left:18px;padding-right:18px}.reader-top .back-button{padding:8px 14px}}

/* One tactile mode control, in the same corner throughout the experience. */
.mobile-play-note {display:none;}
.mode-switch {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  gap:10px;
  min-height:48px;
  padding:8px 14px;
  border:1px solid #d2dac9;
  border-radius:12px;
  background:#fbfaf5;
  color:var(--ink);
  box-shadow:0 2px 5px #193d3e12;
  font-size:12px;
  font-weight:600;
}
.mode-switch:hover {background:#fffdf6;border-color:#9caf9c;}
.mode-track {
  position:relative;
  display:block;
  width:46px;
  height:26px;
  flex:none;
  border-radius:7px;
  background:#d7dfcf;
  box-shadow:inset 0 2px 3px #1c433325;
  transition:background .18s ease;
}
.mode-thumb {
  position:absolute;
  left:3px;
  top:3px;
  width:20px;
  height:20px;
  border:1px solid #fff;
  border-radius:4px;
  background:linear-gradient(#fffdf5,#e8e5da);
  box-shadow:0 1px 3px #163f3345;
  transition:transform .18s ease;
}
.mode-thumb::after {content:'';position:absolute;inset:5px 7px;border-left:1px solid #b9c0b3;border-right:1px solid #b9c0b3;}
.mode-switch[aria-checked=true] .mode-track {background:#355d4e;}
.mode-switch[aria-checked=true] .mode-thumb {transform:translateX(20px);}
.mode-switch[aria-checked=true] .mode-portfolio,
.mode-switch[aria-checked=false] .mode-play {color:#5a6e64;font-weight:400;}
#back,#help-back {position:fixed;z-index:5;top:max(26px,env(safe-area-inset-top));left:max(28px,env(safe-area-inset-left));}
.mockup-top {max-width:none;align-items:center;}
#portfolio {padding-top:26px;padding-left:28px;padding-right:28px;}
.welcome {max-width:540px;}
.welcome h1 {font-size:clamp(40px,4.25vw,64px);line-height:1.08;letter-spacing:-.052em;}
@media(max-width:700px) {
  .welcome>p.mobile-play-note {display:block;position:fixed;top:82px;left:18px;right:18px;max-width:340px;margin:0;padding:12px 14px;background:#fbfaf5ec;border:1px solid #d2dac9;border-radius:10px;font-size:12px;line-height:1.55;color:var(--ink);}
  .mobile-play-note span {color:var(--muted);}
  #back,#help-back {top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));}
  #portfolio {padding-top:18px;padding-left:18px;padding-right:18px;}
  .mode-switch {gap:8px;padding:7px 10px;min-height:44px;font-size:11px;}
  .mode-track {width:44px;height:26px;}
  .mode-switch[aria-checked=true] .mode-thumb {transform:translateX(18px);}
  .welcome {left:25px;right:25px;max-width:480px;}
  .welcome h1 {font-size:clamp(32px,6.8vw,47px);}
  .reader-top {gap:10px;}
  .mockup-top {gap:14px;}
  .mockup-top>span {text-align:right;font-size:10px;max-width:130px;line-height:1.5;}
}
@media(max-width:360px) {
  .reader-top {padding-left:12px;padding-right:12px;gap:8px;}
  .reader-top .mode-switch {gap:6px;padding:7px 8px;}
  .close-button {gap:6px;font-size:11px;}
}
@media(max-height:580px) {
  .welcome>p.mobile-play-note {position:static;margin:0 0 20px;}
  .welcome {max-width:440px;}
  .welcome h1 {font-size:36px;}
}