:root{ --ink:#0b0710; --cream:#f3e7d3; --neonr:#ff2d55; --neonc:#38e1ff; --amber:#ffb347; --muted:#a39388; --accent:#ff2d55; }
canvas#bokeh{position:fixed; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;}
.script{font-family:"Sacramento",cursive;}
@keyframes pulse{50%{opacity:.2}}
#leader .opensign{font-family:"Sacramento",cursive; font-size:clamp(5rem,17vw,12rem); line-height:1; color:#ffdce4; opacity:0;
    text-shadow:0 0 8px #ff5c7a, 0 0 24px #ff2d55, 0 0 60px #ff2d55, 0 0 120px #c11040;}
#leader .opensign.zap{animation:zap 1.5s steps(1) forwards;}
@keyframes zap{0%{opacity:0}12%{opacity:1}16%{opacity:.15}22%{opacity:1}26%{opacity:.3}34%{opacity:1}38%{opacity:0}46%{opacity:1}52%{opacity:.5}58%{opacity:1}100%{opacity:1}}
#leader .hours{font:700 12px/1 "Space Mono",monospace; letter-spacing:.8em; text-transform:uppercase; color:#7fd7ea; text-shadow:0 0 14px rgba(56,225,255,.8); opacity:0; padding-left:.8em;}
#leader .hours.zap{animation:hourszap .3s ease 1.55s forwards;}
@keyframes hourszap{to{opacity:1}}
.grain{position:fixed; inset:-100%; z-index:90; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="300" height="300" filter="url(%23n)" opacity="0.6"/></svg>');
    animation:grain 7s steps(10) infinite;}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}20%{transform:translate(-13%,4%)}30%{transform:translate(6%,-20%)}40%{transform:translate(-4%,22%)}50%{transform:translate(-13%,8%)}60%{transform:translate(13%,0)}70%{transform:translate(0,13%)}80%{transform:translate(3%,28%)}90%{transform:translate(-9%,8%)}}
