:root{--bg:#0d1a14;--bg2:#13291f;--ink:#e8e2c4;--dim:#8fa38f;--amber:#f2b84b;--pink:#e4795f;--paper:#f0e8cc;--paper-ink:#2a2418}
*{box-sizing:border-box}
html{background:var(--bg)}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(ellipse at 50% 0%,var(--bg2),var(--bg) 70%) fixed;color:var(--ink);font-family:'Special Elite',monospace;display:flex;justify-content:center}
.grain{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.12;mix-blend-mode:overlay;
 background:repeating-linear-gradient(0deg,rgba(0,0,0,.6) 0 1px,transparent 1px 3px),
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
main{width:min(920px,94vw);padding:2.2rem 0 2rem}
header{text-align:center;margin-bottom:1.6rem}
h1{font:400 clamp(2.4rem,7vw,4rem)/1 'VT323',monospace;color:var(--amber);margin:0;letter-spacing:.06em;text-shadow:0 0 14px rgba(242,184,75,.45)}
.sub{color:var(--dim);margin:.4rem 0 0}
.card{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--paper);color:var(--paper-ink);padding:1rem;border-radius:4px;
 box-shadow:0 12px 40px rgba(0,0,0,.6);transform:rotate(-.6deg)}
.photo{position:relative;aspect-ratio:1;background:#000;overflow:hidden;border:3px solid #fff;outline:1px solid #0003}
.photo img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.25) saturate(1.15) contrast(1.05);animation:fade .5s}
.photo::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);pointer-events:none}
@keyframes fade{from{opacity:0;filter:blur(6px) sepia(.25)}}
.missing{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:2rem 'VT323',monospace;color:var(--amber);
 background:repeating-linear-gradient(90deg,#111 0 4px,#1b1b1b 4px 8px)}
.missing[hidden]{display:none}
.stamp{position:absolute;top:.6rem;right:.6rem;font:1.4rem 'VT323',monospace;color:var(--pink);border:2px solid var(--pink);padding:0 .4rem;transform:rotate(6deg);background:#0006;z-index:2}
.note{padding:.8rem 1.2rem;display:flex;flex-direction:column;justify-content:center;gap:.2rem;background:
 repeating-linear-gradient(transparent 0 31px,#0001 31px 32px)}
.label{margin:.6rem 0 0;font:1.1rem 'VT323',monospace;text-transform:uppercase;letter-spacing:.15em;color:#7a6e4e}
h2{font:400 2.2rem 'VT323',monospace;margin:0}
.phrase{font-size:1.45rem;line-height:1.3;margin:.1rem 0 0;min-height:3.8rem}
.translation{font-style:italic;margin:.3rem 0;color:#5b5238}
.link{background:none;border:0;padding:0;color:var(--pink);font:inherit;text-decoration:underline;cursor:pointer;align-self:flex-start}
.player{display:flex;align-items:center;gap:.7rem;margin-top:1rem}
.bar{flex:1;height:8px;background:#0002;border-radius:4px;overflow:hidden}
#progress{height:100%;width:0;background:var(--pink)}
#dur{font:1.1rem 'VT323',monospace;min-width:2.5rem}
button{cursor:pointer;font-family:inherit}
#play{background:var(--paper-ink);color:var(--paper);border:0;padding:.45rem .9rem;border-radius:3px;font-size:1rem}
#play:hover{background:#000}
#play.playing{background:var(--pink)}
.controls{display:flex;justify-content:center;align-items:center;gap:1.2rem;margin-top:1.8rem;flex-wrap:wrap}
.controls button{background:transparent;color:var(--amber);border:2px solid var(--amber);padding:.4rem .9rem;font-size:1.1rem}
.controls button:hover{background:var(--amber);color:var(--bg)}
#auto[aria-pressed=true]{background:var(--amber);color:var(--bg)}
#count{font:1.6rem 'VT323',monospace;min-width:5.5rem;text-align:center}
.hint,footer{text-align:center;color:var(--dim);font-size:.85rem}
.hint{margin:1rem 0 .2rem}
footer{margin-top:1rem;opacity:.7}
button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
@media(max-width:700px){.card{grid-template-columns:1fr;transform:none}.note{padding:1rem .4rem}}
@media(prefers-reduced-motion:reduce){.photo img{animation:none}}

.strip{display:flex;gap:6px;overflow-x:auto;padding:.9rem .2rem .4rem;margin-top:1.2rem;scrollbar-color:var(--amber) transparent}
.strip button{flex:0 0 auto;width:58px;height:58px;padding:0;border:2px solid transparent;background:#000;opacity:.55;transition:.2s;border-radius:2px;overflow:hidden}
.strip button:hover{opacity:.9}
.strip button.on{opacity:1;border-color:var(--amber);transform:translateY(-4px)}
.strip img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.25)}