:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#d9dce0;--surface:#e0e2e4;--ink:#181b20;--muted:#505761;--line:#a7adb4;--accent:#205de8;--display:#151d28;--success:#d6e895;font-family:Arial,Yu Gothic UI,Meiryo,sans-serif;font-size:16px}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0}button,input,select{font:inherit;border:1px solid var(--line);min-height:42px;color:var(--ink);background:#eceef0;border-radius:3px;padding:9px 11px;font-size:.875rem}button{cursor:pointer}button:hover{background:#fff}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}input[type=checkbox]{width:17px;height:17px;min-height:0;accent-color:var(--accent)}input[type=range]{accent-color:var(--accent);width:100%;padding:0}select{min-width:0;max-width:100%}a{color:inherit}[hidden]{display:none!important}.app-header{justify-content:space-between;align-items:center;gap:16px;max-width:1320px;margin:0 auto;padding:24px 28px 16px;display:flex}.brand{letter-spacing:-1px;align-items:baseline;gap:16px;font-size:26px;font-weight:900;text-decoration:none;display:flex}.brand-model{letter-spacing:1.3px;color:var(--muted);font:10px monospace}.header-actions{align-items:center;gap:14px;display:flex}.header-actions :is(button,.gear-link){background:0 0;width:42px;padding:3px;font-size:22px}#status{color:var(--muted);font-size:12px}main{max-width:1320px;margin:auto;padding:0 28px 28px}.mode-nav{border-top:1px solid var(--line);min-height:45px;color:var(--muted);align-items:center;gap:15px;padding:10px 0 14px;font:12px monospace;display:flex}.mode-nav>span:nth-child(2){margin-left:auto}.practice-label{letter-spacing:1.5px}#resumeAudio{min-height:30px;padding:4px 9px;font-size:12px}.workspace{background:#d1d4d8;border:1px solid #92989f;border-radius:7px;grid-template-columns:240px minmax(0,1fr);gap:0;display:grid;overflow:visible;box-shadow:0 4px #90969d,0 15px 30px #26313a14}.library{background:#cdd1d5;border-right:1px solid #9ba1a8;border-radius:7px 0 0 7px;min-width:0;padding:20px 16px}.library-content{gap:16px;min-width:0;display:grid}.library-heading{letter-spacing:1.5px;justify-content:space-between;font-size:12px;font-weight:700;display:flex}.library-heading span{letter-spacing:0;color:var(--muted);font-weight:400}.lessonfilters{grid-template-columns:1fr 1fr;gap:8px;display:grid}.lessonfilters label,.groove-label,.field{color:var(--muted);gap:7px;font-size:14px;display:grid}.lessonfilters select{width:100%;padding:8px 4px}.lesson-list{overscroll-behavior:contain;border-top:1px solid #a9afb6;border-bottom:1px solid #a9afb6;gap:0;max-height:360px;display:block;overflow:auto}.lesson-option{text-align:left;background:0 0;border:0;border-bottom:1px solid #b9bec4;border-radius:0;flex-direction:column;flex-shrink:0;align-items:stretch;gap:7px;width:100%;height:auto;min-height:65px;padding:13px 9px;display:flex}.lesson-option strong{font-size:14px;font-weight:500;line-height:1.4}.lesson-option span{overflow-wrap:anywhere;color:var(--muted);font-size:12px;line-height:1.6;display:block}.lesson-option[aria-pressed=true]{box-shadow:inset 3px 0 var(--accent);color:#174bb8;background:#eff3ff}.hint,.meta{color:var(--muted);margin:0;font-size:14px;line-height:1.7}.lesson-description{font-size:12px}.text-button{background:0 0;min-height:34px;font-size:12px}.groove-help summary{cursor:pointer;font-size:12px}.groove-help .hint{margin-top:10px}.instrument{isolation:isolate;background:linear-gradient(115deg,#e7e9eb 0%,#d5d8dc 50%,#e0e3e6 100%);border-radius:0 7px 7px 0;min-width:0;padding:24px;position:relative}.instrument-head{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.instrument-head>div{min-width:0}h1{letter-spacing:-.3px;margin:0;font-size:clamp(18px,1.8vw,23px);font-weight:650;line-height:1.4}.tempo{align-items:center;gap:10px;font:12px monospace;display:flex}.tempo input{color:#182231;background:0 0;border:0;border-bottom:1px solid #979fa8;border-radius:0;width:84px;padding:0 0 3px;font:27px monospace}.display{background:var(--display);color:#eaf0f6;border:1px solid #020810;border-radius:3px;padding:16px 16px 12px;box-shadow:inset 0 2px 4px #0008}.patternhead{color:#a5b3c5;align-items:center;gap:12px;margin-bottom:12px;font:12px monospace;display:flex}#patternTabs{gap:4px;display:flex}#patternTabs button{color:#aab6c5;background:0 0;border:1px solid #485465;min-height:28px;padding:4px 9px;font:12px monospace}#patternTabs button[aria-pressed=true]{color:#fff;background:#205de8;border-color:#477def}#bar{white-space:nowrap;color:#a3bcff;margin-left:auto}#patternSummary{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.sequence{gap:4px;display:grid}.stepnum{text-align:center;color:#98a8ba;margin-bottom:3px;font:12px monospace}.trackname{color:#cbd4df;align-self:center;font:12px monospace}.step{background:#242e3a;border:1px solid #3a4654;place-items:center;height:clamp(26px,3.7vh,35px);display:grid;position:relative}.step.beat{border-left-color:#718093}.step.note:after{content:"";background:var(--color);opacity:.9;width:66%;height:62%}.step.ghost:after{opacity:.6;width:35%;height:28%}.step.delayed:after{transform:translate(2px)}.step.current{background:#354962;border-color:#8db0ff}.step.hit{box-shadow:inset 0 -3px var(--success)}.strike-mark{width:4px;height:4px;bottom:1px;left:var(--hit-position,50%);background:#fff;border-radius:50%;position:absolute;transform:translate(-50%)}.score-strip{border-top:1px solid #3e4a59;align-items:center;gap:12px;margin-top:16px;padding-top:12px;display:flex}.score{flex-shrink:0}.score>span{color:#a8b6c6;font-size:12px;display:block}.score strong{font:32px monospace}.score small{font-size:15px}#padako{width:48px;height:42px;image-rendering:pixelated;pointer-events:none;flex:0 0 48px}.timing-distribution{flex:1;min-width:45px;max-width:none}.histogram{border-bottom:1px solid #40515d;align-items:end;gap:3px;height:30px;display:flex;position:relative}.histogram:after{content:"";border-left:1px solid var(--success);opacity:.5;height:100%;position:absolute;left:50%}.histogram>i:not(#timingMarker){background:#9aafc5;flex:1;min-width:0}.timing-ruler{color:#a7b4bf;justify-content:space-between;margin-top:6px;font:10px monospace;display:flex}#timingMarker{background:var(--success);z-index:1;border-radius:50%;width:5px;height:5px;position:absolute;bottom:-3px;transform:translate(-50%)}.hit-feedback{text-align:right;flex:0 0 60px}#judgement{min-height:18px;margin-top:5px;font-size:12px;display:block}.flow-meter{justify-content:flex-end;align-items:flex-end;gap:4px;height:16px;display:flex}.flow-meter i{background:#405064;width:7px;height:6px}.flow-meter i:nth-child(2){height:10px}.flow-meter i:nth-child(3){height:14px}.instrument[data-flow="1"] .flow-meter i:first-child,.instrument[data-flow="2"] .flow-meter i:nth-child(-n+2),.instrument[data-flow="3"] .flow-meter i{background:var(--success);box-shadow:0 0 8px #d6e89577}.feedback-detail{text-align:right;color:#a8b6c6;height:16px;margin:5px 0 0;font-size:12px;line-height:16px}.feedback-detail[hidden]{visibility:hidden;display:block!important}.kit-usage{letter-spacing:1px;color:#58626e;margin:0 0 8px;font:11px monospace}.pads{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.pad{touch-action:none;-webkit-user-select:none;user-select:none;color:#e4e8ee;background:linear-gradient(#30363d,#24292f);border:1px solid #626870;border-bottom:4px solid #11151b;border-radius:7px;flex-direction:column;justify-content:space-between;align-items:flex-start;min-width:0;height:clamp(90px,12vh,135px);padding:11px 12px;display:flex;position:relative;box-shadow:inset 0 1px 1px #ffffff19,0 2px 2px #0002}.pad .sound{letter-spacing:.4px;font-size:14px;font-weight:500}.pad kbd{color:#9aa4af;border:1px solid #535d69;border-radius:2px;padding:2px 4px;font:11px monospace;position:absolute;top:9px;right:10px}.pad:not(.assigned){background:#292e34;border-color:#787e85 #787e85 #252a31}.pad.assigned:before{content:"";background:var(--color);width:4px;height:4px;position:absolute;bottom:13px;right:10px}.pad.lit .sound{color:var(--color)}.pad-ripple{border:2px solid var(--color);pointer-events:none;border-radius:5px;animation:.4s ease-out forwards padRipple;position:absolute;inset:3px}.instrument[data-flow="3"] .pad.lit{box-shadow:inset 0 0 28px color-mix(in srgb, var(--color) 40%, transparent), 0 0 22px color-mix(in srgb, var(--color) 60%, transparent)}.transport{border-top:1px solid #a6adb5;align-items:center;gap:10px;margin-top:20px;padding-top:15px;display:flex}.icon-button{place-items:center;width:46px;height:46px;padding:10px;display:inline-grid}.icon-button svg,.metronome-toggle svg{width:24px;height:24px}.transport .primary{width:62px}.calibration-control{background:0 0;border-color:#0000;margin-left:auto;font-size:25px}.metronome-toggle{color:#5d6774;border:1px solid #a0a8b2;border-radius:3px;place-items:center;width:46px;height:46px;display:inline-grid;position:relative}.metronome-toggle input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.metronome-toggle:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}.result-link{min-height:34px;padding:6px 9px;font-size:12px}.quiet .pad-ripple{display:none}.quiet .pad.lit{box-shadow:none}.quiet .flow-meter i{box-shadow:none!important}@keyframes padRipple{0%{opacity:.95;transform:scale(.85)}to{opacity:0;transform:scale(1.06)}}dialog{color:var(--ink);background:#e4e7eb;border:1px solid #8c959f;border-radius:6px;width:min(700px,100% - 24px);max-height:90dvh;padding:22px}dialog::backdrop{background:#0c1426b8}.dialog-head{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.dialog-head h2{margin:0;font-size:18px}.dialog-head button{width:42px;padding:2px;font-size:24px}.settings-content{gap:22px;display:grid}.settings-content section{border-top:1px solid #b5bcc5;padding-top:10px}.settings-content h3{font-size:16px}.field{margin:15px 0}.field input[type=number]{width:110px}#learnButtons{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}#learnButtons button{padding:8px 4px;font-size:12px}.learning{border-color:var(--accent);color:var(--accent)}.midi-sensitivity{grid-template-columns:1fr 1fr;align-items:center;gap:12px;display:grid}#setup{border-top:1px solid #b5bcc5;padding-top:16px;font-size:14px}summary{cursor:pointer}.guide{gap:10px;margin-top:18px;display:grid}.guide p{color:var(--muted);font-size:14px;line-height:1.7}#calibrationDialog{text-align:center;max-width:460px}#calibrationCount{color:var(--accent);margin:20px;font:44px monospace;display:block}.calibration-pad{color:#fff;touch-action:none;background:#252c35;width:160px;height:160px;margin:20px auto;font-size:24px;display:block}.calibration-pad span{color:#b8c5d3;margin-top:10px;font-size:12px;display:block}.calibration-pad.lit{background:#415363}.calibration-actions{justify-content:center;gap:10px;display:flex}#resultDialog{width:min(540px,100% - 20px);max-height:96dvh;padding:14px}#resultImage{object-fit:contain;width:100%;max-height:calc(96dvh - 150px);display:block}.result-actions{gap:10px;margin-top:12px;display:flex}.result-actions>*{text-align:center;flex:1}#saveResult{background:var(--accent);color:#fff;border-radius:3px;padding:12px;font-size:14px;text-decoration:none}.notice{z-index:20;color:#fff;background:#162538;border:1px solid #7892b8;border-radius:4px;width:max-content;max-width:calc(100% - 24px);padding:12px 16px;font-size:14px;position:fixed;bottom:15px;left:50%;transform:translate(-50%)}#openLessons{display:none}@media (width<=1050px){.workspace{grid-template-columns:210px minmax(0,1fr)}.instrument{padding:18px}.library{padding:18px 12px}.brand-model{display:none}.pads{gap:8px}.pad{padding:9px}.pad .sound{font-size:12px}}@media (width<=760px){.app-header{padding:15px 12px 10px}.brand{font-size:22px}.header-actions{gap:8px}#status{font-size:11px}main{padding:0 8px 18px}.mode-nav{min-height:40px;padding:8px 4px}.workspace{border-radius:6px;display:block}.instrument{border-radius:6px;padding:14px 10px}.instrument-head{align-items:end;gap:10px;margin-bottom:14px}h1{font-size:16px}.tempo{gap:4px;font-size:11px}.tempo input{width:62px;font-size:24px}.display{padding:10px 7px 8px}.patternhead{gap:7px}.sequence{gap:3px}.step{height:24px}.sequence[data-rows="5"] .step,.sequence[data-rows="6"] .step,.sequence[data-rows="7"] .step,.sequence[data-rows="8"] .step{height:19px}.score-strip{gap:7px;margin-top:12px;padding-top:10px}.score strong{font-size:26px}#padako{flex-basis:40px;width:40px;height:35px}.hit-feedback{flex-basis:48px}.pads{gap:7px}.pad{aspect-ratio:1.12;border-radius:5px;height:auto;min-height:63px;padding:7px}.pad kbd{display:none}.pad .sound{letter-spacing:0;font-size:12px}.pad.assigned:before{width:3px;height:3px;bottom:10px;right:6px}.transport{gap:8px;margin-top:14px;padding-top:12px}#openLessons{color:#263b5c;background:0 0;border-color:#a8b2bf;justify-content:space-between;align-items:center;gap:18px;min-height:30px;margin-bottom:7px;padding:4px 8px;font-size:12px;display:flex}.kit-usage{margin-bottom:6px;font-size:10px}#lessonDialog{width:calc(100% - 16px);max-height:92dvh;margin:auto auto 8px;padding:16px}#lessonDialog .lesson-list{max-height:48dvh}#lessonDialog .lesson-option{padding:14px 10px}#lessonDialog .lesson-description{display:none}.lesson-option strong{font-size:15px}.library-heading{display:none}#learnButtons{grid-template-columns:repeat(2,1fr)}.dialog-head{margin-bottom:14px}dialog{padding:18px}.result-link{padding:5px;font-size:11px}.calibration-control{width:40px}.patternhead #bar{font-size:11px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.instrument:after,.performance-pulse,.performance-release,.pad-ripple{display:none}.pad.lit{transform:none}}body{background:#292b2c}.machine{background:linear-gradient(110deg,#d1d4d3,#e5e6e3 45%,#c7cac9);border:1px solid #909596;border-radius:14px;max-width:1240px;margin:32px auto 48px;padding:0 8px 10px;box-shadow:inset 0 2px #ffffffe0,inset 5px 0 3px #eef0ed,inset -5px 0 3px #a1a6a5,0 9px #646a6b,0 12px #15191b,0 25px 45px #0007}.app-header{border-bottom:1px solid #a0a5a4;padding:22px 24px 18px;position:relative;box-shadow:0 1px #ffffff90}.brand{letter-spacing:-1.2px;color:#202629;text-shadow:0 1px #fff;font-size:25px}.brand-model{letter-spacing:1px;font-size:12px}.header-actions{gap:12px}.header-actions :is(button,.gear-link){background:linear-gradient(#eef0ee,#bbc0bf);border:1px solid #7e8687;border-radius:50%;width:40px;height:40px;min-height:40px;padding:10px;box-shadow:inset 0 1px #fff,0 2px #777f80,0 3px 3px #0003}.header-actions svg{width:19px;height:19px;display:block}.header-actions .power-key{color:#525e5c;order:3}.header-actions .power-key[aria-pressed=true]{color:#1e6549;box-shadow:inset 0 1px #fff,0 2px #777f80,0 0 0 2px #94bfa280}#status{font:12px monospace}main{padding:0}.workspace{box-shadow:none;background:0 0;border:0;border-radius:0}.library{background:#bfc5c34d;border-right:1px solid #9fa5a4;border-radius:0;padding-top:24px}.instrument{background:0 0;border-radius:8px;padding:24px}.instrument-head{align-items:stretch;gap:12px;margin-bottom:16px}.program-window{color:#e8eee3;background:#333d3d;border:1px solid #171e1e;border-radius:4px;flex-direction:column;flex:1;justify-content:center;padding:10px 13px;display:flex;box-shadow:0 1px #fff,inset 0 3px 5px #0006}.program-window h1{letter-spacing:0;font-size:18px;font-weight:500;line-height:1.5}.tempo{color:#384437;background:#c2cbb8;border:1px solid #737d70;border-radius:3px;align-content:center;justify-items:center;gap:0;min-width:80px;padding:7px 10px 5px;font:12px monospace;display:grid;box-shadow:inset 0 2px 5px #37403050,0 1px #fff}.tempo input{color:#26382d;text-align:center;font-variant-numeric:tabular-nums;background:0 0;border:0;border-radius:0;width:76px;min-height:37px;padding:0;font:32px monospace}.display{background:linear-gradient(135deg,#1c292e,#111b20);border:5px solid #343b3d;border-color:#1c2326 #343b3d #566061;border-radius:7px;padding:16px 12px 10px;box-shadow:0 1px #ffffffe0,0 -1px #777f7e,inset 0 3px 7px #0008}#patternTabs button[aria-pressed=true]{color:#182c24;background:#aac2ad;border-color:#b4ccb5;box-shadow:0 0 8px #91b39522}.pad-bank{padding-top:17px}.kit-usage{letter-spacing:1px;color:#4b5556;align-items:center;gap:10px;margin:0 0 10px;font:12px monospace;display:flex}.kit-usage:after{content:"";background:#9da5a3;flex:1;height:1px;box-shadow:0 1px #ffffff90}.kit-usage span:last-child{letter-spacing:0;order:2;font-size:12px}.pads{background:#818b8a;border:1px solid #667170;border-radius:9px;gap:12px;padding:6px;box-shadow:inset 0 2px 5px #0004,0 1px #ffffffc0}.pad,.pad:not(.assigned){background:linear-gradient(150deg,#3e4649 0%,#2c3336 45%,#232a2d 100%);border:1px solid #171d20;border-top-color:#454d50;border-bottom:5px solid #12181b;border-radius:7px;box-shadow:inset 0 2px 1px #ffffff20,inset 2px 0 3px #ffffff09,inset -2px 0 3px #0004,0 3px 1px #172021,0 5px 5px #0004}.pad:after{content:"";pointer-events:none;border:1px solid #ffffff07;border-radius:4px;position:absolute;inset:4px}.pad:hover{background:linear-gradient(150deg,#454e50,#2c3437)}.pad .num{color:#a2acac;font:12px monospace}.pad .sound{letter-spacing:.6px;text-shadow:0 1px #000;font-size:13px;font-weight:600}.pad:not(.assigned) .sound{color:#9aa4a5}.pad.lit{border-color:var(--color);box-shadow:inset 0 0 22px color-mix(in srgb, var(--color) 25%, transparent), 0 0 14px color-mix(in srgb, var(--color) 40%, transparent);background:linear-gradient(150deg,#46575c,#26393d);transform:translateY(3px)}.transport{border-top:0;gap:12px;margin-top:18px;padding-top:0}.transport .icon-button,.metronome-toggle{background:linear-gradient(#f0f1ed,#c9ceca);border:1px solid #7a8382;border-bottom:3px solid #717978;border-radius:5px;box-shadow:inset 0 1px #fff,0 2px 2px #0002}.transport .primary{background:linear-gradient(#4276c4,#29539a);border-color:#234577 #234577 #173359;width:70px;box-shadow:inset 0 1px #89a7d5,0 2px 2px #0003}.transport .icon-button:active{transform:translateY(2px);box-shadow:inset 0 2px 3px #0003}.metronome-toggle:has(input:checked){color:#234e89;border-color:#7a8382}.calibration-control{width:44px;height:44px;font-size:25px;border-radius:50%!important}@media (width<=1280px) and (width>=761px){.machine{margin:20px 20px 40px}}@media (width<=760px){.machine{border-radius:11px;margin:14px 8px 28px;padding:0 5px 7px;box-shadow:inset 0 2px #ffffffe0,inset 3px 0 2px #eef0ed,inset -3px 0 2px #a1a6a5,0 6px #646a6b,0 9px #15191b,0 17px 24px #0006}.app-header{gap:8px;padding:16px 9px 13px}.brand{white-space:nowrap;font-size:23px}.header-actions{gap:8px}#status{max-width:80px;font-size:12px}.header-actions :is(button,.gear-link){width:34px;height:34px;min-height:34px;padding:7px}main{padding:0}.instrument{padding:16px 9px 13px}.instrument-head{align-items:stretch;gap:8px;margin-bottom:13px}.program-window{padding:8px 10px}.program-window h1{font-size:15px}#openLessons{min-height:24px;box-shadow:none;color:#bbc9bc;background:0 0;border:0;justify-content:space-between;gap:8px;width:100%;margin:0 0 4px;padding:0;font:12px monospace;display:flex}.tempo{min-width:64px;padding:5px 4px;font-size:12px}.tempo input{width:62px;font-size:28px}.display{border-width:4px;padding:10px 6px 8px}.pad-bank{padding-top:13px}.pads{gap:9px;padding:5px}.pad{aspect-ratio:1.03;min-height:62px;padding:7px 6px}.pad .sound{letter-spacing:0;font-size:12px}.pad .num{font-size:12px}.kit-usage{letter-spacing:.6px;margin-bottom:8px}.transport{gap:10px;margin-top:15px}.transport .primary{width:62px}}@media (prefers-reduced-motion:reduce){.pad.lit{transform:none}}.tempo input{letter-spacing:1px;font-variant-numeric:tabular-nums;appearance:textfield;font-family:Arial,Helvetica,sans-serif;font-size:34px;font-weight:600;line-height:1.15}.tempo input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tempo input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tempo{letter-spacing:1.2px;background:linear-gradient(#b5c3ac,#c7d1bf);border:3px solid #737d75;border-color:#545f58 #737d75 #a4afa2;border-radius:3px;font-family:Arial,Helvetica,sans-serif;font-weight:600}.program-window{border-width:3px;border-top-color:#202b2b;border-bottom-color:#66716e;box-shadow:0 1px #ffffffe0,inset 0 2px 5px #0005}.machine{background:linear-gradient(100deg,#c9cdcb,#e3e5df 48%,#c4cac7);border-left:5px solid #858d8b;border-right:5px solid #858d8b}.app-header{border-bottom:2px solid #a0a7a3}.library{box-shadow:inset -1px 0 #ffffff60}.lesson-list{scrollbar-gutter:stable;background:#b5beb522;border:1px solid #9aa59e;box-shadow:inset 0 1px 3px #0001}.lesson-option{border-bottom-color:#abb4ad;gap:8px;padding:14px 10px}.lesson-option strong{overflow-wrap:anywhere;line-height:1.5}.lesson-option[aria-pressed=true]{color:#23392d;background:#dce5d7;box-shadow:inset 3px 0 #557b62}.library select{background:#d7dcd5;border-color:#8d9991 #8d9991 #7f8b83;border-bottom-style:solid;border-bottom-width:2px;border-radius:2px;box-shadow:inset 0 1px #f3f5ef}.library .text-button{box-shadow:none;background:0 0;border:0;min-height:30px;padding:4px;font-size:12px}.transport{border-top:1px solid #9aa49e;padding-top:12px;box-shadow:inset 0 1px #ffffff80}@media (width<=760px){.machine{border-left-width:3px;border-right-width:3px}.tempo input{width:58px;font-size:29px}.tempo{min-width:68px;padding:5px 3px}.program-window{padding:7px 8px}.lesson-option{min-height:0}}.master-volume{flex:0 120px;align-content:center;gap:3px;width:120px;min-width:78px;margin-left:auto;display:grid}.master-volume>span{letter-spacing:1px;color:#35413c;justify-content:space-between;font:600 12px Arial,sans-serif;display:flex}.master-volume output{letter-spacing:0;font-variant-numeric:tabular-nums;font-weight:400}.master-volume input[type=range]{appearance:none;cursor:pointer;touch-action:pan-y;background:0 0;border:0;height:28px;min-height:28px}.master-volume input::-webkit-slider-runnable-track{background:#535f59;border-top:1px solid #25352d;border-radius:2px;height:5px;box-shadow:0 1px #f4f6ed}.master-volume input::-webkit-slider-thumb{appearance:none;background:linear-gradient(#69746c 0 42%,#dae5d6 43% 51%,#48584d 52%);border:1px solid #39463f;border-bottom:3px solid #202f27;border-radius:3px;width:16px;height:24px;margin-top:-10px;box-shadow:0 2px 3px #0004}.master-volume input::-moz-range-track{background:#535f59;border-radius:2px;height:5px}.master-volume input::-moz-range-thumb{background:linear-gradient(#69746c 0 42%,#dae5d6 43% 51%,#48584d 52%);border:1px solid #39463f;border-radius:3px;width:16px;height:24px}.transport{flex-wrap:wrap}.result-link{order:5}@media (width<=760px){.master-volume{flex-basis:105px;width:105px}.transport{gap:8px}}.sample-ad{color:#e8eee7;background:#263a35;border:1px solid #617b68;border-radius:4px;gap:8px;margin:12px 0;padding:16px;display:grid}.sample-ad small{font-size:12px}.sample-ad strong{font-size:17px}.sample-ad span{font-size:13px}.test-links{flex-wrap:wrap;gap:14px;margin-top:12px;display:flex}.test-links a{font-size:14px}.record-summary{flex-wrap:wrap;gap:12px 24px;padding:14px 0;display:flex}.record-summary small{opacity:.7;flex-basis:100%}.share-options{border-top:1px solid #87908b;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:16px;display:flex}.share-options input,.share-options small,.share-options p{width:100%;min-width:0}.share-options input{padding:10px;font-size:12px}.share-options a{padding:10px}#resultImage{object-fit:contain;background:#111c27;max-height:48dvh}.header-actions .language-switch{flex-shrink:0;padding:4px;font:600 11px ui-monospace,monospace}html[lang=en] .lesson-picker{min-width:80px}.record-summary span{align-items:baseline;gap:.5em;display:inline-flex}@media (width<=420px){.header-actions{gap:5px}.brand-model{letter-spacing:.06em}}.trial-label{color:#d6e895;margin-top:5px;font-size:11px;display:block}.brand{flex-shrink:0}.brand-logo{width:150px;height:64px;display:block}.settings-content h3{margin:0 0 12px}.settings-content section{padding-top:16px}.midi-sensitivity{align-items:end;margin-top:15px}.midi-sensitivity .field{min-width:0;margin:0}.midi-sensitivity select,.midi-sensitivity input{width:100%;min-width:0}.midi-sensitivity input[type=range]{height:42px;margin:0}.master-volume{gap:2px;height:46px}.master-volume>span{line-height:14px}@media (width<=760px){.brand-logo{width:108px;height:46.08px}}@media (width<=360px){.header-actions #status{display:none}.transport{gap:6px}.transport .primary{width:48px}.transport .icon-button,.transport .metronome{width:40px;min-width:40px}.master-volume{flex:56px;width:auto;min-width:56px}.master-volume>span{letter-spacing:0;font-size:10px}.pad{padding-inline:5px}.pad .sound{white-space:nowrap;font-size:10px}}.score{text-align:center;flex:0 0 68px;align-content:center;justify-items:center;gap:4px;display:grid}.score>span{line-height:1.2}.score strong{white-space:nowrap;font-variant-numeric:tabular-nums;justify-content:center;align-items:baseline;gap:2px;font:600 28px/1 Arial,Helvetica,sans-serif;display:flex}.score small{font-size:13px;font-weight:400}@media (width<=760px){.score{flex-basis:56px}.score strong{font-size:24px}.score small{font-size:12px}}.header-actions :is(button,.gear-link){color:inherit;flex-shrink:0;justify-content:center;align-items:center;padding:0;line-height:1;text-decoration:none;display:inline-flex}.header-actions .gear-link{font:600 10px/1 ui-monospace,monospace}.header-actions .gear-link:focus-visible{outline-offset:3px;outline:3px solid #3778d6}.header-actions svg{flex-shrink:0}@media (width<=600px){.header-actions #status{display:none}}.pad-layout-switch,.pad-layout-note{display:none}@media (width<=760px){.pad-bank .kit-usage{flex-wrap:wrap;gap:8px;margin-bottom:8px}.pad-bank .kit-usage:after,.pad-bank .pad-count{display:none}.pad-layout-switch{gap:2px;margin-left:auto;display:inline-flex}.pad-layout-switch button{color:#263133;min-height:36px;box-shadow:none;background:#cbd0c9;border:1px solid #87918b;border-radius:3px;padding:6px 12px;font:12px/1.2 Arial,sans-serif}.pad-layout-switch button[aria-pressed=true]{color:#eef2e5;background:#303c3d}.pad-layout-switch button:disabled{opacity:.55}.pad-layout-note{color:#46524e;margin:0 0 8px;font-size:11px;display:block}.pad-bank[data-layout=large] .pads{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pad-bank[data-layout=large] .pad{aspect-ratio:auto;height:clamp(88px,13svh,120px);min-height:88px}.pad-bank[data-layout=large] .pad[data-track="2"]{grid-area:1/1}.pad-bank[data-layout=large] .pad[data-track="7"]{grid-area:1/2}.pad-bank[data-layout=large] .pad[data-track="0"]{grid-area:2/1}.pad-bank[data-layout=large] .pad[data-track="1"]{grid-area:2/2}.pad-bank[data-layout=large] .pad:is([data-track="3"],[data-track="4"],[data-track="5"],[data-track="6"]){display:none}.pad-bank[data-layout=large] .pad .sound{font-size:14px}.pad-bank .pad{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.machine{margin-top:8px;margin-bottom:8px}.display{padding-top:10px;padding-bottom:8px}}@media (width<=760px) and (height<=740px){.instrument-head{margin-bottom:10px}.score-strip{margin-top:8px;padding-top:6px}.pad-bank{padding-top:8px}.pad-bank[data-layout=large] .pad{height:88px}}@media (width<=760px){.app-header{padding-top:10px;padding-bottom:9px}.instrument{padding-top:10px}.pad-bank .kit-usage{letter-spacing:0}}@media (width<=760px) and (height<=740px){.app-header{padding-top:6px;padding-bottom:6px}.brand-logo{width:100px;height:auto}.program-window{padding-top:5px;padding-bottom:5px}.patternhead{margin-bottom:6px}.transport{margin-top:8px}.feedback-detail{margin-top:2px}.sequence .step{height:18px}.patternhead{height:24px}#patternTabs button{height:24px;min-height:24px;padding-block:2px}.histogram{height:22px}.histogram>i:not(#timingMarker){max-height:22px}#padako{flex-basis:32px;width:32px;height:28px}.score strong{font-size:21px}.score>span{font-size:10px}.transport{padding-top:8px}.display{padding-top:6px;padding-bottom:4px}.instrument{padding-bottom:6px}}.machine{background:#ced2cc;border-radius:8px;box-shadow:inset 0 1px #eef0e9,0 4px #727c76,0 10px 24px #0003}.app-header{box-shadow:none;border-bottom:1px solid #9aa49d}.program-window{border-radius:3px;box-shadow:inset 0 1px 3px #0003}.display{border-radius:4px;box-shadow:inset 0 2px 5px #0005}.pads{box-shadow:none;background:0 0;border:0;border-radius:0;padding:0}.kit-usage:after,.library{box-shadow:none}.lesson-list{box-shadow:none;background:0 0;border-inline:0}.lesson-option{padding-block:11px}.transport{box-shadow:none}@media (width>=761px){.machine{margin-top:20px}.app-header{padding-block:16px}}.lesson-title-row{align-items:center;gap:8px;min-width:0;display:flex}.lesson-title-row h1{flex:1;min-width:0}.challenge-link{flex:none;position:relative}.challenge-copy{width:36px;height:36px;min-height:36px;color:inherit;box-shadow:none;background:0 0;border:1px solid #a4b4a655;border-radius:3px;place-items:center;padding:0;display:grid}.challenge-copy:hover:not(:disabled){background:#ffffff16}.challenge-copy:focus-visible{outline:2px solid var(--success);outline-offset:2px}.challenge-notice:not(:empty),.challenge-manual{z-index:10;color:#edf1e7;background:#263233;border:1px solid #85968b;border-radius:3px;width:max-content;max-width:min(260px,65vw);padding:8px 10px;font:12px/1.5 Arial,sans-serif;position:absolute;top:calc(100% + 6px);right:0}.challenge-manual input{width:100%;margin-top:6px;font:12px/1.5 Arial,sans-serif;display:block}