/* Layout: HUD bar on top (clock left, status right), giant wordmark, one readable text column framed like a terminal readout. Single dark look by choice. */
:root {
  --bg: #050608;
  --bg-2: #0b0e13;
  --line: #16202b;
  --fg: #e6edf3;
  --muted: #7d8a99;
  --dim: #3a434e;
  --blue: #7fd8ff;
  --blue-glow: rgba(127, 216, 255, .55);
  --orange: #ff8a1f;
  --orange-glow: rgba(255, 138, 31, .6);
  --green: #39ff88;
  --green-glow: rgba(57, 255, 136, .7);
  --f-display: "Orbitron", "Eurostile", "Arial Black", sans-serif;
  --f-body: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  padding-inline: clamp(16px, 4vw, 48px);
  overflow-x: hidden;
  position: relative;
}
/* technical grid backdrop */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 75%);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  pointer-events: none;
  z-index: 0;
}
.wrap { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding-block: 20px 56px; }

/* ── HUD ── */
.hud {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px 24px;
  font-family: var(--f-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}
.clock { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.clock .day { color: var(--blue); text-shadow: 0 0 10px var(--blue-glow); }
.clock .time { color: var(--fg); font-size: 1rem; font-weight: 500; }
.clock .sec { color: var(--orange); text-shadow: 0 0 8px var(--orange-glow); }
.sep { color: var(--dim); }

.status { display: flex; align-items: center; gap: 14px; }
.home-toggle {
  appearance: none; background: none; border: 1px solid var(--line); border-radius: 4px;
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  color: var(--dim); transition: color .3s, border-color .3s, box-shadow .3s;
}
.home-toggle svg { width: 18px; height: 18px; transition: filter .3s; }
.home-toggle[data-on="true"] { color: var(--blue); border-color: rgba(127,216,255,.35); box-shadow: 0 0 14px rgba(127,216,255,.18) inset; }
.home-toggle[data-on="true"] svg { filter: drop-shadow(0 0 4px var(--blue)) drop-shadow(0 0 10px var(--blue-glow)); }
.home-toggle:focus-visible { outline: 1px solid var(--orange); outline-offset: 2px; }
.online { display: flex; align-items: center; gap: 10px; color: var(--fg); }
.pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green), 0 0 14px var(--green-glow);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 4px var(--green), 0 0 8px var(--green-glow), 0 0 0 0 rgba(57,255,136,.45); opacity: 1; }
  50% { box-shadow: 0 0 8px var(--green), 0 0 20px var(--green-glow), 0 0 0 7px rgba(57,255,136,0); opacity: .75; }
}

