:root{font-family:Arial,Helvetica,sans-serif;color:#f1e9df;background:#171e21;font-synthesis:none;font-weight:400;--bg:#171e21;--panel:#1e272b;--ink:#f1e9df;--muted:#b1b9b7;--accent:#e6ae91;--line:#354044;color-scheme:dark;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}body{margin:0;min-width:375px}button,input,a{touch-action:manipulation}button,input{font:inherit}button{cursor:pointer}button,a,input{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent)}button{color:inherit;border:0}button:disabled{opacity:.55;cursor:default}button:not(:disabled):active{transform:translateY(1px)}a{color:inherit;text-decoration:none}button,a,input{-webkit-tap-highlight-color:transparent}button{transition:background .18s ease,color .18s ease}::selection{background:#e6ae91;color:#171e21}input{accent-color:var(--accent);caret-color:var(--accent)}[hidden]{display:none!important}.wrap{width:min(1320px,calc(100% - 112px));margin-inline:auto}.icon{width:22px;height:22px;flex-shrink:0;vertical-align:middle}.tiny{width:16px;height:16px}.site-header{height:100px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.brand{display:flex;align-items:center;font-size:22px;letter-spacing:-.8px;font-weight:600;gap:10px;min-height:44px}.brand-mark{color:var(--accent);display:flex;align-items:center;margin-right:3px}.brand-mark .icon{width:30px;height:30px;stroke-width:1.4}.brand-period{color:var(--accent);margin-left:-9px}.site-header nav{display:flex;align-items:center;gap:17px}.nav-button{display:flex;align-items:center;gap:8px;min-height:44px;background:transparent;color:#c8cfcb;font-size:12px;padding:0 6px}.nav-button:hover{color:var(--accent)}.nav-button .icon{width:17px;height:17px}.nav-rule{height:17px;width:1px;background:var(--line)}.saved-count{font-size:10px;border-radius:20px;background:#39413e;padding:3px 6px;color:var(--accent)}.scene{height:370px;position:relative;isolation:isolate;overflow:hidden}.scene canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.scene-content{display:flex;justify-content:space-between;padding-top:15px}.intro h1{font:400 68px/1.04 Georgia,Times New Roman,serif;letter-spacing:-2px;margin:0 0 19px;max-width:600px}.intro h1 em{color:#e6ae91;font-weight:400}.intro p{font-size:13px;color:var(--muted);margin:0;letter-spacing:.1px}.transport{width:290px;align-self:flex-start;margin-top:22px}.mix-caption{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#d2c2b4;margin-bottom:17px;letter-spacing:.3px}.status-dot{width:5px;height:5px;border-radius:50%;background:#9ca9a0}.is-playing .status-dot{background:#e6ae91}.play-button{height:58px;border-radius:32px;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;background:#e6ae91;color:#282c2a;font-size:13px;font-weight:600;box-shadow:0 6px 24px #070f122e}.play-button:hover{background:#f1bea2}.play-button .icon{width:21px;height:21px}.master-control{display:flex;align-items:center;gap:13px;margin:22px auto 0;width:240px;color:var(--muted)}.master-control label{display:flex;align-items:center}.master-control .icon{width:17px;height:17px}.master-control input{width:100%;flex:1;min-width:0}.master-control output{font-size:11px;min-width:30px;font-variant-numeric:tabular-nums;text-align:right;color:#c9c7bb}.play-status{text-align:center;font-size:10px;color:var(--muted);line-height:1.6;margin:13px 0 0}.scene-foot{position:absolute;bottom:26px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;color:#b3b6aa;font-size:10px;letter-spacing:.4px}.scene-foot>span:first-child{display:flex;align-items:center;gap:7px}.scene-foot i{display:inline-block;width:4px;height:4px;background:#bd9e85;border-radius:50%}.scene-foot>span:last-child{color:#a3ada7}.studio{padding-top:18px}.studio-top{display:flex;justify-content:space-between;align-items:center;gap:16px}.studio-top h2{font:400 27px/1.2 Georgia,serif;letter-spacing:-.5px;margin:0 0 9px}.studio-top p{font-size:12px;color:var(--muted);margin:0}.timer-button{height:44px;display:flex;align-items:center;gap:10px;padding:0 15px;border:1px solid #414b4b;background:transparent;border-radius:8px;font-size:11px;color:#d2d5cb;white-space:nowrap;font-variant-numeric:tabular-nums}.timer-button .icon:first-child{width:16px;height:16px;color:#d6c6ad}.timer-button .tiny{width:12px;height:12px;margin-left:4px}.timer-button:hover,.timer-active{background:#313733;color:var(--accent);border-color:#82715f}.preset-row{display:flex;align-items:center;gap:20px;margin-top:24px;border-bottom:1px solid #303a3d;padding-bottom:23px;justify-content:space-between}.presets{display:flex;gap:8px;flex-wrap:wrap}.preset{border:1px solid #374145;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 15px;background:transparent;border-radius:7px;height:44px;font-size:11px;color:#bfc5bf;white-space:nowrap}.preset .icon{width:18px;height:18px;color:#b4bbb2}.preset:hover{background:#293130}.preset[aria-pressed=true]{background:#37332e;border-color:#7c6756;color:#edc4a7}.preset[aria-pressed=true] .icon{color:#e6ae91}.save-button{display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;color:#d4c3b0;font-size:11px;min-height:44px;padding:0 4px;white-space:nowrap}.save-button:hover{color:#f4d0b2}.save-button .icon{width:16px;height:16px}.layer-guide{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:17px 0 15px;color:var(--muted);font-size:10px}.layer-guide p{display:flex;gap:7px;align-items:center;margin:0}.layer-guide .icon{width:14px;height:14px;color:#b9c1b9}.layer-guide button{color:#c9c6b8;background:transparent;font-size:10px;padding:8px 0 8px 12px;min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#59605b}.layers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.layer{background:#1e272b;border-radius:12px;padding:17px 15px 12px;min-width:0}.layer-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.layer-icon{color:var(--layer)}.layer-icon>.icon{width:24px;height:24px}.layer-switch{padding:0;width:44px;height:44px;margin:-10px -8px -10px 0;background:transparent;border-radius:20px;position:relative;flex-shrink:0;isolation:isolate}.layer-switch:after{content:"";position:absolute;left:8px;top:14px;width:28px;height:16px;background:#657665;border-radius:20px}.layer-switch span{position:absolute;left:22px;top:18px;z-index:1;width:8px;height:8px;border-radius:50%;background:#e5e3d7;transition:left .18s ease}.layer-switch[aria-checked=false]:after{background:#454e51}.layer-switch[aria-checked=false] span{left:12px;background:#9aa39f}.layer h3{font-weight:500;font-size:13px;letter-spacing:.05px;margin:0 0 6px}.layer-note{font-size:9px;color:#b1b9b7;margin:0 0 17px;white-space:nowrap}.xy-pad{height:118px;border:1px solid #374246;border-radius:7px;background:#192125;position:relative;touch-action:none;margin:0 6px}.pad-hline,.pad-vline{position:absolute;pointer-events:none;background:#303a3d}.pad-hline{height:1px;width:100%;left:0;top:50%}.pad-vline{width:1px;height:100%;left:50%;top:0}.pad-orbit{position:absolute;width:57px;height:57px;border:1px solid #303a3d;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.pad-trail{position:absolute;pointer-events:none;inset:0;border-radius:7px;background:radial-gradient(ellipse at var(--point-x) var(--point-y),color-mix(in srgb,var(--layer) 10%,transparent),transparent 70%)}.pad-dot{position:absolute;width:14px;height:14px;background:var(--layer);border:3px solid #a0a49133;border-radius:50%;transform:translate(-50%,-50%);padding:0;box-shadow:0 2px 8px #0005;z-index:2;touch-action:none}.pad-dot:after{content:"";position:absolute;inset:-15px;border-radius:50%}.pad-dot:active:not(:disabled){transform:translate(-50%,-50%)}.pad-dot:focus-visible{outline:2px solid var(--layer);outline-offset:7px}.pad-loud,.pad-quiet{position:absolute;left:7px;font-size:10px;color:#8a9797;pointer-events:none}.pad-loud{top:5px}.pad-quiet{bottom:4px}.pad-axis{display:flex;justify-content:space-between;font-size:8px;color:#a5afac;margin:8px 5px 0}.layer-bottom{margin-top:16px;display:flex;justify-content:space-between;align-items:center;font-size:9px}.layer-state{color:var(--layer);display:flex;gap:5px;align-items:center}.layer-state:before{content:"";width:3px;height:3px;border-radius:50%;background:var(--layer)}.layer-level{color:#b5bdb5;font-variant-numeric:tabular-nums}.is-muted .layer-state{color:#a6b0ad}.is-muted .layer-state:before{background:#818f89}.is-muted .pad-dot{background:#9ba5a1}.is-muted .pad-trail{opacity:.2}.is-muted .layer-icon{opacity:.7}.slider-controls{height:138px;padding:0 3px}.slider-controls label{font-size:10px;color:#bfc6bf;display:flex;justify-content:space-between}.slider-controls input{width:100%;margin:9px 0 15px;accent-color:var(--layer)}.slider-controls output{color:var(--layer);font-variant-numeric:tabular-nums}.mixer-foot{display:flex;align-items:center;justify-content:space-between;margin-top:20px;color:#aeb7af;font-size:10px}.mixer-foot>span{display:flex;gap:8px;align-items:center}.mixer-foot .icon{width:17px;height:17px;color:#b8b5a1}.mixer-foot button{background:transparent;color:#b1b9b7;font-size:10px;min-height:44px;padding:8px 0 8px 10px}.mixer-foot button:hover{color:var(--accent)}.site-footer{display:flex;justify-content:space-between;padding:27px 0 28px;gap:16px;border-top:1px solid #303a3d;margin-top:26px;font-size:10px;color:#a4ada5}.site-footer p{margin:0;color:#b3b9ac}.site-footer>span{font-size:9px;color:#a3ada7}input[type=range]{appearance:none;height:44px;margin-block:0;background:transparent;cursor:pointer;touch-action:pan-y}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:#53605d}input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:#53605d}input[type=range]::-webkit-slider-thumb{appearance:none;border:0;height:10px;width:10px;border-radius:50%;background:var(--accent);margin-top:-3.5px}input[type=range]::-moz-range-thumb{border:0;height:10px;width:10px;border-radius:50%;background:var(--accent)}.slider-controls input[type=range]{height:44px;margin-top:0;margin-bottom:4px}.slider-controls input::-webkit-slider-thumb{background:var(--layer)}.slider-controls input::-moz-range-thumb{background:var(--layer)}dialog{background:#222c2f;color:var(--ink);border:1px solid #46514f;border-radius:16px;width:min(470px,calc(100% - 32px));padding:28px;box-shadow:0 20px 100px #0006;max-height:calc(100dvh - 40px);overflow-y:auto}dialog::backdrop{background:#0a1215c9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}.dialog-heading h2{font:400 25px/1.2 Georgia,serif;letter-spacing:-.6px;margin:0}.close-button{display:grid;place-items:center;width:44px;height:44px;background:transparent;color:#c1c6ba;flex-shrink:0}.close-button:hover{color:var(--accent);background:#38423e;border-radius:50%}.close-button .icon{width:19px;height:19px}.dialog-description,.about-lines p{color:#c0c6bd;font-size:13px;line-height:1.8;margin:0 0 22px}.about-lines p{margin-bottom:15px}.help-note{display:flex;align-items:flex-start;gap:10px;border-top:1px solid #45504c;margin:22px 0;padding-top:19px}.help-note>.icon{width:17px;height:17px;margin-top:2px;color:var(--accent)}.help-note p{color:#b8c1b7;font-size:11px;line-height:1.8;margin:0}.primary-button{height:47px;background:var(--accent);color:#282c2a;display:flex;gap:9px;align-items:center;justify-content:center;width:100%;border-radius:7px;font-size:12px;font-weight:600}.primary-button:hover{background:#f1bea2}.primary-button .icon{width:17px;height:17px}.secondary-button{height:44px;display:block;margin:10px auto 0;background:transparent;color:#c7c9b9;font-size:12px}.timer-options{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:25px 0}.timer-options button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:18px;min-height:69px;justify-content:center;border:1px solid #4c5854;border-radius:7px;background:transparent;color:#d3d6c7;font-variant-numeric:tabular-nums}.timer-options button span{font-size:10px;color:#b7bfb3}.timer-options button[aria-pressed=true]{background:#493f35;border-color:#b48b6e;color:#f2c6a7}.timer-options button[aria-pressed=true] span{color:#d8b99d}.field-label{font-size:11px;display:block;color:#c1c8bd;margin-bottom:10px}.custom-time{display:flex;align-items:center;gap:12px;font-size:12px;color:#b7c2b4}.custom-time input,.text-input{border-radius:6px;padding:12px;background:#192225;border:1px solid #53615a;color:var(--ink);font-size:14px}.custom-time input{width:100px;min-height:44px}.field-error{font-size:11px;color:#f2b198;min-height:17px;margin:10px 0 12px}.text-input{width:100%;min-height:46px}.text-input::placeholder{color:#a8b1a5}.empty-mixes{font-size:13px;line-height:1.9;color:#c1c8bc;margin:26px 0 32px}.storage-note{border-top:1px solid #46514b;padding-top:16px;color:#afb9aa;font-size:10px;line-height:1.7;margin-bottom:0}.saved-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid #3c4945;padding:7px 0}.saved-load{background:transparent;display:flex;align-items:center;gap:12px;min-height:49px;padding:4px;flex:1;min-width:0;color:#dac8b2;text-align:left;font-size:13px}.saved-load>span{flex:1;overflow-wrap:anywhere}.saved-load>.icon{width:17px;height:17px}.delete-mix{width:44px;height:44px;background:transparent;color:#b1bcb0}.delete-mix .icon{width:17px;height:17px}.delete-mix:hover{color:#f1b393}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%);border-radius:9px;background:#e4c2a9;color:#252e2c;padding:15px 22px;font-size:12px;box-shadow:0 8px 35px #0004;z-index:5;max-width:calc(100% - 32px);width:max-content;text-align:center;line-height:1.6;pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}*{scrollbar-width:thin;scrollbar-color:#58635b #192225}@media(min-width:1600px){.scene{height:420px}.scene-content{padding-top:24px}.scene-foot{bottom:34px}.intro h1{font-size:76px}.transport{margin-top:35px}.xy-pad{height:140px}.layer{padding:21px 18px 15px}.layer-note{font-size:10px}.layer h3{font-size:14px}.layer-bottom{margin-top:19px}.studio{padding-top:23px}.preset-row{margin-top:27px}.layer-guide{margin-block:20px}}@media(max-width:1190px){.wrap{width:calc(100% - 72px)}.layers{gap:10px}.layer{padding:16px 11px 12px}.layer-note{font-size:8px}.layer h3{font-size:12px}.xy-pad{height:111px;margin:0 4px}.preset{padding-inline:12px}.intro h1{font-size:64px}}@media(max-width:1000px){.layers{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.layer{padding:19px 19px 14px}.layer-note{font-size:10px}.layer h3{font-size:14px}.xy-pad{height:136px}.layer-bottom{font-size:10px}.pad-axis{font-size:9px}.preset-row{gap:10px}.preset{padding-inline:10px;font-size:10px}.presets{gap:6px}.intro h1{font-size:57px}.transport{width:260px}.scene{height:350px}.layer-guide,.layer-guide button{font-size:11px}.slider-controls{height:156px}}@media(max-width:720px){.wrap{width:calc(100% - 40px)}.site-header{height:78px}.brand{font-size:20px}.brand-mark .icon{width:26px;height:26px}.site-header nav{gap:9px}.nav-button{font-size:11px;gap:6px}.nav-button .icon{width:16px;height:16px}.nav-rule{height:14px}.scene{height:454px}.scene-content{padding-top:12px;display:block}.intro h1{font-size:49px;line-height:1.04;letter-spacing:-1.7px}.intro p{font-size:11px;max-width:250px;line-height:1.6;margin-top:13px}.intro h1{margin-bottom:0}.transport{margin:35px 0 0;width:244px}.mix-caption{justify-content:flex-start;margin-bottom:12px;font-size:10px;gap:6px}.play-button{height:49px;font-size:11px;gap:8px}.play-button .icon{width:17px;height:17px}.master-control{width:210px;margin-top:14px;gap:10px}.play-status{font-size:9px;max-width:244px;margin-top:8px}.scene-foot{bottom:19px;font-size:8px}.scene-foot>span:last-child{font-size:8px}.studio{padding-top:16px}.studio-top{align-items:flex-start}.studio-top h2{font-size:24px;margin-bottom:8px}.studio-top p{font-size:10px;max-width:220px;line-height:1.6}.timer-button{font-size:10px;padding-inline:10px;height:44px;gap:6px;margin-top:3px}.timer-button .tiny{display:none}.timer-button .icon:first-child{width:14px;height:14px}.preset-row{margin-top:20px;align-items:stretch;position:relative;display:block;padding-bottom:17px}.presets{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}.preset{font-size:11px;height:44px;padding-inline:10px;gap:7px;justify-content:flex-start}.save-button{font-size:10px;margin:11px 0 -4px auto;min-height:44px;padding:0 3px}.layer-guide{font-size:10px;margin:7px 0 12px;align-items:center}.guide-secondary{display:none}.layer-guide .icon{width:13px;height:13px}.layer-guide button{min-height:44px;font-size:10px}.layers{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.layer{padding:17px 14px 13px}.layer h3{font-size:13px}.layer-note{font-size:8.5px;margin-bottom:16px}.layer-heading{margin-bottom:12px}.xy-pad{height:126px;margin:0 5px}.pad-axis{font-size:8px}.layer-bottom{margin-top:16px;font-size:9px}.layer-switch{width:44px}.mixer-foot{font-size:9px;gap:10px;margin-top:13px}.mixer-foot button{font-size:9px}.mixer-foot .icon{width:15px;height:15px}.site-footer{display:block;margin-top:20px;padding:22px 0 24px;text-align:center;font-size:10px}.site-footer>span{display:block;margin-top:9px;font-size:9px}.slider-controls{height:146px}dialog{padding:23px}.dialog-heading h2{font-size:23px}.toast{bottom:16px;font-size:11px;padding:13px 17px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}