:root{
  --night:#1A1A2E; --dark:#12121F; --gold:#C9A84C; --gold-dim:#A8893A;
  --fog:#F5F4F0; --fog-dim:#C8C7C3; --mist:rgba(245,244,240,.06); --mist-strong:rgba(245,244,240,.12);
  --line:rgba(245,244,240,.14); --you:#5AA9FF;
  --f-display:'Playfair Display',Georgia,serif; --f-body:'Inter',system-ui,sans-serif; --f-mono:'DM Mono',ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--dark);color:var(--fog)}
body{font-family:var(--f-body);font-size:15px;line-height:1.6;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
[hidden]{display:none!important}
.app{max-width:520px;margin:0 auto;padding-block:20px 40px;display:flex;flex-direction:column;gap:20px}
.mono{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
h1{font-family:var(--f-display);font-weight:700;font-size:2.1rem;line-height:1.1;margin:6px 0 0;text-wrap:balance}
h1 em{color:var(--gold);font-style:italic;font-weight:600}
.stats{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--f-mono);font-size:.78rem;color:var(--fog-dim);margin-top:10px}
.lede{color:var(--fog-dim);margin:10px 0 0;font-weight:300}
details.intro{background:var(--mist);padding:14px}
details.intro summary{cursor:pointer;font-family:var(--f-display);font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:10px}
details.intro summary::-webkit-details-marker{display:none}
details.intro summary::after{content:"+";font-family:var(--f-mono);color:var(--gold)}
details.intro[open] summary::after{content:"–"}
details.intro p{margin:12px 0 0;color:var(--fog-dim);font-weight:300;line-height:1.75}
#map{height:62vh;min-height:320px;max-height:560px;border:1px solid var(--line);background:var(--night)}
.leaflet-container{background:var(--night);font-family:var(--f-body)}
.leaflet-control-attribution{background:rgba(18,18,31,.8)!important;color:var(--fog-dim)!important;font-size:10px}
.leaflet-control-attribution a{color:var(--gold)!important}
.leaflet-bar a{background:var(--night)!important;color:var(--fog)!important;border-color:var(--line)!important}
.pin{width:30px;height:30px;border-radius:50%;background:var(--night);border:2px solid var(--gold);color:var(--gold);font-family:var(--f-mono);font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.pin.done{background:var(--gold);color:var(--night)}
.pin.next{border-width:4px}
.endpin{background:var(--fog);color:var(--night);font-family:var(--f-mono);font-size:10px;padding:2px 5px;white-space:nowrap}
.controls{display:flex;gap:10px;flex-wrap:wrap}
button{font:inherit;cursor:pointer}
.btn{font-family:var(--f-body);font-weight:500;font-size:.85rem;letter-spacing:.08em;padding:.85rem 1.4rem;border:none;transition:background .2s,border-color .2s,color .2s;text-decoration:none;display:inline-block}
.btn-primary{background:var(--gold);color:var(--night)} .btn-primary:hover{background:var(--gold-dim)}
.btn-ghost{background:transparent;color:var(--fog);border:1px solid rgba(245,244,240,.3)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn:focus-visible,.stop:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.status{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;background:var(--mist);padding:14px}
.status .big{font-family:var(--f-display);font-size:1.15rem}
.status .sub{color:var(--fog-dim);font-size:.85rem}
.status .num{font-family:var(--f-mono);color:var(--gold);font-variant-numeric:tabular-nums;text-align:right}
.bar{grid-column:1/-1;height:3px;background:var(--mist-strong)} .bar i{display:block;height:100%;background:var(--gold);width:0;transition:width .4s}
.msg{font-size:.82rem;color:var(--fog-dim);min-height:1.2em}
.stops{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.stop{width:100%;display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;text-align:left;background:var(--mist);color:var(--fog);border:none;padding:14px 12px;position:relative}
.stop::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.stop:hover::before{transform:scaleX(1)} .stop:hover{background:var(--mist-strong)}
.stop .n{font-family:var(--f-mono);color:var(--gold);font-size:.85rem}
.stop .t{font-family:var(--f-display);font-size:1.05rem;line-height:1.25;display:block}
.stop .a{display:block;font-size:.78rem;color:var(--fog-dim);margin-top:2px}
.chip{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;padding:3px 7px;border:1px solid var(--line);color:var(--fog-dim);white-space:nowrap}
.stop.done .chip{border-color:var(--gold);color:var(--gold)}
.interlude{text-align:center;padding:22px 12px;font-family:var(--f-display);font-style:italic;color:var(--fog-dim);line-height:1.7}
.interlude::after{content:"";display:block;width:48px;height:2px;background:var(--gold);margin:12px auto 0}
.endcard{background:var(--night);border:1px solid var(--gold-dim);padding:18px;display:flex;flex-direction:column;gap:12px}
.endcard h2{font-family:var(--f-display);font-size:1.5rem;margin:0}
.endcard p{margin:0;color:var(--fog-dim);font-weight:300;line-height:1.75}
.endcard .reality{font-style:italic;color:var(--fog)}
.endcard ul{margin:0;padding-left:18px;color:var(--fog-dim);font-size:.9rem;display:flex;flex-direction:column;gap:4px}
.sheet-bg{position:fixed;inset:0;background:rgba(10,10,20,.6);z-index:1000}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:1001;display:flex;justify-content:center}
.sheet .card{background:var(--night);border-top:2px solid var(--gold);width:100%;max-width:560px;max-height:88vh;overflow-y:auto;padding:20px 20px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.sheet h2{font-family:var(--f-display);font-size:1.6rem;line-height:1.15;margin:0;text-wrap:balance}
.sheet .addr{color:var(--fog-dim);font-size:.85rem;margin-top:-8px}
.blk{border-left:1px solid var(--gold-dim);padding-left:12px}
.blk .mono{display:block;margin-bottom:4px;font-size:.62rem}
.blk p{margin:0;font-weight:300;line-height:1.7}
.blk p+p{margin-top:10px}
.detail{background:var(--mist);padding:12px 14px;border-left:3px solid var(--gold)}
.detail .mono{display:block;margin-bottom:4px;font-size:.62rem}
.detail p{margin:0;font-style:italic;font-weight:300;line-height:1.7}
.practical{list-style:none;margin:0;padding:12px 14px;border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;font-family:var(--f-mono);font-size:.74rem;color:var(--fog-dim);line-height:1.5}
.nextwalk{font-size:.88rem;color:var(--fog-dim)}
.nextwalk .mono{display:block;margin-bottom:4px;font-size:.62rem}
.close{align-self:flex-end;background:none;border:none;color:var(--fog-dim);font-family:var(--f-mono);font-size:.7rem;letter-spacing:.15em;padding:4px}
.toast{position:fixed;left:50%;transform:translateX(-50%);top:12px;background:var(--gold);color:var(--night);padding:10px 16px;font-size:.85rem;font-weight:500;z-index:1100;max-width:calc(100% - 32px)}
.foot{font-size:.75rem;color:var(--fog-dim);text-align:center}
.foot a{color:var(--gold)}
.lock{background:var(--night);border:1px solid var(--gold-dim);padding:18px;display:flex;flex-direction:column;gap:10px}
.lock h2{font-family:var(--f-display);font-size:1.4rem;margin:0}
.lock p{margin:0;color:var(--fog-dim);font-size:.92rem}
.lock form{display:flex;gap:8px;flex-wrap:wrap}
.lock input{flex:1;min-width:160px;background:var(--dark);color:var(--fog);border:1px solid rgba(245,244,240,.3);font-family:var(--f-mono);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;padding:.8rem 1rem}
.lock input:focus{outline:2px solid var(--gold);outline-offset:1px}
.lock .err{color:#E8907A;font-size:.85rem;min-height:1.2em}
.chip.locked{border-style:dashed}
.practice{background:none;border:none;color:var(--fog-dim);font-size:.8rem;text-decoration:underline;padding:0;align-self:flex-start}
.practice.on{color:var(--gold)}
.walks{display:flex;flex-direction:column;gap:14px}
.walkcard{background:var(--night);border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:8px;color:var(--fog);text-decoration:none}
.walkcard:hover{border-color:var(--gold)}
.walkcard h2{font-family:var(--f-display);font-size:1.35rem;margin:0}
.walkcard p{margin:0;color:var(--fog-dim);font-size:.9rem}
.walkcard .meta{font-family:var(--f-mono);font-size:.74rem;color:var(--gold)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}