/* ── Hero ── */
.hero { padding-block: clamp(48px, 10vw, 120px) clamp(32px, 6vw, 72px); }
.meta {
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
}
.meta b { color: var(--blue); font-weight: 500; }
h1 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(3rem, 15vw, 12.5rem);
  line-height: .9;
  letter-spacing: .02em;
  color: var(--fg);
  text-shadow: 0 0 40px rgba(127,216,255,.12);
  white-space: nowrap;
}
h1 .dot {
  color: var(--orange);
  text-shadow: 0 0 12px var(--orange), 0 0 40px var(--orange-glow);
  animation: blink 1.1s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.rule {
  margin-top: 28px; height: 2px; max-width: 100%;
  background: linear-gradient(90deg, var(--blue) 0 120px, var(--line) 120px 100%);
  box-shadow: 0 0 12px rgba(127,216,255,.25);
}

/* ── Message ── */
.msg {
  display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 32px;
}
.side { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.side div { padding-block: 6px; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 8px; }
.side span:last-child { color: var(--fg); }
.side .warn { color: var(--orange); }
.text { max-width: 64ch; min-width: 0; }
.text p { margin: 0 0 1.15em; color: #c9d3dd; font-weight: 300; font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.text p.lead { font-weight: 500; color: var(--fg); font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.5; }
.text .hl { color: var(--blue); }
.sign { margin-top: 2em; font-family: var(--f-mono); font-size: .95rem; color: var(--muted); }
.sign strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; letter-spacing: .06em; color: var(--fg); margin-top: 4px; }
.sign strong i { font-style: normal; color: var(--orange); }

footer {
  margin-top: 72px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.cursor { display: inline-block; width: .6em; height: 1em; background: var(--blue); vertical-align: -2px; animation: blink 1s steps(1, end) infinite; }

@media (max-width: 720px) {
  .msg { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .hud { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse, h1 .dot, .cursor { animation: none; }
}

/* ── WordPress extras ── */
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--orange); }
footer a { color: inherit; }
.hero--small { padding-block: 48px 32px; }
.brand { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(2.2rem, 7vw, 4.5rem); line-height: 1; }
.brand a { color: var(--fg); }
.brand .dot { color: var(--orange); text-shadow: 0 0 12px var(--orange), 0 0 40px var(--orange-glow); animation: blink 1.1s steps(1, end) infinite; }
.entries { display: grid; gap: 48px; }
.entry-title { font-family: var(--f-display); font-weight: 800; letter-spacing: .03em; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 4px; text-wrap: balance; }
.entry-title a { color: var(--fg); }
.entry-meta { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; color: var(--orange); margin-bottom: 16px; }
.entry-content { color: #c9d3dd; font-weight: 300; }
.entry-content img { max-width: 100%; height: auto; }
.nav-links { font-family: var(--f-mono); display: flex; gap: 16px; }
@media (prefers-reduced-motion: reduce) { .brand .dot { animation: none; } }

/* ── Layout: full-width header & footer, centered content ── */
body { padding-inline: 0; }
.wrap { max-width: none; margin: 0; padding-block: 0; }
.hud { padding: 12px clamp(16px, 4vw, 48px); }
.hero, .msg, .entries { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
footer { margin-top: 72px; padding: 14px clamp(16px, 4vw, 48px) 24px; }

/* ── HUD: day, date, clock and status in one size ── */
.hud { font-size: 1rem; }
.clock .time { font-size: inherit; }
@media (max-width: 720px) { .hud { font-size: .85rem; } }

/* ── Footer flags ── */
.foot-id { display: inline-flex; align-items: center; gap: 12px; }
.flags { display: inline-flex; gap: 6px; }
.flag { width: 15px; height: 10px; display: block; border-radius: 1px; opacity: .45; filter: saturate(.7); box-shadow: 0 0 0 1px var(--line); transition: opacity .3s, filter .3s; }
.foot-id:hover .flag { opacity: .9; filter: none; }

/* ── Status icons (driven by Home Assistant) ── */
.home-toggle { cursor: default; }

/* ── Terminal ── */
:root { --cyan: #2ee6f6; --cyan-glow: rgba(46, 230, 246, .45); }
.term { margin-top: 48px; background: #000; border: 1px solid #1d2a36; border-radius: 6px; overflow: hidden; font-family: var(--f-mono); font-size: .9rem; line-height: 1.6; box-shadow: 0 0 0 1px rgba(46,230,246,.05), 0 24px 60px rgba(0,0,0,.7), 0 0 48px rgba(46,230,246,.06); }
.term-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid #141c25; background: #05080b; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.term-dots { display: inline-flex; gap: 6px; }
.term-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.term-dots i:first-child { background: var(--orange); box-shadow: 0 0 6px var(--orange-glow); }
.term-dots i:nth-child(2) { background: var(--cyan); box-shadow: 0 0 6px var(--cyan-glow); }
.term-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-state { color: var(--orange); }
.term-state.done { color: var(--cyan); }
.term-body { padding: 16px 18px 6px; min-height: 13.5em; max-height: 24em; overflow-y: auto; color: var(--cyan); text-shadow: 0 0 6px rgba(46,230,246,.25); overflow-wrap: anywhere; }
.text .term-body p { margin: 0 0 .35em; font-size: inherit; font-weight: 400; color: inherit; }
.text .term-body p.o { color: var(--orange); }
.text .term-body p.u { color: var(--fg); }
.term-body .o { color: var(--orange); text-shadow: 0 0 6px rgba(255,138,31,.3); }
.term-body .u { color: var(--fg); }
.term-body .bar { white-space: pre; color: var(--orange); letter-spacing: -.02em; }
.term-body .bar .rest { color: #2a3a46; }
.term-body .pct { color: var(--cyan); display: inline-block; min-width: 4.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.term-body .caret { display: inline-block; width: .55em; height: 1.05em; background: var(--orange); vertical-align: -2px; animation: blink 1s steps(1, end) infinite; }
.term-form { display: flex; align-items: center; gap: 10px; padding: 10px 18px 16px; border-top: 1px dashed #141c25; }
.term-prompt { color: var(--orange); white-space: nowrap; }
.term-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--cyan); caret-color: var(--orange); font: inherit; padding: 4px 0; }
.term-input::placeholder { color: #2a3a46; }
.term-send { background: none; border: 0; color: var(--cyan); font: inherit; cursor: pointer; padding: 4px 0; letter-spacing: .06em; }
.term-send:hover, .term-send:focus-visible { color: var(--orange); outline: 0; }
.term-form:focus-within { background: rgba(46,230,246,.03); }
@media (max-width: 520px) { .term { font-size: .8rem; } .term-form { flex-wrap: wrap; } .term-prompt { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .term-body .caret { animation: none; } }

/* ── Sun dial (left column, under the status panel) ── */
/* ── Sun dial ── */
.sundial { --night: #1f7fb8; --twi: #b0661f; width: 100%; aspect-ratio: 1; max-width: 100%; position: relative; container-type: inline-size; margin-top: 28px; }
.sundial > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sd-hour { font-family: var(--f-mono); font-size: 13px; fill: var(--muted); text-anchor: middle; dominant-baseline: central; transition: opacity .35s ease; }
.sd-hour.major { fill: var(--fg); }
.sd-track { fill: none; stroke: #0d141b; stroke-width: 9; transition: opacity .5s ease; }
.sd-arc { fill: none; stroke-width: 6; stroke-linecap: butt; stroke-dasharray: 1 1; }
.sd-day { stroke: var(--orange); filter: drop-shadow(0 0 4px var(--orange-glow)); }
.sd-twi { stroke: var(--twi); }
.sd-night { stroke: var(--night); }
.sd-tick { stroke: #26323e; stroke-width: 1; transition: opacity .25s ease; }
.sd-needle { stroke: var(--fg); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(230,237,243,.8)) drop-shadow(0 0 10px var(--cyan-glow)); }
.sd-sun { fill: var(--orange); filter: drop-shadow(0 0 6px var(--orange)); transition: opacity .4s ease, r .4s ease; }
.sd-center { position: absolute; inset: 19%; display: grid; justify-items: center; align-content: center; text-align: center; gap: 4px; }
.sd-center > * { transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.sd-icon { width: 10cqw; height: 6.5cqw; color: var(--orange); filter: drop-shadow(0 0 4px var(--orange-glow)); }
.sd-today { font-family: var(--f-display); font-weight: 800; font-size: 6cqw; letter-spacing: .08em; text-transform: uppercase; }
.sd-grid { display: grid; grid-template-columns: 1fr 1px 1fr; column-gap: 3.5cqw; row-gap: 2.6cqw; align-items: end; width: 100%; font-variant-numeric: tabular-nums; }
.sd-grid .sep { background: var(--dim); grid-row: span 2; align-self: stretch; transform-origin: top; transition: transform .7s cubic-bezier(.2,.8,.2,1) .2s; }
.sd-label { font-size: max(8px, 3cqw); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.sd-big { font-family: var(--f-display); font-weight: 800; font-size: 7.6cqw; line-height: 1.05; }
.sd-small { font-size: 4.4cqw; color: var(--cyan); text-shadow: 0 0 6px rgba(46,230,246,.3); }
.sd-col { display: grid; gap: 1px; }
.sd-elev { font-size: max(8px, 3.1cqw); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.sd-elev b { color: var(--orange); font-weight: 500; }

/* intro: start state */
.sundial.sd-pre .sd-hour, .sundial.sd-pre .sd-tick, .sundial.sd-pre .sd-track { opacity: 0; }
.sundial.sd-pre .sd-center > * { opacity: 0; transform: translateY(6px) scale(.96); }
.sundial.sd-pre .sd-grid .sep { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) { .sundial * { transition: none !important; } }
/* ambient animation once loaded */
.sd-night { --g: rgba(31,127,184,.95); } .sd-twi { --g: rgba(176,102,31,.95); } .sd-day { --g: var(--orange); }
@keyframes sd-breathe { 0%, 100% { filter: drop-shadow(0 0 3px var(--g)); stroke-width: 6; } 50% { filter: drop-shadow(0 0 9px var(--g)) drop-shadow(0 0 20px var(--g)); stroke-width: 7.5; } }
.sd-live .sd-arc.sd-active { animation: sd-breathe 3.2s ease-in-out infinite; }
.sd-shimmer { fill: none; stroke: #ffe6cc; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .07 .93; opacity: 0; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px var(--orange)); pointer-events: none; transition: opacity .8s ease; }
@keyframes sd-run { from { stroke-dashoffset: 1.07; } to { stroke-dashoffset: 0; } }
.sd-live .sd-shimmer { opacity: .85; animation: sd-run 5.5s linear infinite; }
.sd-halo { fill: none; stroke: var(--orange); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
@keyframes sd-halo { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(3.6); opacity: 0; } }
.sd-live .sd-halo.on { animation: sd-halo 2.4s ease-out infinite; }
.sd-live .sd-halo.on.b { animation-delay: 1.2s; }
@keyframes sd-needle { 0%, 100% { filter: drop-shadow(0 0 3px rgba(230,237,243,.7)) drop-shadow(0 0 8px var(--cyan-glow)); } 50% { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px var(--cyan)); } }
.sd-live .sd-needle { animation: sd-needle 2.4s ease-in-out infinite; }
@keyframes sd-icon { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 3px var(--orange-glow)); } 50% { transform: translateY(-2px); filter: drop-shadow(0 0 9px var(--orange)); } }
.sd-live .sd-icon { animation: sd-icon 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sundial * { animation: none !important; } }
.msg { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.side-col { min-width: 0; }
@media (max-width: 720px) { .msg { grid-template-columns: minmax(0, 1fr); } .sundial { width: min(340px, 100%); margin-inline: auto; } }

/* ── Moon dial (left column, under the sun dial) ── */
/* ── Moon dial ── */
.moondial { --moon: #bfe9ff; --moon-glow: rgba(150,220,255,.75); --down: #1b2833; width: 100%; aspect-ratio: 1; max-width: 100%; position: relative; container-type: inline-size; margin-top: 28px; }
.moondial > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.md-hour { font-family: var(--f-mono); font-size: 13px; fill: var(--muted); text-anchor: middle; dominant-baseline: central; transition: opacity .35s ease; }
.md-hour.major { fill: var(--fg); }
.md-track { fill: none; stroke: #0d141b; stroke-width: 9; transition: opacity .5s ease; }
.md-arc { fill: none; stroke-width: 6; stroke-linecap: butt; stroke-dasharray: 1 1; }
.md-up { stroke: var(--moon); filter: drop-shadow(0 0 4px var(--moon-glow)); }
.md-down { stroke: var(--down); }
.md-tick { stroke: #26323e; stroke-width: 1; transition: opacity .25s ease; }
.md-needle { stroke: var(--fg); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(230,237,243,.8)) drop-shadow(0 0 10px var(--cyan-glow)); }
.md-dot { fill: var(--moon); filter: drop-shadow(0 0 6px var(--moon)); transition: opacity .4s ease; }
.md-center { position: absolute; inset: 19%; display: grid; justify-items: center; align-content: center; text-align: center; gap: 1.4cqw; }
.md-center > * { transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.md-moon { width: 21cqw; height: 21cqw; overflow: visible; }
.md-disc { fill: #0c141b; stroke: #22303c; stroke-width: 1; }
.md-lit { fill: #e9f6ff; filter: drop-shadow(0 0 3px var(--moon-glow)) drop-shadow(0 0 9px var(--moon-glow)); }
.md-crater { fill: #0c141b; opacity: .13; }
.md-phase { font-size: max(8px, 3cqw); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.md-pct { font-family: var(--f-display); font-weight: 800; font-size: 9cqw; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.md-pct small { font-size: .5em; color: var(--cyan); margin-left: .1em; }
.md-grid { display: grid; grid-template-columns: 1fr 1px 1fr; column-gap: 3.5cqw; width: 100%; font-variant-numeric: tabular-nums; margin-top: 1cqw; }
.md-grid .sep { background: var(--dim); align-self: stretch; transform-origin: top; transition: transform .7s cubic-bezier(.2,.8,.2,1) .2s; }
.md-col { display: grid; gap: 1px; }
.md-label { font-size: max(8px, 3cqw); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.md-time { font-family: var(--f-display); font-weight: 800; font-size: 6.4cqw; line-height: 1.05; }
.md-elev { font-size: max(8px, 3.1cqw); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.md-elev b { color: var(--cyan); font-weight: 500; }

/* intro: start state */
.moondial.md-pre .md-hour, .moondial.md-pre .md-tick, .moondial.md-pre .md-track { opacity: 0; }
.moondial.md-pre .md-center > * { opacity: 0; transform: translateY(6px) scale(.96); }
.moondial.md-pre .md-grid .sep { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) { .moondial * { transition: none !important; } }

/* ambient animation once loaded */
@keyframes md-breathe { 0%, 100% { filter: drop-shadow(0 0 3px var(--moon-glow)); stroke-width: 6; } 50% { filter: drop-shadow(0 0 9px var(--moon-glow)) drop-shadow(0 0 20px var(--moon-glow)); stroke-width: 7.5; } }
.md-live .md-arc.md-active.md-up { animation: md-breathe 3.6s ease-in-out infinite; }
@keyframes md-glow { 0%, 100% { filter: drop-shadow(0 0 3px var(--moon-glow)) drop-shadow(0 0 8px var(--moon-glow)); } 50% { filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 18px var(--moon-glow)) drop-shadow(0 0 30px rgba(46,230,246,.35)); } }
.md-live .md-lit { animation: md-glow 4s ease-in-out infinite; }
.md-shimmer { fill: none; stroke: #ffffff; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .07 .93; opacity: 0; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px var(--cyan)); pointer-events: none; transition: opacity .8s ease; }
@keyframes md-run { from { stroke-dashoffset: 1.07; } to { stroke-dashoffset: 0; } }
.md-live .md-shimmer.on { opacity: .8; animation: md-run 6.5s linear infinite; }
.md-halo { fill: none; stroke: var(--moon); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
@keyframes md-halo { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.6); opacity: 0; } }
.md-live .md-halo.on { animation: md-halo 2.8s ease-out infinite; }
.md-live .md-halo.on.b { animation-delay: 1.4s; }
@keyframes md-needle { 0%, 100% { filter: drop-shadow(0 0 3px rgba(230,237,243,.7)) drop-shadow(0 0 8px var(--cyan-glow)); } 50% { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px var(--cyan)); } }
.md-live .md-needle { animation: md-needle 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .moondial * { animation: none !important; } }
@media (max-width: 720px) { .moondial { width: min(340px, 100%); margin-inline: auto; } }

/* ── Mobile: sun and moon dials side by side ── */
@media (max-width: 720px) {
  .side-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; align-items: start; }
  .side-col .side { grid-column: 1 / -1; }
  .side-col .sundial, .side-col .moondial { width: 100%; margin-inline: 0; margin-top: 20px; }
  .sd-hour, .md-hour { font-size: 19px; }
  .sd-label, .md-label, .md-phase { font-size: max(7px, 3cqw); letter-spacing: .06em; }
  .sd-elev, .md-elev { font-size: max(7px, 3.1cqw); letter-spacing: .04em; }
  .sd-elev, .md-elev, .sd-icon { display: none; }
  .sd-center, .md-center { inset: 17%; gap: 2px; }
  .md-moon { width: 17cqw; height: 17cqw; }
  .sd-grid { row-gap: 1.5cqw; }
}

/* ── Weather card (left column, under the moon dial) ── */
/* ── Weather card ── */
.wx { --cloud: #a9bccb; --cloud-back: #5f7384; --rain: var(--cyan); container-type: inline-size; position: relative; width: 100%; border: 1px solid var(--line); border-radius: 6px; background: linear-gradient(180deg, #080c11, #05080b); padding: 12px 14px 14px; overflow: hidden; margin-top: 28px; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.wx::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(46,230,246,.04), inset 0 0 30px rgba(46,230,246,.03); }
.wx-head { display: flex; justify-content: space-between; gap: 8px; font-size: max(8px, 3.2cqw); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.wx-head b { color: var(--cyan); font-weight: 500; }
.wx-body { display: grid; grid-template-columns: 21cqw minmax(0, 1fr) auto; align-items: center; gap: 4cqw; }
.wx-icon { width: 21cqw; height: 21cqw; display: block; overflow: visible; }
.wx-temp { font-family: var(--f-display); font-weight: 800; font-size: 11cqw; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-temp sup { font-size: .45em; color: var(--orange); vertical-align: top; position: relative; top: .15em; margin-left: .05em; }
.wx-cond { font-size: max(8px, 3.4cqw); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-wind { display: grid; justify-items: center; gap: 3px; padding-left: 4cqw; border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.wx-compass { width: 13cqw; height: 13cqw; display: block; overflow: visible; }
.wx-compass .ring { fill: none; stroke: #26323e; stroke-width: 1.5; }
.wx-compass .n { fill: var(--muted); font-family: var(--f-mono); font-size: 7px; text-anchor: middle; dominant-baseline: central; }
.wx-compass .arrow { fill: var(--cyan); filter: drop-shadow(0 0 3px var(--cyan-glow)); transform-origin: 20px 20px; }
.wx-speed { font-family: var(--f-display); font-weight: 800; font-size: 5cqw; line-height: 1; white-space: nowrap; }
.wx-speed small { font-family: var(--f-mono); font-weight: 400; font-size: .52em; color: var(--muted); margin-left: .2em; letter-spacing: .04em; }
.wx-dir { font-size: max(8px, 3.2cqw); letter-spacing: .14em; color: var(--cyan); }

/* icon parts */
.i-sun-core { fill: var(--orange); filter: drop-shadow(0 0 4px var(--orange)) drop-shadow(0 0 10px var(--orange-glow)); }
.i-rays line { stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
.i-rays { transform-origin: 32px 32px; animation: i-spin 14s linear infinite; }
.i-moon { fill: #dff3ff; filter: drop-shadow(0 0 4px rgba(150,220,255,.8)); }
.i-star { fill: #dff3ff; animation: i-twinkle 2.4s ease-in-out infinite; }
.i-star.b { animation-delay: 1.1s; }
.i-cloud { fill: var(--cloud); }
.i-cloud.back { fill: var(--cloud-back); }
.i-drift { animation: i-drift 5s ease-in-out infinite; }
.i-drift.slow { animation-duration: 7s; animation-direction: reverse; }
.i-drop { stroke: var(--rain); stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--cyan-glow)); animation: i-fall 1s linear infinite; }
.i-drop.d2 { animation-delay: .33s; } .i-drop.d3 { animation-delay: .66s; }
.i-flake { fill: #eaf6ff; animation: i-snow 2.6s linear infinite; }
.i-flake.d2 { animation-delay: .9s; } .i-flake.d3 { animation-delay: 1.7s; }
.i-fog line { stroke: var(--cloud); stroke-width: 3; stroke-linecap: round; animation: i-fog 4s ease-in-out infinite; }
.i-fog line:nth-child(2) { animation-delay: -1.3s; opacity: .7; } .i-fog line:nth-child(3) { animation-delay: -2.6s; opacity: .5; }
.i-bolt { fill: var(--orange); filter: drop-shadow(0 0 5px var(--orange)); animation: i-flash 2.2s steps(1, end) infinite; }
@keyframes i-spin { to { transform: rotate(360deg); } }
@keyframes i-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes i-drift { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(2px); } }
@keyframes i-fall { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
@keyframes i-snow { 0% { transform: translate(0, -4px); opacity: 0; } 20% { opacity: 1; } 50% { transform: translate(2px, 4px); } 100% { transform: translate(-1px, 12px); opacity: 0; } }
@keyframes i-fog { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes i-flash { 0%, 62%, 70%, 100% { opacity: 0; } 64%, 74% { opacity: 1; } }

/* intro */
.wx.wx-pre { opacity: 0; transform: translateY(8px); }
.wx-icon { transition: opacity .5s ease .25s, transform .7s cubic-bezier(.2,.8,.2,1) .25s; }
.wx.wx-pre .wx-icon { opacity: 0; transform: scale(.6); }
.wx-scan { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(46,230,246,.14), transparent); transform: translateX(-100%); }
.wx.wx-run .wx-scan { animation: wx-scan 1.2s ease-out .15s 1 both; }
@keyframes wx-scan { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .wx, .wx * { animation: none !important; transition: none !important; } }
@media (max-width: 720px) { .side-col .wx { grid-column: 1 / -1; margin-top: 20px; } }

/* ── Layout v2: message + terminal side by side, live telemetry as its own band ── */
.hero { padding-block: clamp(40px, 8vw, 96px) clamp(28px, 4vw, 48px); }
.hero, .intro, .tele { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }

.intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.intro .text { max-width: 62ch; }
.term-col { min-width: 0; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 24px); }
.term-col .term { margin-top: 0; }
.term-body p { margin: 0 0 .35em; font-size: inherit; font-weight: 400; }
.term-body p.o { color: var(--orange); }
.term-body p.u { color: var(--fg); }
.term-body { min-height: 16em; }

.tele { margin-top: clamp(56px, 8vw, 96px); }
.tele-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-bottom: 12px; margin-bottom: 28px; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); position: relative; }
.tele-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 2px; background: var(--orange); box-shadow: 0 0 12px rgba(255,138,31,.35); }
.tele-head span:first-child { color: var(--fg); }
.tele-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: center; }
.tele-grid .sundial, .tele-grid .moondial { margin: 0; width: 100%; }
.tele-side { display: grid; gap: 22px; align-content: center; min-width: 0; }
.tele-side .side { display: block; }
.tele-side .wx { margin-top: 0; }

/* tablet: dials side by side, status + weather side by side underneath */
@media (max-width: 1000px) {
  .intro { grid-template-columns: minmax(0, 1fr); }
  .term-col { position: static; }
  .intro .text { max-width: 64ch; }
  .tele-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tele-side { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
}
/* phone: weather and status stacked */
@media (max-width: 720px) {
  .tele-grid { gap: 12px; }
  .tele-side { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
  .tele-side .side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
}

/* ── Week number + visitor IP ── */
.clock .wk { color: var(--fg); letter-spacing: .06em; }
.text .lead .vip { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-shadow: 0 0 12px rgba(127,216,255,.35); }

/* ── Terminal: visitor IP + map ── */
.term-body .g { color: var(--green); text-shadow: 0 0 8px var(--green-glow); }
.term-body { max-height: 38em; }
.t-map { position: relative; height: 180px; margin: .5em 0 .8em; border: 1px solid #1d2a36; border-radius: 4px; overflow: hidden; background: #03070a; }
.t-tiles { position: absolute; inset: 0; transform: scale(2.4); filter: blur(3px); opacity: 0; transition: transform 1.6s cubic-bezier(.2,.8,.2,1), filter 1.2s ease, opacity .8s ease; }
.t-tiles img { position: absolute; width: 256px; height: 256px; max-width: none; filter: invert(1) grayscale(1) brightness(.62) contrast(1.35) sepia(1) hue-rotate(150deg) saturate(2.4); }
.t-map.on .t-tiles { transform: scale(1); filter: blur(0); opacity: 1; }
.t-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(46,230,246,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(46,230,246,.08) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
.t-map::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 40px rgba(0,0,0,.85); pointer-events: none; }
.t-sweep { position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(46,230,246,.16) 48%, transparent 52%); transform: translateY(-100%); pointer-events: none; }
.t-map.on .t-sweep { animation: t-sweep 3.2s linear .6s infinite; }
@keyframes t-sweep { to { transform: translateY(100%); } }
.t-cross i { position: absolute; background: rgba(255,138,31,.55); opacity: 0; transition: opacity .5s ease 1.1s; }
.t-cross .h { left: 0; right: 0; top: 50%; height: 1px; }
.t-cross .v { top: 0; bottom: 0; left: 50%; width: 1px; }
.t-map.on .t-cross i { opacity: 1; }
.t-pin { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transition: opacity .4s ease 1.3s; }
.t-map.on .t-pin { opacity: 1; }
.t-pin b { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green), 0 0 18px var(--green-glow); }
.t-pin b.r { background: none; border: 1.5px solid var(--green); box-shadow: none; animation: t-ping 2.2s ease-out 1.4s infinite; opacity: 0; }
.t-pin b.r2 { animation-delay: 2.5s; }
@keyframes t-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }
.t-label { position: absolute; left: 10px; top: 8px; font-size: .68rem; letter-spacing: .12em; color: var(--green); text-shadow: 0 0 6px var(--green-glow); background: rgba(0,0,0,.55); padding: 2px 6px; border-radius: 2px; }
.t-attr { position: absolute; right: 6px; bottom: 4px; font-size: .56rem; letter-spacing: .04em; color: rgba(230,237,243,.55); background: rgba(0,0,0,.5); padding: 1px 4px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .t-tiles, .t-cross i, .t-pin { transition: none; } .t-sweep, .t-pin b.r { animation: none; } }

/* ── Terminal: virus prank lines ── */
:root { --red: #ff3b4d; --red-glow: rgba(255,59,77,.55); }
.term-body p.r, .text .term-body p.r { color: var(--red); text-shadow: 0 0 8px var(--red-glow); }
.term-body p.r .bar, .term-body p.r .pct { color: var(--red); }
.term-body p.r .bar .rest { color: #3a1a1f; }
.term-body p.gl, .text .term-body p.gl { color: var(--green); text-shadow: 0 0 8px var(--green-glow); }
.t-virus { width: 1.15em; height: 1.15em; vertical-align: -.22em; color: var(--red); filter: drop-shadow(0 0 4px var(--red)); animation: t-virus 2.4s linear infinite; }
@keyframes t-virus { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .t-virus { animation: none; } }

/* ── Terminal chat ── */
.term-body p.dim, .text .term-body p.dim { color: var(--muted); font-style: italic; }
.term-input:disabled { opacity: .5; }

/* ── Live webcam under the terminal ── */
.term-col:has(.cam) { position: static; }
.cam { margin-top: 20px; border: 1px solid #1d2a36; border-radius: 6px; overflow: hidden; background: #000; font-family: var(--f-mono); box-shadow: 0 0 0 1px rgba(46,230,246,.05), 0 24px 60px rgba(0,0,0,.7), 0 0 48px rgba(46,230,246,.06); }
.cam-bar, .cam-foot { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #05080b; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cam-bar { border-bottom: 1px solid #141c25; }
.cam-foot { border-top: 1px solid #141c25; justify-content: space-between; font-size: .62rem; color: var(--dim); }
.cam-rec { display: inline-flex; align-items: center; gap: 7px; color: var(--red, #ff3b4d); }
.cam-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--red, #ff3b4d); box-shadow: 0 0 8px var(--red, #ff3b4d); animation: cam-rec 1.4s steps(1, end) infinite; }
@keyframes cam-rec { 50% { opacity: .15; } }
.cam-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-time { color: var(--cyan); font-variant-numeric: tabular-nums; }
#cam-state { color: var(--orange); }
#cam-state.ok { color: var(--green); }
.cam-view { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #020405; overflow: hidden; }
.cam-view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; filter: saturate(.85) contrast(1.05); opacity: 0; transition: opacity 1.2s ease; }
.cam.on .cam-view iframe { opacity: 1; }
.cam-shield { position: absolute; inset: 0; z-index: 3; cursor: default; }
.cam-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55)); }
.cam-fx i { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(46,230,246,.7); }
.cam-fx .tl { left: 10px; top: 10px; border-left-width: 2px; border-top-width: 2px; }
.cam-fx .tr { right: 10px; top: 10px; border-right-width: 2px; border-top-width: 2px; }
.cam-fx .bl { left: 10px; bottom: 10px; border-left-width: 2px; border-bottom-width: 2px; }
.cam-fx .br { right: 10px; bottom: 10px; border-right-width: 2px; border-bottom-width: 2px; }
.cam-boot { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; color: var(--cyan); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; background: #020405; transition: opacity .8s ease .2s; }
.cam-boot span::after { content: ""; display: inline-block; width: 2.2em; text-align: left; animation: cam-dots 1.2s steps(4, end) infinite; }
@keyframes cam-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.cam.on .cam-boot { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cam-rec i, .cam-boot span::after { animation: none; } }

/* ── Title always fits its column (Orbitron is wide: WYBRAND. ≈ 6.6em) ── */
.hero h1 { font-size: clamp(2.6rem, 13.4vw, 10.2rem); }