/* Base reset. The claude.ai artifact host supplies these when the page is published there; standalone we set them ourselves. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}

/* Layout: one full-bleed night scene; chart-style lettering sits on top of it, left-aligned, with instrument readouts top right. Single dark look by design. */
:root{
  color-scheme:dark;
  --night:#060c13;
  --ink:#e4ece9;
  --mute:#9bb0b1;
  --aurora:#74efb6;
  --lamp:#ffbb72;
  --line:rgba(228,236,233,.2);
  --display:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --text:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
html,body{height:100%}
body{background:var(--night);color:var(--ink);font-family:var(--text);overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#lake{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;background:var(--night)}
.hud{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;
  padding-top:calc(env(safe-area-inset-top,0px) + 14px);
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  text-shadow:0 1px 10px rgba(3,7,12,.9)}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;min-height:3rem}
.name{display:flex;flex-direction:column;gap:2px}
.name .lake{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.5rem;line-height:1.1;letter-spacing:.01em}
.pos,.read,.note,.hint{font-family:var(--data);font-size:.72rem;letter-spacing:.06em;color:#c3d0d0;font-variant-numeric:tabular-nums}
.read{display:flex;flex-direction:column;gap:4px;align-items:flex-end;text-align:right;color:var(--ink);font-size:.8rem}
.read .k{color:var(--mute);text-transform:uppercase;letter-spacing:.12em;font-size:.68rem}
.read .cot{color:var(--lamp)}
.read .cot .k{color:var(--lamp);opacity:.8}
.arrow{display:inline-block;width:1em;text-align:center;transition:transform .15s linear}
.note,.caption{text-shadow:0 1px 3px rgba(3,7,12,.95),0 0 14px rgba(3,7,12,.8)}
.bottom{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.caption{margin:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:1.9rem;color:var(--lamp);opacity:0;transition:opacity 1.2s ease}
.caption.on{opacity:1}
.note{margin:0;transition:opacity 2s ease}
.note.off{opacity:0}
.intro{pointer-events:auto;display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:27rem;transition:opacity .7s ease}
.intro.gone{opacity:0;pointer-events:none}
.intro h1{margin:0;font-family:var(--display);font-style:italic;font-weight:600;font-size:clamp(2.7rem,11vw,4.6rem);line-height:.95;letter-spacing:.005em;text-wrap:balance}
.intro .pos{font-size:.74rem}
.intro p.lede{margin:0;font-size:.98rem;line-height:1.5;color:var(--ink);max-width:34ch}
.intro .hint{margin:0;line-height:1.6}
button.go{font-family:var(--data);font-weight:500;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#04140d;background:var(--aurora);border:0;border-radius:2px;padding:0 22px;min-height:48px;cursor:pointer;text-shadow:none}
button.go:hover{background:#9af5cb}
button.go:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
.scrim{position:fixed;left:0;right:0;bottom:0;height:62%;pointer-events:none;background:linear-gradient(to top,rgba(6,12,19,.92),rgba(6,12,19,.55) 45%,rgba(6,12,19,0));transition:opacity .9s ease}
.scrim.gone{opacity:0}
.veil{position:fixed;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 120px);pointer-events:none;background:linear-gradient(to bottom,rgba(6,12,19,.6),rgba(6,12,19,0))}
.stick{position:fixed;left:0;top:0;width:116px;height:116px;margin:-58px 0 0 -58px;border:1px solid var(--line);border-radius:50%;pointer-events:none;background:rgba(6,12,19,.25)}
.stick i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(116,239,182,.32);border:1px solid var(--aurora)}
#fail{position:fixed;inset:0;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:1rem;line-height:1.5;color:var(--ink);background:var(--night)}
@media (prefers-reduced-motion:reduce){.caption,.note,.intro,.scrim,.arrow{transition:none}}