.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: #0f766e;--md-on-primary: #ecfdf5;--md-primary-container: #ccfbf1;--md-on-primary-container: #115e59;--md-secondary: #db2777;--md-on-secondary: #fff1f2;--md-secondary-container: #fce7f3;--md-on-secondary-container: #831843;--md-tertiary: #7c3aed;--md-on-tertiary: #faf5ff;--md-tertiary-container: #ede9fe;--md-on-tertiary-container: #4c1d95;--md-surface: #ffffff;--md-surface-container: #ffe4e6;--md-surface-container-high: #fecdd3;--md-surface-container-highest: #fda4af;--md-outline: #f472b6;--md-outline-variant: #fecdd3;--md-on-surface: #1e1033;--md-on-surface-variant: #5b21b6;--md-elev-1: 4px 6px 0 rgba(15, 118, 110, .22);--md-elev-2: 8px 12px 0 rgba(219, 39, 119, .16);--md-elev-3: 12px 18px 0 rgba(91, 33, 182, .12);--md-focus: 0 0 0 3px rgba(219, 39, 119, .35);--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--content-gutter: clamp(16px, 3.5vw, 48px);--card-pad: 1.5rem;--pitch-card-radius: 4px;--pitch-history-radius: 3px;--pitch-control-radius: 6px;--pitch-font-body: system-ui, sans-serif;--pitch-font-display: system-ui, sans-serif;--pitch-h1-letter-spacing: -.03em;--pitch-h1-text-shadow: 0 0 1px rgba(255, 255, 255, .95), 0 1px 0 rgba(255, 255, 255, .75), 2px 2px 0 rgba(251, 113, 133, .55), 3px 3px 0 rgba(219, 39, 119, .22);--pitch-h1-color: #0f766e;--pitch-card-border-mix-color: #db2777;--pitch-listen-hover-shadow-a: rgba(15, 118, 110, .28);--pitch-listen-hover-shadow-b: rgba(219, 39, 119, .22);--pitch-meter-height: 22px}html,body,#root{width:100%;min-height:100%}body{margin:0;display:block;background:#fce7f3!important;background-image:none!important}.pitch-app{min-height:100vh;min-height:100dvh;width:100%;background:radial-gradient(circle at 1px 1px,rgba(219,39,119,.16) 1px,transparent 1px),radial-gradient(circle at 1px 1px,rgba(15,118,110,.13) 1px,transparent 1px),radial-gradient(circle at 1px 1px,rgba(124,58,237,.1) 1px,transparent 1px),linear-gradient(145deg,#fff5f7,#fdf4ff 32%,#ecfeff 62%,#ffe4e6);background-size:8px 8px,8px 8px,10px 10px,auto;background-position:0 0,4px 4px,2px 5px,0 0;color:var(--md-on-surface);padding:0;font-family:var(--pitch-font-body)}@media(prefers-reduced-motion:reduce){.pitch-app{background:linear-gradient(145deg,#fff5f7,#fdf4ff 32%,#ecfeff 62%,#ffe4e6);background-size:auto;background-position:0 0}}.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) calc(var(--space-6) + env(safe-area-inset-bottom,0px))}.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-6)}.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:var(--pitch-h1-letter-spacing);font-family:var(--pitch-font-display);color:var(--pitch-h1-color, var(--md-primary));background:none;-webkit-text-fill-color:currentColor;background-clip:border-box;-webkit-background-clip:border-box;font-weight:700;text-shadow:var(--pitch-h1-text-shadow)}.pitch-header p{margin:var(--space-2) 0 0;color:#553c8c;font-size:.95rem;font-weight:500;text-shadow:0 1px 0 rgba(255,255,255,.85)}.pitch-card{background:#fff;border:2px solid #0f766e;border-radius:var(--pitch-card-radius);box-shadow:6px 8px #db2777}.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:#5b21b6;text-shadow:0 1px 0 rgba(255,255,255,.82)}.pitch-device select,.pitch-listen-btn,.pitch-reference-toggle{height:44px;border-radius:var(--pitch-control-radius);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 var(--pitch-listen-hover-shadow-a),0 4px 10px var(--pitch-listen-hover-shadow-b)}.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:#553c8c;font-size:.78rem;font-weight:500;letter-spacing:.01em;margin-left:2px;text-shadow:0 1px 0 rgba(255,255,255,.82)}.pitch-main-card,.pitch-reference-card{margin-top:var(--space-3);padding:var(--card-pad);background:var(--md-surface)}.pitch-reference-card.pitch-card{margin-top:2rem}.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:#5b21b6}.pitch-meter{position:relative;height:var(--pitch-meter-height);border-radius:var(--pitch-card-radius);border:2px solid #0f766e;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:1px;background:var(--md-primary);transform:translate(-50%)}.pitch-meter-pointer{position:absolute;top:3px;bottom:3px;width:10px;border-radius:3px;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:var(--pitch-history-radius);border:2px solid #0f766e;background:#fff;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-width:2px;border-style:solid;border-color:#0f766e;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{border-width:2px;border-style:solid;background:color-mix(in srgb,var(--md-on-primary-container) 88%,#13161a);border-color:#1e1033}@media(max-width:680px){.pitch-app{padding:0}.pitch-shell{border-radius:0;width:100%;max-width:none;padding:var(--space-3) 10px calc(var(--space-6) + env(safe-area-inset-bottom,0px))}.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}}