.opt-app{--opt-white-w:36px;--opt-white-h:210px;--opt-black-w:22px;--opt-black-h:130px;--opt-line:#d8e2ef;--opt-text:#172033;--opt-muted:#657185;--opt-accent:#2558d9;--opt-gold:#f3c84b;--opt-blue:#79c7ff;--opt-green:#73d59b;--opt-purple:#c79cff;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--opt-text);background:#f5f8fc;border:1px solid var(--opt-line);border-radius:24px;padding:clamp(16px,3vw,28px);box-shadow:0 16px 50px rgba(24,40,72,.08);line-height:1.45}.opt-app *{box-sizing:border-box}.opt-header{display:flex;gap:20px;justify-content:space-between;align-items:flex-start}.opt-header h2{font-size:clamp(28px,4vw,44px);line-height:1.06;margin:4px 0 8px}.opt-kicker{margin:0;color:var(--opt-accent);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.opt-lead{max-width:820px;color:var(--opt-muted);margin:0}.opt-app button{appearance:none;border:1px solid #c9d5e5;background:#fff;color:var(--opt-text);border-radius:12px;padding:10px 14px;font:inherit;font-weight:750;cursor:pointer;touch-action:manipulation}.opt-app button:hover,.opt-app button:focus-visible{background:#eef4ff;outline:2px solid transparent}.opt-audio-button{background:#2558d9!important;color:#fff!important;border-color:#2558d9!important;white-space:nowrap}.opt-status{margin:18px 0 14px;padding:10px 12px;border-radius:12px;background:#fff8e7;border:1px solid #eedb9f;font-size:13px}.opt-status.is-ready{background:#effbf2;border-color:#bce1c5;color:#255b34}.opt-status.is-error{background:#fff1f0;border-color:#efb4af;color:#872d26}.opt-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.opt-card{background:#fff;border:1px solid var(--opt-line);border-radius:18px;padding:15px}.opt-card span{display:block;color:var(--opt-muted);font-size:12px}.opt-card strong{display:block;font-size:25px;margin:3px 0}.opt-card small{color:var(--opt-muted)}.opt-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}.opt-controls label{display:grid;gap:4px;min-width:190px;font-weight:700;font-size:13px}.opt-controls input[type=range]{width:100%}.opt-explanation{margin:14px 0;background:#edf4ff;border-radius:14px;padding:12px 14px;color:#40516c;font-size:14px}.opt-keyboard-section{background:#fff;border:1px solid var(--opt-line);border-radius:18px;padding:14px;overflow:hidden}.opt-keyboard-scroll{overflow-x:auto;padding-bottom:6px}.opt-keyboard{position:relative;width:calc(var(--opt-white-w) * 52);height:calc(var(--opt-white-h) + 8px);user-select:none;-webkit-user-select:none}.opt-key{position:absolute!important;bottom:0;border:1px solid #202634!important;border-radius:0 0 7px 7px!important;display:flex;align-items:flex-end;justify-content:center;padding:0 2px 7px!important;cursor:pointer;touch-action:manipulation;font-size:10px!important;line-height:1.1;text-align:center;transition:transform .05s ease,filter .08s ease,background .12s ease}.opt-key.white{z-index:1;width:var(--opt-white-w);height:var(--opt-white-h);background:linear-gradient(#fff,#eef2f6);color:#475166}.opt-key.black{z-index:2;width:var(--opt-black-w);height:var(--opt-black-h);background:linear-gradient(#2b3039,#0d1015);color:#fff;border-color:#090b0e!important}.opt-key:active,.opt-key.is-playing{transform:translateY(2px);filter:brightness(.88)}.opt-key.is-h1.white{background:linear-gradient(#c4e9ff,var(--opt-blue))}.opt-key.is-h2.white{background:linear-gradient(#c9f1d8,var(--opt-green))}.opt-key.is-h3.white{background:linear-gradient(#ecd8ff,var(--opt-purple))}.opt-key.is-h1.black{background:#347bab}.opt-key.is-h2.black{background:#2d8350}.opt-key.is-h3.black{background:#744594}.opt-key.is-selected.white{background:linear-gradient(#ffe89d,var(--opt-gold))}.opt-key.is-selected.black{background:linear-gradient(#9b7d14,#c99e22)}.opt-keyboard-help{margin:10px 0 0;color:var(--opt-muted);font-size:13px}.opt-harmonic-table-wrap{overflow:auto;max-height:430px;margin-top:16px;border:1px solid var(--opt-line);border-radius:16px;background:#fff}.opt-harmonic-table{width:100%;border-collapse:collapse;font-size:13px}.opt-harmonic-table th,.opt-harmonic-table td{padding:10px 12px;border-bottom:1px solid #edf0f5;text-align:left}.opt-harmonic-table th{position:sticky;top:0;background:#f1f5fa;z-index:1}.opt-harmonic-table tbody tr{cursor:pointer}.opt-harmonic-table tbody tr:hover{background:#f7faff}.opt-harmonic-table tbody tr.is-focus{background:#fff4eb}.opt-credit{font-size:11px;color:var(--opt-muted);margin:12px 2px 0}@media(max-width:760px){.opt-header{display:block}.opt-audio-button{margin-top:14px}.opt-cards{grid-template-columns:1fr}.opt-app{border-radius:16px}.opt-harmonic-table{min-width:540px}}@media(max-width:520px){.opt-controls>*{flex:1 1 auto}}