:root{--jw-color-background: #F7F8FA;--jw-color-surface: #FFFFFF;--jw-color-surface-subtle: #F0F2F5;--jw-color-text-primary: #1C1C1A;--jw-color-text-secondary: #6B6B66;--jw-color-text-tertiary: #A3A39E;--jw-color-border: #E5E4E0;--jw-color-border-strong: #D1D0CC;--jw-color-brand: #2B6C8A;--jw-color-brand-hover: #1E5A75;--jw-color-brand-tint: #E8F2F7;--jw-color-brand-subtle: #F2F8FA;--jw-color-action: #007AFF;--jw-color-action-hover: #0066D6;--jw-color-action-tint: #E8F1FF;--jw-color-accent-warm: #C8922A;--jw-color-accent-warm-tint: #FDF6E8;--jw-color-accent-earth: #9A7464;--jw-color-accent-earth-tint: #F5EEEA;--jw-color-accent-sand: #BE9070;--jw-color-accent-sand-tint: #F8F0E8;--jw-color-success: #3D8B5E;--jw-color-warning: #C4914F;--jw-color-error: #C45A4A;--jw-color-info: #4A7FA3;--jw-font-size-display-lg: 2.5rem;--jw-font-size-display: 2.125rem;--jw-font-size-heading-lg: 1.75rem;--jw-font-size-heading: 1.375rem;--jw-font-size-title: 1.25rem;--jw-font-size-body: 1.0625rem;--jw-font-size-callout: 1rem;--jw-font-size-subhead: .9375rem;--jw-font-size-caption: .8125rem;--jw-font-size-caption-sm: .75rem;--jw-font-size-overline: .6875rem;--jw-line-height-tight: 1.2;--jw-line-height-snug: 1.3;--jw-line-height-normal: 1.5;--jw-line-height-relaxed: 1.65;--jw-line-height-cjk: 1.75;--jw-spacing-1: 4px;--jw-spacing-2: 8px;--jw-spacing-3: 12px;--jw-spacing-4: 16px;--jw-spacing-6: 24px;--jw-spacing-8: 32px;--jw-spacing-12: 48px;--jw-spacing-16: 64px;--jw-spacing-24: 96px;--jw-spacing-32: 128px;--jw-radius-none: 0px;--jw-radius-sm: 4px;--jw-radius-md: 8px;--jw-radius-card: 12px;--jw-radius-lg: 16px;--jw-radius-xl: 24px;--jw-radius-full: 9999px;--jw-tracking-tighter: -.02em;--jw-tracking-tight: -.01em;--jw-tracking-normal: 0em;--jw-tracking-wide: .02em;--jw-shadow-sm: 0px 1px 2px 0px #0000000d;--jw-shadow-md: 0px 4px 8px -2px #00000014;--jw-shadow-lg: 0px 8px 24px -4px #0000001f;--jw-shadow-xl: 0px 16px 48px -8px #00000029;--jw-shadow-inner: inset 0px 2px 4px 0px #0000000a;--jw-opacity-0: 0;--jw-opacity-25: .25;--jw-opacity-50: .5;--jw-opacity-75: .75;--jw-opacity-100: 1;--jw-opacity-disabled: .4;--jw-opacity-overlay: .6;--jw-duration-fast: .15s;--jw-duration-normal: .25s;--jw-duration-slow: .4s;--jw-duration-slower: .6s;--jw-ease-default: cubic-bezier(.25, .1, .25, 1);--jw-ease-enter: cubic-bezier(0, 0, .2, 1);--jw-ease-exit: cubic-bezier(.4, 0, 1, 1);--jw-ease-spring: cubic-bezier(.34, 1.56, .64, 1)}@media(prefers-color-scheme:dark){:root{--jw-color-background: #141416;--jw-color-surface: #1E1E20;--jw-color-surface-subtle: #262628;--jw-color-text-primary: #F0EFEB;--jw-color-text-secondary: #9E9E98;--jw-color-text-tertiary: #6B6B66;--jw-color-border: #2E2E2C;--jw-color-border-strong: #3E3E3B;--jw-color-brand: #5BA3C2;--jw-color-brand-hover: #7AB8D4;--jw-color-brand-tint: #1A2E38;--jw-color-brand-subtle: #161F24;--jw-color-action: #0A84FF;--jw-color-action-hover: #409CFF;--jw-color-action-tint: #141E30;--jw-color-accent-warm: #D4A853;--jw-color-accent-warm-tint: #2A2418;--jw-color-accent-earth: #B8937F;--jw-color-accent-earth-tint: #2A2220;--jw-color-accent-sand: #D4AE94;--jw-color-accent-sand-tint: #2C2520;--jw-color-success: #5AAD7A;--jw-color-warning: #D4A853;--jw-color-error: #D47A6A;--jw-color-info: #6BA3C7}}.dark{--jw-color-background: #141416;--jw-color-surface: #1E1E20;--jw-color-surface-subtle: #262628;--jw-color-text-primary: #F0EFEB;--jw-color-text-secondary: #9E9E98;--jw-color-text-tertiary: #6B6B66;--jw-color-border: #2E2E2C;--jw-color-border-strong: #3E3E3B;--jw-color-brand: #5BA3C2;--jw-color-brand-hover: #7AB8D4;--jw-color-brand-tint: #1A2E38;--jw-color-brand-subtle: #161F24;--jw-color-action: #0A84FF;--jw-color-action-hover: #409CFF;--jw-color-action-tint: #141E30;--jw-color-accent-warm: #D4A853;--jw-color-accent-warm-tint: #2A2418;--jw-color-accent-earth: #B8937F;--jw-color-accent-earth-tint: #2A2220;--jw-color-accent-sand: #D4AE94;--jw-color-accent-sand-tint: #2C2520;--jw-color-success: #5AAD7A;--jw-color-warning: #D4A853;--jw-color-error: #D47A6A;--jw-color-info: #6BA3C7}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{min-height:100%;overflow:hidden;overscroll-behavior:none}body{background:var(--jw-color-background);color:var(--jw-color-text-primary);font-family:Plus Jakarta Sans,Avenir Next,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,select,textarea{font:inherit}.pm-shell{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;gap:var(--jw-spacing-2);padding:calc(var(--jw-spacing-3) + env(safe-area-inset-top,0px)) calc(var(--jw-spacing-4) + env(safe-area-inset-right,0px)) calc(var(--jw-spacing-2) + env(safe-area-inset-bottom,0px)) calc(var(--jw-spacing-4) + env(safe-area-inset-left,0px));overflow:hidden;overscroll-behavior:none;background:var(--jw-color-background);color:var(--jw-color-text-primary);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.pm-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--jw-spacing-3);padding:var(--jw-spacing-1) var(--jw-spacing-1) 0;flex-shrink:0}.pm-title{font-family:Newsreader,Iowan Old Style,Palatino Linotype,serif;font-size:var(--jw-font-size-callout);font-weight:500;font-style:italic;color:var(--jw-color-text-secondary);letter-spacing:var(--jw-tracking-tight);white-space:nowrap}.pm-bar-status{display:flex;gap:var(--jw-spacing-2);align-items:center;justify-self:center}.pm-record-btn{justify-self:end;display:flex;align-items:center;gap:var(--jw-spacing-1);padding:6px 14px;border-radius:var(--jw-radius-full);border:1px solid var(--jw-color-border);background:var(--jw-color-surface);color:var(--jw-color-text-secondary);font-size:var(--jw-font-size-caption-sm);font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color var(--jw-duration-fast),background var(--jw-duration-fast),color var(--jw-duration-fast)}.pm-record-btn:hover{border-color:var(--jw-color-border-strong);background:var(--jw-color-surface-subtle)}.pm-record-btn.is-active{border-color:color-mix(in srgb,var(--jw-color-error) 60%,transparent);background:color-mix(in srgb,var(--jw-color-error) 10%,transparent);color:var(--jw-color-error)}.pm-record-btn svg{flex-shrink:0}.pm-record-btn:not(.is-active):not(.is-disabled) svg{color:var(--jw-color-error)}.pm-record-btn.is-disabled{opacity:var(--jw-opacity-disabled);cursor:not-allowed;pointer-events:none}.pm-pill{display:flex;align-items:center;justify-content:center;gap:var(--jw-spacing-1);width:150px;height:32px;padding:0 14px;border-radius:var(--jw-radius-full);border:1px solid var(--jw-color-border);background:var(--jw-color-surface);color:var(--jw-color-text-tertiary);font-size:var(--jw-font-size-caption);cursor:default;white-space:nowrap}.pm-pill svg{flex-shrink:0;opacity:.6}.pm-pill-mic{cursor:pointer;transition:border-color var(--jw-duration-fast),background var(--jw-duration-fast)}.pm-pill-mic:hover{border-color:var(--jw-color-border-strong);background:var(--jw-color-surface-subtle)}.pm-pill.is-active{border-color:color-mix(in srgb,var(--jw-color-brand) 50%,transparent);background:var(--jw-color-brand-tint)}.pm-pill.is-active svg{opacity:1;color:var(--jw-color-brand)}.pm-pill strong{color:var(--jw-color-text-primary);font-size:var(--jw-font-size-caption);font-weight:600;text-align:center;flex:1}.pm-pill.is-active strong{color:var(--jw-color-brand)}.pm-pill-preview.is-sounding{border-color:color-mix(in srgb,var(--jw-color-brand) 35%,transparent)}.pm-pill-preview.is-sounding .pm-speaker-icon{opacity:1;color:var(--jw-color-brand)}.pm-pill-preview.is-sounding strong{color:var(--jw-color-brand)}.pm-stage{position:relative;flex:1 1 0;min-height:220px;border-radius:var(--jw-radius-xl);overflow:hidden}.pm-canvas{display:block;width:100%;height:100%}.pm-keyboard-panel{display:flex;flex-direction:column;gap:var(--jw-spacing-2);padding:0 0 var(--jw-spacing-2);flex-shrink:0}.pm-keyboard-scroll{overflow-x:auto;overflow-y:visible;padding:0 2px 4px;display:flex;justify-content:center}.pm-keyboard-bottom{display:flex;align-items:center;justify-content:center;position:relative;padding-bottom:var(--jw-spacing-1)}.pm-keyboard-hint{color:var(--jw-color-text-tertiary);font-size:var(--jw-font-size-caption-sm);transition:opacity var(--jw-duration-slow) var(--jw-ease-default)}.pm-keyboard-hint.is-faded{opacity:var(--jw-opacity-25)}.pm-label-toggle{position:absolute;right:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--jw-radius-md);border:1px solid var(--jw-color-border);background:var(--jw-color-surface);color:var(--jw-color-text-tertiary);cursor:pointer;transition:border-color var(--jw-duration-fast),color var(--jw-duration-fast)}.pm-label-toggle:hover{border-color:var(--jw-color-border-strong);color:var(--jw-color-text-secondary)}.pm-keyboard{position:relative;height:148px}.pm-keyboard-white,.pm-keyboard-black{position:absolute;inset:0}.pm-keyboard-black{pointer-events:none}.pm-keyboard-black .pm-key{pointer-events:auto}.pm-key{position:absolute;top:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;border:none;outline:none}.pm-key.is-white{width:42px;height:100%;padding:0 0 8px;border-right:1px solid rgba(12,19,25,.5);border-bottom:1px solid rgba(12,19,25,.4);border-radius:0 0 var(--jw-radius-sm) var(--jw-radius-sm);background:linear-gradient(180deg,#f5f0e3,#e8e4d8 85%,#d5d1c5);color:#0a1217;box-shadow:inset 0 -6px 10px #080e1214}.pm-key.is-white:active{background:linear-gradient(180deg,#ebe6d9,#d8d4c8);box-shadow:inset 0 2px 6px #0000001f}.pm-key.is-white span{font-size:var(--jw-font-size-overline);font-weight:700}.pm-key.is-white small{margin-top:2px;color:#0a121773;font-size:.6rem;font-weight:700}.pm-key.is-black{z-index:2;width:26px;height:70%;padding-bottom:10px;border:none;border-radius:0 0 var(--jw-radius-sm) var(--jw-radius-sm);background:linear-gradient(180deg,#1a1a1e,#0d0e12 80%,#181a1e);color:#f0f4f1e0;box-shadow:0 4px 8px #0006,inset 0 -4px 6px #ffffff0a}.pm-key.is-black:active{background:linear-gradient(180deg,#252528,#111215);box-shadow:0 2px 4px #0000004d}.pm-key.is-black span{font-size:.58rem;font-weight:700}.pm-key.is-black small{margin-top:2px;color:#f0f4f199;font-size:.56rem;font-weight:700}.pm-key.is-active.is-white{background:var(--jw-color-brand);color:var(--jw-color-background);box-shadow:inset 0 -6px 10px #080e121f,0 0 0 2px var(--jw-color-brand)}.pm-key.is-active.is-black{background:var(--jw-color-brand);color:var(--jw-color-background);box-shadow:0 4px 8px #0006,0 0 0 2px var(--jw-color-brand)}@media(max-width:620px){.pm-shell{padding:var(--jw-spacing-2);gap:var(--jw-spacing-2)}.pm-bar{grid-template-columns:1fr 1fr auto;align-items:center;gap:var(--jw-spacing-1) var(--jw-spacing-2)}.pm-title{grid-column:1 / -1}.pm-bar-status{grid-column:1 / 3;justify-self:stretch;display:grid;grid-template-columns:1fr 1fr;gap:var(--jw-spacing-2)}.pm-pill{width:auto;min-width:0;padding:0 var(--jw-spacing-2);justify-content:center}.pm-pill-hz{display:none}.pm-record-btn{grid-column:3;justify-self:end;min-width:116px;justify-content:center}.pm-keyboard-hint{font-size:.68rem}}