:root{--chassis: #e5e6e4;--tile-bg: #e8e9e7;--gap: rgba(0,0,0,.07);--gap-size: 1px;--btn-face: #f2f2f0;--btn-press: #ddddd8;--key-white: #f8f8f6;--key-press: #e8e8e4;--orange: #f26522;--radius: 14px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:JetBrains Mono,Space Mono,monospace;background:#f0f0ee;min-height:100vh;display:flex;align-items:center;justify-content:center;-webkit-font-smoothing:antialiased}#root,.app-wrapper{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:30px}.op1{position:relative;width:1060px;background:var(--chassis);border-radius:var(--radius);padding:5px;touch-action:manipulation;box-shadow:inset 0 1px #ffffff80,0 0 0 1px #00000014,0 1px #0000000a,0 2px #00000008,0 4px 12px #00000014,0 8px 24px #0000000f,0 16px 48px #0000000d;-webkit-user-select:none;user-select:none}.op1-texture{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;border-radius:var(--radius);mix-blend-mode:overlay;opacity:.5}.faceplate{position:relative;z-index:1;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;box-shadow:inset 0 1px 3px #0000000a}.top-half{display:flex;background:var(--gap);gap:var(--gap-size);border-bottom:var(--gap-size) solid var(--gap)}.left-tiles{display:grid;grid-template-columns:repeat(4,48px);grid-template-rows:48px repeat(4,42px);gap:var(--gap-size)}.tile{background:var(--tile-bg);display:flex;align-items:center;justify-content:center;box-shadow:inset 1px 1px #ffffff8c,inset -1px -1px #0000000a}.tile-speaker{padding:3px}.tile-empty{background:var(--tile-bg)}.tile-shift{grid-column:span 2}.circ-btn{width:36px;height:36px;border:none;border-radius:50%;background:radial-gradient(circle at 50% 44%,#f6f6f4,#efefe8 40%,#e8e8e4,#e2e2de);box-shadow:inset 0 1px #ffffffd9,0 1.5px 3px #00000014,0 .5px 1px #0000000a;cursor:pointer;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:300;color:#5a5a5a;display:flex;align-items:center;justify-content:center;transition:transform .04s,box-shadow .04s}.circ-btn:active{transform:translateY(1.5px);background:var(--btn-press);box-shadow:inset 0 2px 4px #0000001a,0 .5px .5px #00000005}.circ-rec{color:transparent;font-size:0;position:relative}.circ-rec:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 45% 40%,#ff8040,#f26522,#d04a10 80%,#a03808);box-shadow:inset 0 1px 2px #0000004d,inset 0 -.5px 1px #ffffff1a,0 .5px 1px #0000001a}.circ-recording:after{animation:rec-pulse 1s ease-in-out infinite;box-shadow:inset 0 1px 2px #0000004d,0 0 6px #f2652299,0 0 12px #f265224d}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.5}}.circ-active{background:radial-gradient(circle at 50% 44%,#e8e8e6,#ddddd8 40%,#d0d0cc,#c8c8c4)!important;box-shadow:inset 0 2px 3px #00000014,0 .5px 1px #0000000a!important}.circ-pressed{transform:translateY(1.5px);background:var(--btn-press)!important;box-shadow:inset 0 2px 4px #0000001a!important}.circ-shift{width:78px;height:34px;border-radius:17px;font-size:8px;font-weight:400;letter-spacing:.5px}.circ-num{width:38px;height:38px;font-size:15px;font-weight:500;color:#3a3a3a}.circ-num-sm{width:30px;height:30px;font-size:11px;font-weight:500;color:#4a4a4a}.speaker-grille{width:42px;height:42px;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:1px;place-items:center}.speaker-grille .dot{width:3.5px;height:3.5px;border-radius:50%;background:#7a7b79}.vol-knob{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.2) 0%,transparent 40%),radial-gradient(circle at 50% 50%,#d4d4d2,#b8b8b6 35%,#9a9a98 65%,#7a7a78);box-shadow:0 3px 6px #00000029,0 1px 2px #00000014,inset 0 0 0 .5px #ffffff1a;cursor:pointer}.center-area{flex:1;display:flex;flex-direction:column;background:var(--gap);gap:var(--gap-size)}.center-top{display:flex;gap:var(--gap-size);background:var(--gap);flex:1}.tile-oled{background:var(--tile-bg);display:flex;align-items:stretch;justify-content:stretch;padding:5px;width:260px;flex-shrink:0;height:100%;box-shadow:inset 1px 1px #ffffff8c,inset -1px -1px #0000000a}.enc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-size);flex:1;background:var(--gap);height:100%}.tile-enc{background:var(--tile-bg);display:flex;align-items:center;justify-content:center;height:100%;box-shadow:inset 1px 1px #ffffff8c,inset -1px -1px #0000000a}.oled{width:100%;height:100%;background:#020202;border-radius:5px;box-shadow:inset 0 4px 10px #000c,inset 0 1px 3px #000000e6,inset 0 0 0 1px #00000080,0 0 0 2px #0a0a0a,0 0 0 3.5px #282828,0 0 0 4.5px var(--tile-bg),0 1px 1px #ffffff40;display:flex;align-items:stretch;justify-content:stretch;overflow:hidden;position:relative}.oled:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:5px;background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.015) 30%,transparent 55%,transparent 100%);pointer-events:none;z-index:1}.oled-bezel{width:100%;height:100%;padding:6px;display:flex}.oled-canvas{display:block;width:100%;height:100%;border-radius:2px}.enc{width:62px;height:62px;border-radius:50%;cursor:grab;touch-action:none}.enc:active{cursor:grabbing}.enc-bezel{width:100%;height:100%;border-radius:50%;padding:3px;background:linear-gradient(160deg,#ccccc9,#a5a5a2 45%,#8a8a87);box-shadow:0 4px 8px #00000029,0 2px 4px #00000014,0 6px 4px -2px #0000001a,0 1px #0000000f,inset 0 .5px #ffffff26}.enc-cap{width:100%;height:100%;border-radius:50%;position:relative;transition:transform .06s}.enc-blue .enc-cap{background:radial-gradient(ellipse 100% 88% at 50% 44%,#3a4a6a,#2a3a58,#1c2b48 50%,#101a30 78%,#080e1a);box-shadow:inset 0 3px 6px #0006,inset 0 0 0 1px #00000040}.enc-gold .enc-cap{background:radial-gradient(ellipse 100% 88% at 50% 44%,#d8b050,#c09030,#a87820 50%,#7a5810 78%,#503808);box-shadow:inset 0 3px 6px #00000040,inset 0 0 0 1px #0000002e}.enc-gray .enc-cap{background:radial-gradient(ellipse 100% 88% at 50% 44%,#e8e8e8,#d0d0d0,#b4b4b4 50%,#8a8a8a 78%,#606060);box-shadow:inset 0 3px 6px #00000014,inset 0 0 0 1px #0000000a}.enc-orange .enc-cap{background:radial-gradient(ellipse 100% 88% at 50% 44%,#f88040,#f06828,#e05818 50%,#b04010 78%,#802808);box-shadow:inset 0 3px 6px #00000040,inset 0 0 0 1px #0000002e}.enc-dot-track{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%}.enc-dot{position:absolute;top:5px;left:50%;width:2px;height:9px;margin-left:-1px;border-radius:1px;background:#ffffff80}.enc-blue .enc-dot{background:#fff3}.enc-gold .enc-dot{background:#fff6}.enc-gray .enc-dot{background:#32323259}.enc-pressed .enc-cap{transform:translateY(1px) scale(.97)}.enc-pressed .enc-bezel{box-shadow:0 2px 3px #0000001f,0 3px 2px -1px #0000001a}.center-presets{display:flex;gap:var(--gap-size);background:var(--gap);flex-shrink:0}.track-section{display:flex;gap:var(--gap-size);width:260px;flex-shrink:0}.tile-track{flex:1;height:48px;background:var(--tile-bg);display:flex;align-items:center;justify-content:center;box-shadow:inset 1px 1px #ffffff8c,inset -1px -1px #0000000a}.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-size);flex:1;background:var(--gap)}.preset-col{display:flex;gap:var(--gap-size);background:var(--gap)}.preset-cell{flex:1;background:var(--tile-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 2px;gap:2px;box-shadow:inset 1px 1px #ffffff8c,inset -1px -1px #0000000a}.preset-label{font-size:6px;font-weight:300;color:#8a8a8a;letter-spacing:.3px}.right-strip{display:flex;flex-direction:column;gap:var(--gap-size);width:48px;background:var(--gap);border-left:var(--gap-size) solid var(--gap);flex-shrink:0}.right-strip .tile{flex:1}.tile-gain{flex:2!important}.gain-graphic{position:relative;width:20px;height:44px}.gain-line{position:absolute;left:50%;top:4px;bottom:4px;width:1px;background:#aaa;margin-left:-.5px}.gain-cross{position:absolute;top:50%;left:3px;right:3px;height:1px;background:#aaa;margin-top:-.5px}.gain-dot{position:absolute;width:3px;height:3px;border-radius:50%;background:#999;top:8px;left:50%;margin-left:-1.5px}.gain-dot-b{top:auto;bottom:8px}.bottom-half{display:flex;flex-direction:column;background:linear-gradient(180deg,#e0e1df 0%,var(--tile-bg) 4%,var(--tile-bg) 100%);box-shadow:inset 0 3px 6px #00000012,inset 0 1px 2px #0000000d,inset 0 0 0 .5px #00000008;border-top:1px solid rgba(0,0,0,.06);border-radius:0 0 6px 6px}.black-row{display:flex;align-items:center;padding:14px 16px 8px;background:transparent;touch-action:none}.bk-grp{display:flex;gap:12px;justify-content:center}.bk-3{flex:3}.bk-2{flex:2}.bk{width:38px;height:38px;border:none;border-radius:50%;background:radial-gradient(ellipse 70% 70% at 50% 45%,#030303,#0a0a0a 30%,#161616 55%,#242424 75%,#303030 90%),radial-gradient(circle at 50% 50%,transparent 85%,rgba(60,60,60,.5) 100%);box-shadow:0 -1px #ffffff14,0 4px 8px #0000004d,0 2px 4px #00000026,inset 0 4px 8px #000000a6,inset 0 -2px 4px #ffffff08,inset 0 0 0 1.5px #ffffff0d;cursor:pointer;flex-shrink:0;transition:transform .04s,box-shadow .04s}.bk:hover{box-shadow:0 -1px #ffffff1a,0 5px 10px #00000059,0 2px 4px #0000002e,inset 0 4px 8px #000000a6,inset 0 -2px 4px #ffffff08,inset 0 0 0 1.5px #ffffff0f}.bk:active,.bk.is-pressed{transform:translateY(2px);background:radial-gradient(ellipse 70% 70% at 50% 45%,#010101,#060606 30%,#101010 55%,#1a1a1a 75%,#252525 90%);box-shadow:0 1px 2px #0000001a,inset 0 5px 10px #000000bf,inset 0 -1px 2px #ffffff05,inset 0 0 0 1.5px #ffffff08}.white-row{display:flex;gap:1.5px;padding:4px 6px 10px;background:transparent;touch-action:none}.wk{flex:1;height:130px;border:none;border-radius:12px;background:linear-gradient(180deg,#ffffffe6,#ffffff4d 2%,#fff0 5%),linear-gradient(90deg,rgba(0,0,0,.015) 0%,transparent 8%,transparent 92%,rgba(0,0,0,.015) 100%),linear-gradient(180deg,#fff,#fefefe 4%,#fafaf8 10%,#f6f6f4 25%,#f2f2f0 42%,#eeeeed 58%,#eaeae8 72%,#e6e6e4 85%,#e3e3e1 95%,#e0e0de);box-shadow:inset 0 2px 1px #fff,inset 2px 0 3px #fff6,inset -2px 0 3px #00000005,inset 0 -3px 3px #0000000a,0 5px 10px #0000001a,0 2px 4px #0000000f,0 8px 5px -3px #0000000d,1px 0 2px #00000006,-1px 0 2px #00000006;cursor:pointer;transition:all .05s cubic-bezier(.2,0,.3,1);transform:perspective(500px) rotateX(1.2deg);transform-origin:bottom center}.wk:hover{transform:perspective(500px) rotateX(1.2deg) translateY(-1px);box-shadow:inset 0 2px 1px #fff,inset 2px 0 3px #fff6,inset -2px 0 3px #00000005,inset 0 -3px 3px #0000000a,0 7px 14px #0000001f,0 3px 6px #00000014,0 10px 6px -3px #0000000f}.wk:active,.wk.is-pressed{background:linear-gradient(180deg,#e6e6e499,#e6e6e400 3%),linear-gradient(180deg,#eaeae8,#e4e4e2,#e0e0de 60%,#dcdcda);transform:perspective(500px) rotateX(.6deg) translateY(3px);box-shadow:inset 0 5px 10px #00000024,inset 0 2px 4px #00000014,inset 2px 0 4px #00000008,inset -2px 0 4px #00000008,inset 0 -1px 1px #00000005,0 1px 2px #00000008;transition:all .03s}.op1-brand{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:baseline;padding:5px 12px 0}.brand-te{font-size:7px;font-weight:300;color:#8a8a8a;letter-spacing:.8px}.octave-ind{font-size:8px;font-weight:500;color:var(--orange);letter-spacing:.5px}.brand-name{font-size:11px;font-weight:400;color:#7a7a7a}.brand-name em{font-style:normal;font-weight:300;font-size:8px;margin-left:3px;color:#9a9a9a}.op1-scene{perspective:2000px;width:1060px;position:relative;transition:transform 1.2s cubic-bezier(.25,.1,.25,1)}.op1-front,.op1-back{backface-visibility:hidden;transition:transform .8s cubic-bezier(.4,0,.2,1)}.op1-front{transform:rotateX(0)}.op1-back{position:absolute;top:0;left:0;width:100%;transform:rotateX(180deg);cursor:pointer}.op1-scene.is-flipped .op1-front{transform:rotateX(-180deg);pointer-events:none}.op1-scene.is-flipped .op1-back{transform:rotateX(0);pointer-events:auto}.back-content{padding:30px 40px;display:flex;flex-direction:column;gap:20px;min-height:300px}.back-header{display:flex;justify-content:space-between;align-items:baseline}.back-logo{font-size:9px;font-weight:300;color:#8a8a8a;letter-spacing:1.5px}.back-model{font-size:14px;font-weight:500;color:#5a5a5a;letter-spacing:-.3px}.back-specs{display:flex;flex-direction:column;gap:8px;padding:16px 0;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}.back-spec-row{display:flex;justify-content:space-between;align-items:baseline}.back-label{font-size:8px;font-weight:400;color:#999;letter-spacing:.8px}.back-value{font-size:8px;font-weight:300;color:#666;letter-spacing:.3px}.back-ports{display:flex;align-items:center;gap:8px}.back-port{width:18px;height:8px;background:#888;border-radius:3px;box-shadow:inset 0 1px 2px #0000004d}.back-port-sm{width:10px;height:10px;border-radius:50%}.back-port-label{font-size:7px;color:#aaa;letter-spacing:.5px}.back-footer{margin-top:auto;display:flex;flex-direction:column;gap:4px}.back-serial{font-size:7px;color:#bbb;letter-spacing:1px}.back-made{font-size:7px;color:#999;letter-spacing:.5px}.back-credit{font-size:8px;color:var(--orange);letter-spacing:.3px;margin-top:4px}.back-url{font-size:7px;color:var(--orange);letter-spacing:.5px;opacity:.7}.back-velcro{position:absolute;bottom:20px;left:50%;transform:translate(-50%);width:200px;height:24px;background:repeating-linear-gradient(90deg,#ccc,#ccc 2px,#ddd 2px,#ddd 4px);border-radius:3px;opacity:.4}.enc:focus-visible{outline:2px solid var(--orange);outline-offset:4px}.wk:focus-visible,.bk:focus-visible,.circ-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}@media (max-width: 1100px){.op1{width:97vw}.left-tiles{grid-template-columns:repeat(4,40px);grid-template-rows:42px repeat(4,36px)}.circ-btn{width:30px;height:30px;font-size:9px}.circ-num{width:32px;height:32px;font-size:13px}.circ-num-sm{width:26px;height:26px;font-size:10px}.enc{width:50px;height:50px}.wk{height:100px;border-radius:9px}.bk{width:30px;height:30px}.tile-oled,.track-section{width:200px}.oled-bezel{max-width:170px;max-height:58px}}@media (max-width: 768px){.op1{width:95vw;padding:4px}.top-half{flex-direction:column}.left-tiles{grid-template-columns:repeat(5,36px);grid-template-rows:repeat(4,32px)}.center-top{flex-direction:column}.tile-oled{width:100%;height:auto}.track-section{width:100%}.right-strip{flex-direction:row;width:auto}.enc{width:38px;height:38px}.wk{height:70px;border-radius:7px}.bk{width:24px;height:24px}.circ-btn{width:24px;height:24px;font-size:8px}}.tut-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;border-radius:var(--radius);pointer-events:none}.tut-dim{position:absolute;top:0;right:0;bottom:0;left:0;background:#0006;border-radius:var(--radius);pointer-events:auto;cursor:pointer}.tut-dim-passthrough{pointer-events:none;background:#00000040}.tut-card{position:absolute;z-index:200;background:#111;border:1px solid #2a2a2a;border-radius:10px;padding:14px 18px;width:320px;box-shadow:0 10px 30px #0009;color:#ddd;font-family:JetBrains Mono,monospace;pointer-events:auto}.tut-pos-center{top:50%;left:50%;transform:translate(-50%,-50%)}.tut-pos-top{bottom:160px;left:50%;transform:translate(-50%)}.tut-pos-bottom{top:10px;left:50%;transform:translate(-50%)}.tut-pos-left{top:50%;right:20px;transform:translateY(-50%)}.tut-pos-right{top:50%;left:220px;transform:translateY(-50%)}.tut-progress{height:2px;background:#222;border-radius:1px;margin-bottom:10px}.tut-progress-fill{height:100%;background:var(--orange);border-radius:1px;transition:width .3s}.tut-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.tut-step{font-size:9px;color:#555}.tut-skip{background:none;border:none;color:#555;font-size:14px;cursor:pointer;padding:0 4px;line-height:1}.tut-skip:hover{color:#aaa}.tut-title{font-size:13px;font-weight:600;color:#fff;margin-bottom:6px}.tut-desc{font-size:10px;font-weight:300;line-height:1.7;color:#aaa;white-space:pre-line;margin-bottom:10px}.tut-tip{font-size:9px;color:#888;line-height:1.5;background:#ffffff08;border-radius:5px;padding:6px 8px;margin-bottom:10px}.tut-action{background:#f265221a;border:1px solid rgba(242,101,34,.25);border-radius:5px;padding:8px 10px;margin-bottom:10px;font-size:10px;color:var(--orange);text-align:center;font-weight:400}.tut-nav{display:flex;gap:6px;justify-content:flex-end}.tut-btn{border:none;border-radius:5px;padding:6px 12px;font-family:inherit;font-size:9px;font-weight:500;cursor:pointer}.tut-next{background:var(--orange);color:#fff}.tut-next:hover{background:#d85a1e}.tut-prev{background:#2a2a2a;color:#888}.tut-prev:hover{background:#333}.op1.dark-mode{--chassis: #1e1f1e;--tile-bg: #181818;--gap: rgba(255,255,255,.04);--btn-face: #2a2a2a;--btn-press: #1a1a1a}.app-wrapper:has(.dark-mode){background:#111}.op1.dark-mode{box-shadow:inset 0 1px #ffffff0f,0 0 0 1px #0a0a0a,0 1px #111,0 2px #0a0a0a,0 8px 20px #0009,0 20px 50px #0006}.op1.dark-mode .circ-btn{background:radial-gradient(circle at 50% 42%,#383838,#303030 35%,#282828,#222 85%,#1e1e1e);box-shadow:inset 0 1px #ffffff0f,inset 0 -1px #0003,0 2px 4px #00000040,0 1px 2px #00000026;color:#aaa}.op1.dark-mode .circ-btn:active{background:radial-gradient(circle at 50% 42%,#222,#1a1a1a 60%,#151515);box-shadow:inset 0 2px 5px #0006,0 .5px .5px #0000001a}.op1.dark-mode .circ-active{background:radial-gradient(circle at 50% 42%,#252525,#1e1e1e 40%,#181818,#141414)!important;box-shadow:inset 0 2px 4px #0000004d,0 .5px 1px #00000026!important;color:var(--orange)!important}.op1.dark-mode .wk{background:linear-gradient(180deg,#3c3c3c66,#3c3c3c00 3%),linear-gradient(90deg,rgba(255,255,255,.01) 0%,transparent 8%,transparent 92%,rgba(255,255,255,.01) 100%),linear-gradient(180deg,#2c2c2c,#282828 8%,#252525 20%,#222,#1f1f1f 60%,#1c1c1c 78%,#1a1a1a);box-shadow:inset 0 2px 1px #ffffff0a,inset 2px 0 2px #ffffff05,inset -2px 0 2px #0000001a,inset 0 -2px 2px #00000026,0 4px 8px #00000059,0 2px 4px #0003,0 6px 4px -2px #00000026,1px 0 2px #0000001a,-1px 0 2px #0000001a;transform:perspective(500px) rotateX(1.2deg)}.op1.dark-mode .wk:hover{transform:perspective(500px) rotateX(1.2deg) translateY(-1px);box-shadow:inset 0 2px 1px #ffffff0d,inset 2px 0 2px #ffffff05,inset -2px 0 2px #0000001a,0 6px 12px #0006,0 3px 6px #00000040,0 8px 5px -3px #0003}.op1.dark-mode .wk:active,.op1.dark-mode .wk.is-pressed{background:linear-gradient(180deg,#181818,#141414 40%,#111,#0e0e0e);transform:perspective(500px) rotateX(.6deg) translateY(3px);box-shadow:inset 0 5px 10px #00000080,inset 0 2px 4px #0000004d,inset 2px 0 4px #00000026,inset -2px 0 4px #00000026,0 1px 2px #0000001a}.op1.dark-mode .bk{background:radial-gradient(ellipse 85% 85% at 50% 48%,#2a2a2a,#333 25%,#3a3a3a,#424242,#484848 85%,#4e4e4e);box-shadow:0 -1px #ffffff0a,0 3px 6px #0006,0 1px 3px #0003,inset 0 3px 6px #00000059,inset 0 -2px 3px #ffffff05,inset 0 0 0 1px #ffffff08}.op1.dark-mode .bk:active,.op1.dark-mode .bk.is-pressed{background:radial-gradient(ellipse 85% 85% at 50% 48%,#222,#2a2a2a 25%,#303030,#383838,#3e3e3e 85%,#444);transform:translateY(2px);box-shadow:0 1px 2px #0003,inset 0 4px 8px #00000080,inset 0 -1px 2px #ffffff03}.op1.dark-mode .brand-te{color:#555}.op1.dark-mode .brand-name{color:#666}.op1.dark-mode .brand-name em{color:#444}.op1.dark-mode .octave-ind{color:var(--orange)}.op1.dark-mode .enc-bezel{background:linear-gradient(160deg,#2a2a2a,#1a1a1a 45%,#111);box-shadow:0 4px 8px #00000059,0 2px 4px #0003,0 6px 4px -2px #00000040,inset 0 .5px #ffffff0a}.op1.dark-mode .vol-knob{background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.04) 0%,transparent 40%),radial-gradient(circle at 50% 50%,#3a3a3a,#2a2a2a 35%,#1a1a1a 65%,#111);box-shadow:0 3px 6px #00000059,0 1px 2px #0003,inset 0 0 0 .5px #ffffff08}.op1.dark-mode .speaker-grille .dot{background:#333}.op1.dark-mode .tile,.op1.dark-mode .tile-enc{box-shadow:inset 1px 1px #ffffff08,inset -1px -1px #0003}.op1.dark-mode .preset-label{color:#444}.op1.dark-mode .oled{box-shadow:inset 0 4px 10px #000000f2,inset 0 1px 3px #000000fa,inset 0 0 0 1px #000000b3,0 0 0 2px #050505,0 0 0 3.5px #111,0 0 0 4.5px var(--tile-bg),0 1px 1px #ffffff08}.op1.dark-mode .bottom-half{background:linear-gradient(180deg,#141414 0%,var(--tile-bg) 4%,var(--tile-bg) 100%);box-shadow:inset 0 3px 6px #00000026,inset 0 1px 2px #0000001a}.op1.dark-mode .circ-rec:after{box-shadow:inset 0 1px 2px #0006,0 0 4px #f265224d,0 .5px 1px #0003}.op1.dark-mode .gain-line,.op1.dark-mode .gain-cross{background:#444}.op1.dark-mode .gain-dot{background:#555}.ai-chat-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:500;display:flex;align-items:center;justify-content:flex-end;padding:20px;animation:ai-fade-in .2s ease}@keyframes ai-fade-in{0%{opacity:0}to{opacity:1}}.ai-chat{width:360px;height:480px;background:#111;border:1px solid #2a2a2a;border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px #00000080;animation:ai-slide-in .3s cubic-bezier(.2,0,.2,1)}@keyframes ai-slide-in{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}.ai-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #222;flex-shrink:0}.ai-header-left{display:flex;align-items:center;gap:8px}.ai-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 6px #f2652280;animation:ai-pulse 2s ease-in-out infinite}@keyframes ai-pulse{0%,to{opacity:1}50%{opacity:.5}}.ai-title{font-family:JetBrains Mono,monospace;font-size:11px;font-weight:500;color:#ddd;letter-spacing:.5px}.ai-header-right{display:flex;gap:8px}.ai-clear,.ai-close{background:none;border:none;color:#666;font-size:14px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:color .15s}.ai-clear:hover,.ai-close:hover{color:#ccc}.ai-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}.ai-messages::-webkit-scrollbar{width:4px}.ai-messages::-webkit-scrollbar-track{background:transparent}.ai-messages::-webkit-scrollbar-thumb{background:#333;border-radius:2px}.ai-welcome{display:flex;flex-direction:column;gap:12px;padding:10px 0}.ai-welcome-text{font-size:11px;color:#888;line-height:1.6;font-family:JetBrains Mono,monospace}.ai-quick-prompts{display:flex;flex-wrap:wrap;gap:6px}.ai-quick{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:6px;padding:6px 10px;font-family:JetBrains Mono,monospace;font-size:9px;color:#aaa;cursor:pointer;transition:all .15s}.ai-quick:hover{background:#222;border-color:var(--orange);color:#ddd}.ai-msg{max-width:85%;padding:8px 12px;border-radius:10px;font-family:JetBrains Mono,monospace;font-size:10px;line-height:1.6}.ai-msg-user{align-self:flex-end;background:var(--orange);color:#fff;border-bottom-right-radius:3px}.ai-msg-assistant{align-self:flex-start;background:#1e1e1e;color:#ccc;border-bottom-left-radius:3px;border:1px solid #2a2a2a}.ai-msg-text{white-space:pre-wrap;word-break:break-word}.ai-typing{display:flex;gap:4px;padding:4px 0}.ai-typing-dot{width:5px;height:5px;border-radius:50%;background:#666;animation:ai-bounce 1.2s ease-in-out infinite}.ai-typing-dot:nth-child(2){animation-delay:.2s}.ai-typing-dot:nth-child(3){animation-delay:.4s}@keyframes ai-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-4px)}}.ai-error{font-size:9px;color:#ff4040;padding:6px 10px;background:#ff404014;border-radius:6px;border:1px solid rgba(255,64,64,.2)}.ai-input-form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #222;flex-shrink:0}.ai-input{flex:1;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:8px;padding:8px 12px;font-family:JetBrains Mono,monospace;font-size:10px;color:#ddd;outline:none;transition:border-color .15s}.ai-input:focus{border-color:var(--orange)}.ai-input::placeholder{color:#555}.ai-input:disabled{opacity:.5}.ai-send{width:34px;height:34px;border:none;border-radius:8px;background:var(--orange);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.ai-send:hover{background:#d85a1e}.ai-send:disabled{background:#333;color:#666;cursor:not-allowed}.product-info{position:relative;width:1060px;max-width:96vw;background:#fafafa;border-radius:16px;padding:32px 40px;box-shadow:0 2px 12px #0000000a;border:1px solid rgba(0,0,0,.06);animation:info-appear .5s cubic-bezier(.2,0,.2,1)}.product-info.info-compact{animation:info-expand .5s cubic-bezier(.2,0,.2,1)}@keyframes info-expand{0%{opacity:0;transform:translateY(10px) scale(.98);max-height:0}to{opacity:1;transform:translateY(0) scale(1);max-height:600px}}@keyframes info-appear{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.info-dismiss{position:absolute;top:16px;right:20px;background:none;border:none;font-size:16px;color:#bbb;cursor:pointer;padding:4px 8px;border-radius:4px;transition:color .15s}.info-dismiss:hover{color:#666}.info-content{display:flex;flex-direction:column;gap:20px}.info-hero{display:flex;flex-direction:column;gap:4px}.info-title{font-family:JetBrains Mono,monospace;font-size:22px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.info-subtitle{font-family:JetBrains Mono,monospace;font-size:11px;font-weight:300;color:#888;letter-spacing:1px;text-transform:uppercase}.info-desc{font-family:JetBrains Mono,monospace;font-size:12px;font-weight:300;color:#555;line-height:1.8;max-width:700px}.info-features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.info-feature{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.04)}.info-feature-icon{font-size:18px;flex-shrink:0;margin-top:1px}.info-feature div{display:flex;flex-direction:column;gap:2px}.info-feature strong{font-family:JetBrains Mono,monospace;font-size:10px;font-weight:600;color:#2a2a2a}.info-feature span{font-family:JetBrains Mono,monospace;font-size:9px;font-weight:300;color:#888;line-height:1.4}.info-tech{display:flex;flex-wrap:wrap;gap:6px}.info-tech-tag{font-family:JetBrains Mono,monospace;font-size:9px;font-weight:400;color:#666;background:#f0f0ee;padding:4px 10px;border-radius:4px;letter-spacing:.3px}.info-credits{display:flex;align-items:center;gap:12px;padding-top:8px;border-top:1px solid rgba(0,0,0,.05)}.info-credits span{font-family:JetBrains Mono,monospace;font-size:10px;color:#888}.info-credits strong{color:#333;font-weight:500}.info-link{font-family:JetBrains Mono,monospace;font-size:10px;color:var(--orange);text-decoration:none;font-weight:400}.info-link:hover{text-decoration:underline}.info-toggle{width:32px;height:32px;border:1px solid rgba(0,0,0,.08);border-radius:50%;background:#fafafa;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.2,0,.2,1);box-shadow:0 1px 4px #0000000a;animation:info-pop-in .4s cubic-bezier(.34,1.56,.64,1)}@keyframes info-pop-in{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.info-toggle:hover{background:#fff;border-color:var(--orange);box-shadow:0 2px 8px #00000014;transform:scale(1.1)}.info-toggle-icon{font-family:JetBrains Mono,monospace;font-size:12px;font-weight:500;color:#888;font-style:italic}@media (max-width: 900px){.info-features{grid-template-columns:repeat(2,1fr)}.product-info{padding:24px 20px}}@media (max-width: 600px){.info-features{grid-template-columns:1fr}}.app-wrapper:has(.dark-mode) .product-info{background:#1a1a1a;border-color:#ffffff0f}.app-wrapper:has(.dark-mode) .info-title{color:#eee}.app-wrapper:has(.dark-mode) .info-subtitle{color:#666}.app-wrapper:has(.dark-mode) .info-desc{color:#999}.app-wrapper:has(.dark-mode) .info-feature{background:#222;border-color:#ffffff0a}.app-wrapper:has(.dark-mode) .info-feature strong{color:#ddd}.app-wrapper:has(.dark-mode) .info-feature span{color:#777}.app-wrapper:has(.dark-mode) .info-tech-tag{background:#252525;color:#888}.app-wrapper:has(.dark-mode) .info-credits span{color:#777}.app-wrapper:has(.dark-mode) .info-credits strong{color:#ccc}.app-wrapper:has(.dark-mode) .info-dismiss{color:#555}.app-wrapper:has(.dark-mode) .info-dismiss:hover{color:#aaa}.app-wrapper:has(.dark-mode) .info-toggle{background:#222;border-color:#ffffff14}.app-wrapper:has(.dark-mode) .info-toggle:hover{background:#2a2a2a}.app-wrapper:has(.dark-mode) .info-toggle-icon{color:#666}.app-wrapper:has(.dark-mode) .info-credits{border-color:#ffffff0d}.demo-caption{position:absolute;bottom:-50px;left:50%;transform:translate(-50%);background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px 20px;z-index:300;animation:caption-in .4s cubic-bezier(.2,0,.2,1);white-space:nowrap}.demo-caption span{font-family:JetBrains Mono,monospace;font-size:11px;font-weight:400;color:#fff;letter-spacing:.3px}@keyframes caption-in{0%{opacity:0;transform:translate(-50%) translateY(6px)}to{opacity:1;transform:translate(-50%) translateY(0)}}