:root{color-scheme:dark;--bg:#101621;--panel:#172030;--ink:#f0f2f6;--muted:#a6afc0;--line:#303b50;--accent:#e2b75b;--accent-rgb:226,183,91}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}header{padding:24px 4vw;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;align-items:center}.brand{font:24px Georgia,serif;display:flex;gap:18px;align-items:center}.mark{color:var(--accent);font:30px Georgia,serif;letter-spacing:3px}.edition{font-size:12px;letter-spacing:2px;color:var(--muted)}main{max-width:1500px;margin:0 auto;padding:40px 4vw}h1{font:38px/1.2 Georgia,serif;margin:0 0 8px}p{margin:0;color:var(--muted)}.controls{display:flex;gap:30px;align-items:end;flex-wrap:wrap;margin-bottom:32px}.controls>div{flex:1;min-width:240px}.rule{border:0;margin:0;padding:0;display:flex;gap:4px}.rule legend,.modus-label{font-size:14px;color:var(--muted);margin-bottom:8px}.rule button{border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:10px 18px}.rule button:first-of-type{border-radius:8px 0 0 8px}.rule button:last-of-type{border-radius:0 8px 8px 0}.rule button[aria-checked=true]{color:var(--accent);border-color:var(--accent);background:rgba(var(--accent-rgb),.08)}.rule span{margin-left:10px}.modus-label{display:flex;flex-direction:column;margin:0;gap:7px}select{color:var(--ink);border:1px solid var(--line);background:var(--panel);padding:11px 30px 11px 14px;border-radius:8px;max-width:100%}.workbench{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}.bench-top{display:flex;justify-content:space-between;gap:18px;padding:18px 24px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}#mensuration{color:var(--accent);font-weight:600}.score-row{display:grid;grid-template-columns:175px minmax(0,1fr);padding:27px 24px 30px;border-bottom:1px solid var(--line);gap:26px}.row-label h2{font:24px Georgia,serif;margin:0 0 8px}.row-label p{font-size:14px;color:var(--accent);overflow-wrap:anywhere}.row-label .elements{display:block;margin-top:10px;font-size:12px;color:var(--muted)}.lane{display:flex;align-items:stretch;gap:0;min-height:100px;width:100%;background:repeating-linear-gradient(0deg,transparent,transparent 30px,#ffffff05 31px,transparent 32px)}.group{display:flex;min-width:0;position:relative;border-left:1px solid #62708a66;padding:9px 3px 6px;align-items:stretch}.group:last-child{border-right:1px solid #62708a66}.group:before{content:'';position:absolute;top:0;left:0;right:0;border-top:1px solid #62708a66}.cell{border:0;border-radius:7px;background:transparent;color:var(--ink);padding:8px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;position:relative}.split-group:hover,.split-group[aria-expanded=true]{background:rgba(var(--accent-rgb),.12);color:var(--accent)}.glyph{font:clamp(23px,3vw,44px)/1.2 Georgia,'Times New Roman',serif;display:block}.cell.long .glyph{width:75%;max-width:70px}.duration-long{display:block;height:2px;background:currentColor;width:100%;margin:25px 0 15px}.duration-short{display:block;width:70%;max-width:40px;height:14px;border:2px solid currentColor;border-top:0;border-radius:0 0 24px 24px;margin:17px auto 11px}.cell-meta{font-size:12px;opacity:.5}.bench-bottom{padding:16px 24px;display:flex;gap:24px;color:var(--muted);font-size:14px;align-items:center}.bench-bottom>span{display:flex;align-items:center;gap:9px}.long-key{display:inline-block;width:18px;height:2px;background:var(--ink)}.short-key{display:inline-block;width:14px;height:7px;border:1px solid var(--ink);border-top:0;border-radius:0 0 9px 9px}.span-info{margin-left:auto}.below{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:22px;font-size:14px}.below strong{font-weight:500;color:var(--ink)}footer{max-width:1500px;margin:0 auto;padding:0 4vw 28px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px;letter-spacing:.7px}.choice{position:fixed;z-index:10;background:#202b3e;border:1px solid var(--accent);border-radius:12px;box-shadow:0 20px 70px #0008;width:310px;padding:18px}.choice[hidden]{display:none}.choice-top{display:flex;justify-content:space-between;gap:15px;align-items:center}.choice h2{font:20px Georgia,serif;margin:0}.choice-top button{color:var(--muted);border:0;background:none;font-size:26px;padding:0 4px}.choice-options{display:grid;gap:8px}.split-option{display:flex;justify-content:space-between;align-items:center;width:100%;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:#172030;margin-top:10px;padding:12px 15px}.split-option[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.split-sign{font:26px Georgia,serif;letter-spacing:5px}.split-option small{font-size:12px;color:var(--muted)}.choice p{font-size:13px;margin-top:14px}.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body.silver{--accent:#b9d2e9;--accent-rgb:185,210,233}@media(max-width:900px){.score-row{grid-template-columns:1fr;gap:14px}.row-label{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}.row-label h2{margin:0}.row-label p{flex:1;min-width:150px}.row-label .elements{margin:0}.lane{min-height:90px}.glyph{font-size:30px}.cell-meta{display:none}}@media(max-width:600px){main{padding:26px 16px}.controls{gap:20px}.controls>div{flex-basis:100%}h1{font-size:32px}.edition{display:none}.modus-label{flex:1;min-width:190px}.bench-top{padding:15px;flex-wrap:wrap;gap:4px}.score-row{padding:20px 12px}.bench-bottom{padding:14px;gap:16px;flex-wrap:wrap}.span-info{margin-left:0;flex-basis:100%}.below{grid-template-columns:1fr;gap:14px}.duration-short{height:9px;border-width:1.5px;width:80%}.duration-long{height:1.5px}.group{padding-left:1px;padding-right:1px}.row-label p{font-size:14px}.choice{max-width:calc(100vw - 24px)}}
.transport{display:flex;align-items:end;gap:24px;margin-bottom:24px;padding:18px 22px;border:1px solid var(--line);border-radius:10px;background:#141d2c;flex-wrap:wrap}.transport label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:14px}.play{border:0;border-radius:7px;color:#111822;background:var(--accent);font-weight:650;min-width:95px;padding:12px 20px}.tempo-field{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;background:var(--panel);overflow:hidden}.tempo-field input{width:80px;padding:10px 12px;color:var(--ink);background:transparent;border:0;font:inherit;font-size:18px}.tempo-field>span{padding-right:12px;font-size:13px}.bar-time{margin-left:auto;display:flex;flex-direction:column;align-self:center}.bar-time strong{font-size:20px;font-weight:500}.bar-time>span{font-size:13px;color:var(--muted)}#audio-status{flex-basis:100%;font-size:14px}#audio-status:empty{display:none}.bar-progress{height:3px;background:#ffffff08}#progress{display:block;height:100%;width:0;background:var(--accent)}.cell.sounding{color:var(--accent);background:rgba(var(--accent-rgb),.1)}.transport select{padding-top:9px;padding-bottom:9px}@media(max-width:600px){.transport{padding:16px;gap:16px}.bar-time{margin-left:0}.play{min-width:80px;padding-left:14px;padding-right:14px}}

.duration-long{width:75%;max-width:70px}.duration-short{max-width:32px}

button.group{border-top:0;border-bottom:0;border-right:0;border-radius:0;background:transparent;color:inherit;text-align:initial}button.group:last-child{border-right:1px solid #62708a66}.split-group:hover .cell,.split-group[aria-expanded=true] .cell{color:var(--accent)}#tempo-limit{display:block;font-size:11px;color:var(--muted);max-width:240px;margin-top:4px}

.mixer{display:flex;gap:24px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:14px 22px 18px;margin:0 0 24px}.mixer legend{font-size:14px;color:var(--muted);padding:0 6px}.mixer label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;flex:1;min-width:220px;font-size:14px}.mixer input{width:100%;accent-color:var(--accent)}.mixer output{color:var(--muted);min-width:36px}

body.plastic{--accent:#c4b5ec;--accent-rgb:196,181,236}.duration-medium{display:block;height:2px;background:currentColor;width:65%;margin:25px 0 15px}.medium-key{display:inline-block;width:12px;height:2px;background:var(--ink)}[hidden]{display:none!important}.rule button:first-of-type{border-radius:8px 0 0 8px}.rule button:nth-of-type(2){border-radius:0}.rule button:last-of-type{border-radius:0 8px 8px 0}@media(max-width:600px){.rule button{padding:10px 12px}.duration-medium{height:1.5px}}

.duration-sign{display:block;width:100%;max-width:130px;height:55px;overflow:visible}.split-sign{display:flex;align-items:center;gap:12px}.split-sign .duration-sign{width:54px;height:35px}.legend-medium{width:22px;height:12px}.long-key{width:28px}.short-key{width:14px}@media(max-width:600px){.duration-sign{height:44px}.split-sign .duration-sign{height:30px}}

.row-label .modus-label{min-width:0;margin:0 0 8px}.row-label .modus-label select{font-size:13px;padding:9px 22px 9px 8px;width:100%;min-width:0}@media(max-width:900px){.row-label .modus-label{flex:1;min-width:160px;margin:0}}

.mixer{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:14px 18px}.mixer .sound-control{display:block;min-width:0}.sound-control select{font-size:13px;padding:7px 24px 7px 10px}@media(min-width:1100px){.mixer{grid-template-columns:minmax(160px,1fr) auto minmax(160px,1fr) auto minmax(160px,1fr) auto;gap:12px}}@media(max-width:450px){.mixer{grid-template-columns:minmax(0,1fr) auto;padding:12px;gap:12px 8px}.mixer label{min-width:0;gap:8px}.sound-control select{max-width:115px}}

.level-controls{display:grid;gap:10px;margin-top:16px;min-width:0}.level-controls label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}.level-volume{display:flex;align-items:center;gap:8px}.level-volume input{width:100%;min-width:0;accent-color:var(--accent)}.level-volume output{min-width:33px}.level-controls select{width:100%;font-size:13px;padding:7px 24px 7px 8px}.row-label{min-width:0}@media(max-width:900px){.level-controls{flex-basis:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:0}.row-label .elements{font-size:11px}}
@media(max-width:600px){.score-row:first-child .row-label .modus-label{order:2;flex-basis:100%}.score-row:first-child .row-label .elements{margin-left:auto}.score-row:first-child .level-controls{order:3}}

.bar-track{flex-basis:100%;border-top:1px solid var(--line);padding-top:14px}.bar-track>span{font-size:14px;color:var(--accent)}.bar-track .level-controls{grid-template-columns:minmax(0,180px) minmax(0,180px);gap:20px;margin-top:8px}.bar-track label{font-size:12px}.bar-track .level-controls select{padding:7px 24px 7px 8px}@media(max-width:600px){.bar-track .level-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}}

.app-logo{width:56px;height:56px;object-fit:contain;border-radius:10px;display:block;flex-shrink:0}