:root{font-family:DM Sans,sans-serif;color:#f3f0ec;background:#080b11;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #e6b888;outline-offset:4px}button{border:0;color:inherit}#app{min-height:100dvh}.app-shell{--accent: #b2bdce;--glow: rgba(93, 128, 160, .16);--horizon: #182737;min-height:100dvh;position:relative;isolation:isolate;overflow:hidden;background:#080b11;display:flex;flex-direction:column}.theme-fracture{--accent: #dd8a76;--glow: rgba(155, 45, 49, .23);--horizon: #3c171c }.theme-ascent{--accent: #edc39b;--glow: rgba(190, 95, 46, .24);--horizon: #35221d }.visual-world{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#090c12,#10151c 48%,#0b0d12);pointer-events:none}.world-haze{position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;background:radial-gradient(ellipse at 53% 58%,var(--glow),transparent 48%),radial-gradient(ellipse at 75% 15%,rgba(92,101,125,.12),transparent 43%);animation:breathe 13s ease-in-out infinite alternate}.world-landscape{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 32%,var(--horizon) 95%);opacity:.62;-webkit-mask-image:linear-gradient(to bottom,transparent 20%,black 100%);mask-image:linear-gradient(to bottom,transparent 20%,black 100%)}.world-landscape:before{content:"";position:absolute;left:-10%;right:-10%;bottom:8%;height:30%;background:linear-gradient(164deg,transparent 45%,rgba(0,0,0,.38) 45.2%,rgba(0,0,0,.3) 53%,transparent 53.2%),linear-gradient(18deg,transparent 42%,rgba(0,0,0,.4) 42.2%,rgba(0,0,0,.5) 58%,transparent 58.2%);filter:blur(8px)}.world-glow{position:absolute;width:65vw;height:65vw;max-width:900px;max-height:900px;left:50%;bottom:-54vw;transform:translate(-50%);border-radius:50%;background:radial-gradient(circle,rgba(180,184,196,.12),transparent 63%);filter:blur(50px);transition:background 2s}.theme-fracture .world-glow{background:radial-gradient(circle,rgba(218,68,46,.32),transparent 62%)}.theme-ascent .world-glow{background:radial-gradient(circle,rgba(230,151,78,.35),transparent 63%)}.mood-dawn .world-glow,.mood-light .world-glow{bottom:-36vw;background:radial-gradient(circle,rgba(255,215,157,.48),transparent 65%)}.world-particles{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.3;background-image:radial-gradient(circle at 12% 35%,rgba(255,255,255,.35) 1px,transparent 2px),radial-gradient(circle at 78% 57%,rgba(255,255,255,.3) 1px,transparent 2px),radial-gradient(circle at 62% 23%,rgba(255,255,255,.25) 1px,transparent 2px);background-size:340px 420px,410px 350px,500px 450px;animation:drift 30s linear infinite}.theme-fracture .world-particles,.theme-ascent .world-particles{filter:sepia(1) saturate(2)}.world-grain{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.15;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}.topbar{height:94px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,88px);position:relative;z-index:20}.brand{display:flex;align-items:center;gap:12px;background:none;font-family:Manrope,sans-serif;font-weight:800;letter-spacing:.2em;font-size:12px}.brand i{font-weight:400;font-style:normal;color:#a9a7aa}.brand-mark{font-size:26px;font-weight:400;color:var(--accent)}.header-right{display:flex;align-items:center;gap:28px}.header-descriptor,.site-footer,.eyebrow,.menu-label{font-size:10px;letter-spacing:.27em;font-weight:700;color:#9a9da5}.icon-btn{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;background:transparent;color:#b9b9c1;transition:color .2s,background .2s}.icon-btn:hover,.icon-btn.lit{color:var(--accent);background:#ffffff0f}.screen-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px 24px 90px;min-height:600px}.welcome{padding-top:20px}.eyebrow{color:var(--accent);display:flex;align-items:center;gap:14px;justify-content:center}.eyebrow-rule{display:inline-block;width:32px;height:1px;background:var(--accent);opacity:.6}.welcome h1,.ending h2{font-family:Manrope,sans-serif;font-size:clamp(66px,11vw,164px);font-weight:800;line-height:.96;letter-spacing:-.085em;margin:27px 0 30px}.welcome h1 em,.ending h2 em{font-style:normal;font-weight:400;color:var(--accent)}.period{color:var(--accent)}.hero-rule,.small-rule{width:48px;height:2px;background:var(--accent);opacity:.8;margin:0 auto 27px}.welcome-tagline{font-size:clamp(20px,2.5vw,30px);line-height:1.45;font-weight:400;margin:0}.welcome-tagline strong{font-weight:700}.welcome-copy{color:#a7a9b1;font-size:14px;line-height:1.85;margin:19px 0 34px}.primary-btn{background:var(--accent);color:#111319;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:50px;padding:0 26px;font-family:Manrope,sans-serif;font-size:11px;font-weight:800;letter-spacing:.11em;border-radius:3px;transition:filter .2s,transform .2s}.primary-btn:hover{filter:brightness(1.13);transform:translateY(-2px)}.welcome-footer{display:flex;align-items:center;gap:18px;margin-top:65px;font-size:10px;letter-spacing:.15em;color:#a4a7ae}.foot-line{width:36px;height:1px;background:#626772}.site-footer{display:flex;justify-content:space-between;padding:24px clamp(24px,5vw,88px);font-size:9px;color:#7b818e;position:relative;z-index:2}.act-intro h2{font-family:Manrope,sans-serif;font-size:clamp(54px,8vw,112px);letter-spacing:-.065em;line-height:1.05;margin:26px 0 28px}.narrative{font-size:clamp(16px,1.7vw,20px);line-height:1.85;max-width:690px;color:#c5c6cb;margin:5px auto 34px;font-weight:400}.intro-actions{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap}.text-btn{background:none;color:#b6b8bf;font-size:12px;text-decoration:underline;text-underline-offset:5px}.act-steps{display:flex;gap:28px;margin-top:90px}.act-steps button{background:none;color:#8a8e9a;border-bottom:1px solid #4b4d54;padding:0 0 12px;font-size:11px;letter-spacing:.08em}.act-steps button.active{color:var(--accent);border-color:var(--accent)}.act-steps span{margin-left:8px}.dot-sep{opacity:.55}.experience{flex:1;display:flex;flex-direction:column;min-height:calc(100dvh - 94px);padding:0 clamp(24px,5vw,88px) 28px}.act-identity{text-align:center;padding-top:18px}.act-identity h2{font-family:Manrope,sans-serif;font-size:clamp(22px,3vw,37px);letter-spacing:-.045em;margin:12px 0 0}.lyric-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:270px;text-align:center;padding:35px 10px}.lyric-block{max-width:980px}.current-lyric{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.045em;font-size:clamp(29px,4.8vw,68px);line-height:1.2;margin:0;text-shadow:0 5px 40px rgba(0,0,0,.5)}.current-lyric.emphasis{color:var(--accent)}.current-lyric.instrumental{color:var(--accent);font-size:54px}.next-lyric{font-size:clamp(13px,1.6vw,20px);color:#adb0b9;margin:30px 0 0;opacity:.68}.lyric-placeholder{display:flex;align-items:center;flex-direction:column;gap:12px;max-width:450px}.sound-symbol{font-size:54px;color:var(--accent);opacity:.65;animation:breathe 5s ease-in-out infinite alternate}.lyric-placeholder p{font-size:12px;letter-spacing:.2em;font-weight:800;margin:10px 0 0}.lyric-placeholder span{font-size:13px;line-height:1.6;color:#a7a9b3}.subtle-btn{background:transparent;color:var(--accent);display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.13em;font-weight:700;margin-top:12px}.scene-caption{text-align:center;color:#adb0b8;letter-spacing:.22em;font-size:10px;margin-bottom:26px}.scene-dot{display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;margin-right:10px;vertical-align:middle}.player-panel{max-width:500px;width:100%;margin:0 auto;background:#0a0d13ad;border:1px solid rgba(255,255,255,.085);border-radius:8px;padding:21px 28px 16px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.timeline-row{display:flex;align-items:center;gap:20px;font-variant-numeric:tabular-nums;color:#a4a8b0;font-size:11px}.timeline-row input{flex:1}.timeline-row input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:linear-gradient(to right,var(--accent) var(--progress),#414650 var(--progress));border-radius:8px;cursor:pointer}.timeline-row input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:11px;height:11px;background:var(--accent);border-radius:50%}.timeline-row input::-moz-range-thumb{width:11px;height:11px;background:var(--accent);border:0;border-radius:50%}.controls-row{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:15px 0 7px}.player-tools,.volume-tools,.transport{display:flex;align-items:center;gap:10px}.transport{justify-content:center;gap:26px}.volume-tools{justify-content:flex-end}.volume-tools input{width:75px;accent-color:var(--accent)}.transport-secondary{background:none;color:#c6c7cb}.transport-secondary:hover{color:var(--accent)}.play-btn{width:53px;height:53px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#0f131a}.player-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.08);padding-top:13px;font-size:9px;letter-spacing:.17em;color:#9b9fa9}.footer-dot{color:var(--accent);padding:0 5px}.player-footer button{display:flex;gap:8px;align-items:center;background:none;font-size:9px;letter-spacing:.13em;color:#a5a8b0}.ending h2{font-size:clamp(65px,10vw,140px)}.ending p{font-size:21px;line-height:1.6;color:#d3d1cd}.ending .ending-small{font-size:13px;color:#aaa9a9;margin-bottom:35px}.act-menu{position:absolute;z-index:30;top:80px;right:clamp(24px,5vw,88px);width:min(390px,calc(100vw - 48px));padding:27px;background:#0e1219fa;border:1px solid rgba(255,255,255,.13);box-shadow:0 20px 60px #0009;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border-radius:6px}.menu-label{margin-bottom:16px}.menu-act{width:100%;display:flex;align-items:center;gap:16px;text-align:left;padding:16px 6px;background:transparent;border-bottom:1px solid rgba(255,255,255,.08)}.menu-act.selected{color:var(--accent)}.menu-number{font-family:Manrope,sans-serif;font-size:30px;color:var(--accent);width:32px}.menu-act>span:nth-child(2){flex:1}.menu-act strong{display:block;font-size:16px;margin-bottom:6px}.menu-act small{display:block;font-size:10px;color:#9da0a8;letter-spacing:.08em}.menu-foot{color:#9298a3;font-size:11px;line-height:1.6;margin:22px 0 0}.editor-panel{position:fixed;z-index:35;right:0;top:0;bottom:0;width:min(475px,100vw);background:#10141c;border-left:1px solid #343943;box-shadow:-20px 0 80px #0009;display:flex;flex-direction:column;padding:27px 24px}.editor-header{display:flex;justify-content:space-between;align-items:start}.editor-header .eyebrow{justify-content:flex-start}.editor-header h3{font-size:23px;margin:10px 0}.editor-help{font-size:12px;line-height:1.7;color:#abb0b9}.editor-help kbd{border:1px solid #5b6270;border-radius:3px;padding:1px 5px;color:#fff}.editor-progress{font-size:10px;color:var(--accent);letter-spacing:.11em;display:flex;justify-content:space-between;margin:16px 0}.editor-lines{overflow:auto;flex:1;border-top:1px solid #313844}.editor-line{display:grid;grid-template-columns:28px 1fr 45px;gap:8px;width:100%;text-align:left;background:none;padding:11px 8px;color:#aeb3bd;border-bottom:1px solid #242b34;font-size:12px;line-height:1.5}.editor-line span:first-child{font-size:10px;color:#717b8a}.editor-line span:last-child{text-align:right;font-variant-numeric:tabular-nums;color:#88909e}.editor-line.cursor{background:#28313d;color:#fff;border-left:2px solid var(--accent)}.editor-line.timed span:last-child{color:#b4d1bc}.editor-actions{padding-top:17px}.editor-actions .primary-btn{width:100%}.editor-utility{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;margin-top:15px}.editor-utility button,.import-label{display:flex;align-items:center;gap:4px;background:none;color:#adb3bd;font-size:10px;letter-spacing:.05em;cursor:pointer}.editor-empty{display:flex;gap:12px;align-items:center;color:#afb3bd;font-size:13px;line-height:1.6;margin-top:40px}.editor-empty code{color:#fff}.toast{position:fixed;z-index:60;bottom:25px;left:50%;transform:translate(-50%);background:#e7c49b;color:#14171d;padding:13px 18px;border-radius:5px;font-size:12px;font-weight:700;max-width:90vw}.fade-enter-active,.fade-leave-active{transition:opacity .25s}.fade-enter-from,.fade-leave-to{opacity:0}.screen-enter-active,.screen-leave-active{transition:opacity .35s,transform .35s}.screen-enter-from{opacity:0;transform:translateY(14px)}.screen-leave-to{opacity:0;transform:translateY(-14px)}.lyric-enter-active,.lyric-leave-active{transition:opacity .2s,transform .2s}.lyric-enter-from{opacity:0;transform:translateY(12px)}.lyric-leave-to{opacity:0;transform:translateY(-12px)}.drawer-enter-active,.drawer-leave-active{transition:transform .3s}.drawer-enter-from,.drawer-leave-to{transform:translate(100%)}@keyframes breathe{0%{transform:scale(.95);opacity:.45}to{transform:scale(1.06);opacity:.9}}@keyframes drift{0%{transform:translateY(0)}to{transform:translateY(-70px)}}@media(max-width:700px){.topbar{height:76px;padding:0 20px}.brand{font-size:10px;letter-spacing:.13em}.header-descriptor{display:none}.screen-panel{min-height:calc(100dvh - 145px)}.welcome h1{font-size:clamp(62px,15vw,110px)}.welcome-footer{gap:9px;font-size:8px;flex-wrap:wrap;justify-content:center}.foot-line{width:16px}.welcome-copy{font-size:12px}.act-intro h2{font-size:clamp(45px,11vw,70px)}.narrative{font-size:15px}.act-steps{gap:13px;margin-top:55px}.act-steps button{font-size:10px}.act-steps span{display:none}.experience{min-height:calc(100dvh - 76px);padding:0 14px 15px}.act-identity{padding-top:8px}.act-identity h2{font-size:26px}.lyric-stage{min-height:230px}.current-lyric{font-size:clamp(28px,7vw,47px)}.player-panel{padding:16px 13px}.transport{gap:17px}.volume-tools input{display:none}.player-footer{font-size:8px}.site-footer{padding:20px;font-size:8px}.editor-panel{padding:20px 14px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.timing-source{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;letter-spacing:.08em;color:#b2becb;padding:10px 12px;background:#1b2530;border:1px solid #354252;border-radius:4px}.unsaved-indicator{color:#e9b77d;white-space:nowrap}.editor-line-v2{padding:10px 7px 12px;border-bottom:1px solid #29303a}.editor-line-v2.cursor{background:#26313d;border-left:2px solid var(--accent)}.editor-select{display:flex;align-items:baseline;gap:10px;text-align:left;width:100%;background:none;color:#d2d5db;font-size:12px;line-height:1.5;padding:3px 4px 8px}.line-index{font-size:10px;color:#8994a3;min-width:22px}.editor-time-controls{display:flex;align-items:center;gap:8px;padding-left:36px}.editor-time-controls button{width:31px;height:30px;background:#303b49;color:#e6e6e6;border-radius:4px;font-size:19px}.editor-time-controls input{min-width:0;width:100px;height:30px;border:1px solid #55606e;background:#141b24;color:#f5f2ef;padding:3px 8px;border-radius:4px;font-variant-numeric:tabular-nums}.save-project{margin-top:10px;width:100%;padding:12px 8px;background:#d8b48c;color:#10141b;font-size:11px;font-weight:800;letter-spacing:.08em;border-radius:4px}.save-project:disabled{opacity:.45;cursor:default}.editor-footnote{font-size:10px;line-height:1.6;color:#9aa3b1;margin:12px 0 0}.editor-footnote code{color:#e4c49d}.editor-lyric-input{width:100%;min-width:0;box-sizing:border-box;background:#fff1;color:#f5f0eb;border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:9px 10px;font:inherit;font-size:13px}.editor-lyric-input:focus{outline:1px solid #d6a16a}.editor-row-actions{display:flex;justify-content:flex-end;gap:12px;padding:3px 0 10px}.editor-row-actions button,.editor-add-first{cursor:pointer;background:transparent;color:#d6a16a;border:1px solid rgba(214,161,106,.35);border-radius:4px;padding:6px 9px;font-size:10px;letter-spacing:.07em}.editor-row-actions button:last-child{color:#dba5a5;border-color:#dba5a559}.app-shell>.act-one-backdrop{z-index:0}.app-shell>.visual-world{z-index:0}.app-shell>.visual-world.act-one-original-world{display:none}.app-shell>.topbar,.app-shell>.screen-panel,.app-shell>.experience,.app-shell>.site-footer{position:relative;z-index:1}
