html { background: #fff; color-scheme: light dark; }
body { background: #fff; color: #111; font-family: Helvetica, Arial, var(--sans);
       letter-spacing: -.005em; }
a { color: #1a0dab; }
.sheet { max-width: 1000px; }
.colophon { border-bottom: 1px solid #e5e5e5; padding: 12px 0 10px; }
.wm { color: #111; }

.issue { display: none; }
.issue.pickup { display: inline; font-size: 11px; color: #888; }
.seg { border: 1px solid #d4d4d4; border-radius: 4px; overflow: hidden; }
.seg button { color: #555; border-left: 1px solid #e5e5e5; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: #111; color: #fff; font-weight: 700; }
.seg button:hover:not([aria-pressed="true"]) { background: #f4f4f4; }

h1 { font-size: 15px; font-weight: 700; color: #444; margin: 22px 0 1px; letter-spacing: 0; }
.sub { font-size: 12px; color: #999; margin: 0 0 10px; }

.clocks { border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; }
.clocks.two .clock + .clock { border-left: 1px solid #ececec; padding-left: 22px; }
.clock { padding: 22px 0 20px; }
.place b { color: #111; font-weight: 700; }
.place .cty { color: #999; }
.gap { color: #888; }

.digits { color: #111; font-family: Helvetica, Arial, var(--sans); font-weight: 700;
          letter-spacing: -.045em; font-size: clamp(54px, 15vw, 150px); line-height: .9; }
.clocks.two .digits { font-size: clamp(42px, 8.4vw, 92px); }
.digits .sec { color: #111; }
.digits .ap { color: #999; font-weight: 400; }
.meta { color: #999; border-top: 0; padding-top: 4px; }
.dial .face { fill: #fff; } .dial .idx, .dial .idx12 { stroke: #111; }
.dial .hair { stroke: #d0d0d0; }
.dial .hand { fill: #111; } .dial .ss { stroke: #d93025; } .dial .cw { fill: #d93025; }
.dial .cap { fill: #fff; stroke: #111; }
.rmv { border: 1px solid #ddd; color: #888; border-radius: 4px; }
.rmv:hover { background: #f4f4f4; color: #111; }

select, .lnk, .btn, input[type=text] { border: 1px solid #d4d4d4; border-radius: 4px; color: #111; }
select option { background: #fff; }
.lnk:hover, .btn:hover { background: #f4f4f4; }
.field label { color: #999; }
.note { border-bottom: 1px solid #ececec; color: #666; }
.note b { color: #111; }
.note .tag { background: #f0f0f0; color: #555; border-radius: 3px; font-weight: 600; }
main section { border-top: 1px solid #ececec; }
h2 { color: #111; border-bottom: 0; font-size: 14px; }
h3 { color: #111; } strong { color: #111; } p { color: #666; }
code { background: #f4f4f4; border-radius: 3px; }
.hint { color: #999; }
.cities { border-top: 1px solid #ececec; }
.cityb { border-bottom: 1px solid #f2f2f2; color: #1a0dab; }
.cityb .now { color: #666; }
.cityb:hover { background: #f7f9ff; }
.cityb[aria-current="true"] { color: #111; font-weight: 700; }
.cityb[aria-current="true"] .now { color: #111; }
footer { border-top: 1px solid #e5e5e5; color: #999; }
.fcell { border-left: 1px solid #ececec; } .fcell:first-child { border-left: 0; }
.urlout td { border-bottom: 1px solid #f2f2f2; } .urlout .big { color: #111; }

@media (prefers-color-scheme: dark) {
  html { background: #131313; color-scheme: light dark; }
  body { background: #131313; color: #e9e9e9; }
  a { color: #8ab4f8; }
  .colophon { border-bottom-color: #2b2b2b; }
  .wm { color: #f2f2f2; }

  .mark { box-shadow: 0 0 0 1px rgba(233,233,233,.5); }
  .issue.pickup { color: #8a8a8a; }
  .seg { border-color: #3a3a3a; }
  .seg button { color: #a8a8a8; border-left-color: #2b2b2b; }
  .seg button[aria-pressed="true"] { background: #e9e9e9; color: #131313; }
  .seg button:hover:not([aria-pressed="true"]) { background: #1e1e1e; }
  h1 { color: #c4c4c4; }
  .sub, .hint, .field label, footer { color: #8a8a8a; }
  .clocks { border-top-color: #242424; border-bottom-color: #242424; }
  .clocks.two .clock + .clock { border-left-color: #242424; }
  .place b, .digits, .digits .sec { color: #f2f2f2; }
  .place .cty, .digits .ap { color: #8a8a8a; }
  .gap { color: #9a9a9a; }
  .meta { color: #8a8a8a; }
  .dial .face { fill: #131313; } .dial .idx, .dial .idx12 { stroke: #e9e9e9; }
  .dial .hair { stroke: #3a3a3a; }
  .dial .hand { fill: #e9e9e9; }
  .dial .ss { stroke: #ff6b5e; } .dial .cw { fill: #ff6b5e; }
  .dial .cap { fill: #131313; stroke: #e9e9e9; }
  .rmv { border-color: #3a3a3a; color: #8a8a8a; }
  .rmv:hover { background: #1e1e1e; color: #f2f2f2; }
  select, .lnk, .btn, input[type=text] { border-color: #3a3a3a; color: #e9e9e9;
                                         background: #1a1a1a; }
  select option { background: #1a1a1a; }
  .lnk:hover, .btn:hover { background: #262626; }
  .note { border-bottom-color: #242424; color: #a8a8a8; }
  .note b, h2, h3, strong, .urlout .big { color: #f2f2f2; }
  .note .tag { background: #262626; color: #b0b0b0; }
  main section, .cities { border-top-color: #242424; }
  p { color: #a8a8a8; }
  code { background: #1e1e1e; }
  .cityb { border-bottom-color: #202020; color: #8ab4f8; }
  .cityb .now { color: #9a9a9a; }
  .cityb:hover { background: #1b2030; }
  .cityb[aria-current="true"] { color: #f2f2f2; }
  .cityb[aria-current="true"] .now { color: #f2f2f2; }
  footer { border-top-color: #2b2b2b; }
  .fcell { border-left-color: #242424; }
  .urlout td { border-bottom-color: #202020; }
}