: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);--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);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}.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}.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-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;transition:opacity .25s cubic-bezier(.32,.72,0,1)}.context-trigger:hover{color:var(--accent-ink)}.context.open .context-trigger{opacity:0;pointer-events:none}.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;transform:translateY(-4px);pointer-events:none;cursor:pointer;transition:opacity .4s cubic-bezier(.32,.72,0,1),transform .4s cubic-bezier(.32,.72,0,1)}.context.open .context-body{opacity:1;transform:translateY(0);pointer-events:auto;transition-delay:.06s}@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-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:translateY(-6px) scale(.985);transform-origin:top right}.context.open .context-body{transform:translateY(0) scale(1)}}