:root{ --bg:#06070a; --sky:#0b0d12; --sea:#15345c; --map:#4c6a3f; --ice:#cfd6dc; --ice2:#9aa6b0; --night:rgba(0,0,0,.6); --grid:rgba(255,255,255,.14); --line:#ffd27a;
         --txt:#f1f3f5; --muted:#8b949e; --dot:#ff9f0a; --card:#15191e; --face-day:#ffffff; --face-night:#0b0d10;
         --hand-day:#000; --hand-night:#fff; --sec:#ff9f0a; --sun:#ffd54a; --moon:#c9ccd1; }
  [data-style="eink"]{ --bg:#fff; --sky:#fff; --sea:#fff; --map:#8a8a8a; --ice:#e6e6e6; --ice2:#bbb; --night:rgba(0,0,0,.28); --grid:#d0d0d0; --line:#000;
         --txt:#000; --muted:#444; --dot:#000; --card:#fff; --face-day:#fff; --face-night:#111;
         --hand-day:#000; --hand-night:#fff; --sec:#000; --sun:#000; --moon:#777; }
  *{box-sizing:border-box} html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow:hidden;user-select:none}
  .wrap{height:100%;display:flex;flex-direction:row}
  .map{position:relative;flex:0 0 auto;height:100%;aspect-ratio:1/1;max-width:62%;background:var(--sky)}
  .map svg{width:100%;height:100%;display:block}
  .land{fill:var(--map)} .sea{fill:var(--sea)} .ice{fill:var(--ice)} .wall{fill:var(--ice2)} .night{fill:var(--night)} .grid{stroke:var(--grid);stroke-width:1;fill:none}
  .term{fill:none;stroke:var(--line);stroke-width:1.5;opacity:.7}
  .city circle{fill:var(--dot);stroke:#000;stroke-width:.8} .city text{fill:var(--txt);font-weight:700;font-size:15px;paint-order:stroke;stroke:var(--sky);stroke-width:3px;stroke-linejoin:round}
  .city .t{fill:var(--muted);font-weight:600;font-size:13px}
  [data-style="eink"] .city text{stroke:#fff}
  .clocks{flex:1 1 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6vmin;padding:1.6vmin;align-content:center}
  .card{background:var(--card);border-radius:2vmin;padding:1.2vmin 1vmin 1vmin;text-align:center;min-width:0}
  [data-style="eink"] .card{border:1px solid #bbb}
  .card svg{width:100%;height:auto;max-height:18vh;display:block;margin:0 auto}
  .face{stroke:var(--muted);stroke-width:1}
  .n{font-size:9px;font-weight:600}
  .card .name{font-size:clamp(12px,1.9vmin,20px);font-weight:600;margin-top:.6vmin;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card .sub{font-size:clamp(10px,1.5vmin,16px);color:var(--muted);margin-top:.3vmin;white-space:nowrap}
  .card .sun{font-size:clamp(10px,1.4vmin,15px);color:var(--muted);margin-top:.3vmin;white-space:nowrap}
  @media (orientation:portrait){ .wrap{flex-direction:column} .map{width:100%;height:auto;max-width:none;max-height:58%} .clocks{grid-template-columns:repeat(3,minmax(0,1fr))} .card svg{max-height:14vh} }