@font-face{font-family:DM Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-sans-400.ttf) format("truetype")}@font-face{font-family:DM Sans;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-sans-500.ttf) format("truetype")}@font-face{font-family:DM Sans;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/dm-sans-600.ttf) format("truetype")}@font-face{font-family:DM Sans;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/dm-sans-700.ttf) format("truetype")}@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-italic.ttf) format("truetype")}@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif.ttf) format("truetype")}:root{font-family:DM Sans,sans-serif;color:#f5efe2;background:#181818;font-synthesis:none;font-weight:400;--serif: "Instrument Serif", Georgia, serif;--muted: #b8b8b8;--line: #ffffff1c}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,label,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0;background:none}a{color:inherit;text-underline-offset:3px}button,select,input{outline-offset:4px}:focus-visible{outline:2px solid #e1b778;outline-offset:4px}button:disabled{cursor:wait;opacity:.45}svg{flex-shrink:0;vertical-align:middle}button svg{pointer-events:none}[hidden]{display:none!important}h1,h2,h3,p{margin:0}::selection{background:#ad854a80}#studio{height:100dvh;padding:12px}.player{position:relative;width:100%;height:100%;overflow:hidden;border-radius:14px;background:#262626}.viewport{width:100%;height:100%;position:relative;isolation:isolate;overflow:hidden}#canvas-host{position:absolute;inset:0}#canvas-host canvas{display:block;width:100%;height:100%}.viewport:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#11111175,transparent 23%,transparent 55%,#10101061);transition:opacity .45s}.canvas-controls{position:absolute;z-index:3;transition:opacity .35s,transform .35s}.controls-hidden .canvas-controls{opacity:0;pointer-events:none}.controls-hidden .scene-top{transform:translateY(-6px)}.controls-hidden .transport-shell{transform:translate(-50%,8px)}.controls-hidden .viewport:after{opacity:0}@media(hover:hover){.controls-hidden .viewport{cursor:none}}.scene-top{top:24px;left:28px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:10px;font-size:28px;letter-spacing:-1.3px;font-weight:600;padding:4px 0}.brand-symbol{height:27px;width:26px;display:flex;align-items:center;gap:4px;transform:rotate(24deg)}.brand-symbol i{display:block;width:5px;height:14px;border-radius:5px;background:#d0a16a}.brand-symbol i:nth-child(2){height:25px}.brand-symbol i:nth-child(3){height:20px}.scene-actions{display:flex;align-items:center;gap:8px}.glass-button,.glass-icon{border:1px solid #f6ebd526;background:#22222250;backdrop-filter:blur(18px) saturate(0);-webkit-backdrop-filter:blur(18px) saturate(0);border-radius:10px;color:#f6efe2}.glass-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:0 14px;font-size:12px}.glass-button:hover,.glass-icon:hover,.glass-button[aria-expanded=true]{background:#60606099}#music-button>svg:last-child{transform:rotate(90deg);margin-left:4px;opacity:.7;transition:transform .2s}#music-button[aria-expanded=true]>svg:last-child{transform:rotate(-90deg)}.icon-button{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:9px;color:#e0dfd2;flex-shrink:0}.icon-button:hover{background:#ffffff12;color:#fff5df}.icon-button>svg{width:18px;height:18px}.glass-icon{width:42px;height:42px}.transport-shell{left:50%;bottom:26px;transform:translate(-50%);width:min(940px,calc(100% - 56px))}.now-playing{display:flex;align-items:end;justify-content:space-between;gap:18px;padding:0 5px 18px;text-shadow:0 2px 15px #111111b3}.track-text{min-width:0}.track-text h1{font:400 34px/1.05 var(--serif);letter-spacing:-.25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-text p{font-size:11px;color:#f3e8d6b0;margin-top:7px}.playback-hint{color:#eee5d295;font-size:10px;white-space:nowrap;padding-bottom:1px}.transport{padding:10px 18px 13px;border:1px solid #f5ead029;background:#242424b8;border-radius:14px;box-shadow:0 8px 30px #10101029;backdrop-filter:blur(24px) saturate(0);-webkit-backdrop-filter:blur(24px) saturate(0)}.waveform-wrap{position:relative;height:28px;margin-bottom:7px;border-radius:4px}#waveform{display:block;width:100%;height:100%}#seek{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;touch-action:pan-y}#seek:focus-visible{opacity:1;accent-color:#e2b679}.waveform-wrap:hover{background:#ffffff07}.transport-row,.transport-left,.transport-right{display:flex;align-items:center}.transport-row{justify-content:space-between;gap:14px}.transport-left,.transport-right{gap:12px}.primary-play{width:40px;height:40px;border-radius:50%;background:#ece5d4;color:#2e2e2e}.primary-play:hover{background:#fff6e3;color:#2e2e2e}.primary-play svg{width:17px;height:17px}.timecode{display:flex;gap:9px;align-items:center;font-family:monospace;font-size:11px;font-variant-numeric:tabular-nums;color:#b0b0b0}.timecode span:first-child{color:#f2efdf}.timecode span:nth-child(2){opacity:.45}.volume-control{display:flex;align-items:center;gap:7px}input[type=range]{accent-color:#d4bb8e}#volume{width:62px;height:3px;cursor:pointer;margin:0 7px 0 0}.icon-button.active{color:#efc284;background:#e4b3651c}.library{position:absolute;top:80px;right:24px;z-index:6;width:350px;max-width:calc(100% - 32px);max-height:calc(100% - 106px);overflow:auto;overscroll-behavior:contain;padding:20px;border:1px solid #ecead52b;border-radius:15px;background:#252525ed;box-shadow:0 20px 70px #0e0e0e4d;backdrop-filter:blur(30px) saturate(0);-webkit-backdrop-filter:blur(30px) saturate(0)}.library-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.library-heading h2{font:400 29px var(--serif)}.library-heading .icon-button{width:30px;height:30px}.library-tabs{display:flex;gap:23px;border-bottom:1px solid var(--line);margin:17px 0 16px}.library-tabs button{position:relative;font-size:11px;color:#b7b7b7;padding:0 0 11px}.library-tabs button span{font-size:9px;background:#ffffff0d;border-radius:4px;padding:2px 5px;margin-left:5px}.library-tabs button[aria-selected=true]{color:#eee7d4}.library-tabs button[aria-selected=true]:after{content:"";position:absolute;height:2px;bottom:-1px;left:0;right:0;background:#ceb78a}.preset-list,.upload-list{display:flex;flex-direction:column;gap:8px}.preset-card{display:flex;align-items:center;gap:12px;width:100%;padding:9px;text-align:left;border:1px solid transparent;border-radius:9px;background:#ffffff05}.preset-card:hover,.upload-card:hover{background:#ffffff0c}.preset-card.selected,.upload-card.selected{border-color:#c4b18070;background:#c4b18012}.preset-art{width:53px;height:53px;flex-shrink:0;border-radius:5px;overflow:hidden;position:relative;background-size:cover;background-position:center;background-color:#786854}.preset-art:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#19191966)}.preset-number{position:absolute;left:5px;top:4px;font-size:9px;color:#f1e0bc;z-index:1}.preset-play{position:absolute;right:4px;bottom:4px;color:#fff0d4;z-index:1}.preset-copy{min-width:0;flex:1}.preset-copy h3{font-size:11px;line-height:1.5;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preset-copy p{color:#b2b2b2;font-size:9px;margin-top:2px}.preset-copy>div{display:flex;gap:8px;align-items:center;color:#b7b7b7;font-size:8px;margin-top:6px}.preset-copy>div>span:nth-child(2){display:none}.preset-check{display:none;margin-left:auto;align-items:center;color:#d4c293;font-size:7px}.selected .preset-check{display:flex}.dropzone{display:flex;align-items:center;gap:13px;cursor:pointer;border:1px dashed #c0c0c040;border-radius:8px;padding:14px 12px;margin-top:18px;color:#cecece}.dropzone:hover,.dropzone.drag-over{border-color:#ddc18d;background:#c4b18012}.dropzone strong{display:block;font-size:11px;font-weight:500}.dropzone small{display:block;font-size:9px;margin-top:5px;color:#adadad}.privacy-note{display:flex;gap:6px;justify-content:center;align-items:center;font-size:9px;margin-top:14px;color:#adadad}.empty-library{min-height:175px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;font-size:11px;color:#bbb}.upload-card{display:flex;gap:12px;align-items:center;border:1px solid transparent;border-radius:8px;padding:14px 10px;text-align:left;width:100%}.upload-card>span:nth-child(2){flex:1;min-width:0}.upload-card strong{display:block;font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-card small{display:block;font-size:9px;color:#adadad;margin-top:5px}.track-mark{color:#c7c7c7}.preparation,.drop-hint{position:absolute;z-index:10;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);background:#252525c9}.preparation h2{font:400 38px var(--serif);margin:23px 0 10px}.preparation p{font-size:12px;color:#c1c1c1}.prep-meter{width:180px;height:2px;background:#bdbdbd2e;margin-top:25px;overflow:hidden}.prep-meter span{display:block;height:100%;width:0;background:#d5b77f;transition:width .25s}#prep-percent{font-size:10px;font-variant-numeric:tabular-nums;color:#bbb;margin-top:10px}.preparation .text-button{margin-top:22px}.prep-orbit{height:37px;display:flex;gap:11px;align-items:center}.prep-orbit span{width:8px;height:8px;border-radius:50%;background:#dfbf87;box-shadow:0 0 16px #d7bc8377;animation:float 1.7s ease-in-out infinite}.prep-orbit span:nth-child(2){animation-delay:.22s}.prep-orbit span:nth-child(3){animation-delay:.44s}@keyframes float{0%,to{transform:translateY(7px);opacity:.35}50%{transform:translateY(-7px);opacity:1}}.drop-hint{z-index:11;gap:18px;border:1px dashed #e8cf9b;border-radius:inherit;pointer-events:none}.drop-hint span{font:400 37px var(--serif)}dialog{width:460px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 40px);overflow:auto;background:#2b2b2bee;backdrop-filter:blur(28px) saturate(0);-webkit-backdrop-filter:blur(28px) saturate(0);border:1px solid #cecece36;border-radius:16px;padding:27px;color:#f0eddf;box-shadow:0 30px 120px #0e0e0e70}dialog::backdrop{background:#0f0f0f55;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.dialog-header h2{font:400 33px var(--serif)}.dialog-header .icon-button{width:30px;height:30px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;border-top:1px solid var(--line)}.setting-row strong{display:block;font-size:12px;font-weight:500}.setting-row small{display:block;font-size:10px;line-height:1.5;color:#b0b0b0;margin-top:5px}.setting-row select{font-size:11px;border:1px solid #bfbfbf38;border-radius:6px;background:#3b3b3b;color:#e4e4e4;padding:8px}.switch{appearance:none;cursor:pointer;width:34px;height:20px;border-radius:20px;background:#646464;position:relative;flex-shrink:0}.switch:after{content:"";width:14px;height:14px;position:absolute;top:3px;left:3px;background:#fcf4df;border-radius:50%;transition:transform .2s}.switch:checked{background:#b7a275}.switch:checked:after{transform:translate(14px)}.performance-details{display:flex;gap:13px;flex-wrap:wrap;padding:15px 0;border-top:1px solid var(--line);font-size:9px;color:#b1b1b1}.performance-details b{font-weight:500}.storage-setting{border-top:1px solid var(--line);padding-top:16px}.storage-setting strong{display:block;font-weight:500;font-size:11px;margin:11px 0 6px}.storage-setting p{font-size:10px;color:#b1b1b1;line-height:1.6}.cache-status{font-size:8px;letter-spacing:.6px;color:#d4c291}.text-button{padding:3px 0;color:#d1bc91;font-size:11px;text-decoration:underline;text-underline-offset:4px}.storage-setting .text-button{margin-top:11px}.shortcut-note{color:#aaa;font-size:9px;line-height:1.8;margin-top:20px}.about-dialog p{font-size:12px;color:#bcbcbc;line-height:1.8;margin-top:17px}.about-dialog .credits{font-size:10px;border-top:1px solid var(--line);padding-top:17px}#toast{position:absolute;z-index:15;top:90px;left:50%;transform:translate(-50%);background:#303030f2;color:#f1ead8;padding:14px 20px;border:1px solid #bcbcbc4d;border-radius:10px;box-shadow:0 8px 30px #0e0e0e30;font-size:12px;max-width:min(90%,540px);width:max-content;text-align:center;line-height:1.6}.player:fullscreen{border-radius:0;width:100vw;height:100dvh}@media(max-width:640px){#studio{padding:0}.player{border-radius:0}.scene-top{top:max(18px,env(safe-area-inset-top));left:20px;right:16px;gap:10px}.brand{font-size:25px;gap:9px}.brand-symbol{transform:rotate(24deg) scale(.88);width:23px}.scene-actions{gap:6px}.glass-button{min-height:42px;padding:0 10px;gap:7px;font-size:11px}#upload-button{width:42px;padding:0}#upload-button span{display:none}#music-button>svg:first-child{display:none}#music-button>svg:last-child{margin:0;width:11px}.glass-icon{width:40px;height:42px}.transport-shell{bottom:max(20px,env(safe-area-inset-bottom));width:calc(100% - 32px)}.now-playing{padding:0 3px 16px}.track-text h1{font-size:30px}.track-text p{font-size:10px}.playback-hint{display:none}.transport{padding:8px 12px 11px;border-radius:12px}.transport-left,.transport-right{gap:4px}.transport-row{gap:6px}.icon-button{width:36px;height:38px}.primary-play{width:39px;height:39px}.timecode{font-size:10px;gap:6px}#volume{display:none}.volume-control{gap:0}.library{top:max(73px,calc(env(safe-area-inset-top) + 56px));right:16px;max-height:calc(100% - 100px);padding:18px}dialog{padding:23px}.preparation h2{font-size:32px}}@media(max-width:360px){.scene-top{left:14px;right:12px}.brand{font-size:22px;gap:6px}#music-button{padding:0 8px}#music-button>svg{display:none}.transport-shell{width:calc(100% - 24px)}#restart{display:none}}@media(max-height:500px)and (min-width:641px){#studio{padding:0}.player{border-radius:0}.scene-top{top:14px}.transport-shell{bottom:14px;width:calc(100% - 56px)}.now-playing{padding-bottom:10px}.track-text h1{font-size:25px}.track-text p{display:none}.transport{padding-top:4px;padding-bottom:6px}.waveform-wrap{height:22px;margin-bottom:3px}.library{top:68px;max-height:calc(100% - 82px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}