:root{font-family:Inter,system-ui,sans-serif;color:#17313d;background:#eef3f6;font-size:16px}*{box-sizing:border-box}body{margin:0}header,footer{display:flex;justify-content:space-between;align-items:center;padding:24px 4%;border-bottom:1px solid #cbd7df;background:white}.brand{font-weight:800;letter-spacing:.15em}.brand span{font-weight:400;font-size:14px}.badge{font-size:12px;letter-spacing:.12em;color:#4e6675}main{max-width:1500px;margin:auto;padding:32px 4%}.heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}h1{font-size:32px;letter-spacing:-.04em;margin:0 0 8px}p{margin:8px 0;color:#4e6675}h2{font-size:16px;margin:0 0 20px}.layout{display:grid;grid-template-columns:265px minmax(0,1fr);gap:24px}aside{background:white;border:1px solid #ccd9e2;border-radius:12px;padding:24px;align-self:start}label{display:block;font-size:14px;font-weight:600;margin:20px 0 8px}input,select,button{font:inherit}input[type=number],select{width:100%;padding:11px;border:1px solid #a8bbc8;border-radius:6px;color:#17313d;background:white}button{cursor:pointer;border:1px solid #a8bbc8;background:white;border-radius:6px;padding:10px 16px;font-size:14px;font-weight:600;color:#17313d}button:hover{background:#e4edf2}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #2286ba;outline-offset:3px}.apply{width:100%;margin-top:16px;background:#123f55;color:white}.apply:hover{background:#1d5872}.hint{font-size:13px;line-height:1.6}.check{display:flex;align-items:center;gap:8px;font-weight:400}.check input{width:18px;height:18px}.rule{border-top:1px solid #dce5eb;margin:24px 0}.exports{display:flex;gap:8px;margin-top:12px}.exports button{flex:1}.modes{display:flex;gap:4px;border:1px solid #ccd9e2;background:#e2eaf0;border-radius:8px;padding:4px}.modes button{border:0;background:transparent}.modes button[aria-pressed=true]{background:white;box-shadow:0 1px 4px #abc0ce}.transport{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.transport>div{display:flex;gap:12px;align-items:center}#state{font-size:14px;font-weight:600}#elapsed{font:14px ui-monospace,monospace;color:#527081}.monitor{background:#061312;border-radius:12px;overflow:hidden;color:#5aff9c;padding:22px 24px}.monitor-top{display:flex;justify-content:space-between;align-items:start;min-height:64px}.lead{font:24px ui-monospace,monospace;margin-right:20px}.rhythmLabel{font-size:14px}.bpm{display:flex;align-items:baseline;gap:8px}.bpm strong{font:48px ui-monospace,monospace}.bpm span{font-size:12px}canvas{display:block;width:100%;height:210px}.monitor-bottom{display:flex;justify-content:space-between;color:#9dbaa9;font:12px ui-monospace,monospace;padding-top:10px}.paper-panel{margin-top:20px;background:white;border:1px solid #cbd9e2;border-radius:12px;overflow:hidden}.paper-title{padding:20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.paper-title h2{margin:0}.paper-title .rhythmLabel{display:block;margin-top:6px;color:#526c7c;font-weight:400}.paper-title>span,.paper-footer{font-size:12px;color:#526c7c}#paper svg{display:block;width:100%;height:auto}.paper-footer{display:flex;justify-content:space-between;padding:14px 20px;gap:14px}.notice{font-size:14px;line-height:1.6;margin-top:22px}.notice strong{color:#17313d}#error{font-size:14px;color:#ae2828;line-height:1.5}footer{background:transparent;border:0;font-size:12px;color:#58717e}.hidden{display:none!important}@media(max-width:850px){.layout{grid-template-columns:1fr}header .badge{display:none}.heading{align-items:start;gap:16px;flex-direction:column}canvas{height:180px}.monitor-bottom{gap:10px;flex-wrap:wrap}.paper-title,.paper-footer{flex-wrap:wrap}.monitor{padding:16px}main{padding:24px 4%}} 
@media(max-width:850px){.workspace{grid-row:1}.monitor-top{gap:12px}.bpm strong{font-size:38px}.paper-title{padding:16px}.paper-footer{padding:12px 16px}footer{flex-wrap:wrap}}

.scenario{font-size:14px;font-weight:600;color:#813916;background:#fff2d7;padding:6px 10px;border-radius:5px}.transport>div{flex-wrap:wrap}input:disabled{background:#edf1f4;color:#596b76}

.transition-controls button{width:100%;margin-top:10px}.transition-controls button:disabled{opacity:.5;cursor:default}.strip-tools{display:flex;align-items:center;gap:12px;padding:0 20px 16px;flex-wrap:wrap}.measurements{padding:0 20px 20px;border-top:1px solid #e2e8ec}.measurements>label{margin-top:16px}.measurements>select{max-width:260px}.marker-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px}.marker-inputs label{font-weight:400}#measurement{display:block;padding:16px 0;font-weight:600}.caliper{cursor:ew-resize;stroke:#09699f;stroke-width:2;pointer-events:stroke}.caliper:focus{outline:none;stroke:#b14f00;stroke-width:3}#paper.measuring{touch-action:none;cursor:crosshair}@media(max-width:600px){.marker-inputs{grid-template-columns:1fr}.transport{flex-wrap:wrap;gap:12px}}

.recording-controls button{width:100%;margin-bottom:10px}.recording-controls button:disabled{opacity:.5;cursor:default}#recordingStatus{font-weight:600;color:#17313d}

.recording-controls select{margin-bottom:14px}

.recording-toolbar{margin-top:16px;padding:16px 20px;background:white;border:1px solid #ccd9e2;border-radius:10px}.recording-toolbar h2{margin-bottom:12px}.record-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.recording-toolbar .record-row label{margin:0}.recording-toolbar .record-row select{width:150px;margin:0}.recording-toolbar .record-row button{width:auto;margin:0}

.learning-link{color:#09699f;font-weight:600;margin:12px} .heading{flex-wrap:wrap;gap:12px}