:root{--ink: #101c2c;--panel: #192a3e;--paper: #f7ebcb;--muted: #c6cfcc;--gold: #f2c14e;--coral: #e96b56;--teal: #48b8a6;--danger: #ff9a89;--rule: #62758a;--display: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;--body: "Avenir Next", "Segoe UI", Arial, sans-serif;color-scheme:dark;font-family:var(--body);color:var(--paper);background:var(--ink);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--ink);background-image:linear-gradient(rgba(247,235,203,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(247,235,203,.018) 1px,transparent 1px);background-size:8px 8px;font-size:16px;line-height:1.55}body:after{content:"Offline — saved notes still work";position:fixed;z-index:50;right:16px;bottom:16px;padding:8px 14px;border:1px solid var(--gold);background:var(--ink);color:var(--paper);font-weight:700;transform:translateY(100px);transition:transform .18s ease}body.offline:after{transform:translateY(0)}a{color:var(--paper);text-decoration-color:var(--gold);text-underline-offset:4px}a:hover{color:var(--gold)}button,select,input{font:inherit}button,select{min-height:44px}button,a{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid var(--gold);outline-offset:4px}img{max-width:100%;height:auto;display:block}p{margin:0 0 16px}h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:.98;letter-spacing:.035em;margin:0;text-wrap:balance}h1{font-size:clamp(2.7rem,7vw,5.5rem);max-width:10ch}h2{font-size:clamp(2rem,5vw,3.8rem);max-width:15ch}h3{font-size:1.6rem}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:16px;top:8px;z-index:100;padding:12px 18px;color:var(--ink);background:var(--gold);transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.site-header{min-height:80px;max-width:1440px;margin:auto;padding:16px clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--rule)}.wordmark{min-height:44px;display:flex;gap:12px;align-items:center;font-family:var(--display);font-size:.9rem;letter-spacing:.12em;text-decoration:none;text-transform:uppercase}.wordmark b{color:var(--gold)}.wordmark-mark{display:flex;align-items:end;width:31px;height:30px;border:2px solid var(--gold);border-radius:50% 50% 4px 4px;overflow:hidden;padding:5px}.wordmark-mark i{width:6px;height:20px;border:1px solid var(--ink);background:var(--paper)}.wordmark-mark i:nth-child(2){height:14px;background:var(--gold)}.site-header nav,.site-footer nav{display:flex;align-items:center;gap:clamp(16px,3vw,36px)}.site-header nav a,.site-footer a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.demo-banner{padding:8px clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:center;gap:40px;min-height:48px;color:var(--ink);background:var(--gold)}.demo-banner a{min-height:44px;display:inline-flex;align-items:center;color:var(--ink);text-decoration-color:var(--ink);font-weight:800}.demo-actions{display:flex;align-items:center;gap:18px}.demo-banner .text-button{color:var(--ink);border-color:var(--ink)}.hero{max-width:1440px;margin:auto;min-height:calc(100vh - 80px);padding:clamp(40px,5vw,72px) clamp(20px,4vw,64px) 40px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(400px,1.1fr);align-items:center;gap:clamp(40px,6vw,96px);position:relative}.hero:before,.hero:after{content:"";position:absolute;left:clamp(20px,4vw,64px);width:26%;height:3px;background:var(--gold)}.hero:before{top:24px}.hero:after{top:34px;width:14%;background:var(--coral)}.eyebrow,.section-number{margin:0 0 16px;color:var(--gold);font-size:.8rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.lede{max-width:51ch;margin:28px 0;color:var(--muted);font-size:clamp(1.1rem,2vw,1.35rem)}.hero-actions{display:flex;gap:18px;align-items:center;margin:0 0 16px}.hero-actions span{max-width:21ch;color:var(--muted);font-size:.9rem}.button{min-height:48px;padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--gold);border-radius:0;font-weight:800;letter-spacing:.025em;text-decoration:none;cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.button.primary{color:var(--ink);background:var(--gold)}.button:hover:not(:disabled){color:var(--ink);background:var(--paper);border-color:var(--paper)}.button:active:not(:disabled){transform:translateY(2px)}.button:disabled{opacity:.65;cursor:not-allowed}.secondary-link{min-height:44px;display:inline-flex;align-items:center;margin:12px 0}.fact-strip{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;padding:18px 0 0;border-top:1px solid var(--rule);list-style:none;color:var(--muted);font-size:.86rem}.fact-strip li:before{content:"◆";margin-right:8px;color:var(--teal);font-size:.65rem}.hero-art{margin:0;position:relative;border:3px solid var(--paper);box-shadow:16px 16px #f2c14e29;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}.hero-art:after{content:"";position:absolute;inset:10px;border:1px solid rgba(247,235,203,.6);pointer-events:none}.hero-art img{width:100%;aspect-ratio:3 / 2;object-fit:cover}.hero-art figcaption{position:absolute;left:0;bottom:0;z-index:2;margin:0;padding:10px 16px;color:var(--ink);background:var(--paper);font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.lens{padding:clamp(64px,9vw,120px) max(20px,calc((100vw - 1312px)/2));border-top:1px solid var(--rule);background:#142338}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px}.connection{min-height:44px;padding:10px 14px;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--rule);color:var(--muted)}.status-dot{width:10px;height:10px;border:2px solid var(--teal);border-radius:50%}.control-board{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr)) auto;gap:12px;align-items:end;padding:20px;border:3px solid var(--paper);background:var(--ink);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}.control-board label{display:grid;gap:5px;color:var(--muted);font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}select{width:100%;padding:9px 38px 9px 12px;border:1px solid var(--rule);border-radius:0;color:var(--paper);background:var(--panel)}.connect{color:var(--ink);background:var(--gold)}.utility-note{margin:10px 0 24px;color:var(--muted);font-size:.88rem}.suggestion-board{display:grid;grid-template-columns:auto minmax(170px,1fr) auto;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--gold);background:#f2c14e0f}.suggestion-board>span{color:var(--gold);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.suggestion-board strong{font-family:var(--display);font-size:clamp(1.25rem,3vw,2rem);text-transform:uppercase}.suggestion-board small{color:var(--muted)}.legend{display:flex;flex-wrap:wrap;gap:20px;margin:24px 0 12px;color:var(--muted);font-size:.82rem}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:12px;height:12px;display:inline-block;border-radius:50%}.legend-tonic{background:var(--gold)}.legend-scale{background:var(--teal)}.legend-live{background:var(--coral)}.piano-scroll{overflow-x:auto;padding:4px 4px 14px;scrollbar-color:var(--gold) var(--ink)}.piano{min-width:max-content;height:216px;display:flex;align-items:flex-start;padding:0 10px 10px;background:#0a111c;border-bottom:8px solid var(--gold);user-select:none}.piano-key{position:relative;flex:0 0 auto;padding:0 4px 10px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border-radius:0 0 5px 5px;cursor:pointer;transition:transform .14s ease,background .14s ease}.piano-key.white{z-index:1;width:60px;height:196px;border:1px solid #9d957f;color:var(--ink);background:var(--paper)}.piano-key.black{z-index:2;width:44px;height:126px;margin-left:-22px;margin-right:-22px;border:1px solid #04070b;color:var(--paper);background:#172234;box-shadow:0 6px #05090f}.piano-key.in-scale:before{content:"";position:absolute;top:10px;left:50%;width:9px;height:9px;border:2px solid currentColor;border-radius:50%;background:var(--teal);transform:translate(-50%)}.piano-key.tonic:before{width:14px;height:14px;background:var(--gold)}.piano-key.active{color:var(--paper);background:var(--coral);transform:translateY(3px)}.key-note{margin-bottom:5px;font-family:var(--display);font-weight:900}.key-label{max-width:53px;font-size:.62rem;line-height:1.15;text-align:center}.black .key-label{max-width:34px;font-size:.55rem}.computer-hint{margin:0;color:var(--muted);font-size:.8rem;text-align:center;letter-spacing:.08em}.trail-heading{margin:56px 0 16px;display:flex;justify-content:space-between;align-items:end;gap:24px}.trail-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.text-button{min-height:44px;padding:8px 12px;border:1px solid var(--rule);border-radius:0;color:var(--paper);background:transparent;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.text-button:hover:not(:disabled){color:var(--gold);border-color:var(--gold)}.text-button:disabled{opacity:.45;cursor:not-allowed}.text-button.danger{color:var(--danger)}.trail{min-height:126px;display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:12px 0;border-block:1px solid var(--rule)}.trail-stop{position:relative;flex:0 0 96px;min-height:96px;padding:18px 8px 8px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:0;border-top:3px solid var(--teal);color:var(--paper);background:transparent;cursor:pointer}.trail-stop:after{content:"";position:absolute;right:-6px;top:-7px;width:11px;height:11px;border:2px solid var(--ink);border-radius:50%;background:var(--teal)}.trail-stop:first-child:before{content:"";position:absolute;left:0;top:-7px;width:11px;height:11px;border:2px solid var(--ink);border-radius:50%;background:var(--teal)}.trail-stop.newest{border-top-color:var(--coral);background:#e96b5614}.trail-stop.newest:after{background:var(--coral)}.trail-stop strong{font-family:var(--display);font-size:1.3rem}.trail-stop span{color:var(--muted);font-size:.66rem;line-height:1.2;text-align:center}.empty-trail{width:100%;display:grid;place-items:center;align-content:center;color:var(--muted);text-align:center}.empty-trail span{color:var(--muted);letter-spacing:.6em}.empty-trail p{margin:8px 0 0}.storage-message{min-height:24px;margin:8px 0 0;color:var(--teal)}.storage-message.error{color:var(--danger)}.inline-undo{min-height:44px;margin-left:8px;padding:6px 10px;border:1px solid var(--teal);color:var(--paper);background:transparent;text-decoration:underline;cursor:pointer}.how,.limits{max-width:1312px;margin:auto;padding:clamp(64px,9vw,120px) 20px}.route-steps{margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);list-style:none;border-block:1px solid var(--rule)}.route-steps li{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;padding:28px 20px}.route-steps li:not(:last-child){border-right:1px solid var(--rule)}.route-steps li>span{width:46px;height:46px;display:grid;place-items:center;border:2px solid var(--gold);border-radius:50%;color:var(--gold);font-family:var(--display);font-size:1.25rem}.route-steps strong{font-family:var(--display);font-size:1.1rem;text-transform:uppercase}.route-steps p{margin:4px 0 0;color:var(--muted)}.limits{display:grid;grid-template-columns:.5fr 1fr;gap:24px 64px;border-top:1px solid var(--rule)}.limits .section-number{grid-column:1 / -1}.limits p:last-child{max-width:58ch;color:var(--muted);font-size:1.15rem}.demo-main{min-height:80vh}.demo-intro{max-width:1312px;margin:auto;padding:64px 20px 48px}.demo-intro h1{max-width:15ch;font-size:clamp(2.5rem,6vw,5rem)}.demo-intro>p:last-child{max-width:62ch;margin-top:24px;color:var(--muted);font-size:1.1rem}.demo-main .lens{padding-top:64px}.policy,.not-found{max-width:860px;min-height:72vh;margin:auto;padding:clamp(64px,10vw,120px) 24px}.policy h1{max-width:14ch;margin-bottom:32px}.policy h2{margin:48px 0 12px;font-size:1.6rem}.policy p{max-width:64ch;color:var(--muted);font-size:1.05rem}.not-found{position:relative}.not-found h1{max-width:13ch;margin-bottom:24px}.not-found p:not(.eyebrow){color:var(--muted)}.not-found .button{margin-top:12px}.lost-line{margin-bottom:48px;display:flex;align-items:center;width:min(100%,520px);height:3px;background:var(--coral)}.lost-line span{width:20px;height:20px;margin-right:calc(50% - 20px);border:3px solid var(--coral);border-radius:50%;background:var(--ink)}.site-footer{max-width:1440px;margin:auto;padding:36px clamp(20px,4vw,64px) max(36px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;border-top:1px solid var(--rule);color:var(--muted);font-size:.78rem}.site-footer p{margin:0}.site-footer p:last-child{text-align:right}.update-toast{position:fixed;z-index:40;left:50%;bottom:20px;padding:12px 18px;color:var(--ink);background:var(--gold);transform:translate(-50%);box-shadow:0 8px 24px #00000059}.update-toast button{margin-left:8px;border:1px solid var(--ink);color:var(--ink);background:transparent;font-weight:800}@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{order:1}.hero-art{order:2;max-width:720px}.control-board{grid-template-columns:repeat(2,1fr)}.suggestion-board{grid-template-columns:1fr;gap:4px}.route-steps{grid-template-columns:1fr}.route-steps li:not(:last-child){border-right:0;border-bottom:1px solid var(--rule)}.limits,.site-footer{grid-template-columns:1fr}.site-footer p:last-child{text-align:left}}@media(max-width:600px){body{font-size:16px}.site-header{min-height:72px}.wordmark>span:last-child{max-width:90px;line-height:1.15}.site-header nav{gap:14px}.site-header nav a{font-size:.76rem}.demo-banner{align-items:flex-start;justify-content:space-between;gap:12px;font-size:.82rem}.demo-actions{align-items:flex-start;flex-direction:column;gap:2px}.demo-banner .text-button{padding:8px 0;border-inline:0}.hero{padding-top:64px}.hero-actions{align-items:stretch;flex-direction:column}.hero-actions span{max-width:none}.hero-art{box-shadow:8px 8px #f2c14e29}.hero-art figcaption{position:static}.section-heading,.trail-heading{align-items:flex-start;flex-direction:column}.control-board{grid-template-columns:1fr}.trail-actions{justify-content:flex-start}.trail-actions .text-button{flex:1 1 44%}.site-footer nav{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.piano-key.active{transform:none}}