@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap";:root{--color-black: #000000;--color-void: #0a0a0a;--color-surface: #111111;--color-surface-raised: #181818;--color-surface-hover: #1f1f1f;--color-gray-900: #1a1a1a;--color-gray-800: #262626;--color-gray-700: #333333;--color-gray-600: #444444;--color-gray-500: #666666;--color-gray-400: #888888;--color-gray-300: #aaaaaa;--color-gray-200: #cccccc;--color-gray-100: #e5e5e5;--color-white: #ffffff;--color-accent: #ffffff;--color-accent-dim: #888888;--color-active: #ffffff;--color-error: #ff3333;--color-style-ambient: #4a9eff;--color-style-techno: #ff4a6a;--color-style-house: #ff8c4a;--color-style-jazz: #a855f7;--color-style-experimental: #22d3ee;--color-style-drone: #6366f1;--color-style-minimal: #84cc16;--color-style-breaks: #f472b6;--color-text-primary: #ffffff;--color-text-secondary: #888888;--color-text-tertiary: #555555;--color-text-muted: #333333;--color-border: #2a2a2a;--color-border-strong: #444444;--color-border-subtle: #1a1a1a;--font-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;--font-display: var(--font-mono);--font-body: var(--font-mono);--text-2xs: .6875rem;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .875rem;--text-lg: 1rem;--text-xl: 1.25rem;--text-2xl: 1.625rem;--text-3xl: 2.25rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--radius-none: 0;--radius-sm: 2px;--radius-md: 2px;--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .03);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--transition-fast: .08s ease;--transition-base: .15s ease;font-family:var(--font-mono);font-size:13px;line-height:1.5;font-weight:400;color-scheme:dark;color:var(--color-text-primary);background-color:var(--color-black);font-synthesis:none;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--color-black)}#root{width:100%}::selection{background:var(--color-white);color:var(--color-black)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-black)}::-webkit-scrollbar-thumb{background:var(--color-gray-700);border:2px solid var(--color-black)}::-webkit-scrollbar-thumb:hover{background:var(--color-gray-600)}.grid-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:4px 4px}.scanlines:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.15) 1px,rgba(0,0,0,.15) 2px);z-index:100}.instrument-card{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-gray-800);text-align:left;font-family:var(--font-mono);cursor:pointer;transition:all var(--transition-fast);min-height:180px;overflow:hidden}.instrument-card__image{width:100%;aspect-ratio:16 / 9;overflow:hidden;background:var(--color-gray-900)}.instrument-card__image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-base)}.instrument-card--ready:hover .instrument-card__image img{transform:scale(1.02)}.instrument-card__content{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);flex:1}.instrument-card:focus{outline:1px solid var(--color-white);outline-offset:2px}.instrument-card--ready:hover{border-color:var(--color-white);box-shadow:0 0 20px #ffffff1a}.instrument-card--ready:active{transform:scale(.98)}.instrument-card--coming{opacity:.5;cursor:default}.instrument-card--coming:hover{opacity:.6}.instrument-card__header{display:flex;justify-content:space-between;align-items:center}.instrument-card__number{font-size:var(--text-xs);color:var(--color-gray-500)}.instrument-card__status{font-size:var(--text-2xs);color:var(--color-gray-600);letter-spacing:.1em}.instrument-card__status--ready{color:var(--color-white)}.instrument-card__name{font-size:var(--text-xl);font-weight:400;color:var(--color-white);margin:0;letter-spacing:.05em}.instrument-card__visual{font-size:var(--text-xs);color:var(--color-gray-400);font-family:var(--font-mono);line-height:1.2;white-space:pre;padding:var(--space-2) 0}.instrument-card--ready .instrument-card__visual{color:var(--color-white)}.instrument-card__description{font-size:var(--text-xs);color:var(--color-gray-500);margin:0;flex-grow:1}.instrument-card__cta{font-size:var(--text-xs);color:var(--color-gray-400);letter-spacing:.1em;margin-top:auto;padding-top:var(--space-2);border-top:1px solid var(--color-gray-800);transition:color var(--transition-fast)}.instrument-card--ready:hover .instrument-card__cta{color:var(--color-white)}.keyboard{--pad-size: 44px;--pad-gap: 4px;display:grid;grid-template-columns:repeat(14,var(--pad-size));gap:var(--pad-gap);padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);margin:0 auto}.white-keys,.black-keys{display:contents}.key{width:var(--pad-size);height:var(--pad-size);border:1px solid var(--color-border);background:var(--color-gray-900);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:var(--font-mono);-webkit-user-select:none;user-select:none;transition:all var(--transition-fast);position:relative}.key:focus{outline:none}.key:hover{background:var(--color-gray-800);border-color:var(--color-gray-600)}.key:active,.key.active{background:var(--color-white);border-color:var(--color-white)}.key-label{font-size:var(--text-2xs);font-weight:500;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;pointer-events:none;letter-spacing:-.5px}.key:hover .key-label{color:var(--color-text-secondary)}.key:active .key-label,.key.active .key-label{color:var(--color-black);font-weight:600}.white-key{background:var(--color-gray-800)}.black-key{background:var(--color-gray-900);position:relative}.black-key:after{content:"";position:absolute;top:4px;right:4px;width:4px;height:4px;background:var(--color-gray-600)}.black-key:active:after,.black-key.active:after{background:var(--color-black)}@media(max-width:768px){.keyboard{--pad-size: 36px;--pad-gap: 3px;grid-template-columns:repeat(14,var(--pad-size))}.key-label{font-size:9px}}@media(max-width:600px){.keyboard{--pad-size: 32px;--pad-gap: 2px;grid-template-columns:repeat(7,var(--pad-size))}}@media(max-width:400px){.keyboard{--pad-size: 28px;grid-template-columns:repeat(7,var(--pad-size))}.key-label{font-size:8px}}.knob-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);-webkit-user-select:none;user-select:none}.knob-small{--knob-size: 48px;--stroke-width: 3px;--indicator-size: 4px}.knob-medium{--knob-size: 64px;--stroke-width: 4px;--indicator-size: 6px}.knob-large{--knob-size: 80px;--stroke-width: 5px;--indicator-size: 8px}.knob-label{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:1px;text-align:center}.knob{width:var(--knob-size);height:var(--knob-size);position:relative;cursor:ns-resize}.knob.dragging{cursor:grabbing}.knob-ticks{position:absolute;width:100%;height:100%;pointer-events:none}.knob-tick{position:absolute;width:1px;height:4px;background:var(--color-gray-700);left:50%;top:2px;transform-origin:center calc(var(--knob-size) / 2 - 2px)}.knob-tick.major{height:6px;background:var(--color-gray-500)}.knob-tick.center{background:var(--color-text-secondary)}.knob-body{position:absolute;top:50%;left:50%;width:calc(var(--knob-size) - 16px);height:calc(var(--knob-size) - 16px);transform:translate(-50%,-50%);border-radius:50%;background:var(--color-surface);border:1px solid var(--color-border);transition:border-color var(--transition-fast)}.knob:hover .knob-body{border-color:var(--color-border-strong)}.knob.dragging .knob-body{border-color:var(--color-white)}.knob-indicator{position:absolute;width:2px;height:10px;background:var(--color-white);left:50%;top:4px;transform:translate(-50%)}.knob-small .knob-indicator{height:8px;width:2px}.knob-large .knob-indicator{height:12px;width:2px}.knob-cap{position:absolute;top:50%;left:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:var(--color-gray-700);pointer-events:none}.knob-value{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;color:var(--color-text-primary);letter-spacing:-.5px;min-width:60px;text-align:center;padding:var(--space-1) 0;background:var(--color-surface);border:1px solid var(--color-border)}.knob.dragging+.knob-value{border-color:var(--color-white);color:var(--color-white)}.knob-unit{color:var(--color-text-tertiary);margin-left:1px;font-weight:400}.knob-arc{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.knob-arc circle{fill:none;stroke-linecap:butt}.knob-arc .arc-track{stroke:var(--color-gray-800)}.knob-arc .arc-value{stroke:var(--color-white);transition:stroke-dashoffset .05s ease}.knob.dragging .knob-arc .arc-value,.knob-color-secondary .knob-arc .arc-value,.knob-color-hot .knob-arc .arc-value,.knob-color-cool .knob-arc .arc-value{stroke:var(--color-white)}.switch-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.switch-label{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:1px}.switch{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;padding:var(--space-1);cursor:pointer}.switch-track{width:32px;height:16px;background:var(--color-surface);border:1px solid var(--color-border);position:relative;transition:all var(--transition-fast)}.switch:hover .switch-track{border-color:var(--color-border-strong)}.switch.on .switch-track{background:var(--color-white);border-color:var(--color-white)}.switch-thumb{position:absolute;top:2px;left:2px;width:10px;height:10px;background:var(--color-gray-600);transition:all var(--transition-fast)}.switch.on .switch-thumb{left:calc(100% - 12px);background:var(--color-black)}.switch-led{width:4px;height:4px;background:var(--color-gray-700);transition:all var(--transition-fast)}.switch-led.active{background:var(--color-white)}.toggle-group{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.toggle-group-label{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:1px}.toggle-group-options{display:flex;border:1px solid var(--color-border);background:var(--color-surface)}.toggle-group-vertical .toggle-group-options{flex-direction:column}.toggle-option{display:flex;align-items:center;justify-content:center;gap:4px;padding:var(--space-2) var(--space-3);background:transparent;border:none;border-right:1px solid var(--color-border);cursor:pointer;transition:all var(--transition-fast);min-width:40px}.toggle-option:last-child{border-right:none}.toggle-group-vertical .toggle-option{border-right:none;border-bottom:1px solid var(--color-border)}.toggle-group-vertical .toggle-option:last-child{border-bottom:none}.toggle-option:hover{background:var(--color-surface-hover)}.toggle-option.active{background:var(--color-white)}.toggle-option-label{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.toggle-option:hover .toggle-option-label{color:var(--color-text-primary)}.toggle-option.active .toggle-option-label{color:var(--color-black);font-weight:600}.toggle-led{display:none}.compact-synth{background:var(--color-surface);border:1px solid var(--color-gray-700);display:flex;flex-direction:column;gap:var(--space-4)}.compact-synth__header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-gray-800);background:var(--color-surface-raised)}.compact-synth__title{display:flex;align-items:baseline;gap:var(--space-3)}.compact-synth__name{font-size:var(--text-lg);font-weight:500;letter-spacing:.05em}.compact-synth__type{font-size:var(--text-xs);color:var(--color-gray-500);letter-spacing:.1em}.compact-synth__actions{display:flex;gap:var(--space-2)}.compact-synth__btn{background:transparent;border:1px solid var(--color-gray-700);color:var(--color-gray-400);font-family:var(--font-mono);font-size:var(--text-xs);padding:var(--space-2) var(--space-3);cursor:pointer;transition:all var(--transition-fast)}.compact-synth__btn:hover{border-color:var(--color-white);color:var(--color-white)}.compact-synth__btn--close:hover{border-color:var(--color-error);color:var(--color-error)}.compact-synth__controls{display:flex;align-items:flex-start;gap:var(--space-6);padding:var(--space-4) var(--space-5);flex-wrap:wrap}.compact-synth__section{display:flex;flex-direction:column;gap:var(--space-2)}.compact-synth__knobs{flex-direction:row;gap:var(--space-4)}.compact-synth__keyboard{padding:0 var(--space-5) var(--space-4)}.compact-synth__hint{display:flex;justify-content:center;gap:var(--space-6);padding:var(--space-3) var(--space-5);border-top:1px solid var(--color-gray-800);font-size:var(--text-xs);color:var(--color-gray-500)}.compact-synth__hint kbd{display:inline-block;padding:0 var(--space-1);background:var(--color-gray-800);border:1px solid var(--color-gray-700);font-family:var(--font-mono);font-size:var(--text-2xs)}@media(max-width:700px){.compact-synth__controls{flex-direction:column;gap:var(--space-4)}.compact-synth__knobs{flex-wrap:wrap}.compact-synth__header{flex-direction:column;gap:var(--space-3);align-items:flex-start}.compact-synth__actions{width:100%;justify-content:flex-end}}@media(max-width:500px){.compact-synth__hint{flex-direction:column;align-items:center;gap:var(--space-2)}}.composer-block{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);width:64px;height:64px;background:var(--color-gray-900);border:1px solid var(--color-gray-800);font-family:var(--font-mono);cursor:pointer;transition:all var(--transition-fast);overflow:hidden}.composer-block:hover{border-color:var(--color-gray-600);background:var(--color-gray-800)}.composer-block--active{border-color:var(--color-white);background:var(--color-surface-raised)}.composer-block--configured{background:var(--color-surface-raised);border-color:var(--color-gray-600)}.composer-block--configured:hover{border-color:var(--block-color, var(--color-gray-500))}.composer-block--configured.composer-block--active{border-color:var(--block-color, var(--color-white))}.composer-block__number{font-size:var(--text-lg);font-weight:500;color:var(--color-gray-500)}.composer-block--configured .composer-block__number{font-size:var(--text-sm);color:var(--color-gray-400)}.composer-block--active .composer-block__number{color:var(--color-white)}.composer-block__info{display:flex;flex-direction:column;align-items:center;gap:0}.composer-block__bpm{font-size:var(--text-xs);font-weight:600;color:var(--color-white)}.composer-block__style{font-size:var(--text-2xs);letter-spacing:.1em;font-weight:500}.composer-block__color-bar{position:absolute;bottom:0;left:0;right:0;height:3px}.composer-block--playing{animation:pulse-glow 1.5s ease-in-out infinite;border-color:var(--block-color, var(--color-accent))!important;box-shadow:0 0 12px var(--block-color, var(--color-accent))}.composer-block--playing .composer-block__number{color:var(--color-white)}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px var(--block-color, var(--color-accent))}50%{box-shadow:0 0 16px var(--block-color, var(--color-accent))}}.block-config-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .15s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.block-config{background:var(--color-surface);border:1px solid var(--color-gray-700);width:90%;max-width:480px;animation:slideUp .2s ease}.block-config__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-gray-800);background:var(--color-surface-raised)}.block-config__title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:500;color:var(--color-white);letter-spacing:.1em}.block-config__block-indicator{display:inline-block;width:10px;height:10px;border-radius:2px}.block-config__close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:1px solid var(--color-gray-700);color:var(--color-gray-400);font-size:var(--text-lg);cursor:pointer;transition:all var(--transition-fast)}.block-config__close:hover{border-color:var(--color-gray-500);color:var(--color-white)}.block-config__body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4)}.block-config__section{display:flex;flex-direction:column;gap:var(--space-2)}.block-config__section--styles{padding-bottom:var(--space-3);border-bottom:1px solid var(--color-gray-800)}.block-config__row{display:flex;gap:var(--space-6);align-items:flex-start}.block-config__section--bpm{flex-shrink:0}.block-config__section--instruments{flex:1}.block-config__label{font-size:var(--text-2xs);color:var(--color-gray-500);letter-spacing:.15em}.block-config__styles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}.block-config__style{padding:var(--space-2) var(--space-2);background:var(--color-gray-900);border:1px solid var(--color-gray-700);color:var(--color-gray-400);font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.05em;cursor:pointer;transition:all var(--transition-fast);text-align:center}.block-config__style:hover{border-color:var(--style-color);color:var(--style-color);background:var(--color-surface-raised)}.block-config__style--active{background:var(--color-surface-raised)}.block-config__instruments{display:flex;flex-wrap:wrap;gap:var(--space-2)}.block-config__instrument{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-gray-900);border:1px solid var(--color-gray-700);color:var(--color-gray-400);font-family:var(--font-mono);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-fast)}.block-config__instrument:hover{border-color:var(--color-gray-600);color:var(--color-gray-300)}.block-config__instrument--active{background:var(--color-surface-raised);border-color:var(--color-white);color:var(--color-white)}.block-config__instrument-check{font-size:var(--text-sm);width:14px;text-align:center}.block-config__actions{display:flex;gap:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-gray-800)}.block-config__btn{padding:var(--space-2) var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;cursor:pointer;transition:all var(--transition-fast)}.block-config__btn--save{flex:1;background:var(--color-white);border:1px solid var(--color-white);color:var(--color-black);font-weight:500}.block-config__btn--save:hover{filter:brightness(1.1)}.block-config__btn--clear{background:transparent;border:1px solid var(--color-gray-600);color:var(--color-gray-400)}.block-config__btn--clear:hover{border-color:var(--color-gray-500);color:var(--color-gray-300)}@media(max-width:500px){.block-config__styles{grid-template-columns:repeat(2,1fr)}.block-config__row{flex-direction:column;gap:var(--space-4)}.block-config__section--instruments{width:100%}}.set-player-controls{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:var(--color-gray-900);border:1px solid var(--color-gray-700);margin-top:var(--space-4)}.set-player-controls__transport{display:flex;gap:var(--space-2)}.transport-btn{padding:var(--space-2) var(--space-4);background:var(--color-gray-800);border:1px solid var(--color-gray-600);color:var(--color-gray-100);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:500;letter-spacing:.05em;cursor:pointer;transition:all var(--transition-fast)}.transport-btn:hover:not(:disabled){border-color:var(--color-accent);box-shadow:0 0 8px var(--color-accent)}.transport-btn:active:not(:disabled){transform:translateY(1px)}.transport-btn:disabled{opacity:.4;cursor:not-allowed}.transport-btn--active{background:var(--color-accent);color:var(--color-gray-900);border-color:var(--color-accent)}.transport-btn--active:hover{background:var(--color-accent);filter:brightness(1.1)}.set-player-controls__progress-section{display:flex;flex-direction:column;gap:var(--space-2)}.set-player-controls__info{display:flex;justify-content:space-between;align-items:center}.set-player-controls__block-indicator{font-size:var(--text-sm);font-weight:500;color:var(--color-white);letter-spacing:.1em}.set-player-controls__time{font-size:var(--text-sm);color:var(--color-gray-400);font-variant-numeric:tabular-nums}.set-player-controls__progress-bar{height:4px;background:var(--color-gray-700);overflow:hidden}.set-player-controls__progress-fill{height:100%;transition:width .1s linear}.set-player-controls__style-info{font-size:var(--text-xs);letter-spacing:.15em;font-weight:500}@media(max-width:500px){.set-player-controls__transport{flex-wrap:wrap}.transport-btn{flex:1 1 auto;min-width:80px}}.composer{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);background:var(--color-surface);border:1px solid var(--color-gray-700);margin-top:var(--space-4);max-width:1200px;margin-left:auto;margin-right:auto}.composer__header{display:flex;flex-direction:column;gap:var(--space-2)}.composer__title-row{display:flex;align-items:center;gap:var(--space-2)}.composer__icon{font-size:var(--text-sm);color:var(--color-white)}.composer__label{font-size:var(--text-2xs);color:var(--color-gray-400);letter-spacing:.2em}.composer__title{font-size:var(--text-2xl);font-weight:400;color:var(--color-white);margin:0;letter-spacing:.05em}.composer__description{font-size:var(--text-sm);color:var(--color-gray-400);margin:0;line-height:1.5;max-width:500px}.composer__blocks{display:flex;flex-wrap:wrap;gap:var(--space-2)}.composer__footer{display:flex;align-items:center;justify-content:space-between;padding-top:var(--space-3);border-top:1px solid var(--color-gray-800)}.composer__status{font-size:var(--text-xs);color:var(--color-gray-500);letter-spacing:.1em}.composer__build-btn{padding:var(--space-2) var(--space-5);background:linear-gradient(135deg,var(--color-style-techno) 0%,var(--color-style-house) 100%);border:none;color:var(--color-white);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:500;letter-spacing:.1em;cursor:pointer;transition:all var(--transition-fast);text-shadow:0 1px 2px rgba(0,0,0,.3)}.composer__build-btn:hover{filter:brightness(1.15);transform:translateY(-1px)}.composer__actions{display:flex;gap:var(--space-2)}.composer__reset-btn{padding:var(--space-2) var(--space-4);background:transparent;border:1px solid var(--color-gray-600);color:var(--color-gray-300);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:500;letter-spacing:.1em;cursor:pointer;transition:all var(--transition-fast)}.composer__reset-btn:hover{border-color:var(--color-gray-400);color:var(--color-white)}@media(max-width:700px){.composer__blocks{justify-content:center}}@media(max-width:500px){.composer__footer{flex-direction:column;gap:var(--space-3);align-items:flex-start}}.home-page{min-height:100vh;display:flex;flex-direction:column;background:var(--color-void);color:var(--color-white);font-family:var(--font-mono)}.home-header{padding:var(--space-6);border-bottom:1px solid var(--color-gray-800)}.home-header__inner{max-width:1200px;margin:0 auto}.home-header__brand{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-2)}.home-header__logo{width:56px;height:56px;object-fit:contain}.home-header__text{display:flex;flex-direction:column}.home-header__label{font-size:var(--text-2xs);color:var(--color-gray-500);letter-spacing:.2em}.home-header__title{font-size:var(--text-2xl);font-weight:400;margin:var(--space-1) 0 0;letter-spacing:.05em}.home-header__tagline{font-size:var(--text-sm);color:var(--color-gray-500)}.home-main{flex:1;padding:var(--space-6)}.active-instrument{max-width:1200px;margin:0 auto}.instruments-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4);max-width:1200px;margin:0 auto}.home-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-gray-800);font-size:var(--text-xs);color:var(--color-gray-500)}.home-footer__inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}.home-footer__left,.home-footer__right{display:flex;align-items:center;gap:var(--space-3)}.home-footer__status{display:flex;align-items:center;gap:var(--space-2);color:var(--color-gray-400);letter-spacing:.1em}.status-light{width:6px;height:6px;background:#0f8;border-radius:50%;box-shadow:0 0 8px #0f8,0 0 12px #0f86;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.home-footer__divider{width:1px;height:12px;background:var(--color-gray-700)}.home-footer__coord{font-family:var(--font-mono);letter-spacing:.05em;color:var(--color-gray-600)}.home-footer__time{font-family:var(--font-mono);letter-spacing:.1em;color:var(--color-gray-400)}.home-footer__version{color:var(--color-gray-600)}@media(max-width:700px){.home-header{padding:var(--space-4)}.home-header__logo{width:44px;height:44px}.home-header__title{font-size:var(--text-xl)}.home-main{padding:var(--space-4)}.instruments-grid{grid-template-columns:1fr}}@media(max-width:600px){.home-footer__inner{flex-direction:column;gap:var(--space-3)}.home-footer__coord{display:none}}@media(max-width:500px){.home-header__brand{gap:var(--space-3)}.home-header__logo{width:36px;height:36px}.home-header__title{font-size:var(--text-lg)}}.module-panel{background:var(--color-surface);border:1px solid var(--color-border);padding:0;position:relative;min-width:140px}.module-header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-gray-900);border-bottom:1px solid var(--color-border)}.module-title{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:2px;margin:0}.module-led{width:6px;height:6px;background:var(--color-gray-700);flex-shrink:0}.module-panel-primary .module-led,.module-panel-secondary .module-led,.module-panel-hot .module-led,.module-panel-cool .module-led{background:var(--color-white)}.module-panel-primary,.module-panel-secondary,.module-panel-hot,.module-panel-cool{border-top:1px solid var(--color-border)}.module-content{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;padding:var(--space-4)}.patch-point{display:flex;flex-direction:column;align-items:center;gap:2px}.patch-jack{width:10px;height:10px;background:var(--color-black);border:1px solid var(--color-gray-600);position:relative}.patch-jack:after{content:"";position:absolute;top:50%;left:50%;width:4px;height:4px;transform:translate(-50%,-50%);background:var(--color-gray-600)}.patch-output .patch-jack{border-color:var(--color-white)}.patch-output .patch-jack:after{background:var(--color-white)}.patch-label{font-family:var(--font-mono);font-size:8px;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.5px}.module-row{display:flex;gap:var(--space-3);align-items:flex-end;width:100%;justify-content:center}.module-column{display:flex;flex-direction:column;gap:var(--space-3);align-items:center}.module-divider{width:1px;height:48px;background:var(--color-border);margin:0 var(--space-1)}.synth-root{display:flex;flex-direction:column;align-items:center;padding:var(--space-6) var(--space-4);min-height:100vh;background:var(--color-black);position:relative}.page-header{text-align:center;margin-bottom:var(--space-10);padding:var(--space-6) 0;width:100%;max-width:1000px;border-bottom:1px solid var(--color-border);position:relative}.back-button{position:absolute;left:0;top:50%;transform:translateY(-50%);background:none;border:1px solid var(--color-gray-700);color:var(--color-gray-400);font-family:var(--font-mono);font-size:var(--text-xs);padding:var(--space-2) var(--space-3);cursor:pointer;letter-spacing:.1em;transition:all var(--transition-fast)}.back-button:hover{border-color:var(--color-white);color:var(--color-white)}.back-button:focus{outline:1px solid var(--color-white);outline-offset:2px}.brand{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:600;margin:0;letter-spacing:6px;text-transform:uppercase;color:var(--color-white);position:relative;display:inline-block}.brand:before{content:"◼";margin-right:var(--space-3);font-size:var(--text-lg);vertical-align:middle}.brand:after{content:"";position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--color-white)}.instrument-header{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border);width:100%;max-width:1000px}.instrument-name{font-family:var(--font-mono);font-size:var(--text-xl);font-weight:500;margin:0;letter-spacing:2px;text-transform:uppercase;color:var(--color-text-primary)}.instrument-type{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:1px}.instrument-version{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:1px;margin-left:auto}.instrument-version:before{content:"// "}.synth-housing{background:var(--color-black);border:1px solid var(--color-border);padding:var(--space-4);position:relative;max-width:1000px;width:100%}.synth-housing:before{content:"SYS.AUDIO.SYNTH";position:absolute;top:0;left:0;padding:2px var(--space-2);font-family:var(--font-mono);font-size:9px;color:var(--color-text-muted);background:var(--color-black);letter-spacing:1px;transform:translateY(-50%)}.synth-inner{position:relative}.synth-modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--color-border);margin-bottom:var(--space-4)}.synth-modules>*{background:var(--color-surface)}.env-knobs{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}.patch-row{display:flex;gap:var(--space-3);justify-content:center;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border)}.status-bar{position:fixed;bottom:0;left:0;right:0;height:24px;background:var(--color-surface);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--color-text-tertiary);z-index:1000}.status-bar-left,.status-bar-right{display:flex;align-items:center;gap:var(--space-4)}.status-item{display:flex;align-items:center;gap:var(--space-1)}.status-item:before{content:"";width:6px;height:6px;background:var(--color-gray-600)}.status-item.active:before{background:var(--color-white)}.status-divider{width:1px;height:12px;background:var(--color-border)}.status-bar kbd{background:var(--color-gray-800);border:1px solid var(--color-border);padding:1px 4px;font-family:var(--font-mono);font-size:9px;color:var(--color-text-secondary)}.synth-root{padding-bottom:48px}.noise-overlay{display:none}@media(max-width:768px){.synth-root{padding:var(--space-4) var(--space-2)}.synth-header h1{font-size:var(--text-lg);letter-spacing:2px}.synth-housing{padding:var(--space-3)}.synth-modules{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}