/* After dark: a full-width window onto the night, rain on the glass. Its edges dissolve into the page. */
.dark-window{position:relative;width:100vw;margin:var(--s-8) 0 0 calc(50% - 50vw);height:min(78vh,760px);overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.dark-window canvas{display:block;width:100%;height:100%;cursor:crosshair;background:#120b05}
.dark-window figcaption{position:absolute;left:max(16px,calc(50vw - 640px));bottom:16%;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(239,233,220,.5);pointer-events:none}
@media (max-width:640px){.dark-window{height:62vh}}

/* Cursor over the rain window (Claude): the disc becomes a short strip of lit LEDs - the scroll rail's marker laid
   on its side, same diodes, same faint red/cyan fringe and warm bloom - sweeping side to side like a wiper blade,
   with a quiet mono "wipe" under it. It reads as the site's own light, not an icon. */
.cursor{ transition:opacity .3s var(--ease), background-color .35s cubic-bezier(.22,1,.36,1); }
.cursor::before, .cursor::after{ content:""; position:absolute; left:50%; top:50%; opacity:0; pointer-events:none;
  transition:opacity .35s cubic-bezier(.22,1,.36,1); }
.cursor::before{ width:60px; height:8px; margin:-4px 0 0 -30px;
  background:
    radial-gradient(circle at 2px 2px, #fff6e6 1.3px, transparent 1.7px) 0 0/4px 4px,
    radial-gradient(circle at 2px 2px, rgba(255,60,40,.5) 1.3px, transparent 1.7px) 0 1px/4px 4px,
    radial-gradient(circle at 2px 2px, rgba(40,215,255,.5) 1.3px, transparent 1.7px) 0 -1px/4px 4px;
  -webkit-mask:linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
          mask:linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
  filter:drop-shadow(0 0 1px rgba(0,0,0,.55)) drop-shadow(0 0 3px rgba(255,243,230,.95)) drop-shadow(0 0 12px rgba(255,190,110,.7)); }
.cursor::after{ content:"‹ wipe ›"; width:max-content; margin:14px 0 0; transform:translateX(-50%); white-space:pre;
  font:500 9px/1 var(--mono,ui-monospace,monospace); letter-spacing:.28em; text-transform:uppercase; color:rgba(255,246,230,.92); text-shadow:0 0 1px rgba(0,0,0,.6), 0 0 8px rgba(255,190,110,.55); }
.cursor[data-k="glass"]{ -webkit-mask-image:none; mask-image:none; mix-blend-mode:normal; background-color:rgba(255,255,255,0); }
.cursor[data-k="glass"]::before{ opacity:1; animation:cursor-wipe 1.15s cubic-bezier(.45,0,.55,1) infinite alternate; }
.cursor[data-k="glass"]::after{ opacity:1; }
@keyframes cursor-wipe{ from{ transform:translateX(-7px); } to{ transform:translateX(7px); } }