:root{--bg:#0a0a0a;--body:#111;--panel:#161616;--metal-edge:#2a2a2a;--btn-base:#1e1e1e;--btn-top:#252525;--accent:#d0c8b8;--active:#c8a040;--active-glow:#c8a04059;--display-bg:#0a0f08;--display-text:#c8ffc8;--display-dim:#3a6a3a;--looper-rec:#7a1818;--looper-play:#1a4020;--text:#908880;--text-dim:#403830;--screw:#1a1a1a;--font-display:"Chakra Petch", "Segoe UI", system-ui, sans-serif;--font-mono:"Share Tech Mono", "Consolas", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg);width:100%;height:100%;color:var(--text);font-family:var(--font-display);letter-spacing:.02em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;font-weight:500;overflow:hidden}body{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer;touch-action:none;background:0 0;border:none;font-family:inherit}.btn--track{position:relative}.btn--track .btn__label{color:var(--text-dim);pointer-events:none;letter-spacing:.15em;font-size:clamp(8px,1.2vmin,11px);position:absolute;bottom:-14px;left:50%;transform:translate(-50%)}.track__dot{background:#2a2a2a;border-radius:50%;width:50%;height:50%;transition:background .12s,box-shadow .12s;display:block;box-shadow:inset 0 1px 2px #000c}.btn--track.track--empty .track__dot{background:#2a2a2a}.btn--track.track--waiting .track__dot{background:#553a18;animation:1s ease-in-out infinite track-wait;box-shadow:inset 0 1px 2px #0006,0 0 8px #c8a04066}@keyframes track-wait{0%,to{opacity:.5}50%{opacity:1}}.btn--track.track--recording .track__dot{background:var(--looper-rec);animation:.5s ease-in-out infinite track-rec;box-shadow:inset 0 1px 2px #0006,0 0 10px #b42828b3}@keyframes track-rec{0%,to{opacity:.6;transform:scale(.92)}50%{opacity:1;transform:scale(1.05)}}.btn--track.track--playing .track__dot{background:#2a8040;box-shadow:inset 0 1px 2px #0006,0 0 10px #32a0508c}.btn--track.track--muted .track__dot{background:var(--looper-play);box-shadow:inset 0 1px 2px #0006}.display{background:var(--display-bg);isolation:isolate;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;border:1px solid #1a2a1a;border-radius:6px;position:relative;overflow:hidden;box-shadow:inset 0 0 24px #000000d9,inset 0 0 4px #c8ffc80f,0 0 12px #28642826}.star-field{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;z-index:0;position:absolute;inset:0}.display__scanlines{pointer-events:none;mix-blend-mode:screen;z-index:2;background:repeating-linear-gradient(#c8ffc80d 0 1px,#0000 1px 3px);position:absolute;inset:0}.display__content{z-index:1;color:var(--display-text);font-family:var(--font-mono);text-shadow:0 0 4px #c8ffc880,0 0 12px #c8ffc833;grid-template-rows:auto 1fr auto;gap:clamp(2px,.6vmin,6px);padding:clamp(6px,1.2vmin,12px);display:grid;position:absolute;inset:0}.display__header{letter-spacing:.2em;color:var(--display-text);justify-content:space-between;align-items:center;font-size:clamp(8px,1.3vmin,11px);display:flex}.display__mode{color:var(--display-text)}.display__tracks{color:var(--display-dim);font-family:var(--font-mono);letter-spacing:.05em;font-size:clamp(9px,1.4vmin,12px)}.display__pet{justify-content:center;align-items:center;min-height:0;display:flex;position:relative}.paper-plane{image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(0 1px #0006);width:auto;max-width:55%;height:auto;max-height:55%;display:block}.display__logo{text-align:center;font-family:var(--font-mono);letter-spacing:.35em;color:var(--display-text);text-transform:uppercase;text-shadow:0 0 4px #c8ffc899,0 0 14px #c8ffc840;font-size:clamp(14px,2.6vmin,22px);font-weight:400}.device-stage{background:var(--bg);box-sizing:border-box;padding:clamp(10px,2.5vmin,36px);padding-top:max(clamp(10px, 2.5vmin, 36px), env(safe-area-inset-top));padding-bottom:max(clamp(10px, 2.5vmin, 36px), env(safe-area-inset-bottom));padding-left:max(clamp(10px, 2.5vmin, 36px), env(safe-area-inset-left));padding-right:max(clamp(10px, 2.5vmin, 36px), env(safe-area-inset-right));justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.device-body{--avail-w:calc(100dvw - clamp(20px, 5vmin, 72px));--avail-h:calc(100dvh - clamp(20px, 5vmin, 72px));height:min(var(--avail-h), calc(var(--avail-w) * 9 / 16));height:min(var(--avail-h), calc(var(--avail-w) * 9 / 16));aspect-ratio:16/9;background:var(--body);border:1px solid var(--metal-edge);isolation:isolate;border-radius:16px;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0a0a0a,inset 0 4px 2px #ffffff05,inset 0 -2px 2px #00000080,0 20px 60px #000c,0 40px 100px #00000080}.device-body:before{content:"";pointer-events:none;opacity:.025;mix-blend-mode:overlay;z-index:1;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:200px 200px;position:absolute;inset:0}.device-body:after{content:"";pointer-events:none;z-index:2;background:radial-gradient(#0000 55%,#00000059 100%);position:absolute;inset:0}.screw{z-index:3;background:radial-gradient(circle at 35% 35%,#2a2a2a,#0d0d0d 70%);border:1px solid #333;border-radius:50%;width:12px;height:12px;position:absolute;box-shadow:inset 0 1px 2px #000c,0 1px 1px #ffffff05}.screw:before,.screw:after{content:"";background:#050505;margin:auto;position:absolute;inset:0;box-shadow:0 0 1px #000000e6}.screw:before{width:60%;height:1.5px}.screw:after{width:1.5px;height:60%}.screw--tl{top:10px;left:10px}.screw--tr{top:10px;right:10px}.screw--bl{bottom:10px;left:10px}.screw--br{bottom:10px;right:10px}.btn{background:linear-gradient(160deg, var(--btn-top), var(--btn-base));color:var(--accent);font-family:var(--font-display);letter-spacing:.04em;-webkit-user-select:none;user-select:none;touch-action:none;border:1px solid #2a2a2a;border-bottom:2px solid #0a0a0a;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:4px 6px;font-weight:600;transition:transform 60ms,box-shadow 60ms,border-color .12s,background .12s;display:flex;position:relative;box-shadow:0 3px 6px #000000e6,0 1px 2px #000c,inset 0 1px #ffffff0a,inset 0 -1px #0000004d}.btn__label{color:var(--accent);text-shadow:0 1px #0009;font-size:clamp(16px,4vmin,38px);line-height:1}.btn__sublabel{font-family:var(--font-mono);letter-spacing:.15em;color:var(--text-dim);font-size:clamp(9px,1.5vmin,14px)}.btn:active,.btn.btn--held{transform:translateY(2px);box-shadow:0 1px 2px #000000e6,inset 0 2px 4px #0009}.btn.btn--active{border-color:var(--active);box-shadow:0 0 14px var(--active-glow), 0 0 4px var(--active-glow), inset 0 1px 0 #ffffff08;background:linear-gradient(160deg,#2a2010,#1a1408)}.btn.btn--active .btn__label{color:var(--active);text-shadow:0 0 6px var(--active-glow)}.btn--encoder{aspect-ratio:1.6;border-radius:4px;padding:2px 6px;font-size:clamp(10px,1.6vmin,14px)}.btn--encoder .btn__label{font-size:clamp(10px,1.7vmin,14px)}.btn--track{aspect-ratio:1;border-radius:50%;min-width:36px;padding:0}.btn--track .btn__label{font-family:var(--font-mono);color:var(--text);font-size:clamp(10px,1.5vmin,13px)}.device-grid{z-index:2;grid-template-rows:12% 72% 16%;gap:clamp(4px,.7vmin,10px);padding:clamp(6px,1vmin,14px);display:grid;position:absolute;inset:0}.zone{border-radius:6px;min-height:0;position:relative}.zone--play{grid-template-columns:38fr 24fr 38fr;gap:clamp(6px,1vmin,14px);min-height:0;display:grid}.header-controls{grid-template-columns:1fr 1fr 1fr;align-items:center;gap:clamp(8px,1.5vmin,16px);height:100%;padding:0 clamp(6px,1vmin,12px);display:grid}.header-controls__group{align-items:center;gap:clamp(6px,1vmin,12px);display:flex}.header-controls__group--left{justify-content:flex-start}.header-controls__group--right{justify-content:flex-end}.header-controls__spacer{height:1px}.play-zone{justify-content:center;align-items:stretch;width:100%;min-width:0;height:100%;min-height:0;padding:0;display:flex}.play-zone__grid{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:clamp(4px,.8vmin,12px);width:100%;height:100%;display:grid}.play-zone__grid .btn{aspect-ratio:auto;width:100%;height:100%}.play-zone__grid--chord>:nth-child(7),.play-zone__grid--note>:nth-child(7){grid-area:3/1/auto/-1}.looper-bar{border-top:1px solid #1a1a1a;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:clamp(8px,1.5vmin,16px);height:100%;padding:0 clamp(6px,1vmin,12px);display:grid}.looper-bar__tracks{justify-content:flex-start;align-items:center;gap:clamp(8px,1.2vmin,14px);display:flex}.looper-bar__tracks .btn--track{width:clamp(28px,5vmin,48px);min-width:0;height:clamp(28px,5vmin,48px)}.looper-bar__bpm{color:var(--display-text);font-family:var(--font-mono);text-shadow:0 0 6px #c8ffc866;flex-direction:column;justify-content:center;align-items:center;display:flex}.looper-bar__bpm-value{font-size:clamp(18px,3.6vmin,32px);line-height:1}.looper-bar__bpm-unit{color:var(--display-dim);letter-spacing:.2em;font-size:clamp(9px,1.4vmin,12px)}.looper-bar__modes{justify-content:flex-end;align-items:center;gap:clamp(6px,1vmin,12px);display:flex}.zone--display{background:var(--display-bg);border:1px solid #1a2a1a;border-radius:8px;box-shadow:inset 0 0 20px #000c,inset 0 0 4px #c8ffc80d}.play-zone{position:relative}.fx-overlay{background:var(--display-bg);border:1px solid var(--display-dim);font-family:var(--font-mono);color:var(--display-text);text-shadow:0 0 6px #c8ffc866;letter-spacing:.15em;pointer-events:none;z-index:10;white-space:nowrap;border-radius:4px;align-items:center;gap:8px;padding:4px 10px;font-size:clamp(10px,1.5vmin,13px);animation:80ms fx-fade-in;display:flex;position:absolute;top:6px;left:50%;transform:translate(-50%)}.fx-overlay__label{color:var(--display-text)}.fx-overlay__value{color:var(--display-dim)}@keyframes fx-fade-in{0%{opacity:0;transform:translate(-50%,-4px)}to{opacity:1;transform:translate(-50%)}}.loading{z-index:100;color:var(--display-text);font-family:var(--font-mono);pointer-events:none;background:#000;justify-content:center;align-items:center;animation:.6s ease-out .9s forwards loading-fade;display:flex;position:fixed;inset:0;overflow:hidden}.loading__scanlines{pointer-events:none;z-index:1;background:repeating-linear-gradient(#c8ffc80a 0 1px,#0000 1px 3px);position:absolute;inset:0}.loading__content{z-index:2;text-shadow:0 0 6px #c8ffc880,0 0 16px #c8ffc840;flex-direction:column;align-items:center;gap:clamp(14px,3vmin,28px);display:flex;position:relative}.loading__logo{letter-spacing:0;white-space:pre;color:var(--display-text);margin:0;font-size:clamp(8px,1.8vmin,14px);line-height:1}.loading__sub{letter-spacing:.4em;color:var(--display-dim);text-transform:uppercase;font-size:clamp(10px,1.6vmin,14px)}.loading__bar{background:#3a6a3a59;border-radius:1px;width:clamp(140px,28vmin,220px);height:4px;margin-top:clamp(16px,4vmin,30px);overflow:hidden}.loading__bar-fill{background:var(--display-text);width:0;height:100%;animation:.9s cubic-bezier(.2,.7,.3,1) forwards loading-bar;box-shadow:0 0 8px #c8ffc899}@keyframes loading-bar{0%{width:0}to{width:100%}}@keyframes loading-fade{to{opacity:0;visibility:hidden}}.orientation-gate{z-index:200;color:var(--display-text);font-family:var(--font-mono);text-shadow:0 0 6px #c8ffc866;background:#000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.orientation-gate__inner{flex-direction:column;align-items:center;gap:18px;display:flex}.orientation-gate__icon{color:var(--display-text);font-size:80px;animation:2s ease-in-out infinite rotate-pulse}@keyframes rotate-pulse{0%{opacity:.5;transform:rotate(0)}50%{opacity:1;transform:rotate(-90deg)}to{opacity:1;transform:rotate(-90deg)}}.orientation-gate__text{letter-spacing:.4em;color:var(--display-text);font-size:16px}.orientation-gate__sub{letter-spacing:.3em;color:var(--display-dim);font-size:11px}