:root {
  /* Colors */
  --color-void-black: #000000;
  --color-pure-white: #ffffff;
  --color-charcoal: #202020;
  --color-graphite: #333333;
  --color-lamp-cream: #f5f5f0;
  --color-smoke: #999999;

  /* Typography — Font Families */
  --font-visueltpro: 'VisueltPro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-bradford: 'Bradford', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-label-sm: 11px;
  --leading-label-sm: 1.5;
  --tracking-label-sm: 0.55px;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-body-lg: 20px;
  --leading-body-lg: 1.5;
  --text-subheading: 30px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.75px;
  --text-heading: 54px;
  --leading-heading: 1.2;
  --text-heading-lg: 57px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -2.85px;
  --text-display: 128px;
  --leading-display: 1;
  --tracking-display: -3.2px;

  /* Typography — Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 96px;
  --card-padding: 0px;
  --element-gap: 16px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-cards: 10px;
  --radius-badges: 9999px;
  --radius-inputs: 0px;
  --radius-buttons: 9999px;
  --radius-playbutton: 50%;

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.35) 0px 10px 30px 0px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset;
  --shadow-lg: rgba(0, 0, 0, 0.15) 0px 4px 20px 0px;

  /* Surfaces */
  --surface-void: #000000;
  --surface-charcoal: #202020;
  --surface-graphite: #333333;
  --surface-lamp-cream: #f5f5f0;
}


