:root{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#24394b;background:#eaf0f5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:1px solid #b6c5d1;background:#fff;color:inherit;border-radius:6px;padding:10px 14px}button:hover{background:#e3edf5}button:focus-visible,input:focus-visible{outline:3px solid #0875cc;outline-offset:3px}button:disabled{opacity:.5;cursor:wait}header{padding:26px 36px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #b9c9d5}.brand{font-size:13px;color:#55728a}h1{font-size:32px;margin:5px 0 0;letter-spacing:.08em}.master{display:flex;gap:26px;align-items:center}.master label{font-size:13px;display:grid;grid-template-columns:1fr auto;gap:8px}.master input{grid-column:1/3;width:190px}.stop{background:#af3644;color:#fff;border:0;font-weight:bold;padding:17px 20px}.stop:hover{background:#922c39}kbd{font-size:11px;margin-left:15px;opacity:.8}main{display:grid;grid-template-columns:200px 1fr;min-height:calc(100vh - 190px)}aside{padding:25px 20px;background:#dfe8ef;border-right:1px solid #c1cfd9}.caption{font-size:12px;color:#5b7488;margin:0 0 14px}nav{display:grid;gap:7px}nav button{text-align:left;background:transparent;border-color:transparent}nav button.selected{background:#24577d;color:white;border-color:#24577d}.note{font-size:12px;line-height:1.8;color:#5d7485;margin-top:28px}aside>button{font-size:11px;width:100%;margin-bottom:8px;padding:9px 3px}.desk{padding:28px 32px}.deskHeading{display:flex;align-items:center;justify-content:space-between}.deskHeading input{font-size:23px;font-weight:bold;border:0;border-bottom:1px dashed #b6c5d1;background:transparent;width:min(360px,65vw);padding:0 0 5px;color:inherit}.deskHeading span,.hint{font-size:12px;color:#60788a}.hint{margin:15px 0 23px}#pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.pad{background:#fff;border:1px solid #c3d0db;border-top:4px solid #6792b2;border-radius:8px;overflow:hidden;padding:13px;min-width:0}.pad.playing{border-color:#278d89;border-top-color:#278d89;background:#eefaf8}.pad.fading{border-color:#c18d2f;background:#fffaed}.padTop{display:flex;justify-content:space-between;font-size:12px;color:#6b8292}.edit{padding:0 5px;border:0;background:transparent;font-size:12px}.trigger{width:100%;height:100px;text-align:left;background:transparent;border:0;padding:15px 0;font-size:17px;font-weight:bold;overflow-wrap:anywhere}.empty .trigger{color:#8196a5;font-size:14px}.time{font-variant-numeric:tabular-nums;font-size:12px;display:flex;justify-content:space-between;margin-bottom:12px}.volume{display:flex;align-items:center;gap:8px;font-size:11px}.volume input{width:100%;min-width:0;accent-color:#24577d}.options{display:flex;gap:10px;font-size:11px;margin:13px 0}.options label{display:flex;gap:4px;align-items:center}.bgm{width:100%;font-size:12px;padding:8px}.bgm.active{background:#24577d;color:#fff}footer{display:flex;justify-content:space-between;gap:20px;padding:16px 35px;font-size:11px;color:#526d81;border-top:1px solid #c3d0db}dialog{width:min(480px,92vw);border:1px solid #9bb0c0;border-radius:12px;padding:26px;color:inherit}dialog::backdrop{background:#162d4566}dialog h2{font-size:20px;margin-top:0}dialog label{display:grid;gap:9px;margin:22px 0;font-size:13px}dialog input{padding:10px;width:100%;border:1px solid #b6c5d1;border-radius:5px}.dialogActions{display:flex;justify-content:flex-end;gap:8px}#fileInfo{font-size:12px;color:#60788a}@media(max-width:1100px){#pads{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){header{padding:18px;align-items:flex-start}.master{flex-direction:column;gap:12px;align-items:stretch}.master input{width:150px}h1{font-size:25px}.stop{padding:12px;font-size:12px}main{display:block}aside{padding:15px;border-right:0}nav{grid-template-columns:repeat(3,1fr);gap:4px}nav button{font-size:12px;padding:10px 5px}.note{margin:12px 0 7px}aside>button{width:auto;padding:8px;margin-right:5px}.desk{padding:20px 14px}#pads{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pad{padding:10px}.trigger{height:90px;font-size:15px}.options{gap:6px;font-size:10px}footer{padding:14px;flex-direction:column;gap:5px}.deskHeading span{font-size:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
header{position:sticky;top:0;z-index:10}.volume>span,.volume output{white-space:nowrap;flex-shrink:0}
