:root{font-family:system-ui,-apple-system,sans-serif;color:#dbd8c9;background:#171e1c;--gold:#cfb47c;--line:#3a443e;--muted:#9ca89d}*{box-sizing:border-box}body{margin:0}header{max-width:1500px;margin:auto;padding:28px 36px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:15px}a{color:var(--gold)}header a{text-decoration:none;font-size:12px}.brand{font-size:23px;display:flex;gap:12px;align-items:center}.brand span{font-size:11px;letter-spacing:2px}main{max-width:1500px;padding:0 36px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:flex-end;padding:38px 0}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--gold);font-weight:600}h1{font:56px/1.04 Georgia,serif;margin:15px 0 0;letter-spacing:-1px}.intro>p{color:var(--muted);font-size:14px;line-height:1.9}.workbench{display:grid;grid-template-columns:minmax(260px, .9fr) minmax(380px,1.35fr) 260px;gap:16px;align-items:start}.panel{background:#202a25;border:1px solid var(--line);border-radius:10px;padding:20px;min-width:0}.panel-title{display:flex;justify-content:space-between;gap:10px;font-size:8px;letter-spacing:1.2px;color:#abb2a1;align-items:center}.panel-title label{letter-spacing:0;font-size:10px}.live{color:var(--gold)}canvas{display:block;width:100%}#clock{height:520px}#escape{height:270px}#beats{height:78px}.clock-readout{text-align:center;margin:6px 0 16px}.clock-readout strong{display:block;font:26px Georgia;color:#e3d4b1}.clock-readout span{font-size:7px;letter-spacing:1px;color:var(--muted)}button,select{font:inherit;color:inherit;background:#2c3930;border:1px solid #52614e;border-radius:5px;padding:8px 10px;cursor:pointer}button:hover{background:#3c4c3d}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.playback{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px;font-size:10px}.playback label{display:flex;gap:5px;align-items:center}.playback select{padding:6px}.fine{font-size:10px;color:var(--muted);line-height:1.7}.chain{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:18px}.chain button{font-size:9px;padding:8px 5px}.chain span{font-size:11px;color:var(--gold)}.chain button.active{background:var(--gold);color:#252e27;border-color:var(--gold)}.explanation{background:#19221d;padding:16px;margin:16px 0;border-left:2px solid var(--gold);min-height:125px}.explanation h2{font:21px Georgia;margin:0 0 10px}.explanation p{font-size:12px;line-height:1.7;color:#b1bbac;margin:0}.meters{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:10px 0 20px;border-bottom:1px solid var(--line)}.meters span{display:block;color:var(--muted);font-size:8px;letter-spacing:.5px}.meters strong{display:block;font:23px Georgia;margin-top:7px}.beat-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px}.beat-heading h2{font:17px Georgia;margin:0}.beat-heading span{font-size:10px;color:var(--gold)}.control{display:block;font-size:12px;line-height:1.6;margin:24px 0 10px}.control output{display:block;color:var(--gold);font-size:19px;font-family:Georgia,serif;margin:6px 0}.control input{width:100%;accent-color:var(--gold);height:22px;cursor:ew-resize}.try{font:20px Georgia;border-top:1px solid var(--line);padding-top:20px;margin-top:24px}.presets{display:grid;gap:7px}.presets button{font-size:11px;text-align:left}.learning{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin:65px 0;border-top:1px solid var(--line);padding-top:40px}.learning h2,.repair>h2{font:34px/1.15 Georgia;margin:14px 0 23px}.learning p,.repair>p,.repair details p{font-size:13px;color:#aeb7a9;line-height:1.85}.learning ul{padding-left:18px;font-size:12px;color:#aeb7a9;line-height:1.9}.learning li{margin-bottom:12px}.formula{background:#242e26;border:1px solid var(--line);padding:20px;line-height:2;font-family:Georgia;color:#dac294}.formula small{font-size:13px}.learning .fine{font-size:11px}.repair{border-top:1px solid var(--line);padding:35px 0}.repair-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;align-items:start}.repair details{background:#202a25;border:1px solid var(--line);padding:20px;border-radius:6px}.repair summary{cursor:pointer;font-size:14px;color:#dfcfad}.caution{background:#322e24;border-left:3px solid var(--gold);font-size:12px;line-height:1.8;padding:20px;margin-top:25px;color:#c9bea8}.sources{border-top:1px solid var(--line);padding:30px 0}.sources h2{font:24px Georgia}.sources a{display:block;font-size:12px;margin:12px 0}footer{padding:20px 0 35px;color:#7f8e7e;font-size:8px;letter-spacing:1px}@media(max-width:1150px){.workbench{grid-template-columns:1fr 1.3fr}.controls{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}.controls .panel-title{grid-column:1/-1}.controls .control{margin-top:16px}.controls .try,.controls .presets{grid-column:1/-1}.presets{grid-template-columns:repeat(5,1fr)}.learning{gap:30px}}@media(max-width:700px){header{padding:20px}.brand span{font-size:8px;letter-spacing:1px}main{padding:0 16px}.intro{display:block;padding:28px 0}h1{font-size:45px}.intro>p{font-size:12px}.workbench{display:flex;flex-direction:column}.panel{width:100%}.controls{display:block}.presets{grid-template-columns:1fr 1fr}#clock{height:440px}.learning{grid-template-columns:1fr;gap:25px;margin:35px 0}.repair-grid{grid-template-columns:1fr}.chain button{font-size:9px}.learning h2,.repair>h2{font-size:29px}}