*{box-sizing:border-box}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{font-size:var(--text-body);-webkit-font-smoothing:antialiased;margin:0;font-family:Arial,Helvetica,sans-serif;line-height:1.5}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit}:focus-visible{outline-offset:4px;outline:3px solid #467a9d}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}
:root{--paper:#f2f0e9;--case:#e6e3d9;--ink:#292c29;--muted:#686a61;--edge:#cdcabe;--orange:#e7793d;--lead:#edbd66;--chord:#92b9b3;--bass:#b4a1c6;--perc:#dc907c;--mono:ui-monospace, SFMono-Regular, Consolas, monospace;--text-label:.875rem;--text-body:1rem;--text-heading:1.5rem;--text-display:clamp(2rem, 4vw, 2.75rem)}
.site-header nav [aria-current=page]{color:var(--ink);text-decoration:underline;-webkit-text-decoration-color:var(--orange);text-decoration-color:var(--orange);text-underline-offset:7px}.small-button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.ui-select{font:var(--text-body) var(--mono);color:var(--muted);letter-spacing:.08em;gap:8px;display:grid}.ui-select select{border:1px solid var(--edge);background:var(--paper);min-height:44px;color:var(--ink);font:var(--text-body) Arial, sans-serif;letter-spacing:0;border-radius:6px;padding:10px 12px}.ui-status{min-height:20px;font:var(--text-label)/1.6 var(--mono);color:var(--muted)}.ui-error{color:#9c402b}.catalog-grid{gap:24px;padding:30px 0 50px;display:grid}.catalog-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}@media (max-width:760px){.site-header nav{gap:12px}.site-header nav a{font-size:var(--text-label)}.site-header .wordmark{font-size:var(--text-heading);gap:7px}.site-header nav a:last-child{display:none}}.range-control{width:100%;min-width:0;max-width:370px}.range-control>label{font:var(--text-label) var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);display:block}.range-control-fields{align-items:center;gap:14px;display:flex}.range-control-track{flex:1;min-width:0}.range-control-track input{width:100%;height:44px;accent-color:var(--orange);cursor:pointer;margin:0;display:block}.range-control-bounds{font:var(--text-label) var(--mono);color:var(--muted);justify-content:space-between;margin-top:-6px;display:flex}.range-control-number{align-items:center;gap:7px;display:flex}.range-control-number input{border:1px solid var(--edge);background:var(--paper);width:66px;min-height:44px;color:var(--ink);font:var(--text-body) var(--mono);text-align:center;border-radius:5px;padding:6px}.range-control-number span{font:var(--text-label) var(--mono);color:var(--muted)}.range-control[aria-disabled=true]{opacity:.55}.range-control input:disabled{cursor:not-allowed}.language-selector{align-items:center;display:inline-flex}.language-selector select{border:1px solid var(--edge);background:var(--paper);max-width:120px;min-height:44px;color:var(--ink);font:var(--text-label) Arial, sans-serif;border-radius:6px;padding:8px}html:lang(ja){line-break:strict}html:lang(ja) .micro,html:lang(ja) .screen-kicker,html:lang(ja) .ui-select{letter-spacing:.04em}@media (max-width:760px){.site-header{flex-wrap:wrap;gap:8px}.site-header nav{flex-wrap:wrap}.language-selector select{max-width:100px}}.language-selector{position:relative}.language-error{z-index:5;border:1px solid var(--edge);background:var(--paper);width:min(260px,80vw);color:var(--ink);font:var(--text-label)/1.5 Arial,sans-serif;border-radius:6px;padding:12px;position:absolute;top:100%;right:0;box-shadow:0 4px 12px #0002}
body{background:var(--paper);color:var(--ink)}button{color:inherit;touch-action:manipulation}button,a{transition:background .12s,color .12s,box-shadow .12s}button:active:not(:disabled){transform:translateY(2px)}button:disabled{opacity:.35}.site-header,.demo-main,.site-footer{width:min(1080px,100% - 64px);margin-inline:auto}.site-header{border-bottom:1px solid var(--edge);align-items:center;gap:28px;height:104px;display:flex}.wordmark{color:var(--ink);font-size:var(--text-heading);letter-spacing:-1.5px;align-items:center;gap:10px;font-weight:800;text-decoration:none;display:flex}.brand-dot{font-size:var(--text-label);letter-spacing:0;align-self:flex-start;margin-top:4px}.brand-mark{background:var(--orange);border-radius:5px;justify-content:center;align-items:center;gap:3px;width:32px;height:32px;display:flex}.brand-mark i{background:#272b26;width:3px;height:12px}.brand-mark i:nth-child(2){height:20px}.brand-mark i:nth-child(4){height:7px}.header-tag,.micro{font:var(--text-label)/1.4 var(--mono);letter-spacing:1.5px;font-weight:600}.header-tag{color:var(--muted)}.site-header nav{font-size:var(--text-label);gap:24px;margin-left:auto;font-weight:600;display:flex}.site-header nav a{text-decoration:none}.intro-line{justify-content:space-between;align-items:center;padding:24px 0;display:flex}.intro-line p{font-size:var(--text-body);letter-spacing:-.4px;margin:0;font-weight:600}.intro-line p span{color:var(--muted)}.intro-line .micro{color:var(--muted);font-size:var(--text-label)}.console{background:var(--case);border:1px solid #d1cdc1;border-radius:20px;padding:24px 28px 0;box-shadow:0 3px #c5c1b5,0 16px 32px -22px #3338,inset 0 1px #fff}.console-top{color:#65665d;justify-content:space-between;margin:0 0 14px;display:flex}.hardware-label{font-size:var(--text-label)}.machines{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px;display:grid}.machines button{text-align:left;background:#f5f3ee;border:1px solid #c5c3b9;border-radius:7px;align-items:center;gap:9px;height:54px;padding:0 15px;display:flex;box-shadow:0 3px #c6c2b8,inset 0 1px #fff}.machines button[aria-pressed=true]{background:#fffaf0;border-color:#ad5c31;box-shadow:0 3px #ad5c31,inset 0 0 0 1px #ad5c31}.machines button:hover{background:#fffcf5}.screen-bezel{color:#e9eadc;background:#202721;border:7px solid #3c4138;border-radius:12px;overflow:hidden;box-shadow:inset 0 2px 8px #0008,0 1px #fff9}.screen-title{border-bottom:1px solid #424b3e;justify-content:space-between;align-items:center;padding:21px 24px 18px;display:flex}.screen-kicker{font:var(--text-label) var(--mono);letter-spacing:1.5px;color:#a4ae96;text-transform:uppercase}h1{font-size:var(--text-display);letter-spacing:-.8px;margin:5px 0 0;font-weight:600}.output-scope{width:120px;height:32px}.display-ruler{color:#939e86;font:var(--text-label) var(--mono);letter-spacing:1.4px;justify-content:space-between;padding:12px 24px 9px;display:flex}.voice-lane{--role:var(--lead);grid-template-columns:108px minmax(0,1fr) 28px;align-items:center;gap:14px;padding:6px 24px;display:grid}.chord{--role:var(--chord)}.bass{--role:var(--bass)}.perc{--role:var(--perc)}.lead{--role:var(--lead)}.voice-name button{height:29px;color:var(--role);font:var(--text-label) var(--mono);background:0 0;border:0;align-items:center;gap:7px;padding:0;display:flex}.voice-name i{background:var(--role);border-radius:50%;width:5px;height:5px}.voice-name span{font:var(--text-label)/1.5 var(--mono);color:#939e86;letter-spacing:.6px;display:block}.note-lane{background:repeating-linear-gradient(90deg,#0000 0 calc(6.25% - 1px),#99aa8312 calc(6.25% - 1px) 6.25%);border-bottom:1px solid #8f9b7919;height:49px;position:relative;overflow:hidden}.voice-note{background:var(--role);opacity:.68;border-radius:1px;min-width:3px;height:5px;position:absolute}.voice-note.sounding{opacity:1;box-shadow:0 0 10px color-mix(in srgb, var(--role) 40%, transparent)}.perc .voice-note{border-radius:50%;max-width:7px;height:7px}.playhead{background:#e7edce;width:1px;transition:left 90ms linear;position:absolute;inset-block:0;box-shadow:0 0 8px #e7edce70}.solo-button{font:var(--text-label) var(--mono);color:#a2ad91;background:#8d9e8110;border:1px solid #58634b;border-radius:4px;width:28px;height:32px}.solo-button[aria-pressed=true]{color:#22291f;background:#dadbb9}.is-muted .note-lane{opacity:.18}.is-muted .voice-name button{text-decoration:line-through}.is-stolen .voice-note{opacity:.12}.is-stolen .voice-name span{color:#f1a384;font-size:var(--text-label)}.taken-label{color:#f1a384;font:var(--text-label) var(--mono);background:#202721bb;place-items:center;display:grid;position:absolute;inset:0}.display-bottom{border-top:1px solid #424b3e;justify-content:space-between;align-items:center;min-height:42px;margin-top:7px;padding:14px 24px 10px;display:flex}.display-bottom>span{font:var(--text-label) var(--mono);letter-spacing:.7px;color:#a4ae96;align-items:center;gap:7px;display:flex}.status-light{background:#727d63;border-radius:50%;width:5px;height:5px}.status-light.active{background:#d5b067;box-shadow:0 0 6px #d5b067}.arcade-scene{width:100px;height:22px;font-size:var(--text-heading);color:#d7b26a;border-bottom:1px dotted #758469;position:relative}.pixel-runner{position:absolute;bottom:0;left:12px}.pixel-coin{font-size:var(--text-label);position:absolute;bottom:7px;right:18px}.pixel-shot,.pixel-burst{opacity:0;position:absolute}.pixel-shot{bottom:4px;left:27px}.pixel-burst{color:#eca080;bottom:0;right:18px}.arcade-scene[data-effect=jump] .pixel-runner{animation:.32s ease-out jump}.arcade-scene[data-effect=coin] .pixel-coin{animation:.35s ease-out coin}.arcade-scene[data-effect=laser] .pixel-shot{animation:.3s linear laser}.arcade-scene[data-effect=explosion] .pixel-burst{animation:.35s ease-out burst}@keyframes jump{50%{transform:translateY(-15px)}}@keyframes coin{50%{opacity:.4;transform:translateY(-13px)rotateY(180deg)}}@keyframes laser{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(55px)}}@keyframes burst{0%{opacity:1;transform:scale(.6)}60%{opacity:1;transform:scale(1.6)}to{opacity:0;transform:scale(2)}}.transport-row{border-bottom:1px solid #c7c5b9;align-items:center;gap:22px;padding:21px 0 24px;display:flex}.play-button{background:var(--orange);min-width:154px;height:51px;font-size:var(--text-body);border:1px solid #cb632d;border-radius:7px;justify-content:center;align-items:center;gap:12px;font-weight:700;display:flex;box-shadow:0 3px #b2582d,inset 0 1px #ffb380}.play-button>span{font-size:var(--text-label)}.play-button kbd{font:var(--text-label) var(--mono);opacity:.7;margin-left:5px}.play-button.playing{background:#f1a367}.history-controls{gap:5px;display:flex}.history-controls button{font-size:var(--text-heading)}.edit-toggle{height:38px;font-size:var(--text-label);background:0 0;border:1px solid #afafa1;border-radius:5px;margin-left:auto;padding:0 13px}.edit-toggle span{margin-left:12px}.arcade-header{justify-content:space-between;align-items:center;margin:19px 0 13px;display:flex}.arcade-header .micro{color:#55594e}.arcade-header p{color:#686b60;font-size:var(--text-body);margin:0}.arcade-pads{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.arcade-pad{background:#f3eee3;border:1px solid #c3bdae;border-radius:9px;align-items:center;gap:16px;height:80px;padding:0 22px;display:flex;position:relative;box-shadow:0 4px #bfb7a8,inset 0 1px #fff}.arcade-pad.coin{background:#e3ca8b;border-color:#c9af75;box-shadow:0 4px #b99e64,inset 0 1px #f9e2ab}.arcade-pad.laser{background:#b7c9c1;border-color:#9cafaa;box-shadow:0 4px #8b9f98,inset 0 1px #d8e4df}.arcade-pad.explosion{background:#dcaa96;border-color:#be8e7a;box-shadow:0 4px #ae7e6d,inset 0 1px #f0cab9}.arcade-pad:active{transform:translateY(3px);box-shadow:0 1px #9d9587}.pad-symbol{font-size:var(--text-heading)}.pad-name{font-size:var(--text-label);font-weight:600}.arcade-pad kbd{font:var(--text-label) var(--mono);opacity:.6;position:absolute;top:8px;right:9px}.console-bottom{color:#78796c;font:var(--text-label) var(--mono);letter-spacing:1.3px;justify-content:space-between;align-items:center;height:43px;display:flex}.screw{font-size:var(--text-body);color:#b1aea0}.cartridges{margin-top:35px}.section-heading,.keyboard-heading{justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px;display:flex}.section-heading .micro,.keyboard-heading .micro{color:#74776a;font-size:var(--text-label)}h2{font-size:var(--text-heading);letter-spacing:-.6px;margin:5px 0 0;font-weight:600}.section-heading>p{font-size:var(--text-body);color:#707267}.cartridge-list{grid-template-columns:repeat(3,1fr);gap:13px;display:grid}.cartridge{text-align:left;background:#e8e5dc;border:1px solid #cecabe;border-radius:9px;align-items:center;gap:16px;padding:15px;display:flex;box-shadow:0 2px #d5d0c3}.cartridge:hover{background:#e0ddd2}.cartridge-art{background:#dec78d;border-radius:3px;flex-shrink:0;justify-content:center;align-items:flex-end;gap:3px;width:54px;height:49px;padding:10px;display:flex}.cartridge-art i{background:#5f6445;width:5px;height:10px}.cartridge-art i:nth-child(2){height:17px}.cartridge-art i:nth-child(3){height:25px}.cartridge-art i:nth-child(4){height:16px}.boss .cartridge-art{background:#d89e86}.boss .cartridge-art i{background:#724c3d}.boss .cartridge-art i:nth-child(2n){height:26px}.midnight .cartridge-art{background:#aabdbb}.midnight .cartridge-art i{background:#4f6965;height:8px}.midnight .cartridge-art i:nth-child(2n){height:14px}.cartridge-copy{flex-direction:column;gap:6px;display:flex}.cartridge-copy strong{font-size:var(--text-label);letter-spacing:-.3px}.cartridge-copy>span{font-size:var(--text-label);color:#6e7064}.cartridge-number{font:var(--text-label) var(--mono);color:#747466;white-space:nowrap;align-self:flex-start;margin-left:auto}.keyboard-section{border-top:1px solid var(--edge);margin-top:32px;padding-top:28px}.keyboard-options{align-items:center;gap:8px;display:flex}.keyboard-options select,.editor-toolbar select{border:1px solid var(--edge);color:var(--ink);min-height:36px;font-size:var(--text-body);background:#f8f6ef;border-radius:5px;padding:8px}.note-keys{grid-auto-columns:minmax(48px,1fr);grid-auto-flow:column;gap:7px;padding-bottom:6px;display:grid;overflow-x:auto}.note-keys button{height:76px;font:var(--text-label) var(--mono);background:#faf8f0;border:1px solid #c7c4b9;border-radius:5px;flex-direction:column;justify-content:space-between;align-items:center;padding:14px 0 9px;display:flex;box-shadow:0 3px #d0cbbe}.note-keys button:active{background:var(--role)}.note-keys kbd{font:var(--text-label) var(--mono);text-transform:uppercase;color:#898b7d}.keyboard-hint{color:#727567;font-size:var(--text-body);margin:8px 0 0}.takeaway{border-top:1px solid var(--edge);justify-content:space-between;align-items:center;gap:20px;margin-top:30px;padding:28px 0;display:flex}.takeaway h2{font-size:var(--text-heading)}.takeaway p{font-size:var(--text-body);color:#757669;margin-bottom:0}.takeaway>div:last-child{gap:9px;display:flex}.small-button{font-size:var(--text-label);white-space:nowrap;background:#f8f6ee;border:1px solid #c6c3b6;border-radius:5px;min-height:38px;padding:10px 14px}.small-button.dark,.small-button[aria-pressed=true]{color:#f2f1e5;background:#363d32;border-color:#363d32}.editor,.code-panel,.share-panel{border:1px solid var(--edge);background:#e9e6dd;border-radius:10px;margin-top:24px;padding:24px}.editor-toolbar{flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0;display:flex}.editor-toolbar label{font-size:var(--text-label);align-items:center;gap:7px;display:flex}.order-readout{font:var(--text-label) var(--mono);color:#76786c}.role-tabs{gap:4px;margin-left:auto;display:flex}.role-tabs button{font-size:var(--text-label);background:#f0ede4;border:1px solid #c8c4b8;border-radius:4px;padding:10px}.role-tabs button[aria-pressed=true]{background:var(--role);border-color:#9b998b}.grid-scroll{touch-action:pan-x pan-y;overflow-x:auto}.piano-grid{gap:3px;min-width:650px;display:grid}.piano-row{display:contents}.grid-cell{background:#f6f3ea;border:1px solid #d8d3c6;border-radius:3px;height:32px;padding:0}.grid-cell.beat-start{border-left:2px solid #b2b0a0}.grid-cell.filled{background:var(--role);border-color:#7e8173;box-shadow:inset 0 -3px #0001}.grid-cell:hover{border-color:#697b62}.pitch-label{font:var(--text-label) var(--mono);z-index:1;background:#e2dfd3;border:none;border-radius:3px;height:32px;position:sticky;left:0}.step-number{font:var(--text-label) var(--mono);color:#73786a;text-align:center;padding-top:6px}.editor-bottom{font-size:var(--text-label);color:#707366;justify-content:space-between;align-items:center;gap:20px;margin-top:15px;display:flex}.editor-bottom>div{align-items:center;gap:10px;display:flex}.text-editor label{font-size:var(--text-label);margin-bottom:9px;display:block}.text-editor textarea{resize:vertical;color:#33382e;width:100%;font:var(--text-body)/1.8 var(--mono);background:#fbfaf3;border:1px solid #bba;border-radius:5px;margin-bottom:12px;padding:16px;display:block}.field-error{color:#a33d21;font-size:var(--text-label);margin-left:12px}.code-panel .section-heading code{font:var(--text-label) var(--mono)}.code-panel p{color:#6b6e61;font-size:var(--text-body);line-height:1.7}.code-actions{flex-wrap:wrap;gap:7px;margin:18px 0 12px;display:flex}.code-panel pre{color:#d4dcbe;max-height:350px;font:var(--text-label)/1.8 var(--mono);background:#252d24;border-radius:7px;padding:22px;overflow:auto}.share-panel{flex-wrap:wrap;align-items:flex-end;gap:15px;display:flex}.share-panel label{font-size:var(--text-label);flex:1;gap:7px;display:grid}.share-panel input{background:#faf9f1;border:1px solid #c5c3b8;border-radius:5px;min-width:180px;padding:10px}.share-panel>div{gap:8px;display:flex}.share-panel p{width:100%;font-size:var(--text-body);color:#757668;margin:0;line-height:1.7}.published-links a{font-size:var(--text-label)}.notice{z-index:20;color:#f5f3e8;width:max-content;max-width:calc(100% - 28px);font-size:var(--text-label);background:#323c2e;border-radius:8px;padding:14px 20px;line-height:1.5;position:fixed;bottom:22px;left:50%;transform:translate(-50%);box-shadow:0 5px 20px #0003}.notice:empty{display:none}.notice.error{background:#883f2a}.site-footer{border-top:1px solid var(--edge);color:#797d6e;font-size:var(--text-label);justify-content:space-between;padding:24px 0 40px;display:flex}.site-footer nav{flex-wrap:wrap;gap:12px 20px;display:flex}.site-footer a{text-decoration:none}@media (max-width:760px){.site-header,.demo-main,.site-footer{width:calc(100% - 28px)}.site-header{gap:12px;height:76px}.header-tag{display:none}.wordmark{font-size:var(--text-heading)}.site-header nav{font-size:var(--text-label);gap:15px}.intro-line{padding:20px 2px}.intro-line p{font-size:var(--text-body)}.intro-line>.micro{display:none}.console{border-radius:14px;padding:16px 12px 0}.console-top .micro{font-size:var(--text-label);letter-spacing:.8px}.hardware-label{display:none}.machines{gap:5px;margin-bottom:17px}.machines button{flex-direction:column;justify-content:center;gap:5px;height:54px;padding:7px 1px}.screen-bezel{border-width:4px;border-radius:9px}.screen-title{padding:15px 12px}h1{font-size:var(--text-display)}.screen-kicker{font-size:var(--text-label)}.output-scope{width:72px;height:28px}.display-ruler{font-size:var(--text-label);letter-spacing:.8px;padding:10px 12px}.voice-lane{grid-template-columns:68px minmax(0,1fr) 28px;gap:7px;padding:5px 10px}.voice-name button{font-size:var(--text-label);gap:5px;min-height:30px}.voice-name span{font-size:var(--text-label)}.note-lane{height:41px}.taken-label{font-size:var(--text-label);text-align:center}.is-stolen .voice-name span{font-size:var(--text-label)}.display-bottom{padding:9px 11px}.display-bottom>span{font-size:var(--text-label);letter-spacing:.2px}.arcade-scene{width:66px}.pixel-coin{right:5px}.transport-row{flex-wrap:wrap;gap:8px;padding:16px 0 19px}.play-button{min-width:103px;height:47px;font-size:var(--text-label);gap:8px}.play-button kbd{display:none}.history-controls{gap:3px}.history-controls button{width:28px}.edit-toggle{width:100%;height:36px;margin-top:6px}.arcade-header{align-items:flex-start;gap:8px;margin-top:15px}.arcade-header .micro{font-size:var(--text-label);letter-spacing:.8px;max-width:100px}.arcade-header p{font-size:var(--text-body);text-align:right;max-width:160px;line-height:1.4}.arcade-pads{gap:7px}.arcade-pad{border-radius:7px;flex-direction:column;justify-content:center;gap:4px;height:72px;padding:7px 1px}.pad-symbol{font-size:var(--text-heading);line-height:1.1}.pad-name{font-size:var(--text-label)}.arcade-pad kbd{font-size:var(--text-label);top:5px;right:5px}.console-bottom{font-size:var(--text-label);letter-spacing:.5px;height:35px}.cartridges{margin-top:26px}.section-heading>p{display:none}h2{font-size:var(--text-heading)}.cartridge-list{grid-template-columns:1fr;gap:8px}.cartridge{gap:14px;padding:10px 12px}.cartridge-art{width:47px;height:42px;padding:7px}.cartridge-number{align-self:center}.cartridge-copy strong,.cartridge-copy>span{font-size:var(--text-label)}.keyboard-heading{flex-wrap:wrap;gap:12px}.keyboard-options{flex-wrap:wrap;width:100%}.keyboard-options select{flex:1}.keyboard-section{margin-top:25px;padding-top:23px}.note-keys{grid-auto-columns:minmax(37px,1fr);gap:4px}.note-keys button{height:65px;font-size:var(--text-label)}.keyboard-hint{line-height:1.6;font-size:var(--text-body)}.takeaway{flex-direction:column;align-items:flex-start;gap:17px;margin-top:24px}.takeaway p{font-size:var(--text-body)}.takeaway>div:last-child{width:100%}.takeaway .small-button{flex:1}.editor,.code-panel,.share-panel{padding:15px 12px}.editor .section-heading h2{font-size:var(--text-body)}.editor .section-heading .small-button{font-size:var(--text-label);padding:8px}.role-tabs{margin-left:0}.editor-toolbar{gap:10px}.piano-grid{min-width:730px}.grid-cell,.pitch-label{height:40px}.editor-bottom{flex-direction:column;align-items:flex-start;gap:12px}.editor-bottom>div{align-self:flex-end}.code-panel .section-heading{flex-direction:column;align-items:flex-start}.code-panel pre{font-size:var(--text-label);padding:14px}.share-panel>div{flex-wrap:wrap}.site-footer{flex-direction:column;gap:18px;padding-bottom:32px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media (prefers-contrast:more){:root{--muted:#353a2f}.voice-name span,.display-ruler,.screen-kicker,.display-bottom>span{color:#ced5bf}.grid-cell{border-color:#7e8173}}@media (max-width:760px){.transport-row .history-controls{display:none}.edit-toggle{width:auto;font-size:var(--text-label);height:42px;margin:0 0 0 auto;padding:0 9px}.edit-toggle span{margin-left:5px}.transport-row{gap:7px}.voice-lane{padding-block:3px}.note-lane{height:36px}.screen-title{padding-block:12px}}.machines button{justify-content:center;height:82px;padding:14px}.machine-logo{object-fit:contain;width:100%;max-width:175px;height:48px;display:block}.machine-logo-md,.machine-logo-snes{height:56px}@media (max-width:650px){.machines button{height:64px;padding:8px}.machine-logo{height:32px}.machine-logo-md,.machine-logo-snes{height:45px}}.recording-controls{flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0;display:flex}.record-button{min-height:44px;font-size:var(--text-label);background:#f4e5da;border:1px solid #b67a65;border-radius:6px;padding:10px 16px;font-weight:650}.record-button>span{color:#a44930;margin-right:5px}.record-button[aria-pressed=true]{color:#fff7ee;background:#994c36;border-color:#7d3d2c}.record-button[aria-pressed=true]>span{color:inherit}.take-status{color:#6b6c60;font-size:var(--text-label);line-height:1.5}.variations{border-top:1px solid var(--edge);padding-block:28px}.variation-locks,.variation-actions{flex-wrap:wrap;gap:8px;margin-block:14px;display:flex}.variation-locks button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.variation-locks button,.variation-actions button{min-height:44px}.midi-input{flex-wrap:wrap;align-items:center;gap:12px;margin-block:16px 28px;display:flex}.midi-input label{font-size:var(--text-body)}.midi-input select{max-width:100%;min-height:44px}.midi-input .keyboard-hint{flex-basis:100%;margin:0}.account-panel{border-top:1px solid var(--edge);width:100%;min-width:0;margin-top:20px;padding-top:16px}.account-panel summary{cursor:pointer;min-height:44px;font-weight:600}.account-panel ul{max-height:280px;padding-left:20px;overflow:auto}.account-panel li{margin:8px 0}.account-panel form{flex-wrap:wrap;align-items:end;gap:12px;display:flex}.account-panel form p{flex-basis:100%}.account-panel form label{flex:180px;min-width:0}.account-panel input{width:100%;min-width:0}.account-panel button{min-height:44px}.transport-row>.range-control{flex:1;min-width:200px;max-width:370px}@media (max-width:760px){.transport-row>.range-control{flex-basis:100%;order:3;max-width:none}}.history-controls button{background:#eeece3;border:1px solid #c3c0b3;border-radius:5px;width:32px;height:36px}.composition-controls{border:1px solid var(--edge);background:#e9e6dd;border-radius:12px;margin-block:28px;padding:25px}.composition-sliders{grid-template-columns:1fr 1fr;gap:45px;margin-top:23px;display:grid}.composition-sliders .range-control{max-width:none}.composition-sliders p{font-size:var(--text-body);color:var(--muted);margin:14px 0 0;line-height:1.7}.composition-controls .keyboard-hint{margin:21px 0 0}@media (max-width:760px){.composition-controls{padding:20px 16px}.composition-sliders{grid-template-columns:1fr;gap:24px}.composition-controls .section-heading{align-items:center;gap:12px}.composition-controls h2{font-size:var(--text-heading)}.composition-controls .small-button{padding:10px}}.cartridge-group{margin-top:23px}.cartridge-group h3{font:var(--text-label) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}.cartridge[aria-pressed=true]{border-color:#727f69;box-shadow:inset 0 0 0 1px #727f69}.cartridge.mario .cartridge-art,.cartridge.zelda .cartridge-art,.cartridge.sonic .cartridge-art{background:var(--cartridge-color)}.cartridge-copy{min-width:0}.cartridge-copy small{font:var(--text-label)/1.5 var(--mono);color:var(--muted);margin-top:8px;display:block}.cartridge-source{border:1px solid var(--edge);font-size:var(--text-label);background:#e9e6dd;border-radius:8px;margin-top:17px;padding:16px 18px;line-height:1.7}.cartridge-source summary{cursor:pointer;min-height:28px}.cartridge-source p{color:var(--muted);max-width:780px}.cartridge-source a{text-underline-offset:4px;text-decoration:underline}@media (max-width:760px){.cartridge-copy small{font-size:var(--text-label);margin-top:5px}.cartridge-source{padding:14px}}.playground-intro{grid-template-columns:1fr 1fr;align-items:end;gap:48px;padding:34px 0 30px;display:grid}.playground-intro .micro{color:var(--muted);font-size:var(--text-label)}.playground-intro h1{font-size:var(--text-display);letter-spacing:-2.3px;margin:13px 0 0;font-weight:750;line-height:1.02}.playground-intro h1 span{color:#a54a24}.intro-copy{max-width:430px;padding-bottom:2px}.intro-copy p{font-size:var(--text-body);color:#575c51;margin:0 0 13px;line-height:1.65}.intro-copy a{font-size:var(--text-label);text-underline-offset:4px;font-weight:650;text-decoration:underline}.tune-heading{justify-content:space-between;align-items:center;gap:16px;margin:0 0 12px;display:flex}.start-hint{font-size:var(--text-label);color:#5e6357}.familiar-tunes{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.familiar-tune{text-align:left;background:#f5f2e9;border:1px solid #c5c0b2;border-radius:8px;align-items:center;gap:13px;min-height:76px;padding:12px;display:flex;box-shadow:0 3px #c6c2b8}.familiar-tune:hover{background:#fffaf0}.familiar-tune[aria-pressed=true]{border-color:#656e55;box-shadow:0 3px #656e55,inset 0 0 0 1px #656e55}.tune-icon{background:var(--tune-color);color:#292c29;width:44px;height:44px;font:800 var(--text-heading) var(--mono);border-radius:5px;flex-shrink:0;place-items:center;display:grid;box-shadow:inset 0 1px #fff5}.familiar-tune strong{font-size:var(--text-heading);letter-spacing:-.4px;display:block}.familiar-tune small{font-size:var(--text-label);color:#5c6054;margin-top:5px;display:block}.tune-play{font-size:var(--text-label);color:#606a4b;margin-left:auto}.original-tunes{margin:12px 0 22px}.original-tunes summary{cursor:pointer;color:#5e6357;width:fit-content;font-size:var(--text-label);padding:8px 0}.original-tunes .cartridge-list{margin-top:10px}.screen-title h2{font-size:var(--text-heading);margin:5px 0 0}.about-main{max-width:760px;padding:46px 0}.about-main h1{font-size:var(--text-display);letter-spacing:-1.8px;margin:14px 0 28px;line-height:1.07}.about-main section{border-top:1px solid var(--edge);padding:25px 0}.about-main p,.about-main li{font-size:var(--text-body);color:#575c51;line-height:1.8}.about-main a{text-underline-offset:4px}.about-main pre{color:#e9eadc;font:var(--text-label)/1.8 var(--mono);background:#202721;border-radius:8px;padding:22px;overflow-x:auto}@media (max-width:760px){.playground-intro{grid-template-columns:1fr;gap:17px;padding:24px 3px}.playground-intro h1{font-size:var(--text-display);letter-spacing:-1.6px}.intro-copy p{font-size:var(--text-body);margin-bottom:9px;line-height:1.6}.tune-heading{flex-direction:column;align-items:flex-start;gap:7px}.tune-heading .micro,.start-hint{font-size:var(--text-label)}.familiar-tunes{gap:7px}.familiar-tune{flex-direction:column;align-items:flex-start;gap:7px;min-height:88px;padding:10px;position:relative}.tune-icon{width:26px;height:26px;font-size:var(--text-heading)}.familiar-tune strong{font-size:var(--text-body)}.familiar-tune small{font-size:var(--text-label);margin-top:3px;line-height:1.35}.tune-play{font-size:var(--text-label);position:absolute;top:14px;right:10px}.screen-title h2{font-size:var(--text-heading)}.original-tunes{margin-bottom:16px}.about-main{padding-top:28px}.site-header nav a:last-child{display:inline}}.tune-heading>div{gap:7px;display:grid}.tune-heading{margin-bottom:18px}.tune-heading .play-button{min-width:130px;height:46px}@media (max-width:760px){.tune-heading{flex-direction:row;align-items:center;gap:10px}.tune-heading .play-button{min-width:82px;height:44px}.start-hint{max-width:195px;line-height:1.45}.machines{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.machine-logo{max-width:135px}}.site-header{height:auto;min-height:104px;padding-block:20px}.header-tag,.micro{letter-spacing:.07em}.screen-title{gap:16px}.screen-title>div{min-width:0}.output-scope{flex-shrink:0}.display-ruler,.display-bottom,.console-bottom{flex-wrap:wrap;gap:14px;line-height:1.5}.console-bottom{height:auto;min-height:52px;padding-block:12px}.display-bottom>span{flex:220px}.arcade-scene{flex-shrink:0}.voice-name button{height:auto;min-height:32px}.voice-name span{overflow-wrap:anywhere}.arcade-header{gap:20px}.arcade-header p{line-height:1.5}.taken-label{padding:4px;line-height:1.3}.small-button{white-space:normal;text-align:center}.section-heading,.keyboard-heading{flex-wrap:wrap}.familiar-tune small{line-height:1.5}.site-footer{flex-wrap:wrap;align-items:flex-start;gap:24px}.footer-credit{gap:8px;display:grid}.footer-credit>a{width:fit-content;font-size:var(--text-body);color:var(--ink);font-weight:600}.footer-credit>a:hover{text-underline-offset:4px;text-decoration:underline}@media (max-width:760px){.site-header{flex-wrap:wrap;gap:16px;min-height:0;padding-block:18px}.site-header nav{justify-content:space-between;gap:16px;width:100%;margin-left:0}.site-header nav a{padding-block:6px}.voice-lane{grid-template-columns:94px minmax(0,1fr) 28px}.note-lane{height:52px}.arcade-header{flex-direction:column;gap:8px}.arcade-header .micro,.arcade-header p{text-align:left;max-width:none}.arcade-pads{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.arcade-pad{height:80px}.familiar-tune{padding:10px 8px}.familiar-tune strong{font-size:var(--text-body)}.familiar-tune small{overflow-wrap:anywhere}.screen-title{flex-wrap:wrap;align-items:flex-start}.composition-controls .section-heading{align-items:flex-start}.takeaway>div:last-child{flex-wrap:wrap}.takeaway .small-button{flex:140px}.role-tabs{flex-wrap:wrap}.note-keys{grid-auto-columns:minmax(46px,1fr)}.site-footer nav{gap:12px 20px}.console-bottom .screw{display:none}.site-header{grid-template-columns:1fr auto;gap:8px 12px;display:grid}.site-header .wordmark{grid-area:1/1}.site-header .language-selector{grid-area:1/2;justify-self:end}.site-header nav{grid-area:2/1/auto/-1}}