:root{color-scheme:dark;--black:var(--color-void-black);--white:var(--color-pure-white);--charcoal:var(--color-charcoal);--graphite:var(--color-graphite);--cream:var(--color-lamp-cream);--smoke:var(--color-smoke);--font-body:Inter,"Noto Sans CJK KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;--tap-size:48px;--caption-space:64px;--motion-duration:.25s;--motion-ease:cubic-bezier(.625,.05,0,1);--header-space:96px;--paragraph-width:680px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--header-space)}body{margin:0;background:var(--black);color:var(--white);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body)}button{font:inherit;cursor:pointer;border:0;background:var(--charcoal);color:var(--white);border-radius:var(--radius-full);padding:var(--spacing-12) var(--spacing-20);min-height:var(--tap-size)}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--white);outline-offset:var(--spacing-4)}p,h1,h2,h3{margin:0}img{display:block;width:100%;height:auto}main{max-width:var(--page-max-width);margin:auto;padding:0 var(--spacing-40)}small,.eyebrow{font-size:var(--text-label-sm);line-height:var(--leading-label-sm);letter-spacing:var(--tracking-label-sm)}.skip{position:fixed;z-index:20;top:0;left:var(--spacing-20);padding:var(--spacing-16);background:var(--cream);color:var(--black);transform:translateY(-120%)}.skip:focus{transform:none}.masthead{position:sticky;top:0;z-index:10;background:var(--black);display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-20) 0;gap:var(--spacing-16)}.brand{font-size:var(--text-body-lg);white-space:nowrap}.brand small{margin-left:var(--spacing-12);color:var(--smoke)}.desktop-nav,.header-actions{display:flex;align-items:center;gap:var(--spacing-24)}.desktop-nav a{padding:var(--spacing-12) 0}.header-actions{gap:var(--spacing-8)}.menu-toggle{display:none;padding:var(--spacing-12)}.mobile-nav{display:none}.opening{display:flex;align-items:end;justify-content:space-between;padding:var(--spacing-40) 0}.eyebrow{margin-bottom:var(--spacing-16);color:var(--smoke)}h1{font-size:var(--text-heading);font-weight:var(--font-weight-light);line-height:var(--leading-heading)}.intro{display:flex;align-items:end;gap:var(--spacing-64)}.intro p{font-size:var(--text-body-lg);line-height:var(--leading-body-lg)}.intro small{color:var(--smoke);white-space:nowrap}.tabs{display:flex;align-items:center;gap:var(--spacing-8);margin-bottom:var(--spacing-16)}.tabs button{position:relative;background:transparent;color:var(--smoke)}.tabs button[aria-pressed=true]{color:var(--black)}.selection{position:absolute;inset:0;background:var(--cream);border-radius:var(--radius-full)}.tab-label{position:relative;z-index:1}.tabs .top-play{margin-left:auto;background:var(--cream);color:var(--black);font-weight:var(--font-weight-medium)}.screen{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--charcoal);aspect-ratio:16/9}.screen video{display:block;width:100%;height:100%;object-fit:contain;background:var(--black)}.screen.webtoon{background:var(--black)}.end-poster{position:absolute;inset:0;border-radius:0;padding:0;background:var(--black);width:100%;height:100%}.end-poster img{height:100%;object-fit:contain}.end-poster span{position:absolute;bottom:var(--spacing-32);left:50%;transform:translateX(-50%);background:var(--cream);color:var(--black);padding:var(--spacing-16) var(--spacing-24);border-radius:var(--radius-full);white-space:nowrap}.caption{display:flex;align-items:center;justify-content:center;position:relative;height:var(--caption-space);padding:var(--spacing-12) var(--spacing-96);text-align:center}.caption-line{white-space:nowrap}.caption button{position:absolute;right:0;background:transparent;color:var(--smoke);font-size:var(--text-label-sm);padding:var(--spacing-12)}.player-error{padding:var(--spacing-16) 0}.story-intro{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--spacing-40);margin:var(--spacing-96) 0 var(--spacing-64)}.story-intro .eyebrow{grid-column:1/-1}h2{font-size:var(--text-heading);font-weight:var(--font-weight-light);line-height:var(--leading-heading)}.story-intro>p:last-child{align-self:end;font-size:var(--text-body-lg);color:var(--smoke)}.scene{display:grid;grid-template-columns:1fr 2fr;gap:var(--spacing-40);margin-bottom:var(--spacing-96)}.scene-label{display:flex;gap:var(--spacing-24);align-items:baseline;padding-top:var(--spacing-24)}.scene-label small{color:var(--smoke)}h3{font-size:var(--text-body-lg);font-weight:var(--font-weight-regular);line-height:var(--leading-body-lg)}.scene-photo{min-width:0}.scene-photo img{border-radius:var(--radius-lg)}.scene-photo p{font-size:var(--text-body-lg);text-align:center;padding:var(--spacing-40) var(--spacing-16)}.about{padding:var(--spacing-64) 0 var(--spacing-96)}.about>p:not(.eyebrow){max-width:var(--paragraph-width);margin-top:var(--spacing-32);word-break:keep-all}.lyrics{margin-top:var(--spacing-40)}summary{cursor:pointer;min-height:var(--tap-size);padding:var(--spacing-12) 0}.lyrics>div{padding:var(--spacing-24) 0;columns:2;column-gap:var(--spacing-40)}.lyrics p{break-inside:avoid;margin-bottom:var(--spacing-8)}.related{padding-bottom:var(--spacing-96)}.related>a{display:flex;justify-content:space-between;gap:var(--spacing-24);padding:var(--spacing-24) 0;border-bottom:1px solid var(--graphite);font-size:var(--text-body-lg)}.related span{font-size:var(--text-body);color:var(--smoke)}footer{text-align:center;padding:var(--spacing-80) 0 var(--spacing-64);border-top:1px solid var(--graphite)}footer p{font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading)}footer a{display:inline-block;margin-top:var(--spacing-40);color:var(--smoke)}footer small{display:block;color:var(--smoke);margin-top:var(--spacing-24)}.notice:not(:empty){position:fixed;bottom:var(--spacing-24);left:50%;transform:translateX(-50%);background:var(--cream);color:var(--black);padding:var(--spacing-16) var(--spacing-24);border-radius:var(--radius-full);z-index:30;max-width:calc(100% - var(--spacing-40));text-align:center}
@media(max-width:700px){main{padding:0 var(--spacing-20)}.masthead{padding:var(--spacing-16) 0}.brand{font-size:var(--text-body)}.brand small,.desktop-nav{display:none}.header-actions>button:not(.menu-toggle){font-size:var(--text-label-sm);padding:var(--spacing-12) var(--spacing-16)}.menu-toggle{display:flex;align-items:center}.mobile-nav{display:flex;position:absolute;top:100%;left:calc(-1 * var(--spacing-20));right:calc(-1 * var(--spacing-20));background:var(--black);flex-direction:column;padding:var(--spacing-24) var(--spacing-40);gap:var(--spacing-16);border-bottom:1px solid var(--graphite)}.mobile-nav a{padding:var(--spacing-12) 0}.opening{display:block;padding:var(--spacing-32) 0}.intro{margin-top:var(--spacing-24);gap:var(--spacing-20);justify-content:space-between}.intro p{font-size:var(--text-body)}.tabs{gap:var(--spacing-4)}.tabs button{padding:var(--spacing-12)}.tabs .top-play{font-size:var(--text-label-sm);padding:var(--spacing-16) var(--spacing-12)}.screen{margin:0 calc(-1 * var(--spacing-20));border-radius:0;width:calc(100% + var(--spacing-40))}.screen.webtoon{aspect-ratio:2/3}.caption{padding:var(--spacing-12) var(--spacing-64) var(--spacing-12) 0;justify-content:start}.caption button{padding-right:0}.story-intro{display:block;margin:var(--spacing-64) 0 var(--spacing-40)}h2{font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading)}.story-intro>p:last-child{font-size:var(--text-body);margin-top:var(--spacing-24)}.scene{display:block;margin-bottom:var(--spacing-64)}.scene-label{padding:0 0 var(--spacing-20)}.scene-photo{margin:0 calc(-1 * var(--spacing-20))}.scene-photo img{border-radius:0}.scene-photo p{padding:var(--spacing-32) var(--spacing-20)}.lyrics>div{columns:1}.related>a{display:block}.related span{display:block;margin-top:var(--spacing-12)}footer{padding:var(--spacing-64) 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

h1,h2,h3{text-wrap:balance;word-break:keep-all}p{word-break:keep-all;text-wrap:pretty}code,.machine-string{overflow-wrap:anywhere}
@media(min-width:1024px){:root{--paragraph-width:680px}}
/* Native scrolling owns the pinned story; GSAP owns panels, Motion owns controls. */
:root{--story-stage-height:calc(100svh - var(--header-space));--story-control-height:64px;--story-rail-height:80px}
.scroll-story{position:relative}.scroll-stage{background:var(--black);outline:none}.story-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-16);min-height:var(--story-control-height)}.story-controls>p{color:var(--smoke)}.story-controls>div{display:flex;align-items:center;gap:var(--spacing-24)}.scene-count{font-variant-numeric:tabular-nums;white-space:nowrap}.story-controls button{font-size:var(--text-label-sm)}.scroll-panel{display:grid;grid-template-columns:1fr 2fr;gap:var(--spacing-40);align-items:center;margin-bottom:var(--spacing-96)}.scroll-copy small{color:var(--smoke)}.scroll-copy h3{font-size:var(--text-heading);font-weight:var(--font-weight-light);line-height:var(--leading-heading);margin:var(--spacing-24) 0}.scroll-copy p{font-size:var(--text-body-lg);white-space:pre-line}.scroll-panel>img{object-fit:contain;max-height:100%;min-height:0}.is-enhanced .scroll-stage{height:var(--story-stage-height);display:flex;flex-direction:column;overflow:hidden}.is-enhanced .scroll-frames{position:relative;flex:1;min-height:0;overflow:hidden}.is-enhanced .scroll-panel{position:absolute;inset:0;margin:0;height:100%;padding:var(--spacing-16) 0;will-change:transform,opacity;pointer-events:none}.is-enhanced .scroll-panel>img{height:100%;width:100%;object-fit:contain}.story-navigation{height:var(--story-rail-height);flex-shrink:0;display:flex;align-items:center;gap:var(--spacing-24)}.scene-stops{display:flex;gap:var(--spacing-4)}.scene-stops button{position:relative;background:transparent;color:var(--smoke);min-width:var(--tap-size);padding:var(--spacing-12)}.scene-stops button[aria-current]{color:var(--black)}.scene-stops button>span:last-child{position:relative}.scene-current{position:absolute;inset:0;background:var(--cream);border-radius:var(--radius-full)}.story-range{flex:1;min-width:0}.story-range input{width:100%;accent-color:var(--cream);cursor:ew-resize;min-height:var(--tap-size);margin:0}.story-navigation>a{font-size:var(--text-label-sm);white-space:nowrap;padding:var(--spacing-12) 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.scroll-stage:focus-visible{outline:2px solid var(--white);outline-offset:var(--spacing-4)}input:focus-visible{outline:2px solid var(--white);outline-offset:var(--spacing-4)}
@media(max-width:700px){:root{--header-space:80px;--story-control-height:48px;--story-rail-height:96px}.story-controls{font-size:var(--text-label-sm);gap:var(--spacing-8)}.story-controls>div{gap:var(--spacing-12)}.story-controls button{padding:var(--spacing-8) var(--spacing-12)}.scroll-panel{display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-24)}.is-enhanced .scroll-panel{gap:var(--spacing-16);padding:var(--spacing-8) 0}.scroll-copy small{display:none}.scroll-copy h3{font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading);margin:0 0 var(--spacing-8)}.scroll-copy p{font-size:var(--text-body)}.is-enhanced .scroll-panel>img{flex:1;min-height:0;height:0}.story-navigation{display:grid;grid-template-columns:1fr auto;gap:0 var(--spacing-16)}.scene-stops{grid-column:1/-1;justify-content:space-between}.scene-stops button{min-height:var(--tap-size);padding:var(--spacing-8)}.story-range input{min-height:var(--spacing-32)}}
@media(prefers-reduced-motion:reduce){.scroll-panel{will-change:auto}.scene-count{opacity:1!important}}