:root{--ink:#171916;--plate:#e8e5dc;--plate-hi:#f0ede5;--dim:#98958c;--olive:#b9c8a1;--acid:#d1f36c;--orange:#f47d4b;--line:#383a34;--mono:'DM Mono',monospace;--sans:'Space Grotesk',sans-serif}
*{box-sizing:border-box}html{min-width:320px;background:var(--ink)}body{margin:0;background:radial-gradient(ellipse at 52% 35%,#292c25 0,#171916 57%,#111310 100%);color:#f2f0e9;font-family:var(--sans);min-height:100vh;padding:0 30px 28px;overflow-x:hidden}.shell{width:min(1120px,100%);margin:auto}.masthead{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff17;color:#e9e6de}.brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:.09em}.brand-mark{width:26px;height:26px;background:var(--acid);border-radius:8px 8px 8px 2px;color:var(--ink);font-size:15px;font-weight:700;display:grid;place-items:center;transform:rotate(-6deg)}.brand-dot{color:var(--orange)}.edition,.share-button,.page-footer,.eyebrow,.transport-state,.bar-readout,.dial-label,.dial-value small,.micro-label,.screen-head,.step-ruler,.screen-foot,.panel-heading,.visualizer-foot,.channels-count,.voice-name small,.mute-label,.footer-mark,.toast{font-family:var(--mono);letter-spacing:.08em}.edition{font-size:9px;color:#aaa99e;display:flex;align-items:center;gap:9px}.status-dot{width:6px;height:6px;background:var(--acid);border-radius:50%;box-shadow:0 0 9px #d1f36c91}.edition-divider{color:#5d5f57}.edition-sub{color:#686a62}.share-button{border:1px solid #ffffff38;background:transparent;color:#dedbd3;border-radius:3px;padding:10px 13px;font-size:9px;letter-spacing:.09em;display:flex;gap:9px;align-items:center;cursor:pointer;transition:.2s}.share-button:hover{border-color:var(--acid);color:var(--acid)}.share-icon{font:16px var(--sans);color:var(--acid);line-height:10px}.instrument{position:relative;background:linear-gradient(137deg,#efede5 0%,#e4e1d8 52%,#d8d5cc 100%);color:var(--ink);margin:33px auto 21px;padding:0 39px;border-radius:9px;box-shadow:0 24px 72px #0006,0 2px 0 #ffffff1b inset,0 -3px 0 #00000033;overflow:hidden}.instrument:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,#fff0 0px,#fff0 4px,#ffffff06 5px);opacity:.7;mix-blend-mode:overlay}.instrument-top{height:269px;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;position:relative;border-bottom:1px solid #aaa89f}.intro{padding:22px 0 13px}.eyebrow{font-size:9px;display:flex;align-items:center;gap:10px;color:#686a60}.eyebrow-line{display:inline-block;width:19px;height:1px;background:#f47d4b}.intro h1{font-size:50px;line-height:.98;letter-spacing:-.065em;margin:17px 0 11px;font-weight:600}.intro h1 span{color:#899477}.intro-copy{font-size:12px;line-height:1.6;color:#797970;margin:0}.controls-area{justify-self:end;width:min(100%,450px);padding:14px 0 7px}.transport-row{display:flex;align-items:center;gap:11px;padding-bottom:21px;border-bottom:1px solid #c5c2b9}.play-button{height:47px;width:110px;background:var(--ink);color:#f0eee6;border:0;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;font:500 10px var(--mono);letter-spacing:.13em;transition:.2s}.play-button:hover{background:#30332c;transform:translateY(-1px)}.play-button.is-playing{background:#9cab80;color:#1b1e17}.play-glyph{font-size:12px;color:var(--acid)}.is-playing .play-glyph{color:#1c2018}.stop-button{width:34px;height:34px;border:1px solid #c2c0b6;border-radius:50%;display:grid;place-items:center;background:transparent;cursor:pointer}.stop-button span{width:8px;height:8px;background:#888980;border-radius:1px}.stop-button:hover{border-color:#f47d4b}.stop-button:hover span{background:#f47d4b}.transport-meta{display:flex;flex:1;justify-content:space-between;align-items:center;margin-left:7px}.transport-state{font-size:8px;color:#8d8e84;letter-spacing:.08em}.bar-readout{font-size:8px;color:#93948b}.bar-readout b{font-size:11px;color:#373a32;margin-left:4px;font-weight:500}.dial-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0 0}.dial-control{display:flex;align-items:center;gap:10px;min-width:102px;cursor:ns-resize;touch-action:none;outline:none}.dial{height:45px;width:45px;flex:none;border-radius:50%;background:linear-gradient(145deg,#f8f6ef,#d7d4cb);box-shadow:4px 4px 9px #0002,-3px -3px 7px #fff9,0 1px 1px #89877e inset;position:relative;transform:rotate(-135deg)}.dial:before{content:'';position:absolute;inset:5px;border-radius:50%;border:1px solid #c4c1b7}.dial-center{position:absolute;inset:14px;border-radius:50%;background:linear-gradient(145deg,#dedbd2,#f5f2e9);box-shadow:1px 1px 3px #0002}.dial-indicator{position:absolute;width:2px;height:11px;background:var(--orange);top:5px;left:21px;border-radius:2px;z-index:1;transform-origin:1px 17px}.dial-caption{display:flex;flex-direction:column;gap:4px}.dial-label{font-size:8px;color:#7e7e74}.dial-value{font:500 15px var(--mono);color:#292c26}.dial-value small{font-size:8px;color:#77786e}.dial-control:focus-visible .dial{outline:2px solid #9aab7f;outline-offset:3px}.mutate-wrap{display:flex;align-items:center;gap:9px}.mutate-button{height:40px;border:1px solid #b9b8ad;background:transparent;padding:0 13px;display:flex;align-items:center;gap:8px;font:500 9px var(--mono);letter-spacing:.1em;border-radius:3px;color:#373a31;cursor:pointer;transition:.2s}.mutate-button:hover{background:#d5ddc8;border-color:#9cab80}.mutate-spark{color:#9aab7f;font-size:17px;line-height:0}.micro-label{font-size:7px;color:#9a9a8e;writing-mode:vertical-rl;letter-spacing:.05em}.top-decoration{position:absolute;right:0;top:32px;display:flex;align-items:center;gap:9px;color:#a09f95;font:8px var(--mono)}.top-decoration i{width:37px;height:1px;background:#c0beb4}.machine-screen{position:relative;background:#1d201b;border-radius:5px;padding:19px 21px 14px;color:#f1f0e7;box-shadow:0 2px 4px #0003,0 1px 0 #ffffff13 inset;margin:24px 0 22px}.screen-head,.screen-foot{display:flex;justify-content:space-between;align-items:center}.screen-head{font-size:9px;color:#d3d3c8;margin:0 0 16px}.screen-title{display:flex;align-items:center;gap:8px}.screen-led{width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px #d1f36c9c}.screen-meta{color:#777a70;font-size:8px;display:flex;gap:9px}.screen-sep{color:#d0f06b}.step-ruler,.sequencer{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:7px}.step-ruler{font-size:8px;color:#666a61;text-align:center;margin-bottom:9px}.sequencer{gap:7px;position:relative}.step-pad{min-width:0;height:37px;background:#30332d;border:1px solid #3c3f37;border-radius:3px;position:relative;cursor:pointer;transition:background .11s,border-color .11s,transform .11s,box-shadow .11s;padding:0}.step-pad:hover{border-color:#878d75;transform:translateY(-1px)}.step-pad.bar-start{margin-left:0}.step-pad:nth-child(4n+1){margin-left:2px}.step-pad:nth-child(4n+1):before{content:'';position:absolute;left:-6px;top:5px;height:25px;width:1px;background:#52554a}.step-pad.active{background:var(--track-color);border-color:var(--track-color);box-shadow:0 0 9px color-mix(in srgb,var(--track-color) 28%,transparent)}.step-pad.current:after{content:'';position:absolute;top:-5px;left:calc(50% - 3px);width:5px;height:3px;border-radius:2px;background:#e9eee1;box-shadow:0 0 6px #e9eee1}.step-pad .step-num{display:none}.step-pad:focus-visible{outline:2px solid #fff;outline-offset:2px}.screen-foot{font-size:7px;color:#6d7167;margin-top:15px}.step-hint{display:flex;align-items:center;gap:7px}.hint-dot{width:4px;height:4px;border-radius:50%;background:#abb991}.sequence-length{color:#8a8d83}.sequence-length span{color:#d0f06b;font-size:10px;margin-left:5px}.instrument-bottom{display:grid;grid-template-columns:1.15fr 1fr;column-gap:35px;position:relative;padding:0 0 49px}.visualizer-panel,.voice-panel{min-width:0}.panel-heading{height:25px;border-bottom:1px solid #c9c7be;display:flex;align-items:flex-start;justify-content:space-between;color:#6f7168;font-size:8px}.panel-heading>div{display:flex;align-items:center;gap:7px}.panel-icon{font:13px var(--sans);color:#929a7f}.live-tag{display:flex;align-items:center;gap:5px;color:#97988e;font-size:7px}.live-tag i{width:5px;height:5px;background:#afb0a4;border-radius:50%}.live-tag.is-live{color:#78865d}.live-tag.is-live i{background:#a6c466;box-shadow:0 0 5px #a6c466}.visualizer-panel canvas{display:block;width:100%;height:91px;margin-top:7px}.visualizer-foot{height:20px;display:flex;justify-content:space-between;align-items:end;font-size:7px;color:#96968b}.visualizer-foot>span>b{font-weight:400;color:#a4ae8b}.level-readout{display:flex;gap:3px;align-items:end;height:10px}.level-readout i{display:block;width:4px;height:4px;background:#9aa687;border-radius:1px;opacity:.38}.level-readout i:nth-child(3n){height:7px}.level-readout i:nth-child(4n){height:9px}.level-readout.is-active i{opacity:1}.voice-list{padding-top:2px}.voice-row{height:27px;display:grid;grid-template-columns:8px 1fr auto auto;align-items:center;gap:9px;border-bottom:1px solid #d0cec5}.voice-led{width:5px;height:5px;border-radius:50%;background:var(--voice-color);opacity:.8;box-shadow:0 0 4px color-mix(in srgb,var(--voice-color) 45%,transparent)}.voice-name{font:500 9px var(--mono);letter-spacing:.06em;color:#45483f;display:flex;align-items:baseline;gap:7px}.voice-name small{font-size:7px;color:#9a9a90}.voice-meta{font:8px var(--mono);color:#a1a095}.mute-button{border:1px solid #c2c0b7;border-radius:2px;background:transparent;padding:4px 6px;color:#929287;font:7px var(--mono);letter-spacing:.08em;cursor:pointer;min-width:31px}.mute-button:hover{border-color:#9ba785;color:#586448}.voice-row.muted .voice-name,.voice-row.muted .voice-meta{opacity:.42}.voice-row.muted .voice-led{opacity:.18;box-shadow:none}.voice-row.muted .mute-button{background:#34372f;color:#dad9cf;border-color:#34372f}.footer-mark{position:absolute;bottom:0;left:0;right:0;height:33px;border-top:1px solid #c9c7be;display:flex;align-items:center;gap:9px;color:#93938a;font-size:7px}.brand-mark.small{height:14px;width:14px;font-size:8px;border-radius:4px 4px 4px 1px}.footer-version{margin-left:auto}.footer-version b{color:#f47d4b}.page-footer{height:39px;display:flex;justify-content:space-between;align-items:center;color:#707268;font-size:8px}.footer-arrow{color:var(--acid);font-size:12px;margin-left:5px}.toast{position:fixed;bottom:23px;left:50%;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#d1f36c;color:#1a1c16;padding:12px 17px;border-radius:3px;font-size:9px;z-index:5;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){body{padding:0 16px 18px}.masthead{height:62px}.edition{font-size:7px;gap:6px}.edition-sub{display:none}.share-button{padding:9px}.share-label{display:none}.instrument{margin-top:20px;padding:0 23px}.instrument-top{height:auto;min-height:355px;grid-template-columns:1fr;padding:23px 0 17px}.intro{padding:7px 0 16px}.intro h1{font-size:43px;margin:12px 0 8px}.intro-copy{font-size:11px}.controls-area{justify-self:stretch;width:100%;padding:7px 0 0}.transport-row{padding-bottom:14px}.dial-row{padding-top:13px}.top-decoration{top:20px}.machine-screen{margin:17px 0;padding:15px 13px 12px}.screen-head{margin-bottom:13px}.step-ruler,.sequencer{gap:4px}.step-pad{height:32px;border-radius:2px}.step-pad:nth-child(4n+1):before{left:-4px}.step-ruler{font-size:7px}.screen-foot{margin-top:12px}.step-hint{font-size:6px}.instrument-bottom{grid-template-columns:1fr;gap:20px;padding-bottom:48px}.visualizer-panel canvas{height:78px}.voice-row{height:29px}.voice-panel .panel-heading{margin-bottom:0}.page-footer{font-size:6px;height:34px}.page-footer span:last-child{display:none}}
@media(max-width:390px){body{padding-left:11px;padding-right:11px}.instrument{padding-left:17px;padding-right:17px}.edition{font-size:6px;letter-spacing:.05em}.step-ruler,.sequencer{gap:3px}.step-pad{height:29px}.machine-screen{padding-left:10px;padding-right:10px}.dial{width:39px;height:39px}.dial-indicator{left:18px;transform-origin:1px 14px}.dial-center{inset:12px}.dial-control{gap:7px;min-width:90px}.dial-value{font-size:13px}.mutate-button{padding:0 9px}.mutate-wrap{gap:5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}