/* A live, white-paper sky behind the intro, with the content above the canvas. */
.intro { isolation: isolate; min-height: 420px; }
.sky-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--sky-left, 0px);
  width: var(--sky-width, 100%);
  z-index: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.sky-backdrop canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  /* One finger explores the sky; two fingers can still zoom the page. */
  touch-action: pinch-zoom;
}
.sky-backdrop canvas.is-dragging { cursor: grabbing; }
.sky-backdrop canvas:focus-visible { outline-offset: -5px; }
.intro-identity, .intro-copy { position: relative; z-index: 1; pointer-events: none; }
.intro h1, .intro .education-line, .intro-bio, .intro-links a { pointer-events: auto; }
.sky-toolbar {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  pointer-events: none;
}
.sky-status-line { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 12px; font-size: 12px; white-space: nowrap; }
.sky-status-line > span:first-child { color: #333; }
.sky-live { display: inline-flex; align-items: baseline; gap: 7px; }
.sky-live .status-indicator { align-self: center; margin-inline: -6px; }
.sky-live:not([data-state="live"]) .status-indicator { display: none; }
#sky-time { font-variant-numeric: tabular-nums; }
.sky-clock { position: relative; pointer-events: auto; }
.sky-clock-button { padding: 6px 0; margin: -6px 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted #aaa; text-underline-offset: 3px; }
.sky-clock-button:hover, .sky-clock-button:focus-visible { color: #222; }
.sky-date-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 7px 10px; border: 1px solid var(--rule); border-radius: 5px; background: white; box-shadow: 0 3px 12px #00000008; color: #555; white-space: nowrap; font-size: 11px; }
.sky-date-tooltip::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 10px; }
.sky-actions { display: flex; align-items: center; gap: 20px; white-space: nowrap; }
.sky-bearing { display: flex; align-items: center; gap: 8px; color: #444; font-size: 12px; font-weight: 500; }
.sky-compass { width: 23px; height: 23px; flex: 0 0 auto; }
.sky-compass circle { fill: none; stroke: #bbb; stroke-width: .8; }
.compass-north { fill: none; stroke: #888; stroke-width: 1; }
#sky-compass-needle path { fill: currentColor; }
.intro:has(canvas.is-dragging) .sky-bearing { color: #000; }
#sky-direction { min-width: 130px; font-variant-numeric: tabular-nums; }
.sky-actions button { padding: 8px 0; border: 0; background: transparent; font-size: 11px; color: #626262; }
.sky-actions button:hover { color: #000; }
.sky-actions button:disabled { opacity: .5; cursor: default; }
.sky-actions button, .sky-options { pointer-events: auto; }
.sky-options { position: relative; font-size: 12px; }
.sky-options > summary { display: flex; align-items: center; gap: 7px; min-height: 36px; list-style: none; cursor: pointer; }
.sky-options > summary::-webkit-details-marker { display: none; }
.sky-options > summary::after { content: ""; width: 5px; height: 5px; border-right: 1px solid; border-bottom: 1px solid; transform: translateY(-2px) rotate(45deg); }
.sky-options[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.sky-panel { position: absolute; right: 0; bottom: calc(100% + 6px); width: 200px; padding: 15px 18px; border: 1px solid var(--rule); border-radius: 8px; background: white; box-shadow: 0 6px 24px #00000008; white-space: normal; color: #626262; }
.sky-panel label { display: flex; align-items: center; gap: 9px; min-height: 30px; cursor: pointer; }
.sky-panel input { width: 15px; height: 15px; margin: 0; accent-color: #333; }
.sky-source { display: flex; gap: 14px; font-size: 10px; line-height: 1.6; margin-top: 10px; }
.sky-source a { text-decoration-color: #bbb; }
.site-footer { align-items: center; gap: 16px; }
@media (max-width: 900px) {
  .sky-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .sky-actions { width: 100%; }
  .sky-bearing { margin-right: auto; }
}
@media (max-width: 760px) {
  .intro { min-height: 460px; padding-bottom: 180px; }
  .intro h1, .intro .education-line, .intro-bio { pointer-events: none; }
  .intro a { pointer-events: auto; }
  .sky-toolbar { bottom: 16px; }
  .sky-status-line { gap: 10px; font-size: 11px; }
  .sky-actions { gap: 16px; }
  .sky-bearing { gap: 6px; font-size: 11px; }
  #sky-direction { min-width: 0; }
  .sky-options > summary, .sky-actions button { min-height: 40px; }
}
@media print { .sky-backdrop, .sky-toolbar { display: none; } .intro { min-height: 0; } }