:root{
  color-scheme:dark;
  --bg:#050912;--ink:#f0eee7;--muted:#a9afb9;--muted2:#737f8d;--edge:rgba(228,235,236,.16);
  --gold:#e8c8a8;--aqua:#8dd9cd;--glass:rgba(8,16,27,.51);
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua","Noto Serif KR","AppleMyungjo","Batang",serif;
  --sans:"Pretendard","SUIT","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;overflow:hidden;background:var(--bg)}
body{margin:0;height:100%;min-height:100dvh;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button,input{font:inherit}
button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:2px solid var(--aqua);outline-offset:4px}
button:disabled{cursor:not-allowed;opacity:.32}
::selection{background:rgba(155,230,223,.28);color:#fff}
#world,.vignette,.film-grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#world{display:block;background:#040810;z-index:0}
.vignette{z-index:1;background:linear-gradient(90deg,rgba(3,6,13,.84) 0%,rgba(3,6,13,.5) 25%,transparent 57%),linear-gradient(0deg,rgba(2,5,11,.7) 0%,transparent 26%,transparent 80%,rgba(2,5,11,.35) 100%)}
.film-grain{z-index:2;opacity:.24;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}
.screen-frame{position:fixed;inset:19px;z-index:4;pointer-events:none;border:1px solid rgba(214,225,227,.115)}
.screen-frame>span{position:absolute;width:16px;height:16px;border-color:rgba(214,224,225,.38);border-style:solid}
.screen-frame>span:nth-child(1){top:-1px;left:-1px;border-width:1px 0 0 1px}
.screen-frame>span:nth-child(2){top:-1px;right:-1px;border-width:1px 1px 0 0}
.screen-frame>span:nth-child(3){bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.screen-frame>span:nth-child(4){bottom:-1px;left:-1px;border-width:0 0 1px 1px}
.app{position:relative;z-index:3;min-height:100%;height:100dvh;overflow:hidden}
.site-header{position:absolute;z-index:12;top:0;left:0;right:0;height:128px;display:flex;align-items:flex-start;padding:40px clamp(48px,5.35vw,104px);justify-content:space-between;gap:24px}
.brand{background:none;border:0;display:flex;align-items:center;gap:15px;text-align:left;padding:0;min-width:225px}
.brand-symbol{font-family:var(--serif);color:var(--gold);font-size:35px;font-weight:normal;line-height:1;animation:slow-rotate 64s linear infinite}
.brand-text{display:flex;flex-direction:column;gap:6px}
.brand-text strong{font-weight:500;letter-spacing:.23em;font-size:16px}
.brand-text small{font-size:8px;letter-spacing:.23em;color:#abb0b5;font-weight:400;white-space:nowrap}
.brand-text i{color:var(--gold);font-style:normal}
.header-center{position:absolute;top:44px;left:50%;transform:translateX(-50%);text-align:center;font-size:9px;letter-spacing:.28em;line-height:1.85;color:#a6a8a9;opacity:.79;white-space:nowrap}
.header-actions{display:flex;align-items:center;gap:12px}
.local-clock{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.18em;color:#b6bbb7;margin-right:15px;min-width:55px}
.icon-button{width:37px;height:37px;display:grid;place-items:center;border:1px solid var(--edge);border-radius:50%;background:rgba(255,255,255,.015);transition:border-color .3s,background .3s;backdrop-filter:blur(10px)}
.icon-button:hover,.icon-button[aria-pressed="true"]{border-color:rgba(232,200,168,.59);background:rgba(232,200,168,.08)}
.icon-button svg{width:16px;height:16px}
.sound-wave{opacity:0;transition:opacity .25s}.sound-off{opacity:.85;transition:opacity .25s}.icon-button[aria-pressed="true"] .sound-wave{opacity:1}.icon-button[aria-pressed="true"] .sound-off{opacity:0}
.menu-toggle{display:none;width:37px;height:37px;border:1px solid var(--edge);border-radius:50%;background:rgba(255,255,255,.03);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-toggle span{width:14px;height:1px;background:var(--ink);transition:transform .3s}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.scene-rail{position:absolute;z-index:7;top:50%;left:clamp(48px,5.35vw,104px);transform:translateY(-47%);width:118px}
.rail-caption{display:block;color:#969da6;font-size:8px;letter-spacing:.29em;white-space:nowrap;margin-bottom:26px}
.rail-buttons{display:flex;flex-direction:column;gap:1px;position:relative}
.rail-stem{height:278px;width:1px;background:linear-gradient(180deg,rgba(222,224,213,.08),rgba(222,224,213,.21),rgba(222,224,213,.08));position:absolute;top:55px;left:30px}
.rail-button{display:flex;align-items:center;gap:16px;height:39px;padding:0;background:transparent;border:0;color:#90969f;text-align:left;transition:color .25s}
.rail-button:hover{color:#ede6d9}
.rail-number{font-size:9px;letter-spacing:.1em;font-variant-numeric:tabular-nums;width:17px}
.rail-dot{position:relative;z-index:1;height:5px;width:5px;border-radius:100%;background:#78808b;box-shadow:0 0 0 5px #050912;transition:background .25s,box-shadow .25s,transform .25s}
.rail-name{font-size:11px;letter-spacing:.11em;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.rail-button:hover .rail-name,.rail-button.active .rail-name{opacity:1;transform:none}
.rail-button.active{color:var(--gold)}
.rail-button.active .rail-dot{background:var(--gold);transform:scale(1.3);box-shadow:0 0 0 5px #060b14,0 0 15px rgba(245,201,150,.7)}
.stage{position:absolute;inset:0;z-index:5;pointer-events:none;outline:none}
.stage-copy{position:absolute;left:clamp(175px,15.3vw,295px);top:clamp(205px,28.5vh,342px);max-width:min(530px,42vw);pointer-events:auto;transition:opacity .45s ease,transform .45s ease}
.stage-copy.is-changing{opacity:0;transform:translateY(14px)}
.chapter-line{display:flex;align-items:center;gap:17px;margin-bottom:31px;color:var(--gold);font-size:10px;letter-spacing:.21em;white-space:nowrap}
.chapter-index{font-variant-numeric:tabular-nums}.chapter-en{color:#9ba3ad;letter-spacing:.22em;font-size:9px}
.separator-line{height:1px;width:39px;background:linear-gradient(90deg,rgba(232,200,168,.6),rgba(232,200,168,.07))}
.chapter-title{font-family:var(--serif);font-size:clamp(34px,3.42vw,67px);letter-spacing:-.078em;font-weight:400;line-height:1.46;margin:0 0 22px;color:#f7f3eb;text-wrap:balance;text-shadow:0 5px 28px rgba(0,0,0,.37);word-break:keep-all}
.chapter-title em{font-style:normal;color:var(--gold)}
.chapter-description{margin:0;max-width:440px;color:#c3c9cd;font-size:clamp(12px,.92vw,15px);line-height:2.15;letter-spacing:-.015em;font-weight:300;word-break:keep-all}
.poem{margin-top:30px;display:flex;gap:11px;align-items:center;color:#abb2ac;font-family:var(--serif);font-size:clamp(11px,.82vw,13px);line-height:1.8;letter-spacing:.014em;max-width:440px;min-height:24px;transition:opacity .4s}
.poem-star{font-size:11px;color:var(--aqua)}
.interaction-area{position:absolute;bottom:clamp(99px,15.6vh,164px);left:clamp(175px,15.3vw,295px);width:min(525px,45vw);pointer-events:auto;transition:opacity .45s,transform .45s}
.interaction-area.is-changing{opacity:0;transform:translateY(10px)}
.panel-label{display:flex;align-items:center;gap:13px;margin-bottom:16px;font-size:9px;letter-spacing:.24em;color:#aab5bf}
.tiny-orbit{width:17px;height:17px;border:1px solid rgba(148,223,211,.5);border-radius:50%;position:relative;transform:rotate(-28deg)}
.tiny-orbit:after{content:"";height:5px;width:5px;border-radius:50%;background:var(--aqua);position:absolute;left:-3px;top:5px;box-shadow:0 0 9px rgba(135,213,206,.6)}
.scene-controls{display:flex;flex-wrap:wrap;align-items:center;gap:11px;min-height:43px}
.action{min-height:45px;border:1px solid rgba(214,232,223,.3);background:rgba(229,236,219,.045);color:#eae9e3;padding:0 22px;font-size:12px;letter-spacing:.04em;display:inline-flex;align-items:center;justify-content:center;gap:29px;transition:transform .24s,background .24s,border-color .24s,box-shadow .24s;backdrop-filter:blur(15px);border-radius:2px}
.action:hover{background:rgba(226,222,205,.11);border-color:rgba(245,222,186,.67);transform:translateY(-2px)}
.action:active{transform:translateY(0)}
.action .action-arrow{font-size:16px;color:var(--gold);line-height:1}
.action.emphasis{background:rgba(232,200,168,.16);border-color:rgba(232,200,168,.59);color:#fff3e6}
.action.subtle{border-color:rgba(195,207,208,.16);background:transparent;color:#adb8ba;padding:0 14px;gap:10px}
.action.subtle:hover{color:var(--ink)}
.interaction-hint{color:#8e9ba4;margin:15px 0 0;font-size:10px;line-height:1.7;letter-spacing:.025em;max-width:480px}
.range-wrap{display:flex;align-items:center;gap:14px;min-width:310px;width:min(100%,450px)}
.range-title{font-size:11px;color:#c1c9c7;white-space:nowrap}.range-value{color:var(--gold);font-size:13px;font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.range-wrap input[type="range"]{width:100%;flex:1;min-width:65px;height:24px;appearance:none;background:transparent;cursor:pointer;accent-color:var(--gold)}
.range-wrap input[type="range"]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,rgba(232,200,168,.78),rgba(157,180,190,.33))}
.range-wrap input[type="range"]::-moz-range-track{height:2px;background:rgba(232,200,168,.65)}
.range-wrap input[type="range"]::-webkit-slider-thumb{appearance:none;height:14px;width:14px;border-radius:50%;background:var(--gold);border:3px solid #293139;margin-top:-6px;box-shadow:0 0 15px rgba(232,200,168,.35)}
.range-wrap input[type="range"]::-moz-range-thumb{height:11px;width:11px;border-radius:50%;background:var(--gold);border:2px solid #293139}
.release-form{display:flex;align-items:center;gap:9px;width:100%;max-width:515px}
.release-form input{height:46px;min-width:0;flex:1;border:1px solid rgba(216,222,222,.27);background:rgba(8,14,25,.57);padding:0 15px;color:#f3eee6;border-radius:2px;font-size:12px;outline:none}
.release-form input:focus{border-color:var(--gold)}
.release-form input::placeholder{color:#85919d}
.release-form .action{padding:0 15px;gap:13px;flex-shrink:0}
.stage-sideinfo{position:absolute;right:clamp(42px,6.4vw,116px);top:50%;display:flex;align-items:center;gap:12px;writing-mode:vertical-rl;color:#aeb3bb;opacity:.63;font-size:9px;letter-spacing:.19em}
.stage-sideinfo #sceneSymbol{color:var(--gold);font-family:var(--serif);font-size:18px;margin-bottom:3px}
.site-footer{position:absolute;z-index:9;bottom:47px;left:clamp(48px,5.35vw,104px);right:clamp(48px,5.35vw,104px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.text-action{padding:8px 0;border:0;background:none;color:#b9baba;letter-spacing:.08em;font-size:11px;white-space:nowrap}
.text-action:hover{color:var(--gold)}
.text-action span{margin-left:9px;color:var(--gold)}
.footer-sentence{font-family:var(--serif);font-size:11px;color:#89939b;letter-spacing:.05em}
.pagination{display:flex;align-items:center;gap:15px}
.pagination #pageNum{font-variant-numeric:tabular-nums;letter-spacing:.14em;font-size:11px;min-width:57px;text-align:center}.pagination #pageNum i{font-style:normal;color:#636c75;margin:0 4px}
.nav-arrow{width:38px;height:38px;border-radius:50%;border:1px solid rgba(226,230,219,.26);background:rgba(3,7,14,.18);display:grid;place-items:center;font-size:17px;transition:background .2s,border-color .2s,transform .2s}
.nav-arrow:not(:disabled):hover{border-color:var(--gold);background:rgba(232,200,168,.14);transform:scale(1.06)}
.nav-arrow.primary{border-color:rgba(232,200,168,.48)}
.mobile-menu{position:fixed;inset:0;z-index:11;background:rgba(4,9,17,.97);backdrop-filter:blur(28px);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s,transform .3s,visibility .3s;overflow:auto}
.mobile-menu.open{visibility:visible;opacity:1;transform:none}
.mobile-menu-inner{padding:140px clamp(30px,11vw,100px) 70px;max-width:780px;margin:auto}
.mobile-menu-inner>p{color:var(--gold);font-size:10px;letter-spacing:.18em;line-height:2.5}.mobile-menu-inner>p span{display:block;letter-spacing:0;color:#c4c9c8;font-size:16px}
#mobileScenes{display:grid;grid-template-columns:1fr;gap:0;margin-top:33px}
.mobile-scene{background:transparent;border:0;border-bottom:1px solid var(--edge);display:flex;align-items:center;gap:23px;padding:19px 0;text-align:left;font-family:var(--serif);font-size:24px;transition:color .2s}
.mobile-scene .m-number{color:var(--gold);font-family:var(--sans);font-size:10px;letter-spacing:.12em}
.mobile-scene .m-en{margin-left:auto;font-family:var(--sans);font-size:9px;letter-spacing:.12em;color:#858e9a}
.mobile-scene.active,.mobile-scene:hover{color:var(--gold)}
.mobile-menu-end{display:block;color:#929da5;font-family:var(--serif);font-size:12px;margin-top:35px}
.dialog-overlay{position:fixed;inset:0;z-index:100;background:rgba(1,5,12,.77);backdrop-filter:blur(22px);display:grid;place-items:center;padding:20px;overflow:auto}
.dialog-overlay[hidden]{display:none}
.about-dialog{position:relative;width:min(100%,570px);max-height:min(90dvh,750px);overflow:auto;padding:clamp(32px,5vw,62px);background:linear-gradient(140deg,rgba(19,30,44,.97),rgba(7,13,25,.97));border:1px solid rgba(232,200,168,.33);box-shadow:0 50px 180px rgba(0,0,0,.58)}
.dialog-close{position:absolute;top:17px;right:21px;border:0;background:none;color:#d4d6d2;font-size:32px;font-weight:200}
.overline{color:var(--gold);font-size:9px;letter-spacing:.29em}.about-mark{font-family:var(--serif);display:block;color:rgba(232,200,168,.5);font-size:78px;line-height:1.5}
.about-dialog h2{font-family:var(--serif);font-size:clamp(24px,3vw,34px);font-weight:400;letter-spacing:-.06em;margin:4px 0 27px}
.about-dialog p{font-size:13px;line-height:2.2;color:#c5cbd0;word-break:keep-all}.about-dialog p.about-privacy{font-size:11px;color:#a8b5b5;border-left:2px solid rgba(232,200,168,.35);padding-left:16px;margin:24px 0}
.keyboard-help{display:flex;flex-wrap:wrap;gap:13px;font-size:10px;color:#b4bdc4;margin:26px 0}.keyboard-help kbd{display:inline-block;margin:0 2px;color:var(--ink);padding:4px 7px;border:1px solid rgba(232,235,240,.21);border-radius:3px;font:11px var(--sans)}
.outline-action{background:transparent;border:0;border-bottom:1px solid rgba(232,200,168,.52);padding:12px 0;color:var(--gold);font-size:12px;letter-spacing:.04em}.outline-action span{margin-left:45px}
.toast{position:fixed;z-index:110;left:50%;bottom:105px;transform:translate(-50%,12px);opacity:0;pointer-events:none;padding:12px 20px;background:rgba(20,33,44,.93);border:1px solid rgba(232,200,168,.36);color:#f5e7d7;white-space:nowrap;font-size:12px;max-width:calc(100vw - 36px);text-align:center;transition:opacity .3s,transform .3s}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.no-script{position:fixed;z-index:200;inset:0;display:grid;place-items:center;background:#090d16;color:#fff;font-family:var(--sans);padding:40px;text-align:center}
@keyframes slow-rotate{to{transform:rotate(360deg)}}
@media (min-width:1700px){.stage-copy{top:29.5vh}.interaction-area{bottom:16vh}}
@media (max-height:740px) and (min-width:801px){.site-header{height:90px;padding-top:28px}.header-center{top:30px}.stage-copy{top:20%;}.chapter-line{margin-bottom:15px}.chapter-title{font-size:clamp(32px,3vw,50px);line-height:1.33;margin-bottom:14px}.chapter-description{line-height:1.8}.poem{margin-top:16px}.interaction-area{bottom:92px}.site-footer{bottom:33px}.scene-rail{transform:translateY(-41%)}}
@media (max-width:1100px) and (min-width:801px){.header-center{display:none}.stage-copy{left:175px;max-width:390px}.interaction-area{left:175px;width:440px}.chapter-title{font-size:42px}.stage-sideinfo{right:45px}.scene-rail{left:52px}.site-header{padding-left:52px;padding-right:52px}.site-footer{left:52px;right:52px}}
@media (max-width:800px){
  .screen-frame{inset:11px}.screen-frame>span{width:11px;height:11px}
  .site-header{height:88px;padding:29px 31px;align-items:flex-start}.brand{gap:10px;min-width:0}.brand-symbol{font-size:27px}.brand-text strong{font-size:15px}.brand-text small{font-size:7px;letter-spacing:.14em}.header-center,.local-clock,.desktop-only{display:none}.header-actions{gap:8px}.icon-button,.menu-toggle{width:34px;height:34px}.menu-toggle{display:flex}
  .scene-rail{display:none}
  .vignette{background:linear-gradient(180deg,rgba(3,6,13,.25) 0%,rgba(3,6,13,.32) 30%,rgba(3,6,13,.73) 60%,rgba(3,6,13,.85) 100%),linear-gradient(90deg,rgba(3,6,13,.20),transparent 60%)}
  .stage-copy{left:30px;right:30px;top:clamp(115px,17.5vh,180px);max-width:600px}
  .chapter-line{margin-bottom:18px;gap:11px;font-size:9px}.separator-line{width:24px}.chapter-en{font-size:8px;letter-spacing:.15em}
  .chapter-title{font-size:clamp(32px,6.8vw,53px);line-height:1.44;margin-bottom:13px;max-width:650px}
  .chapter-description{font-size:clamp(11px,2.8vw,13px);line-height:1.8;max-width:390px}
  .poem{margin-top:15px;font-size:11px;line-height:1.6;max-width:450px}
  .interaction-area{left:30px;right:30px;bottom:124px;width:auto;max-width:650px}
  .panel-label{margin-bottom:13px}.interaction-hint{margin-top:10px;line-height:1.6}
  .stage-sideinfo{display:none}
  .site-footer{left:30px;right:30px;bottom:31px}.footer-sentence{display:none}
  .pagination{gap:10px}.nav-arrow{width:36px;height:36px}
  .mobile-menu-inner{padding-top:116px}
}
@media (max-width:510px){
  .site-header{padding:27px 26px}.brand-text small{letter-spacing:.08em;font-size:6px}.brand-text strong{font-size:14px}
  .stage-copy{left:27px;right:22px;top:clamp(125px,17vh,164px)}
  .chapter-title{font-size:clamp(30px,7.25vw,40px)}.chapter-description{font-size:11.5px}.poem{font-size:10.5px}
  .interaction-area{left:27px;right:26px;bottom:116px}.action{min-height:42px;padding:0 16px;font-size:11px;gap:17px}
  .release-form{gap:6px}.release-form input{height:42px;font-size:11px}.release-form .action{padding:0 12px;gap:7px}
  .interaction-hint{font-size:9px}.panel-label{font-size:8px}.scene-controls{gap:7px}
  .site-footer{left:27px;right:27px;bottom:30px}.text-action{font-size:10px}.pagination{gap:8px}.pagination #pageNum{min-width:43px;font-size:10px}.nav-arrow{width:32px;height:32px}
  .range-wrap{gap:8px;min-width:0;width:100%;}.range-title{font-size:10px}.range-value{font-size:11px;min-width:30px}
  .about-dialog{padding:38px 27px}.keyboard-help{gap:10px}.keyboard-help span{min-width:45%}
}
@media (max-height:660px) and (max-width:800px){
  .stage-copy{top:95px}.chapter-line{margin-bottom:10px}.chapter-title{font-size:clamp(25px,6vw,34px);margin-bottom:8px;line-height:1.3}.chapter-description{line-height:1.45}.poem{margin-top:8px}.interaction-area{bottom:85px}.site-footer{bottom:24px}.interaction-hint{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
/* Long contemplative headings get a little more breathing room on desktop. */
@media (min-width:801px){
  .stage-copy.compact .chapter-line{margin-bottom:19px}
  .stage-copy.compact .chapter-title{font-size:clamp(30px,min(3.08vw,4.9vh),51px);line-height:1.34;margin-bottom:14px}
  .stage-copy.compact .poem{margin-top:15px}
  .range-wrap{width:min(100%,320px);min-width:250px}
}
@media (max-height:700px) and (min-width:801px){
  .stage-copy{top:117px!important}
  .chapter-line,.stage-copy.compact .chapter-line{margin-bottom:10px}
  .chapter-title,.stage-copy.compact .chapter-title{font-size:clamp(28px,2.8vw,37px);line-height:1.29;margin-bottom:9px}
  .chapter-description{font-size:11px;line-height:1.5}
  .poem,.stage-copy.compact .poem{margin-top:10px;font-size:10px}
  .interaction-area{bottom:88px}
  .panel-label{margin-bottom:9px}
  .interaction-hint{margin-top:8px}
  .action{min-height:38px}
}