body{min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden}
header,footer{margin-inline:clamp(var(--space-6),5vw,var(--space-16));display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);font-size:var(--text-xs)}
header{padding-block:var(--space-6);border-bottom:1px solid var(--line)}.edition,.serial,.counter,.viewer-bottom,footer span[dir=ltr]{font-family:Manrope,sans-serif}.edition{letter-spacing:.12em}.edition span{color:var(--muted);margin-left:var(--space-4)}.prototype{color:var(--muted)}
main{flex:1}.intro{padding:var(--space-10) clamp(var(--space-6),7vw,var(--space-16)) 0;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6)}.eyebrow{font-size:var(--text-xs);color:var(--muted);margin-bottom:var(--space-2)}h1{font-weight:500;font-size:var(--text-2xl);letter-spacing:-.045em;line-height:1.4}.instruction{font-size:var(--text-sm);line-height:1.8;color:var(--muted)}
.stage{height:clamp(400px,54vh,600px);width:100%;position:relative;overflow:hidden;perspective:1500px;touch-action:pan-y;cursor:grab;user-select:none;isolation:isolate}.stage.dragging{cursor:grabbing}.image-card{position:absolute;left:0;top:50%;width:min(39vw,510px);padding:var(--space-3);background:var(--paper);border-radius:var(--radius);text-align:left;box-shadow:0 4px 10px oklch(20% .02 100 / .05),0 30px 50px -22px oklch(20% .02 100 / .28);transform-origin:center;will-change:transform;cursor:inherit;backface-visibility:hidden}.image-wrap{display:block;aspect-ratio:1.45;overflow:hidden;position:relative;background:var(--line)}.image-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 48%;pointer-events:none}.image-card:nth-child(2) img{object-position:center 45%}.expand{position:absolute;right:12px;top:12px;background:var(--paper);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:Manrope,sans-serif;font-size:var(--text-base);transition:transform .25s}.image-card:hover .expand{transform:rotate(45deg)}.caption{display:flex;justify-content:space-between;gap:var(--space-4);align-items:center;padding:var(--space-4) var(--space-2) var(--space-2);font-size:var(--text-sm)}.serial{font-size:var(--text-xs);letter-spacing:.08em;color:var(--muted)}
.controls{margin:0 clamp(var(--space-6),7vw,var(--space-16)) var(--space-6);display:flex;align-items:center;justify-content:space-between;direction:ltr}.navigation{display:flex;gap:var(--space-2)}.arrow{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:transparent;font-family:Manrope,sans-serif;font-size:var(--text-base);transition:background .2s}.arrow:not(:disabled):hover{background:var(--paper)}.progress{display:flex;gap:var(--space-1)}.dot{width:44px;height:44px;background:none;position:relative}.dot::after{content:"";position:absolute;left:3px;right:3px;height:2px;top:21px;background:var(--line);transition:background .2s}.dot.selected::after{background:var(--ink)}.counter{min-width:104px;text-align:right;font-size:var(--text-sm)}.counter span{color:var(--muted);margin-left:var(--space-2)}
footer{padding-block:var(--space-5);border-top:1px solid var(--line);color:var(--muted)}footer span[dir=ltr]{letter-spacing:.08em}
dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:var(--space-6) clamp(var(--space-4),4vw,var(--space-12));background:oklch(15% .005 120);color:var(--paper);border:0;overflow:hidden}dialog[open]{display:flex;flex-direction:column;gap:var(--space-4);animation:open .24s ease-out}dialog::backdrop{background:oklch(15% .005 120 / .9)}.viewer-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}.viewer-top h2{font-size:var(--text-base);font-weight:400}.close{background:transparent;color:var(--paper);font-size:var(--text-base);width:44px;height:44px;border:1px solid oklch(99% .002 120 / .3);border-radius:50%}.viewer-image{flex:1;min-height:0;display:flex;justify-content:center}.viewer-image img{width:100%;height:100%;object-fit:contain}.viewer-bottom{display:flex;justify-content:center;align-items:center;gap:var(--space-8);font-size:var(--text-xs)}.viewer-bottom .arrow{border-color:oklch(99% .002 120 / .3);color:var(--paper)}.viewer-bottom .arrow:not(:disabled):hover{background:oklch(25% .005 120)}@keyframes open{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
@media(max-width:600px){header{padding-block:var(--space-5)}.edition{letter-spacing:.05em}.prototype{font-size:var(--text-xs)}.intro{display:block;padding-top:var(--space-8)}.instruction{margin-top:var(--space-4)}.stage{height:360px;min-height:0}.image-card{width:79vw;padding:var(--space-2)}.image-wrap{aspect-ratio:1.1}.caption{padding:var(--space-3) var(--space-1) var(--space-1)}.serial{letter-spacing:0}.controls{margin-bottom:var(--space-6)}footer{align-items:flex-start}footer span[dir=ltr]{max-width:140px;text-align:left;line-height:1.6;font-size:var(--text-xs)}.counter{min-width:96px}dialog{padding-top:var(--space-4)}}
@media(min-width:601px){.stage{height:clamp(420px,57vh,620px)}.image-card{width:min(39vw,480px)}}
@media(min-width:601px) and (max-height:700px){.intro{padding-top:var(--space-6)}.stage{height:380px}.image-card{width:min(34vw,380px)}}