@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101720;--panel:#192330;--border:#2d3a49;--muted:#9fadb9;--mint:#b6efd4;--text:#f0f5f4}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#203444 0,transparent 50%),var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif}header,main,footer{max-width:1120px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:30px 24px;border-bottom:1px solid var(--border)}a{color:var(--mint)}.brand{font:600 15px 'Space Grotesk',sans-serif;letter-spacing:2px;text-decoration:none;color:white}.logo{display:inline-grid;place-items:center;width:30px;height:30px;background:var(--mint);color:#17352c;border-radius:8px;margin-right:10px}.tag{font-size:10px;letter-spacing:2px;color:var(--muted)}main{padding:36px 24px;display:grid;grid-template-columns:1.35fr 1fr;gap:22px}.heading{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.eyebrow{color:var(--mint);font-size:10px;letter-spacing:2px}h1{font:600 clamp(25px,4vw,40px) 'Space Grotesk',sans-serif;margin:8px 0}#subtitle{color:var(--muted);margin:10px 0}.status{border:1px solid var(--border);padding:8px 14px;border-radius:30px;font-size:12px;color:var(--mint)}section{border:1px solid var(--border);border-radius:22px;background:var(--panel);padding:28px}.player{background:linear-gradient(135deg,#202e3d,#192330)}.position{display:flex;justify-content:space-between;align-items:center}.position small{display:block;letter-spacing:2px;color:var(--muted);font-size:10px}.position strong{font:600 32px 'Space Grotesk',sans-serif}.position #total{color:var(--muted);font-size:13px;margin-left:8px}.meter{text-align:right}.meter strong{font-size:25px}.meter span{display:block;font-size:11px;color:var(--muted);margin-top:4px}.tempo{text-align:center;margin-top:22px}.tempo label{letter-spacing:2px;font-size:10px;color:var(--muted)}.tempo input{font:600 76px 'Space Grotesk',sans-serif;letter-spacing:-4px;width:185px;border:0;background:transparent;text-align:center;color:white;padding:0;line-height:1.2}.tempo input::-webkit-inner-spin-button{display:none}.tempo #unit{display:block;font-size:11px;color:var(--muted);margin-top:-4px}.tempo p{font-size:13px;color:var(--muted);margin:12px}.tempo p strong{color:var(--mint)}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #425364;border-radius:10px;background:#263545;color:var(--text);padding:12px 16px;transition:background .15s,transform .15s;min-height:44px}button:hover{background:#35495b}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:not-allowed}.adjust{display:flex;gap:7px;justify-content:center;margin:20px 0 12px}.adjust button{padding:8px 13px;font-size:13px}.slider{width:100%;accent-color:var(--mint);margin:10px 0}.beats{height:46px;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px}.beat{width:22px;height:22px;border-radius:50%;background:#324454;transition:background .05s}.beat.down{border:2px solid var(--mint)}.beat.on{background:var(--mint);box-shadow:0 0 24px #b6efd455}.now{text-align:center;color:var(--muted);font-size:13px;min-height:20px}.transport{display:flex;justify-content:center;gap:10px;margin:22px 0 10px}.primary{background:var(--mint);color:#163b2d;border-color:var(--mint);font-weight:700;min-width:200px}.primary:hover{background:#d0f9e5}.hint{text-align:center;font-size:10px;color:var(--muted)}h2{font:500 18px 'Space Grotesk',sans-serif;margin:0 0 20px}.settings h2:not(:first-child){margin-top:30px}.fields{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:12px}.fields.two{grid-template-columns:1.4fr 1fr}.fields label{font-size:11px;color:var(--muted)}.fields input:not([type=range]),select{display:block;width:100%;padding:12px 10px;margin-top:8px;border-radius:8px;border:1px solid #3b4e60;background:#13202c;color:var(--text);min-height:44px}.fields input[type=range]{width:100%;margin-top:24px;accent-color:var(--mint)}.toggle{display:flex;align-items:center;gap:12px;margin:22px 0;font-size:13px;cursor:pointer}.toggle input{width:18px;height:18px;accent-color:var(--mint)}.toggle small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.help{font-size:11px;color:var(--muted);line-height:1.6}.secondary{font-size:12px;width:100%;margin-top:6px}.map{grid-column:1/-1}.maphead{display:flex;align-items:baseline;justify-content:space-between}.maphead span{color:var(--muted);font-size:11px}#measureGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(65px,1fr));gap:7px;max-height:300px;overflow:auto;padding:3px}.measurebtn{padding:8px 4px;font-size:14px}.measurebtn small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.measurebtn.selected{border-color:var(--mint);background:#294c43}.measurebtn.current{background:var(--mint);color:#132e24}.measurebtn.current small{color:#295240}.notes{grid-column:1/-1;color:var(--muted);font-size:12px;line-height:1.8;padding:4px 8px}.notes summary{cursor:pointer;color:var(--text);font-size:13px}#error{color:#ffc4b8;grid-column:1/-1;margin:0}footer{font-size:10px;color:var(--muted);text-align:center;padding:10px 20px 35px}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #f4cd89;outline-offset:3px}input:disabled,select:disabled{opacity:.5}@media(max-width:740px){main{grid-template-columns:1fr;padding:24px 16px;gap:16px}header{padding:20px 18px}.tag{display:none}.heading{align-items:flex-start}.status{margin-top:12px}section{padding:23px 20px}.tempo input{font-size:68px}.maphead{display:block}.maphead span{display:block;margin-top:-10px;margin-bottom:20px}.adjust button{padding:8px 10px}.fields{gap:8px}.transport .primary{min-width:180px}.heading #subtitle{font-size:12px}.hint{font-size:10px}}