@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap";:root{--color-app-bg:#f2f2f2;--color-app-text:#333;--color-body-text:#202225;--color-pane-left-bg:#efefef;--color-header-muted:#767a82;--color-title:#2b3138;--color-byline:#9aa0aa;--color-signal-text:#474e59;--color-status-online:#6fd783;--color-signal-arrow:#b9bec7;--color-zone-label:#454c58;--color-key-outline:#738096;--color-key-white-bg:#f8f9fb;--color-key-white-text:#2b313d;--color-key-black-bg:#2d3138;--color-key-black-border:#6a778d;--color-key-black-text:#f7f9ff;--color-key-white-active-bg:#6679a1;--color-key-white-active-border:#7383a7;--color-key-black-active-bg:#4f6187;--color-key-black-active-border:#6f82a4;--color-key-white-hover-bg:#edf1f7;--color-key-black-hover-bg:#383d45;--color-keyboard-hint:#767d88;--color-manual-banner-border:#cfcebf;--color-manual-banner-bg:#ece9dc;--color-manual-text:#4a4a3f;--color-manual-active-border:#b88d56;--color-manual-active-bg:#f3e1c7;--color-manual-switch-border:#5f769e;--color-manual-switch-bg:#748ab1;--color-manual-switch-text:#f6f8ff;--color-manual-switch-hover-bg:#657b9f;--color-footer-border:#dedfe2;--color-footer-meta:#505866;--color-selector-border:#d0d3d8;--color-selector-bg:#ffffff59;--color-selector-text:#4e5564;--color-reset-text:#68707d;--color-reset-hover:#3f4653;--color-footer-tool:#59616f;--color-footer-tool-muted:#b2b7c0;--color-footer-heading:#7c8593;--color-result-note:#7a818e;--color-result-empty:#8b3f3f;--color-result-link:#4c5870;--color-result-link-hover:#343c4c;--color-result-link-active:#2e384a;--color-hero-grad-start:#e87e53;--color-hero-grad-mid:#f4b48c;--color-hero-grad-end:#e8d5c4;--color-white:#fff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,Avenir Next,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.35}*{box-sizing:border-box}body{background:var(--color-app-bg);min-height:100dvh;color:var(--color-body-text);margin:0}button,select{font:inherit}#root{min-height:100dvh}.app-shell{background:var(--color-app-bg);min-height:100dvh;color:var(--color-app-text)}.variant-layout{min-height:100dvh;display:flex;overflow:hidden}.left-pane{background:var(--color-pane-left-bg);grid-template-rows:auto 1fr auto;width:60%;min-height:100dvh;padding:3rem;display:grid}.left-header{margin-bottom:0}.header-top{color:var(--color-header-muted);justify-content:space-between;align-items:center;margin-bottom:1rem;font-size:1.15rem;line-height:1;display:flex}.header-dots{letter-spacing:.16em}.designer-title{letter-spacing:-.03em;color:var(--color-title);margin:0;font-size:1.875rem;font-weight:500;line-height:1}.designer-byline{color:var(--color-byline);letter-spacing:.01em;margin:.5rem 0 0;font-size:.68rem}.signal-row{color:var(--color-signal-text);align-items:center;gap:1.25rem;margin-top:2rem;font-size:.82rem;display:flex}.signal-item{align-items:center;gap:.48rem;display:inline-flex}.status-dot{background:var(--color-status-online);border-radius:999px;width:.34rem;height:.34rem}.signal-arrow{color:var(--color-signal-arrow)}.piano-zone{place-items:center;margin-top:0;display:grid}.center-stage{align-content:center;align-self:stretch;place-items:center;gap:.7rem;min-height:0;display:grid}.zone-label{letter-spacing:.01em;color:var(--color-zone-label);text-align:center;margin:0 0 1.4rem;font-size:.84rem;font-weight:500}.keyboard{-webkit-user-select:none;user-select:none;width:46rem;margin:0 auto}.keyboard--horizontal{position:relative}.white-keybed{grid-template-columns:repeat(7,minmax(0,1fr));gap:.18rem;display:grid}.black-keybed{height:0;position:absolute;top:0;left:0;right:0}.piano-key{border:1px solid var(--color-key-outline);border-radius:.2rem;font-weight:600;transition:background-color .12s,color .12s,border-color .12s}.piano-key.white{background:var(--color-key-white-bg);min-height:13.3rem;color:var(--color-key-white-text);justify-content:center;align-items:flex-end;padding:0 0 .8rem;font-size:.92rem;display:flex}.piano-key.black{background:var(--color-key-black-bg);border-color:var(--color-key-black-border);width:3.3rem;min-height:8.3rem;color:var(--color-key-black-text);z-index:2;justify-content:center;align-items:flex-start;padding-top:.7rem;font-size:.74rem;display:flex;position:absolute;top:0;transform:translate(-50%)}.piano-key.white.active{background:var(--color-key-white-active-bg);border-color:var(--color-key-white-active-border);color:var(--color-white)}.piano-key.black.active{background:var(--color-key-black-active-bg);border-color:var(--color-key-black-active-border)}.piano-key.white:hover{background:var(--color-key-white-hover-bg)}.piano-key.black:hover{background:var(--color-key-black-hover-bg)}.keyboard-hint{text-align:center;color:var(--color-keyboard-hint);margin:.75rem 0 0;font-size:.72rem}.manual-banner{border:1px solid var(--color-manual-banner-border);background:var(--color-manual-banner-bg);border-radius:.24rem;gap:.42rem;width:46rem;margin:.8rem auto 0;padding:.5rem;display:grid}.manual-banner p{color:var(--color-manual-text);margin:0;font-size:.76rem}.manual-banner--active{border-color:var(--color-manual-active-border);background:var(--color-manual-active-bg)}.manual-switch{border:1px solid var(--color-manual-switch-border);background:var(--color-manual-switch-bg);color:var(--color-manual-switch-text);border-radius:.22rem;justify-self:start;padding:.2rem .48rem;font-size:.72rem;font-weight:600}.manual-switch:hover{background:var(--color-manual-switch-hover-bg)}.left-footer{border-top:1px solid var(--color-footer-border);justify-content:space-between;align-items:flex-start;gap:1.2rem;margin-top:0;padding-top:1.05rem;display:flex}.footer-meta{color:var(--color-footer-meta);white-space:nowrap;text-transform:lowercase;align-items:center;gap:.4rem;font-size:.78rem;display:inline-flex}.footer-right{flex-direction:column;align-items:flex-end;gap:.45rem;min-width:20rem;display:flex}.footer-tools{align-items:center;gap:.7rem;display:flex}.scale-selector{border:1px solid var(--color-selector-border);background:var(--color-selector-bg);color:var(--color-selector-text);border-radius:.2rem;width:9.2rem;padding:.3rem .36rem;font-size:.72rem;line-height:1}.card-reset{color:var(--color-reset-text);background:0 0;border:0;padding:0;font-size:.73rem;font-weight:500;line-height:1}.card-reset:hover{color:var(--color-reset-hover)}.footer-tool-label{color:var(--color-footer-tool);font-size:.72rem;line-height:1}.footer-tool-label--muted{color:var(--color-footer-tool-muted)}.footer-results{text-align:right;width:100%}.footer-results h2{color:var(--color-footer-heading);letter-spacing:.01em;margin:0;font-size:.66rem;font-weight:500}.result-note,.result-empty{margin:.14rem 0 0;font-size:.72rem;line-height:1.32}.result-note{color:var(--color-result-note)}.result-empty{color:var(--color-result-empty);font-weight:600}.result-list{flex-wrap:wrap;justify-content:flex-end;gap:.2rem .58rem;margin:.14rem 0 0;padding:0;list-style:none;display:flex}.result-link{color:var(--color-result-link);text-align:left;background:0 0;border:0;padding:0;font-size:.72rem;font-weight:500}.result-link:hover{color:var(--color-result-link-hover);text-decoration:underline}.result-link--active{color:var(--color-result-link-active)}.right-pane{background:linear-gradient(135deg, var(--color-hero-grad-start) 0%, var(--color-hero-grad-mid) 40%, var(--color-hero-grad-end) 100%);width:40%;min-height:100dvh;position:relative;overflow:hidden}.grain-overlay{pointer-events:none;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");position:absolute;inset:0}.hero-panel{z-index:2;color:#ffffffe6;align-items:center;padding:0 4rem;display:flex;position:absolute;inset:0}.hero-panel h2{letter-spacing:-.04em;opacity:.8;margin:0;font-size:3rem;font-weight:300;line-height:1}.hero-rule{background:#ffffff4d;width:8rem;height:1px;margin:2rem 0}.hero-panel p{color:#ffffffa1;max-width:14.5rem;margin:0;font-size:.86rem;line-height:1.6}.orb-stack{z-index:1;position:absolute;bottom:3rem;right:3rem}.orb{border:1px solid #ffffff59;border-radius:999px;justify-content:center;align-items:center;display:flex}.orb--outer{border-color:#ffffff1f;width:16rem;height:16rem}.orb--middle{border-color:#ffffff38;width:12rem;height:12rem}.orb--inner{border-color:#ffffff5c;width:8rem;height:8rem}.sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=1200px){.left-pane{padding:2.1rem}.keyboard,.manual-banner{width:38rem}.hero-panel{padding:0 2.3rem}}@media (width<=860px){.variant-layout{flex-direction:column;overflow:visible}.left-pane,.right-pane{width:100%}.left-pane{flex-direction:column;min-height:auto;padding:1rem .85rem 1.1rem;display:flex}.left-header{margin-bottom:1.8rem}.center-stage{padding-bottom:1.25rem;display:block}.keyboard,.manual-banner{width:min(100%,22.5rem)}.white-keybed{gap:.14rem}.piano-key.white{min-height:11.2rem;padding:0 0 .62rem;font-size:.84rem}.piano-key.black{width:2.6rem;min-height:6.95rem;padding-top:.56rem;font-size:.64rem}.left-footer{flex-direction:column;align-items:flex-start;gap:.5rem;margin-top:1.8rem}.footer-right{align-items:flex-start;width:100%;min-width:0}.footer-tools{flex-wrap:wrap;gap:.55rem}.result-list{justify-content:flex-start}.footer-results{text-align:left}.right-pane{min-height:100svh}.hero-panel{padding:0 1rem}.hero-panel h2{font-size:2.35rem}.orb-stack{transform-origin:100% 100%;bottom:.7rem;right:.7rem;transform:scale(.82)}}