.shared-pk-container{display:flex;gap:0;overflow-x:auto}.shared-pk-octave{display:flex;position:relative;flex-shrink:0}.shared-pk-white{width:36px;height:120px;border:1px solid #d1d5db;border-radius:0 0 6px 6px;background:#fff;cursor:pointer;position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:background .08s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.shared-pk-white:hover{background:#f3f4f6}.shared-pk-white.active{background:#7c3aed}.shared-pk-bass-range{border-bottom:2px solid #94a3b8}.shared-pk-white-label{font-size:.6rem;color:#64748b;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.shared-pk-black{width:24px;height:76px;background:#1e293b;border:1px solid #0f172a;border-radius:0 0 3px 3px;cursor:pointer;position:absolute;z-index:2;top:0;transform:translate(-50%);transition:background .08s;padding:0;display:flex;align-items:flex-end;justify-content:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.shared-pk-black:hover{background:#334155}.shared-pk-black.active{background:#7c3aed}.shared-pk-black-label{font-size:.5rem;color:#ffffffb3;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;position:absolute;bottom:4px;left:50%;transform:translate(-50%);white-space:nowrap}:root{--md-primary: #025f6a;--md-on-primary: #ffffff;--md-primary-container: #d2eaed;--md-on-primary-container: #073e46;--md-secondary: #df7fa0;--md-on-secondary: #ffffff;--md-secondary-container: #f7dce7;--md-on-secondary-container: #5b2338;--md-tertiary: #7b5470;--md-on-tertiary: #ffffff;--md-tertiary-container: #e9dde6;--md-surface: #ffffff;--md-surface-container: #fcf8fa;--md-surface-container-high: #f8f1f5;--md-surface-container-highest: #f4eaf0;--md-outline: #dfcad5;--md-outline-variant: #ecdee5;--md-on-surface: #2f2431;--md-on-surface-variant: #746170;--md-elev-1: 0 1px 2px rgba(24, 16, 26, .06), 0 1px 3px rgba(24, 16, 26, .08);--md-elev-2: 0 4px 10px rgba(24, 16, 26, .08), 0 2px 4px rgba(24, 16, 26, .06);--md-elev-3: 0 10px 20px rgba(24, 16, 26, .1), 0 4px 8px rgba(24, 16, 26, .06);--md-focus: 0 0 0 3px rgba(229, 139, 169, .28);--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--content-gutter: clamp(14px, 3vw, 40px);--card-pad: var(--space-4)}html,body,#root{width:100%;min-height:100%}body{margin:0;display:block;background:#f9f2f7!important;background-image:none!important}.pitch-app{min-height:100vh;width:100%;background:radial-gradient(980px 640px at -10% -20%,rgba(187,84,131,.36) 0%,rgba(187,84,131,.14) 34%,transparent 68%),radial-gradient(900px 560px at 112% -12%,rgba(0,72,88,.24) 0%,rgba(0,72,88,.09) 40%,transparent 72%),radial-gradient(1040px 500px at 56% 122%,rgba(92,57,86,.16) 0%,transparent 68%),linear-gradient(130deg,#ffffff57,#fff0 46%),linear-gradient(180deg,#fbf2f7,#f7edf4 42%,#fefbfd);color:var(--md-on-surface);padding:0;font-family:Roboto,Segoe UI,sans-serif}.pitch-shell{width:min(1120px,100%);margin:0 auto;max-width:1120px;background:transparent;border:0;border-radius:0;box-shadow:none;padding:var(--space-4) var(--content-gutter) var(--space-6)}.pitch-header{display:grid;grid-template-columns:1fr auto;align-items:start;gap:var(--space-4);padding:var(--space-2) 0;margin-bottom:var(--space-3)}.pitch-header-main{min-width:0}.pitch-header-input{display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:var(--space-2);align-items:end;min-width:min(48vw,560px)}.pitch-header h1{margin:0;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.14;letter-spacing:-.02em;color:color-mix(in srgb,var(--md-primary) 92%,#00424f);background:none;-webkit-text-fill-color:currentColor;background-clip:border-box;-webkit-background-clip:border-box;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.6)}.pitch-header p{margin:var(--space-2) 0 0;color:var(--md-on-surface-variant);font-size:.95rem;font-weight:500}.pitch-card{background:linear-gradient(180deg,color-mix(in srgb,var(--md-surface) 92%,#ffffff),color-mix(in srgb,var(--md-surface-container) 94%,#ffffff));border:1px solid color-mix(in srgb,#c08ca8 42%,var(--md-outline-variant));border-radius:24px;box-shadow:0 16px 34px #391d341f,0 6px 16px #391d3412,inset 0 1px #ffffffd1}.pitch-main-card,.pitch-reference-card{position:relative}.pitch-controls{display:none}.pitch-device{display:grid;gap:6px}.pitch-device span{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--md-on-surface-variant)}.pitch-device select,.pitch-listen-btn,.pitch-reference-toggle{height:44px;border-radius:12px;font:inherit}.pitch-device select{min-width:0;padding:0 12px;border:1px solid color-mix(in srgb,var(--md-outline) 72%,#e8dde3);background:var(--md-surface);color:var(--md-on-surface);box-shadow:inset 0 1px #fffc}.pitch-device select:hover{border-color:color-mix(in srgb,var(--md-secondary) 24%,var(--md-primary))}.pitch-listen-btn{cursor:pointer;padding:0 18px;border:1px solid color-mix(in srgb,var(--md-primary) 56%,var(--md-secondary));background:linear-gradient(135deg,color-mix(in srgb,var(--md-primary) 90%,#0b4f5c),color-mix(in srgb,var(--md-primary) 72%,var(--md-secondary) 28%));color:var(--md-on-primary);font-weight:700;letter-spacing:.01em;box-shadow:var(--md-elev-1);transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}.pitch-listen-btn:hover{transform:translateY(-1px);filter:brightness(1.02);box-shadow:0 10px 20px #025f6a33,0 4px 10px #d6789a29}.pitch-listen-btn:active{transform:translateY(0)}.pitch-listen-btn.active{background:color-mix(in srgb,var(--md-secondary) 68%,var(--md-primary) 32%)}.pitch-device select:focus-visible,.pitch-listen-btn:focus-visible{outline:none;box-shadow:var(--md-focus)}.pitch-mic-status{grid-column:1 / -1;color:var(--md-on-surface-variant);font-size:.78rem;font-weight:500;letter-spacing:.01em;opacity:.88;margin-left:2px}.pitch-main-card,.pitch-reference-card{margin-top:var(--space-3);padding:var(--card-pad);background:var(--md-surface)}.pitch-note-display{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:var(--space-3);min-height:104px}.pitch-note{width:4.1ch;font-size:clamp(3.1rem,9vw,4.7rem);line-height:.88;font-weight:700;letter-spacing:-.015em;color:color-mix(in srgb,var(--md-primary) 84%,#015965);font-variant-numeric:tabular-nums}.pitch-frequency{min-height:1.45em;display:inline-flex;align-items:center;font-size:1rem;font-weight:500;color:var(--md-on-surface-variant)}.pitch-meter-wrap{margin-top:var(--space-3)}.pitch-meter-labels{display:flex;justify-content:space-between;margin-bottom:var(--space-2);font-size:.78rem;font-weight:600;color:var(--md-on-surface-variant)}.pitch-meter{position:relative;height:22px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-outline) 66%,var(--md-outline-variant));background:linear-gradient(90deg,color-mix(in srgb,var(--md-secondary-container) 38%,transparent),color-mix(in srgb,var(--md-primary-container) 84%,#fff) 50%,color-mix(in srgb,var(--md-secondary-container) 38%,transparent));overflow:hidden}.pitch-meter-center{position:absolute;left:50%;top:3px;bottom:3px;width:2px;border-radius:999px;background:var(--md-primary);transform:translate(-50%)}.pitch-meter-pointer{position:absolute;top:3px;bottom:3px;width:10px;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-primary) 88%,#0c4f5a),color-mix(in srgb,var(--md-primary) 72%,var(--md-secondary) 28%));box-shadow:0 0 0 1px #ffffff85,0 0 10px #0c4f5a2e;transform:translate(-50%);transition:left .18s ease-out}.pitch-meter-readout{min-height:1.45em;margin-top:var(--space-2);font-size:.92rem;font-weight:600;color:var(--md-primary);font-variant-numeric:tabular-nums}.pitch-section-title{margin:var(--space-4) 0 0;font-size:1rem;font-weight:700;letter-spacing:.01em;color:var(--md-on-surface)}.pitch-history-graph{margin-top:var(--space-2);height:130px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-outline) 66%,var(--md-outline-variant));background:linear-gradient(180deg,var(--md-surface-container-high) 0%,var(--md-surface-container) 100%);overflow:hidden}.pitch-history-svg{width:100%;height:100%;display:block}.pitch-history-guide{stroke:color-mix(in srgb,var(--md-on-surface-variant) 30%,transparent);stroke-width:.7}.pitch-history-line{fill:none;stroke:color-mix(in srgb,var(--md-primary) 74%,var(--md-secondary) 26%);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.95}.pitch-history-point{fill:var(--md-primary)}.pitch-reference-card .shared-pk-container{margin-top:var(--space-3)}.pitch-reference-card .shared-pk-white{border-color:color-mix(in srgb,var(--md-outline) 74%,#d1d5db);background:var(--md-surface)}.pitch-reference-card .shared-pk-white:hover{background:var(--md-surface-container-high)}.pitch-reference-card .shared-pk-white.active,.pitch-reference-card .shared-pk-black.active{background:var(--md-primary)}.pitch-reference-card .shared-pk-white-label{color:var(--md-on-surface-variant)}.pitch-reference-card .shared-pk-black{background:color-mix(in srgb,var(--md-on-primary-container) 88%,#13161a);border-color:color-mix(in srgb,var(--md-on-primary-container) 90%,#000)}@media(max-width:680px){.pitch-app{padding:0}.pitch-shell{border-radius:0;width:100%;max-width:none;padding:var(--space-3) 10px var(--space-6)}.pitch-header{grid-template-columns:1fr;gap:var(--space-3)}.pitch-header-input{min-width:0;grid-template-columns:1fr;gap:var(--space-2)}.pitch-listen-btn{width:100%}.pitch-note-display{grid-template-columns:1fr;min-height:114px;gap:6px}.pitch-note{width:auto}.pitch-history-graph{height:114px}}