:root{
  --bg:#f4efe4; --fg:#1d1b16; --muted:#6a6355; --card:#fffaf0; --line:#e1d8c4;
  --accent:#a8461b; --accent-fg:#fffaf0; --forest:#1b3a2f; --ok:#2e6b4a; --warn:#b3701a;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.05);
  --r:16px; color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#13110e; --fg:#f1ebde; --muted:#a79f8f; --card:#1e1a15; --line:#2e281f;
    --accent:#e58f45; --accent-fg:#1b1108; --forest:#0f2a21; --ok:#5fb98a; --warn:#e2a24d;
    --shadow:none; color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));}
.screen{max-width:640px;margin:0 auto;padding-block:16px 40px;display:flex;flex-direction:column;gap:14px}
.hidden{display:none!important}
h1,h2{font-family:Georgia,"Times New Roman",serif;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,9vw,3rem);letter-spacing:-.01em}
h2{font-size:1.35rem}
p{margin:0}
.kicker{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.fine{font-size:.85rem;color:var(--muted)}
.hero{background:linear-gradient(160deg,var(--forest),#2c5a46 60%,#7a3b17);color:#f6efe0;border-radius:22px;padding:28px 22px;display:flex;flex-direction:column;gap:14px;
  padding-top:max(28px,env(safe-area-inset-top,0px))}
.hero .kicker,.hero .fine{color:#cfd9cf}
.lede{font-size:1.12rem;max-width:34ch}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.facts div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 4px;text-align:center;display:flex;flex-direction:column}
.facts b{font-family:Georgia,serif;font-size:1.3rem}
.facts span{font-size:.7rem;color:var(--muted);line-height:1.2}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;min-width:0}
.route{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:10px}
.route li{padding-left:2px}
.route b{display:block}
.route span{color:var(--muted);font-size:.92rem}
.tips{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:9px}
.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:6px 0}
button,.linklike{font:inherit;cursor:pointer;border-radius:14px;border:1px solid var(--line);padding:12px 16px;min-height:48px;text-align:center;text-decoration:none;display:inline-block}
button.primary,.primary{background:var(--accent);color:var(--accent-fg);border-color:transparent;font-weight:700}
button.secondary{background:transparent;color:var(--fg);border-color:var(--line)}
button.secondary:active,button.primary:active{transform:translateY(1px)}
.hero button.secondary{color:#f6efe0;border-color:rgba(255,255,255,.35)}
.big{font-size:1.15rem;min-height:58px;width:100%}
.linkbtn{background:none;border:0;color:var(--accent);padding:8px 4px;min-height:40px;font-weight:600}
.danger{color:#b3261e}
button:disabled{opacity:.5;cursor:default}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* tour */
.topbar{position:sticky;top:0;background:var(--bg);padding-top:max(6px,env(safe-area-inset-top,0px));z-index:5;display:flex;flex-direction:column;gap:6px}
.progress{height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s}
.topline{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--muted)}
.now h2{font-size:1.7rem}
.place{font-weight:700}
.addr,.blurb{color:var(--muted);font-size:.95rem}
.status{font-weight:600;color:var(--ok)}
.status.warn{color:var(--warn)}
.actions{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.actions button{width:100%}
.pl-row{display:flex;gap:14px;align-items:center}
.play{width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--accent-fg);border:0;font-size:1.5rem;flex:none;padding:0}
.pl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.pl-times{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--muted)}
input[type=range]{width:100%;accent-color:var(--accent)}
.captions{min-height:4.6em;font-size:1.15rem;line-height:1.45;font-family:Georgia,serif}
.chapters{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:6px}
.chapters li{color:var(--muted)}
.chapters li.done{text-decoration:line-through}
.chapters li.cur{color:var(--fg);font-weight:700}
.menu-actions{display:flex;flex-direction:column;gap:10px}
/* gate */
.gate{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.gate-card{background:var(--card);border-radius:var(--r);padding:22px;width:min(420px,100%);display:flex;flex-direction:column;gap:12px}
.gate-card input{font:inherit;font-size:1.4rem;letter-spacing:.2em;text-align:center;text-transform:uppercase;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.gate-msg{min-height:1.3em;color:#b3261e;font-size:.92rem}
@media (max-width:380px){.facts{grid-template-columns:repeat(2,1fr)}}

.fig{margin:-18px -18px 6px;display:flex;flex-direction:column;background:var(--forest);border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.fig img{width:100%;max-height:300px;object-fit:cover;object-position:center 35%;display:block}
.fig figcaption{padding:6px 12px;color:#cfd9cf;font-size:.72rem;line-height:1.3}
.fig figcaption a{color:#f0d9b5}
.route li{display:list-item}
.route .rt{display:flex;gap:12px;align-items:center}
.route img{width:64px;height:64px;object-fit:cover;border-radius:10px;flex:none}
.route .rtx{min-width:0}
.credits summary{cursor:pointer;font-weight:600}
.credits ul{margin-top:10px;font-size:.85rem}