:root{--bg: #0c0b0a;--paper: #f3ece1;--muted: #b8aea0;--line: rgba(243, 236, 225, .18);--serif: "Cormorant Garamond", Georgia, serif;--sans: "Outfit", system-ui, sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;height:100dvh;background:var(--bg);color:var(--paper);font-family:var(--sans);overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}canvas{display:block;width:100%;height:100%;touch-action:none;transition:filter .7s ease}canvas.is-inspecting{filter:blur(3px) saturate(.9)}#view-2d{position:absolute;inset:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 38%,#1a1612,#0c0b0a 72%)}#view-2d[hidden]{display:none}#view-2d.is-inspecting{filter:blur(3px) saturate(.9)}#hud{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:max(1.1rem,env(safe-area-inset-top)) max(1.3rem,env(safe-area-inset-right)) 0 max(1.3rem,env(safe-area-inset-left));pointer-events:none}.modes{display:flex;gap:.35rem;pointer-events:auto;padding:.25rem;border:1px solid var(--line);background:#0c0b0a8c;backdrop-filter:blur(10px)}.modes button{appearance:none;border:0;background:transparent;color:var(--muted);font:400 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:.55rem .85rem;cursor:pointer;touch-action:manipulation}.modes button.is-active{background:var(--paper);color:var(--bg)}#crosshair{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;z-index:15;pointer-events:none;border:1px solid rgba(243,236,225,.7);border-radius:50%;box-shadow:0 0 0 1px #00000059}.help{pointer-events:auto;display:flex;align-items:stretch;max-width:min(20rem,calc(100vw - 2rem));transition:transform .38s cubic-bezier(.22,1,.36,1)}.help.is-collapsed{transform:translate(calc(100% - 1.7rem))}.help-toggle{flex:0 0 1.7rem;width:1.7rem;margin:0;padding:0;border:1px solid var(--line);border-right:0;border-radius:7px 0 0 7px;background:#0c0b0ac7;color:var(--paper);cursor:pointer}.help-arrow{display:block;font-size:1.05rem;line-height:1;transition:transform .32s ease}.help.is-collapsed .help-arrow{transform:rotate(180deg)}.help-body{width:16.5rem;padding:.8rem .95rem .95rem;border:1px solid var(--line);background:#0c0b0ac7;backdrop-filter:blur(12px)}.help-kicker{margin:0 0 .45rem;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.hint{margin:0;font-size:.8rem;font-weight:300;line-height:1.5;color:var(--paper);white-space:pre-line;pointer-events:none}.coverflow{flex:1;position:relative;perspective:1600px;perspective-origin:50% 45%;overflow:hidden;touch-action:none}.coverflow-stage{position:absolute;inset:6% 0 8%;transform-style:preserve-3d}.cover-item{position:absolute;left:50%;top:46%;width:min(52vh,26vw,560px);margin:0;transform-style:preserve-3d;transform:translate(-50%,-50%);transition:transform .78s cubic-bezier(.22,1,.36,1),opacity .5s ease;cursor:pointer;user-select:none}.cover-item img{display:block;width:100%;height:auto;max-height:58vh;object-fit:contain;background:#111}.cover-item .frame{padding:11px 11px 36px;background:linear-gradient(160deg,#4a3424,#2a1c14 55%,#1a110c);box-shadow:0 18px 50px #0000008c,inset 0 0 0 1px #ffdcaa2e}.cover-item.is-away{pointer-events:none}.caption{position:relative;z-index:2;min-height:7.5rem;padding:0 1.5rem 1.6rem;text-align:center}.caption-index,.card-index{margin:0 0 .35rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}.caption-title,.card-title{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3vw,2.4rem)}.caption-meta,.card-meta{margin:.35rem 0 0;color:var(--muted);font-weight:300}.grid{flex:1;overflow:auto;padding:5.5rem 1.5rem 2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem;align-content:start}.grid[hidden]{display:none}.grid-item{margin:0;cursor:pointer;background:transparent;border:0;padding:0;color:inherit;text-align:left}.grid-item .frame{padding:8px 8px 22px;background:linear-gradient(160deg,#4a3424,#1a110c);box-shadow:0 10px 28px #0006;transition:transform .25s ease}.grid-item:hover .frame{transform:translateY(-4px)}.grid-item img{display:block;width:100%;height:220px;object-fit:cover}.grid-item figcaption{margin-top:.65rem;font-family:var(--serif);font-size:1.05rem}.grid-item span{display:block;margin-top:.15rem;font-family:var(--sans);font-size:.72rem;color:var(--muted);font-weight:300}.vignette{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 38%,#00000047 8%,#000000c7 52%,#000000eb);transition:opacity .55s ease}.vignette.is-on{opacity:1;pointer-events:auto}.vignette[hidden]{display:none}.card{position:absolute;left:50%;top:50%;z-index:40;width:min(40rem,calc(100% - 2rem));max-height:calc(100% - 3.5rem);overflow:auto;transform:translate(-50%,calc(-50% + 16px));padding:1.15rem 1.25rem 1.35rem;background:#0c0b0ae0;border:1px solid var(--line);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .45s ease,transform .45s ease}.card.is-on{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}.card[hidden]{display:none}.card-frame{padding:10px 10px 28px;margin:0 0 1rem;background:linear-gradient(160deg,#4a3424,#2a1c14 55%,#1a110c);box-shadow:inset 0 0 0 1px #ffdcaa29}.card-image{display:block;width:100%;max-height:min(56vh,620px);object-fit:contain;background:#111}.card-close{position:absolute;top:.85rem;right:.9rem;appearance:none;border:0;background:transparent;color:var(--paper);font-size:1rem;cursor:pointer;width:2.6rem;height:2.6rem}.card-body{margin:.85rem 0 0;font-weight:300;line-height:1.55;color:#e6ddd2}.empty{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:var(--bg);text-align:center;padding:2rem}.empty[hidden]{display:none}.empty code{font-size:1rem;color:var(--paper)}#touch-ui{position:absolute;inset:0;z-index:18;pointer-events:none}#touch-ui[hidden]{display:none!important}.stick{pointer-events:auto;position:absolute;left:max(.9rem,env(safe-area-inset-left));bottom:max(1.2rem,env(safe-area-inset-bottom));width:7.4rem;height:7.4rem;border:1px solid var(--line);border-radius:50%;background:#0c0b0a61;backdrop-filter:blur(10px);touch-action:none}.stick-knob{position:absolute;left:50%;top:50%;width:2.35rem;height:2.35rem;margin:-1.175rem 0 0 -1.175rem;border-radius:50%;background:#f3ece1e0;box-shadow:0 6px 18px #00000059;will-change:transform}@media(max-width:700px){#hud{gap:.55rem;padding:max(.7rem,env(safe-area-inset-top)) max(.7rem,env(safe-area-inset-right)) 0 max(.7rem,env(safe-area-inset-left))}.modes{max-width:calc(100% - 2.2rem)}.modes button{padding:.5rem .62rem;font-size:.68rem;letter-spacing:.08em}.help-body{width:min(15.5rem,calc(100vw - 3.2rem));padding:.7rem .8rem .85rem}.cover-item{width:min(72vw,320px)}.card{width:calc(100% - 1.2rem);max-height:calc(100% - 1.2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));top:calc(50% + env(safe-area-inset-top)*.15);padding-bottom:max(1.2rem,env(safe-area-inset-bottom))}.grid{padding:5.2rem .9rem max(1.4rem,env(safe-area-inset-bottom));grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:.95rem}.grid-item img{height:180px}.caption{padding:0 1rem max(1.2rem,env(safe-area-inset-bottom));min-height:6.4rem}.stick{width:6.6rem;height:6.6rem}}