@media(hover:none){.beam,.ring{display:none}}
.zflick{animation:zflick .5s steps(1);}
@keyframes zflick{0%{opacity:1}20%{opacity:.2}35%{opacity:1}50%{opacity:.35}70%{opacity:1}}
.coldbg{position:absolute; inset:-6%; background-size:cover; background-position:center 30%; filter:brightness(.62) saturate(1.1); animation:coldpan 30s ease-in-out infinite alternate;}
@keyframes coldpan{from{transform:scale(1.02) translateX(0)}to{transform:scale(1.1) translateX(-2.5%)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.mealchip{display:inline-block; width:max-content; font:700 10px/1 "Space Mono",monospace; letter-spacing:.18em; color:#1c0b12; background:var(--amber); border-radius:5px; padding:6px 10px; margin-bottom:16px; box-shadow:0 4px 18px rgba(0,0,0,.4);}
#jukebox{align-items:center; text-align:center;}
.juke{position:relative; width:min(360px,78vw); aspect-ratio:3/3.9; margin-top:3vh; border-radius:48% 48% 14px 14px / 30% 30% 14px 14px;
    background:linear-gradient(180deg,#e8ecf1 0%,#aeb5bf 22%,#6d747e 50%,#4c525a 78%,#2e3339 100%);
    box-shadow:0 40px 110px rgba(0,0,0,.75), inset 0 2px 2px rgba(255,255,255,.55), inset 0 -8px 24px rgba(0,0,0,.5);}
.juke .arch{position:absolute; inset:4% 7% 52%; border-radius:46% 46% 8px 8px / 58% 58% 8px 8px; background:#14090f; overflow:hidden; display:flex; gap:5px; padding:10px;}
.juke .gel{flex:1; border-radius:6px; opacity:.5; transition:opacity .4s;
    background:linear-gradient(180deg,var(--gc),transparent 130%);}
.juke.playing .gel{animation:gel var(--beat,.6s) ease-in-out infinite alternate;}
@keyframes gel{from{opacity:.35; filter:brightness(.8)}to{opacity:1; filter:brightness(1.35)}}
.juke .strip{position:absolute; left:12%; right:12%; top:47%; text-align:center; font:700 10px/1.5 "Space Mono",monospace; letter-spacing:.2em; color:#ffdce4; text-transform:uppercase; text-shadow:0 0 10px rgba(255,45,85,.7);}
.juke .grille{position:absolute; left:16%; right:16%; top:56%; height:20%; border-radius:10px;
    background:radial-gradient(circle at 6px 6px, rgba(0,0,0,.75) 2.4px, rgba(255,255,255,.14) 2.6px, transparent 3.4px); background-size:12px 12px; background-color:#3a4048; box-shadow:inset 0 3px 12px rgba(0,0,0,.6);}
.juke .records{position:absolute; left:8%; right:8%; bottom:5%; display:flex; flex-direction:column; gap:6px;}
.rec{font:700 10px/1 "Space Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:#f3e7d3; background:#1d141b; border:1px solid rgba(243,231,211,.28); border-radius:5px; padding:9px 8px; cursor:pointer; transition:all .2s;}
.rec:hover{border-color:var(--amber); color:var(--amber);}
.rec.on{background:var(--neonr); border-color:var(--neonr); color:#fff; box-shadow:0 0 16px rgba(255,45,85,.6);}
.juke .vfd{position:absolute; left:50%; top:44.5%; transform:translateX(-50%); font:400 9px/1 "Space Mono",monospace; letter-spacing:.3em; color:#5a6250; text-transform:uppercase;}
#coffee{align-items:center; text-align:center; cursor:crosshair;}
.coffeestage{position:relative; height:58vh; aspect-ratio:1.15; margin:0 auto;}
.saucer{position:absolute; left:50%; bottom:8%; width:78%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%;
    background:radial-gradient(circle at 42% 38%, #f4f6f8 0%, #c8cdd4 44%, #878e97 72%, #5b6169 100%);
    box-shadow:0 30px 70px rgba(0,0,0,.8), 0 0 90px rgba(56,225,255,.06);}
.cupwall{position:absolute; left:50%; bottom:14%; width:52%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%;
    background:radial-gradient(circle at 42% 36%, #ffffff 0%, #dfe3e8 52%, #a9b0b9 88%);
    box-shadow:inset 0 -14px 30px rgba(0,0,0,.22);}
.coffee{position:absolute; left:50%; bottom:17.5%; width:44%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%;
    background:radial-gradient(circle at 46% 40%, #5a3a20 0%, #3a2317 55%, #241109 100%);
    box-shadow:inset 0 6px 22px rgba(0,0,0,.7), inset 0 -3px 10px rgba(255,190,130,.12);}
#steamcv{position:absolute; inset:0; z-index:3; pointer-events:none;}
.coffee-copy{position:relative; z-index:4; margin-top:4vh;}
#neonWrap{height:420vh;}
.neon-pin{flex-direction:column; justify-content:center;}
.neon-board{position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; gap:1.2vh; padding:0 4vw;}
.sign{font-family:"Sacramento",cursive; font-size:clamp(2.6rem,7.5vh,4.6rem); line-height:1.05; color:transparent; -webkit-text-stroke:1px rgba(243,231,211,.13); transition:none;}
.sign .town{display:block; font:400 10px/1 "Space Mono",monospace; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin-top:2px; -webkit-text-stroke:0; opacity:.55;}
.sign.lit{color:var(--sc,#ffdce4); -webkit-text-stroke:0; text-shadow:0 0 7px var(--sg,#ff5c7a), 0 0 22px var(--sg,#ff2d55), 0 0 58px var(--sg,#ff2d55); animation:signon .7s steps(1);}
@keyframes signon{0%{opacity:0}18%{opacity:1}26%{opacity:.2}38%{opacity:1}46%{opacity:.4}58%{opacity:1}100%{opacity:1}}
.sign.dead{color:rgba(243,231,211,.16); -webkit-text-stroke:1px rgba(243,231,211,.1); text-shadow:none; animation:signdead 1.1s steps(1);}
@keyframes signdead{0%{opacity:0}14%{opacity:1;color:var(--sc);text-shadow:0 0 22px var(--sg)}20%{opacity:.2}30%{opacity:1;color:var(--sc);text-shadow:0 0 22px var(--sg)}38%{opacity:.1}52%{opacity:.8;color:var(--sc);text-shadow:0 0 18px var(--sg)}100%{opacity:1}}
.sign.dead .town{color:var(--neonr); opacity:.9;}
.neon-end{margin-top:2.5vh; font-style:italic; font-size:clamp(1.1rem,2.2vw,1.7rem); color:#e8dccb; opacity:0; transition:opacity 1.6s ease;}
.neon-end.show{opacity:1;}
.endneon{font-family:"Sacramento",cursive; font-size:clamp(3.4rem,10vw,8.5rem); line-height:1.1; color:#ffdce4;
    text-shadow:0 0 9px #ff5c7a, 0 0 28px #ff2d55, 0 0 70px #ff2d55, 0 0 130px #c11040; animation:neonbreathe 4.2s ease-in-out infinite;}
@keyframes neonbreathe{0%,100%{opacity:1}50%{opacity:.82}}
.latenote{margin-top:2.4rem; font:400 10px/1.6 "Space Mono",monospace; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); opacity:.85;}
@media (prefers-reduced-motion:reduce){
    .grain{animation:none;} .coldbg{animation:none;}
    #leader{display:none;}
    .titleword .ch i{transition:none; transform:none;}
    .endneon{animation:none;} .juke.playing .gel{animation:none; opacity:.9;}
    #coffee{cursor:auto;}
  }
@media(max-width:800px){ .hcard{width:78vw;} .coffeestage{aspect-ratio:1;} }