:root{font-family:system-ui,-apple-system,sans-serif;color:#20382e;background:#f6f5ee;font-synthesis:none}*{box-sizing:border-box}main{max-width:1040px;margin:auto;padding:0 clamp(16px,5vw,58px) 20px}header,footer,.console,.panelhead,.range,.brand,.label,.legend{display:flex;align-items:center}header,footer,.console,.panelhead,.range{justify-content:space-between}header{height:70px;border-bottom:1px solid #cbd1c5}.brand{font:700 24px Georgia,serif;gap:10px}.brand i{font:22px Georgia;background:#284c3b;color:#fff;border-radius:9px;width:33px;height:33px;display:grid;place-items:center}small,.eyebrow,.label,.range,footer{font:600 10px/1.6 ui-monospace,monospace;letter-spacing:.12em}b,h1 span{color:#a35a35}.intro{padding:35px 0 21px}.eyebrow{color:#586d60}h1,h2{font-family:Georgia,serif;font-weight:400}h1{font-size:clamp(42px,7vw,72px);letter-spacing:-.055em;margin:5px 0}p{margin:6px 0;color:#526458}.console{background:#203b30;color:#f9f8ec;padding:16px 22px;border-radius:13px;gap:12px}.label,.legend{gap:7px}em{width:9px;height:9px;border-radius:50%;background:#9aa79f;display:inline-block}.lit,.meter i.on{background:#79bd93}.meter{display:flex;gap:3px;margin-top:8px}.meter i{display:block;width:4px;height:10px;background:#536a5d;border-radius:1px}button{border:0;border-radius:7px;background:#deedb7;color:#203b30;font:600 15px system-ui;padding:12px 17px;min-height:44px;cursor:pointer}button:focus-visible{outline:3px solid #eaa06b;outline-offset:3px}.status{font-size:13px;padding:3px 3px 9px}.panel{background:#fffef8;border:1px solid #d4d8cc;border-radius:14px;margin:10px 0;padding:18px clamp(12px,3vw,27px)}.panelhead{gap:10px}.panelhead small{color:#677768}h2{margin:3px 0;font-size:26px;letter-spacing:-.03em}.notes{text-align:right}.notes strong{display:block;color:#207763;font-size:17px}.legend{font-size:12px;color:#4c6253}.staff{display:block;width:100%;height:clamp(118px,18vw,166px)}.staff path{fill:none;stroke:#88988a;stroke-width:1}.clef{fill:#344b3c;font-family:Segoe UI Symbol,Apple Symbols,serif}.keybed{position:relative;height:clamp(95px,13vw,134px);margin-top:14px;border:1px solid #627064;border-top:5px solid #344638;border-radius:5px;overflow:hidden}.key{position:absolute;top:0}.white{height:100%;border-right:1px solid #a0a99c;background:linear-gradient(#f0efe6,#fffef8 35%);border-bottom:4px solid #d9dacd}.white span{position:absolute;bottom:5px;left:0;right:0;text-align:center;font:10px monospace;color:#536456}.black{height:62%;background:linear-gradient(#23372c,#354539);border-bottom:4px solid #1b2920;z-index:1;border-radius:0 0 2px 2px}.key[data-active=true]{background:#46dc86;border-bottom-color:#11934c}.black[data-active=true]{background:#0aa957;border-bottom-color:#006f39}.wave{display:block;width:100%;height:54px;background:#edf4ed;margin:10px 0}.diagnostics label{display:block;font-weight:600}.diagnostics input{display:block;width:min(100%,420px);min-height:36px;accent-color:#207763}.activity{max-height:10em;overflow:auto;list-style:none;padding:0;font:13px/1.6 monospace}.console{margin-top:8px}@media(orientation:landscape)and (min-width:740px)and (min-height:400px){main{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(250px,1fr);grid-template-rows:40px auto auto minmax(0,1fr) minmax(0,.9fr);grid-template-areas:"header header" "console console" "status status" "staff diagnostics" "keys diagnostics";height:100vh;height:100dvh;max-width:1500px;gap:6px 12px;padding:6px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}header{grid-area:header;height:auto}.console{grid-area:console;margin:0;padding:5px 12px}.status{grid-area:status;margin:0;padding:0 4px}.panel{display:flex;flex-direction:column;min-height:0;min-width:0;margin:0;padding:10px 14px}.notation{grid-area:staff}.instrument{grid-area:keys}.diagnostics{grid-area:diagnostics}.staff,.keybed{flex:1;height:0;min-height:0}.keybed{margin-top:6px}.panel h2{font-size:clamp(18px,2vw,26px)}.diagnostics p{font-size:13px;margin:3px 0}.diagnostics h3{margin:6px 0 0;font-size:16px}.wave{height:clamp(24px,6vh,60px);margin:5px 0}.activity{flex:1;min-height:0;max-height:none;margin:4px 0 0;overscroll-behavior:contain}}.range{font-size:9px;color:#677768;margin-top:5px}footer{font-size:9px;color:#677768;padding:10px 0}@media(max-width:460px){.console{padding:13px 12px}.meter{gap:2px}.meter i{width:3px}.intro{padding-top:24px}header{height:56px}.label{font-size:9px}button{font-size:14px}.staff{height:106px}.panelhead small{font-size:9px}}