:root{--bg: #ffffff;--bg-2: #fafafa;--ink: #20242b;--muted: #758696;--faint: #aab0b8;--accent: #9d00ff;--accent-ink: #7a00c8;--line: rgba(20, 24, 32, .1);--line-soft: rgba(20, 24, 32, .06);--sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;--ease: cubic-bezier(.22, 1, .36, 1);--ease-out: cubic-bezier(.23, 1, .32, 1);--stage-top-reserve: clamp(150px, 18vh, 200px);--stage-right-reserve: 0px;--stage-left-reserve: 0px;--scrollbar-bottom: clamp(26px, 4vh, 46px);--scrollbar-hit-padding: 16px;--artwork-scrollbar-gap: clamp(36px, 6vh, 72px);--vstrip-right: clamp(22px, 3vw, 44px);--vstrip-active-width: 22px;--vstrip-artwork-gap: 0px;--controls-bottom-reserve: calc( var(--scrollbar-bottom) + var(--scrollbar-hit-padding) + var(--artwork-scrollbar-gap) );--caption-bottom: clamp(80px, 11vh, 116px);--caption-safe-height: 0px;--caption-artwork-gap: 0px;--stage-bottom-reserve: max( var(--controls-bottom-reserve), calc(var(--caption-bottom) + var(--caption-safe-height) + var(--caption-artwork-gap)) );--artwork-horizontal-reserve: max(var(--stage-left-reserve), var(--stage-right-reserve));--artwork-vertical-reserve: max(var(--stage-top-reserve), var(--stage-bottom-reserve));--artwork-max-width: calc( 100vw - var(--artwork-horizontal-reserve) - var(--artwork-horizontal-reserve) );--artwork-max-height: calc( 100vh - var(--artwork-vertical-reserve) - var(--artwork-vertical-reserve) )}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%}body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}::selection{background:var(--accent);color:#fff}::-moz-selection{background:var(--accent);color:#fff}.gallery{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:var(--bg);overscroll-behavior:none;user-select:none;-webkit-user-select:none;touch-action:none}.gesture{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4}.era,.caption,.panel{user-select:text;-webkit-user-select:text}.era,.caption{cursor:text}.stage{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:2}.artwork-layer{position:relative;display:grid;place-items:center;width:min(64vw,56vh,var(--artwork-max-width));height:min(58vh,var(--artwork-max-height));will-change:transform,opacity}.artwork-img{max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;display:block;border:1px solid var(--line-soft);box-shadow:0 18px 44px -20px #14182047,0 6px 16px -8px #1418201f;background:#fff}.artwork-loading{position:absolute;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}.era{position:absolute;top:clamp(28px,4.5vh,48px);left:clamp(28px,4.5vw,60px);z-index:6;max-width:44ch}.era-name{font-weight:500;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.12;letter-spacing:-.015em;color:var(--ink);white-space:nowrap}.era-meta{margin-top:12px;font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.era-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--faint);display:inline-block}.era-shift{margin-top:16px;font-size:.82rem;font-weight:400;line-height:1.5;color:var(--muted);max-width:30ch}.caption{position:absolute;left:clamp(28px,4.5vw,60px);bottom:var(--caption-bottom);z-index:6;max-width:38ch}.caption-artist{font-weight:500;font-size:.92rem;letter-spacing:-.005em;color:var(--ink)}.caption-title{font-size:.82rem;font-weight:400;color:var(--muted);margin-top:2px;line-height:1.35}.caption-meta{margin-top:11px;font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);display:flex;flex-direction:column;gap:4px}.caption-meta a{color:var(--accent-ink);text-decoration:none;width:fit-content;border-bottom:1px solid transparent}.caption-meta a:hover{border-color:var(--accent)}.vstrip{position:absolute;right:var(--vstrip-right);top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:9px}.vtick{width:10px;height:2px;background:var(--line);border:none;padding:0;cursor:pointer;transition:width .18s var(--ease),background-color .18s var(--ease)}.vtick.active{width:22px;background:var(--accent)}.scrollbar{position:absolute;left:50%;bottom:var(--scrollbar-bottom);transform:translate(-50%);width:clamp(200px,30vw,400px);z-index:6}.sb-track{position:relative;height:2px;background:var(--line);border-radius:2px}.sb-thumb{position:absolute;top:50%;height:2px;transform:translateY(-50%);background:var(--accent);border-radius:2px;transition:left .22s var(--ease),width .22s var(--ease)}.sb-hits{position:absolute;inset:calc(-1 * var(--scrollbar-hit-padding)) 0;display:flex}.sb-hit{flex:1;background:none;border:none;padding:0;cursor:pointer}.context{position:absolute;top:clamp(28px,4.5vh,48px);right:clamp(28px,4.5vw,60px);z-index:7;width:min(40ch,42vw);text-align:right;--context-origin-x: calc(100% - 2.9rem) ;--context-origin-y: .7rem;--context-origin-lift: -2px}.context-trigger{background:none;border:none;padding:0;font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.01em;color:var(--muted);cursor:pointer;transform-origin:right center;transition:opacity .12s var(--ease-out),color .12s ease,transform .12s var(--ease-out);transition-delay:90ms,0ms,90ms}.context-trigger:hover{color:var(--accent-ink)}.context-trigger:active{transform:scale(.97)}.context.open .context-trigger{opacity:0;transform:translateY(-1px) scale(.94);pointer-events:none;transition-delay:0ms}.context-body{position:absolute;top:0;right:0;width:100%;text-align:left;font-size:.9rem;font-weight:400;line-height:1.6;color:var(--muted);opacity:0;clip-path:inset(0 0 calc(100% - 1.4rem) calc(100% - 5.8rem) round 10px);transform:translate3d(0,var(--context-origin-lift),0) scale(.88);transform-origin:var(--context-origin-x) var(--context-origin-y);pointer-events:none;cursor:pointer;will-change:opacity,transform,clip-path;transition:opacity .13s var(--ease-out),transform .17s var(--ease-out),clip-path .17s var(--ease-out)}.context.open .context-body{opacity:1;clip-path:inset(0 0 0 0 round 0);transform:translateZ(0) scale(1);pointer-events:auto;transition-duration:.21s;transition-delay:18ms}.context[data-motion=instant] .context-trigger,.context[data-motion=instant] .context-body{transition-delay:0ms;transition-duration:1ms}@media (max-width: 720px){:root{--stage-top-reserve: clamp(96px, 14vh, 128px);--vstrip-artwork-gap: clamp(18px, 5vw, 28px);--stage-right-reserve: calc( var(--vstrip-right) + var(--vstrip-active-width) + var(--vstrip-artwork-gap) );--stage-left-reserve: var(--stage-right-reserve);--caption-bottom: clamp(58px, 7.5vh, 76px);--caption-safe-height: clamp(72px, 15vh, 92px);--caption-artwork-gap: 20px}.era-shift{display:none}.artwork-layer{width:min(84vw,var(--artwork-max-width));height:min(52vh,var(--artwork-max-height))}.caption{max-width:70vw}.context{top:clamp(104px,16vh,132px);right:clamp(16px,5vw,28px);left:clamp(16px,5vw,28px);width:auto;--context-origin-y: calc(clamp(28px, 4.5vh, 48px) - clamp(104px, 16vh, 132px) + .95rem) ;--context-origin-lift: calc(clamp(28px, 4.5vh, 48px) - clamp(104px, 16vh, 132px) + 2px) }.context-trigger{position:absolute;top:calc(clamp(28px,4.5vh,48px) - clamp(104px,16vh,132px));right:0}.context-body{top:0;width:min(100%,34rem);max-height:min(42vh,22rem);overflow:auto;overscroll-behavior:contain;padding:16px 18px;font-size:.86rem;color:#20242bc7;background:linear-gradient(135deg,#ffffffc7,#ffffff75);border:1px solid rgba(255,255,255,.72);border-radius:16px;box-shadow:0 24px 68px -34px #14182061,inset 0 1px #ffffffc7;backdrop-filter:blur(22px) saturate(1.22);-webkit-backdrop-filter:blur(22px) saturate(1.22);transform:translate3d(0,var(--context-origin-lift),0) scale(.9);transform-origin:var(--context-origin-x) var(--context-origin-y)}.context.open .context-body{transform:translateZ(0) scale(1)}}@media (prefers-reduced-motion: reduce){.context-trigger,.context-body,.context.open .context-body{clip-path:inset(0 0 0 0);transition-delay:0ms;transition-duration:.12s;transform:none}.context.open .context-trigger,.context-trigger:active{transform:none}.context[data-motion=instant] .context-trigger,.context[data-motion=instant] .context-body{transition-duration:1ms}}