:root{color-scheme:light;font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",sans-serif;background:#eae6db;color:#30342e;--line:#c5c4b5;--ink:#30342e;--paper:#f5f1e7}
*{box-sizing:border-box}body{margin:0;padding:24px 28px 14px;min-height:100dvh;display:flex;flex-direction:column;gap:18px}
header{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:74px}.brand{display:flex;align-items:baseline;gap:20px}h1{font-family:Georgia,serif;font-weight:400;letter-spacing:-.065em;font-size:56px;margin:0}.brand span{font-size:11px;letter-spacing:.18em;white-space:nowrap}
button,.tools>label{font:inherit;font-size:13px;font-weight:500;min-height:48px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);padding:12px 16px;cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.42;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,.tools>label:focus-within{outline:3px solid #8b523c;outline-offset:3px}button:active{transform:translateY(1px)}.tools{display:flex;gap:8px;align-items:center}.tools>label{position:relative;display:grid;place-items:center;overflow:hidden}.tools input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
main{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(280px,1fr);gap:22px;flex:1;min-height:350px}
.pad-panel{min-width:0;display:flex}#pads{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(135px,1fr));gap:12px}
.pad{position:relative;border:1px solid #bfc4b3;border-radius:15px;min-width:0;padding:20px 8px;font-size:clamp(16px,1.9vw,25px);letter-spacing:-.025em;background:#cbd0ba;box-shadow:0 4px 0 #a2aa93;user-select:none;-webkit-user-select:none;touch-action:none}
.pad:before{content:"";position:absolute;left:15px;right:15px;top:13px;border-top:1px dashed #71796965}
.pad:nth-child(3n+2){background:#d7bea1;border-color:#baa183;box-shadow:0 4px 0 #b39b7f}.pad:nth-child(3n){background:#c6cfca;border-color:#a7b6af;box-shadow:0 4px 0 #9fada5}
.pad[data-pad="6"],.pad[data-pad="7"],.pad[data-pad="8"],.pad[data-pad="9"]{background:#454d43;color:#f5f1e7;border-color:#454d43;box-shadow:0 4px 0 #272f26}
.pad:active{background:#f4df98;color:#30342e;transform:translateY(3px);box-shadow:0 1px 0 #a49b7b}
.fx-panel{background:#f3efe4;border:1px solid var(--line);padding:16px;border-radius:18px;display:flex;flex-direction:column;gap:14px}nav{display:flex;gap:6px}nav button{flex:1;padding:10px 6px;background:transparent}button[aria-pressed=true]{background:#424c3e;color:#fff;border-color:#424c3e}
#xy{flex:1;min-height:235px;display:grid;place-items:center;border:1px solid #c4c7b8;border-radius:10px;touch-action:none;user-select:none;background:repeating-linear-gradient(0deg,transparent 0 35px,#75836718 36px),repeating-linear-gradient(90deg,#e5e8d9 0 35px,#75836718 36px)}
#xy>div{text-align:center;pointer-events:none}#xy strong{display:block;font-family:Georgia,serif;font-weight:400;font-size:28px;color:#4e5a43}#xy span{display:block;font-size:11px;margin-top:12px;color:#5d6656}.fx-help{font-size:11px;color:#606653;margin:0;text-align:center}
footer{display:flex;align-items:center;gap:8px;padding:16px;background:#f5f1e7;border:1px solid var(--line);border-radius:14px;flex-wrap:wrap}#position{font-size:30px;letter-spacing:-.06em;font-variant-numeric:tabular-nums;min-width:136px;padding-right:15px;border-right:1px solid var(--line);margin-right:5px}#record{background:#a4533c;color:#fff;border-color:#a4533c}#dub{background:#d7bea1;border-color:#baa183}#stop{background:#30382e;color:#fff}footer label{font-size:12px;display:flex;align-items:center;gap:4px;min-height:44px}input[type=checkbox]{width:20px;height:20px;accent-color:#46513f}#status{margin:0;font-size:12px;color:#606653;min-height:18px}
dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:24px;width:min(760px,90vw);max-height:85dvh}dialog::backdrop{background:#252b2359}dialog h2{font-size:22px;margin-top:0}.layer,.edit-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}.layer{padding:12px;background:#e5e5d8;border-radius:8px}.layer select{max-width:250px}.layer input{width:6em}dialog input,dialog select{font:inherit;padding:10px;border:1px solid var(--line);border-radius:6px;background:#fff}dialog p,dialog label{font-size:13px}
@media(min-width:1000px) and (min-height:700px){body{height:100dvh;max-height:1100px}main{min-height:0}}
@media(max-width:1050px){body{padding:16px;gap:14px}.brand{gap:10px}h1{font-size:42px}.tools button,.tools>label{font-size:11px;padding:10px}main{gap:14px}footer button{padding:10px}#position{font-size:25px;min-width:115px}}
@media(max-width:750px){header{flex-wrap:wrap}.tools{flex-wrap:wrap}main{grid-template-columns:1fr}#pads{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,110px);gap:8px}.pad{font-size:15px;padding:8px}#xy{min-height:200px}footer{padding:10px}}
:root{color-scheme:dark;--line:#393b40;--ink:#eef0f4;--paper:#202226;background:#151619;color:var(--ink);font-family:Arial,"Hiragino Kaku Gothic ProN",sans-serif}
body{padding:22px 26px;gap:16px}
h1{font-family:inherit;font-size:42px;font-weight:600;letter-spacing:-.065em}
.brand span{color:#8f949e;letter-spacing:.13em;font-size:10px}
button,.tools>label{border-radius:5px;background:#222429;border-color:#383b41}
.pad{background:#292d34!important;color:#edf0f5!important;border:1px solid #41464f!important;border-radius:7px;box-shadow:none!important;font-weight:500;letter-spacing:0}
.pad:before{display:none}
.pad[data-pad="6"],.pad[data-pad="7"],.pad[data-pad="8"],.pad[data-pad="9"]{background:#343e4c!important;border-color:#526279!important}
.pad:active{background:#bad0f5!important;color:#18212f!important;transform:scale(.98)}
.fx-panel{background:#1d1f23;border-radius:7px;border-color:#35383e;padding:12px;gap:10px}
nav button{border-radius:4px;background:#25282e}
button[aria-pressed=true]{background:#b9cae6;color:#192333;border-color:#b9cae6}
#xy{border-color:#363c46;border-radius:5px;background:linear-gradient(90deg,transparent calc(50% - .5px),#424955 50%,transparent calc(50% + .5px)),linear-gradient(0deg,transparent calc(50% - .5px),#424955 50%,transparent calc(50% + .5px)),#22272f}
#xy strong{font-family:inherit;font-size:12px;font-weight:500;letter-spacing:.2em;color:#a3adbd;background:#22272f;padding:10px}
footer{background:#1d1f23;border-color:#35383e;border-radius:7px;gap:12px;padding:12px 16px}
.transport{width:58px;height:52px;padding:0;font-size:23px;font-family:Arial,sans-serif}
#record{background:#292226;border-color:#57383f;color:#fa6b7b}#dub{background:#273344;border-color:#455a76;color:#d7e5fc}#stop{background:#292c32;color:#eef0f4}
#save{margin-left:auto}
#position{font-family:Arial,sans-serif;font-size:28px;letter-spacing:-.02em;border-color:#393e47}
.mic-toggle{position:relative;cursor:pointer;border:1px solid #41464f;border-radius:5px;padding:0 14px;height:52px}
.mic-toggle input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
.mic-toggle span{font-size:11px;letter-spacing:.1em;color:#8d96a5}
.mic-toggle:has(input:checked){background:#38516c;border-color:#8eb8e3}
.mic-toggle:has(input:checked) span{color:#fff}
.mic-toggle:focus-within{outline:2px solid #adcaf1}
#status{color:#949ba7;font-size:11px}
dialog{background:#202329;color:#edf0f4;border-color:#41464f;border-radius:7px}
.layer{background:#2b3038}dialog input,dialog select{background:#171b21;color:#f2f4f7;border-color:#464d59}
@media(max-width:750px){body{padding:12px}footer{gap:8px}.transport{width:46px}#position{min-width:110px}}
.metronome{display:flex;align-items:center;gap:20px;min-height:48px;flex-wrap:wrap}
#metroToggle{font-size:10px;letter-spacing:.1em;padding:10px 14px}
.tempo-input{display:flex;align-items:center;gap:8px;font-size:11px;color:#a3adbd}
#bpm{width:76px;padding:9px 5px;background:#202329;border:1px solid #41464f;border-radius:5px;color:#eef0f4;font:inherit;font-size:20px;font-variant-numeric:tabular-nums;text-align:center}
#beats{display:flex;gap:14px;align-items:center}
#beats i{width:13px;height:13px;border-radius:50%;background:#343b46;transition:background .03s}
#beats i:first-child{width:17px;height:17px}
#beats i.lit{background:#cee0fc;box-shadow:0 0 10px #b0d0ff80}
.click-volume{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.08em;color:#a3adbd}
#clickVolume{width:150px;height:44px;accent-color:#bad0f5}
.mic-icon{display:block;position:relative;width:18px;height:24px;color:#adb7c5}
.mic-icon:before{content:"";position:absolute;left:6px;top:0;width:6px;height:13px;border:2px solid currentColor;border-radius:6px}
.mic-icon:after{content:"";position:absolute;left:2px;top:7px;width:14px;height:13px;border:2px solid currentColor;border-top:0;border-radius:0 0 10px 10px}
.mic-toggle .mic-icon{background:linear-gradient(currentColor,currentColor) 9px 20px / 2px 4px no-repeat}
.mic-toggle:has(input:checked) .mic-icon{color:#fff}

footer .metronome{gap:10px;margin-inline-start:auto;flex-wrap:nowrap}
footer #save{margin-left:0}
#metroToggle{display:grid;place-items:center;width:48px;padding:0}
.metro-icon{position:relative;width:21px;height:24px;background:currentColor;clip-path:polygon(32% 10%,66% 10%,86% 94%,14% 94%)}
.metro-icon::before{content:"";position:absolute;inset:4px 5px 5px;background:#24282f;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.metro-icon::after{content:"";position:absolute;left:9px;bottom:6px;width:2px;height:15px;background:currentColor;transform:rotate(23deg);transform-origin:bottom}
#metroToggle[aria-pressed=true] .metro-icon::before{background:#b9cae6}
footer #bpm{width:57px}
footer #beats{gap:7px}
footer #clickVolume{width:82px}
@media(max-width:750px){footer .metronome{margin-inline-start:0;flex-wrap:wrap}}

.tempo-stepper{display:flex;align-items:center;gap:4px}
.tempo-stepper button{min-width:44px;padding:0;font-size:20px}
footer #bpm{width:76px;appearance:textfield}
#bpm::-webkit-inner-spin-button,#bpm::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

footer{--control-size:48px}
footer .transport,footer .mic-toggle,footer #metroToggle,footer .tempo-stepper button{
  box-sizing:border-box;
  width:var(--control-size);
  height:var(--control-size);
  min-width:var(--control-size);
  min-height:var(--control-size);
  padding:0;
  flex:0 0 var(--control-size);
}
footer .mic-toggle{justify-content:center}
.drive-icon{display:block;width:23px;height:21px;background:currentColor;clip-path:polygon(33% 0,67% 0,100% 67%,84% 100%,16% 100%,0 67%,33% 0,43% 23%,20% 69%,80% 69%,57% 23%,43% 23%)}
#driveFiles{max-height:45vh;overflow:auto;margin:12px 0}
#driveFiles label{display:flex;align-items:center;gap:10px;min-height:44px;overflow-wrap:anywhere}