:root{--ink:#F5EFE6;--dim:rgba(245,239,230,.62);--f-wide:"Archivo","Arial Black",sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,monospace}
*{box-sizing:border-box}
html,body{margin:0;background:#07060A;color:var(--ink)}
body{font-family:var(--f-wide);-webkit-font-smoothing:antialiased}
.jw-gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.jw-run{height:3000vh}

.jw-hud{position:fixed;inset:0;pointer-events:none;z-index:2}
.jw-mark{position:absolute;left:clamp(16px,3vw,36px);top:clamp(16px,3vw,32px);margin:0;font-stretch:125%;font-weight:800;font-size:13px;letter-spacing:.24em}
.jw-mark span{margin-left:.8em;font-family:var(--f-mono);font-weight:400;letter-spacing:.1em;color:var(--dim)}
/* the scroll cue: 999 stacked, each 9 lighting up in turn from the top down, gone once you start */
.jw-cue{position:absolute;left:50%;bottom:clamp(20px,4vh,40px);transform:translateX(-50%);display:grid;justify-items:center;line-height:.78;font-stretch:125%;font-weight:800;font-size:clamp(22px,3.2vh,32px);color:var(--ink);text-shadow:0 0 18px rgba(0,0,0,.35);transition:opacity .6s,color .6s}
.jw-cue span{opacity:.14;animation:cue 1.6s cubic-bezier(.5,0,.3,1) infinite}
.jw-cue span:nth-child(2){animation-delay:.18s}.jw-cue span:nth-child(3){animation-delay:.36s}
@keyframes cue{0%{opacity:.14;transform:translateY(-8px)}26%{opacity:1;transform:translateY(0)}60%,100%{opacity:.14;transform:translateY(6px)}}
.is-moving .jw-cue{opacity:0}


.jw-fine{position:fixed;right:clamp(16px,3vw,32px);bottom:16px;z-index:3;margin:0;max-width:40ch;font-family:var(--f-mono);font-size:10.5px;line-height:1.5;color:rgba(245,239,230,.45);text-align:right}
.jw-fine a{color:inherit}
@media (max-width:700px){.jw-fine{left:16px;right:16px;text-align:left;bottom:10px}.jw-cue{bottom:132px}}
@media (prefers-reduced-motion:reduce){.jw-cue span{animation:none;opacity:.8}}

/* while the frame is mostly white paper (the start of Goodbye & Good Riddance), the fine print goes dark like the ink */
.jw-fine{transition:color .6s}
.on-paper .jw-fine{color:#16151A}
.on-paper .jw-cue{color:#16151A;text-shadow:none}

/* the end: Channel 999 signs off like the After Hours TV, and its channel number stays on the dark screen */
.jw-osd{position:absolute;right:clamp(16px,3vw,36px);top:clamp(12px,2.6vw,28px);margin:0;font:400 clamp(1.7rem,4.4vw,3.4rem)/1 "VT323","IBM Plex Mono",monospace;letter-spacing:.04em;color:#7DFF9B;
  text-shadow:0 0 10px rgba(125,255,155,.55),2px 2px 0 rgba(0,0,0,.7);opacity:0;transition:opacity .5s}
.is-off .jw-osd{opacity:1}

/* the work-in-progress note under the name: there when you arrive and again at the end, out of the way in between */
.jw-wip{position:fixed;left:clamp(16px,3vw,36px);top:calc(clamp(16px,3vw,32px) + 24px);z-index:3;margin:0;display:flex;align-items:center;gap:8px;max-width:min(46ch,calc(100vw - 32px));
  font-family:var(--f-mono);font-size:12px;line-height:1.4;color:var(--ink);text-shadow:0 1px 10px rgba(0,0,0,.6);transition:opacity .6s}
.jw-wip i{flex:none;width:7px;height:7px;border-radius:50%;background:#FF4F4F;box-shadow:0 0 8px #FF4F4F;animation:wip 1.6s ease-in-out infinite}
@keyframes wip{50%{opacity:.25}}
.is-moving .jw-wip{opacity:0}
.is-off .jw-wip{opacity:1}
@media (prefers-reduced-motion:reduce){.jw-wip i{animation:none}}