/* ============================================================
   road-to-chat · style.css
   Aesthetic brief: looks like somebody's notebook. Nothing is
   perfectly aligned, every box is drawn slightly wrong, and the
   ink doubles up in the corners like a biro pressed too hard.
   ============================================================ */

:root{
  --paper:#f4efe2;
  --paper-2:#efe8d8;
  --ink:#25333d;
  --ink-2:#55666f;
  --pencil:#9c968a;
  --red:#c9453c;
  --blue:#2e6da4;
  --water:#2f9fc4;
  --water-2:#8fd9ea;
  --water-3:#d9f1f7;
  --yellow:#ffdf6b;
  --green:#4e9268;
  --rule:rgba(37,51,61,.16);

  --hand:'Kalam', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
  --hand-title:'Caveat', 'Segoe Script', 'Bradley Hand', 'Comic Sans MS', cursive;
  --hand-ui:'Patrick Hand', 'Segoe Print', 'Comic Sans MS', cursive;

  --wob: 14px 240px 18px 255px / 250px 16px 240px 20px;
  --wob-2: 225px 15px 255px 18px / 18px 250px 14px 240px;
  --wob-3: 8px 130px 10px 140px / 140px 9px 130px 11px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--hand);
  font-weight:400;
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
  background-image:
    linear-gradient(rgba(37,51,61,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,51,61,.03) 1px, transparent 1px),
    radial-gradient(ellipse at 12% 8%, rgba(201,69,60,.05), transparent 45%),
    radial-gradient(ellipse at 88% 72%, rgba(47,159,196,.07), transparent 50%);
  background-size:28px 28px, 28px 28px, 100% 100%, 100% 100%;
}

.defs{position:absolute;width:0;height:0;overflow:hidden}

/* paper grain */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:55;
  opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='.45'/%3E%3C/svg%3E");
}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}

/* ---------- ink helpers ---------- */
.ink-box{
  border:2.5px solid var(--ink);
  border-radius:var(--wob);
  background:var(--paper-2);
  box-shadow:2px 3px 0 rgba(37,51,61,.14), 5px 7px 0 rgba(37,51,61,.05);
}

mark.hl{
  background:linear-gradient(100deg, rgba(255,223,107,0) 2%, rgba(255,223,107,.9) 6%, rgba(255,223,107,.75) 92%, rgba(255,223,107,0) 98%);
  color:inherit;padding:0 .12em;border-radius:.4em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

.muted{color:var(--ink-2)}

.tape{
  position:absolute;width:118px;height:34px;
  background:rgba(255,223,107,.5);
  border-left:1px dashed rgba(255,255,255,.6);border-right:1px dashed rgba(255,255,255,.6);
  box-shadow:0 2px 5px rgba(37,51,61,.12);
}
.tape-a{top:-14px;left:9%;transform:rotate(-6deg)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:18px;
  padding:9px 22px;
  background:rgba(244,239,226,.93);
  backdrop-filter:blur(6px);
  border-bottom:2.5px solid var(--ink);
  box-shadow:0 3px 0 rgba(37,51,61,.07);
}
.nav-brand{
  font-family:var(--hand-title);font-size:1.45rem;font-weight:700;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  transform:rotate(-1.2deg);
}
.nav-links{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex:1;flex-wrap:wrap}
.nav-links a{
  font-family:var(--hand-ui);font-size:1.02rem;color:var(--ink-2);
  text-decoration:none;padding:3px 9px;border-radius:var(--wob-3);
  border:2px solid transparent;transition:.16s;
}
.nav-links a:hover,.nav-links a.on{color:var(--ink);border-color:var(--ink);background:rgba(255,223,107,.42)}
.nav-links a:nth-child(odd){transform:rotate(-.5deg)}

.nav-tally{
  display:flex;align-items:center;gap:7px;
  font-family:var(--hand-ui);font-size:1rem;
  background:var(--water-3);border:2.5px solid var(--water);
  border-radius:var(--wob-3);padding:4px 12px;cursor:pointer;color:var(--ink);
  transform:rotate(.8deg);transition:.16s;
}
.nav-tally:hover{transform:rotate(-1deg) scale(1.04)}
.nav-tally.pulse{animation:tallyPop .5s ease}
@keyframes tallyPop{0%{transform:scale(1) rotate(.8deg)}40%{transform:scale(1.18) rotate(-2deg);background:var(--water-2)}100%{transform:scale(1) rotate(.8deg)}}
.drop-mini{
  width:11px;height:14px;background:var(--water);
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  clip-path:polygon(50% 0,100% 62%,80% 100%,20% 100%,0 62%);
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(-3px) scale(1.06)}}

