
:root {
  /* Colors */
  --color-hi-vis-yellow: #f0e226;
  --color-ink-black: #19181a;
  --color-pure-black: #000000;
  --color-bone: #f5f4f0;
  --color-charcoal: #272727;
  --color-sand: #d9d7ce;

  /* Typography — Font Families */
  --font-apercu-pro: 'Apercu Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-apercu-mono-pro: 'Apercu Mono Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.16;
  --text-body: 15px;
  --leading-body: 1.2;
  --text-heading: 37px;
  --leading-heading: 1.08;
  --text-display: 56px;
  --leading-display: 1.08;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 1440px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-full: 900px;

  /* Named Radii */
  --radius-cards: 0px;
  --radius-badges: 900px;
  --radius-images: 0px;
  --radius-buttons: 900px;

  /* Surfaces */
  --surface-ink-black-canvas: #19181a;
  --surface-bone-surface: #f5f4f0;
  --surface-hi-vis-accent: #f0e226;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;color-scheme:dark}body{margin:0;background:var(--color-ink-black);color:var(--color-bone);font-family:var(--font-apercu-pro);font-size:var(--text-body);font-weight:var(--font-weight-regular);line-height:var(--leading-body)}[hidden]{display:none!important}a{color:var(--color-hi-vis-yellow);text-decoration:none}a:hover{text-decoration:underline}button,select,summary{font-family:var(--font-apercu-mono-pro);font-size:var(--text-caption);font-weight:var(--font-weight-regular);line-height:var(--leading-caption)}button,select{border:1px solid var(--color-hi-vis-yellow);border-radius:var(--radius-buttons);padding:var(--spacing-4) var(--spacing-12);color:var(--color-hi-vis-yellow);background:transparent;min-height:44px;cursor:pointer}button:hover,button[aria-pressed=true]{color:var(--color-pure-black);background:var(--color-hi-vis-yellow)}button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--color-hi-vis-yellow);outline-offset:4px}.skip{position:absolute;top:-80px;padding:var(--spacing-16);z-index:20;background:var(--color-ink-black)}.skip:focus{top:0}.masthead{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-24);padding:var(--spacing-24);max-width:var(--page-max-width);margin:auto}.brand{font-family:var(--font-apercu-mono-pro);font-size:var(--text-caption);line-height:var(--leading-caption);border:1px solid var(--color-hi-vis-yellow);border-radius:var(--radius-full);padding:var(--spacing-8) var(--spacing-16)}.brand span{display:block;color:var(--color-sand);margin-top:var(--spacing-4)}.header-actions{display:flex;gap:var(--spacing-16);align-items:center}.edition,.eyebrow,.credits,.frame-label,.under-frame,.status,footer,.related{font-family:var(--font-apercu-mono-pro);font-size:var(--text-caption);line-height:var(--leading-caption);font-weight:var(--font-weight-regular)}#theme{display:none}.intro{max-width:var(--page-max-width);margin:auto;padding:var(--spacing-48) var(--spacing-24);display:grid;grid-template-columns:2fr 1fr;gap:var(--spacing-48);align-items:end}.eyebrow{color:var(--color-hi-vis-yellow);display:inline-block;border:1px solid var(--color-hi-vis-yellow);border-radius:var(--radius-badges);padding:var(--spacing-8) var(--spacing-16);margin:0 0 var(--spacing-24)}h1,h2{font-weight:var(--font-weight-regular);letter-spacing:normal;text-wrap:balance;word-break:keep-all}h1{font-size:var(--text-display);line-height:var(--leading-display);color:var(--color-hi-vis-yellow);margin:0 0 var(--spacing-24)}h1 span,h1 em{display:inline;font-style:normal}h1 em{margin-left:var(--spacing-12)}.subtitle{display:flex;align-items:center;gap:var(--spacing-24)}.subtitle p{margin:0}.intro-aside{border:1px solid var(--color-charcoal);padding:var(--card-padding)}.calendar-date{font-size:var(--text-display);line-height:var(--leading-display);color:var(--color-hi-vis-yellow)}.calendar-date span{font-size:var(--text-caption);font-family:var(--font-apercu-mono-pro);margin-left:var(--spacing-8)}.intro-aside p{margin:var(--spacing-16) 0}.credits{color:var(--color-sand)}.theater-section{max-width:var(--page-max-width);margin:auto;padding:0 var(--spacing-24)}.theater{position:relative;background:var(--color-pure-black);border:1px solid var(--color-charcoal)}.frame-label{display:flex;justify-content:space-between;color:var(--color-hi-vis-yellow);padding:var(--spacing-12) var(--spacing-16)}.screen{position:relative;aspect-ratio:16/9;overflow:hidden;isolation:isolate;background:var(--color-pure-black);perspective:1200px}.image-layer{position:absolute;inset:0;overflow:hidden;will-change:transform,opacity,clip-path}.image-layer img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center}.image-layer:nth-child(2){opacity:0}.shade{display:none}.invitation,.ending{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0008;text-align:center}.play-ring{display:none}#start{background:var(--color-hi-vis-yellow);color:var(--color-pure-black);border:0;padding:var(--spacing-16) var(--spacing-24)}#start span{display:block;margin-top:var(--spacing-8)}.caption{position:absolute;bottom:6%;left:4%;right:4%;width:fit-content;margin:auto;padding:var(--spacing-8) var(--spacing-12);max-width:92%;background:var(--color-pure-black);color:var(--color-bone);font-size:var(--text-body);line-height:var(--leading-body);font-weight:var(--font-weight-regular)}.caption:empty{display:none}.type-event{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-line;pointer-events:none;font-size:var(--text-display);line-height:var(--leading-display);font-weight:var(--font-weight-regular);color:var(--color-hi-vis-yellow);background:#0005}.type-event:empty{display:none}.location{position:absolute;top:var(--spacing-16);left:var(--spacing-16);background:var(--color-ink-black);color:var(--color-hi-vis-yellow);border:1px solid var(--color-hi-vis-yellow);border-radius:var(--radius-badges);padding:var(--spacing-8) var(--spacing-16);font-family:var(--font-apercu-mono-pro);font-size:var(--text-caption);line-height:var(--leading-caption)}.location strong{display:block;font-weight:var(--font-weight-regular);margin-bottom:var(--spacing-4)}.ending strong{font-size:var(--text-heading);line-height:var(--leading-heading);font-weight:var(--font-weight-regular)}.ending button{margin-top:var(--spacing-24)}.dock{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-12);padding:var(--spacing-16);border-top:1px solid var(--color-charcoal)}audio{width:360px;max-width:100%;height:44px}.seek-tools,.dock-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-8)}.dock-tools{margin-left:auto}.chapter-label{font-family:var(--font-apercu-mono-pro);font-size:var(--text-caption);line-height:var(--leading-caption);color:var(--color-sand)}select{background:var(--color-ink-black);max-width:200px}.status{color:var(--color-sand);padding:0 var(--spacing-16);margin:var(--spacing-12) 0 var(--spacing-16)}#retry{margin:var(--spacing-16)}.under-frame{display:flex;justify-content:space-between;gap:var(--spacing-24);padding:var(--spacing-16) 0;color:var(--color-sand)}.under-frame p{margin:0}.afterword{max-width:var(--page-max-width);margin:auto;padding:var(--section-gap) var(--spacing-24);display:grid;grid-template-columns:1fr 1fr;column-gap:var(--spacing-48)}.afterword>.eyebrow{grid-column:2;width:fit-content}.afterword h2{font-size:var(--text-heading);line-height:var(--leading-heading);grid-column:2;margin:0 0 var(--spacing-24)}.afterword h2 span{display:block}.afterword>p{grid-column:2;margin:0 0 var(--spacing-32)}.notes,.related{grid-column:1/-1}.notes{margin-top:var(--spacing-48)}details{border-bottom:1px solid var(--color-charcoal);padding:var(--spacing-16) 0}summary{color:var(--color-hi-vis-yellow);cursor:pointer;padding:var(--spacing-12) 0;min-height:44px}details p{font-size:var(--text-body);line-height:var(--leading-body);margin:var(--spacing-16) 0}.lyrics{columns:2;column-gap:var(--spacing-48);padding:var(--spacing-24) 0}.lyrics p{break-inside:avoid;margin:0 0 var(--spacing-12)}.related{display:flex;justify-content:space-between;gap:var(--spacing-24);margin-top:var(--spacing-48)}footer{padding:var(--spacing-24);display:flex;justify-content:space-between;gap:var(--spacing-24);border-top:1px solid var(--color-charcoal);color:var(--color-sand)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.relationship{position:absolute;inset:0;pointer-events:none}.message-chip,.holiday-card,.next-date{display:none!important}.corrected-word{position:absolute;top:12%;right:6%;background:var(--color-pure-black);padding:var(--spacing-8) var(--spacing-16);font-size:var(--text-heading);line-height:var(--leading-heading);color:var(--color-hi-vis-yellow)}.new-word{display:none}.is-corrected .original-word{text-decoration:line-through;opacity:.5}.is-corrected .new-word{display:block}.split-line{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--color-hi-vis-yellow)}.phone-registration{position:absolute;inset:0;pointer-events:none;mask-image:url('assets/phone-glass.svg');mask-repeat:no-repeat}.theater:fullscreen{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;border:0}.theater:fullscreen .screen{aspect-ratio:auto;flex:1;min-height:0}.theater:fullscreen .image-layer img{object-fit:contain}.theater:fullscreen .dock{flex:none}.theater:fullscreen .frame-label,.theater:fullscreen .status{flex:none}.noscript{padding:var(--spacing-24)}
@media(max-width:760px){.masthead{padding:var(--spacing-16);gap:var(--spacing-8)}.edition{display:none}.brand span{display:none}.header-actions{gap:var(--spacing-8)}.intro{grid-template-columns:1fr;padding:var(--spacing-32) var(--spacing-16);gap:var(--spacing-24)}h1{font-size:var(--text-heading);line-height:var(--leading-heading)}.intro-aside{display:flex;gap:var(--spacing-16);align-items:center;padding:var(--spacing-16)}.calendar-date{font-size:var(--text-heading);line-height:var(--leading-heading)}.intro-aside p{margin:0}.credits{display:none}.theater-section{padding:0}.frame-label{padding:var(--spacing-12) var(--spacing-8)}.dock{padding:var(--spacing-12)}audio{width:100%}.dock-tools{margin-left:0;width:100%;justify-content:space-between}.seek-tools{width:100%}.seek-tools select{max-width:45%}.under-frame{display:block;padding:var(--spacing-16)}.under-frame>span{display:block;margin-top:var(--spacing-8)}.afterword{display:block;padding:var(--section-gap) var(--spacing-16)}.afterword h2{font-size:var(--text-heading);line-height:var(--leading-heading)}.lyrics{columns:1}.related{display:block}.related a{display:block;margin-top:var(--spacing-16)}footer{display:block;padding:var(--spacing-16)}footer span{display:block;margin-bottom:var(--spacing-8)}.location{top:var(--spacing-8);left:var(--spacing-8);padding:var(--spacing-4) var(--spacing-8)}.caption{bottom:4%;padding:var(--spacing-4) var(--spacing-8)}.type-event{font-size:var(--text-heading);line-height:var(--leading-heading)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
.phone-surface{position:absolute;top:0;left:0;width:300px;height:600px;transform-origin:0 0;background:#f5f4f0;color:#000000;overflow:hidden;border-radius:36px;clip-path:inset(0 round 36px);font-family:Arial,"Malgun Gothic",sans-serif;line-height:1.45;pointer-events:none}.phone-status{padding:30px 22px 15px;font-size:17px;font-weight:700;display:flex;justify-content:space-between}.phone-contact{padding:16px 22px;font-size:26px;font-weight:800;background:#d9d7ce;border-bottom:1px solid #272727}.phone-date{text-align:center;font-size:16px;color:#272727;padding:22px 0}.phone-bubble{background:#272727;color:#fff;border-radius:16px 16px 3px 16px;margin:0 16px 0 36px;padding:16px;font-size:25px;word-break:keep-all;text-wrap:pretty}.phone-bubble.second{margin-top:24px}.phone-unread{display:block;text-align:right;margin:7px 20px;font-size:17px;color:#272727}.phone-bottom{position:absolute;bottom:20px;left:20px;right:20px;border:1px solid #272727;border-radius:25px;padding:10px;font-size:19px;color:#272727;text-align:center}.burst-plane{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}.burst-piece{position:absolute;inset:0;background-size:100% 100%;transform-origin:center;will-change:transform,opacity}.pressure-wall{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;overflow:hidden;gap:1%}.pressure-wall span{font-weight:900;font-size:35vw;line-height:1;color:#f0e226;text-shadow:0 20px 90px #0009}.screen .phone-surface{z-index:1}.type-event,.caption,.location{z-index:4}.invitation,.ending{z-index:6}.relationship{z-index:3}.pressure-wall .wall-word{white-space:nowrap}.burst-plane .burst-piece{background-repeat:no-repeat}.theater[data-effect=portal] .image-layer{transform-origin:center}.theater[data-effect=paperfall] .image-layer{backface-visibility:hidden}
.phone-registration{position:absolute;inset:0;pointer-events:none;mask-image:url('assets/phone-glass.svg');mask-repeat:no-repeat}.phone-status,.phone-contact,.pressure-wall span{font-weight:400}
.screen{container-type:inline-size}.pressure-wall span{font-size:24cqw}

.corrected-word{top:auto;right:auto;left:50%;bottom:24%;display:flex;transform:translateX(-50%);gap:0}.corrected-word .syllable{position:relative;display:inline-block;width:1em;height:1.1em;overflow:hidden}.corrected-word .original-word,.corrected-word .new-word{position:absolute;inset:0;display:block!important;text-decoration:none!important;opacity:1!important}.corrected-word .original-word{clip-path:inset(0 0 calc(var(--syllable-progress,0)*100%) 0);transform:translateY(calc(var(--syllable-progress,0)*-0.2em))}.corrected-word .new-word{clip-path:inset(calc((1 - var(--syllable-progress,0))*100%) 0 0 0);transform:translateY(calc((1 - var(--syllable-progress,0))*0.2em))}@media(hover:hover){a:hover{text-decoration:underline}}@media(pointer:coarse){button,select{min-height:44px}}

/* User-directed Korean reading and square UI override; Cassette source retained. */
:root{--reading-leading:1.65;--reading-paragraph-gap:var(--spacing-24);--reading-heading-leading:1.25;--ui-radius:0px}
button,select,.brand,.eyebrow,.location{border-radius:var(--ui-radius)}
.afterword h2{line-height:var(--reading-heading-leading)}
.afterword>p{line-height:var(--reading-leading);margin:0 0 var(--reading-paragraph-gap);max-width:36em;word-break:keep-all;text-wrap:pretty}
details p,.lyrics p,.intro-aside p,.subtitle p,.under-frame p{line-height:var(--reading-leading)}
.lyrics p{margin-bottom:var(--reading-paragraph-gap)}
.sound-controls{display:grid;grid-template-columns:auto minmax(80px,1fr) auto auto;align-items:center;gap:var(--spacing-12);width:min(540px,100%);font-family:var(--font-apercu-mono-pro);font-size:var(--text-caption);line-height:1.3}
#play-time{white-space:nowrap}#track-seek{width:100%;height:44px;margin:0;accent-color:var(--color-hi-vis-yellow);background:transparent;appearance:none;cursor:pointer}
#track-seek::-webkit-slider-runnable-track{height:2px;background:var(--color-hi-vis-yellow)}
#track-seek::-webkit-slider-thumb{appearance:none;width:12px;height:16px;margin-top:-7px;background:var(--color-hi-vis-yellow);border:0;border-radius:0}
#track-seek::-moz-range-track{height:2px;background:var(--color-hi-vis-yellow)}
#track-seek::-moz-range-thumb{width:12px;height:16px;background:var(--color-hi-vis-yellow);border:0;border-radius:0}
#track-seek:focus-visible{outline:2px solid var(--color-hi-vis-yellow);outline-offset:4px}
@media(max-width:760px){.sound-controls{width:100%;grid-template-columns:auto minmax(60px,1fr) auto;gap:var(--spacing-8)}#mute-toggle{grid-column:3}#play-time{grid-column:2;grid-row:2}.afterword>p{max-width:100%}}

.screen{container-type:inline-size}
.band-title{position:absolute;inset:0;z-index:3;pointer-events:none;display:grid;place-items:center;color:var(--color-hi-vis-yellow);background:rgb(0 0 0 / calc(.78*(1 - var(--title-leave,0))));overflow:hidden}
.band-wordmark{display:flex;flex-direction:column;align-items:center;position:relative;transform:translateY(calc((1 - var(--title-enter,0))*18px));clip-path:inset(calc((1 - var(--title-enter,0))*50%) 0);}
.band-name{font-size:clamp(48px,12cqw,180px);font-weight:900;line-height:1.05;letter-spacing:-.045em}
.band-kind{font-size:clamp(14px,2.5cqw,38px);line-height:1.4;letter-spacing:.5em;margin-left:.5em;margin-top:1cqw}
.band-track{font-size:clamp(10px,1.2cqw,18px);line-height:1.65;margin-top:2cqw;color:var(--color-bone)}
.band-strings{position:absolute;inset:15% 0;display:flex;flex-direction:column;justify-content:space-between;transform:scaleX(calc(.04 + var(--title-enter,0)*.96))}
.band-strings i{display:block;height:1px;background:var(--color-hi-vis-yellow);opacity:calc((1 - var(--title-enter,0))*.9 + .14);transform:translateY(calc(var(--title-leave,0)*-20cqw))}
.band-strings i:nth-child(even){transform:translateY(calc(var(--title-leave,0)*20cqw))}
.band-title.is-outro{background:rgb(0 0 0 / .65)}
.band-title.is-outro .band-name{font-size:clamp(48px,10cqw,150px)}
.ending{z-index:4;background:transparent;justify-content:flex-end;padding-bottom:5%}.ending>.eyebrow,.ending>strong{display:none}.ending button{background:var(--color-ink-black)}
@media(max-width:760px){.band-title.is-outro .band-track{display:none}.band-title.is-outro .band-wordmark{margin-bottom:var(--spacing-24)}.ending{padding-bottom:var(--spacing-8)}.seek-tools{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto}.seek-tools select{max-width:100%;width:100%}}

/* User-directed palette: warm paper typography, restrained pepper red, brown film title surface. */
:root{--color-hi-vis-yellow:#eee5d5;--band-ivory:#eee5d5;--band-pepper:#d98570;--band-brown:#281b17;--playhead-yellow:#d6bc68;--color-bone:#eee5d5;--color-sand:#c1b5a7}
h1{color:var(--band-ivory)}h1 em{color:var(--band-pepper)}
.eyebrow,.frame-label,.location{color:var(--band-pepper);border-color:var(--band-pepper)}
.brand,button,select{border-color:#85766b;color:var(--band-ivory)}
button:hover,button[aria-pressed=true],#start{background:var(--band-ivory);color:var(--band-brown)}
.band-title{color:var(--band-ivory);background:rgb(40 27 23 / calc(.8*(1 - var(--title-leave,0))))}
.band-title.is-outro{background:rgb(40 27 23 / .72)}
.band-kind{color:var(--band-pepper)}.band-strings i{background:var(--band-pepper)}
.corrected-word{color:var(--band-ivory);border-left:3px solid var(--band-pepper)}
#track-seek{accent-color:var(--playhead-yellow)}#track-seek::-webkit-slider-runnable-track,#track-seek::-webkit-slider-thumb{background:var(--playhead-yellow)}#track-seek::-moz-range-track,#track-seek::-moz-range-thumb{background:var(--playhead-yellow)}
