/* Volts Field Guide — ink-and-sunflower comic field guide. One committed light look. */
:root{
  --desk:#FFC93C; --dot:#E8AE17; --paper:#FFFFFF; --ink:#1A1A2E; --muted:#4A4A5E;
  --sun:#FFC93C; --sun-soft:#FFF0B8; --sky:#BFE6FF; --sky-soft:#E3F3FF;
  --violet:#6C5CE7; --violet-soft:#E4E0FF; --teal:#0B7A76; --mint:#C9F2E3;
  --coral:#FF6B57; --coral-soft:#FFC5BD; --peach:#FFD9C2; --red:#C0261A; --locked:#F1F1F4;
  --display:'Bricolage Grotesque', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body:'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background-color:var(--desk);
  background-image:radial-gradient(var(--dot) 1.6px, transparent 1.7px);
  background-size:14px 14px;
  color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5;
  padding-top:max(20px, env(safe-area-inset-top, 0px));
  padding-bottom:max(40px, env(safe-area-inset-bottom, 0px));
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  -webkit-text-size-adjust:100%;
}
#app{max-width:520px; margin:0 auto}
h1,h2,h3{font-family:var(--display); font-weight:800; margin:0; text-wrap:balance; line-height:1.08}
p{margin:0}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--violet); outline-offset:2px}
.sheet{background:var(--paper); border:3px solid var(--ink); border-radius:28px; box-shadow:6px 6px 0 var(--ink); padding:20px 18px; display:flex; flex-direction:column; gap:16px}
.stack{display:flex; flex-direction:column; gap:16px}
.row{display:flex; align-items:center; gap:10px}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1; min-width:0}
.muted{color:var(--muted)}
.eyebrow{font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--violet)}
.sticker{display:inline-block; padding:4px 10px; border-radius:8px; font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.06em; border:2px solid var(--ink); background:var(--paper)}
.sticker.violet{background:var(--violet); color:#fff; border-color:var(--violet); transform:rotate(-2deg)}
.sticker.coral{background:var(--coral); transform:rotate(2deg)}
.sticker.soft{background:var(--sun-soft)}
.iconbtn{width:44px; height:44px; flex:none; border-radius:12px; border:2.5px solid var(--ink); background:var(--paper); display:grid; place-items:center; cursor:pointer; color:var(--ink); text-decoration:none}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 20px; border-radius:14px; border:3px solid var(--ink); background:var(--ink); color:#fff; font-family:var(--display); font-weight:800; font-size:18px; box-shadow:4px 4px 0 var(--coral); cursor:pointer; width:100%; text-decoration:none; text-align:center}
.btn:disabled{background:var(--locked); color:var(--muted); box-shadow:none; cursor:not-allowed}
.btn.ghost{background:var(--paper); color:var(--ink); box-shadow:3px 3px 0 var(--ink)}
.btn.small{min-height:44px; font-size:15px; width:auto; padding:0 14px}
.btn:active:not(:disabled){transform:translate(2px,2px); box-shadow:1px 1px 0 var(--coral)}
.strip{display:flex; gap:4px}
.strip span{flex:1; height:10px; border:2px solid var(--ink); border-radius:4px; background:var(--paper)}
.strip span.done{background:var(--teal)} .strip span.now{background:var(--sun)}

/* home */
.brand{display:flex; align-items:center; gap:12px}
.brand h1{font-size:52px; letter-spacing:-.02em}
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.stat{border:2.5px solid var(--ink); border-radius:14px; padding:8px 10px; font-variant-numeric:tabular-nums}
.stat .k{font-size:12px; font-weight:700}
.stat .v{font-family:var(--display); font-weight:800; font-size:24px; line-height:1.1}
.stat:nth-child(1){background:var(--sun-soft)} .stat:nth-child(2){background:var(--peach)} .stat:nth-child(3){background:var(--mint)}
.continue{display:flex; gap:12px; align-items:center; border:3px solid var(--ink); border-radius:18px; background:var(--sun); padding:12px 14px; box-shadow:4px 4px 0 var(--ink); text-decoration:none; color:var(--ink)}
.continue .t{font-family:var(--display); font-weight:800; font-size:19px; line-height:1.15}
.levels{display:flex; flex-direction:column; gap:12px}
.level{display:flex; gap:12px; align-items:flex-start; border:3px solid var(--ink); border-radius:18px; padding:12px; text-decoration:none; color:var(--ink); background:var(--paper)}
.level.built{background:var(--sky-soft)}
.level.complete{background:var(--mint)}
.level .num{flex:none; width:46px; height:46px; border-radius:12px; border:2.5px solid var(--ink); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:20px; background:var(--paper)}
.level.built .num{background:var(--sun)}
.level .t{font-family:var(--display); font-weight:800; font-size:18px; line-height:1.15}
.level .o{font-size:14px; color:var(--muted)}
.level .bar{height:8px; border-radius:99px; border:2px solid var(--ink); background:var(--paper); overflow:hidden; margin-top:6px}
.level .bar i{display:block; height:100%; background:var(--teal)}

/* level page */
.grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.card{min-height:150px; border:3px solid var(--ink); border-radius:16px; padding:10px; display:flex; flex-direction:column; gap:4px; text-align:left; cursor:pointer; background:var(--sky); text-decoration:none; color:var(--ink)}
.card.now{background:var(--sun); box-shadow:4px 4px 0 var(--ink)}
.card.locked{background:var(--locked); color:var(--muted)}
.card.boss{border-style:dashed; background:var(--paper)}
.card.boss.open{background:var(--violet-soft)}
.card .t{font-family:var(--display); font-weight:800; font-size:16px; line-height:1.15}
.tag{padding:2px 8px; border-radius:6px; font-weight:700; font-size:11px}
.toast{border:2.5px solid var(--ink); border-radius:14px; background:var(--sun-soft); padding:10px 14px; font-weight:700}
.outline{display:flex; flex-direction:column; gap:8px; padding:0; margin:0; list-style:none}
.outline li{border:2.5px solid var(--ink); border-radius:12px; padding:8px 12px; background:var(--paper)}
.outline li b{font-family:var(--display)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips button,.chip{min-height:44px; padding:0 14px; border:2.5px solid var(--ink); border-radius:12px; background:var(--paper); font-weight:700; cursor:pointer; display:inline-flex; align-items:center}
.chip.static{min-height:32px; cursor:default; font-size:14px; padding:0 10px; background:var(--sun-soft)}
.chips button[aria-pressed=true]{background:var(--sun)}
.chips button:disabled{opacity:.5; cursor:not-allowed}

/* lesson */
.ill{width:100%; height:auto; display:block}
.frame{border:3px solid var(--ink); border-radius:18px; background:var(--sky-soft); padding:6px 8px}
.lead{font-size:17px}
.note{border:2.5px solid var(--ink); border-radius:14px; padding:10px 14px; font-size:15px}
.note b{font-family:var(--display); letter-spacing:.04em}
.note.warn{background:var(--coral-soft)} .note.tip{background:var(--mint)} .note.idea{background:var(--violet-soft)}
.choices{display:flex; flex-direction:column; gap:10px}
.choice{min-height:52px; text-align:left; padding:10px 14px; border:2.5px solid var(--ink); border-radius:14px; background:var(--paper); cursor:pointer; font-weight:700; font-size:16px}
.choice.right{background:var(--mint)} .choice.wrong{background:var(--coral-soft); text-decoration:line-through}
.choice:disabled{cursor:default; color:var(--ink)}
.feedback{border:3px solid var(--ink); border-radius:16px; padding:12px 14px}
.feedback.good{background:var(--mint)} .feedback.bad{background:var(--coral-soft)}
.feedback h3{font-size:18px; margin-bottom:2px}
.tiles{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.tile{border:2.5px solid var(--ink); border-radius:12px; padding:8px 10px; font-variant-numeric:tabular-nums}
.tile .k{font-weight:700; font-size:12px}
.tile .v{font-family:var(--display); font-weight:800; font-size:21px; line-height:1.2; overflow-wrap:anywhere}
.tile .v small{font-size:13px}
.tile:nth-child(1){background:var(--sun-soft); transform:rotate(-1.2deg)}
.tile:nth-child(2){background:var(--violet-soft); transform:rotate(.8deg)}
.tile:nth-child(3){background:var(--mint); transform:rotate(-.8deg)}
.slider{display:flex; flex-direction:column; gap:2px}
.slider label{font-weight:700; font-size:15px; display:flex; justify-content:space-between; gap:8px}
input[type=range]{width:100%; height:30px; margin:0; accent-color:var(--violet)}
.status{border:3px solid var(--ink); border-radius:16px; padding:10px 14px; font-weight:700}
.numin{display:flex; gap:10px; align-items:stretch}
.numin input{flex:1; min-width:0; min-height:52px; border:3px solid var(--ink); border-radius:14px; padding:0 14px; font-family:var(--display); font-weight:800; font-size:22px; font-variant-numeric:tabular-nums; color:var(--ink); background:var(--paper)}
.unit{display:grid; place-items:center; padding:0 12px; border:3px solid var(--ink); border-radius:14px; background:var(--sun-soft); font-family:var(--display); font-weight:800; font-size:18px}
.scale{display:flex; flex-direction:column; gap:8px}
.scale div{display:flex; justify-content:space-between; gap:10px; border:2.5px solid var(--ink); border-radius:12px; padding:8px 12px; font-weight:700}
.scale div span:last-child{font-family:var(--display); font-weight:800; text-align:right}
.scale div.hot{background:var(--coral-soft)}
.log{display:flex; flex-direction:column; gap:6px; font-size:15px}
.log div{border-left:4px solid var(--teal); padding:4px 10px; background:var(--sky-soft); border-radius:0 10px 10px 0}
.lcd{font-family:var(--display); font-weight:800; font-variant-numeric:tabular-nums}
.done-hero{text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.foot{text-align:center; font-size:13px; margin-top:14px}
.linkbtn{background:none; border:none; text-decoration:underline; cursor:pointer; font-size:13px; min-height:44px; padding:0 8px; color:var(--ink)}

.anim{animation-timing-function:linear; animation-iteration-count:infinite}
.flow{animation-name:flow} @keyframes flow{to{stroke-dashoffset:-28}}
.drift{animation-name:drift; animation-duration:2.4s} @keyframes drift{from{transform:translateX(-40px)} to{transform:translateX(0)}}
.shake{animation:shake .35s} @keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion: reduce){.anim,.shake{animation:none!important}}