@font-face{font-family:Geist;src:url(/lab/tonleiter/fonts/Geist-Variable.woff2)format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:Geist Mono;src:url(/lab/tonleiter/fonts/GeistMono-Variable.woff2)format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:Instrument Serif;src:url(/lab/tonleiter/fonts/instrument-serif-regular-latin.woff2)format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Instrument Serif;src:url(/lab/tonleiter/fonts/instrument-serif-italic-latin.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}:root{--paper:#fffcf6;--ink:#151515;--ink-60:#1515159e;--ink-40:#1515156b;--hairline:#78716238;--hairline-soft:#7871621f;--tool-accent:#546257;--tool-on-accent:#fff;--ease:cubic-bezier(.32, .72, 0, 1)}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;overflow-x:clip}body{background:var(--paper);color:var(--ink);font-family:Geist,system-ui,sans-serif;font-size:15px;line-height:1.6}::selection{background:var(--tool-accent);color:var(--tool-on-accent)}.mono{font-family:Geist Mono,monospace}.label{text-transform:uppercase;letter-spacing:.2em;color:var(--ink-60);font-family:Geist Mono,monospace;font-size:.62rem}.wrap{max-width:1280px;margin:0 auto;padding:0 28px}header.site{border-bottom:1px solid var(--hairline);z-index:20;background:color-mix(in srgb, var(--paper) 92%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:18px 0;position:sticky;top:0}header.site .wrap{justify-content:space-between;align-items:center;gap:20px;display:flex}.back{text-transform:uppercase;letter-spacing:.2em;color:var(--ink-60);transition:color .3s var(--ease);font-family:Geist Mono,monospace;font-size:10px;text-decoration:none}.back:hover{color:var(--tool-accent)}.brand{align-items:baseline;gap:12px;display:flex}.brand h1{font-family:Instrument Serif,serif;font-size:1.35rem;font-weight:400;line-height:1}.head-actions{align-items:center;gap:16px;display:flex}.soundbtn{border:1px solid var(--hairline);cursor:pointer;text-transform:uppercase;letter-spacing:.14em;height:34px;color:var(--ink-60);transition:color .3s var(--ease), border-color .3s var(--ease), transform .15s var(--ease);background:#fff;border-radius:999px;padding:0 14px;font-family:Geist Mono,monospace;font-size:.55rem}.soundbtn:active{transform:scale(.96)}.soundbtn[aria-pressed=true]{color:var(--tool-accent);border-color:color-mix(in srgb, var(--tool-accent) 40%, transparent)}.brand span{text-transform:uppercase;letter-spacing:.18em;color:var(--ink-40);font-family:Geist Mono,monospace;font-size:10px}.hero{text-align:center;padding:72px 0 40px}.hero h2{text-wrap:balance;max-width:24ch;margin:14px auto 18px;font-family:Instrument Serif,serif;font-size:clamp(2.2rem,4.8vw,3.6rem);font-weight:400;line-height:1.08}.hero p{color:var(--ink-60);text-wrap:pretty;max-width:52ch;margin:0 auto;font-weight:300}.hero .label{color:var(--tool-accent)}.step-label{color:var(--tool-accent);margin-bottom:4px;display:block}.step-hint{max-width:58ch;color:var(--ink-40);text-wrap:pretty;margin:2px 0 10px;font-size:.8rem;font-weight:300;line-height:1.65}.h-hint{text-transform:uppercase;letter-spacing:.14em;color:var(--ink-40);vertical-align:3px;margin-left:12px;font-family:Geist Mono,monospace;font-size:.55rem}.panel{border:1px solid var(--hairline);background:#fff;border-radius:24px;margin:10px 0 8px}.panel-row{padding:22px 28px 20px}.panel-row+.panel-row{border-top:1px solid var(--hairline-soft)}.panel .colorfield,.panel .seg,.panel .kw,.panel .xbtn,.panel .soundbtn{background:var(--paper)}.pv-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.pv-modes{flex-wrap:wrap;gap:10px;display:flex}.pv-modes .seg button{padding:0 13px;font-size:.56rem}#cvdHint{margin:-4px 0 12px}.pv-head .step-label{margin-bottom:0}.charts circle[data-step]{transform-box:fill-box;transform-origin:50%;transition:transform .2s var(--ease)}.charts circle.dot-hl{transform:scale(1.9)}.controls{flex-wrap:wrap;align-items:center;gap:14px;padding:10px 0 18px;display:flex}.colorfield{border:1px solid var(--hairline);background:#fff;border-radius:999px;align-items:center;gap:10px;height:44px;padding:0 8px 0 6px;display:inline-flex}.colorfield input[type=color]{cursor:pointer;appearance:none;background:0 0;border:none;border-radius:999px;width:32px;height:32px;padding:0}.colorfield input[type=color]::-webkit-color-swatch-wrapper{padding:0}.colorfield input[type=color]::-webkit-color-swatch{border:1px solid var(--hairline);border-radius:999px}.colorfield input[type=text]{width:15ch;color:var(--ink);background:0 0;border:none;outline:none;font-family:Geist Mono,monospace;font-size:.8rem}.colorfield.is-invalid{border-color:#c97b6e}.colorfield--neutral{padding-left:12px}.colorfield--neutral input[type=text]{width:14ch}.colorfield--neutral .dot{margin-left:0}.colorfield .clear{cursor:pointer;color:var(--ink-40);background:0 0;border:none;border-radius:999px;padding:4px 6px;font-size:.85rem;line-height:1}.colorfield .clear:hover{color:var(--ink)}.seg{border:1px solid var(--hairline);background:#fff;border-radius:999px;height:44px;display:inline-flex;overflow:hidden}.seg button{cursor:pointer;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-60);transition:background-color .3s var(--ease), color .3s var(--ease), transform .15s var(--ease);background:0 0;border:none;padding:0 18px;font-family:Geist Mono,monospace;font-size:.62rem}.seg button:active{transform:scale(.96)}.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.temperament-head{flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:14px;display:flex}.keywords{flex-wrap:wrap;gap:8px;display:flex}.kw{border:1px solid var(--hairline);cursor:pointer;text-transform:uppercase;letter-spacing:.14em;height:34px;color:var(--ink-60);transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .15s var(--ease);background:#fff;border-radius:999px;padding:0 14px;font-family:Geist Mono,monospace;font-size:.58rem}.kw:active{transform:scale(.96)}.kw:hover{border-color:var(--tool-accent);color:var(--ink)}.kw[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.axes{grid-template-columns:1fr;gap:10px;max-width:720px;display:grid}@media (width>=900px){.axes{grid-template-columns:repeat(3,1fr);max-width:none}}.axis{align-items:center;gap:10px;display:flex}.axis-end{text-transform:uppercase;letter-spacing:.14em;color:var(--ink-40);flex:none;width:52px;font-family:Geist Mono,monospace;font-size:.55rem}.axis-end:last-child{text-align:right}.axis input[type=range]{appearance:none;cursor:pointer;background:0 0;flex:1;height:44px}.axis input[type=range]::-webkit-slider-runnable-track{background:var(--hairline);border-radius:999px;height:2px}.axis input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--ink);border:3px solid var(--paper);width:18px;height:18px;box-shadow:0 0 0 1px var(--hairline);transition:background-color .3s var(--ease);border-radius:999px;margin-top:-8px}.axis input[type=range]:hover::-webkit-slider-thumb{background:var(--tool-accent)}.axis input[type=range]::-moz-range-track{background:var(--hairline);border-radius:999px;height:2px}.axis input[type=range]::-moz-range-thumb{background:var(--ink);border:3px solid var(--paper);width:12px;height:12px;box-shadow:0 0 0 1px var(--hairline);border-radius:999px}.footnote{max-width:62ch;color:var(--ink-40);margin-top:14px;font-size:.72rem;font-weight:300;line-height:1.7}.preview-zone{padding:30px 0 56px}.preview-frame{border:1px solid var(--hairline);background:#fff;border-radius:24px;padding:8px}.preview{background:var(--surface);color:var(--text-primary);transition:background-color .4s var(--ease);border-radius:16px;grid-template-columns:1fr;gap:28px;padding:clamp(24px,5vw,56px);display:grid}@media (width>=900px){.preview{grid-template-columns:7fr 5fr;align-items:start}}.pv-card{background:var(--surface-raised);border:1px solid var(--border);border-radius:14px;padding:28px}.pv-badge{text-transform:uppercase;letter-spacing:.18em;background:var(--accent-surface);color:var(--accent);border-radius:999px;margin-bottom:16px;padding:6px 12px;font-family:Geist Mono,monospace;font-size:.58rem;display:inline-block}.pv-h{color:var(--text-primary);text-wrap:balance;margin-bottom:10px;font-family:Instrument Serif,serif;font-size:1.9rem;font-weight:400;line-height:1.15}.pv-body{color:var(--text-secondary);margin-bottom:6px;font-weight:300}.pv-muted{color:var(--text-muted);margin-bottom:22px;font-size:.82rem}.pv-actions{flex-wrap:wrap;gap:10px;display:flex}.pv-btn{cursor:pointer;text-transform:uppercase;letter-spacing:.16em;transition:background-color .3s var(--ease), transform .15s var(--ease);background:var(--accent);color:var(--text-on-accent);border:none;border-radius:999px;padding:12px 22px;font-family:Geist Mono,monospace;font-size:.62rem}.pv-btn:hover{background:var(--accent-hover)}.pv-btn:active{transform:scale(.96)}.pv-btn--ghost{color:var(--text-primary);border:1px solid var(--border);background:0 0}.pv-btn--ghost:hover{background:var(--surface-sunken)}.pv-side{gap:12px;display:grid}.pv-stat{background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:14px;padding:18px 22px}.pv-stat b{font-variant-numeric:tabular-nums;color:var(--text-primary);font-size:1.5rem;font-weight:600;display:block}.pv-stat span{text-transform:uppercase;letter-spacing:.16em;color:var(--text-muted);font-family:Geist Mono,monospace;font-size:.58rem}.pv-link{color:var(--accent);text-underline-offset:3px;text-decoration:underline;-webkit-text-decoration-color:color-mix(in srgb, var(--accent) 40%, transparent);text-decoration-color:color-mix(in srgb, var(--accent) 40%, transparent)}.tokens{border-top:1px solid var(--hairline);padding:44px 0 24px}.tokens h3{margin:6px 0 20px;font-family:Instrument Serif,serif;font-size:1.5rem;font-weight:400}.scale{grid-template-columns:repeat(12,1fr);gap:4px;margin:10px 0 22px;display:grid}.swatch{border:1px solid var(--hairline-soft);cursor:pointer;width:100%;transition:transform .2s var(--ease);border-radius:8px;padding:0;display:block;position:relative;overflow:visible}.swatch:active{transform:scale(.96)}.swatch:before{content:"";padding-top:88%;display:block}.swatch em{letter-spacing:.06em;opacity:.85;font-family:Geist Mono,monospace;font-size:.52rem;font-style:normal;position:absolute;bottom:4px;left:6px}.swatch{z-index:1}.swatch:hover{z-index:40}.swatch:hover .tip{opacity:1}.tip{background:var(--ink);color:var(--paper);white-space:nowrap;opacity:0;transition:opacity .25s var(--ease);pointer-events:none;z-index:50;border-radius:8px;padding:6px 9px;font-family:Geist Mono,monospace;font-size:.58rem;position:absolute;top:-8px;left:50%;transform:translate(-50%,-100%)}.tip:after{content:"";border:4px solid #0000;border-top-color:var(--ink);border-bottom:0;position:absolute;bottom:-4px;left:50%;transform:translate(-50%)}.swatch:nth-child(-n+2) .tip{left:0;transform:translateY(-100%)}.swatch:nth-child(-n+2) .tip:after{left:18px}.swatch:nth-last-child(-n+2) .tip{left:auto;right:0;transform:translateY(-100%)}.swatch:nth-last-child(-n+2) .tip:after{left:auto;right:18px;transform:none}table.sem{border-collapse:collapse;width:100%;margin:8px 0 36px}table.sem th{text-align:left;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-60);border-bottom:1px solid var(--hairline);padding:10px 12px 10px 0;font-family:Geist Mono,monospace;font-size:.6rem;font-weight:400}table.sem td{border-bottom:1px solid var(--hairline-soft);vertical-align:middle;padding:9px 12px 9px 0}td.tname{font-family:Geist Mono,monospace;font-size:.74rem}.chip{align-items:center;gap:8px;font-family:Geist Mono,monospace;font-size:.68rem;display:inline-flex}.chip i{border:1px solid var(--hairline);border-radius:6px;width:18px;height:18px;display:inline-block}.ratio{color:var(--ink-60);font-variant-numeric:tabular-nums;white-space:nowrap;font-family:Geist Mono,monospace;font-size:.64rem}.ratio b{color:var(--ink);font-weight:500}.adjusted{text-transform:uppercase;letter-spacing:.12em;color:var(--tool-accent);border:1px solid color-mix(in srgb, var(--tool-accent) 35%, transparent);vertical-align:1px;border-radius:999px;margin-left:8px;padding:2px 8px;font-family:Geist Mono,monospace;font-size:.52rem;display:inline-block}.adjust-note{color:var(--ink-60);border:1px solid var(--hairline);border-radius:12px;margin:0 0 26px;padding:12px 16px;font-family:Geist Mono,monospace;font-size:.66rem;line-height:1.9}.adjust-note b{color:var(--tool-accent);font-weight:500}.chart-legend{flex-wrap:wrap;gap:16px;margin:4px 0 14px;display:flex}.charts{grid-template-columns:1fr;gap:14px;margin-bottom:34px;display:grid}@media (width>=900px){.charts{grid-template-columns:1fr 1fr}}.chart-panel{border:1px solid var(--hairline);background:#fff;border-radius:16px;margin:0;padding:16px 18px 12px}.chart-panel figcaption{text-transform:uppercase;letter-spacing:.16em;color:var(--ink-60);margin-bottom:10px;font-family:Geist Mono,monospace;font-size:.58rem}.chart-panel svg{width:100%;height:auto;display:block}.chart-panel--wheel svg{max-width:240px;margin:0 auto}.extra-fields{display:contents}.colorfield .dot{border:1px solid var(--hairline);border-radius:999px;flex:none;width:18px;height:18px;margin-left:6px}.strip-label{text-transform:uppercase;letter-spacing:.16em;color:var(--ink-60);margin-top:14px;font-family:Geist Mono,monospace;font-size:.58rem;display:block}table.mx{border-collapse:separate;border-spacing:4px;width:100%}table.mx th{text-transform:uppercase;letter-spacing:.1em;color:var(--ink-60);text-align:center;padding-bottom:2px;font-family:Geist Mono,monospace;font-size:.52rem;font-weight:400}td.mx-name{color:var(--ink-60);white-space:nowrap;padding-right:6px;font-family:Geist Mono,monospace;font-size:.6rem}.mx-cell{text-align:center;font-variant-numeric:tabular-nums;border:1px solid var(--hairline-soft);border-radius:8px;padding:9px 4px;font-family:Geist Mono,monospace;font-size:.66rem;display:block}.mx-cell--fail{outline-offset:-2px;outline:2px dashed #c97b6e}.exports{flex-wrap:wrap;gap:10px;padding:4px 0 20px;display:flex}.xbtn{border:1px solid var(--hairline);cursor:pointer;text-transform:uppercase;letter-spacing:.16em;height:44px;color:var(--ink);transition:border-color .3s var(--ease), background-color .3s var(--ease), transform .15s var(--ease);background:#fff;border-radius:999px;align-items:center;gap:10px;padding:0 20px;font-family:Geist Mono,monospace;font-size:.62rem;display:inline-flex}.xbtn:hover{border-color:var(--tool-accent)}.xbtn:active{transform:scale(.96)}.xbtn.copied{background:var(--ink);color:var(--paper);border-color:var(--ink)}.xbtn .dl{color:var(--ink-40)}footer.site{border-top:1px solid var(--hairline);padding:22px 0 40px}footer.site .wrap{flex-wrap:wrap;justify-content:space-between;gap:16px;display:flex}footer.site span{text-transform:uppercase;letter-spacing:.16em;color:var(--ink-40);font-family:Geist Mono,monospace;font-size:.58rem}@media (width<=640px){.wrap{padding-inline:20px}header.site{padding:10px 0}header.site .wrap{gap:10px}.brand{gap:0}.brand span{display:none}.head-actions{gap:6px}.soundbtn{min-width:44px;height:44px;padding:0 10px}.back{letter-spacing:0;flex:none;place-items:center;width:44px;height:44px;font-size:0;display:grid}.back:before{content:"←";font-family:Geist,sans-serif;font-size:1.2rem}.hero{padding:52px 0 32px}.panel-row{padding:20px}#harmonySeg,#cvdSeg{border-radius:18px;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;height:auto;display:grid}#harmonySeg button,#cvdSeg button{min-height:44px;padding:8px 10px}.pv-modes{width:100%}.pv-modes>.seg:not(#cvdSeg),.pv-modes>.seg:not(#cvdSeg) button{flex:1}.tip{display:none}.scale{grid-template-columns:repeat(6,1fr)}table.sem .hide-sm{display:none}}@media (hover:none),(pointer:coarse){.tip{display:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}