:root{--bg: #05080d;--panel: #0b1119;--panel-2: #101823;--line: #1c2735;--text: #d7e0ea;--muted: #7d8da0;--accent: #8dd8d4;--accent-2: #ffc98a;--danger: #ff8a8a;--radius: 14px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}body{min-height:100vh;background:radial-gradient(1200px 600px at 70% -10%,rgba(80,140,180,.12),transparent 60%),radial-gradient(900px 500px at 0% 0%,rgba(255,180,120,.06),transparent 60%),var(--bg)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}h2{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.btn{appearance:none;border:1px solid var(--line);background:var(--panel-2);color:var(--text);padding:8px 14px;border-radius:999px;font:inherit;font-weight:550;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}.btn:hover{border-color:#2c3d52;background:#152030}.btn:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn.primary{background:var(--accent);border-color:var(--accent);color:#032;min-width:84px}.btn.primary:hover{background:#aeeeea}.btn.ghost{background:transparent}.btn.small{padding:5px 11px;font-size:12px}.btn.recording{border-color:var(--danger);color:var(--danger)}.btn.recording:before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--danger);animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.3}}.icon-btn{appearance:none;border:0;background:transparent;color:var(--muted);cursor:pointer;font:inherit;padding:4px 6px;border-radius:8px}.icon-btn:hover{color:var(--text);background:var(--panel-2)}.icon-btn.on{color:var(--accent-2)}select{appearance:none;background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237d8da0'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:6px 28px 6px 10px;font:inherit;cursor:pointer;min-width:0}input[type=range]{appearance:none;width:100%;height:18px;background:transparent;margin:0;cursor:pointer;--fill: 50%}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--fill),#223041 var(--fill))}input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--fill),#223041 var(--fill))}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#e8f4f4;border:0;box-shadow:0 0 0 3px #8dd8d433}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#e8f4f4;border:0}.top{display:flex;align-items:center;gap:18px;padding:14px 22px;flex-wrap:wrap}.brand{font-size:20px;font-weight:250;letter-spacing:.08em}.brand span{color:var(--accent);font-weight:500}.transport,.tools{display:flex;gap:8px;align-items:center}.transport{flex:1}.preset select{max-width:200px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"viewer globals" "layers layers" "samples samples";gap:16px;padding:0 22px 32px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}.globals{grid-area:globals;display:flex;flex-direction:column;gap:4px}.globals h2:not(:first-child){margin-top:14px}.viewer{grid-area:viewer;position:relative;aspect-ratio:16 / 9;max-height:62vh;width:100%;border-radius:var(--radius);overflow:hidden;background:#000;border:1px solid var(--line);isolation:isolate}.visual-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:none;user-select:none}.viewer-status{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:13px;text-align:center;padding:20px;pointer-events:none}.viewer-info{position:absolute;top:14px;left:16px;pointer-events:none;text-shadow:0 1px 8px #000}.patch-name{font-size:18px;font-weight:300;letter-spacing:.06em}.chord-name{font-size:12px;color:#a9bdcc;letter-spacing:.08em;margin-top:2px;min-height:1em;transition:opacity 1s}.intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;transition:opacity 1.5s;text-shadow:0 2px 12px #000}.intro p{margin:0;color:#9ab;font-size:13px}.intro .btn{pointer-events:auto}.intro.hidden{opacity:0}.intro.hidden .btn{pointer-events:none}.btn.start{font-size:16px;padding:12px 28px;background:var(--accent);border-color:var(--accent);color:#032;box-shadow:0 6px 40px #8dd8d440}.btn.start:hover{background:#aeeeea}.viewer-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:10px 12px;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);transition:opacity .6s}.viewer-bar .btn{background:#101823b3;backdrop-filter:blur(6px)}.viewer-bar .spacer{flex:1}.hint{color:#c8d7e68c;font-size:11px}.power{display:inline-flex;align-items:center;gap:6px}.power svg{width:13px;height:13px}.power[aria-pressed=false] svg{color:var(--accent)}.viewer.dark #viewer-hint{visibility:hidden}.viewer.dark .viewer-status{place-items:end center;padding-bottom:64px}#fs-play,#fs-dice{display:none}.viewer:fullscreen,.viewer.immersive{max-height:none;aspect-ratio:auto;border:0;border-radius:0}.viewer.immersive{position:fixed;inset:0;z-index:100;width:100vw;height:100dvh}.viewer:fullscreen #fs-play,.viewer:fullscreen #fs-dice,.viewer.immersive #fs-play,.viewer.immersive #fs-dice{display:inline-block}.viewer:fullscreen .patch-name,.viewer.immersive .patch-name{font-size:26px}.viewer.idle .viewer-bar,.viewer.idle .viewer-info{opacity:0}.viewer.idle{cursor:none}.viewer-info{transition:opacity 1.2s}.controls{display:grid;gap:10px}.control{display:grid;gap:4px}.control-head{display:flex;justify-content:space-between;font-size:12px;color:#b4c2d0}.control-head output{color:var(--muted);font-variant-numeric:tabular-nums}.control.choice{grid-template-columns:1fr auto;align-items:center}.control.choice select{min-width:140px}.control.toggle{grid-template-columns:1fr auto;align-items:center;font-size:12px;color:#b4c2d0}.switch{position:relative;width:34px;height:20px}.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}.switch span{position:absolute;inset:0;border-radius:10px;background:#223041;transition:background .2s;pointer-events:none}.switch span:after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#cfe;transition:transform .2s}.switch input:checked+span{background:var(--accent)}.switch input:checked+span:after{transform:translate(14px)}.row-buttons{display:flex;gap:8px;margin-top:4px}.key-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.key-chip{position:relative;appearance:none;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:9px;padding:6px 0;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .6s}.key-chip:hover{border-color:#2c3d52;color:var(--text)}.key-chip[aria-pressed=true]{background:#8dd8d424;border-color:#8dd8d480;color:var(--text)}.key-chip.now{border-color:var(--accent);box-shadow:0 0 10px #8dd8d459}.key-steps{display:grid;gap:4px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:#10182380}.key-step .control-head{justify-content:flex-start;gap:4px;font-variant-numeric:tabular-nums}.key-step.now .control-head{color:var(--accent)}.key-step.now .control-head:after{content:" · playing";color:var(--muted)}.key-chip sup{position:absolute;top:2px;right:4px;font-size:9px;line-height:1;color:var(--accent)}.layers-section{grid-area:layers}.layers-head{display:flex;align-items:center;gap:16px;margin-bottom:10px;flex-wrap:wrap}.layers-head h2{margin:0}.add-layer{display:flex;gap:6px;flex-wrap:wrap}.layers{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;align-items:start}.layer{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 16px;transition:opacity .3s}.layer.muted .controls{opacity:.45}.layer-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}.layer-title{flex:1}.layer-title strong{display:block;font-weight:600}.layer-title small{color:var(--muted);font-size:11px}.layer-dot{width:9px;height:9px;border-radius:50%;flex:none}.layer[data-kind=pad] .layer-dot{background:var(--accent-2)}.layer[data-kind=bells] .layer-dot{background:#b9a5ff}.layer[data-kind=texture] .layer-dot{background:#8fb3d9}.layer[data-kind=grains] .layer-dot{background:var(--accent)}.layer[data-kind=effects] .layer-dot{background:#e8e2c4}.layer[data-kind=sample] .layer-dot{background:#e7b77a}.samples-section{grid-area:samples;border-radius:var(--radius);transition:background .2s,outline-color .2s;outline:1px dashed transparent;outline-offset:6px}.samples-section.over{outline-color:var(--accent);background:#8dd8d40a}.sample.off .controls{opacity:.75}.sample .layer-title{min-width:0}.sample .layer-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn.play-once{flex:none}.btn:disabled{opacity:.4;cursor:default}.dropzone.big{grid-column:1 / -1;padding:26px 12px;margin:0}.dropzone.signed-out .btn{margin-left:6px}.btn.account{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dialog{background:var(--panel);color:var(--text);border:1px solid #2c3d52;border-radius:var(--radius);padding:22px 24px;width:min(380px,calc(100vw - 32px))}.dialog::backdrop{background:#03060ab3;backdrop-filter:blur(3px)}.dialog h2{margin:0 0 6px}.dialog .hint{display:block;margin:0 0 14px}.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:13px}.field input{background:#0b121b;color:var(--text);border:1px solid #2c3d52;border-radius:8px;padding:9px 10px;font:inherit}.field input:focus{outline:2px solid var(--accent);outline-offset:0}.form-error{color:#ff9d8a;font-size:13px;min-height:1em;margin:0 0 8px}.dialog .row-buttons{margin:4px 0 14px}.link{background:none;border:none;color:var(--accent);font:inherit;padding:0;cursor:pointer;text-decoration:underline}.layer-more summary{cursor:pointer;color:var(--muted);font-size:12px;margin:10px 0 8px;list-style:none}.layer-more summary:before{content:"+ "}.layer-more[open] summary:before{content:"− "}.dropzone{border:1px dashed #2c3d52;border-radius:10px;padding:10px;text-align:center;font-size:12px;color:var(--muted);cursor:pointer;margin-bottom:10px;transition:border-color .2s,background .2s}.dropzone.over{border-color:var(--accent);background:#8dd8d40f}.dropzone strong{color:var(--text);font-weight:550}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#1a2533;border:1px solid #2c3d52;padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:200}.toast.show{opacity:1;transform:translate(-50%)}@media(max-width:900px){.workspace{grid-template-columns:1fr;grid-template-areas:"viewer" "globals" "layers" "samples";padding:0 12px 24px}.top{padding:12px}.hint{display:none}}