:root{--color-orange: #F04E23;--color-orange-dark: #C93D18;--color-orange-light: #FF6B3D;--color-bg-dark: #111111;--color-bg-dark-alt: #1A1A1A;--color-surface: #181818;--color-text-primary: #EBEBEB;--color-text-muted: #888888;--color-border: #2A2A2A;--color-orange-fill: #F04E23;--color-text-on-orange: #111111;--color-grid-line: rgba(0,0,0,.25);--font-display: "Space Grotesk", "Arial Black", Impact, sans-serif;--font-mono: "IBM Plex Mono", "Courier Prime", monospace}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:var(--color-bg-dark);color:var(--color-text-primary);font-family:var(--font-mono);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{display:flex;flex-direction:column;min-height:100vh;padding:32px 40px}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 0 24px;border-bottom:1px solid var(--color-border);margin-bottom:48px}.logo{font-family:var(--font-display);font-weight:800;font-size:28px;letter-spacing:.02em;color:var(--color-text-primary)}.logo .accent{color:var(--color-orange)}.version-tag{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted);border:1px solid var(--color-border);padding:6px 14px}.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px;padding:60px 0}.hash-panel{width:100%;max-width:960px;background-color:var(--color-orange-fill);background-image:repeating-linear-gradient(0deg,var(--color-grid-line) 0px,transparent 1px,transparent 40px),repeating-linear-gradient(90deg,var(--color-grid-line) 0px,transparent 1px,transparent 40px);padding:72px 48px;text-align:center;position:relative}.hash-panel:before{content:"SOUND IDENTITY";position:absolute;top:16px;left:20px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--color-text-on-orange);opacity:.6}.hash-panel:after{content:"DETERMINISTIC ///";position:absolute;bottom:16px;right:20px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--color-text-on-orange);opacity:.4}.hash-display{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,6vw,72px);color:var(--color-text-on-orange);letter-spacing:.04em;line-height:1.1;word-break:break-all;-webkit-user-select:all;user-select:all;cursor:pointer}.hash-display::selection{background:var(--color-bg-dark);color:var(--color-orange)}.controls{display:flex;flex-direction:column;align-items:center;gap:28px;width:100%;max-width:960px}.btn-generate{background:var(--color-orange);color:var(--color-text-on-orange);font-family:var(--font-mono);font-size:16px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:20px 64px;border:none;border-radius:0;cursor:pointer;transition:background .15s ease;position:relative}.btn-generate:hover{background:var(--color-orange-dark)}.btn-generate:active{background:#a83212}.btn-generate .key-hint{font-weight:400;font-size:11px;letter-spacing:.15em;opacity:.5;display:block;margin-top:4px}.hash-input-group{display:flex;width:100%;max-width:560px;gap:0}.hash-input{flex:1;background:var(--color-bg-dark-alt);border:1px solid var(--color-border);padding:14px 18px;font-family:var(--font-mono);font-size:15px;color:var(--color-text-primary);outline:none}.hash-input::placeholder{color:var(--color-text-muted);letter-spacing:.1em;font-size:13px}.hash-input:focus{background:var(--bg-elevated)}.btn-load{background:var(--color-bg-dark-alt);border:1px solid var(--color-border);padding:14px 24px;font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-muted);cursor:pointer;transition:all .15s ease}.btn-load:hover{border-color:var(--color-orange);color:var(--color-orange)}.volume-group{display:flex;align-items:center;gap:18px;width:100%;max-width:420px}.volume-label{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-muted);min-width:64px}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:6px;background:var(--color-border);outline:none;cursor:pointer;border-radius:0}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:var(--color-orange);border:none;border-radius:0;cursor:pointer;transition:background .15s ease}.volume-slider::-webkit-slider-thumb:hover{background:var(--color-orange-dark)}.volume-slider::-moz-range-thumb{width:20px;height:20px;background:var(--color-orange);border:none;border-radius:0;cursor:pointer}.volume-slider::-moz-range-track{height:6px;background:var(--color-border);border:none;border-radius:0}.volume-value{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--color-text-primary);min-width:40px;text-align:right}.activation-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--color-bg-dark);cursor:pointer;transition:opacity .4s ease}.activation-overlay.hidden{opacity:0;pointer-events:none}.activation-overlay .message{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,5vw,56px);color:var(--color-text-primary);letter-spacing:.04em;text-align:center;line-height:1.3}.activation-overlay .message .highlight{color:var(--color-orange)}.activation-overlay .sub-message{font-family:var(--font-mono);font-size:clamp(12px,2vw,16px);color:var(--color-text-muted);letter-spacing:.3em;text-transform:uppercase;margin-top:24px;animation:pulse-text 2s ease infinite}@keyframes pulse-text{0%,to{opacity:.6}50%{opacity:1}}.status-bar{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid var(--color-border);margin-top:auto;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-muted)}.status-indicator{display:flex;align-items:center;gap:10px}.status-dot{width:8px;height:8px;background:var(--color-orange);display:inline-block;animation:pulse-dot 2s ease infinite}.status-dot.off{background:var(--color-text-muted);animation:none}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}.status-arrow{color:var(--color-orange);font-weight:700;font-size:13px}.info-row{display:flex;gap:28px}.info-item{display:flex;align-items:center;gap:8px}.info-item .label{color:var(--color-text-muted)}.info-item .value{color:var(--color-text-primary);font-weight:500}.history-section{position:fixed;left:var(--space-8);bottom:88px;width:200px;max-height:320px;background:var(--bg-terminal);border:1px solid var(--border-strong);display:flex;flex-direction:column;overflow:hidden}.history-section::-webkit-scrollbar{display:none}.history-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border-default);background:var(--bg-surface);flex-shrink:0}.history-header-label{font:var(--weight-normal) var(--text-xs)/1 var(--font-code);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-secondary)}.history-header-count{font:var(--weight-normal) var(--text-xs)/1 var(--font-code);color:var(--text-muted)}.history-list{display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none;padding:var(--space-1) 0}.history-item{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-code);font-size:var(--text-sm);color:var(--text-muted);cursor:pointer;padding:var(--space-2) var(--space-3);transition:color .12s,background .12s;letter-spacing:var(--tracking-normal);border-left:2px solid transparent}.history-item:hover{color:var(--accent);background:var(--bg-surface)}.history-item.active{color:var(--accent);background:var(--accent-dim);border-left-color:var(--accent)}.history-item-idx{font:var(--weight-normal) var(--text-xs)/1 var(--font-code);color:var(--text-muted);min-width:18px;text-align:right}.history-item-hash{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.midi-indicator{display:flex;align-items:center;gap:8px}.midi-led{width:10px;height:10px;display:inline-block;transition:background .15s ease}.midi-led.connected{background:var(--color-orange)}.midi-led.disconnected{background:var(--color-text-muted);opacity:.4}@media(max-width:768px){#app{padding:20px 24px}.hash-panel{padding:48px 24px}.btn-generate{padding:16px 40px;font-size:14px;width:100%}.top-bar{margin-bottom:32px}.logo{font-size:22px}.hash-display{font-size:clamp(28px,8vw,48px)}.history-section{display:none}.info-row{flex-wrap:wrap;gap:12px}.status-bar{font-size:10px;flex-direction:column;gap:12px;align-items:flex-start}.activation-overlay .message{font-size:clamp(20px,8vw,32px);padding:0 20px}.activation-overlay .sub-message{font-size:clamp(10px,3vw,13px)}}