:root{color-scheme:dark;--bg:#0b1012;--panel:#151d20;--line:#2a3639;--ink:#e8eeeb;--muted:#94a3a4;--green:#8ce9b8;--orange:#f3b575}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,#18302c55,transparent 60%),var(--bg);color:var(--ink);font:15px/1.6 system-ui,sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);color:var(--ink);background:#1b2528;border-radius:5px;padding:9px 14px;font:600 11px ui-monospace,monospace;letter-spacing:.04em}button:hover{border-color:var(--green)}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}button:disabled{opacity:.4;cursor:not-allowed}button.active{background:var(--green);color:#13231a;border-color:var(--green)}a{color:var(--muted);text-decoration:none}a:hover{color:var(--green)}main{max-width:1220px;margin:auto;padding:28px 32px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:22px}.brand{font:900 25px ui-monospace,monospace;color:var(--ink);letter-spacing:-1px}.brand span{color:var(--green)}.header-right{display:flex;gap:24px;align-items:center;font:11px ui-monospace,monospace}.tag{border:1px solid var(--line);border-radius:20px;padding:5px 11px}.intro{padding:42px 0 34px}.eyebrow{font:11px ui-monospace,monospace;letter-spacing:.2em;color:var(--green);margin:0 0 16px}h1{font-size:clamp(32px,4.8vw,58px);letter-spacing:-.055em;line-height:1.08;margin:0 0 20px;font-weight:650}h1 em{font-style:normal;color:var(--green)}.description{color:var(--muted);font-size:14px;margin:0}.instrument{background:linear-gradient(145deg,#1a2427,#11191c);border:1px solid #3a4a4d;border-radius:12px;box-shadow:0 28px 80px #0006;padding:20px}.topline{display:flex;justify-content:space-between;gap:10px;font:10px ui-monospace,monospace;letter-spacing:.05em;color:var(--muted);padding-bottom:17px}.topline b{font-weight:400;color:var(--green)}#lamp{display:inline-block;width:6px;height:6px;border-radius:50%;background:#52615a;margin-right:5px}#lamp.on{background:var(--green);box-shadow:0 0 9px var(--green)}.dashboard{display:grid;grid-template-columns:140px minmax(250px,1fr) 180px;gap:20px;align-items:stretch}.transport{display:grid;gap:8px}.play{background:var(--green);color:#12261b;border-color:var(--green);font-size:15px}.play.running{background:#263f34;color:var(--green)}.record.recording{background:#e36a63;color:#1e1413}.return{color:var(--orange)}.screen{background:#091612;border:1px solid #2d5040;border-radius:5px;padding:15px;color:var(--green);font-family:ui-monospace,monospace;min-width:0;box-shadow:inset 0 0 22px #0005}.screen-top,.screen-bottom{display:flex;justify-content:space-between;font-size:9px;gap:6px}.screen-bottom{color:#69a98b;font-size:8px;margin-top:12px}.family-display{font-size:26px;line-height:1.4;letter-spacing:.06em;margin:9px 0}.steps{display:grid;grid-template-columns:repeat(16,1fr);gap:3px}.step{height:17px;background:#18362a;border-bottom:2px solid #28543d}.step:nth-child(4n+1){background:#254b38}.step.on{background:var(--green);box-shadow:0 0 8px #8ce9b866}.tempo{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;background:#11191c;border:1px solid var(--line);border-radius:5px}.tempo label{font:10px ui-monospace,monospace;color:var(--muted)}.tempo div{display:flex;align-items:center;gap:3px}.tempo button{padding:6px 8px}.tempo input{appearance:textfield;width:80px;border:0;background:none;color:var(--ink);font:38px ui-monospace,monospace;text-align:center}.tempo input::-webkit-inner-spin-button{display:none}.tempo span{font:9px ui-monospace,monospace;color:var(--muted)}.settings{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:19px 0;border-bottom:1px solid var(--line)}.profiles{display:flex;gap:4px;margin-right:auto}.settings label{font:10px ui-monospace,monospace;color:var(--muted)}select{color:var(--ink);background:#11191c;border:1px solid var(--line);border-radius:4px;padding:7px 3px;font:10px ui-monospace,monospace}.macros{display:grid;grid-template-columns:repeat(4,1fr);padding:22px 0 24px}.macro{padding:0 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:11px}.macro:last-child{border:0}.dial{--angle:0deg;display:block;width:64px;height:64px;background:conic-gradient(from 220deg,var(--green) var(--angle),#33413f 0 280deg,transparent 0);border-radius:50%;position:relative}.dial:before{content:'';position:absolute;inset:6px;background:linear-gradient(140deg,#34403f,#182222);border:1px solid #4a5754;border-radius:50%;box-shadow:3px 6px 8px #0007}.dial:after{content:'';position:absolute;width:3px;height:17px;background:var(--green);left:31px;top:10px;transform-origin:1px 22px;transform:rotate(calc(var(--angle) - 140deg));border-radius:2px}.macro-name{display:flex;justify-content:space-between;width:100%;font:10px ui-monospace,monospace}.macro output{color:var(--green)}input[type=range]{width:100%;height:4px;accent-color:var(--green);cursor:pointer}.macro small{font-size:10px;color:var(--muted)}.key-heading,.key-footer{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font:9px ui-monospace,monospace;padding:13px 0}.key-heading{border-top:1px solid var(--line)}.keyboard{height:146px;position:relative;display:grid;grid-template-columns:repeat(16,1fr);gap:3px;min-width:800px}.keys-scroll{overflow-x:auto;scrollbar-width:thin}.white-key{padding:72px 2px 8px;border:1px solid #9aaba1;background:linear-gradient(#d6dfd8,#afbeb4);color:#24372b;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;border-radius:3px 3px 5px 5px;box-shadow:0 4px 0 #54645a;touch-action:none;font-size:8px;line-height:1.3;letter-spacing:0}.white-key .index{font-size:8px;color:#586c5d}.white-key.selected{background:linear-gradient(#b7f7cc,#83cf9e)}.white-key.pressed{transform:translateY(3px);box-shadow:0 1px 0 #54645a}.black-key{position:absolute;top:0;width:4.4%;height:83px;padding:7px 2px;background:linear-gradient(#33413a,#111c16);color:#b8cfc0;border:1px solid #536556;box-shadow:0 4px 0 #050a07;border-radius:0 0 5px 5px;z-index:2;touch-action:none;font-size:8px;line-height:1.4}.black-key.pressed{background:var(--orange);color:#1d2117;transform:translateY(2px);box-shadow:0 2px 0 #493e27}.key-footer{font-size:8px}.scenes-row{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:15px;font:10px ui-monospace,monospace;color:var(--muted)}#scenes{display:flex;gap:4px;margin-right:auto}#scenes button{padding:7px 10px}.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:40px 0}.note-number{font:10px ui-monospace,monospace;color:var(--green)}h2{font-size:15px;font-weight:500;letter-spacing:-.02em}.notes p{font-size:12px;color:var(--muted);line-height:1.8}footer{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;border-top:1px solid var(--line);padding:22px 0;color:#718382;font:9px ui-monospace,monospace}#message{color:var(--orange)}@media(max-width:850px){main{padding:20px 16px}.dashboard{grid-template-columns:105px 1fr}.tempo{grid-column:1/-1;flex-direction:row;padding:10px}.tempo input{font-size:28px}.instrument{padding:14px}.mono{display:none}.macro{padding:0 10px}.macro small{font-size:8px}.notes{gap:18px}.settings{gap:8px}.family-display{font-size:21px}.key-footer{flex-direction:column}.scenes-row{flex-wrap:wrap}}@media(max-width:500px){.intro{padding-top:30px}.header-right{gap:12px;font-size:9px}.tag{display:none}.description{font-size:12px}.dashboard{gap:10px;grid-template-columns:90px 1fr}.screen{padding:10px}.screen-top{font-size:8px}.family-display{font-size:18px}.topline{font-size:8px}#audio-state{max-width:190px;text-align:right}.screen-bottom{font-size:7px}.macros{gap:15px 0;grid-template-columns:repeat(2,1fr)}.macro:nth-child(2){border:0}.notes{grid-template-columns:1fr;gap:10px}.notes article{border-bottom:1px solid var(--line);padding-bottom:10px}.key-heading{font-size:8px}.profiles{width:100%}#scenes button{padding:6px 8px}.scenes-row{gap:7px}#midi,#panic{padding:7px 10px}}

.air-control{display:flex;align-items:center;gap:10px;width:100%;padding-top:10px;color:var(--green)!important}.air-control input{max-width:240px}.air-control output{min-width:24px}