:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#e6e7e8;background:#18191b;font-synthesis:none;--bg:#18191b;--panel:#202124;--line:#37393d;--muted:#a8abb1;--accent:#e7b56b;--range:50%;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{color:inherit;background:none;border:0;cursor:pointer}button:disabled{opacity:.4;cursor:default}button,a,input{outline-offset:4px;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent)}a{color:inherit}svg{flex-shrink:0;vertical-align:middle}::selection{background:var(--accent);color:#17181a}h1,h2,h3,p{margin:0}button,a{touch-action:manipulation}.app-header,main,footer{max-width:1440px;margin:auto;padding-left:40px;padding-right:40px}.app-header{height:76px;display:flex;align-items:center;gap:26px}.brand{font-size:32px;font-weight:750;letter-spacing:-1.8px;text-decoration:none;line-height:1}.brand span{color:var(--accent)}.app-purpose{font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:24px}.app-header nav{display:flex;align-items:stretch;gap:22px;margin-left:auto;height:100%}.app-header nav button{border-bottom:2px solid transparent;font-size:13px;padding:0 2px;color:var(--muted);display:flex;align-items:center;gap:8px}.app-header nav button[aria-current=page]{color:#f2f2f3;border-bottom-color:var(--accent)}.app-header nav span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.icon-button{width:44px;height:44px;display:inline-grid;place-items:center;padding:0;color:var(--muted);flex-shrink:0}.icon-button:hover{color:#fff;background:#ffffff08}.transport{display:flex;align-items:center;gap:24px;background:#222326;border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:64px;padding:0 max(40px,calc((100vw - 1360px)/2));position:sticky;top:0;z-index:5}.playback-status{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);min-width:160px;font-variant-numeric:tabular-nums}.playback-status>span{width:6px;height:6px;background:#767980;border-radius:50%}.playback-status.playing{color:#eee}.playback-status.playing>span{background:var(--accent)}.master-volume{display:flex;gap:12px;align-items:center;margin-left:auto;font-size:12px;color:var(--muted)}.master-volume input{width:150px}.master-volume output{width:37px;text-align:right;color:#e6e7e8;font-size:11px;font-variant-numeric:tabular-nums}.stop-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:38px;padding:8px 14px;border:1px solid #626064;border-radius:3px;font-size:12px;background:#2b2c2f;white-space:nowrap}.stop-button:hover{border-color:#c6a28e;color:#ffd5c2}.mobile-mix-button{display:none}main{padding-top:32px;padding-bottom:44px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.section-heading h1,.section-heading h2{font-size:16px;line-height:1.4;font-weight:600;letter-spacing:-.25px}.section-heading>span{font-size:11px;color:var(--muted)}.presets{padding-bottom:30px;border-bottom:1px solid var(--line)}.preset-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}.preset{display:flex;align-items:center;gap:11px;padding:17px 14px;text-align:left;background:var(--panel);min-width:0;min-height:79px;border-left:2px solid transparent}.preset:hover{background:#2b2c2f}.preset.active{background:#302b23;border-left-color:var(--accent)}.preset-number{color:#8c8e95;font-size:10px;align-self:flex-start;line-height:20px;font-variant-numeric:tabular-nums}.preset-content{min-width:0;flex:1}.preset-content strong{font-size:12px;font-weight:550;display:block;line-height:1.5}.preset-content small{font-size:10px;color:var(--muted);display:block;line-height:1.5;margin-top:4px}.preset-layers{font-size:9px;color:#a8abb1;white-space:nowrap;display:none}.preset-action{color:var(--accent);margin-left:auto;padding-left:4px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;padding-top:30px}.library{min-width:0}.search{display:flex;align-items:center;gap:12px;min-height:46px;background:#202124;border:1px solid #484a4f;border-radius:3px;padding:0 13px;color:var(--muted)}.search:focus-within{border-color:var(--accent)}.search input{background:none;border:0;outline:none;color:#eee;flex:1;min-width:0;font-size:13px;height:44px}.search input::placeholder{color:#a8abb1}.search .icon-button{height:42px;width:30px}.search kbd{font-family:inherit;font-size:11px;border:1px solid #55575c;border-radius:2px;padding:1px 6px;color:#b8bbc1}.categories{display:flex;flex-wrap:wrap;column-gap:19px;row-gap:0;margin:14px 0 21px;border-bottom:1px solid var(--line)}.categories button{padding:13px 0;min-height:44px;font-size:12px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}.categories button[aria-pressed=true]{color:var(--accent);border-bottom-color:var(--accent)}.categories button:hover{color:#eee}.list-heading{display:flex;justify-content:space-between;padding:0 58px 10px 57px;font-size:9px;letter-spacing:1px;color:#a0a3aa}.sound-list{border-top:1px solid var(--line)}.sound-row{display:flex;gap:13px;align-items:center;min-height:79px;border-bottom:1px solid var(--line);padding:7px 0;border-left:2px solid transparent}.sound-row:hover{background:#ffffff03}.sound-row.selected{border-left-color:#77716a}.sound-row.playing{border-left-color:var(--accent);background:#e7b56b06}.sound-play{width:44px;height:44px;display:grid;place-items:center;color:#c4c7cd;flex-shrink:0;border-radius:3px}.sound-play:hover{background:#383a3f;color:#fff}.sound-row.playing .sound-play{color:var(--accent)}.sound-name{flex:1;min-width:0}.sound-name h3{font-size:13px;font-weight:500;line-height:1.5}.sound-name p{font-size:11px;color:var(--muted);line-height:1.6;margin-top:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sound-state{font-size:10px;color:var(--accent);white-space:nowrap}.sound-type{font-size:10px;color:#c3c5ca;width:77px;line-height:1.5;flex-shrink:0}.sound-type small{font-size:9px;display:block;color:#92969e;margin-top:2px}.sound-info{width:44px}.mixer{position:sticky;top:94px;background:#222326;border:1px solid #424449;border-radius:4px;max-height:calc(100dvh - 116px);overflow:auto;scrollbar-width:thin}.mixer-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}.mixer-heading h2{font-size:15px;font-weight:600}.mixer-heading>span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.mobile-close{display:none}.mix-title{padding:21px 20px 9px}.mix-title strong{display:block;font-size:13px;font-weight:500;line-height:1.5;overflow-wrap:anywhere}.mix-title>span{display:block;font-size:10px;color:var(--muted);margin-top:5px}.mix-layers{padding:0 20px}.mix-layer{padding:10px 0 18px;border-bottom:1px solid var(--line)}.mix-layer:last-child{border-bottom:0}.layer-heading{display:flex;gap:8px;align-items:center;min-height:40px}.layer-heading>span{font-size:12px;line-height:1.5;flex:1}.layer-toggle{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;color:#b0b3ba}.mix-layer.playing .layer-toggle{color:var(--accent)}.remove-layer{width:44px;height:44px}.layer-volume{display:flex;align-items:center;gap:12px;padding:4px 4px 0 8px}.layer-volume input{flex:1;min-width:0}.layer-volume output{font-size:10px;color:#c3c5ca;font-variant-numeric:tabular-nums;width:32px;text-align:right}.mix-layer>small{font-size:10px;color:var(--muted);display:block;margin:8px 0 0 8px;line-height:1.6}.mix-layer>small.layer-error{color:#f0b39a}.mix-actions{padding:20px;border-top:1px solid var(--line);display:grid;gap:9px}.mix-actions>p{font-size:10px;text-align:center;color:var(--muted);margin-top:3px;line-height:1.5}.primary-button,.secondary-button,.danger-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;font-size:12px;line-height:1.4;padding:10px 14px;border-radius:3px;border:1px solid transparent}.primary-button{background:var(--accent);color:#211b13;font-weight:600}.primary-button:hover:not(:disabled){background:#f0c78a}.secondary-button{background:#2a2b2e;border-color:#55575e;color:#e0e2e7}.secondary-button:hover{background:#34363a}.danger-button{background:#b85c46;color:#fff;border-color:#b85c46}.empty-mix{padding:25px 2px 30px}.empty-mix p{font-size:13px;margin-bottom:8px}.empty-mix span{font-size:12px;color:var(--muted);line-height:1.7;display:block}.preparing{display:flex;gap:8px;align-items:center;color:var(--accent);font-size:11px;padding:14px 20px 4px}.preparing button{margin-left:auto;font-size:11px;text-decoration:underline}.resume{display:flex;margin:0 20px 20px;width:calc(100% - 40px)}input[type=range]{appearance:none;width:100%;height:24px;margin:0;padding:0;border:0;cursor:pointer;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:1px;background:linear-gradient(to right,var(--accent) var(--range),#5b5e65 var(--range))}input[type=range]::-moz-range-track{height:3px;border-radius:1px;background:linear-gradient(to right,var(--accent) var(--range),#5b5e65 var(--range))}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:16px;border-radius:2px;background:#e5e6e8;border:1px solid #c4c6cc;margin-top:-6.5px}input[type=range]::-moz-range-thumb{width:12px;height:16px;border-radius:2px;background:#e5e6e8;border:1px solid #c4c6cc}.empty-state{padding:42px 12px;line-height:1.8}.empty-state h3{font-size:15px;font-weight:500}.empty-state p{font-size:12px;color:var(--muted);margin:7px 0 18px}.saved-tools{font-size:12px;color:var(--muted);line-height:1.8;padding:2px 0 24px}.saved-tools>div{display:flex;gap:8px;margin-top:16px}.import-button{cursor:pointer}.import-button input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.import-button:focus-within{outline:2px solid var(--accent);outline-offset:3px}.saved-list article{display:flex;align-items:center;border-bottom:1px solid var(--line);gap:10px}.saved-load{flex:1;min-width:0;display:flex;align-items:center;gap:17px;text-align:left;padding:18px 6px}.saved-load>span:first-child{color:var(--accent)}.saved-load strong{display:block;font-size:13px;font-weight:500;overflow-wrap:anywhere}.saved-load small{display:block;font-size:11px;color:var(--muted);margin-top:6px}.warning{padding:14px 16px;border:1px solid #897650;background:#342e23;color:#e9d2a8;font-size:12px;line-height:1.8;margin-bottom:24px}.warning button{text-decoration:underline;padding:4px 8px}footer{display:flex;align-items:center;gap:24px;min-height:76px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}footer>span{font-weight:600}footer>div{margin-left:auto;display:flex;gap:24px}footer button,footer a{font-size:11px;color:var(--muted);text-decoration:none;padding:12px 0}footer button:hover,footer a:hover{color:#fff}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%);display:none;align-items:center;gap:14px;background:#e5e2da;color:#252525;box-shadow:0 4px 20px #0004;max-width:min(580px,calc(100vw - 32px));width:max-content;border:1px solid #f2ede4;border-radius:3px;padding:5px 9px 5px 17px;z-index:25;font-size:12px;line-height:1.7}.toast.visible{display:flex}.toast .icon-button{color:#3c3c3c}.modal{background:#222326;border:1px solid #62656c;color:#e6e7e8;padding:25px;border-radius:5px;width:min(560px,calc(100vw - 28px));max-height:85dvh;box-shadow:0 12px 60px #0006}.modal::backdrop{background:#090a0bcc}.modal-header{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-bottom:19px}.modal-header h2{font-size:20px;font-weight:550;letter-spacing:-.5px}.modal-header>button{height:38px;width:38px;display:grid;place-items:center;color:var(--muted)}.modal p{font-size:12px;color:#bdc0c6;line-height:1.9;margin:10px 0 16px}.modal a{color:var(--accent)}.modal .modal-detail{font-size:11px;color:var(--muted);margin:17px 0}.field-label{display:block;font-size:12px;margin:20px 0 9px}.name-input{width:100%;background:#18191b;color:#eee;border:1px solid #62656c;padding:12px;border-radius:3px;font-size:13px;min-height:44px}.modal form>.primary-button{width:100%}.help-list{font-size:13px;line-height:1.9;color:#d3d5d9;padding-left:23px}.help-list li{padding-left:4px;margin-bottom:12px}.credit-list{max-height:45dvh;overflow:auto;padding-right:12px}.credit-list article{border-bottom:1px solid var(--line);padding:15px 0}.credit-list h3{font-size:13px;font-weight:550}.credit-list p{font-size:11px;margin:6px 0}.credit-list small{display:block;font-size:11px;color:var(--muted);line-height:1.7}.credit-list article>a{display:inline-flex;align-items:center;gap:5px;font-size:11px;margin-top:8px}.spin{animation:spin 1.4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:1500px){.preset-layers{display:block}}@media(max-width:1100px){.app-header,main,footer{padding-left:24px;padding-right:24px}.transport{padding-left:24px;padding-right:24px}.workspace{grid-template-columns:minmax(0,1fr) 300px;gap:26px}.preset-list{grid-template-columns:repeat(3,minmax(0,1fr))}.preset{padding:15px 12px}.sound-state{display:none}.app-purpose{font-size:11px}.categories{column-gap:16px}.sound-row{gap:9px}.mixer-heading,.mix-title,.mix-actions,.mix-layers{padding-left:16px;padding-right:16px}}@media(max-width:760px){.app-header,main,footer{padding-left:18px;padding-right:18px}.app-header{height:67px;gap:18px}.brand{font-size:29px}.app-purpose{display:none}.app-header nav{gap:18px}.app-header nav button{font-size:12px}.app-header>.icon-button{width:44px}.transport{position:fixed;inset:auto 0 0;min-height:108px;height:auto;padding:11px 18px max(13px,env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px 13px;z-index:15;box-shadow:0 -3px 16px #0003}.playback-status{font-size:10px;min-width:0;grid-column:1;grid-row:1;gap:6px}.playback-status>span{width:5px;height:5px}.master-volume{grid-column:1;grid-row:2;margin:0;gap:9px;width:100%}.master-volume>span{display:none}.master-volume>svg{width:16px}.master-volume input{width:auto;min-width:0;flex:1;height:32px}.master-volume output{font-size:10px;width:30px}.mobile-mix-button{display:flex;align-items:center;justify-content:center;gap:7px;grid-column:2;grid-row:1/3;font-size:11px;min-height:46px;padding:9px;border:1px solid #55575e;border-radius:3px}.mobile-mix-button[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}.mobile-mix-button>span{font-size:10px}.stop-button{grid-column:3;grid-row:1/3;min-height:46px;font-size:11px;gap:6px;padding:8px 11px}.stop-button>svg{width:11px}main{padding-top:24px;padding-bottom:28px}.presets{padding-bottom:24px}.section-heading>span{font-size:10px;text-align:right;line-height:1.6;max-width:190px}.section-heading h1,.section-heading h2{font-size:16px}.preset-list{grid-template-columns:repeat(2,minmax(0,1fr))}.preset{min-height:78px;padding:12px 10px;gap:7px}.preset-number{font-size:9px;line-height:18px}.preset-content strong{font-size:11px}.preset-content small{font-size:9px;line-height:1.6}.preset-action{padding-left:1px}.preset-action>svg{width:14px}.workspace{display:block;padding-top:26px}.mixer{display:none}.mixer.mobile-open{display:block;position:fixed;z-index:12;inset:auto 12px 108px;max-height:calc(100dvh - 190px);border-color:#74716a;box-shadow:0 -12px 80px #0008}.mixer-heading{position:sticky;top:0;background:#222326;z-index:1;padding:9px 16px}.mixer-heading>span{margin-left:auto}.mobile-close{display:inline-grid;width:38px;height:38px}.mix-title{padding-top:16px}.mix-layers{padding-left:16px;padding-right:16px}.layer-toggle,.remove-layer{width:44px;height:44px}.layer-heading>span{font-size:13px}.layer-volume{padding-left:12px;padding-right:10px}.layer-volume input{height:32px}.layer-volume output{font-size:11px}.mix-layer{padding-top:5px;padding-bottom:13px}.mix-actions{padding-top:15px;padding-bottom:15px}.primary-button,.secondary-button,.danger-button{min-height:44px}.categories{column-gap:19px;margin-top:12px;margin-bottom:15px}.categories button{font-size:12px}.list-heading{padding-left:55px;padding-right:45px;font-size:8px}.sound-row{min-height:78px;gap:9px}.sound-name h3{font-size:12px}.sound-name p{font-size:10px;max-width:100%;line-height:1.7}.sound-type{font-size:9px;width:59px}.sound-type small{font-size:8px}.sound-info,.sound-play{width:44px}.search input{font-size:12px}.search kbd{display:none}.search{padding-left:12px}.search>svg{width:16px}.toast{bottom:121px;z-index:30;font-size:11px;max-width:calc(100vw - 24px)}footer{margin-bottom:110px;gap:15px;min-height:70px;font-size:10px}footer>div{gap:17px}footer button,footer a{font-size:10px}.modal{padding:20px}.modal-header h2{font-size:19px}.saved-tools{font-size:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
