:root{--bg: #111111;--line: #343434;--txt: #e8e8e8;--dim: #8f8f8f;--accent: #e23b2e}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:IBM Plex Mono,monospace;cursor:crosshair;user-select:none;-webkit-user-select:none}#stage,#stage canvas{position:fixed;inset:0;display:block}#stage{touch-action:none}body.hovering{cursor:pointer}body.dragging{cursor:grabbing}#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5) 100%);z-index:3}#halo{position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(55% 48% at 50% 46%,rgba(242,237,225,.12),transparent 72%);animation:halo-breathe 9s ease-in-out infinite alternate}@keyframes halo-breathe{0%{opacity:.55}to{opacity:1}}#grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:4;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain-shift .9s steps(4) infinite}@keyframes grain-shift{0%{transform:translate(0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,2%)}to{transform:translate(0)}}#hud-top{position:fixed;top:28px;left:36px;z-index:5;pointer-events:none;display:flex;align-items:baseline;gap:18px}#hud-top h1{font-weight:600;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt)}#hud-top h1 span{font-size:9px;vertical-align:super;color:var(--dim)}#hud-top .desc{font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}#hud-meta{position:fixed;top:28px;right:36px;z-index:5;pointer-events:none;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.14em;color:var(--dim)}#hud-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-in-out infinite}#hud-bottom{position:fixed;bottom:26px;right:36px;z-index:5;pointer-events:none;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}#hud-bottom i{font-style:normal;margin:0 10px;color:var(--accent)}#caption{position:fixed;bottom:26px;left:36px;z-index:5;pointer-events:none;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}#caption.show{opacity:1;transform:translateY(0)}#caption b{font-weight:500;color:var(--txt);margin-right:14px}#filter{position:fixed;bottom:22px;left:50%;transform:translate(-50%);z-index:6;display:flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:999px;background:#111111bf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}#filter button{font-family:inherit;font-size:11px;letter-spacing:.06em;border:none;background:transparent;color:var(--dim);padding:8px 16px;border-radius:999px;cursor:pointer;transition:color .2s ease,background .2s ease}#filter button:hover{color:var(--txt)}#filter button.active{background:var(--txt);color:#111}.overlay-close{position:absolute;top:10px;right:16px;background:none;border:none;font-size:26px;line-height:1;color:var(--dim);cursor:pointer;font-family:inherit;z-index:2}.overlay-close:hover{color:var(--txt)}.card-meta{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:20px}.cat-pill{border:1px solid currentColor;padding:4px 12px;border-radius:999px}.card-title{font-family:"Instrument Serif",serif;font-weight:400;font-size:36px;line-height:1.1;margin-bottom:6px}.card-year{font-size:11px;color:var(--dim);margin-bottom:20px}.card-body{font-size:13px;line-height:1.7;color:#b5b5b5;margin-bottom:22px}.card-tags{display:flex;flex-wrap:wrap;gap:6px}.card-tags span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:4px 12px}#flip-backdrop{position:fixed;inset:0;z-index:7;background:#08080899;opacity:0;pointer-events:none;transition:opacity .35s ease}#flip-backdrop.open{opacity:1;pointer-events:auto}#flipcard{position:fixed;top:50%;left:50%;z-index:8;width:min(460px,calc(100vw - 48px));background:#161616;border:1px solid var(--line);color:var(--txt);padding:52px 38px 38px;border-radius:6px;box-shadow:0 40px 100px #000c;opacity:0;pointer-events:none;transform:translate(-50%,-50%) perspective(1100px) rotateY(.28turn) scale(.7);transition:transform .6s cubic-bezier(.2,.9,.3,1.05),opacity .3s ease;user-select:text;-webkit-user-select:text}#flipcard.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) perspective(1100px) rotateY(0) scale(1)}#flipcard .card-tags{margin-bottom:28px}.flip-btn{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#111;background:var(--txt);text-decoration:none;padding:12px 22px;border-radius:999px;transition:transform .15s ease,background .15s ease}.flip-btn:hover{transform:translateY(-1px);background:#fff}.flip-btn.hidden{display:none}#reader{position:fixed;inset:0;z-index:9;background:#0f0f0f;opacity:0;pointer-events:none;transition:opacity .45s ease;overflow-y:auto;user-select:text;-webkit-user-select:text}#reader.open{opacity:1;pointer-events:auto}#reader.no-anim,#reader.no-anim .reader-inner,#reader.no-anim:before{transition:none!important}#reader:before{content:"";position:absolute;top:-50vh;left:0;right:0;height:150vh;pointer-events:none;background:radial-gradient(60% 36.7% at 50% 33.3%,color-mix(in srgb,var(--halo, #9a9a9a) 28%,transparent),transparent 70%);opacity:0;transform:translateY(-14%);transition:opacity 1s ease .35s,transform 1.4s cubic-bezier(.2,.7,.3,1) .35s}#reader.open:before{opacity:1;transform:none}#reader:after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}#reader .motes{position:fixed;inset:0;pointer-events:none;overflow:hidden}#reader .motes i{position:absolute;bottom:-5vh;width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--halo, #9a9a9a) 90%,transparent);filter:blur(1px);opacity:0;animation:mote-rise 20s linear infinite}#reader .motes i:nth-child(1){left:8%;animation-duration:24s;animation-delay:-4s}#reader .motes i:nth-child(2){left:21%;animation-duration:18s;animation-delay:-11s;width:3px;height:3px}#reader .motes i:nth-child(3){left:36%;animation-duration:28s;animation-delay:-20s;width:7px;height:7px;filter:blur(2px)}#reader .motes i:nth-child(4){left:55%;animation-duration:21s;animation-delay:-7s}#reader .motes i:nth-child(5){left:71%;animation-duration:26s;animation-delay:-16s;width:4px;height:4px}#reader .motes i:nth-child(6){left:84%;animation-duration:17s;animation-delay:-2s;width:3px;height:3px}#reader .motes i:nth-child(7){left:93%;animation-duration:30s;animation-delay:-24s;width:6px;height:6px;filter:blur(2px)}@keyframes mote-rise{0%{transform:translateY(0);opacity:0}10%{opacity:.85}85%{opacity:.55}to{transform:translateY(-115vh);opacity:0}}#reader .overlay-close{position:fixed;top:22px;right:28px;font-size:32px}.reader-inner{position:relative;max-width:720px;margin:0 auto;padding:110px 28px 120px;opacity:0;transform:translateY(24px);transition:opacity .5s ease .15s,transform .5s ease .15s}#reader.open .reader-inner{opacity:1;transform:translateY(0)}#reader .card-title{font-size:clamp(36px,5vw,56px);margin-bottom:8px}#reader .card-year{margin-bottom:0}.reader-head{display:flex;align-items:center;gap:24px;margin-bottom:48px}#reader-hero{display:block;width:96px;flex-shrink:0;border-radius:4px;border:1px solid var(--line)}.poster-ghost{position:fixed;z-index:10;pointer-events:none;background-size:100% 100%;border-radius:4px;border:1px solid var(--line);box-shadow:0 30px 80px #0000008c;transition:transform .75s cubic-bezier(.25,.8,.3,1)}#reader-article{border-top:1px solid var(--line);padding-top:40px;margin-bottom:48px}#reader-article p{font-size:14px;line-height:1.9;color:#b9b9b9;margin-bottom:22px}#reader-article h3{font-family:"Instrument Serif",serif;font-weight:400;font-size:28px;color:var(--txt);margin:40px 0 16px}#reader-article figure{margin:32px 0}#reader-article img{width:100%;border-radius:4px;border:1px solid var(--line)}#reader-article figcaption{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:10px}#loader{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:var(--bg);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);transition:opacity .7s ease}#loader.done{opacity:0;pointer-events:none}#loader span{animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.35}50%{opacity:1}}@media(max-width:760px){#hud-top .desc,#hud-bottom{display:none}#hud-top{left:22px;top:22px}#hud-meta{right:22px;top:22px}#caption{left:22px;bottom:84px}#filter{bottom:18px;max-width:calc(100vw - 24px);overflow-x:auto}.reader-inner{padding-top:90px}}