:root{color-scheme:light;--paper:#fcfcfc;--ink:#383838;--muted:#bcbcbc;--unit:1px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink)}
button,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}button:focus-visible,#stage:focus-visible{outline:1px solid #777;outline-offset:8px}button:focus:not(:focus-visible),#stage:focus:not(:focus-visible){outline:none}
.viewport{position:fixed;inset:0;overflow:hidden;background:var(--paper);isolation:isolate;touch-action:none}
.navigation{position:absolute;z-index:10;top:calc(20 * var(--unit));left:calc(50.5% + 19 * var(--unit));display:flex;align-items:center;gap:calc(24 * var(--unit));transform:translateX(-50%);white-space:nowrap;font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(7 * var(--unit));font-weight:400;line-height:1}
.navigation button{padding:8px 0;color:#dedede;transition:color .35s}.navigation button[aria-current]{color:#4a4a4a}.navigation button:hover{color:#777}
.stage{position:absolute;inset:0;outline:0;touch-action:none;cursor:grab}.stage.dragging{cursor:grabbing}
.card{position:absolute;left:50.5%;top:50.5%;width:232px;height:300px;padding:0;margin:-150px 0 0 -116px;transform-origin:50% 50%;border:0;border-radius:10px;will-change:transform,opacity;background:#ddd;backface-visibility:hidden;box-shadow:1.3px 0 0 #bcbcb8,2.3px 0 0 #e0dfd9;overflow:hidden;user-select:none;touch-action:none}
.card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;filter:none}.card:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff30;pointer-events:none}.card:focus-visible{outline:2px solid #5c6670;outline-offset:5px}
.caption{position:absolute;left:50.5%;bottom:calc(33 * var(--unit));width:min(90vw,600px);transform:translateX(-50%);text-align:center;pointer-events:none;font-weight:300;font-size:calc(11 * var(--unit));line-height:1.5}
.caption p{margin:0}.caption .eyebrow{color:#c9c9c9;will-change:opacity,transform}.category{font-weight:400;margin-top:calc(2 * var(--unit))!important}.description{color:#c7c7c7;position:absolute;top:100%;left:0;right:0;padding-top:calc(5 * var(--unit));opacity:0;will-change:opacity,transform}
.intro-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-size:calc(11 * var(--unit));line-height:1.6;opacity:0;pointer-events:none;white-space:nowrap;font-weight:300}.intro-copy p{margin:0 0 5px}.intro-copy button{font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(9 * var(--unit))}
.progress{position:absolute;z-index:15;right:calc(23 * var(--unit));top:calc(41 * var(--unit));height:calc(100% - 82 * var(--unit));width:10px;margin:0;writing-mode:vertical-lr;direction:ltr;appearance:none;background:transparent;cursor:ns-resize}
.progress{opacity:0}.progress:focus-visible{opacity:1}.progress-rail{position:absolute;right:calc(25 * var(--unit));top:calc(41 * var(--unit));height:calc(100% - 82 * var(--unit));width:1px;background:#e8e8e8;pointer-events:none}.progress-rail span{position:absolute;left:0;top:0;width:1.5px;height:calc(67 * var(--unit));background:#b3b3b3}
.progress::-webkit-slider-runnable-track{width:1px;height:100%;background:#e0e0e0}.progress::-webkit-slider-thumb{appearance:none;width:2px;height:calc(67 * var(--unit));margin-left:-.5px;background:#aaa;border:0;border-radius:1px}.progress::-moz-range-track{width:1px;background:#e0e0e0}.progress::-moz-range-thumb{width:2px;height:60px;background:#aaa;border:0;border-radius:1px}.progress:focus-visible{outline:1px solid #bbb;outline-offset:4px}
.cursor{position:fixed;top:0;left:0;width:3px;height:3px;border-radius:50%;background:#151515;pointer-events:none;z-index:100;transform:translate(-20px,-20px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.error{position:absolute;inset:45% 5% auto;text-align:center;font-size:16px}.error button{text-decoration:underline}
@media(pointer:fine){.viewport,.stage,button,input{cursor:none}}
@media(max-width:600px){.navigation{top:26px;font-size:10px;gap:22px;left:calc(50% + 19px)}.caption{bottom:58px;font-size:12px;width:88%}.intro-copy{font-size:12px;white-space:normal;width:80%}.intro-copy button{font-size:10px}.progress{right:12px;top:62px;height:calc(100% - 124px)}.progress-rail{right:16px;top:62px;height:calc(100% - 124px)}.cursor{display:none}.description{font-size:11px}.card{border-radius:10px}}
@media(prefers-reduced-motion:reduce){.navigation button{transition:none}}