:root{
  --bg:#0b2a20; --bg2:#0f3a2b; --card:#133f30; --line:#2c5c49; --text:#f3ecd2; --muted:#a9c2b5;
  --gold:#e6c57a; --gold2:#c9a24d; --face:#0d3226; --face2:#154a38; --ok:#7be0a6;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
html[data-theme=light]{
  --bg:#f6f1e1; --bg2:#fbf8ee; --card:#ffffff; --line:#d9d0b3; --text:#12332a; --muted:#59736a;
    --gold:#9a7424; --gold2:#b48a2e; --face:#eaf2ec; --face2:#ffffff; --ok:#1b8a52;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:radial-gradient(120% 80% at 50% 0,var(--bg2),var(--bg));color:var(--text);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  display:flex;flex-direction:column;align-items:center}
#app{width:100%;max-width:480px;flex:1;overflow-y:auto;padding:calc(var(--safe-t) + 14px) 18px 96px}
.screen{display:none}.screen.active{display:block;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.top{text-align:center;min-height:30px}
.place{margin:0;font-size:15px;font-weight:600;color:var(--muted);letter-spacing:.02em}
h2.h,.h3{font-family:Georgia,"Times New Roman",serif;color:var(--gold);margin:6px 0 12px}
h2.h{font-size:28px}.h3{font-size:18px;margin-top:26px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin:12px 0}
.start{text-align:center;padding:28px 20px;margin-top:28px}
.start-icon{border-radius:18px;box-shadow:0 6px 24px #0006}
.start h2{font-family:Georgia,serif;color:var(--gold);margin:14px 0 6px;font-size:26px}
.start p{color:var(--muted);margin:0 0 18px}
.btn{appearance:none;border:0;border-radius:14px;padding:14px 28px;font-weight:600;font-size:17px;font-family:inherit;
  background:linear-gradient(180deg,var(--gold),var(--gold2));color:#10281f;cursor:pointer;width:100%}
.btn:active{transform:scale(.98)}.btn.small{width:auto;padding:10px 18px;font-size:15px}
.link{appearance:none;background:none;border:0;color:var(--gold);font:inherit;padding:12px;cursor:pointer;text-decoration:underline}
.link.left{padding-left:0;align-self:flex-start}
.dial-wrap{position:relative;width:min(86vw,380px);aspect-ratio:1;margin:14px auto 6px}
#dial{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 28px #0006)}
.rim{stroke:var(--gold2);stroke-width:2}
.ring-glow{fill:none;stroke:var(--ok);stroke-width:0;opacity:0;transition:opacity .3s,stroke-width .3s}
.dial-wrap.aligned .ring-glow{opacity:.9;stroke-width:8}
.pointer{position:absolute;left:50%;top:-4px;width:26px;height:26px;transform:translateX(-50%);fill:var(--gold);filter:drop-shadow(0 2px 4px #0008)}
.center-dot{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--face)}
#rose text{fill:var(--muted);font:600 13px -apple-system,Arial,sans-serif;text-anchor:middle;dominant-baseline:central}
#rose text.n{fill:var(--gold);font-size:17px}
#rose line{stroke:var(--line);stroke-width:1.5}#rose line.m{stroke:var(--muted);stroke-width:2.5}
#rose .kaaba rect.b{fill:#14130f;stroke:var(--gold);stroke-width:1.5}
#rose .kaaba rect.s{fill:var(--gold)}
#rose .qline{stroke:var(--gold);stroke-width:2;stroke-dasharray:3 5;opacity:.8}
.readout{text-align:center;margin-top:8px}
.big{font:700 56px/1 Georgia,serif;color:var(--text)}.big .unit{font-size:30px;color:var(--gold)}
.dir{font:600 20px -apple-system,Arial,sans-serif;color:var(--gold);margin-left:6px}
.sub{color:var(--muted);margin-top:6px}
.hint{min-height:26px;margin-top:10px;font-weight:600;color:var(--gold)}
.hint.ok{color:var(--ok)}
.notice{background:var(--card);border:1px solid var(--line);color:var(--muted);border-radius:14px;padding:12px 14px;font-size:14px;margin:14px 0}
.cur{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}.cap{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.cur b{font-size:20px}.coords{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.search{width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;margin:4px 0 8px}
.places{list-style:none;margin:0;padding:0}
.places li button{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);font:inherit;padding:13px 4px;cursor:pointer;display:flex;justify-content:space-between}
.places li button small{color:var(--muted)}
.places li button.sel{color:var(--gold);font-weight:700}
.about-head{text-align:center}.about-icon{border-radius:22px;box-shadow:0 8px 30px #0007;margin-top:10px}
.lead{color:var(--muted);margin:0 auto;max-width:34ch}
.feats{padding:0;margin:18px 0;list-style:none}
.feats li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--line)}
.feats li::before{content:"✦";position:absolute;left:4px;color:var(--gold)}
.rows{padding:6px 16px}.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0}
.row.col{flex-direction:column;align-items:stretch;gap:4px;border-top:1px solid var(--line)}
.row.col small{color:var(--muted)}input[type=range]{width:100%;accent-color:var(--gold)}
.row output{color:var(--gold);font-variant-numeric:tabular-nums}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{background:none;border:0;color:var(--muted);padding:8px 16px;font-weight:600;font-size:14px;font-family:inherit;cursor:pointer}
.seg button.on{background:var(--gold);color:#10281f}
.fine{color:var(--muted);font-size:13px;text-align:center;margin:18px 0}.fine a{color:var(--gold)}
.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:0;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 0 calc(var(--safe-b) + 6px)}
.tabs button{flex:1;max-width:160px;background:none;border:0;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:600;font-size:12px;font-family:inherit;padding:6px;cursor:pointer}
.tabs svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabs button.on{color:var(--gold)}
[hidden]{display:none!important}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:700px){body{padding-top:20px}#app{padding-bottom:110px}}
.doc{padding-bottom:40px}.back{color:var(--gold)}.sp{margin-top:36px}