:root{font-family:Inter,Segoe UI,Microsoft YaHei,sans-serif;color:#d9ded5;background:#101311;font-synthesis:none;font-weight:400;font-size:13px;color-scheme:dark;--accent:#c0ceae;--muted:#899487;--faint:#5e6b60;--line:#29302a;--panel:#181d19;--surface:#202720}*{box-sizing:border-box}body{margin:0;min-width:360px}button,input,select{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{opacity:.3;cursor:not-allowed}button{border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button,input{touch-action:manipulation}button{transition:background .18s,color .18s,border-color .18s,opacity .18s}button:hover:not(:disabled){color:#f0f4e8}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}input[type=range]{cursor:pointer;width:100%;accent-color:var(--accent)}input[type=number]::-webkit-inner-spin-button{opacity:.35}input[type=number]{appearance:textfield}input[type=number]:hover{appearance:auto}.tiny-dot{display:inline-block;background:#a5b993;width:4px;height:4px;border-radius:50%;flex-shrink:0}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid transparent;border-radius:6px;color:var(--muted);flex-shrink:0}.icon-button:hover{background:#ffffff08}.icon-button.active{background:#222c23;color:var(--accent);border-color:#384335}.icon-button.small{width:24px;height:24px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:500;color:#899781}.subtle{font-size:11px;color:var(--faint)}.stage>div:first-child{position:absolute!important;inset:0}.stage:fullscreen{border:0;border-radius:0}.transport-main{display:flex;align-items:center;gap:9px}.play-button{width:30px;height:30px;background:#becbaa;color:#1c241b;border-radius:50%;display:grid;place-items:center}.play-button:hover{background:#d2ddc3;color:#101910!important}.time-readout{font-family:SFMono-Regular,Consolas,monospace;font-size:11px;color:#bdc5b8;min-width:65px;margin-left:4px}.time-readout>span{color:var(--faint)}.timeline{display:flex;align-items:center;gap:14px;flex:1}.timeline input{max-width:360px;margin:0;height:2px;appearance:none;background:#303a30;border-radius:2px}.timeline input::-webkit-slider-thumb{appearance:none;width:6px;height:6px;border-radius:50%;background:#bdcbb0}.timeline>span{white-space:nowrap;color:#657261;font-size:8px;font-family:Consolas,monospace;letter-spacing:.7px}.render-stats{display:flex;align-items:center;gap:8px;font-size:9px;color:#8d9a86;white-space:nowrap;font-family:Consolas,monospace}.stats-detail{font-family:inherit;margin-left:6px;padding-left:12px;border-left:1px solid var(--line);font-size:9px;color:#62735f}.preset-card{padding:0;min-width:0;text-align:left}.preset-art>span{position:absolute;width:72%;height:86%;left:14%;top:7%;filter:blur(10px);opacity:.65;transform:rotate(-30deg);background:radial-gradient(ellipse at 25% 32%,var(--c1),transparent 65%),radial-gradient(ellipse at 72% 22%,var(--c2),transparent 62%),radial-gradient(ellipse at 54% 82%,var(--c3),transparent 62%);border-radius:42% 68% 48% 72%}.preset-art i{position:absolute;left:8px;top:7px;font:8px Consolas,monospace;color:#84907b;opacity:.65}.preset-art b{position:absolute;bottom:6px;right:6px;width:16px;height:16px;display:grid;place-items:center;background:#bacaaa;border-radius:50%;color:#283521}.preset-card.selected .preset-art{border-color:#bdc9a9;box-shadow:0 0 0 1px #a5b39322}.preset-card:hover .preset-art{border-color:#73816a}.preset-name{display:block;font-size:11px;margin-top:9px;letter-spacing:.5px;color:#a7b29d}.preset-card.selected .preset-name{color:#d6dfca}.preset-subtitle{display:block;font-size:7px;letter-spacing:1px;color:#57674f;margin-top:5px;white-space:nowrap}.preview-footer>span:first-child{display:flex;align-items:center;gap:7px}.preview-footer>span:last-child{font-size:7px;letter-spacing:1.3px;color:#56624f}.panel-heading .eyebrow{font-size:8px;color:#72816b}.panel-heading h2{font-size:20px;font-weight:400;letter-spacing:2px;margin-top:9px;color:#d4dcce}.panel-tabs button{height:39px;padding:0;font-size:11px;letter-spacing:1px;color:#77866f;position:relative}.panel-tabs button[aria-selected=true]{color:#d1dfc1}.panel-tabs button[aria-selected=true]:after{content:"";height:2px;width:23px;background:#c5d6ae;position:absolute;bottom:-1px;left:calc(50% - 11px)}.panel-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 24px 24px;scrollbar-width:thin;scrollbar-color:#3b4738 transparent;scroll-behavior:smooth}.control-group{padding:25px 0 22px;border-bottom:1px solid var(--line)}.control-group:last-child{border-bottom:0}.group-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.group-heading h3{font-size:12px;font-weight:500;letter-spacing:1px;color:#c5d0ba}.group-heading>span{font-size:8px;letter-spacing:1.1px;color:#65765c}.section-intro{font-size:11px;color:#84937b;line-height:1.9;margin-bottom:18px;letter-spacing:.3px}.palette-ribbon{height:34px;border-radius:3px;margin-bottom:16px;opacity:.85;border:1px solid #ffffff09}.color-stop{padding:9px 0;border-bottom:1px solid #283224}.color-stop-top{display:flex;align-items:center;gap:10px}.color-index{font:9px Consolas,monospace;color:#6a7d60;width:15px}.color-input{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.color-input input[type=color]{width:25px;height:25px;padding:0;background:none;cursor:pointer;border:0;flex-shrink:0}.color-input input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-input input[type=color]::-webkit-color-swatch{border:1px solid #ffffff20;border-radius:4px}.color-input input[type=text]{min-width:0;width:100%;padding:5px 0;border:0;border-radius:3px;background:none;color:#bfcbb5;letter-spacing:.8px;font:10px Consolas,monospace}.color-input.invalid input[type=text]{color:#e5b5a0}.alpha-row{display:flex;align-items:center;gap:13px;margin:9px 34px 0 25px}.alpha-row label{font-size:9px;color:#74866c;flex-shrink:0}.alpha-row>span{font:9px Consolas,monospace;width:28px;text-align:right;color:#829275}.alpha-row input{height:2px;appearance:none;background:#35412e;border-radius:3px;margin:0}.alpha-row input::-webkit-slider-thumb{appearance:none;width:6px;height:6px;background:#aaba98;border-radius:50%}.add-color{display:flex;align-items:center;justify-content:center;gap:7px;border:1px dashed #394630;border-radius:3px;width:100%;height:31px;font-size:10px;color:#a5b395;margin-top:15px}.add-color:hover{background:#252f20}.background-color{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:18px}.background-color>span{font-size:11px;color:#9dad92;white-space:nowrap}.background-color>.color-input{max-width:127px}.background-color input[type=color]{width:21px;height:21px}.hint{font-size:10px;line-height:1.8;color:#75876c;margin-top:9px}.range-control{margin-bottom:20px}.range-control:last-child{margin-bottom:0}.control-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.control-line>label{font-size:11px;color:#a9b69d}.value-box{display:flex;align-items:center;border:1px solid #34402e;background:#1b2219;border-radius:3px;padding:3px 6px;min-width:43px;gap:3px}.value-box input{border:0;outline:none;background:transparent;width:38px;text-align:right;color:#c1cdb4;font:10px Consolas,monospace;padding:0}.value-box>span{font:9px Consolas,monospace;color:#7a8c6e}.range-control>input[type=range]{display:block;margin:0;appearance:none;height:3px;background:linear-gradient(to right,#9eaf89 0%,#9eaf89 var(--range),#34432c var(--range),#34432c 100%);border-radius:3px}.range-control>input[type=range]::-webkit-slider-thumb{appearance:none;width:9px;height:9px;background:#becfac;border-radius:50%;box-shadow:0 0 0 3px #becfac0b}.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:18px;font-size:11px;color:#a9b79c}.toggle-row .hint{font-size:10px}.toggle{width:29px;height:17px;border-radius:10px;background:#35412e;padding:3px;flex-shrink:0}.toggle>span{width:11px;height:11px;background:#7a896e;display:block;border-radius:50%;transition:transform .2s}.toggle[aria-checked=true]{background:#b7caa1}.toggle[aria-checked=true]>span{background:#334428;transform:translate(12px)}.panel-footer{height:43px;padding:0 24px;display:flex;align-items:center;gap:8px;border-top:1px solid #2c3826;font-size:10px;color:#a7b698;flex-shrink:0}.panel-footer-tail{margin-left:auto;color:#6e8062;font-size:9px}.primary-button,.secondary-button{border:1px solid #405135;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:10px 14px;font-size:11px;letter-spacing:.5px;min-height:36px}.wide{width:100%;margin-bottom:10px}.primary-button{background:#bdceaa;color:#24301d;border-color:#bdceaa}.primary-button:hover{background:#d2dfc2;color:#24301d!important}.secondary-button{background:#20291c;color:#b1c19f}.secondary-button:hover{background:#2c3824}.time-jump{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#a9b69d;margin-top:15px}.time-jump input{background:#20291c;border:1px solid #405135;border-radius:3px;color:#c4d2b7;max-width:82px;padding:7px}.inline-note{font-size:10px;color:#c5c49b;line-height:1.8;margin-top:15px;background:#cec68208;padding:10px;border-radius:3px}.mode-list{display:flex;flex-direction:column;gap:8px}.mode-button{display:flex;gap:12px;align-items:center;text-align:left;padding:13px;border:1px solid #33422b;border-radius:4px;font-size:11px;color:#a4b495}.mode-button small{display:block;font-size:10px;color:#788e69;margin-top:6px}.mode-button.selected{border-color:#8ca474;background:#a3c08209;color:#d0dfc1}.radio-dot{width:12px;height:12px;border:1px solid #627a4d;border-radius:50%;flex-shrink:0}.mode-button.selected .radio-dot{background:#b7cc9c;border:3px solid #304127;box-shadow:0 0 0 1px #9dbb7e}.audio-drop{display:flex;flex-direction:column;align-items:center;gap:11px;padding:25px 16px;width:100%;border:1px dashed #475d37;border-radius:4px;background:#1b2518;color:#8fa77c;margin-bottom:15px}.audio-drop strong{font-size:11px;font-weight:400;color:#c4d5b4;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.audio-drop>span{font-size:9px;color:#789165}.signal-meter{display:flex;align-items:center;gap:12px;margin-top:15px;font-size:10px;color:#7d956a}.signal-meter>div{height:3px;background:#2c3d22;flex:1;border-radius:3px;overflow:hidden}.signal-meter i{display:block;height:100%;background:#bfd99f;transition:width .3s}.signal-meter output{font-family:Consolas,monospace;min-width:30px}.quality-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quality-options button{border:1px solid #394b2f;border-radius:4px;padding:14px 7px;font-size:11px;color:#9aaf88}.quality-options small{display:block;font:8px Consolas,monospace;color:#718962;margin-top:7px}.quality-options .selected{border-color:#9ebc80;background:#9ebe7f09;color:#d1e2bf}.render-info{font-size:10px;line-height:1.5;margin:20px 0 0}.render-info>div{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:12px}.render-info dt{color:#809670}.render-info dd{color:#aabb9b;margin:0;font:9px Consolas,monospace}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:20;display:flex;align-items:center;gap:20px;max-width:calc(100% - 32px);background:#2b3925;border:1px solid #566f42;box-shadow:0 12px 35px #0006;padding:12px 14px 12px 20px;border-radius:6px;color:#d1e1c0;font-size:12px;line-height:1.6}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app{--frame-inset: 24px;--panel-width: 350px;--panel-toggle-size: 40px;--panel-top: max(var(--frame-inset), env(safe-area-inset-top));--panel-right: max(var(--frame-inset), env(safe-area-inset-right));--panel-bottom: max(var(--frame-inset), env(safe-area-inset-bottom));height:100dvh;min-height:0;overflow:hidden;position:relative}.workspace,.preview-column{width:100%;height:100%;min-width:0;min-height:0}.preview-column{position:relative;overflow:hidden}.stage{position:absolute;inset:0;isolation:isolate;background:#080d0d;overflow:hidden}.project-signature{position:absolute;top:calc(var(--frame-inset) + 6px);left:calc(var(--frame-inset) + 8px);z-index:2;pointer-events:none;color:#e7e9de}.signature-caption{display:flex;align-items:center;gap:10px;margin-bottom:15px;color:#a5af9c;font:8px Consolas,monospace;letter-spacing:2.5px}.signature-caption:before{content:"";width:25px;height:1px;background:currentColor;opacity:.5}.project-signature h1{font-family:Bodoni MT,Didot,Times New Roman,serif;font-size:clamp(64px,7.5vw,108px);font-weight:400;letter-spacing:-.065em;line-height:.86}.project-signature h1>span{display:block}.project-signature .signature-outline{font-size:.66em;font-style:italic;letter-spacing:-.055em;margin-top:4px}@supports (-webkit-text-stroke: 1px currentColor){.signature-outline{color:transparent;-webkit-text-stroke:.7px #c3ccb8}}.transport{position:absolute;z-index:2;left:var(--frame-inset);bottom:calc(var(--frame-inset) + 29px);width:min(680px,calc(100% - var(--panel-width) - var(--frame-inset) * 3));height:58px;display:flex;align-items:center;gap:18px;padding:0 16px;border:1px solid #b5c7a51a;border-radius:5px;background:#141a16bd;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.timeline{min-width:0}.preview-footer{position:absolute;left:var(--frame-inset);bottom:var(--frame-inset);width:min(680px,calc(100% - var(--panel-width) - var(--frame-inset) * 3));display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#86927b}.control-panel{position:fixed;top:var(--panel-top);right:var(--panel-right);z-index:10;width:min(var(--panel-width),calc(100% - var(--frame-inset) * 2));height:calc(100dvh - var(--panel-top) - var(--panel-bottom));display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#181e19ed;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid #a7bc902c;border-radius:5px;box-shadow:0 18px 60px #0005;clip-path:inset(0 0 0 0 round 5px);opacity:1;visibility:visible;transition:clip-path .42s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility 0s}.panel-hidden .control-panel{clip-path:inset(0 0 calc(100% - var(--panel-toggle-size)) calc(100% - var(--panel-toggle-size)) round 5px);opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,0s,.42s}.panel-heading{padding:25px 65px 22px 24px;display:flex;align-items:center}.panel-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 24px;border-bottom:1px solid #323a2f}.panel-scroll{overscroll-behavior:contain}.panel-toggle{position:fixed;top:var(--panel-top);right:var(--panel-right);z-index:11;width:var(--panel-toggle-size);height:var(--panel-toggle-size);display:grid;place-items:center;padding:0;border:1px solid #a7bc9045;border-radius:5px;background:#1c251fe8;color:#c4d1b7;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.panel-toggle[aria-expanded=true]{background:#b9c7a8;color:#293523;border-color:#b9c7a8;border-radius:0 5px}.panel-toggle:hover:not(:disabled){background:#364730;color:#eef4e6}.panel-toggle[aria-expanded=true]:hover{background:#d1ddc0;color:#293523}.panel-toggle:focus-visible{outline-offset:4px}.panel-toggle svg{transition:transform .42s cubic-bezier(.22,1,.36,1)}.panel-toggle[aria-expanded=true] svg{transform:rotate(90deg)}.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}.preset-art{height:96px;border:1px solid #3c4736;border-radius:4px;position:relative;overflow:hidden;background:#0b100e;transition:border-color .2s}.preset-subtitle{color:#89967d}@media(min-width:1600px){.app{--frame-inset: 32px;--panel-width: 380px}.preset-art{height:110px}}@media(max-width:1100px){.app{--frame-inset: 20px;--panel-width: 320px}.transport{gap:12px;padding:0 12px}.timeline>span,.stats-detail,.preview-footer>span:last-child{display:none}.panel-heading{padding-left:20px}.panel-tabs{margin-left:20px;margin-right:20px}.panel-scroll,.panel-footer{padding-left:20px;padding-right:20px}}@media(max-width:700px){.app{--frame-inset: 16px;--panel-top: max(168px, env(safe-area-inset-top));--panel-width: 350px}.project-signature{top:25px;left:24px}.project-signature h1{font-size:68px}.signature-caption{font-size:7px;margin-bottom:12px}.transport,.preview-footer{width:calc(100% - var(--frame-inset) * 2)}.transport{gap:10px}.transport-main{gap:6px}.time-readout{min-width:55px;font-size:10px}.render-stats{font-size:8px;gap:5px}.app:not(.panel-hidden) .transport,.app:not(.panel-hidden) .preview-footer{visibility:hidden}.toast{bottom:16px;font-size:11px}}@media(max-width:700px)and (max-height:600px){.app{--panel-top: var(--frame-inset)}.app:not(.panel-hidden) .project-signature{visibility:hidden}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}