@property --status-hue{syntax: "<number>"; initial-value: 200; inherits: false;}@property --button-bg-opacity{syntax: "<number>"; initial-value: 0; inherits: false;}@property --button-border-opacity{syntax: "<number>"; initial-value: .2; inherits: false;}.keyboard-overlay{position:fixed;inset:0;z-index:var(--z-index-keyboard);width:100%;height:100dvh;max-height:100dvh;display:flex;flex-direction:column;padding:var(--space-2);gap:var(--space-3);overflow:hidden;overflow-x:hidden;background:var(--surface-card);box-sizing:border-box;isolation:isolate;container-type:inline-size;container-name:keyboard-main}.keyboard-settings-backdrop{position:fixed;inset:0;z-index:calc(var(--z-index-keyboard) + 10);display:flex;align-items:center;justify-content:center;background-color:#00000080;backdrop-filter:blur(4px);padding:var(--space-4)}.keyboard-settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.keyboard-settings-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-md);background:transparent;border:none;cursor:pointer;color:var(--text-secondary);transition:background-color .2s,color .2s}.keyboard-settings-close:hover{background-color:var(--surface-hover);color:var(--text-primary)}.keyboard-settings-close:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px;transition:outline-offset var(--duration-fast) var(--ease-out)}@starting-style{.keyboard-settings-close:focus-visible{outline-offset:0px}}.keyboard-modal-close-button{position:fixed;top:var(--space-3);right:var(--space-3);z-index:calc(var(--z-index-keyboard) + 1);padding:var(--space-3);min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center;background:var(--surface-card);border:1px solid var(--color-neutral-200);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);box-shadow:var(--shadow-lg)}.keyboard-modal-close-button:hover{background:var(--color-error-alpha-10);color:var(--color-error-600);border-color:var(--color-error-200);transform:scale(1.05);box-shadow:0 0 12px 2px var(--color-error-alpha-20)}.keyboard-modal-close-button:active{transform:scale(.95)}.keyboard-modal-close-button:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px}@container keyboard-main (max-width: 600px){.keyboard-modal-close-button{top:var(--space-2);right:var(--space-2)}}@supports not (container-type: inline-size){@media (max-width: 640px){.keyboard-modal-close-button{top:var(--space-2);right:var(--space-2)}}}.sidebar-aware-expanded .keyboard-modal-close-button,.sidebar-aware-collapsed .keyboard-modal-close-button{right:var(--space-3)}.keyboard-container{width:100%;max-width:100%;height:100%;display:flex;flex-direction:column;gap:var(--space-3);overflow:hidden;overflow-x:hidden;position:relative;box-sizing:border-box}.keyboard-content-wrapper{width:100%;max-width:100%;flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--space-3);overflow:hidden;position:relative;box-sizing:border-box}@supports not (height: 100dvh){.keyboard-container{height:calc(100vh - env(safe-area-inset-bottom));max-height:calc(100vh - env(safe-area-inset-bottom))}}@container keyboard-main (min-width: 850px){.keyboard-container{padding:var(--space-3);gap:var(--space-4)}}@container keyboard-main (min-width: 680px) and (max-width: 900px){.keyboard-container{padding:var(--space-1-5)}}@container keyboard-main (max-width: 320px){.keyboard-container{padding:var(--space-1);gap:var(--space-2)}}@container keyboard-main (min-width: 321px) and (max-width: 500px){.keyboard-container{padding:var(--space-1-5);gap:var(--space-2)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-container{padding:var(--space-3);gap:var(--space-4)}}@media (min-width: 768px) and (max-width: 1400px){.keyboard-container{padding:var(--space-1-5)}}@media (max-width: 374px){.keyboard-container{padding:var(--space-1);gap:var(--space-2)}}@media (min-width: 375px) and (max-width: 639px){.keyboard-container{padding:var(--space-1-5);gap:var(--space-2)}}}.skip-to-content{position:absolute;left:-9999px;z-index:999;padding:var(--space-4);background-color:var(--surface-card);color:var(--text-primary);text-decoration:none;border-radius:var(--radius-base)}.skip-to-content:focus{left:var(--space-4);top:var(--space-4)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.celebration-toast{position:fixed;top:var(--space-4);right:var(--space-4);background-color:var(--color-warning-100, #fef3c7);color:var(--color-warning-900, #78350f);padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);font-weight:600;z-index:var(--z-toast, 100);box-shadow:0 4px 12px #00000026;animation:celebration-bounce .6s ease-out}@keyframes celebration-bounce{0%{transform:translateY(-20px) scale(.9);opacity:0}60%{transform:translateY(4px) scale(1.02);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}@media (prefers-reduced-motion: reduce){.celebration-toast{animation:none}}.keyboard-settings-backdrop{position:absolute;inset:0;z-index:var(--z-keyboard-settings, 110);background-color:var(--overlay-light);display:flex;align-items:flex-start;justify-content:flex-end;padding:var(--space-16) var(--space-4);overflow-y:auto;container-type:inline-size;container-name:keyboard-settings}.keyboard-settings-panel{position:relative;background-color:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-2xl);padding:var(--space-6);width:min(28rem,100%);max-height:calc(100vh - 8rem);overflow-y:auto;z-index:inherit;border:1px solid var(--color-neutral-200)}@container keyboard-settings (max-width: 600px){.keyboard-settings-backdrop{align-items:stretch;padding:0}.keyboard-settings-panel{width:100%;max-height:100%;border-radius:var(--radius-lg) var(--radius-lg) 0 0}}@supports not (container-type: inline-size){@media (max-width: 640px){.keyboard-settings-backdrop{align-items:stretch;padding:0}.keyboard-settings-panel{width:100%;max-height:100%;border-radius:var(--radius-lg) var(--radius-lg) 0 0}}}.keyboard-settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-neutral-200)}.keyboard-settings-title{font-size:var(--text-lg);font-weight:var(--font-medium);color:var(--text-primary)}.keyboard-settings-close{padding:var(--space-3);color:var(--text-secondary);background:var(--color-neutral-alpha-5);border:none;border-radius:var(--radius-base);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.keyboard-settings-close:hover{color:var(--text-primary);background:var(--color-neutral-alpha-10)}.keyboard-settings-close:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-base)}.keyboard-close-icon{font-size:1.75rem;line-height:1;font-weight:var(--font-normal);display:inline-block}.keyboard-settings-tabs{display:flex;border-bottom:1px solid var(--color-neutral-200);margin-bottom:var(--space-4)}.keyboard-settings-tab{flex:1;padding:var(--space-3) var(--space-4);font-size:var(--text-sm);font-weight:var(--font-medium);display:flex;align-items:center;justify-content:center;gap:var(--space-2);background:transparent;border:none;color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.keyboard-settings-tab:hover{background-color:var(--surface-background)}.keyboard-settings-tab.active{border-bottom:4px solid var(--color-primary-500);color:var(--color-primary-500);background-color:var(--color-primary-alpha-10)}.keyboard-settings-tab:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px;z-index:1}.keyboard-settings-section{display:flex;flex-direction:column;gap:var(--space-4)}.keyboard-speech-toggle{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-lg);border:1px solid transparent;cursor:pointer;font-weight:var(--font-medium);transition:all var(--duration-fast) var(--ease-out)}.keyboard-speech-toggle.enabled{background-color:var(--color-primary-alpha-10);color:var(--color-primary-600);border-color:var(--color-primary-200)}.keyboard-speech-toggle.enabled:hover{background-color:var(--color-primary-alpha-15)}.keyboard-speech-toggle.disabled{background-color:var(--surface-background);color:var(--text-secondary)}.keyboard-speech-toggle.disabled:hover{background-color:var(--surface-card)}.keyboard-speech-toggle:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px}.keyboard-elevenlabs-option{padding:var(--space-3);background-color:var(--color-primary-alpha-5);border-radius:var(--radius-lg);border:1px solid var(--color-primary-200)}.keyboard-checkbox-label{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.keyboard-checkbox-text{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary)}.keyboard-checkbox-input{width:1rem;height:1rem;cursor:pointer}.keyboard-checkbox-description{font-size:var(--text-xs);color:var(--text-secondary);margin-top:var(--space-1)}.keyboard-input-label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary);display:block;margin-bottom:var(--space-1)}.keyboard-select,.keyboard-input{width:100%;padding:var(--space-2);border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);font-size:var(--text-sm);background-color:var(--surface-card);color:var(--text-primary);transition:border-color var(--duration-fast) var(--ease-out)}.keyboard-select:focus-visible,.keyboard-input:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px;border-color:var(--color-primary-600);box-shadow:0 0 0 4px var(--color-primary-alpha-20)}.keyboard-voice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.keyboard-mode-section{display:flex;flex-direction:column;gap:var(--space-3)}.keyboard-mode-header{font-weight:var(--font-medium);color:var(--text-primary);display:flex;align-items:center;gap:var(--space-2)}.keyboard-mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.keyboard-mode-card{padding:var(--space-3);border:4px solid var(--color-neutral-200);border-radius:var(--radius-lg);background:transparent;cursor:pointer;text-align:left;transition:all var(--duration-normal) var(--ease-out)}.keyboard-mode-card:hover{background-color:var(--surface-background)}.keyboard-mode-card.active{border-color:var(--color-primary-500);background-color:var(--color-primary-alpha-10)}.keyboard-mode-card:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px}.keyboard-mode-card-title{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1)}.keyboard-mode-card-title-text{font-weight:var(--font-medium)}.keyboard-mode-card-description{font-size:var(--text-xs);color:var(--text-secondary)}.keyboard-accessibility-option{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2);border-radius:var(--radius-lg);transition:background-color var(--duration-fast) var(--ease-out)}.keyboard-accessibility-option:hover{background-color:var(--surface-background)}.keyboard-accessibility-option-content{display:flex;align-items:center;gap:var(--space-3)}.keyboard-accessibility-option-text{font-size:var(--text-sm);font-weight:var(--font-medium)}.keyboard-accessibility-option-desc{font-size:var(--text-xs);color:var(--text-secondary)}.keyboard-zoom-control{padding:var(--space-2);border-radius:var(--radius-lg)}.keyboard-zoom-control:hover{background-color:var(--surface-background)}.keyboard-zoom-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}.keyboard-zoom-header-content{display:flex;align-items:center;gap:var(--space-3)}.keyboard-zoom-value{font-size:var(--text-sm);color:var(--text-secondary)}.keyboard-zoom-slider{width:100%;height:.5rem;background-color:var(--color-neutral-200);border-radius:var(--radius-lg);-webkit-appearance:none;appearance:none;cursor:pointer}.keyboard-zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1rem;height:1rem;background-color:var(--color-primary-500);border-radius:50%;cursor:pointer}.keyboard-zoom-slider::-moz-range-thumb{width:1rem;height:1rem;background-color:var(--color-primary-500);border-radius:50%;border:none;cursor:pointer}.keyboard-categories-container{flex-shrink:0;margin-bottom:var(--space-2);border-bottom:1px solid var(--color-neutral-200);container-type:inline-size;container-name:keyboard-categories}@container keyboard-categories (min-width: 850px){.keyboard-categories-container{margin-bottom:var(--space-3)}}.keyboard-categories-scroll{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2);scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}@container keyboard-categories (min-width: 850px){.keyboard-categories-scroll{gap:var(--space-3);padding-bottom:var(--space-3)}}.keyboard-categories-scroll::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}@container keyboard-categories (max-width: 680px){.keyboard-categories-container{position:relative}.keyboard-categories-container:after{content:"";position:absolute;top:0;right:0;bottom:0;width:24px;background:linear-gradient(to right,transparent,var(--surface-card));pointer-events:none;z-index:1}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-categories-container{margin-bottom:var(--space-3)}}@media (min-width: 1024px){.keyboard-categories-scroll{gap:var(--space-3);padding-bottom:var(--space-3)}}@media (max-width: 767px){.keyboard-categories-container{position:relative}.keyboard-categories-container:after{content:"";position:absolute;top:0;right:0;bottom:0;width:24px;background:linear-gradient(to right,transparent,var(--surface-card));pointer-events:none;z-index:1}}}.keyboard-category-tab{padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);white-space:nowrap;background:transparent;border:1px solid transparent;cursor:pointer;font-weight:var(--font-medium);color:var(--text-secondary);transition:all var(--duration-normal) var(--ease-out);opacity:1}@supports (animation-timeline: view(inline)){.keyboard-category-tab:not(:first-child){animation:tab-slide-in linear;animation-timeline:view(inline);animation-range:entry 0% cover 20%}}@keyframes tab-slide-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.keyboard-category-tab{animation:none}.keyboard-categories-scroll{scroll-behavior:auto}}@container keyboard-categories (min-width: 850px){.keyboard-category-tab{padding:var(--space-4) var(--space-8)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-category-tab{padding:var(--space-4) var(--space-8)}}}.keyboard-category-tab:hover{background-color:var(--surface-background);color:var(--text-primary);transform:scale(1.02)}.keyboard-category-tab.active{background-color:var(--color-primary-500);color:var(--color-primary-500);border-color:var(--color-primary-500);transform:scale(1.02);box-shadow:0 2px 8px var(--color-primary-alpha-30)}.keyboard-category-tab:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px;z-index:1;transition:outline-offset var(--duration-fast) var(--ease-out)}@starting-style{.keyboard-category-tab:focus-visible{outline-offset:0px}}.keyboard-category-tab-content{display:flex;align-items:center;gap:var(--space-2)}@container keyboard-categories (min-width: 850px){.keyboard-category-tab-content{gap:var(--space-3)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-category-tab-content{gap:var(--space-3)}}}.keyboard-category-badge{font-size:var(--text-xs);color:var(--text-tertiary)}.keyboard-category-indicator{margin-left:var(--space-1);display:flex;height:.5rem;width:.5rem;position:relative}.keyboard-category-indicator-dot{position:relative;display:inline-flex;border-radius:var(--radius-full);height:.5rem;width:.5rem;background-color:var(--surface-card)}.keyboard-word-panels{position:relative;flex:1;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--color-neutral-300) transparent;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior-y:contain;container-type:inline-size;container-name:keyboard-grid}.keyboard-word-panels::-webkit-scrollbar{width:8px}.keyboard-word-panels::-webkit-scrollbar-track{background:transparent}.keyboard-word-panels::-webkit-scrollbar-thumb{background:var(--color-neutral-300);border-radius:var(--radius-full)}.keyboard-word-panels::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-400)}.keyboard-word-grid{display:grid;gap:var(--space-2);grid-template-columns:repeat(1,1fr);padding-bottom:var(--space-4)}@container keyboard-grid (min-width: 320px){.keyboard-word-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-1-5)}}@container keyboard-grid (min-width: 400px){.keyboard-word-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-2)}}@container keyboard-grid (min-width: 640px){.keyboard-word-grid{gap:var(--space-3);grid-template-columns:repeat(3,1fr)}}@container keyboard-grid (min-width: 850px){.keyboard-word-grid{grid-template-columns:repeat(4,1fr)}}@container keyboard-grid (min-width: 1100px){.keyboard-word-grid{grid-template-columns:repeat(5,1fr)}}@container keyboard-grid (min-width: 1400px){.keyboard-word-grid{grid-template-columns:repeat(6,1fr)}}@supports not (container-type: inline-size){@media (min-width: 640px){.keyboard-word-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.keyboard-word-grid{gap:var(--space-3);grid-template-columns:repeat(3,1fr)}}@media (min-width: 1280px){.keyboard-word-grid{grid-template-columns:repeat(4,1fr)}}@media (min-width: 1536px){.keyboard-word-grid{grid-template-columns:repeat(5,1fr)}}@media (min-width: 1920px){.keyboard-word-grid{grid-template-columns:repeat(6,1fr)}}}.keyboard-word-set-card{display:flex;flex-direction:column;gap:var(--space-2);background-color:var(--color-primary-alpha-3);border-radius:var(--radius-lg);padding:var(--space-2);border:1px solid var(--color-neutral-alpha-50);content-visibility:auto;contain-intrinsic-size:0 200px}@container keyboard-grid (min-width: 850px){.keyboard-word-set-card{padding:var(--space-3)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-word-set-card{padding:var(--space-3)}}}.keyboard-word-set-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}@container keyboard-grid (min-width: 850px){.keyboard-word-set-header{margin-bottom:var(--space-3)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-word-set-header{margin-bottom:var(--space-3)}}}.keyboard-word-set-title{display:flex;align-items:center;gap:var(--space-2);color:var(--text-secondary)}@container keyboard-grid (min-width: 850px){.keyboard-word-set-title{gap:var(--space-3)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-word-set-title{gap:var(--space-3)}}}.keyboard-word-set-name{font-size:var(--text-base);font-weight:var(--font-semibold)}@container keyboard-grid (min-width: 850px){.keyboard-word-set-name{font-size:var(--text-lg)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-word-set-name{font-size:var(--text-lg)}}}.word-button{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-2);min-height:72px;border-radius:var(--radius-lg);box-shadow:0 4px 4px #0000000d;cursor:pointer;border:1px solid transparent;animation:word-fade-in linear;animation-timeline:view();animation-range:entry 10% cover 40%;--status-hue: 220;transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),background-color var(--duration-normal) var(--ease-out),border-color var(--duration-normal) var(--ease-out),--status-hue .5s var(--ease-out)}@keyframes word-fade-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@container keyboard-grid (min-width: 850px){.word-button{gap:var(--space-1-5);padding:var(--space-3);min-height:80px}}@supports not (container-type: inline-size){@media (min-width: 1024px){.word-button{gap:var(--space-1-5);padding:var(--space-3);min-height:80px}}}.word-button:hover{will-change:transform;box-shadow:0 8px 12px #0000001a,0 0 8px #0000000f;transform:translateY(-4px) scale(1.02)}.word-button:active{transform:translateY(0);box-shadow:0 4px 4px #0000000d;animation:pulse-confirm .6s ease-out}.word-button:focus-visible{will-change:transform;outline:4px solid var(--color-primary-500);outline-offset:4px;z-index:1;transition:outline-offset var(--duration-fast) var(--ease-out)}@starting-style{.word-button:focus-visible{outline-offset:0px}}@keyframes pulse-confirm{0%{box-shadow:0 0 8px var(--color-primary-500);transform:scale(1.02) translateY(0)}50%{box-shadow:0 0 12px var(--color-primary-500)}to{box-shadow:0 4px 4px #0000000d;transform:scale(1) translateY(0)}}.word-button.long-press-active{transform:scale(.98)}.long-press-progress{position:absolute;inset:-4px;border-radius:inherit;border:3px solid transparent;border-top-color:var(--color-primary-500);animation:long-press-spin .8s linear forwards;pointer-events:none;z-index:10}@keyframes long-press-spin{0%{transform:rotate(0);border-top-color:var(--color-primary-500)}to{transform:rotate(360deg);border-color:var(--color-primary-500)}}@media (prefers-reduced-motion: reduce){.long-press-progress{animation:none;border-color:var(--color-primary-500);opacity:.5}}.word-button.border-secondary-200{border-color:var(--color-secondary-200)}.word-button.border-neutral-200{border-color:var(--color-neutral-200)}.word-button.word-animated{transform:scale(1.1);transition:transform var(--duration-fast) var(--ease-out)}.word-button.is-speaking{animation:speaking-pulse .6s ease-in-out infinite;box-shadow:0 0 0 4px var(--color-primary-alpha-20);border-color:var(--color-primary-500)}@keyframes speaking-pulse{0%,to{box-shadow:0 0 0 4px var(--color-primary-alpha-20);transform:scale(1)}50%{box-shadow:0 0 0 8px var(--color-primary-alpha-10);transform:scale(1.03)}}@media (prefers-reduced-motion: reduce){.word-button.is-speaking{animation:none;box-shadow:0 0 0 4px var(--color-primary-500)}}.word-button.word-animated.is-speaking{animation:none;box-shadow:0 0 0 4px var(--color-primary-alpha-20)}.word-button.word-recent{background-color:var(--color-secondary-alpha-10);border-color:var(--color-secondary-alpha-20)}.word-button.word-last-used{box-shadow:0 0 0 2px var(--color-secondary)}.word-button:not(.word-recent){background-color:var(--surface-background)}.word-button[data-status=favorite],.word-button.is-favorite{--status-hue: 45;background-color:hsl(var(--status-hue),70%,95%);border-color:hsl(var(--status-hue),60%,70%);box-shadow:0 4px 4px #0000000d,0 0 12px 2px hsla(var(--status-hue),70%,60%,.15)}.word-button[data-status=favorite]:hover,.word-button.is-favorite:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 12px #0000001a,0 0 16px 4px hsla(var(--status-hue),70%,60%,.25)}.word-button[data-status=recent],.word-button.is-recent{--status-hue: 140;background-color:hsl(var(--status-hue),60%,95%);border-color:hsl(var(--status-hue),50%,70%)}.word-button[data-status=suggested],.word-button.is-suggested{--status-hue: 260;background-color:hsl(var(--status-hue),65%,96%);border-color:hsl(var(--status-hue),55%,75%)}@media (prefers-reduced-motion: reduce){.word-button{animation:none;transition:none;--status-hue: 220}}.keyboard-input-display{color:var(--text-primary);font-size:var(--text-2xl);font-weight:var(--font-medium);text-align:center;margin-bottom:var(--space-2);min-height:64px;display:flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-4);border-radius:var(--radius-base);border:1px solid transparent;background:transparent;transition:all var(--duration-normal) var(--ease-out);word-break:break-word;overflow-wrap:break-word}@container keyboard-input (max-width: 420px){.keyboard-input-display{font-size:var(--text-lg);min-height:48px;padding:var(--space-2) var(--space-3)}}@supports not (container-type: inline-size){@media (max-width: 479px){.keyboard-input-display{font-size:var(--text-lg);min-height:48px;padding:var(--space-2) var(--space-3)}}}@container keyboard-input (min-width: 421px) and (max-width: 500px){.keyboard-input-display{font-size:var(--text-xl);min-height:56px}}@supports not (container-type: inline-size){@media (min-width: 480px) and (max-width: 639px){.keyboard-input-display{font-size:var(--text-xl);min-height:56px}}}@container keyboard-input (min-width: 850px){.keyboard-input-display{font-size:var(--text-3xl);margin-bottom:var(--space-3)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-input-display{font-size:var(--text-3xl);margin-bottom:var(--space-3)}}}.keyboard-input-card:has(.keyboard-input-display:empty) .keyboard-input-display{background:var(--color-neutral-alpha-3);border:1px dashed var(--color-neutral-200)}.keyboard-input-display:empty:before{content:attr(data-placeholder);color:var(--text-tertiary);font-weight:var(--font-normal);font-style:italic}.keyboard-input-card:has(.keyboard-input-display:not(:empty)) .keyboard-input-display{background:var(--color-primary-alpha-3);border-color:var(--color-primary-alpha-15)}.keyboard-input-card:has(.keyboard-input-display:not(:empty)){box-shadow:var(--shadow-md),0 0 0 2px var(--color-primary-alpha-10),0 0 20px -4px var(--color-primary-alpha-15);transition:box-shadow var(--duration-normal) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.keyboard-input-card:has(.keyboard-input-display:not(:empty)):hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 0 2px var(--color-primary-alpha-15),0 0 24px -4px var(--color-primary-alpha-20)}.keyboard-mode-badge{position:absolute;top:-8px;right:-8px;padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:var(--font-bold);border-radius:var(--radius-full);line-height:1;letter-spacing:.025em;white-space:nowrap}.keyboard-mode-badge.mode-batch{background-color:var(--color-primary-100);color:var(--color-primary-800);border:1px solid var(--color-primary-200);box-shadow:var(--shadow-xs)}.keyboard-mode-badge.mode-immediate{background-color:var(--color-success-200);color:var(--color-success-700);border:1px solid var(--color-success-300);box-shadow:var(--shadow-xs)}.keyboard-schedule-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);margin-top:var(--space-2);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-primary-700);background-color:var(--color-primary-50);border:1px solid var(--color-primary-200);border-radius:var(--radius-full);line-height:1.2;white-space:nowrap;box-shadow:var(--shadow-xs);transition:all var(--duration-fast) var(--ease-out)}:global(.dark) .keyboard-schedule-badge{color:var(--color-primary-200);background-color:var(--color-primary-900);border-color:var(--color-primary-700)}.keyboard-schedule-badge-icon{font-size:var(--text-sm);line-height:1}.keyboard-schedule-badge-text{display:flex;align-items:center;gap:var(--space-1)}.keyboard-schedule-badge-status{color:var(--color-primary-500);font-weight:var(--font-normal);font-size:var(--text-xs)}:global(.dark) .keyboard-schedule-badge-status{color:var(--color-primary-400)}.keyboard-overlay{--keyboard-current-class: var(--color-primary-500)}.keyboard-add-word-backdrop{position:fixed;inset:0;z-index:calc(var(--z-index-keyboard, 1100) + 50);background-color:var(--overlay-dark);display:flex;align-items:center;justify-content:center}.keyboard-add-word-panel{position:relative;background-color:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-4);width:20rem;max-height:90vh;overflow-y:auto}.keyboard-add-word-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.keyboard-add-word-title{font-size:var(--text-lg);font-weight:var(--font-medium)}.keyboard-add-word-close{color:var(--text-tertiary);background:transparent;border:none;cursor:pointer;transition:color var(--duration-fast) var(--ease-out)}.keyboard-add-word-close:hover{color:var(--text-secondary)}.keyboard-add-word-content{display:flex;flex-direction:column;gap:var(--space-4)}.keyboard-add-word-tabs{display:flex;gap:var(--space-2);border-bottom:1px solid var(--color-neutral-200)}.keyboard-add-word-tab{padding:var(--space-2) var(--space-4);background:transparent;border:none;color:var(--text-secondary);cursor:pointer;border-bottom:4px solid transparent;transition:all var(--duration-fast) var(--ease-out)}.keyboard-add-word-tab.active{border-bottom-color:var(--color-secondary-600);color:var(--color-secondary-600)}.keyboard-add-word-form{display:flex;flex-direction:column;gap:var(--space-4)}.keyboard-form-field{display:flex;flex-direction:column}.keyboard-form-input{width:100%;padding:var(--space-2);border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);background-color:var(--surface-background);color:var(--text-primary)}.keyboard-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--space-1);padding:var(--space-2);border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);background-color:var(--surface-background)}.keyboard-emoji-button{padding:var(--space-2);background:transparent;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out)}.keyboard-emoji-button:hover{background-color:var(--surface-card)}.keyboard-emoji-button:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px}.keyboard-submit-button{width:100%;padding:var(--space-2);background-color:var(--color-secondary-600);color:#fff;border:none;border-radius:var(--radius-lg);font-weight:var(--font-medium);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out)}.keyboard-submit-button:hover:not(:disabled){background-color:var(--color-secondary-700)}.keyboard-submit-button:disabled{opacity:.5;cursor:not-allowed}.keyboard-submit-button:focus-visible{outline:4px solid var(--color-secondary-700);outline-offset:4px}.keyboard-space-y-2>*+*{margin-top:var(--space-2)}@container keyboard-main (min-width: 850px){.keyboard-space-y-2-lg>*+*{margin-top:var(--space-3)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-space-y-2-lg>*+*{margin-top:var(--space-3)}}}@media (prefers-reduced-motion: reduce){.keyboard-container,.keyboard-container *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media (forced-colors: active){.keyboard-settings-tab.active{border-bottom-color:Highlight;color:Highlight;background-color:Canvas}.keyboard-category-tab.active{background-color:Highlight;color:HighlightText;border-color:Highlight}.keyboard-mode-card.active{border-color:Highlight;background-color:Canvas}.keyboard-submit-button{background-color:ButtonFace;color:ButtonText;border:1px solid ButtonBorder}.keyboard-submit-button:hover:not(:disabled){background-color:Highlight;color:HighlightText}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.keyboard-suggestion-skeleton{position:relative;overflow:hidden;background:var(--color-neutral-100);border-radius:var(--radius-lg);height:48px;width:100%;border:1px solid var(--color-neutral-200)}.keyboard-suggestion-skeleton:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 50%,transparent 100%);animation:shimmer 2s infinite ease-in-out .3s;will-change:transform}.keyboard-suggestion-skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 25%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.3) 75%,transparent 100%);animation:shimmer 1.5s infinite ease-in-out;will-change:transform}@media (prefers-reduced-motion: reduce){.keyboard-suggestion-skeleton:before,.keyboard-suggestion-skeleton:after{animation:none;display:none}}.keyboard-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);text-align:center;min-height:280px;background:linear-gradient(135deg,var(--surface-background) 0%,var(--surface-card) 100%);border-radius:var(--radius-xl);border:4px dashed var(--color-neutral-alpha-100);position:relative;overflow:hidden}@container keyboard-main (min-width: 850px){.keyboard-empty-state{min-height:320px;padding:var(--space-12)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-empty-state{min-height:320px;padding:var(--space-12)}}}.keyboard-empty-state:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 50% 50%,var(--color-primary-alpha-5) 0%,transparent 70%);opacity:.5;pointer-events:none}.keyboard-empty-state--compact{min-height:200px;padding:var(--space-6);background:var(--surface-card);border-style:dashed;border-width:1px}@container keyboard-main (min-width: 850px){.keyboard-empty-state--compact{min-height:240px;padding:var(--space-8)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-empty-state--compact{min-height:240px;padding:var(--space-8)}}}.keyboard-empty-illustration{font-size:3.5rem;margin-bottom:var(--space-4);opacity:.7;animation:keyboard-empty-float 3s ease-in-out infinite;filter:drop-shadow(0 4px 8px var(--color-neutral-alpha-50))}@container keyboard-main (min-width: 850px){.keyboard-empty-illustration{font-size:4rem;margin-bottom:var(--space-6)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-empty-illustration{font-size:4rem;margin-bottom:var(--space-6)}}}.keyboard-empty-illustration--compact{font-size:2.5rem;margin-bottom:var(--space-3)}@keyframes keyboard-empty-float{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-4px) rotate(-1deg)}50%{transform:translateY(-8px) rotate(0)}75%{transform:translateY(-4px) rotate(1deg)}}.keyboard-empty-title{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-2);line-height:1.3}@container keyboard-main (min-width: 850px){.keyboard-empty-title{font-size:var(--text-2xl);margin-bottom:var(--space-3)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-empty-title{font-size:var(--text-2xl);margin-bottom:var(--space-3)}}}.keyboard-empty-title--compact{font-size:var(--text-lg);margin-bottom:var(--space-2)}.keyboard-empty-description{font-size:var(--text-base);color:var(--text-secondary);margin-bottom:var(--space-6);max-width:360px;line-height:1.5}@container keyboard-main (min-width: 850px){.keyboard-empty-description{font-size:var(--text-lg);max-width:420px}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-empty-description{font-size:var(--text-lg);max-width:420px}}}.keyboard-empty-description--compact{font-size:var(--text-sm);margin-bottom:var(--space-4);max-width:280px}.keyboard-empty-action{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background-color:var(--color-primary-500);color:#fff;border:none;border-radius:var(--radius-full);font-size:var(--text-base);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);box-shadow:0 4px 12px var(--color-primary-alpha-30)}@container keyboard-main (min-width: 850px){.keyboard-empty-action{padding:var(--space-4) var(--space-8);font-size:var(--text-lg)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-empty-action{padding:var(--space-4) var(--space-8);font-size:var(--text-lg)}}}.keyboard-empty-action:hover{background-color:var(--color-primary-600);transform:translateY(-4px);box-shadow:0 8px 16px var(--color-primary-alpha-40)}.keyboard-empty-action:active{transform:translateY(0);box-shadow:0 4px 8px var(--color-primary-alpha-30)}.keyboard-empty-action:focus-visible{outline:4px solid var(--color-primary-300);outline-offset:4px}.keyboard-empty-action--secondary{background-color:transparent;color:var(--color-primary-600);box-shadow:none;text-decoration:underline;text-underline-offset:4px;padding:var(--space-2) var(--space-4)}.keyboard-empty-action--secondary:hover{background-color:var(--color-primary-alpha-10);transform:none;box-shadow:none;text-decoration-thickness:4px}.keyboard-empty-hint{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--text-tertiary);font-style:italic}@container keyboard-main (min-width: 850px){.keyboard-empty-hint{font-size:var(--text-base);margin-top:var(--space-6)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-empty-hint{font-size:var(--text-base);margin-top:var(--space-6)}}}@keyframes keyboard-empty-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.keyboard-empty-state{animation:keyboard-empty-fade-in .4s var(--ease-out) forwards}@media (prefers-reduced-motion: reduce){.keyboard-empty-state,.keyboard-empty-illustration{animation:none}.keyboard-empty-action:hover{transform:none}}.keyboard-shortcuts-help-button{width:100%;display:flex;align-items:center;padding:var(--space-4);background-color:var(--surface-background);border:4px solid var(--color-primary-200);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);margin-top:var(--space-4)}.keyboard-shortcuts-help-button:hover{background-color:var(--color-primary-alpha-10);border-color:var(--color-primary-400);transform:translateY(-4px);box-shadow:0 4px 8px var(--color-primary-alpha-20)}.keyboard-shortcuts-help-button:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px}.keyboard-shortcut-hint{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);background-color:var(--surface-card);border:1px solid var(--color-neutral-300);border-radius:var(--radius-base);font-family:monospace;font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--text-secondary)}.keyboard-shortcuts-modal{display:flex;flex-direction:column;background-color:var(--surface-card);padding:var(--space-6);max-height:calc(100vh - 64px);overflow-y:auto;container-type:inline-size;container-name:keyboard-shortcuts}@container keyboard-shortcuts (min-width: 680px){.keyboard-shortcuts-modal{padding:var(--space-8)}}.keyboard-shortcuts-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:4px solid var(--color-neutral-200)}.keyboard-shortcuts-title{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--text-primary)}@container keyboard-shortcuts (min-width: 680px){.keyboard-shortcuts-title{font-size:var(--text-2xl)}}.keyboard-shortcuts-close{display:flex;align-items:center;justify-content:center;padding:var(--space-2);background:transparent;border:none;border-radius:var(--radius-base);color:var(--text-tertiary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.keyboard-shortcuts-close:hover{background-color:var(--surface-background);color:var(--text-secondary)}.keyboard-shortcuts-close:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px}.keyboard-shortcuts-content{display:flex;flex-direction:column;gap:var(--space-6)}.keyboard-shortcuts-section{display:flex;flex-direction:column;gap:var(--space-3)}.keyboard-shortcuts-section-title{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-primary-600);margin-bottom:var(--space-2);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-neutral-200)}@container keyboard-shortcuts (min-width: 680px){.keyboard-shortcuts-section-title{font-size:var(--text-lg)}}@supports not (container-type: inline-size){@media (min-width: 768px){.keyboard-shortcuts-modal{padding:var(--space-8)}}@media (min-width: 768px){.keyboard-shortcuts-title{font-size:var(--text-2xl)}}@media (min-width: 768px){.keyboard-shortcuts-section-title{font-size:var(--text-lg)}}}.keyboard-shortcuts-list{display:flex;flex-direction:column;gap:var(--space-3)}.keyboard-shortcut-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3);background-color:var(--surface-background);border-radius:var(--radius-base);transition:background-color var(--duration-fast) var(--ease-out)}.keyboard-shortcut-item:hover{background-color:var(--color-primary-alpha-5)}.keyboard-shortcut-keys{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.keyboard-shortcut-description{flex:1;font-size:var(--text-sm);color:var(--text-secondary);text-align:right}@container keyboard-shortcuts (min-width: 680px){.keyboard-shortcut-description{font-size:var(--text-base)}}@supports not (container-type: inline-size){@media (min-width: 768px){.keyboard-shortcut-description{font-size:var(--text-base)}}}.keyboard-shortcut-key{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:32px;padding:0 var(--space-2);background:linear-gradient(180deg,var(--surface-card) 0%,var(--surface-background) 100%);border:1px solid var(--color-neutral-300);border-bottom-width:4px;border-radius:var(--radius-sm);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-primary);box-shadow:0 4px 4px #0000000d;text-align:center;white-space:nowrap}.keyboard-shortcut-separator{font-size:var(--text-xs);color:var(--text-tertiary);font-style:italic;margin:0 var(--space-1)}.keyboard-shortcut-plus{font-size:var(--text-base);color:var(--text-tertiary);font-weight:var(--font-medium);margin:0 var(--space-1)}.keyboard-shortcuts-note{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background-color:var(--color-primary-alpha-5);border-left:4px solid var(--color-primary-500);border-radius:var(--radius-base);margin-top:var(--space-2)}.keyboard-shortcuts-note-text{flex:1;font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;margin:0}@container keyboard-main (min-width: 720px){.keyboard-shortcuts-note-text{font-size:var(--text-base)}}@supports not (container-type: inline-size){@media (min-width: 768px){.keyboard-shortcuts-note-text{font-size:var(--text-base)}}}@container keyboard-main (max-width: 600px){.keyboard-shortcut-item{flex-direction:column;align-items:flex-start;gap:var(--space-2)}.keyboard-shortcut-description{text-align:left}.keyboard-shortcuts-modal{padding:var(--space-4)}}@supports not (container-type: inline-size){@media (max-width: 640px){.keyboard-shortcut-item{flex-direction:column;align-items:flex-start;gap:var(--space-2)}.keyboard-shortcut-description{text-align:left}.keyboard-shortcuts-modal{padding:var(--space-4)}}}@media (forced-colors: active){.keyboard-shortcut-key{border:1px solid ButtonBorder;background-color:ButtonFace;color:ButtonText}.keyboard-shortcuts-section-title{color:Highlight;border-bottom-color:ButtonBorder}}@media (prefers-reduced-motion: reduce){.keyboard-shortcuts-help-button:hover{transform:none}.keyboard-shortcuts-modal,.keyboard-shortcut-item{transition:none}}.keyboard-form-label{display:block;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary);margin-bottom:var(--space-1)}.keyboard-form-input{width:100%;padding:var(--space-2);border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);font-size:var(--text-sm);background-color:var(--surface-card);color:var(--text-primary);transition:border-color var(--duration-fast) var(--ease-out)}.keyboard-form-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 4px var(--color-primary-alpha-10)}.keyboard-select{width:100%;padding:var(--space-2);border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);font-size:var(--text-sm);background-color:var(--surface-card);color:var(--text-primary);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out)}.keyboard-select:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 4px var(--color-primary-alpha-10)}.keyboard-checkbox{width:1rem;height:1rem;accent-color:var(--color-accent-500);cursor:pointer}.keyboard-range-input{width:100%;height:.5rem;background-color:var(--color-neutral-200);border-radius:var(--radius-lg);appearance:none;accent-color:var(--color-accent-500);cursor:pointer}.keyboard-range-input::-webkit-slider-thumb{appearance:none;width:1rem;height:1rem;background-color:var(--color-accent-500);border-radius:var(--radius-full);cursor:pointer}.keyboard-range-input::-moz-range-thumb{width:1rem;height:1rem;background-color:var(--color-accent-500);border-radius:var(--radius-full);border:none;cursor:pointer}.keyboard-flex-row{display:flex;flex-direction:row;align-items:center}.keyboard-flex-col{display:flex;flex-direction:column}.keyboard-flex-between{display:flex;justify-content:space-between;align-items:center}.keyboard-flex-center{display:flex;justify-content:center;align-items:center}.keyboard-flex-start{display:flex;align-items:flex-start}.keyboard-flex-gap-1{gap:var(--space-1)}.keyboard-flex-gap-2{gap:var(--space-2)}.keyboard-flex-gap-3{gap:var(--space-3)}.keyboard-flex-gap-4{gap:var(--space-4)}.keyboard-grid-2col{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.keyboard-grid-2col-responsive{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3)}.keyboard-grid-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.keyboard-grid-3col-responsive{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-2)}.keyboard-grid-8col{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:var(--space-1)}.keyboard-space-y-3{display:flex;flex-direction:column;gap:var(--space-3)}.keyboard-space-y-6{display:flex;flex-direction:column;gap:var(--space-6)}.keyboard-mb-1{margin-bottom:var(--space-1)}.keyboard-mb-2{margin-bottom:var(--space-2)}.keyboard-mb-3{margin-bottom:var(--space-3)}.keyboard-mt-2{margin-top:var(--space-2)}.keyboard-text-base{font-size:var(--text-base)}.keyboard-text-lg{font-size:var(--text-lg)}.keyboard-text-2xl{font-size:var(--text-2xl)}.keyboard-text-4xl{font-size:var(--text-4xl)}.keyboard-font-medium{font-weight:var(--font-medium)}.keyboard-font-semibold{font-weight:var(--font-semibold)}.keyboard-text-secondary{color:var(--text-secondary)}.keyboard-text-left{text-align:left}.keyboard-text-center{text-align:center}.keyboard-mode-button{padding:var(--space-3);border:2px solid var(--color-neutral-300);border-radius:var(--radius-lg);background-color:transparent;transition:all var(--duration-normal) var(--ease-out);text-align:left;cursor:pointer}.keyboard-mode-button:hover{border-color:var(--color-neutral-400)}.keyboard-mode-button.active{border-color:var(--color-accent-500);background-color:var(--color-accent-alpha-10);color:var(--color-accent-600)}.keyboard-mode-button:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px}.keyboard-interactive-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2);border-radius:var(--radius-lg);transition:background-color var(--duration-fast) var(--ease-out);cursor:pointer}.keyboard-interactive-row:hover{background-color:var(--surface-background)}.keyboard-emoji-sm{font-size:var(--text-xl)}.keyboard-emoji-md{font-size:var(--text-2xl)}.keyboard-emoji-lg{font-size:var(--text-4xl)}@container keyboard-main (min-width: 980px){.keyboard-emoji-sm{font-size:var(--text-2xl)}.keyboard-emoji-md{font-size:var(--text-3xl)}.keyboard-emoji-lg{font-size:calc(var(--text-4xl) * 1.25)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-emoji-sm{font-size:var(--text-2xl)}.keyboard-emoji-md{font-size:var(--text-3xl)}.keyboard-emoji-lg{font-size:calc(var(--text-4xl) * 1.25)}}}.keyboard-rounded-lg{border-radius:var(--radius-lg)}.keyboard-border{border:1px solid var(--color-neutral-300)}.keyboard-border-2{border:2px solid var(--color-neutral-300)}.keyboard-p-2{padding:var(--space-2)}.keyboard-p-3{padding:var(--space-3)}.keyboard-p-4{padding:var(--space-4)}.keyboard-flex-1{flex:1}.keyboard-block{display:block}.keyboard-w-full{width:100%}.keyboard-touch-target{min-width:48px;min-height:48px}.keyboard-mobile-scroll{-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior-y:contain}@container keyboard-main (max-width: 720px){.keyboard-mobile-scroll{max-height:100svh}}@supports not (container-type: inline-size){@media (max-width: 768px){.keyboard-mobile-scroll{max-height:100svh}}}.keyboard-gpu-accelerate{will-change:transform}.keyboard-focus-visible:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-base)}.keyboard-transition-all{transition:all var(--duration-normal) var(--ease-out)}.keyboard-transition-fast{transition:all var(--duration-fast) var(--ease-out)}.keyboard-input-container{flex-shrink:0;display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:100%;min-width:0;overflow:visible;box-sizing:border-box;padding:0 var(--space-2)}.keyboard-input-card{position:relative;background-color:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--color-neutral-200);padding:var(--space-4);width:100%;max-width:100%;box-sizing:border-box;container-type:inline-size;container-name:keyboard-input}@container keyboard-input (min-width: 850px){.keyboard-input-card{padding:var(--space-5)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-input-card{padding:var(--space-5)}}}.keyboard-actions-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--color-neutral-100);width:100%;max-width:100%;min-width:0;gap:var(--space-2);box-sizing:border-box;overflow:hidden}@container keyboard-input (max-width: 420px){.keyboard-actions-bar{gap:var(--space-1);padding-top:var(--space-1);margin-top:var(--space-1)}}@supports not (container-type: inline-size){@media (max-width: 479px){.keyboard-actions-bar{gap:var(--space-1);padding-top:var(--space-1);margin-top:var(--space-1)}}}@container keyboard-input (min-width: 850px){.keyboard-actions-bar{margin-top:var(--space-3);padding-top:var(--space-3)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-actions-bar{margin-top:var(--space-3);padding-top:var(--space-3)}}}.keyboard-actions-left{display:flex;align-items:center;gap:var(--space-2);flex-wrap:nowrap;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none}.keyboard-actions-left::-webkit-scrollbar{display:none}@container keyboard-main (max-width: 439px){.keyboard-actions-left{gap:var(--space-1)}}@supports not (container-type: inline-size){@media (max-width: 479px){.keyboard-actions-left{gap:var(--space-1)}}}@container keyboard-main (min-width: 980px){.keyboard-actions-left{gap:var(--space-3)}}@supports not (container-type: inline-size){@media (min-width: 1024px){.keyboard-actions-left{gap:var(--space-3)}}}.keyboard-actions-right{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;max-width:fit-content}.keyboard-settings-button{padding:var(--space-3);border-radius:var(--radius-lg);background:transparent;border:none;color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center}.keyboard-settings-button:hover{color:var(--text-primary);background:var(--surface-card-hover)}.keyboard-icon-button{padding:var(--space-3);border-radius:var(--radius-lg);background:transparent;border:none;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center}.keyboard-icon-button:disabled{opacity:1;cursor:not-allowed;color:var(--color-neutral-300);background-color:var(--color-neutral-alpha-5)}.keyboard-icon-button.color-secondary{color:var(--text-secondary)}.keyboard-icon-button.color-secondary:hover:not(:disabled){background-color:var(--surface-hover);transform:scale(1.05);transition:all var(--duration-fast) var(--ease-out)}.keyboard-icon-button:active:not(:disabled){transform:scale(.95);transition-duration:50ms}.keyboard-icon-button:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px;transition:outline-offset var(--duration-fast) var(--ease-out)}@starting-style{.keyboard-icon-button:focus-visible{outline-offset:0px}}.keyboard-icon-button.color-tertiary{color:var(--text-tertiary)}.keyboard-icon-button.color-accent{color:var(--color-accent-600)}.keyboard-icon-button.color-accent:hover:not(:disabled){background-color:var(--color-accent-alpha-10);transform:scale(1.05)}.keyboard-icon-button.color-accent:disabled{color:var(--color-accent-300);opacity:.6;cursor:not-allowed;background-color:var(--color-accent-alpha-5)}.keyboard-icon-button.color-error{color:var(--color-error-600);background-color:var(--color-error-alpha-10)}.keyboard-icon-button.is-recording{color:var(--text-on-primary);background:linear-gradient(135deg,var(--color-accent-500) 0%,var(--color-accent-600) 100%);box-shadow:var(--shadow-md),0 0 0 0 var(--color-accent-alpha-30);animation:recording-pulse 1.5s ease-in-out infinite;position:relative}@keyframes recording-pulse{0%,to{box-shadow:var(--shadow-md),0 0 0 0 var(--color-accent-alpha-30)}50%{box-shadow:var(--shadow-lg),0 0 0 8px var(--color-accent-alpha-10)}}.keyboard-icon-button.is-recording:hover{transform:scale(1.05);box-shadow:var(--shadow-lg),0 0 0 4px var(--color-accent-alpha-20)}.recording-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;background-color:var(--color-error-500);border-radius:50%;border:2px solid var(--text-on-primary);animation:blink 1s ease-in-out infinite;z-index:10}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:.3}}.keyboard-icon-button.is-interval-recording{color:var(--text-on-primary);background:linear-gradient(135deg,var(--color-success-500) 0%,var(--color-success-600) 100%);box-shadow:var(--shadow-md),0 0 0 0 var(--color-success-alpha-30);animation:interval-recording-pulse 2s ease-in-out infinite;position:relative}@keyframes interval-recording-pulse{0%,to{box-shadow:var(--shadow-md),0 0 0 0 var(--color-success-alpha-30);transform:scale(1)}50%{box-shadow:var(--shadow-lg),0 0 0 12px var(--color-success-alpha-10);transform:scale(1.02)}}.keyboard-icon-button.is-processing-interval{background:linear-gradient(135deg,var(--color-warning-500) 0%,var(--color-warning-600) 100%);animation:processing-spin 1s linear infinite}@keyframes processing-spin{0%{box-shadow:var(--shadow-md),0 0 0 2px var(--color-warning-alpha-30)}50%{box-shadow:var(--shadow-lg),0 0 0 6px var(--color-warning-alpha-20)}to{box-shadow:var(--shadow-md),0 0 0 2px var(--color-warning-alpha-30)}}.listening-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;background-color:var(--color-success-500);border-radius:50%;border:2px solid var(--text-on-primary);animation:listening-breathe 2s ease-in-out infinite;z-index:10}@keyframes listening-breathe{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}}.recording-timer{position:absolute;bottom:-4px;right:-4px;font-size:.625rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-on-primary);background-color:var(--color-success-600);padding:1px 4px;border-radius:var(--radius-full);min-width:18px;text-align:center;z-index:11;line-height:1.2}.keyboard-speech-toggle-wrapper{display:flex;align-items:center}.keyboard-speech-toggle-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.keyboard-speech-toggle-button{padding:var(--space-3);border-radius:var(--radius-xl);background:var(--color-primary-500);color:var(--text-on-primary);border:2px solid var(--color-primary-600);cursor:pointer;position:relative;box-shadow:var(--shadow-lg);transform:scale(1.05);transition:all var(--duration-slow) var(--ease-out);min-width:52px;min-height:52px;display:flex;align-items:center;justify-content:center}.keyboard-speech-toggle-button.mode-batch{background:var(--color-primary-500);border-color:var(--color-primary-600);box-shadow:0 4px 6px -1px var(--color-primary-alpha-20),0 2px 4px -2px var(--color-primary-alpha-10)}.keyboard-speech-toggle-button.mode-immediate{background:var(--color-success-500);border-color:var(--color-success-600);box-shadow:0 4px 6px -1px var(--color-success-alpha-20),0 2px 4px -2px var(--color-success-alpha-10)}.keyboard-speech-toggle-button:hover{transform:scale(1.1);filter:brightness(1.1)}.keyboard-speech-toggle-button.mode-batch:hover{box-shadow:0 8px 16px -4px var(--color-primary-alpha-30),0 4px 8px -4px var(--color-primary-alpha-20);border-color:var(--color-primary-700)}.keyboard-speech-toggle-button.mode-immediate:hover{box-shadow:0 8px 16px -4px var(--color-success-alpha-30),0 4px 8px -4px var(--color-success-alpha-20);border-color:var(--color-success-700)}.keyboard-speech-toggle-button:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px}.keyboard-speech-mode-label{font-size:var(--text-xs);color:var(--text-primary);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em}.keyboard-mode-selector-wrapper,.keyboard-mode-trigger{position:relative}.keyboard-mode-trigger.mode-words{color:var(--color-success-600)}.keyboard-mode-trigger.mode-sentences{color:var(--color-primary-600)}.mode-badge{position:absolute;bottom:6px;right:6px;width:8px;height:8px;border-radius:var(--radius-full);border:2px solid var(--surface-card, var(--background-color))}.mode-badge.badge-words{background:var(--color-success-500)}.mode-badge.badge-sentences{background:var(--color-primary-500)}.keyboard-mode-popover{position:absolute;bottom:calc(100% + var(--space-2));left:50%;transform:translate(-50%);min-width:200px;background:var(--surface-card, var(--background-color));border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-2);z-index:var(--z-popover, 100);display:flex;flex-direction:column;gap:var(--space-1)}@container keyboard-main (max-width: 439px){.keyboard-mode-popover{position:fixed;bottom:auto;top:50%;left:50%;transform:translate(-50%,-50%);min-width:min(280px,calc(100vw - var(--space-8)));max-width:calc(100vw - var(--space-8))}}@supports not (container-type: inline-size){@media (max-width: 479px){.keyboard-mode-popover{position:fixed;bottom:auto;top:50%;left:50%;transform:translate(-50%,-50%);min-width:min(280px,calc(100vw - var(--space-8)));max-width:calc(100vw - var(--space-8))}}}.mode-option{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid transparent;border-radius:var(--radius-base);background:transparent;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);text-align:left;min-height:56px}.mode-option:hover:not(.active){background:var(--color-neutral-100);border-color:var(--color-neutral-200)}.mode-option.active{background:var(--color-primary-50);border-color:var(--color-primary-200)}.mode-option:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.mode-option-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--text-primary);background:var(--color-neutral-100);border-radius:var(--radius-base);flex-shrink:0}.mode-option.active .mode-option-icon{background:var(--color-primary-100);color:var(--color-primary-700)}.mode-option-text{flex:1;display:flex;flex-direction:column;gap:var(--space-0-5)}.mode-option-label{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-primary)}.mode-option-hint{font-size:var(--text-xs);color:var(--text-secondary)}.mode-check{color:var(--color-primary-600);font-weight:var(--font-bold);font-size:var(--text-lg)}:global(.dark) .keyboard-mode-popover{background:var(--color-neutral-800, var(--background-color));border-color:var(--color-neutral-700)}:global(.dark) .mode-option:hover:not(.active){background:var(--color-neutral-700)}:global(.dark) .mode-option.active{background:var(--color-primary-900);border-color:var(--color-primary-700)}:global(.dark) .mode-option-icon{background:var(--color-neutral-700)}:global(.dark) .mode-option.active .mode-option-icon{background:var(--color-primary-800);color:var(--color-primary-200)}.keyboard-suggestions-container{display:flex;align-items:center;gap:var(--space-2);margin-left:var(--space-2);border-left:1px solid var(--color-neutral-200);padding-left:var(--space-2);min-width:180px;flex:1 1 auto;max-width:100%;overflow:visible}.keyboard-suggestions-scroll{display:flex;gap:var(--space-2);overflow-x:auto;flex:1;min-width:0;scrollbar-width:thin;scrollbar-color:var(--color-primary-300) transparent;padding-bottom:var(--space-1)}.keyboard-suggestions-scroll::-webkit-scrollbar{height:4px}.keyboard-suggestions-scroll::-webkit-scrollbar-thumb{background-color:var(--color-primary-300);border-radius:var(--radius-full)}.keyboard-suggestions-scroll::-webkit-scrollbar-track{background:transparent}.keyboard-suggestion-chip{flex:1 1 auto;min-width:0;padding:var(--space-2) var(--space-3);background-color:var(--color-primary-alpha-10);color:var(--color-primary-700);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);border:1.5px solid var(--color-primary-alpha-20);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;box-shadow:var(--shadow-xs);--index: 0;animation:chip-slide-in var(--duration-fast) var(--ease-out);animation-delay:calc(var(--index) * 80ms);animation-fill-mode:backwards}@keyframes chip-slide-in{0%{opacity:0;transform:translateY(8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (prefers-reduced-motion: reduce){.keyboard-suggestion-chip{animation:none}}.keyboard-suggestion-chip:hover{background-color:var(--color-primary-alpha-15);border-color:var(--color-primary-500);transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-sm),0 0 8px 0 var(--color-primary-alpha-10)}.keyboard-suggestion-chip:active{transform:translateY(0);box-shadow:var(--shadow-xs);background-color:var(--color-primary-500);color:var(--text-on-primary);transition-duration:50ms}@container keyboard-main (max-width: 719px){.keyboard-suggestion-chip{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.keyboard-suggestion-chip:hover{transform:none}.keyboard-suggestion-chip:active{transform:scale(.95)}}@supports not (container-type: inline-size){@media (max-width: 767px){.keyboard-suggestion-chip{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.keyboard-suggestion-chip:hover{transform:none}.keyboard-suggestion-chip:active{transform:scale(.95)}}}.keyboard-suggestion-chip:focus-visible{outline:3px solid var(--color-primary-500);outline-offset:2px}.keyboard-relative{position:relative}.keyboard-ml-1{margin-left:var(--space-1)}.keyboard-ml-2{margin-left:var(--space-2)}.keyboard-flex-shrink-0{flex-shrink:0}.keyboard-overflow-x-auto{overflow-x:auto}.keyboard-min-w-0{min-width:0}.keyboard-border-l{border-left:1px solid var(--color-neutral-200)}.keyboard-pl-2{padding-left:var(--space-2)}.keyboard-settings-panel{padding:var(--space-6)}.keyboard-settings-title{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary);margin:0 0 var(--space-6) 0}.keyboard-settings-tabs{display:flex;gap:var(--space-2);margin-bottom:var(--space-6);border-bottom:2px solid var(--color-neutral-200)}.keyboard-settings-tab{padding:var(--space-3) var(--space-4);background:transparent;border:none;border-bottom:3px solid transparent;font-weight:var(--font-medium);color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.keyboard-settings-tab:hover{color:var(--text-primary);background:var(--color-neutral-alpha-5)}.keyboard-settings-tab.active{color:var(--color-primary-600);border-bottom-color:var(--color-primary-600)}.keyboard-settings-tab:focus-visible{outline:3px solid var(--color-primary-500);outline-offset:2px;z-index:1}.keyboard-settings-content{display:flex;flex-direction:column;gap:var(--space-6)}.keyboard-settings-section{display:flex;flex-direction:column;gap:var(--space-2)}.keyboard-settings-section-title{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary);margin:0}.keyboard-settings-option{display:flex;align-items:center}.keyboard-settings-option label{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;color:var(--text-primary);font-size:var(--text-base)}.keyboard-settings-option input[type=radio]{width:20px;height:20px;cursor:pointer}.keyboard-settings-select{padding:var(--space-2) var(--space-3);border-radius:var(--radius-base);border:1px solid var(--color-neutral-300);background:var(--surface-background);color:var(--text-primary);font-size:var(--text-base);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.keyboard-settings-select:hover{border-color:var(--color-primary-500)}.keyboard-settings-select:focus{outline:2px solid var(--color-primary-500);outline-offset:2px;border-color:var(--color-primary-500)}.keyboard-settings-slider{width:100%;height:6px;border-radius:var(--radius-full);background:var(--color-neutral-200);outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}.keyboard-settings-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-primary-600);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.keyboard-settings-slider::-webkit-slider-thumb:hover{transform:scale(1.2);background:var(--color-primary-700)}.keyboard-settings-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-primary-600);cursor:pointer;border:none;transition:all var(--duration-fast) var(--ease-out)}.keyboard-settings-slider::-moz-range-thumb:hover{transform:scale(1.2);background:var(--color-primary-700)}.keyboard-settings-test-button{padding:var(--space-3) var(--space-6);background:var(--color-primary-600);color:var(--color-primary-500);border:none;border-radius:var(--radius-base);font-size:var(--text-base);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.keyboard-settings-test-button:hover{background:var(--color-primary-700);transform:translateY(-1px);box-shadow:var(--shadow-md)}.keyboard-settings-test-button:active{transform:translateY(0)}.keyboard-settings-placeholder{color:var(--text-secondary);text-align:center;padding:var(--space-8);font-size:var(--text-lg)}.keyboard-tone-settings{display:flex;flex-direction:column;gap:var(--space-4);max-height:60vh;overflow-y:auto}.keyboard-tone-header{text-align:center}.keyboard-tone-description{color:var(--text-secondary);font-size:var(--text-sm);margin-top:var(--space-2);margin-bottom:0}.keyboard-persona-switcher{margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-color-muted)}.keyboard-tone-presets{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}.keyboard-tone-preset{padding:var(--space-3);border:1px solid var(--border-color-default);border-radius:var(--radius-md);background:var(--surface-card);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);display:flex;flex-direction:column;gap:var(--space-1);text-align:left}.keyboard-tone-preset:hover{border-color:var(--color-primary-400);background:color-mix(in oklch,var(--color-primary-500) 5%,var(--surface-card))}.keyboard-tone-preset.active{border-color:var(--color-primary-500);background:color-mix(in oklch,var(--color-primary-500) 10%,var(--surface-card));box-shadow:0 0 0 1px var(--color-primary-500)}.keyboard-tone-preset .preset-name{font-weight:var(--font-semibold);color:var(--text-primary);font-size:var(--text-sm)}.keyboard-tone-preset .preset-desc{font-size:var(--text-xs);color:var(--text-secondary);line-height:1.3}.keyboard-tone-preset-wrapper{position:relative}.keyboard-tone-preset.custom-preset{padding-right:var(--space-8)}.keyboard-tone-preset-wrapper .preset-delete-btn{position:absolute;top:var(--space-2);right:var(--space-2);width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--surface-overlay);color:var(--text-secondary);border:1px solid var(--border-color-default);font-size:18px;line-height:1;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);opacity:0;z-index:1}.keyboard-tone-preset-wrapper:hover .preset-delete-btn{opacity:1}.keyboard-tone-preset-wrapper .preset-delete-btn:hover{background:var(--color-error-500);color:#fff;border-color:var(--color-error-600)}.keyboard-tone-section{margin-bottom:var(--space-4)}.keyboard-tone-section-subtitle{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-secondary);margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:.05em}.keyboard-tone-canvas-section{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-4);background:var(--surface-background);border-radius:var(--radius-lg);border:1px solid var(--border-color-default)}.keyboard-tone-save-btn{width:100%;padding:var(--space-3) var(--space-4);background:var(--gradient-primary);color:var(--color-primary-500);border:none;border-radius:var(--radius-md);font-weight:var(--font-semibold);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);box-shadow:var(--shadow-sm)}.keyboard-tone-save-btn:hover:not(:disabled){background:var(--gradient-primary);filter:brightness(.9);transform:translateY(-2px);box-shadow:var(--shadow-md)}.keyboard-tone-save-btn:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-xs)}.keyboard-tone-save-btn:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px;transition:outline-offset var(--duration-fast) var(--ease-out)}@starting-style{.keyboard-tone-save-btn:focus-visible{outline-offset:0px}}.keyboard-tone-save-btn:disabled{opacity:.4;cursor:not-allowed}.keyboard-tone-canvas-wrapper{display:flex;justify-content:center;align-items:center}.keyboard-tone-summary{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-4);background:var(--color-neutral-alpha-5);border-radius:var(--radius-md);text-align:center;width:100%}.keyboard-tone-summary .tone-summary-label{font-size:var(--text-sm);color:var(--text-secondary)}.keyboard-tone-summary .tone-summary-value{font-size:var(--text-sm);color:var(--text-primary);font-weight:var(--font-medium);line-height:1.4}@media (width < 480px){.keyboard-tone-presets{grid-template-columns:1fr}.keyboard-tone-canvas-wrapper{padding:var(--space-1)}}.keyboard-tone-ai-section{display:flex;gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap;align-items:center}.keyboard-tone-custom-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:linear-gradient(135deg,var(--color-primary-500),var(--color-accent-500, #8b5cf6));color:var(--color-primary-500);border:none;border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);box-shadow:var(--shadow-sm)}.keyboard-tone-custom-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md);filter:brightness(1.05)}.keyboard-tone-custom-btn:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-xs)}.keyboard-tone-custom-btn:focus-visible{outline:3px solid var(--color-primary-300);outline-offset:2px}.keyboard-tone-custom-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.keyboard-tone-reset-btn{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:var(--color-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);font-size:var(--text-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.keyboard-tone-reset-btn:hover{background:var(--color-surface-hover);color:var(--color-text-primary);border-color:var(--color-border-strong)}.keyboard-tone-reset-btn:focus-visible{outline:3px solid var(--color-primary-300);outline-offset:2px}.keyboard-tone-custom-badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);background:linear-gradient(135deg,var(--color-success-alpha-15, rgba(34, 197, 94, .15)),var(--color-success-alpha-10, rgba(34, 197, 94, .1)));color:var(--color-success-600, #16a34a);border:1px solid var(--color-success-alpha-30, rgba(34, 197, 94, .3));border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium);white-space:nowrap}.loading-spinner{width:16px;height:16px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.keyboard-tone-section-hint{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-bottom:var(--space-2);margin-top:0}.keyboard-persona-save-row{display:flex;gap:var(--space-2);margin-top:var(--space-2)}.keyboard-persona-name-input{flex:1;padding:var(--space-2) var(--space-3);background:var(--color-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);font-size:var(--text-sm);color:var(--color-text-primary);transition:all var(--duration-fast) var(--ease-out);min-width:0}.keyboard-persona-name-input::placeholder{color:var(--color-text-tertiary)}.keyboard-persona-name-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-alpha-10)}.keyboard-persona-save-btn{padding:var(--space-2) var(--space-4);background:var(--color-primary-500);color:var(--color-primary-500);border:none;border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap;box-shadow:var(--shadow-sm)}.keyboard-persona-save-btn:hover:not(:disabled){background:var(--color-primary-600);transform:translateY(-1px);box-shadow:var(--shadow-md)}.keyboard-persona-save-btn:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-xs)}.keyboard-persona-save-btn:focus-visible{outline:3px solid var(--color-primary-300);outline-offset:2px}.keyboard-persona-save-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.keyboard-tone-section .persona-selector{padding:var(--space-2);background:transparent;border:none}.keyboard-tone-section .persona-selector h3{display:none}.keyboard-tone-section .persona-selector .grid{display:flex;flex-direction:column;gap:var(--space-2)}.keyboard-tone-section .persona-selector button{display:flex;flex-direction:column;align-items:flex-start;padding:var(--space-2) var(--space-3);background:var(--color-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);text-align:left;cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.keyboard-tone-section .persona-selector button:hover{background:var(--color-surface-hover);border-color:var(--color-primary-alpha-30)}.keyboard-tone-section .persona-selector button:focus-visible{outline:3px solid var(--color-primary-300);outline-offset:2px}.keyboard-tone-section .persona-selector .font-medium{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-primary)}.keyboard-tone-section .persona-selector .text-tertiary{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-top:var(--space-1)}@media (width < 480px){.keyboard-persona-save-row{flex-direction:column}.keyboard-persona-save-btn{width:100%}.keyboard-tone-ai-section{flex-direction:column}.keyboard-tone-custom-btn,.keyboard-tone-reset-btn,.keyboard-tone-custom-badge{width:100%;justify-content:center;text-align:center}}@media (orientation: landscape) and (max-height: 500px){.keyboard-categories-container{padding:var(--space-1);margin-bottom:var(--space-1)}.keyboard-category-tab{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.keyboard-input-card{padding:var(--space-2)}.keyboard-input-display{padding:var(--space-2);min-height:2.5rem}.keyboard-actions-bar{margin-top:var(--space-1);padding-top:var(--space-1)}.word-button{padding:var(--space-2) var(--space-3)}}@media (max-width: 640px){.keyboard-input-display{max-height:6rem;overflow-y:auto}.keyboard-input-display{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--color-neutral-300) transparent}}.keyboard-word-set-card--class{position:relative;background:linear-gradient(135deg,var(--color-primary-alpha-5) 0%,var(--color-primary-alpha-3) 100%);border:2px solid var(--color-primary-400);box-shadow:0 0 0 1px var(--color-primary-alpha-20),0 4px 12px var(--color-primary-alpha-10)}.keyboard-word-set-card--class.is-in-class{animation:class-glow 3s ease-in-out infinite}@keyframes class-glow{0%,to{box-shadow:0 0 0 1px var(--color-primary-alpha-20),0 4px 12px var(--color-primary-alpha-10)}50%{box-shadow:0 0 0 2px var(--color-primary-alpha-40),0 4px 16px var(--color-primary-alpha-20)}}.keyboard-class-status-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);background:var(--color-primary-500);color:#fff;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium);white-space:nowrap;margin-left:var(--space-2)}.keyboard-class-status-badge--upcoming{background:var(--color-secondary-500)}.keyboard-class-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.keyboard-class-status-dot--active{animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.7}}.keyboard-class-loading{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);color:var(--text-tertiary);font-size:var(--text-sm)}.keyboard-class-loading-spinner{width:16px;height:16px;border:2px solid var(--color-primary-200);border-top-color:var(--color-primary-500);border-radius:50%;animation:spin 1s linear infinite}@container keyboard-grid (min-width: 640px){.keyboard-word-set-card--class{grid-column:1 / -1}.keyboard-word-set-card--class .keyboard-word-grid{grid-template-columns:repeat(4,1fr)}}@container keyboard-grid (min-width: 850px){.keyboard-word-set-card--class .keyboard-word-grid{grid-template-columns:repeat(5,1fr)}}@container keyboard-grid (min-width: 1100px){.keyboard-word-set-card--class .keyboard-word-grid{grid-template-columns:repeat(6,1fr)}}@container keyboard-grid (max-width: 639px){.keyboard-word-set-card--class{grid-column:span 1}}@supports not (container-type: inline-size){@media (min-width: 640px){.keyboard-word-set-card--class{grid-column:1 / -1}.keyboard-word-set-card--class .keyboard-word-grid{grid-template-columns:repeat(4,1fr)}}@media (min-width: 1024px){.keyboard-word-set-card--class .keyboard-word-grid{grid-template-columns:repeat(5,1fr)}}@media (min-width: 1280px){.keyboard-word-set-card--class .keyboard-word-grid{grid-template-columns:repeat(6,1fr)}}}:global(.dark) .keyboard-word-set-card--class{background:linear-gradient(135deg,var(--color-primary-alpha-8) 0%,var(--color-primary-alpha-5) 100%);border-color:var(--color-primary-500)}@media (prefers-reduced-motion: reduce){.keyboard-word-set-card--class.is-in-class,.keyboard-class-status-dot--active,.keyboard-class-loading-spinner{animation:none}.keyboard-word-set-card--class.is-in-class{box-shadow:0 0 0 2px var(--color-primary-400),0 4px 16px var(--color-primary-alpha-20)}}@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px){.keyboard-v2{max-height:100vh;overflow-y:auto}.keyboard-v2 .zones-container{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:var(--spacing-sm, .5rem)}.keyboard-v2 .core-section{grid-column:1 / 2;grid-row:1 / 2}.keyboard-v2 .my-words-section{grid-column:2 / 3;grid-row:1 / 2}.keyboard-v2 .predictions-section{grid-column:1 / -1;grid-row:2 / 3}.keyboard-v2 .core-word,.keyboard-v2 .prediction-word,.keyboard-v2 .my-word{min-height:48px;padding:var(--spacing-xs, .25rem)}}@media (orientation: landscape) and (max-height: 500px){.keyboard-v2{padding:var(--spacing-xs, .25rem);gap:var(--spacing-xs, .25rem)}.keyboard-v2 .keyboard-header{padding:var(--spacing-xs, .25rem) 0}.keyboard-v2 .core-word,.keyboard-v2 .prediction-word,.keyboard-v2 .my-word{min-height:44px;padding:var(--spacing-2xs, .125rem) var(--spacing-xs, .25rem)}.keyboard-v2 .emoji{font-size:1rem}.keyboard-v2 .zone-label{font-size:var(--font-size-2xs, .625rem);margin-bottom:var(--spacing-2xs, .125rem)}}@media (min-width: 1200px) and (min-height: 700px){.keyboard-v2 .zones-container{grid-template-columns:1fr 1fr 2fr;grid-template-rows:auto}.keyboard-v2 .core-section{grid-column:1 / 2;grid-row:1 / 2}.keyboard-v2 .my-words-section{grid-column:2 / 3;grid-row:1 / 2}.keyboard-v2 .predictions-section{grid-column:3 / 4;grid-row:1 / 2}}.keyboard-icon-xs{width:12px;height:12px;flex-shrink:0}.keyboard-icon-sm{width:16px;height:16px;flex-shrink:0}.keyboard-icon-md{width:20px;height:20px;flex-shrink:0}.keyboard-icon-lg{width:24px;height:24px;flex-shrink:0}.keyboard-icon-xl{width:48px;height:48px;flex-shrink:0}.keyboard-icon-2xl{width:64px;height:64px;flex-shrink:0}.keyboard-hover-text-primary:hover{color:var(--text-primary)}.keyboard-hover-text-secondary:hover{color:var(--text-secondary)}.keyboard-hover-opacity-80:hover{opacity:.8}.keyboard-hover-opacity-90:hover{opacity:.9}.keyboard-hover-scale-110:hover{transform:scale(1.1)}.keyboard-transition-colors{transition:color .15s ease,background-color .15s ease,border-color .15s ease}.keyboard-transition-transform{transition:transform .15s ease}.keyboard-transition-opacity{transition:opacity .15s ease}.keyboard-transition-all{transition:all .15s ease}.keyboard-flex-center{display:flex;align-items:center;justify-content:center}.keyboard-flex-between{display:flex;align-items:center;justify-content:space-between}.keyboard-chat-send-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background-color:var(--color-accent, var(--theme-accent-color));color:var(--text-on-secondary);border-radius:var(--radius-lg);border:none;cursor:pointer;transition:background-color .15s ease}.keyboard-chat-send-btn:hover{opacity:.9}.keyboard-suggestion-dismiss{color:var(--text-secondary);flex-shrink:0;background:none;border:none;cursor:pointer;transition:color .15s ease}.keyboard-suggestion-dismiss:hover{color:var(--text-primary)}.keyboard-more-suggestions{font-size:var(--text-xs);color:var(--text-secondary);flex-shrink:0;padding:var(--space-1) var(--space-2);background:none;border:none;cursor:pointer;transition:color .15s ease}.keyboard-more-suggestions:hover{color:var(--text-primary)}.keyboard-processing-indicator{display:flex;align-items:center;gap:var(--space-2);margin-left:var(--space-2);padding-left:var(--space-2);border-left:1px solid var(--color-neutral-200);flex-shrink:0}.keyboard-gamification-badge{display:flex;align-items:center;gap:var(--space-2);margin-right:var(--space-2);padding:var(--space-1) var(--space-2);background-color:var(--surface-elevated);border:1px solid var(--color-neutral-alpha-50);border-radius:var(--radius-full)}.keyboard-gamification-circle{position:relative;width:24px;height:24px}.keyboard-gamification-circle svg{width:24px;height:24px;transform:rotate(-90deg)}.keyboard-gamification-dismiss{margin-left:var(--space-1);color:var(--text-tertiary);background:none;border:none;cursor:pointer;transition:color .15s ease}.keyboard-gamification-dismiss:hover{color:var(--text-secondary)}.keyboard-mode-indicator{display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--text-xs);color:var(--text-tertiary)}.keyboard-confirm-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);background-color:#0000004d}.keyboard-confirm-card{background-color:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-width:28rem;width:100%;border:1px solid var(--border-color)}.keyboard-confirm-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;margin:0 auto;background-color:color-mix(in oklch,var(--color-accent) 10%,transparent);border-radius:var(--radius-full)}.keyboard-confirm-btn-primary{flex:1;padding:var(--space-2) var(--space-4);background-color:var(--color-accent, var(--theme-accent-color));color:var(--text-on-accent);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:opacity .15s ease}.keyboard-confirm-btn-primary:hover{opacity:.9}.keyboard-confirm-btn-secondary{flex:1;padding:var(--space-2) var(--space-4);background-color:transparent;color:var(--text-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);cursor:pointer;transition:background-color .15s ease}.keyboard-confirm-btn-secondary:hover{background-color:var(--surface-hover)}.keyboard-form-label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--text-primary);margin-bottom:var(--space-1)}.keyboard-form-input{width:100%;padding:var(--space-2) var(--space-3);background-color:var(--surface-background);border:1px solid var(--surface-border);border-radius:var(--radius-lg);color:var(--text-primary);font-size:var(--text-sm)}.keyboard-form-input:focus{outline:2px solid var(--color-primary-500);outline-offset:2px}.keyboard-text-xs{font-size:var(--text-xs)}.keyboard-text-sm{font-size:var(--text-sm)}