:root{color-scheme:dark;--bg:#080d10;--surface:#10171b;--ink:#f1eadf;--muted:#b4ada2;--gold:#d8be84;--line:#ffffff26;--serif:'Noto Serif KR',Georgia,serif;--sans:'Noto Sans KR',sans-serif;--space:clamp(20px,4vw,72px);--header:76px;--focus:#f5d78e;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--header)}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:6px}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}.skip{position:fixed;top:-100px;z-index:40;background:var(--ink);color:var(--bg);padding:12px}.skip:focus{top:10px}
.topbar{height:var(--header);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space);border-bottom:1px solid var(--line);position:sticky;top:0;background:#080d10ed;z-index:20;backdrop-filter:blur(15px)}.brand,.top-actions{display:flex;align-items:center;gap:16px}.brand{font-size:14px;letter-spacing:.04em}.brand-mark{font-family:Georgia,serif;color:var(--gold);font-size:35px;line-height:1}.edition{font-size:11px;letter-spacing:.22em;color:var(--muted)}.text-button{font-size:14px;line-height:1.6;min-height:44px;padding:8px 12px}.text-button:hover{color:var(--gold)}.icon-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}.icon-button:hover{background:#ffffff0d}.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.theater{min-height:calc(100svh - var(--header));display:flex;flex-direction:column;justify-content:center;padding:24px var(--space) 18px;max-width:1920px;margin:auto}.stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#05090c;isolation:isolate;container-type:inline-size;max-height:calc(100svh - var(--header) - 155px);margin:auto;border:1px solid var(--line)}.poster,.frames,.frame,.shade,.film-grain,.frame-corners{position:absolute;inset:0;pointer-events:none}.poster img,.frame img{width:100%;height:100%;object-fit:cover}.frames{z-index:1}.frame{opacity:0;overflow:hidden}.frame img{will-change:transform}.shade{z-index:2;background:linear-gradient(90deg,#03080bd9 0%,#03080b59 48%,transparent 80%),linear-gradient(0deg,#03080bd9 0%,transparent 26%,transparent 78%,#03080b22 100%)}.film-grain{z-index:3;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.frame-corners{z-index:4;inset:4%;border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12}.welcome{position:absolute;left:7%;top:23%;z-index:6;max-width:84%}.eyebrow{font-size:12px;color:var(--gold);letter-spacing:.2em;margin:0 0 22px}.welcome .eyebrow{font-size:1.05cqw;margin-bottom:2.5cqw}.welcome h1{font-family:var(--serif);font-weight:400;line-height:1.45;letter-spacing:.02em;font-size:7.1cqw;margin:0;color:var(--ink);white-space:nowrap}.ellipsis{color:var(--gold)}.opening-line{font-size:1.45cqw;letter-spacing:.08em;color:#d6d0c6;margin:1.1cqw 0 3.6cqw}.start-button{border:1px solid #d8be8466;display:inline-flex;align-items:center;gap:1.2cqw;padding:1cqw 2.4cqw;min-height:44px;font-size:1.2cqw;letter-spacing:.06em;background:#080d1055}.start-button:hover{background:var(--gold);color:var(--bg)}.start-button svg{width:18px;height:18px;fill:currentColor;stroke:none}.listen-note{font-size:.85cqw;color:var(--muted);margin-top:1.3cqw}.playing-experience .welcome{display:none}.playing-experience .poster{opacity:0}
.motion-words{position:absolute;inset:0;z-index:5;pointer-events:none}.word-event{position:absolute;left:7%;top:35%;opacity:0;max-width:86%;font-family:var(--serif);line-height:1.6;letter-spacing:.015em;font-size:4.8cqw;font-weight:400}.word-event.center{left:0;width:100%;max-width:100%;text-align:center;top:36%}.word-event.hero-word{font-size:7cqw;top:30%}.word-event.final-word{font-size:5cqw;top:32%}.word-event .word-mask{display:block;overflow:hidden;padding:.08em 0}.word-event .word-inner{display:block}.word-event .small-word{font-family:var(--sans);font-size:1.2cqw;letter-spacing:.2em;color:var(--muted);display:block;margin-bottom:1.5cqw}.word-event.gold{color:var(--gold)}.clock{opacity:0;position:absolute;z-index:6;inset:27% 0 auto;text-align:center;color:var(--gold);font-variant-numeric:tabular-nums;pointer-events:none}.clock-label{font-size:1.3cqw;letter-spacing:.18em;display:block;color:var(--muted)}#clock-digits{display:block;font-family:var(--serif);font-size:11cqw;line-height:1.5;font-weight:400;letter-spacing:.08em}.clock-rule{display:block;width:7cqw;height:1px;background:var(--gold);margin:1cqw auto;opacity:.5}.subtitle{position:absolute;z-index:8;bottom:8%;left:7%;width:86%;height:4.5cqw;display:flex;align-items:center;justify-content:center;pointer-events:none}.subtitle span{font-size:2.05cqw;font-weight:500;line-height:1.6;white-space:nowrap;text-align:center;text-shadow:0 2px 14px #000,0 1px 3px #000;letter-spacing:.025em}.scene-index{position:absolute;z-index:7;left:7%;bottom:4.2%;display:none;align-items:center;gap:1cqw;font-size:.82cqw;color:var(--muted);letter-spacing:.08em}.playing-experience .scene-index{display:flex}.index-rule{height:1px;width:3cqw;background:var(--gold);opacity:.7}#chapter-number{color:var(--gold)}.end-card{position:absolute;right:7%;bottom:16%;z-index:10;text-align:right}.end-card p{font-family:var(--serif);font-size:1.5cqw;color:var(--gold)}
.transport{width:100%;margin:auto;max-width:1760px;padding-top:16px}.timeline-row{display:flex;align-items:center;gap:16px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.timeline-row input{flex:1;min-width:0;cursor:pointer;accent-color:var(--gold);height:22px;background:transparent}.transport-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}.transport-left,.transport-right{display:flex;align-items:center;gap:16px}.primary-control{border:1px solid #d8be8455;color:var(--gold)}.primary-control .play-icon{fill:currentColor;stroke:none}.pause-icon{display:none}.is-playing .play-icon{display:none}.is-playing .pause-icon{display:block}.track-info{display:flex;flex-direction:column;gap:1px;font-size:13px}.track-info strong{font-weight:400}.track-info span{color:var(--muted);font-size:11px}.transport-right{gap:4px}.transport-right [aria-pressed=false]#captions{color:var(--muted)}#mute[aria-pressed=true]{color:var(--muted);text-decoration:line-through}.error-message{font-size:14px;color:var(--gold);margin:8px 0}.about{max-width:760px;padding:96px var(--space) 100px;margin:0 auto;text-align:center}.about h2{font-family:var(--serif);font-size:clamp(28px,3vw,44px);font-weight:400;line-height:1.6;margin:0 0 32px}.about p{color:var(--muted);line-height:1.95;font-size:16px}.credits{font-size:13px!important;margin-top:32px}.credits span{margin:0 10px;color:#6d736f}.archive-link{display:inline-block;border-bottom:1px solid #d8be8455;padding:10px 0;color:var(--gold);margin-top:24px;font-size:14px}footer{border-top:1px solid var(--line);padding:24px var(--space);display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.menu{position:fixed;right:var(--space);top:calc(var(--header) + 12px);background:var(--surface);border:1px solid var(--line);z-index:30;width:230px;padding:20px;box-shadow:0 24px 70px #0008}.menu a{display:block;padding:15px 10px;font-size:16px}.menu a:hover{color:var(--gold)}#menu-close{display:block;margin-left:auto}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--surface);color:var(--ink);border:1px solid var(--line);font-size:14px;padding:12px 20px;max-width:90%;z-index:50;display:none}.toast.show{display:block}.noscript{padding:24px;text-align:center;color:var(--gold)}
.theater:fullscreen{max-width:none;background:var(--bg);height:100dvh;padding:20px;justify-content:center}.theater:fullscreen .stage{max-height:calc(100dvh - 120px);width:min(100%,calc((100dvh - 120px)*16/9));flex:none}.theater:fullscreen .transport{max-width:1400px;flex:none;margin:0 auto}.theater:fullscreen .stage .scene-index{font-size:max(.82cqw,10px)}
@media(max-width:700px){:root{--header:64px;--space:16px}.edition{display:none}.brand{gap:10px}.brand-mark{font-size:30px}.top-actions{gap:4px}.theater{padding:18px 0 20px;min-height:calc(100svh - var(--header));justify-content:center}.stage{max-height:none;border-left:0;border-right:0;flex:none;margin:0 auto}.welcome{top:14%}.welcome .eyebrow{font-size:1.55cqw;margin-bottom:1.8cqw}.welcome h1{font-size:7.8cqw}.opening-line{font-size:2cqw;margin-bottom:2.3cqw}.start-button{font-size:3cqw;padding:4px 15px;min-height:40px;gap:10px}.listen-note{display:none}.transport{padding:20px 16px 0;margin:0 auto}.transport-left{gap:10px}.track-info{font-size:12px}.transport-right .text-button{font-size:12px;padding:6px}.transport-right{gap:0}.subtitle span{font-size:2.9cqw}.subtitle{bottom:7%;height:5cqw}.scene-index{font-size:1.55cqw;bottom:3%}.about{padding:65px 24px}.about p{font-size:15px}.end-card .text-button{font-size:12px;min-height:36px}.end-card p{font-size:2.5cqw}.theater:fullscreen{padding:8px}.theater:fullscreen .transport{padding-top:10px}.theater:fullscreen .stage{max-height:calc(100dvh - 100px);width:min(100%,calc((100dvh - 100px)*16/9))}.theater:fullscreen .welcome{top:10%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.film-grain{display:none}}
/* Keep the same 16:9 composition at every viewport size. */
.stage{width:min(100%,calc((100svh - var(--header) - 155px)*16/9));max-height:none;flex:none}
@media(max-width:700px){.stage{width:100%}.start-button{min-height:44px}.subtitle span{font-size:3.05cqw}.clock-label{font-size:2cqw}}
@media(max-height:520px) and (orientation:landscape){.theater{padding:10px 16px}.stage{width:min(100%,calc((100svh - var(--header) - 135px)*16/9))}.welcome{top:12%}.listen-note{display:none}}
/* Each vow has its own entrance and dramatic pause, all driven by the recording. */
.word-part{display:inline-block}.motion-depth .word-mask,.motion-dissolve .word-mask{overflow:visible}.verdict-word{font-size:4.5cqw;top:39%!important;letter-spacing:.065em}.motion-last-vow .word-mask{overflow:visible}.motion-last-vow{top:22%;font-size:4.8cqw}.motion-last-vow .word-part:last-child{color:#f5dfae;text-shadow:0 0 35px #d8be8420}.motion-strike{font-size:5.7cqw}.motion-aperture{font-size:6.8cqw}
.ink-transition{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:none}.image-planes{position:absolute;inset:0;perspective:1400px;transform-style:preserve-3d;pointer-events:none}.image-plane{position:absolute;inset:0;transform-style:preserve-3d;backface-visibility:hidden}.image-plane img{transform:scale(1.035);transform-origin:65% 50%}
:root{--sans:'Noto Sans KR','Noto Serif KR',sans-serif}.scene-index{font-family:var(--serif)}