*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:radial-gradient(circle at 50% 30%,#fff,#e6ebf2 70%,#d9e0ea);font-family:-apple-system,Helvetica,Arial,sans-serif;display:flex;flex-direction:column;
 padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#stage{display:flex;flex-direction:column;align-items:center;transform-origin:center}
#dev{width:300px;height:560px;border-radius:44px;padding:34px 30px;position:relative;
 background:linear-gradient(90deg,var(--d) 0%,var(--l) 18%,var(--m) 50%,var(--l) 82%,var(--d) 100%);
 box-shadow:0 30px 60px -20px rgba(30,40,60,.45),0 6px 14px rgba(30,40,60,.18),inset 0 2px 1px rgba(255,255,255,.6),inset 0 -3px 4px rgba(0,0,0,.15)}
#dev::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.25;
 background:repeating-linear-gradient(0deg,rgba(255,255,255,.25) 0 1px,rgba(0,0,0,.04) 1px 2px)}
.silver{--d:#a9adb3;--l:#e9ebee;--m:#d3d6da}.pink{--d:#d58aa6;--l:#f6c6d8;--m:#eeb0c7}
.blue{--d:#6f9cc9;--l:#bcd8f2;--m:#9ec3e6}.green{--d:#86b26a;--l:#cbe6b4;--m:#b0d796}.gold{--d:#c6a964;--l:#f0dfae;--m:#e0c88c}
.lcd{height:182px;border-radius:8px;background:#2a2c2e;padding:7px;box-shadow:inset 0 2px 5px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.5)}
.lcd>*{background:#c9d3c6}
.bar{height:22px;border-radius:3px 3px 0 0;display:flex;align-items:center;justify-content:space-between;padding:0 6px;
 font:12px/1 Silkscreen,monospace;color:#1d241c;border-bottom:1px solid #6d786b;background:linear-gradient(#dbe3d8,#bcc7b9)}
#ttl{flex:1;text-align:center;white-space:nowrap;overflow:hidden}#ico{width:14px;font-size:11px}
.batt{width:18px;height:9px;border:1px solid #1d241c;position:relative;background:linear-gradient(90deg,#1d241c 70%,transparent 0)}
#scr{height:146px;border-radius:0 0 3px 3px;overflow:hidden;font:20px/24px VT323,monospace;color:#141a13;position:relative;
 background:linear-gradient(#cdd8ca,#b9c5b5)}
.row{height:24px;padding:0 8px;display:flex;justify-content:space-between;white-space:nowrap;overflow:hidden}
.row span:first-child{overflow:hidden;text-overflow:ellipsis}
.row.sel{background:#2b3a2a;color:#d6e2d2}.row .ch{padding-left:6px}
.np{padding:6px 8px;text-align:center}.np .k{font-size:15px;opacity:.7}.np .n{white-space:nowrap;overflow:hidden}
.mq{white-space:nowrap;overflow:hidden}.mq span{display:inline-block;will-change:transform}.mq:not(.on){text-overflow:ellipsis}
@keyframes mq{to{transform:translateX(-100%)}}
.vb{height:9px;border:1px solid #141a13;margin:6px 6px 2px;position:relative}.vb i{position:absolute;inset:0 auto 0 0;background:#141a13}
.tm{display:flex;justify-content:space-between;font-size:16px}
#wheel{width:200px;height:200px;margin:34px auto 0;border-radius:50%;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
 background:radial-gradient(circle,#fafafa 0,#f1f2f3 60%,#e2e4e7 100%);box-shadow:inset 0 2px 3px rgba(0,0,0,.12),0 1px 0 rgba(255,255,255,.8)}
.lb{position:absolute;line-height:0;font:bold 11px Helvetica,Arial,sans-serif;color:#9a9ea4;letter-spacing:.5px;pointer-events:none}
.t{top:14px;left:50%;transform:translateX(-50%)}.b{bottom:12px;left:50%;transform:translateX(-50%)}
.l{left:16px;top:50%;transform:translateY(-50%)}.r{right:16px;top:50%;transform:translateY(-50%)}
#ctr{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px;border-radius:50%;border:0;cursor:pointer;
 background:linear-gradient(var(--l),var(--m));box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 1px 1px rgba(255,255,255,.7)}
#ctr:focus{outline:none}#ctr:active{filter:brightness(.93)}
#colors{display:flex;gap:10px;margin-top:22px}#colors button{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:pointer}
#colors [data-c=silver]{background:#d3d6da}#colors [data-c=pink]{background:#eeb0c7}#colors [data-c=blue]{background:#9ec3e6}#colors [data-c=green]{background:#b0d796}#colors [data-c=gold]{background:#e0c88c}
#colors .on{outline:2px solid #556;outline-offset:2px}
.note{font-size:11px;color:#8a93a0;margin:12px 0 0}
body.dim #scr,body.dim .bar{filter:brightness(.8) saturate(.6)}
.lb svg{display:block}
#mainarea{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.row .ch{width:6px;height:6px;margin:9px 4px 0 6px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg);flex:none;padding:0!important}
#ico svg{display:block}
/* header + footer: copied verbatim from globe.css */
header,#legal{font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#1d2a3a}
header{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;gap:14px;align-items:center;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-bottom:1px solid #e3e9f0}
header .back{color:#1a6fd6;text-decoration:none;font-weight:600}
header{flex-wrap:nowrap;white-space:nowrap}header .back,header .ttl{flex:none}
header h1.ttl{font-size:inherit;margin:0;font-weight:700}
#legal{position:fixed;left:0;right:0;bottom:0;z-index:7;padding:6px 12px max(6px,env(safe-area-inset-bottom));text-align:center;font-size:10.5px;line-height:15px;color:#8a97a8;background:#f4f7fa;border-top:1px solid #dfe6ee}
#legal #info{color:#64748b;margin:0;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#legal a{color:#6b84a6;text-decoration:none}#legal a:hover{text-decoration:underline}
/* SVG ◀◀ sized to the text (no emoji on iOS) */
header .back svg{display:inline-block;width:1.4em;height:.85em;margin-right:.25em;vertical-align:-.05em;vertical-align:0}
#mainarea{padding:calc(44px + env(safe-area-inset-top)) 0 calc(44px + env(safe-area-inset-bottom))}
header .back.fwd{margin-left:auto}header .back.fwd svg{margin-right:0;margin-left:.25em}
header{display:grid;grid-template-columns:1fr auto 1fr}header .back{justify-self:start}header .back.fwd{justify-self:end;margin-left:0}header .ttl{text-align:center}
/* carousel layout: transparent header (title only) + era arrows at mid-viewport */
header{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;box-shadow:none!important;pointer-events:none}
header .ttl{grid-column:2;pointer-events:auto;text-shadow:0 1px 2px rgba(255,255,255,.9),0 0 8px rgba(255,255,255,.8)}
header .back{position:fixed;top:50%;transform:translateY(-50%);left:max(6px,env(safe-area-inset-left));right:auto;z-index:7;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:44px;min-height:44px;padding:8px 10px;box-sizing:border-box;border-radius:22px;background:rgba(255,255,255,.72);box-shadow:0 1px 6px rgba(0,0,0,.12);-webkit-tap-highlight-color:transparent}
header .back.fwd{left:auto;right:max(6px,env(safe-area-inset-right));flex-direction:column-reverse}
header .back svg,header .back.fwd svg{margin:0!important;width:22px;height:13px}
@media (max-width:480px){header .back{padding:6px;font-size:11px;min-width:44px}}
/* Aqua glass era pills */
header .back{overflow:hidden;color:#fff;text-shadow:0 1px 1px rgba(0,40,110,.55);border:1px solid rgba(255,255,255,.55);
background:linear-gradient(180deg,rgba(120,180,255,.55) 0%,rgba(40,120,230,.55) 55%,rgba(70,160,255,.62) 100%);
-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
box-shadow:0 3px 10px rgba(0,50,130,.28),inset 0 -6px 10px rgba(160,215,255,.55),inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .12s,box-shadow .12s,filter .12s}
header .back::before{content:"";position:absolute;left:8%;right:8%;top:2px;height:46%;border-radius:20px 20px 12px 12px;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.12))}
header .back>*{position:relative}
header .back:hover{filter:brightness(1.08)}
header .back:active{transform:translateY(-50%) scale(.95);filter:brightness(.92);box-shadow:0 1px 4px rgba(0,50,130,.3),inset 0 2px 8px rgba(0,40,120,.35)}
/* clear glass pills (override Aqua gel): transparent, original blue arrow/year */
header .back{color:#1a6fd6;text-shadow:none;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.6);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(20,40,80,.12),inset 0 1px 0 rgba(255,255,255,.7)}
header .back::before{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
header .back:active{filter:brightness(.95);box-shadow:0 1px 3px rgba(20,40,80,.15),inset 0 1px 4px rgba(20,40,80,.12)}
/* mini: era nav floats, no container */
header .back{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:drop-shadow(0 1px 1px rgba(255,255,255,.8))}
header .back::before{display:none}
header .back:hover{filter:drop-shadow(0 1px 1px rgba(255,255,255,.8))}
header .back:active{transform:translateY(-50%);opacity:.55}
/* lighter chevrons (not transport-looking) */
header .back{color:#4d8fdf;font-weight:500}
header .back svg.chev{width:13px;height:22px}

/* favorites feedback: blinking title + LCD toast */
.blink{animation:fmblink .22s steps(1) 4}@keyframes fmblink{50%{visibility:hidden}}
#mtoast{position:absolute;left:10%;right:10%;top:50%;transform:translateY(-50%);padding:6px 4px;text-align:center;font:18px/20px VT323,monospace;color:#d6e2d2;background:#2b3a2a;border:1px solid #141a13;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:3}
#mtoast.on{opacity:1}
.lcd{position:relative}