/* ---------- hero ---------- */
.hero{position:relative;padding:70px 24px 48px;text-align:center;overflow:hidden}
.hero-inner{max-width:860px;margin:0 auto;position:relative;z-index:4}
.kicker{
  font-family:var(--hand-ui);color:var(--red);letter-spacing:.04em;
  transform:rotate(-1.4deg);display:inline-block;margin:0 0 6px;
  border-bottom:2px dashed rgba(201,69,60,.4);padding-bottom:2px;
}
.hero-title{
  font-family:var(--hand-title);font-weight:700;
  font-size:clamp(3.1rem,11vw,7.2rem);line-height:.84;margin:6px 0 20px;
  display:flex;flex-direction:column;align-items:center;
}
.hero-title .l1{transform:rotate(-2.2deg)}
.hero-title .l2{
  transform:rotate(1.1deg);color:var(--water);
  position:relative;
}
.hero-title .l2::after{
  content:'';position:absolute;left:2%;right:2%;bottom:.1em;height:9px;
  background:var(--water-2);opacity:.55;border-radius:50%;
  transform:rotate(-.6deg) scaleX(.98);
}
.hero-sub{font-size:1.22rem;max-width:640px;margin:0 auto 8px;color:var(--ink)}

.hero-scribble{display:flex;align-items:center;justify-content:center;gap:4px;margin:12px 0 26px}
.arrow-doodle{width:150px;height:52px;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;fill:none;opacity:.8}
.arrow-doodle path{stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1.6s .5s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.scribble-note{font-family:var(--hand-title);font-size:1.3rem;color:var(--red);transform:rotate(-2deg)}

.hero-stats{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin-top:14px;position:relative;
}
.hstat{
  border:2.5px solid var(--ink);border-radius:var(--wob-2);
  padding:10px 20px;background:var(--paper-2);min-width:150px;
  box-shadow:3px 4px 0 rgba(37,51,61,.12);
}
.hstat:nth-child(1){transform:rotate(-1.6deg)}
.hstat:nth-child(2){transform:rotate(1.2deg);border-color:var(--water);background:var(--water-3)}
.hstat:nth-child(3){transform:rotate(-.7deg)}
.hstat b{display:block;font-family:var(--hand-title);font-size:2.5rem;line-height:1}
.hstat span{font-family:var(--hand-ui);font-size:.95rem;color:var(--ink-2)}
.hstat-cap{flex-basis:100%;font-family:var(--hand-title);font-size:1.22rem;color:var(--ink-2);margin:12px 0 0}

.scroll-hint{margin-top:34px;font-family:var(--hand-ui);color:var(--pencil);font-size:.95rem}
.scroll-hint i{display:block;width:2px;height:32px;margin:6px auto 0;background:var(--pencil);animation:drip 1.8s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}60%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- section scaffolding ---------- */
.sec{max-width:1180px;margin:0 auto;padding:72px 24px 60px;position:relative;z-index:4}
.sec + .sec{border-top:2.5px dashed var(--rule)}
.sec-head{margin-bottom:34px;position:relative}
.sec-num{
  font-family:var(--hand-title);font-size:3.6rem;color:var(--red);
  opacity:.5;display:block;line-height:.7;transform:rotate(-4deg);
}
.sec-head h2{
  font-family:var(--hand-title);font-size:clamp(2.1rem,5vw,3.4rem);
  margin:6px 0 4px;font-weight:700;line-height:1.02;transform:rotate(-.7deg);
}
.sec-lede{font-size:1.12rem;color:var(--ink-2);max-width:640px;margin:0}

.btn{
  font-family:var(--hand-ui);font-size:1.04rem;cursor:pointer;
  border:2.5px solid var(--ink);border-radius:var(--wob-3);
  padding:7px 17px;background:var(--paper-2);color:var(--ink);
  box-shadow:2px 3px 0 rgba(37,51,61,.2);transition:.13s;
}
.btn:hover{transform:translate(-1px,-2px) rotate(-.8deg);box-shadow:3px 5px 0 rgba(37,51,61,.22)}
.btn:active{transform:translate(1px,2px);box-shadow:0 1px 0 rgba(37,51,61,.2)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ghost{background:transparent}

/* ---------- 01 send ---------- */
.send-wrap{display:grid;grid-template-columns:minmax(290px,360px) 1fr;gap:42px;align-items:start}

.phone{
  position:relative;background:var(--ink);border-radius:34px;padding:11px 9px 14px;
  width:100%;max-width:352px;
  box-shadow:6px 9px 0 rgba(37,51,61,.16), 0 0 0 2.5px var(--ink);
  transform:rotate(-1.4deg);
}
.phone.buzz{animation:buzz .42s}
@keyframes buzz{0%,100%{transform:rotate(-1.4deg)}20%{transform:rotate(-3.4deg) translateX(-4px)}45%{transform:rotate(.8deg) translateX(5px)}70%{transform:rotate(-2.4deg) translateX(-2px)}}
.phone-notch{width:96px;height:7px;background:#0f171c;border-radius:9px;margin:0 auto 9px}
.phone-screen{background:var(--paper);border-radius:24px;padding:12px;min-height:440px;display:flex;flex-direction:column}
.chat-head{display:flex;gap:10px;align-items:center;border-bottom:2px solid var(--rule);padding-bottom:9px}
.avatar{
  width:38px;height:38px;display:grid;place-items:center;
  background:var(--water-2);border:2.5px solid var(--ink);border-radius:50% 46% 52% 48%;
  font-family:var(--hand-title);font-size:1.15rem;
}
.chat-head b{font-family:var(--hand-ui);display:block;line-height:1.1}
.chat-head i{font-size:.82rem;color:var(--green);font-style:normal;font-family:var(--hand-ui)}

.chat-log{flex:1;overflow-y:auto;max-height:330px;padding:12px 2px;display:flex;flex-direction:column;gap:10px}
.bubble{
  font-size:.98rem;padding:8px 13px;max-width:88%;
  border:2.5px solid var(--ink);border-radius:var(--wob-3);line-height:1.45;
  animation:pop .3s ease backwards;
}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(8px)}}
.bubble.me{align-self:flex-end;background:var(--yellow);transform:rotate(.8deg)}
.bubble.bot{align-self:flex-start;background:var(--paper-2);transform:rotate(-.7deg)}
.bubble .cost{display:block;margin-top:5px;font-family:var(--hand-ui);font-size:.76rem;color:var(--ink-2);border-top:1.5px dashed var(--rule);padding-top:3px}

.chat-typing{display:flex;gap:5px;padding:6px 14px}
.chat-typing i{width:8px;height:8px;background:var(--ink-2);border-radius:50%;animation:dots 1.1s infinite}
.chat-typing i:nth-child(2){animation-delay:.18s}
.chat-typing i:nth-child(3){animation-delay:.36s}
@keyframes dots{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}

.chat-input{display:flex;gap:8px;border-top:2px solid var(--rule);padding-top:10px}
.chat-input input{
  flex:1;font-family:var(--hand);font-size:1rem;padding:8px 12px;color:var(--ink);
  background:var(--paper-2);border:2.5px solid var(--ink);border-radius:var(--wob-3);
}
.chat-input input:focus{outline:none;background:#fff;box-shadow:0 0 0 3px rgba(47,159,196,.3)}
.chat-input button{
  width:46px;background:var(--water);border:2.5px solid var(--ink);
  border-radius:var(--wob-3);cursor:pointer;display:grid;place-items:center;transition:.14s;
}
.chat-input button svg{width:22px;fill:var(--paper)}
.chat-input button:hover{background:var(--ink)}
.chat-input button:disabled{opacity:.45;cursor:not-allowed}

.send-side{display:flex;flex-direction:column;gap:22px}
.sticky-note{
  background:var(--yellow);padding:16px 18px;font-size:1rem;
  box-shadow:3px 5px 0 rgba(37,51,61,.14);transform:rotate(1.1deg);
  border-radius:2px 14px 3px 12px;position:relative;
}
.sticky-note::before{
  content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-4deg);
  width:78px;height:20px;background:rgba(255,255,255,.45);
}
.sticky-note p{margin:0 0 8px}
.sticky-note p:last-child{margin:0}
.note-pink{background:#ffc9c4;transform:rotate(-1.3deg)}
.sticky-note.big{font-size:1.04rem;max-width:420px}
.sticky-note h4{font-family:var(--hand-title);font-size:1.5rem;margin:0 0 6px}

.presets-label{font-family:var(--hand-title);font-size:1.25rem;margin:0 0 8px;color:var(--ink-2)}
.preset{
  font-family:var(--hand-ui);font-size:.96rem;cursor:pointer;margin:0 7px 8px 0;
  background:var(--paper-2);border:2.5px dashed var(--ink);border-radius:var(--wob-3);
  padding:5px 13px;color:var(--ink);transition:.15s;
}
.preset:hover{background:var(--water-3);border-style:solid;transform:rotate(-1.4deg) scale(1.04)}

.token-preview{border:2.5px solid var(--ink);border-radius:var(--wob);padding:14px 17px;background:var(--paper-2);transform:rotate(-.5deg)}
.tp-label{font-family:var(--hand-title);font-size:1.2rem;margin:0 0 8px;color:var(--ink-2)}
.tp-chips{display:flex;flex-wrap:wrap;gap:4px}
.tok{
  font-family:var(--hand-ui);font-size:.86rem;padding:1px 7px;
  border:2px solid var(--ink);border-radius:6px;background:#fff;
  animation:pop .22s backwards;white-space:pre;
}
.tok:nth-child(3n){background:var(--water-3)}
.tok:nth-child(4n){background:var(--yellow);opacity:.85}
.tok:nth-child(5n){transform:rotate(-2deg)}
.tp-count{font-family:var(--hand-ui);font-size:.95rem;margin:10px 0 0;color:var(--ink-2)}

/* ---------- 02 road ---------- */
.road-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px}
.play-ico{display:inline-block;transition:.2s}
.playing .play-ico{transform:scale(.9)}
.speed{font-family:var(--hand-ui);display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--ink-2)}
.speed b{min-width:38px;font-family:var(--hand-title);font-size:1.2rem;color:var(--ink)}

