@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#dddeda;background:#202321;font-synthesis:none;--orange:#fa7739;--ink:#313732;--panel:#d6d5c8;--line:#a6a89d}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f57b42;outline-offset:3px}button{color:inherit}a{color:inherit;text-decoration:none}button{border:0}button:hover:not(:disabled){filter:brightness(1.1)}.topbar{height:89px;border-bottom:1px solid #41463f;padding:0 3.7vw;display:flex;justify-content:space-between;align-items:center;gap:20px}.wordmark{font-size:20px;font-weight:700;letter-spacing:1.6px;white-space:nowrap}.wordmark i{color:var(--orange);font-style:normal;margin:0 4px}.wordmark span{display:block;font-size:10px;font-weight:500;letter-spacing:3.1px;margin-top:7px;color:#969e92}.top-actions{display:flex;align-items:center;gap:22px}.top-actions button{font-size:13px;background:none;padding:8px 0}.top-actions button span{color:var(--orange)}.audio-status{font:11px monospace;letter-spacing:1px;color:#9fa794}.audio-status.ready{color:#b6cf9b}.audio-status:before{content:'';display:inline-block;width:6px;height:6px;background:currentColor;border-radius:50%;margin-right:8px}main{max-width:1600px;margin:auto;padding:37px 3.7vw 22px}.workspace-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:29px}.eyebrow{font-size:11px;letter-spacing:2px;color:#a8aea2;font-weight:600}h1{font-weight:500;font-size:29px;letter-spacing:-1px;margin:8px 0 0}.session-label{font:10px monospace;letter-spacing:1px;color:#a0a795;display:flex;align-items:center;gap:8px}.live-dot{width:5px;height:5px;background:#afbfa0;border-radius:50%}.machine{background:var(--panel);color:var(--ink);border-radius:9px 9px 12px 12px;border:1px solid #eeeee2;border-bottom:9px solid #8c9186;box-shadow:0 15px 30px #0004,0 4px 0 #1117;position:relative;padding:0 28px;background-image:linear-gradient(120deg,#ffffff15,transparent 65%)}.machine:before,.machine:after{content:'+';font:13px monospace;position:absolute;top:16px;color:#777f73;background:#b5b9ab;border-radius:50%;width:13px;height:13px;text-align:center;line-height:12px;box-shadow:inset 0 1px 2px #0006}.machine:before{left:9px}.machine:after{right:9px}.machine-top{height:102px;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid #3f443c}.model{display:flex;align-items:center;gap:23px}.model-number{font-family:'Barlow Condensed',sans-serif;font-size:74px;line-height:1;font-style:italic;letter-spacing:-2px}.model h2{font-size:23px;letter-spacing:2.1px;font-weight:700;margin:0 0 6px}.model div>span{font-size:10px;letter-spacing:2.6px}.edition{font-weight:700;font-size:22px;letter-spacing:2px;text-align:right}.edition b{font-size:12px;border:1px solid;padding:5px;margin-left:8px;vertical-align:middle}.edition span{display:block;font-size:9px;letter-spacing:2.3px;font-weight:500;margin-top:9px}.voices{display:grid;grid-template-columns:.8fr repeat(7,1fr) 1.5fr 1fr 1fr;min-width:960px;padding:21px 0 16px}.voice{border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:0 4px;position:relative;min-width:0}.voice:last-child{border-right:0}.voice-title{background:none;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:15px;letter-spacing:.4px;line-height:1.05;font-weight:600;height:37px;padding:0 2px 8px;width:100%;border-bottom:2px solid #94998a;position:relative}.voice-title.selected{border-bottom-color:var(--orange);color:#8e3510}.voice-title:before{content:'';display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;background:#7a7e72;vertical-align:middle}.voice-title.selected:before,.voice-title.hit:before{background:#f97534;box-shadow:0 0 6px #f96a35}.knob-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:12px;width:100%}.knob-label{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}.knob{position:relative;touch-action:none;cursor:ns-resize;background:repeating-conic-gradient(#464a43 0deg 5deg,#363b35 5deg 10deg);width:39px;height:39px;border-radius:50%;box-shadow:0 3px 3px #0006,0 0 0 4px #bec0b1,inset 0 1px 1px #888;border:1px solid #242922;padding:0}.knob:before{content:'';position:absolute;inset:4px;border-radius:50%;background:linear-gradient(#565b50,#343a32);box-shadow:inset 0 1px 1px #818574}.knob:after{content:'';width:3px;height:13px;position:absolute;left:17px;top:3px;background:#edeedc;border-radius:1px;transform-origin:1.5px 16px;transform:rotate(var(--angle,0deg))}.knob.orange:after{background:var(--orange)}.knob-value{font:9px monospace;color:#646b5e;min-height:10px}.knob-row{display:flex;gap:10px;justify-content:center;width:100%}.voice-space{flex:1}.voice-select{margin-top:15px;background:#bfc2b5;border:1px solid #969e8d;border-radius:3px;font:11px 'Barlow Condensed',sans-serif;padding:5px 7px;width:90%;letter-spacing:.6px}.voice-select[aria-pressed=true]{background:#454b3f;color:#eeefdf}.control-deck{display:grid;grid-template-columns:1.35fr 1fr 1.2fr 1.55fr .7fr;gap:23px;border-top:2px solid #4d5447;border-bottom:2px solid #4d5447;padding:20px 0 18px}.section-label{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1.1px;font-weight:600;display:block}.transport-buttons{display:flex;gap:8px;margin-top:15px}.transport-buttons button{height:64px;min-width:49px;flex:1;background:linear-gradient(#e8e8db,#c4c7b8);border:1px solid #8c9685;border-radius:3px;box-shadow:0 3px 0 #8c9383;font-size:20px;padding:8px 5px 5px}.transport-buttons button span{display:block;font:10px 'Barlow Condensed',sans-serif;font-weight:600;white-space:nowrap;margin-top:9px}.transport-buttons .play{background:linear-gradient(#ff995f,#eb7036);border-color:#b4552b;box-shadow:0 3px 0 #9e552e}.transport-buttons .play.playing{box-shadow:0 1px 0 #9e552e,inset 0 0 12px #ffbc7a;transform:translateY(2px)}#record{color:#924130}#record[aria-pressed=true]{background:#e79c7f}.tempo-panel label{display:flex;justify-content:space-between}.tempo-panel label span{color:#777d70}.tempo-screen{display:flex;background:#252d24;border:3px solid #979e8b;border-radius:3px;margin:9px 0 7px;height:56px;padding:3px 8px;align-items:center;gap:10px}.tempo-screen input{background:none;border:0;width:85px;color:#fa844a;font:38px 'Barlow Condensed',monospace;padding:0;appearance:textfield;-moz-appearance:textfield;outline-offset:0}.tempo-screen input::-webkit-inner-spin-button{display:none}.tempo-screen>span{font:15px monospace;color:#b1b795;border-left:1px solid #55604c;padding-left:10px}.tempo-screen>span span{display:block;font-size:9px;color:#8c987d;margin-top:2px}.tempo-panel>button{background:none;border-bottom:1px solid #959e8a;font:10px 'Barlow Condensed',sans-serif;letter-spacing:.8px;padding:0 0 2px}.timing-panel label{font:11px 'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.6px;display:flex;justify-content:space-between}.timing-panel input[type=range]{width:100%;height:14px;accent-color:#58604f;margin:4px 0 8px}.small-fields{display:flex;gap:10px}.small-fields label{display:block;flex:1}select,input[type=number]{color:inherit}.tempo-screen input[type=number]{color:#fa844a}.small-fields select,.small-fields input{margin-top:4px;width:100%;font:12px monospace;background:#e3e5d6;border:1px solid #a4ad97;border-radius:2px;padding:3px 2px}.memory-select{display:flex;gap:8px;margin-top:12px}.memory-select label{display:block;font:10px 'Barlow Condensed',sans-serif;letter-spacing:.6px;flex:1}.memory-select select{display:block;width:100%;margin-top:5px;background:#e6e7db;border:1px solid #a3ab98;font:17px 'Barlow Condensed',sans-serif;padding:5px}.memory-actions{display:flex;gap:12px;margin-top:11px}.memory-actions button{background:none;font:10px 'Barlow Condensed',sans-serif;letter-spacing:.4px;padding:0 0 3px;border-bottom:1px solid #949d86;white-space:nowrap}.master-panel{text-align:center}.master-panel .knob-wrap{margin-top:9px}.master-panel .knob-label,.master-panel .knob-value{display:none}.master-panel .knob{width:46px;height:46px}.master-panel .knob:after{left:20px;height:16px;transform-origin:1.5px 19px}.meter{display:flex;gap:3px;margin:18px auto 0;height:7px;max-width:90px}.meter i{flex:1;background:#9fa78e}.meter i.on{background:#75834c;box-shadow:0 0 4px #839953}.meter i.on:nth-last-child(-n+2){background:#e58048}.step-heading{display:flex;align-items:center;justify-content:space-between;margin:22px 0 19px;gap:15px}.selected-voice{display:flex;align-items:center;gap:15px}.selected-voice b{font:16px 'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.3px;color:#a84620}.write-modes{display:flex;border:1px solid #98a18c;padding:3px;border-radius:3px;gap:3px}.write-modes button{background:none;padding:6px 12px;font:11px 'Barlow Condensed',sans-serif;letter-spacing:.5px}.write-modes button[aria-pressed=true]{background:#444b3e;color:#f0f0e0;border-radius:2px}.pattern-readout{font:12px monospace;letter-spacing:2px}.steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:9px}.step{background:linear-gradient(#f1f0e6,#d6d8c8);border:1px solid #a0a694;border-radius:4px;height:82px;box-shadow:0 5px 0 #979f8b,0 6px 5px #77806f77;padding:10px 7px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;font:22px 'Barlow Condensed',sans-serif;position:relative}.step:nth-child(-n+4){background:linear-gradient(#f59860,#dd7643);border-color:#bc794b}.step:nth-child(n+5):nth-child(-n+8){background:linear-gradient(#f2c882,#dab172);border-color:#bda472}.step:nth-child(n+9):nth-child(-n+12){background:linear-gradient(#ede4b0,#d8ce9a);border-color:#b4af82}.step .led{width:12px;height:5px;border-radius:2px;background:#837b5a;box-shadow:inset 0 1px 2px #0005}.step.active .led{background:#ff4b14;box-shadow:0 0 7px #ff6111,0 0 1px #fff}.step.weak .led{background:#aa542a;box-shadow:none}.step.flam .led{width:19px;background:linear-gradient(90deg,#ff4b14 40%,#625a41 40% 60%,#ff4b14 60%)}.step.current{outline:2px solid #333d2b;outline-offset:3px;transform:translateY(2px);box-shadow:0 2px 0 #979f8b}.step:disabled{opacity:.3}.step small{position:absolute;right:5px;top:21px;font:10px monospace}.machine-bottom{display:flex;justify-content:space-between;gap:15px;padding:21px 0 17px;font:9px 'Barlow Condensed',sans-serif;letter-spacing:1px;color:#59614e}.machine-bottom b{font-weight:500;border:1px solid #abb39c;padding:2px 4px;margin:0 2px}.arrangement{margin-top:30px;border:1px solid #454c40;border-radius:7px;background:#262b25;padding:0 22px}.arrangement-top{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #454c40;min-height:61px}.view-tabs{display:flex;gap:24px;align-self:stretch}.view-tabs button{background:none;font-size:13px;font-weight:500;padding:0;border-bottom:2px solid transparent;color:#929e89}.view-tabs button[aria-selected=true]{color:#e0e5d8;border-bottom-color:var(--orange)}.arrangement-actions{display:flex;gap:20px}.arrangement-actions button{font-size:12px;color:#bcc5af;background:none;padding:6px 0}.pattern-grid{display:grid;grid-template-columns:150px repeat(16,minmax(0,1fr));gap:5px 8px;padding:19px 0 12px;min-width:700px}.grid-label{display:flex;align-items:center;gap:9px;height:23px}.grid-label>button:first-child{background:none;font:12px 'Barlow Condensed',sans-serif;letter-spacing:.8px;padding:0;text-align:left;flex:1;color:#aab6a0}.grid-label.selected>button:first-child{color:var(--orange)}.mute{background:none;font:9px monospace;padding:3px;color:#a7b49b;border:1px solid #49553f;border-radius:2px}.mute[aria-pressed=true]{background:#9c663e;color:#fff}.grid-cell{height:23px;border-radius:2px;background:#363f31;border:1px solid #414b3b;position:relative;padding:0}.grid-cell.beat{border-left-color:#77816c}.grid-cell.active{background:#be663a;border-color:#d07648}.grid-cell.weak{background:#6e6243;border-color:#907b4f}.grid-cell.flam:after{content:'Ⅱ';font-size:12px;color:#fbd0a7;position:absolute;inset:2px}.grid-cell.current{outline:1px solid #e0e7cf;outline-offset:1px}.grid-cell:disabled{opacity:.2}.grid-number{font:10px monospace;text-align:center;color:#8d9a7f;margin-bottom:3px}.grid-footer{display:flex;justify-content:space-between;gap:15px;padding:10px 0 18px;font-size:10px;color:#8d9b81}.grid-footer>span:first-child{display:flex;align-items:center;gap:7px}.legend{width:6px;height:6px;background:#bf683d;margin-left:10px}.legend:first-child{margin-left:0}.legend.weak{background:#887950}.legend.flam{border-left:2px solid #efb082;border-right:2px solid #efb082;background:none}.track-toolbar{display:flex;align-items:center;gap:15px;padding-top:20px;font-size:12px;flex-wrap:wrap}.track-toolbar select{background:#3a4433;border:1px solid #66725b;padding:4px;margin-left:7px}.track-toolbar button{background:#454f3d;padding:9px 14px;border-radius:3px;font-size:12px}#chain{display:flex;flex-wrap:wrap;gap:9px;min-height:100px;padding-top:20px}.measure{display:flex;background:#3b4434;border:1px solid #5b684e;border-radius:3px;align-self:start}.measure.playing{border-color:var(--orange)}.measure button{background:none;padding:10px;font:12px monospace}.measure button small{display:block;color:#9ba78d;font-size:9px;margin-bottom:4px}.measure button.remove{padding:10px 7px;border-left:1px solid #55604a;color:#c9a38a}.track-hint{font-size:12px;color:#98a58c;margin:12px 0 21px}footer{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#829078;padding-top:23px;font-size:10px}footer>span{font-family:'Barlow Condensed',sans-serif;letter-spacing:1.4px}footer div{display:flex;gap:18px}footer button{background:none;font-size:10px;padding:0}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#edf0e1;color:#333b2b;border-left:4px solid var(--orange);padding:13px 22px;box-shadow:0 5px 25px #0004;border-radius:4px;font-size:13px;z-index:5;opacity:0;pointer-events:none;transition:opacity .15s;max-width:90vw}#toast.show{opacity:1}dialog{background:#e1e2d5;color:#343c2e;border:1px solid #f0f2e5;border-radius:8px;padding:30px;max-width:810px;width:90vw;max-height:85vh;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#10170eb3;backdrop-filter:blur(4px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading .eyebrow{color:#6b775f}.dialog-heading button{background:none;font-size:26px}dialog h2{font-size:34px;font-weight:500;letter-spacing:-1px;margin:13px 0 20px}.guide-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px}.guide-columns h3{font-size:16px}.guide-columns p{font-size:14px;line-height:1.7;color:#526048}.guide-columns a{text-decoration:underline;text-underline-offset:3px}
@media(min-width:1450px){.voices{padding-top:25px;padding-bottom:22px}.knob{width:44px;height:44px}.knob:after{left:20px;transform-origin:1.5px 19px}.knob-wrap{margin-top:15px}.voice-title{font-size:17px}.step{height:90px}}
@media(max-width:1150px){main{padding:25px 22px}.topbar{padding:0 22px}.machine{padding:0 20px}.control-deck{gap:12px}.transport-buttons{gap:5px}.transport-buttons button{min-width:38px}.voice-scroll{overflow-x:auto}.top-actions{gap:14px}.audio-status{display:none}.model h2{font-size:20px}.step-heading{gap:10px}.write-modes button{padding:5px 8px}.selected-voice{gap:8px}.steps{gap:7px}.machine-bottom{font-size:8px}.tempo-screen{gap:4px;padding:3px}.tempo-screen input{width:70px}.pattern-grid{grid-template-columns:120px repeat(16,minmax(0,1fr));gap:5px}.grid-footer{font-size:9px}}
@media(max-width:800px){.topbar{height:80px}.wordmark{font-size:16px}.wordmark span{font-size:8px;letter-spacing:2.4px}.top-actions{gap:12px}.top-actions button{font-size:11px}.top-actions #help{display:none}.workspace-heading{margin-bottom:22px}.session-label{display:none}h1{font-size:25px}.model-number{font-size:64px}.model{gap:15px}.model h2{font-size:18px;letter-spacing:1px}.model div>span{font-size:8px;letter-spacing:1.5px}.edition{font-size:16px}.edition span{font-size:8px}.control-deck{grid-template-columns:1.2fr 1fr 1.1fr;gap:20px 15px}.memory-panel{grid-column:1/3}.memory-select{margin-top:5px}.memory-select select{padding:3px}.master-panel{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px}.master-panel .section-label{width:100%}.master-panel #master-knob{flex:1}.master-panel .meter{margin:8px 0;min-width:35px}.step-heading{flex-wrap:wrap}.selected-voice{flex:1}.write-modes{order:3;width:100%;justify-content:center}.step{height:67px;padding:9px 4px;font-size:19px}.steps{gap:5px}.step .led{width:8px}.machine-bottom{font-size:8px;line-height:1.7}.machine-bottom span:last-child{display:none}.arrangement{padding:0 14px}.arrangement-top{flex-wrap:wrap;gap:0;padding:0 0 10px}.view-tabs{height:52px}.arrangement-actions{margin-left:auto}.grid-scroll{overflow:auto}.grid-footer{font-size:10px}.grid-footer>span:last-child{display:none}footer{align-items:start;line-height:1.6}footer div{flex-wrap:wrap;justify-content:end;gap:4px 14px}.guide-columns{grid-template-columns:1fr;gap:0}}
@media(max-width:500px){main{padding:24px 12px}.topbar{padding:0 15px}.top-actions{gap:10px}.machine{padding:0 14px}.machine-top{height:87px}.model-number{font-size:54px}.model h2{font-size:15px}.model div>span{font-size:7px}.edition{display:none}.voice-scroll{margin:0 -5px}.voices{min-width:930px}.control-deck{grid-template-columns:1fr 1fr;gap:20px 14px}.timing-panel{grid-column:1}.memory-panel{grid-column:2;grid-row:2}.master-panel{grid-column:1/3;display:flex;justify-content:space-between;padding-top:6px;border-top:1px solid #a1a994}.master-panel .section-label{width:auto}.master-panel #master-knob{flex:none}.master-panel .knob-wrap{margin:0}.master-panel .knob{width:36px;height:36px}.master-panel .knob:after{left:16px;transform-origin:1.5px 14px;height:11px}.master-panel .meter{width:150px;max-width:150px}.memory-actions{gap:7px}.memory-actions button{font-size:9px}.memory-select{gap:5px}.memory-select label{font-size:9px}.steps{grid-template-columns:repeat(8,1fr);gap:12px 7px}.step{height:67px}.selected-voice b{font-size:15px}.selected-voice .section-label{font-size:11px}.write-modes button{padding:6px 9px}.pattern-readout{font-size:11px}.machine-bottom{padding-top:17px}.arrangement{margin-top:23px}.arrangement-actions{margin-left:0;justify-content:space-between;width:100%}.top-actions button{font-size:10px}.top-actions #save{max-width:58px}.grid-footer{padding-bottom:15px}footer{font-size:9px}footer>span{max-width:125px}.guide-columns p{font-size:14px}dialog{padding:22px}.track-toolbar{gap:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}