:root {
  --bg: #0b0f14;
  --bg-2: #10161d;
  --line: #1f2a36;
  --text: #d7dee7;
  --muted: #7d8b9b;
  --accent: #7cf29a;
  --accent-2: #f2c27c;
  --mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wrap { max-width: 680px; margin: 0 auto; padding: 0 20px; }

/* header */
.site-head { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.site-head .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px 20px; flex-wrap: wrap; }
.brand { font-family: var(--mono); font-size: 15px; letter-spacing: .02em; color: var(--text); }
.brand .dollar { color: var(--accent); margin-right: 8px; }
.brand .cursor { display: inline-block; width: 9px; height: 1.05em; background: var(--accent); margin-left: 6px; vertical-align: text-bottom; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.nav { font-family: var(--mono); font-size: 13px; display: flex; gap: 18px; }
.nav a { color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); text-decoration: none; }

/* places / weather */
.places { padding: 46px 0 40px; }
.places h1 { font-family: var(--mono); font-weight: 500; font-size: 21px; line-height: 1.4; margin: 0 0 34px; letter-spacing: -.01em; color: var(--muted); }
.city-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.city { display: grid; grid-template-columns: 1fr auto 132px 62px; align-items: baseline; gap: 14px;
        padding: 15px 0; border-bottom: 1px solid var(--line); font-family: var(--mono); opacity: .45; transition: opacity .5s ease; }
.city.live { opacity: 1; }
.city .nm { font-size: 17px; font-weight: 500; color: var(--text); letter-spacing: -.01em; }
.city .tm { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.city .cond { font-size: 13px; color: var(--muted); text-align: left; }
.city .tp { font-size: 19px; font-weight: 600; color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }
.city.night .tp { color: #8fa6d8; }
.city.night .nm { color: #b8c3cf; }
.places-note { margin-top: 20px; font-family: var(--mono); font-size: 12px; color: #4a5666; }
@media (max-width: 560px) {
  .places h1 { font-size: 18px; }
  .city { grid-template-columns: 1fr 58px; grid-template-areas: "nm tp" "meta tp"; gap: 2px 10px; }
  .city .nm { grid-area: nm; }
  .city .tm { grid-area: meta; }
  .city .cond { grid-area: meta; margin-left: 62px; }
  .city .tp { grid-area: tp; align-self: center; }
}

/* footer */
.site-foot { border-top: 1px solid var(--line); padding: 26px 0 40px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--text); }
::selection { background: var(--accent); color: #06130a; }

/* hover weather — canvas particles per city row */
.city { position: relative; overflow: hidden; }
.city > span { position: relative; z-index: 2; }
.wx-canvas { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; }
.city.wx-on { background: rgba(4, 8, 13, .55); }
.city.wx-on .nm, .city.wx-on .tm, .city.wx-on .cond, .city.wx-on .tp {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .92), 0 0 10px rgba(0, 0, 0, .7);
}
@media (prefers-reduced-motion: reduce) { .wx-canvas { display: none !important; } }