:root{--cmr-ink: #0e0a18;--cmr-walnut: #4a2a1a;--cmr-flame: #f6c15e;--cmr-flame-deep: #d68f2c;--cmr-cream: #f4e7c8;--cmr-cream-dim: #c8b48a;--cmr-cream-dimmer: #8b7a5a;--cmr-mint: #9bd7b8;--cmr-rose: #e6788c;--cmr-mauve: #b39ddb}body:has(.cmr){background:radial-gradient(circle at 50% -10%,#1a1230 0%,var(--cmr-ink) 60%);color:var(--cmr-cream);font-family:Inter,-apple-system,system-ui,sans-serif;min-height:100vh}.cmr{max-width:1020px;margin:0 auto;padding:48px 24px 80px}.cmr__hero{text-align:center;margin-bottom:36px}.cmr__kicker{font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;letter-spacing:.18em;color:var(--cmr-flame-deep);text-transform:uppercase;margin:0 0 12px}.cmr__title{font-family:Inter Tight,Inter,sans-serif;font-weight:900;font-size:clamp(56px,12vw,130px);letter-spacing:-.04em;line-height:.9;margin:0 0 16px;color:var(--cmr-flame);text-shadow:0 6px 24px rgba(0,0,0,.4)}.cmr__sub{max-width:640px;margin:0 auto;font-size:17px;line-height:1.5;color:var(--cmr-cream-dim)}.cmr__gate{display:flex;justify-content:center;margin:36px 0}.cmr__enable{display:flex;align-items:center;gap:16px;padding:18px 26px;border-radius:16px;border:2px solid var(--cmr-flame);background:#f6c15e14;color:var(--cmr-cream);cursor:pointer;transition:background .1s ease,transform 60ms ease}.cmr__enable:hover{background:#f6c15e29;transform:translateY(-1px)}.cmr__enable:active{transform:translateY(0)}.cmr__enable-icon{width:14px;height:14px;border-radius:50%;background:var(--cmr-rose);box-shadow:0 0 14px #e6788c99}.cmr__enable-text{display:flex;flex-direction:column;gap:4px;text-align:left}.cmr__enable-main{font-family:Inter Tight,sans-serif;font-weight:700;font-size:17px;color:var(--cmr-flame)}.cmr__enable-sub{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--cmr-cream-dim)}.cmr__readout{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:14px;margin-bottom:22px}@media(max-width:700px){.cmr__readout{grid-template-columns:1fr}}.cmr__note-card,.cmr__hz-card{background:#00000052;border:1px solid rgba(246,193,94,.16);border-radius:18px;padding:18px 22px;display:flex;flex-direction:column;gap:8px}.cmr__note-label,.cmr__hz-label{font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.16em;color:var(--cmr-cream-dimmer)}.cmr__note-display{display:flex;align-items:baseline;gap:8px}.cmr__note-name{font-family:Inter Tight,sans-serif;font-weight:900;font-size:60px;color:var(--cmr-flame);line-height:1;letter-spacing:-.02em}.cmr__note-octave{font-family:JetBrains Mono,monospace;font-size:18px;color:var(--cmr-cream-dim)}.cmr__cents-bar{position:relative;height:10px;border-radius:5px;background:#f4e7c81a;margin-top:4px}.cmr__cents-zero{position:absolute;left:50%;top:-2px;width:2px;height:14px;background:#f4e7c866;transform:translate(-50%)}.cmr__cents-dot{position:absolute;top:50%;left:50%;width:14px;height:14px;border-radius:50%;background:var(--cmr-flame);transform:translate(-50%,-50%);box-shadow:0 0 12px #f6c15e99;transition:left .1s linear,background .1s ease}.cmr__cents-dot--in-tune{background:var(--cmr-mint);box-shadow:0 0 14px #9bd7b8b3}.cmr__cents-dot--off{background:var(--cmr-rose)}.cmr__cents-label{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--cmr-cream-dim)}.cmr__hz-val{font-family:Inter Tight,sans-serif;font-weight:700;font-size:32px;color:var(--cmr-flame);line-height:1}.cmr__hz-unit{font-family:JetBrains Mono,monospace;font-size:10px;color:var(--cmr-cream-dimmer)}.cmr__level-bar{height:10px;border-radius:5px;background:#f4e7c81a;overflow:hidden}.cmr__level-fill{width:0%;height:100%;background:linear-gradient(to right,var(--cmr-mint),var(--cmr-flame),var(--cmr-rose));transition:width 60ms linear}.cmr__scale-wrap{background:#00000047;border:1px solid rgba(246,193,94,.14);border-radius:18px;padding:16px 20px 18px;margin-bottom:22px}.cmr__scale-header{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}.cmr__scale-label{font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.16em;color:var(--cmr-cream-dimmer)}.cmr__scale-pills{display:flex;gap:6px;flex-wrap:wrap}.cmr__pill{font-family:Inter Tight,sans-serif;font-weight:600;font-size:12px;padding:6px 12px;border-radius:8px;border:1px solid rgba(246,193,94,.28);background:transparent;color:var(--cmr-cream);cursor:pointer;transition:background .1s ease}.cmr__pill:hover{background:#f6c15e1a}.cmr__pill--active{background:var(--cmr-flame);color:var(--cmr-walnut);border-color:var(--cmr-flame)}.cmr__keyboard{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}.cmr__key{padding:12px 0 10px;text-align:center;border-radius:8px;background:#f4e7c80f;border:1px solid transparent;transition:background 80ms ease,border 80ms ease,transform 60ms ease}.cmr__key--in-scale{background:#f6c15e2e;border-color:#f6c15e52}.cmr__key--root{background:#f6c15e52;border-color:var(--cmr-flame)}.cmr__key--hit{background:var(--cmr-mint);border-color:var(--cmr-mint);transform:scale(1.06)}.cmr__key-name{display:block;font-family:Inter Tight,sans-serif;font-weight:700;font-size:14px;color:var(--cmr-cream)}.cmr__key--in-scale .cmr__key-name{color:var(--cmr-flame)}.cmr__key--root .cmr__key-name,.cmr__key--hit .cmr__key-name{color:var(--cmr-walnut)}.cmr__key-deg{display:block;font-family:JetBrains Mono,monospace;font-size:9px;letter-spacing:.08em;color:var(--cmr-cream-dimmer);margin-top:2px}.cmr__key--in-scale .cmr__key-deg{color:var(--cmr-flame-deep)}.cmr__trace-wrap{background:#00000052;border:1px solid rgba(246,193,94,.14);border-radius:18px;padding:14px 18px 18px;margin-bottom:28px}.cmr__trace-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.cmr__trace-label{font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.14em;color:var(--cmr-cream-dimmer)}.cmr__trace-clear{font-family:JetBrains Mono,monospace;font-size:10px;padding:4px 10px;border-radius:6px;border:1px solid rgba(246,193,94,.28);background:transparent;color:var(--cmr-cream);cursor:pointer}.cmr__trace-clear:hover{background:#f6c15e1f}.cmr__trace{width:100%;height:200px;display:block;border-radius:10px;background:#0000004d}.cmr__guide{max-width:760px;margin:0 auto;padding:24px 0 0;border-top:1px solid rgba(246,193,94,.14)}.cmr__guide-h{font-family:Inter Tight,sans-serif;font-weight:700;font-size:20px;margin:0 0 12px;color:var(--cmr-cream)}.cmr__guide p{font-size:15px;line-height:1.6;color:var(--cmr-cream-dim);margin:0 0 12px}.cmr__guide a{color:var(--cmr-flame);text-decoration:none}.cmr__guide a:hover{text-decoration:underline}