input[type=range]{
  -webkit-appearance:none;appearance:none;height:8px;width:170px;cursor:pointer;
  background:var(--paper-2);border:2.5px solid var(--ink);border-radius:20px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;background:var(--water);
  border:2.5px solid var(--ink);border-radius:52% 48% 46% 54%;cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;background:var(--water);
  border:2.5px solid var(--ink);border-radius:52% 48% 46% 54%;cursor:grab;
}

.road-frame{position:relative;border:2.5px solid var(--ink);border-radius:var(--wob);background:rgba(255,255,255,.35);overflow:hidden;box-shadow:3px 5px 0 rgba(37,51,61,.1)}
.road-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:0 0 14px}
.road-scroll::-webkit-scrollbar{height:9px}
.road-scroll::-webkit-scrollbar-thumb{background:var(--pencil);border-radius:9px}
.road-track{position:relative;min-width:1980px;padding:124px 40px 26px}
.road-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.road-line path{fill:none;stroke:var(--pencil);stroke-width:3;stroke-linecap:round;stroke-dasharray:11 10}
.road-line path.lit{stroke:var(--water);stroke-width:4.5;stroke-dasharray:none;filter:drop-shadow(0 0 4px rgba(47,159,196,.5))}

.stations{display:flex;gap:52px;align-items:stretch;position:relative;z-index:2}
.station{
  width:160px;flex:0 0 160px;cursor:pointer;text-align:center;
  border:2.5px solid var(--ink);border-radius:var(--wob-2);
  background:var(--paper);padding:12px 10px 14px;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .2s;
  box-shadow:2px 3px 0 rgba(37,51,61,.14);position:relative;
}
.station:nth-child(odd){transform:rotate(-1.2deg)}
.station:nth-child(even){transform:rotate(1deg) translateY(6px)}
.station:hover{transform:translateY(-6px) rotate(0deg) scale(1.04);box-shadow:4px 7px 0 rgba(37,51,61,.18);background:#fff}
.station.on{
  background:var(--water-3);border-color:var(--water);border-width:3px;
  transform:translateY(-9px) rotate(0deg) scale(1.07);
  box-shadow:4px 8px 0 rgba(47,159,196,.3);
}
.station.done{background:var(--paper-2);opacity:.88}
.station.done::after{
  content:'✓';position:absolute;top:-11px;right:-9px;
  font-family:var(--hand-title);font-size:1.5rem;color:var(--green);
  background:var(--paper);border:2.5px solid var(--green);border-radius:50%;
  width:28px;height:28px;line-height:23px;
  animation:pop .3s;
}
.st-n{
  position:absolute;top:-13px;left:-11px;width:30px;height:30px;
  display:grid;place-items:center;background:var(--ink);color:var(--paper);
  font-family:var(--hand-title);font-size:1.25rem;
  border-radius:54% 46% 50% 50%;
}
.station.on .st-n{background:var(--water)}
.st-ico{height:54px;display:grid;place-items:center;margin-bottom:4px}
.st-ico svg{width:48px;height:48px;stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.station.on .st-ico svg{stroke:var(--water)}
.st-name{font-family:var(--hand-title);font-size:1.26rem;line-height:1.1;margin:0 0 3px}
.st-where{font-family:var(--hand-ui);font-size:.78rem;color:var(--ink-2);line-height:1.2;display:block}
.st-drip{
  position:absolute;bottom:-9px;left:50%;width:9px;height:12px;
  background:var(--water);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  clip-path:polygon(50% 0,100% 62%,80% 100%,20% 100%,0 62%);
  opacity:0;
}
.station.on .st-drip{animation:dripDown 1.1s infinite}
@keyframes dripDown{0%{opacity:0;transform:translate(-50%,-6px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,22px) scale(1.1)}}

.road-fade{position:absolute;top:0;bottom:0;width:44px;pointer-events:none;z-index:3}
.road-fade.left{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.road-fade.right{right:0;background:linear-gradient(-90deg,var(--paper),transparent)}

.traveller{position:absolute;top:-6px;left:0;z-index:5;transition:transform .1s linear;pointer-events:none}
.traveller svg{width:40px;height:30px;fill:var(--red);filter:drop-shadow(2px 3px 0 rgba(37,51,61,.25))}
.traveller-label{
  position:absolute;top:32px;left:50%;transform:translateX(-50%) rotate(-3deg);
  font-family:var(--hand-title);font-size:1rem;white-space:nowrap;
  background:var(--yellow);border:2px solid var(--ink);border-radius:6px;padding:0 7px;
}

/* stage detail */
.stage-detail{margin-top:30px;min-height:250px}
.sd-empty{text-align:center;padding:46px 0;color:var(--pencil);font-family:var(--hand-title);font-size:1.5rem}
.hand-point{width:120px;height:60px;stroke:var(--pencil);stroke-width:2.4;fill:none;stroke-linecap:round;display:block;margin:0 auto 8px}

.sd-card{
  border:3px solid var(--ink);border-radius:var(--wob);
  background:var(--paper-2);padding:26px 30px 30px;position:relative;
  box-shadow:4px 6px 0 rgba(37,51,61,.14);
  animation:cardIn .35s cubic-bezier(.34,1.4,.64,1);
}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) rotate(-1deg)}}
.sd-head{display:flex;gap:16px;align-items:flex-start;border-bottom:2.5px dashed var(--rule);padding-bottom:14px;margin-bottom:16px}
.sd-n{
  font-family:var(--hand-title);font-size:2.4rem;width:54px;height:54px;flex:0 0 54px;
  display:grid;place-items:center;background:var(--water);color:#fff;
  border:3px solid var(--ink);border-radius:56% 44% 48% 52%;
}
.sd-head h3{font-family:var(--hand-title);font-size:2.3rem;margin:0;line-height:1;transform:rotate(-.8deg)}
.sd-where{font-family:var(--hand-ui);color:var(--ink-2);margin:4px 0 0;font-size:.98rem}
.sd-doodle{margin-left:auto}
.sd-doodle svg{width:84px;height:84px;stroke:var(--red);stroke-width:2.2;fill:none;opacity:.72;stroke-linecap:round;stroke-linejoin:round}
.sd-body{columns:2;column-gap:38px;font-size:1.06rem}
.sd-body p{margin:0 0 12px;break-inside:avoid}
.sd-facts{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.sd-facts li{
  border:2.5px solid var(--ink);border-radius:var(--wob-3);padding:7px 14px;
  background:var(--paper);font-size:.95rem;flex:1 1 210px;
}
.sd-facts li:nth-child(even){transform:rotate(.7deg)}
.sd-facts li b{display:block;font-family:var(--hand-ui);font-size:.82rem;color:var(--ink-2);text-transform:lowercase}

.sd-bar{margin-top:18px}
.sd-bar-label{font-family:var(--hand-ui);font-size:.9rem;color:var(--ink-2);margin:0 0 5px}
.bar-track{
  height:26px;border:2.5px solid var(--ink);border-radius:20px;
  background:var(--paper);position:relative;overflow:hidden;max-width:460px;
}
.bar-fill{
  height:100%;width:0;
  background:repeating-linear-gradient(45deg,var(--water) 0 8px,var(--water-2) 8px 16px);
  transition:width .7s cubic-bezier(.34,1.3,.64,1);
}
.bar-track span{position:absolute;right:11px;top:0;font-family:var(--hand-title);font-size:1.15rem;line-height:24px}

.margin-note{
  font-family:var(--hand-title);font-size:1.4rem;color:var(--red);
  transform:rotate(-1.8deg);margin:16px 0 0;position:relative;padding-left:30px;
}
.margin-note::before{content:'↳';position:absolute;left:4px;top:-2px;font-size:1.5rem;opacity:.7}

/* ---------- 03 ledger ---------- */
.ledger-grid{display:grid;grid-template-columns:320px 1fr;gap:44px;align-items:start}
.glass-col{text-align:center}
.glass-wrap{position:relative;display:inline-block}
#glass{display:block;filter:drop-shadow(3px 5px 0 rgba(37,51,61,.12))}
.glass-marks{position:absolute;inset:0;pointer-events:none}
.glass-marks span{
  position:absolute;right:-4px;bottom:calc(38px + (var(--p)) * 0.76);
  font-family:var(--hand-ui);font-size:.78rem;color:var(--ink-2);
  display:flex;align-items:center;gap:4px;transform:translateY(50%);
}
.glass-marks i{display:block;width:16px;height:2px;background:var(--ink-2);opacity:.5}
.glass-burst{
  position:absolute;top:16%;left:50%;transform:translateX(-50%) rotate(-5deg);
  font-family:var(--hand-title);font-size:1.4rem;background:var(--yellow);
  border:2.5px solid var(--ink);border-radius:var(--wob-3);padding:4px 12px;white-space:nowrap;
  animation:pop .4s;
}
.glass-cap{font-family:var(--hand-title);font-size:1.35rem;margin:12px 0 0}
.glass-cap b{font-size:1.9rem;color:var(--water)}
.glass-sub{font-family:var(--hand-ui);color:var(--ink-2);font-size:.95rem;margin:2px 0 0}

.meters{display:flex;flex-direction:column;gap:16px}
.meter{
  display:flex;gap:16px;align-items:center;
  border:2.5px solid var(--ink);border-radius:var(--wob);
  padding:14px 20px;background:var(--paper-2);
  box-shadow:2px 4px 0 rgba(37,51,61,.12);transition:.2s;
}
.meter:nth-child(odd){transform:rotate(-.5deg)}
.meter:nth-child(even){transform:rotate(.4deg)}
.meter.bump{animation:meterBump .5s}
@keyframes meterBump{40%{transform:scale(1.03) rotate(-.9deg);background:#fff;box-shadow:3px 6px 0 rgba(47,159,196,.28)}}
.meter-ico{flex:0 0 50px}
.meter-ico svg{width:44px;height:48px;stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linejoin:round}
.meter[data-k=water] .meter-ico svg{fill:var(--water-2);stroke:var(--water)}
.meter[data-k=energy] .meter-ico svg{fill:var(--yellow)}
.meter[data-k=carbon] .meter-ico svg{fill:rgba(37,51,61,.14)}
.meter-main{flex:1}
.meter-main b{font-family:var(--hand-title);font-size:2.1rem;line-height:1;display:block}
.meter-main span{font-family:var(--hand-ui);font-size:.94rem;color:var(--ink-2)}
.meter-eq{font-size:.92rem;margin:4px 0 0;color:var(--ink-2)}
.split{height:9px;border:2px solid var(--ink);border-radius:9px;margin:7px 0 3px;overflow:hidden;background:var(--water-3);max-width:300px}
.split .on{display:block;height:100%;background:var(--water);transition:width .5s}
.split-key{font-family:var(--hand-ui);font-size:.8rem;margin:0;color:var(--ink-2)}

.compare-strip{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.cmp{
  border:2.5px dashed var(--ink);border-radius:var(--wob-3);padding:10px 18px;
  background:rgba(255,255,255,.4);flex:1 1 200px;
}
.cmp:nth-child(even){transform:rotate(-.8deg)}
.cmp b{font-family:var(--hand-title);font-size:1.8rem;display:block;line-height:1;color:var(--water)}
.cmp span{font-family:var(--hand-ui);font-size:.92rem;color:var(--ink-2)}

/* ---------- 04 knobs ---------- */
.knob-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.knob-card{
  border:2.5px solid var(--ink);border-radius:var(--wob);padding:20px 24px;
  background:var(--paper-2);box-shadow:3px 4px 0 rgba(37,51,61,.12);
}
.knob-card:nth-child(1){transform:rotate(-.6deg)}
.knob-card:nth-child(2){transform:rotate(.5deg)}
.knob-card:nth-child(4){transform:rotate(-.4deg)}
.knob-card.wide{grid-column:1/-1}
.knob-card h4{font-family:var(--hand-title);font-size:1.6rem;margin:0 0 12px;font-weight:600}
.knob-card h4.mt{margin-top:20px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font-family:var(--hand-ui);font-size:1rem;cursor:pointer;
  border:2.5px solid var(--ink);border-radius:var(--wob-3);
  padding:6px 15px;background:var(--paper);color:var(--ink);transition:.15s;text-align:left;
}
.chip small{display:block;font-size:.76rem;color:var(--ink-2);line-height:1.1}
.chip:hover{background:#fff;transform:translateY(-2px) rotate(-1deg)}
.chip.on{background:var(--water);border-color:var(--ink);color:#fff;transform:rotate(-1.4deg) scale(1.05)}
.chip.on small{color:rgba(255,255,255,.85)}
.chips.sites .chip{min-width:132px}
.knob-blurb{font-family:var(--hand-title);font-size:1.25rem;color:var(--ink-2);margin:12px 0 0;min-height:1.4em}
.knob-read{font-family:var(--hand-ui);margin:9px 0 0}
.knob-read b{font-family:var(--hand-title);font-size:1.55rem;color:var(--water)}
.site-nums{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.site-nums span{font-family:var(--hand-ui);font-size:.86rem;color:var(--ink-2);border:2px dashed var(--rule);border-radius:8px;padding:4px 11px}
.site-nums b{font-family:var(--hand-title);font-size:1.25rem;color:var(--ink)}

.knob-result{
  margin-top:26px;border:3px solid var(--ink);border-radius:var(--wob);
  background:var(--water-3);padding:22px 28px;transform:rotate(.4deg);
  box-shadow:4px 6px 0 rgba(47,159,196,.22);
}
.kr-label{font-family:var(--hand-ui);color:var(--ink-2);margin:0 0 8px;font-size:.95rem}
.kr-nums{display:flex;flex-wrap:wrap;gap:34px}
.kr-nums b{font-family:var(--hand-title);font-size:2.9rem;line-height:1;display:block}
.kr-nums span{font-family:var(--hand-ui);font-size:.92rem;color:var(--ink-2)}
.kr-bars{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.krb-head{
  font-family:var(--hand-title);font-size:1.2rem;color:var(--ink-2);
  margin:10px 0 2px;transform:rotate(-.6deg);
}
.krb-head:first-child{margin-top:0}
.krb{display:flex;align-items:center;gap:10px;font-family:var(--hand-ui);font-size:.88rem}
.krb-name{width:118px;flex:0 0 118px;color:var(--ink-2);text-align:right}
.krb-track{flex:1;height:17px;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.55)}
.krb-fill{display:block;height:100%;background:var(--water);transition:width .5s cubic-bezier(.34,1.3,.64,1)}
.krb.you .krb-fill{background:repeating-linear-gradient(45deg,var(--red) 0 7px,#e07a72 7px 14px)}
.krb-val{width:78px;flex:0 0 78px;font-family:var(--hand-title);font-size:1.05rem}

/* ---------- 05 scale ---------- */
.scale-box{border:2.5px solid var(--ink);border-radius:var(--wob);padding:28px 32px;background:var(--paper-2);box-shadow:3px 5px 0 rgba(37,51,61,.12)}
.scale-label{font-family:var(--hand-ui);color:var(--ink-2);display:block;margin-bottom:8px}
#scaleRange{width:100%;max-width:620px}
.scale-count{margin:12px 0 22px;font-family:var(--hand-ui)}
.scale-count b{font-family:var(--hand-title);font-size:2.7rem;color:var(--red);line-height:1}
.pool-vis{display:flex;flex-wrap:wrap;gap:7px;min-height:66px;align-items:flex-end;margin-bottom:8px}
.pool{
  width:46px;height:30px;border:2.5px solid var(--ink);border-radius:3px 8px 3px 7px;
  background:linear-gradient(180deg,var(--water-2),var(--water));
  position:relative;overflow:hidden;animation:pop .3s backwards;
}
.pool::after{content:'';position:absolute;inset:3px;border:1.5px dashed rgba(255,255,255,.55);border-radius:4px}
.pool.part{opacity:.5}
.pool-cap{font-family:var(--hand-title);font-size:1.5rem;margin:4px 0 18px}
.scale-facts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.scale-facts li{
  border:2.5px solid var(--ink);border-radius:var(--wob-3);padding:12px 17px;background:var(--paper);
}
.scale-facts li:nth-child(even){transform:rotate(-.7deg)}
.scale-facts li b{font-family:var(--hand-title);font-size:1.9rem;display:block;line-height:1;color:var(--water)}
.scale-facts li span{font-family:var(--hand-ui);font-size:.9rem;color:var(--ink-2)}

/* ---------- 06 issues ---------- */
/* align-items:start matters -- without it the grid stretches every card in a
   row to match the tallest one, so opening one card visibly inflates its
   neighbour into a tall empty box. */
.issue-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;align-items:start;
}
.issue{
  border:2.5px solid var(--ink);border-radius:var(--wob);padding:22px 24px;
  background:var(--paper-2);cursor:pointer;position:relative;
  box-shadow:3px 5px 0 rgba(37,51,61,.12);transition:transform .22s,box-shadow .22s;
}
.issue:nth-child(3n+1){transform:rotate(-.8deg)}
.issue:nth-child(3n+2){transform:rotate(.6deg)}
.issue:nth-child(3n){transform:rotate(-.3deg)}
.issue:hover{transform:translateY(-5px) rotate(0deg);box-shadow:5px 9px 0 rgba(37,51,61,.16)}
.issue.open{background:#fff;box-shadow:5px 9px 0 rgba(47,159,196,.24);border-color:var(--water)}
.issue-top{display:flex;gap:14px;align-items:flex-start}
.issue-ico{flex:0 0 56px}
.issue-ico svg{width:52px;height:52px;stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.issue.open .issue-ico svg{stroke:var(--water)}
.issue-tag{
  font-family:var(--hand-ui);font-size:.76rem;color:var(--red);
  border:2px dashed rgba(201,69,60,.45);border-radius:7px;padding:1px 8px;display:inline-block;margin-bottom:5px;
}
.issue h3{font-family:var(--hand-title);font-size:1.65rem;margin:0 0 6px;line-height:1.08}
.issue-lead{margin:0;color:var(--ink-2);font-size:1rem}
.issue-stat{
  margin-top:14px;border-top:2px dashed var(--rule);padding-top:11px;display:flex;align-items:baseline;gap:10px;
}
.issue-stat b{font-family:var(--hand-title);font-size:2rem;color:var(--water);line-height:1}
.issue-stat span{font-family:var(--hand-ui);font-size:.85rem;color:var(--ink-2)}
.issue-body{max-height:0;overflow:hidden;transition:max-height .45s ease}
.issue.open .issue-body{max-height:640px}
.issue-body-inner{padding-top:14px;font-size:1.02rem}
.issue-body-inner p{margin:0 0 11px}
.issue-more{
  font-family:var(--hand-ui);font-size:.88rem;color:var(--water);margin-top:10px;display:block;
}

/* ---------- 07 helps ---------- */
.help-list{list-style:none;counter-reset:h;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.help-list li{
  counter-increment:h;position:relative;padding:16px 20px 16px 62px;
  border:2.5px solid var(--ink);border-radius:var(--wob);background:var(--paper-2);
  box-shadow:2px 4px 0 rgba(37,51,61,.1);
}
.help-list li:nth-child(even){transform:rotate(.6deg)}
.help-list li:nth-child(odd){transform:rotate(-.5deg)}
.help-list li::before{
  content:counter(h);position:absolute;left:14px;top:15px;
  width:34px;height:34px;display:grid;place-items:center;
  background:var(--green);color:#fff;font-family:var(--hand-title);font-size:1.4rem;
  border:2.5px solid var(--ink);border-radius:52% 48% 46% 54%;
}
.help-list b{font-family:var(--hand-title);font-size:1.35rem;display:block;line-height:1.15;margin-bottom:3px}
.help-list span{font-size:.98rem;color:var(--ink-2)}

.closing{margin-top:44px;max-width:680px;font-size:1.1rem}
.closing-big{
  font-family:var(--hand-title);font-size:clamp(1.9rem,4vw,2.9rem);
  transform:rotate(-1.2deg);margin-top:18px;line-height:1.1;
}
.closing-big::after{content:' 💧'}

/* ---------- 08 sources ---------- */
.src-wrap{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:start}
.src-list{list-style:none;padding:0;margin:0}
.src-list li{border-bottom:2px dashed var(--rule);padding:12px 0}
.src-list b{font-family:var(--hand-ui);display:block;color:var(--ink)}
.src-list span{font-size:.98rem;color:var(--ink-2)}
.formula{margin-top:30px;border:2.5px solid var(--ink);border-radius:var(--wob);padding:18px 24px;background:rgba(255,255,255,.4);transform:rotate(-.4deg)}
.formula h4{font-family:var(--hand-title);font-size:1.5rem;margin:0 0 10px}
.formula pre{margin:0;overflow-x:auto}
.formula code{font-family:'Courier New',monospace;font-size:.9rem;line-height:1.8;color:var(--ink)}

/* ---------- foot ---------- */
.foot{
  border-top:2.5px solid var(--ink);margin-top:20px;padding:30px 24px 48px;
  text-align:center;position:relative;z-index:4;
}
.foot p{font-family:var(--hand-ui);color:var(--ink-2);margin:0 0 14px}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) rotate(-1deg);z-index:70;
  background:var(--ink);color:var(--paper);font-family:var(--hand-ui);
  padding:9px 20px;border-radius:var(--wob-3);box-shadow:3px 5px 0 rgba(37,51,61,.25);
  animation:pop .3s;
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1)}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .send-wrap{grid-template-columns:1fr;justify-items:center}
  .send-side{width:100%;max-width:560px}
  .ledger-grid{grid-template-columns:1fr;justify-items:center}
  .meters{width:100%}
  .knob-grid{grid-template-columns:1fr}
  .src-wrap{grid-template-columns:1fr}
  .sd-body{columns:1}
}
@media (max-width:700px){
  body{font-size:17px}
  .nav{flex-wrap:wrap;gap:8px;padding:8px 14px}
  .nav-brand{flex:1 1 auto;font-size:1.2rem}
  .nav-tally{flex:0 0 auto}
  .nav-links{
    order:3;flex:1 0 100%;width:100%;
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scrollbar-width:none;padding-bottom:2px;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links li{flex:0 0 auto}
  .nav-links a{font-size:.92rem;padding:2px 7px;white-space:nowrap}
  .sec{padding:52px 16px 44px}
  .sd-card{padding:20px 18px 24px}
  .sd-head{flex-wrap:wrap}
  .sd-doodle{display:none}
  .kr-nums{gap:20px}
  .kr-nums b{font-size:2.2rem}
  .krb-name{width:78px;flex:0 0 78px;font-size:.78rem}
  .hero{padding:44px 16px 30px}
  .road-track{padding:92px 20px 18px;min-width:1640px}
  .stations{gap:38px}
  .station{width:134px;flex:0 0 134px}
  .st-name{font-size:1.12rem}
  .road-controls{gap:8px}
  .speed{margin-left:0;flex-basis:100%}
  .glass-marks span{font-size:.7rem}
  .kr-bars{font-size:.8rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.05s !important}
  html{scroll-behavior:auto}
}