:root{ --bg:#0b0d10; --map:#2a2f36; --sea:#0b0d10; --night:rgba(0,0,0,.55); --grid:#1f242b; --line:#8a9099;
         --txt:#f1f3f5; --muted:#8b949e; --dot:#ff9f0a; --card:#15191e; --face-day:#ffffff; --face-night:#0b0d10;
         --hand-day:#000; --hand-night:#fff; --sec:#ff9f0a; }
  [data-style="eink"]{ --bg:#fff; --map:#9a9a9a; --sea:#fff; --night:rgba(0,0,0,.28); --grid:#d8d8d8; --line:#000;
         --txt:#000; --muted:#444; --dot:#000; --card:#fff; --face-day:#fff; --face-night:#111;
         --hand-day:#000; --hand-night:#fff; --sec:#000; }
  *{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:column}
  .map{position:relative;flex:0 0 auto;width:100%;aspect-ratio:2/1;max-height:58%;margin:0 auto;background:var(--sea)}
  .map svg{width:100%;height:100%;display:block}
  .land{fill:var(--map)} .night{fill:var(--night)} .grid{stroke:var(--grid);stroke-width:1} .term{fill:none;stroke:var(--line);stroke-width:1.5;opacity:.8}
  .city circle{fill:var(--dot)} .city text{fill:var(--txt);font-weight:700;font-size:13px} .city .t{fill:var(--muted);font-weight:500;font-size:11px}
  .clocks{flex:1 1 auto;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:2vmin;padding:2vmin}
  .card{background:var(--card);border-radius:2vmin;padding:1.4vmin 1vmin 1vmin;text-align:center;width:min(15vw,28vh)}
  [data-style="eink"] .card{border:1px solid #bbb}
  .card svg{width:100%;height:auto;display:block}
  .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:.8vmin;white-space:nowrap}
  .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){ .map{max-height:34%} .card{width:30vw} }