.art-frame{position:relative;width:100%;aspect-ratio:1672/941}.effects{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}.character{fill:transparent;pointer-events:all;cursor:pointer;touch-action:pan-y;outline:none}.character:focus-visible .silhouette{stroke:#e5f7ff;stroke-width:5;stroke-dasharray:12 8;fill:#69caff18}.notes{opacity:0;pointer-events:none;fill:#e8faff;font-size:43px;font-weight:bold;filter:drop-shadow(0 0 7px #169fff)}.playing .notes{opacity:1}.notes text{opacity:0}.playing .notes text{animation:notes-rise 2.6s ease-out infinite}.playing .notes text:nth-child(2){animation-delay:.65s}.playing .notes text:nth-child(3){animation-delay:1.3s}.playing .notes text:nth-child(4){animation-delay:1.95s}@keyframes notes-rise{0%{opacity:0;transform:translate(0,15px)}15%{opacity:1}75%{opacity:.8}100%{opacity:0;transform:translate(25px,-100px)}}.lamp-glow{animation:lamp-glow 9s linear infinite;mix-blend-mode:screen}.lamp-dim{animation:lamp-dim 9s linear infinite}@keyframes lamp-glow{0%,24%,29%,72%,79%,100%{opacity:.65}25%,28%,73%,78%{opacity:.08}26%,74%{opacity:.3}}@keyframes lamp-dim{0%,24%,29%,72%,79%,100%{opacity:0}25%,28%,73%,78%{opacity:.7}26%,74%{opacity:.3}}.links{pointer-events:none}.link{pointer-events:auto} @media(prefers-reduced-motion:reduce){.lamp-glow{animation:none;opacity:.35}.lamp-dim{animation:none;opacity:0}.playing .notes text{animation:none;opacity:1}}

.title-wall{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;clip-path:polygon(37.8% 0,84% 0,84% 25.3%,36% 25.3%,36% 19%,38% 17%)}.brand-title{position:absolute;left:32%;top:-2.7%;width:46%;height:28%;object-fit:contain;pointer-events:none}.mobile-heading h1 img{display:block;width:100%;max-width:480px;height:auto;margin:auto}

.site-footer{max-width:760px;margin:0 auto;padding:0 22px 26px;letter-spacing:0;line-height:1.6}.site-footer #sound-status{font-size:13px;color:#a8b9c8;margin:0 0 12px}.copyright{font-size:12px;color:#a8b9c8;margin:0}.visit-counter{position:absolute;left:83%;top:18%;width:15%;padding:.6% .4%;transform:rotate(-5deg);text-align:center;background:linear-gradient(130deg,#121821f2,#080a0eef);border:1px solid #546471;box-shadow:3px 4px 0 #0008;pointer-events:none;font-family:monospace}.visit-counter span{display:block;font-size:clamp(5px,.8vw,13px);letter-spacing:.12em;color:#a8b6c2}.visit-counter strong{display:block;font-size:clamp(10px,1.8vw,28px);font-weight:bold;letter-spacing:.1em;color:#d8edff;text-shadow:0 0 8px #359bce80}

@media(max-width:700px){.brand-title{top:0;height:25.3%}.mobile-heading{padding-left:8px;padding-right:8px}}

.mobile-characters{display:none}
@media(max-width:700px){
 main{padding:0 0 20px}.scene{display:flex;flex-direction:column;width:100%;padding:0 16px;gap:18px}.art-frame{display:contents}.art-frame>.art,.art-frame>.effects,.art-frame>.title-wall,.art-frame>.brand-title{display:none}.mobile-heading{order:0;display:block;padding:20px 8px 0}.mobile-heading h1 img{width:90%;max-width:360px}.mobile-characters{order:1;display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-character{position:relative;min-width:0;height:clamp(220px,65vw,340px);padding:0;overflow:hidden;border:1px solid #426078;border-radius:14px;background-image:linear-gradient(0deg,#060b16 0%,transparent 45%),url('assets/noir.webp');background-size:auto 100%;background-repeat:no-repeat;color:#fff;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.mobile-man{background-position:left center}.mobile-woman{background-position:right center}.mobile-character[aria-pressed=true]{border-color:#83d6ff;box-shadow:0 0 18px #249ede50}.mobile-character:focus-visible{outline:3px solid #aee9ff;outline-offset:3px}.track-label{position:absolute;bottom:16px;left:12px;right:8px;text-align:left}.track-label strong{display:block;font-size:21px}.track-label small{display:block;margin-top:6px;font-size:12px;color:#d5e6f4}.mobile-notes{position:absolute;right:18%;top:22%;font-size:27px;color:#e8faff;opacity:0;pointer-events:none;text-shadow:0 0 8px #00aaff}.mobile-woman.playing .mobile-notes{animation:notes-rise 2.6s ease-out infinite}.links{order:2;padding:0;gap:10px}.link{min-height:68px;padding:12px 16px;border-radius:8px;box-shadow:none}.label strong{font-size:21px}.label small{font-size:12px}.visit-counter{order:3;position:static;align-self:center;width:auto;min-width:140px;transform:none;padding:8px 18px;border-radius:6px}.visit-counter span{font-size:10px}.visit-counter strong{font-size:22px}.site-footer{padding:0 22px 24px}.site-footer #sound-status{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.mobile-woman.playing .mobile-notes{animation:none;opacity:1}}

/* Keep the comic scene intact on narrow screens. */
@media(max-width:700px){
 .scene{padding:0;gap:16px}
 .mobile-heading{display:none}
 .mobile-characters{display:none}
 .art-frame{display:block;order:0;position:relative;width:100%;aspect-ratio:1672/941}
 .art-frame>.art{display:block;width:100%;height:100%;object-fit:contain}
 .art-frame>.effects{display:block}
 .art-frame>.title-wall{display:block}
 .art-frame>.brand-title{display:block;top:-2.7%;height:28%}
 .links{padding:0 16px}
 .visit-counter{position:absolute;left:83%;top:18%;width:15%;min-width:0;padding:.6% .4%;transform:rotate(-5deg);border-radius:0}
 .visit-counter span{font-size:clamp(5px,.8vw,13px)}
 .visit-counter strong{font-size:clamp(10px,1.8vw,28px)}
}