:root{--bg:#0b0908;--ink:#ebe6dc;--muted:#9a9389;--line:#ebe6dc24;--acid:#c1bf27;--pink:#f3377e;--red:#cd2914;--cyan:#19c2db;--mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--serif:"Instrument Serif", Georgia, serif;--ease-out:cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;overflow:hidden}::selection{background:var(--acid);color:var(--bg)}:focus-visible{outline:1px solid var(--acid);outline-offset:4px}button{font:inherit;color:inherit;cursor:pointer}kbd{min-width:22px;height:22px;font-family:var(--mono);letter-spacing:.08em;color:var(--ink);border:1px solid #ebe6dc40;border-radius:3px;place-items:center;padding:0 6px;font-size:10px;display:inline-grid}kbd svg{width:12px;height:12px}.app{position:fixed;inset:0}.stage{position:absolute;inset:0}.stage.is-pointing{cursor:pointer}.top,.label,.hint{pointer-events:none}.top,.label,.hint,.stage,.detail-nav,.sheet-handle{-webkit-user-select:none;user-select:none}.top{z-index:2;grid-template-columns:1fr auto 1fr;align-items:center;padding:28px 40px;display:grid;position:absolute;inset:0 0 auto}.top .meta{letter-spacing:.02em;color:var(--muted);font-size:12px}.logo{pointer-events:auto;width:168px;color:var(--ink);display:block}.logo svg{width:100%;height:auto;display:block}.sound{pointer-events:auto;color:var(--muted);letter-spacing:.02em;background:0 0;border:1px solid #ebe6dc33;justify-self:end;align-items:center;gap:10px;padding:8px 12px;font-size:12px;transition:color .2s,border-color .2s;display:inline-flex}.sound:hover,.sound.is-on{color:var(--ink);border-color:#ebe6dc73}.sound-bars{align-items:flex-end;gap:2px;height:10px;display:inline-flex}.sound-bars i{background:currentColor;width:2px;height:3px}.sound.is-on .sound-bars i{animation:.9s ease-in-out infinite alternate bars}.sound.is-on .sound-bars i:nth-child(2){animation-delay:-.3s}.sound.is-on .sound-bars i:nth-child(3){animation-delay:-.6s}@keyframes bars{to{height:10px}}.label{opacity:0;white-space:nowrap;will-change:transform, opacity;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:0;left:0}.label-name{font-family:var(--serif);font-size:30px;line-height:1}.label-variant{font-family:var(--serif);color:var(--muted);font-size:17px;font-style:italic}.hint{letter-spacing:.02em;color:var(--muted);white-space:nowrap;align-items:center;gap:16px;margin:0;font-size:12px;transition:opacity .6s;animation:2.4s ease-in-out infinite hint-pulse;display:flex;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}.hint-keys{gap:4px;display:inline-flex}.hint-off{opacity:0;animation:none}@keyframes hint-pulse{50%{opacity:.4}}.detail{z-index:1;opacity:0;visibility:hidden;flex-direction:column;width:min(460px,38vw);padding:0 48px 28px 0;transition:opacity .25s,visibility 0s .25s;display:flex;position:absolute;top:150px;bottom:24px;right:0}.detail.is-open{opacity:1;visibility:visible;transition:opacity .4s}.detail:before{content:"";z-index:-1;pointer-events:none;background:linear-gradient(90deg,#0b090800,#0b0908d1 34%);position:absolute;inset:-150px 0 -24px -120px}.detail-close{color:var(--muted);letter-spacing:.02em;background:0 0;border:0;order:0;align-self:flex-start;align-items:center;gap:10px;padding:8px 0;font-size:12px;transition:color .2s;display:inline-flex}.detail-close:hover{color:var(--ink)}.detail-close kbd{margin-left:4px}.detail-body{scrollbar-width:thin;scrollbar-color:#ebe6dc33 transparent;flex-direction:column;flex:1;order:1;min-height:0;margin:12px -8px 12px 0;padding-right:8px;display:flex;overflow-y:auto;-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),#0000);mask-image:linear-gradient(#000 calc(100% - 28px),#0000)}.detail-inner{margin:auto 0;padding-bottom:28px}.detail-inner>*{animation:line-in .6s var(--ease-out) both;animation-delay:calc(.25s + var(--i) * 60ms)}@keyframes line-in{0%{opacity:0;filter:blur(6px);transform:translateY(14px)}}.detail-name{font-family:var(--serif);letter-spacing:-.015em;text-wrap:balance;margin:0;font-size:clamp(40px,3.8vw,60px);font-weight:400;line-height:.95}.detail-variant{font-family:var(--serif);color:var(--muted);flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:8px 0 24px;font-size:22px;font-style:italic;display:flex}.detail-specs{gap:10px;margin:0;display:grid}.detail-specs div{grid-template-columns:96px 1fr;align-items:baseline;gap:16px;display:grid}.detail-specs dt,.sizes-readout dt{letter-spacing:.02em;color:var(--muted);font-size:12px;font-weight:400}.detail-specs dd{font-family:var(--serif);text-wrap:pretty;margin:0;font-size:19px;line-height:1.25}.detail-cta{border:1px solid var(--acid);color:var(--acid);letter-spacing:.02em;align-items:center;gap:10px;margin:0 0 24px;padding:12px 18px;font-size:13px;font-weight:700;text-decoration:none;transition:background-color .2s,color .2s;display:inline-flex}.detail-cta:hover,.detail-cta:focus-visible{background:var(--acid);color:var(--bg);outline:none}.detail-tabs{border-bottom:1px solid var(--line);gap:22px;margin:28px 0 18px;display:flex}.detail-tabs button{color:var(--muted);letter-spacing:.02em;background:0 0;border:0;border-bottom:1px solid #0000;margin-bottom:-1px;padding:0 0 10px;font-size:13px;transition:color .2s,border-color .2s}.detail-tabs button:hover{color:var(--ink)}.detail-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--acid)}.sizes-picker{flex-wrap:wrap;gap:4px;display:flex}.sizes-picker button{border:1px solid var(--line);min-width:34px;height:30px;color:var(--muted);background:0 0;padding:0 6px;font-size:11px;transition:color .15s,border-color .15s,background-color .15s}.sizes-picker button:hover{color:var(--ink);border-color:#ebe6dc66}.sizes-picker button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}.sizes-readout{grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0 0;display:grid}.sizes-readout div{grid-template-rows:1fr auto;display:grid}.is-compact .sizes-readout{grid-template-columns:1fr 1fr}.sizes-readout dd{font-family:var(--serif);font-variant-numeric:lining-nums tabular-nums;margin:6px 0 0;font-size:32px;line-height:1}.sizes-readout small{font-family:var(--mono);color:var(--muted);margin-left:5px;font-size:11px}.sizes-note{max-width:44ch;color:var(--muted);margin:16px 0 0;font-size:11px;line-height:1.6}.detail-soon{font-family:var(--mono);letter-spacing:.02em;color:var(--acid);font-size:12px;font-style:normal}.detail-photos{scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x pan-y;gap:8px;margin:0 -8px 0 0;display:flex;overflow-x:auto}.detail-photos::-webkit-scrollbar{display:none}.detail-photos img{aspect-ratio:4/5;object-fit:cover;scroll-snap-align:start;filter:grayscale()contrast(1.08)brightness(.85);flex:0 0 148px;width:148px}.sheet-top{order:2}.detail-nav{border-top:1px solid var(--line);grid-template-columns:1fr auto 1fr;align-items:center;padding-top:16px;display:grid}.detail-nav button{letter-spacing:.02em;background:0 0;border:0;align-items:center;gap:10px;padding:8px 0;font-size:12px;transition:color .2s;display:inline-flex}.detail-nav button:last-child{justify-self:end}.detail-nav button:hover{color:var(--acid)}.detail-count{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}@media (aspect-ratio<=1){.detail{width:auto;height:46%;padding:0 20px 16px;top:auto;left:0}.detail-name{font-size:40px}.detail-photos img{width:72px}}.is-compact .stage{touch-action:none}.is-compact .top{background:linear-gradient(#0b0908eb 55%,#0b090800);grid-template-columns:1fr auto;padding:16px 16px 28px}.is-compact .top .meta{display:none}.is-compact .logo{width:124px}.is-compact .sound{padding:7px 10px;font-size:10px}.is-compact .label-name{font-size:26px}.is-compact .hint{letter-spacing:.16em;gap:10px;font-size:10px;bottom:40px}.hint>svg{width:12px;height:12px}.is-compact .detail{width:auto;height:42%;padding:0 20px max(12px, env(safe-area-inset-bottom));border-top:1px solid var(--line);touch-action:pan-y;transition:opacity .25s ease, visibility 0s .25s, transform .45s var(--ease-out), height .45s var(--ease-out);background:#0b0908f5;inset:auto 0 0;transform:translateY(24px)}.is-compact .detail.is-open{transition:opacity .4s ease, transform .45s var(--ease-out), height .45s var(--ease-out);transform:none}.is-compact .detail.is-expanded{height:calc(100% - 64px)}.is-compact .detail:before{display:none}.sheet-handle{background:0 0;border:0;place-items:center;width:100%;height:34px;padding:0;display:grid}.sheet-grip{background:#ebe6dc59;width:40px;height:3px}.is-compact .sheet-top{touch-action:none;order:0}.is-compact .detail-nav{border-top:0;border-bottom:1px solid var(--line);padding:0 0 8px}.is-compact .detail:not(.is-expanded){touch-action:none}.detail.is-dragging{transition:none!important}.is-compact .detail-body{order:2;margin:16px -8px 0 0;overflow:hidden}.is-compact .detail-inner{margin:0}.is-compact .detail.is-expanded .detail-body{overflow-y:auto}.is-compact .detail-name{font-size:36px}.is-compact .detail-variant{margin:6px 0 20px;font-size:20px}.is-compact .detail-photos img{flex-basis:44vw;width:44vw}.xlook{margin-top:32px}.xlook-card{border:1px solid var(--line);text-align:left;background:#ebe6dc06;grid-template-columns:104px 1fr auto;align-items:center;gap:18px;width:100%;padding:10px 16px 10px 10px;transition:border-color .2s,background-color .2s;display:grid}.xlook-stage{aspect-ratio:4/5;background:radial-gradient(circle at 50% 42%, #231d19, var(--bg) 72%);display:block;position:relative;overflow:hidden}.xlook-stage img{object-fit:contain;width:100%;height:100%;transition:transform .6s var(--ease-out);position:absolute;inset:0}.xlook-mark{color:var(--ink);font-variant-numeric:tabular-nums;background:#0b0908b3;align-items:center;gap:4px;padding:2px 5px 2px 3px;font-size:10px;transition:color .2s;display:inline-flex;position:absolute;bottom:6px;left:6px}.xlook-mark svg{width:13px;height:13px}.xlook-text{gap:6px;display:grid}.xlook-title{font-family:var(--serif);font-size:28px;line-height:1}.xlook-copy{color:var(--muted);text-wrap:pretty;font-size:12px;line-height:1.5}.xlook-arrow{color:var(--muted);transition:color .2s ease, transform .3s var(--ease-out)}.xlook-card:hover,.xlook-card:focus-visible{border-color:var(--acid);background:#c1bf270d;outline:none}.xlook-card:hover .xlook-mark,.xlook-card:focus-visible .xlook-mark,.xlook-card:hover .xlook-arrow,.xlook-card:focus-visible .xlook-arrow{color:var(--acid)}.xlook-card:hover .xlook-arrow,.xlook-card:focus-visible .xlook-arrow{transform:translate(2px,-2px)}.xlook-card:hover .xlook-stage img,.xlook-card:focus-visible .xlook-stage img{transform:scale(1.05)}.viewer{z-index:30;background:radial-gradient(ellipse 70% 60% at 50% 46%, #1d1714 0%, var(--bg) 70%);touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;animation:.45s both viewer-in;position:fixed;inset:0}@keyframes viewer-in{0%{opacity:0}}.viewer:after{content:"";pointer-events:none;background:radial-gradient(85% 80%,#0000 55%,#0000008c);position:absolute;inset:0}.viewer-canvas{cursor:grab;position:absolute;inset:0}.viewer-canvas:active{cursor:grabbing}.viewer-top,.viewer-bottom{z-index:1;pointer-events:none;justify-content:space-between;gap:16px;padding:28px 40px;display:flex;position:absolute;left:0;right:0}.viewer-top{background:linear-gradient(#0b0908c7,#0b090880 45%,#0000);align-items:flex-start;padding-bottom:56px;top:0}.viewer-bottom{background:linear-gradient(#0000,#0b090899);grid-template-columns:1fr auto 1fr;align-items:end;padding-top:48px;display:grid;bottom:0}.viewer-top>*,.viewer-bottom>button{pointer-events:auto}.viewer-title{gap:8px;margin:0;font-weight:400;display:grid}.viewer-name{font-family:var(--serif);letter-spacing:-.01em;font-size:clamp(32px,3.4vw,48px);line-height:.95}.viewer-sub{flex-wrap:wrap;align-items:baseline;gap:4px 14px;display:flex}.viewer-sub em{font-family:var(--serif);color:var(--muted);font-size:20px}.viewer-tag{letter-spacing:.02em;color:var(--acid);font-size:12px}.viewer-close,.viewer-reset{color:var(--ink);letter-spacing:.02em;background:#0b090880;border:1px solid #ebe6dc33;flex:none;align-items:center;gap:10px;padding:8px 12px;font-size:12px;transition:color .2s,border-color .2s,opacity .3s;display:inline-flex}.viewer-close:hover,.viewer-reset:hover,.viewer-close:focus-visible,.viewer-reset:focus-visible{color:var(--acid);border-color:var(--acid);outline:none}.viewer-close kbd{margin-left:2px}.viewer-reset{grid-column:3;justify-self:end}.viewer-reset:disabled{opacity:0;pointer-events:none}.viewer-hint{letter-spacing:.02em;color:var(--muted);text-align:center;text-wrap:balance;grid-column:2;align-self:center;margin:0;font-size:12px;line-height:1.5;transition:opacity .6s;animation:2.4s ease-in-out infinite hint-pulse}.viewer-hint.is-off{opacity:0;animation:none}.viewer-status{z-index:1;letter-spacing:.02em;width:max-content;max-width:calc(100% - 32px);color:var(--muted);text-align:center;pointer-events:none;justify-items:center;gap:10px;margin:0;font-size:12px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.viewer-status p{margin:0}.viewer-line{background:var(--line);width:120px;height:1px;display:block;position:relative;overflow:hidden}.viewer-line:after{content:"";background:var(--ink);width:40%;animation:1.3s ease-in-out infinite viewer-line;position:absolute;inset:0}@keyframes viewer-line{0%{transform:translate(-100%)}to{transform:translate(250%)}}.viewer-retry{color:var(--ink);font-family:var(--mono);letter-spacing:.02em;pointer-events:auto;background:#0b090880;border:1px solid #ebe6dc33;align-items:center;gap:10px;margin-top:8px;padding:8px 12px;font-size:12px;transition:color .2s,border-color .2s;display:inline-flex}.viewer-retry:hover,.viewer-retry:focus-visible{color:var(--acid);border-color:var(--acid);outline:none}.viewer-pct{font-family:var(--serif);color:var(--ink);font-variant-numeric:lining-nums tabular-nums;font-size:44px;line-height:1}.viewer-status.is-error{font-family:var(--serif);color:var(--ink);font-size:26px}.is-compact .viewer-top,.is-compact .viewer-bottom{padding:max(16px, env(safe-area-inset-top)) 16px 16px}.is-compact .viewer-top{padding-bottom:40px}.is-compact .viewer-bottom{padding-top:40px;padding-bottom:max(16px, env(safe-area-inset-bottom));grid-template-columns:1fr;justify-items:center;gap:12px}.is-compact .viewer-name{font-size:30px}.is-compact .viewer-sub em{font-size:17px}.is-compact .viewer-hint{grid-column:1;font-size:11px}.is-compact .viewer-reset{grid-column:1;justify-self:end}.is-compact .viewer-close kbd{display:none}.opener{z-index:10;background:var(--bg);text-transform:uppercase;flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:fixed;inset:0}.opener.is-leaving{pointer-events:none;animation:1.1s linear .18s forwards lights-on}@keyframes lights-on{0%,8%{opacity:1}10%,16%{opacity:.15}18%,30%{opacity:1}32%,36%{opacity:.05}38%,44%{opacity:.8}to{opacity:0}}.cat{display:block}.opener-count{letter-spacing:.3em;font-variant-numeric:tabular-nums;margin:8px 0 0;font-size:13px;font-weight:700}.opener-actions{animation:rise .7s var(--ease-out) both;flex-direction:column;align-items:center;gap:14px;margin-top:8px;display:flex}@keyframes rise{0%{opacity:0;transform:translateY(8px)}}.opener-enter{letter-spacing:.02em;text-transform:none;background:0 0;border:1px solid #ebe6dc80;padding:14px 28px;font-size:14px;font-weight:700;transition:background-color .2s,color .2s,border-color .2s}.opener-enter:hover,.opener-enter:focus-visible{background:var(--acid);border-color:var(--acid);color:var(--bg);outline:none}.opener-enter:focus-visible:not(:hover){border-color:var(--ink);color:var(--ink);background:0 0}.opener-tag{letter-spacing:.24em;color:var(--muted);margin:0;font-size:11px}.no-webgl .opener-tag{text-align:center;max-width:260px;line-height:1.8}.tapes{--tape-h:clamp(44px, 7vmin, 84px);--tape:var(--acid);--tape-ink:#100c0b;z-index:11;pointer-events:none;position:fixed;inset:0;overflow:hidden}.tape.is-pink{--tape:var(--pink)}.tape{width:170vmax;height:var(--tape-h);margin:calc(var(--tape-h) / -2) 0 0 -85vmax;position:absolute;top:50%;left:50%}.tape-slide,.tape-whole,.tape-half,.tape-face{position:absolute;inset:0}.tape-slide{will-change:transform}.tape-face{background:linear-gradient(180deg, #ffffff57, #fff0 24%, #fff0 64%, #00000038), var(--wrinkles), var(--tape);align-items:center;display:flex;overflow:hidden}.tape-whole .tape-face{box-shadow:0 12px 28px #0000008c,0 2px 3px #00000059}.tape-half{opacity:0;filter:drop-shadow(0 10px 16px #00000080);will-change:transform}.tape-half.is-left{transform-origin:0}.tape-half.is-right{transform-origin:100%}.tape-text{font-family:Anton,Impact,Arial Narrow Bold,sans-serif;font-size:calc(var(--tape-h) * .56);letter-spacing:.015em;white-space:nowrap;text-transform:uppercase;color:var(--tape-ink);opacity:.92;flex:none;align-items:center;gap:.55em;padding-top:.04em;line-height:1;display:flex}.tape-text svg{flex:none;width:.42em;height:.42em}.tapes-shade{opacity:0;background:radial-gradient(80% 75% at 50% 48%,#0000 45%,#00000080);position:absolute;inset:0}.tapes-static{opacity:0;width:100%;height:100%;image-rendering:pixelated;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.hint,.sound.is-on .sound-bars i,.opener-actions,.detail-inner>*,.viewer,.viewer-hint{animation:none}.viewer-line:after{animation-duration:3s}.xlook-stage img,.xlook-card:hover .xlook-stage img,.xlook-card:focus-visible .xlook-stage img{transition:none;transform:none}.opener.is-leaving{animation:.4s forwards fade-out}}@keyframes fade-out{to{opacity:0}}