/* Self-hosted fonts (SIL Open Font License; from Google Fonts, latin + latin-ext). Keeps visitor IPs away from Google. */
@font-face{font-family:'Bruno Ace SC';font-style:normal;font-weight:400;font-display:swap;src:url(font-brunoacesc-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bruno Ace SC';font-style:normal;font-weight:400;font-display:swap;src:url(font-brunoacesc-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url(font-pressstart2p-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url(font-pressstart2p-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   Van Beukering - 90s rave on brass
   Tokens. Ground = noise tile; background letters = HAKKUH pattern.
   --type, --accent and --accent-text are the band member's colours: the page script sets them
   from website_generator.BAND_THEMES with every photo. The values here are the default (pink).
   ============================================================ */
:root{
  --ground:#ffffff; --type:#D9415D; --type-o:.3; --accent:#E44D69; --ink:#161616; --ink-soft:#5b5b5b;
  --accent-text:#C2304D;   /* accent for small text: 4.5:1+ on white (AA); --accent stays for fills, rings, shadows */
  --brand:#E44D69;         /* the band pink; the TV player on its dark backdrop always uses it */
  --line:rgba(22,22,22,.18); --paper:#f6f4f0;
  --sms-h:32px;
  --f-bg:'Bruno Ace SC','Eurostile','Arial Rounded MT Bold',sans-serif;
  --f-body:'Press Start 2P','Courier New',monospace;
  --f-pixel:'Press Start 2P','Courier New',monospace;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
*{font-synthesis:none}
html{scroll-padding-top:calc(var(--sms-h) + env(safe-area-inset-top,0px));scroll-behavior:smooth;scroll-snap-type:y proximity;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:12px;line-height:1.9;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
#ground{position:fixed;inset:0;z-index:0;background:#fff url(ground.webp) 0 0/512px 512px repeat;pointer-events:none}
#ground::after{content:"";position:absolute;inset:0;background:#fff;opacity:.64}

/* ============ BACKGROUND: HAKKUH pattern (Bruno Ace SC, 86.4px on a 1280 frame) ============ */
#type{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none;transition:opacity .25s linear}
.lcol{position:absolute;top:0;left:var(--x);font-family:var(--f-bg);font-size:var(--lf);line-height:var(--lp);white-space:pre;color:var(--type);opacity:var(--type-o);transition:color .5s ease}
.hrow{position:absolute;left:0;right:0;pointer-events:none}
.hrow span{position:absolute;top:0;font-family:var(--f-bg);font-size:var(--lf);line-height:var(--lp);white-space:pre;color:var(--accent);opacity:0;transition:opacity .22s ease}
.hrow.on span{opacity:.85}

/* ============ SMS BAR ============ */
.sms{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--sms-h) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);display:flex;align-items:stretch;background:#fff;color:#161616;border-bottom:1px solid rgba(22,22,22,.12);font-family:var(--f-pixel);font-size:11px;line-height:1}
.sms-tag{display:flex;align-items:center;gap:7px;padding:0 12px;flex:0 0 auto;color:var(--accent-text)}
.sms-tag i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:block}
.sms.new .sms-tag i{animation:blink .5s steps(1) 4}
@keyframes blink{50%{opacity:0}}
.sms-track{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;cursor:pointer;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent)}
.sms-msg{position:absolute;white-space:nowrap;left:0;will-change:transform;margin:0}
.sms-msg b{color:var(--accent-text);font-weight:400}
/* phones: typed in letter by letter, the line slides along with the cursor */
.sms.typing .sms-msg{transition:transform .14s linear}
.sms-cur{display:inline-block;width:.7em;height:1em;margin-left:2px;vertical-align:-.12em;background:currentColor;animation:blink 1s steps(1) infinite}
/* reduced motion and too long for one line: two smaller lines */
.sms.wrap .sms-msg{left:10px;right:10px;white-space:normal;font-size:8px;line-height:1.35;max-height:2.7em;overflow:hidden}
.sms-cta{display:flex;align-items:center;padding:0 10px;flex:0 0 auto;white-space:nowrap;color:inherit;text-decoration:none}
.sms-cta>span{border:1.5px solid currentColor;border-radius:999px;padding:5px 10px 4px;transition:background .2s,color .2s,border-color .2s}
.sms-cta:hover>span,.sms-cta:focus-visible>span{background:var(--accent-text);border-color:var(--accent-text);color:#fff}
/* your own message just arrived */
.sms{transition:box-shadow .4s}
.sms.mine{box-shadow:inset 0 -3px 0 var(--accent)}
/* phones: the dot alone says SMS, so "sms BEUK" fits next to the messages */
@media (max-width:700px){.sms-tag{padding-right:6px}.sms-tag-t,.sms-cta-long{display:none}.sms-cta{padding:0 8px 0 4px}.sms-cta>span{padding:5px 8px 4px}}

/* ============ SECTIONS ============ */
main{position:relative;z-index:1}
section{min-height:calc(100vh - var(--sms-h));min-height:calc(100svh - var(--sms-h));scroll-snap-align:start;position:relative;padding:calc(var(--sms-h) + 40px) clamp(20px,5vw,72px) 56px}
h2{font-weight:700;font-size:clamp(22px,3.4vw,44px);line-height:1.2;letter-spacing:0;margin:0 0 .45em}
.kicker{font-family:var(--f-pixel);font-size:11px;line-height:1;color:var(--accent-text);margin:0 0 18px}

/* ---- HOME: rotating band member standing on the wordmark ----
   Column layout: the figure takes all space the copy leaves over and anchors
   the photo to its bottom edge, so wide and tall photos both sit directly on
   the title instead of leaving a gap. The copy overlaps the photo's bottom a bit. */
#home{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:100vh;min-height:100svh;padding:calc(var(--sms-h) + 12px) 0 clamp(16px,4vh,40px);overflow:hidden}
.hero-fig{position:relative;flex:1 1 auto;width:100%;min-height:clamp(200px,42svh,560px);margin:0}
.hero-fig img{position:absolute;top:0;left:50%;width:100%;height:100%;max-width:none;transform:translateX(-50%);object-fit:contain;object-position:center bottom;transition:opacity .35s ease}
.hero-fig.swap .h-base{opacity:0}
.h-base{filter:drop-shadow(-5px -4px 0 var(--accent))}
.h-ghost,.h-slice{opacity:0;pointer-events:none}
.h-ghost{filter:sepia(1) saturate(8) hue-rotate(-40deg);mix-blend-mode:multiply}
.glitch .h-base{animation:shake .08s steps(2) infinite}
.glitch .h-ghost{opacity:.35;transform:translate(calc(-50% + 6px),-1px)}
.glitch .h-slice{opacity:1;animation:slice .12s steps(1) infinite}
@keyframes shake{0%{transform:translate(-50%,0)}50%{transform:translate(calc(-50% - 3px),1px)}100%{transform:translate(calc(-50% + 2px),-1px)}}
@keyframes slice{0%{clip-path:inset(18% 0 70% 0);transform:translateX(calc(-50% - 14px))}33%{clip-path:inset(52% 0 38% 0);transform:translateX(calc(-50% + 10px))}66%{clip-path:inset(74% 0 14% 0);transform:translateX(calc(-50% - 6px))}}
.hero-copy{position:relative;z-index:3;text-align:center;max-width:92vw;width:max-content;margin-top:calc(-1 * clamp(40px,13vh,130px))}
.hero-copy::before{content:"";position:absolute;inset:-30px -50px -24px;background:radial-gradient(closest-side,rgba(255,255,255,.8),rgba(255,255,255,0));z-index:-1;pointer-events:none}
.wordmark{font-weight:700;font-size:clamp(26px,5vw,70px);line-height:1.15;letter-spacing:0;margin:0;color:var(--ink);text-shadow:0 0 14px #fff,0 0 4px #fff}
/* the logo artwork is white; on the light ground it is drawn in ink with the accent offset like the photos */
.vb-logo{display:block;width:1.6em;height:auto;margin:0 auto .25em;filter:brightness(0) drop-shadow(-2px -2px 0 var(--accent))}
.hero-copy .kicker{margin-bottom:12px}
.hero-copy p{font-size:clamp(11px,1vw,14px);line-height:1.8;margin:18px 0 0;color:var(--ink-soft);text-shadow:0 0 10px #fff,0 0 3px #fff}
.hero-copy p b{color:var(--ink);font-weight:500}
@media (max-width:620px){
  .hero-fig{min-height:clamp(180px,40svh,420px)}
  .hero-copy{margin-top:calc(-1 * clamp(16px,4vh,36px))}
  .hero-copy p{margin-top:12px}
}

/* ---- ABOUT / TV WALL ---- */
#about{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.4fr);gap:clamp(28px,5vw,80px);align-items:center}
@media (max-width:1000px){#about{grid-template-columns:1fr}}
.about-text{max-width:44ch}
.about-text p{margin:0 0 1em;font-size:12px;line-height:2}
.about-text .muted{color:var(--ink-soft)}
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:clamp(14px,1.8vw,26px) clamp(8px,1.4vw,18px)}
/* a lone TV on the last row sits in the middle */
.wall .tv:last-child:nth-child(3n+1){grid-column:2}
.tv{position:relative;display:block;min-width:0;padding:0;border:0;background:none;cursor:pointer;transition:transform .25s ease;font:inherit;color:inherit;text-decoration:none}
@media (max-width:620px){
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .wall .tv:last-child:nth-child(3n+1){grid-column:auto}
  .wall .tv:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 6px)}
}
.tv:hover{transform:translateY(-3px)}
.tv-box{position:relative;display:block;width:100%;aspect-ratio:var(--ar)}
.tv .screen,.tv .noise,.tv .scan,.tv .glass{display:block}
.tv .set{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;filter:drop-shadow(0 5px 0 rgba(0,0,0,.18))}
.screen{position:absolute;left:calc(var(--sx) - 1%);top:calc(var(--sy) - 1%);width:calc(var(--sw) + 2%);height:calc(var(--sh) + 2%);overflow:hidden;background:#0a0a0a;border-radius:14%/18%;z-index:1}
/* thumbnails are pre-cropped to 4:3 around the action (thumbnails.py), so centre them */
.feed{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;filter:grayscale(1) contrast(1.15);transition:filter 1.2s ease}
.tv.col .feed{filter:saturate(1.2) contrast(1.05)}
/* "vertical hold" glitch: the picture jumps up and settles */
.tv.roll .feed{animation:vroll .36s steps(4) 3}
@keyframes vroll{0%{transform:translateY(0)}25%{transform:translateY(-18%)}50%{transform:translateY(-9%)}75%{transform:translateY(-3%)}100%{transform:translateY(0)}}
.noise{position:absolute;inset:-160px;background-image:var(--noise);background-size:160px;opacity:.1;mix-blend-mode:screen;animation:snow .2s steps(1) infinite paused}
.wall.on .noise,.tz-set .noise{animation-play-state:running}
@keyframes snow{0%{transform:translate(0,0)}25%{transform:translate(-53px,31px)}50%{transform:translate(47px,-71px)}75%{transform:translate(-19px,88px)}}
.tv.lost .noise{opacity:.95;mix-blend-mode:normal;filter:grayscale(1)}
.tv.lost .feed{opacity:.06}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);pointer-events:none}
.glass{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.18),transparent 45%),radial-gradient(closest-side,transparent 70%,rgba(0,0,0,.5));pointer-events:none}
.osd{position:absolute;right:10%;top:8%;font-family:var(--f-pixel);font-size:clamp(6px,.75vw,10px);line-height:1;color:#9dff9d;opacity:.8;z-index:3}
.osd.mid{right:auto;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;opacity:0;transition:opacity .2s}
.tv.lost .osd.mid,.tv:hover .osd.mid,.tv:focus-visible .osd.mid{opacity:1}
.tv-cap{display:block;margin:8px 4px 0;font-size:8px;line-height:1.5;color:var(--ink-soft);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* phones: up to two lines, always reserving both, so the next row of TVs starts level */
@media (max-width:620px){.tv-cap{font-size:9px;line-height:1.5;height:3em;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
.tv:hover .tv-cap{color:var(--ink)}

/* ---- ENLARGED TV: the same set grows out of the wall and plays the clip ---- */
dialog.tvzoom{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:transparent;overflow:hidden}
dialog.tvzoom[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
dialog.tvzoom::backdrop{background:rgba(10,10,10,0);transition:background .4s}
dialog.tvzoom.show::backdrop{background:rgba(10,10,10,.93)}
.tz-set{position:relative;left:var(--shift,0px);width:var(--tw);max-width:none;flex:0 0 auto;aspect-ratio:var(--ar);transform-origin:0 0}
.tz-set .set{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.tz-set .screen{background:#000;border-radius:5%/6%}
.tz-set iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.tz-set .power{position:absolute;inset:0;background:#fff;z-index:1;pointer-events:none;transform-origin:center;opacity:0}
.tz-set.on .power{animation:pwr .7s ease-out}
@keyframes pwr{0%{opacity:1;transform:scale(1,.01)}40%{opacity:1;transform:scale(1,.01)}70%{opacity:.8;transform:scale(1,1)}100%{opacity:0;transform:scale(1,1)}}
.tz-bar{display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:center;font-family:var(--f-pixel);font-size:12px;color:#e8e8e8;opacity:0;transition:opacity .3s;padding:0 16px;text-align:center}
dialog.tvzoom.show .tz-bar{opacity:1}
.tz-bar a{color:#e8e8e8}
.tz-bar button{font:inherit;background:var(--brand);color:#111;border:0;padding:6px 14px;min-height:44px;cursor:pointer}
.tz-bar .ch{color:#9dff9d;min-width:6ch}
.tz-bar .tz-title{flex-basis:100%;order:-1;color:#e8e8e8;opacity:.85;font-size:10px;line-height:1.6}
.tz-zap{font:inherit;background:#111;color:#9dff9d;border:1.5px solid #9dff9d;padding:6px 12px;min-height:44px;cursor:pointer;transition:background .15s,color .15s}
.tz-zap:hover,.tz-zap:focus-visible{background:#9dff9d;color:#111;outline:none}

/* zapping: the set's own knobs (cut out of the drawing so they can turn), static between
   channels and the channel number in green on the screen */
.tz-knob{position:absolute;z-index:3;padding:0;border:0;border-radius:50%;background-color:transparent;background-repeat:no-repeat;cursor:pointer;transition:transform .45s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.tz-knob:hover,.tz-knob:focus-visible{box-shadow:0 0 0 3px rgba(240,63,140,.8),0 0 18px rgba(240,63,140,.6);outline:none}
.tz-set.hint .tz-knob{animation:knobhint 1.6s ease-in-out 1s 3}
@keyframes knobhint{0%,100%{box-shadow:0 0 0 0 rgba(240,63,140,0)}50%{box-shadow:0 0 0 4px rgba(240,63,140,.85),0 0 24px rgba(240,63,140,.7)}}
.tz-static{position:absolute;inset:-160px;background-image:var(--noise);background-size:160px;opacity:0;pointer-events:none;filter:grayscale(1) contrast(1.5)}
.tz-set.tuning .tz-static{opacity:1;animation:snow .1s steps(1) infinite}
.tz-osd{position:absolute;right:8%;top:8%;font-family:var(--f-pixel);font-size:clamp(14px,2.6vw,30px);line-height:1;color:#9dff9d;text-shadow:0 0 8px rgba(80,255,120,.85),2px 2px 0 rgba(0,0,0,.6);opacity:0;transition:opacity .25s;pointer-events:none}
.tz-set.osd-on .tz-osd{opacity:1}

/* ---- SHOWS: list grouped by day, Upcoming / Past tabs ---- */
#shows{display:flex;flex-direction:column;justify-content:center}
.shows-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.shows-head h2{margin:0}
.pshows{width:100%}
.ptabs{display:none;gap:24px;margin:0 0 16px}
.js .ptabs{display:flex}
.ptabs button{font:inherit;font-size:11px;font-weight:500;background:none;border:0;padding:0 2px 4px;min-height:44px;color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent}
.ptabs button:hover{color:var(--ink)}
.ptabs button[aria-pressed="true"]{color:var(--ink);border-color:var(--accent)}
.plist[hidden],.js .plist[data-inactive]{display:none}
.pday{display:grid;grid-template-columns:150px 1fr;gap:12px;border-top:1.5px solid var(--ink);padding:10px 0}
.pday h3{margin:0;font-size:12px;font-weight:700;letter-spacing:0;padding-top:18px}
.prow{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:12px 14px;transition:background .15s}
.prow+.prow{border-top:1px solid var(--line)}
.pday>div,.prow>div{min-width:0;overflow-wrap:anywhere}
.prow b{display:block;font-size:clamp(15px,1.9vw,24px);font-weight:700;letter-spacing:0;line-height:1.3}
.prow .sub{display:block;font-size:10px;color:var(--ink-soft);margin-top:8px;line-height:1.9}
.prow .sub a{color:var(--accent-text);text-decoration:none;border-bottom:1.5px solid var(--accent)}
.prow .pr{display:flex;gap:14px;align-items:center}
.prow .pt{font-size:13px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.prow .pt.flag{font-size:9px;text-transform:uppercase;letter-spacing:0;border:1.5px solid currentColor;border-radius:999px;padding:6px 10px 5px}
@media (hover:hover){.prow:hover{background:rgba(22,22,22,.05)}}
.prow.off b{color:var(--ink-soft)}
.pempty{font-size:12px;line-height:2;color:var(--ink-soft);border-top:1.5px solid var(--ink);padding-top:16px}
@media (max-width:620px){.pday{grid-template-columns:1fr;gap:0}.pday h3{padding:8px 0 0}.prow{padding:10px 0;grid-template-columns:1fr;gap:10px}.prow .pt{font-size:11px}}

/* ---- CONTACT ---- */
#contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;overflow:hidden}
.contact-text{max-width:52ch}
.contact-text>p{font-size:12px;line-height:2}
.contact-lines{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.contact-lines li{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.contact-lines span{font-family:var(--f-pixel);font-size:10px;line-height:1;color:var(--ink-soft)}
.contact-lines a{font-weight:500;font-size:clamp(11px,1.2vw,15px);line-height:1.6;text-decoration:none;word-break:break-all}
.contact-lines a:hover{color:var(--accent-text)}
.phones{position:relative;align-self:start;margin-top:calc(-1 * (var(--sms-h) + 40px));width:min(26vw,300px);cursor:pointer;background:none;border:0;padding:0}
.phones img{width:100%;height:auto;transform-origin:50% 0;animation:sway 2.6s ease-in-out infinite alternate}
.phones.ring img{animation:ring .08s linear 10}
@keyframes sway{from{transform:rotate(-1.8deg)}to{transform:rotate(1.8deg)}}
@keyframes ring{0%{transform:rotate(-2deg) translateX(-2px)}50%{transform:rotate(2deg) translateX(2px)}100%{transform:rotate(-2deg)}}
footer{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:9px;color:var(--ink-soft)}
/* small screens: the phones hang behind the contact details instead of above them */
@media (max-width:820px){
  section{padding-bottom:56px}
  #contact{grid-template-columns:1fr}
  .phones{position:absolute;top:0;right:-6px;z-index:0;width:min(58vw,270px);margin:0;opacity:.55}
  .contact-text{position:relative;z-index:1}
  .contact-text .kicker,.contact-text h2,.contact-text>p,.contact-lines span,.contact-lines a{text-shadow:0 0 6px #fff,0 0 2px #fff,0 0 12px #fff}
  .contact-lines li{grid-template-columns:1fr;gap:6px}
}

/* ---- NOKIA 3310: write your own text (opened from the SMS bar) ----
   A black and white photo like the TVs (static/nokia.webp, made by tools/prepare_nokia.py). The
   LCD sits behind its cut-out screen and the keys are buttons on top; both are placed with
   --x --y --w --h (fractions of the photo) from the template. The LCD is sized in em, and the
   phone's font-size follows its width, so everything scales together. */
dialog.nk-dlg{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:transparent;overflow:hidden}
dialog.nk-dlg[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
dialog.nk-dlg::backdrop{background:rgba(10,10,10,0);transition:background .35s}
dialog.nk-dlg.show::backdrop{background:rgba(10,10,10,.92)}
.nokia{position:relative;flex:0 0 auto;aspect-ratio:1282/3037;
  width:min(calc((100vh - 110px) * .4221),92vw,300px);width:min(calc((100dvh - 110px) * .4221),92vw,300px);
  font-size:min(calc((100vh - 110px) * .4221 / 13),calc(92vw / 13),calc(300px / 13));font-size:min(calc((100dvh - 110px) * .4221 / 13),calc(92vw / 13),calc(300px / 13));
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transform:translateY(35%) rotate(5deg);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.25,1.08),opacity .25s}
dialog.nk-dlg.show .nokia{transform:none;opacity:1}
.nk-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:2;pointer-events:none}
.nk-lcd{position:absolute;z-index:1;left:calc(var(--x) * 100% - 1%);top:calc(var(--y) * 100% - .5%);width:calc(var(--w) * 100% + 2%);height:calc(var(--h) * 100% + 1%);
  display:flex;flex-direction:column;padding:.75em 1.15em .6em;background:linear-gradient(180deg,#bcd1a4,#9db687);box-shadow:inset 0 .4em .9em rgba(0,0,0,.35);
  color:#1d2915;font-family:var(--f-pixel);font-size:.56em}
/* each key is a round window onto the same photo, so pressing it moves the real key */
.nk-key{position:absolute;z-index:3;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);width:calc(var(--w) * 100%);height:calc(var(--h) * 100%);
  padding:0;border:0;border-radius:50%;cursor:pointer;
  background:url(nokia.webp) no-repeat calc(var(--x) / (1 - var(--w)) * 100%) calc(var(--y) / (1 - var(--h)) * 100%)/calc(100% / var(--w)) calc(100% / var(--h));
  transition:transform .06s,filter .06s}
.nk-key:active,.nk-key.down{transform:translateY(.09em);filter:brightness(.78)}
.nokia :focus-visible{outline:2px solid #fff;outline-offset:1px}
.nk-top{display:flex;justify-content:space-between;align-items:flex-end;flex:0 0 auto;height:1.5em;font-size:.72em;line-height:1}
.nk-bars{display:flex;align-items:flex-end;gap:2px;height:1.1em}
.nk-bars i{display:block;width:.32em;background:currentColor}
.nk-bars i:nth-child(1){height:30%}.nk-bars i:nth-child(2){height:55%}.nk-bars i:nth-child(3){height:80%}.nk-bars i:nth-child(4){height:100%}
.nk-text{flex:1 1 auto;min-height:0;margin-top:.35em;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;outline:none;cursor:text}
.nk-text:focus-visible{outline:none}   /* the blinking cursor shows where you type */
.nk-cur{display:inline-block;width:.18em;height:1.15em;margin-left:1px;background:currentColor;vertical-align:-.25em;animation:blink 1s steps(1) infinite}
.nk-cand{background:#1d2915;color:#b6cf99}
.nk-soft{flex:0 0 auto;text-align:center;font-size:.8em;line-height:1;padding-top:.3em}
.nk-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;height:100%;text-align:center;white-space:normal}
.nk-env{width:2.6em;height:1.7em;shape-rendering:crispEdges;animation:nkfly .5s steps(3) infinite alternate}
@keyframes nkfly{to{transform:translateX(.6em)}}
.nk-prog{display:block;width:80%;height:.7em;border:2px solid currentColor;background:linear-gradient(currentColor,currentColor) 0 0/0 100% no-repeat;animation:nkprog 1.6s steps(8) forwards}
@keyframes nkprog{to{background-size:100% 100%}}
.nk-ok{width:2em;height:1.5em}
.nk-help{margin:0;padding:0 16px;font-family:var(--f-pixel);font-size:10px;line-height:1.8;color:#e8e8e8;text-align:center;opacity:0;transition:opacity .3s}
dialog.nk-dlg.show .nk-help{opacity:1}
#nkClose{font:inherit;background:var(--brand);color:#111;border:0;padding:6px 14px;min-height:36px;margin-left:8px;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

#dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:100}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}
  html{scroll-behavior:auto}
}