@layer components{@property --trail-intensity{syntax:"<number>";inherits:false;initial-value:0}@property --drag-progress{syntax:"<percentage>";inherits:false;initial-value:0%}@property --button-glow{syntax:"<number>";inherits:false;initial-value:0}:root{--z-base:0;--z-edit-button:40;--z-interaction-hint:48;--z-preset-overlay:56;--z-preset-star:64;--z-fab-toolbar:800;--z-side-panel:850;--z-modal:900;--z-toast:950;--tone-formal:var(--color-primary-500);--tone-casual:#8b5cf6;--tone-technical:#ec4899;--tone-playful:var(--color-success);--tone-empathetic:var(--color-warning)}.tone-keyboard-container{isolation:isolate;width:100%;height:100%;position:relative;overflow:hidden}.persona-keyboard-wrapper{width:100%;max-width:56rem;padding:var(--space-2,.5rem) var(--space-4,1rem) var(--space-8,2rem);margin:0 auto;position:relative;container:tone-keyboard/inline-size}@media (width>=1024px){.persona-keyboard-wrapper{max-width:90rem;padding:var(--space-4,1rem) var(--space-6,1.5rem) var(--space-12,3rem)}}@supports (container-type:inline-size){@container tone-keyboard (width>=980px){.persona-keyboard-wrapper{max-width:90rem;padding:var(--space-4,1rem) var(--space-6,1.5rem) var(--space-12,3rem)}}}.persona-content-grid{gap:var(--space-6,1.5rem);background:var(--color-background);border-radius:var(--radius-xl);padding:var(--space-6,1.5rem);flex-direction:column;display:flex;position:relative;overflow:visible}.persona-keyboard-wrapper:has(.fab-toolbar) .persona-content-grid{padding-bottom:6.5rem}@media (width<=640px){.persona-content-grid{gap:var(--space-4,1rem);padding:var(--space-4,1rem)}.persona-keyboard-wrapper:has(.fab-toolbar) .persona-content-grid{padding-bottom:10rem}}@supports (container-type:inline-size){@container tone-keyboard (width<=600px){.persona-content-grid{gap:var(--space-4,1rem);padding:var(--space-4,1rem)}.persona-keyboard-wrapper:has(.fab-toolbar) .persona-content-grid{padding-bottom:10rem}}}@media (width>=1024px){.persona-content-grid{gap:var(--space-8,2rem);padding:var(--space-8,2rem);grid-template-columns:minmax(400px,1fr) minmax(400px,1.2fr);display:grid}}@supports (container-type:inline-size){@container tone-keyboard (width>=980px){.persona-content-grid{gap:var(--space-8,2rem);padding:var(--space-8,2rem);grid-template-columns:minmax(400px,1fr) minmax(400px,1.2fr);display:grid}}}.tone-context-banner{align-items:flex-start;gap:var(--space-2,.5rem);padding:.625rem var(--space-3,.75rem);background:var(--color-primary-alpha-10,#6366f114);border-radius:var(--radius-lg,.75rem);border:1px solid var(--color-primary-alpha-20,var(--color-accent-alpha-15));display:flex}.tone-context-icon{color:var(--color-primary,#6366f1);margin-top:var(--space-0-5,.125rem);flex-shrink:0}.tone-context-text{font-size:var(--text-xs,.75rem);color:var(--color-text-secondary);margin:0;line-height:1.5}.pentagon-section{gap:var(--space-4,1rem);flex-direction:column;width:100%;display:flex;position:relative}.pentagon-header-row{justify-content:flex-end;align-items:center;gap:var(--space-2,.5rem);width:100%;min-height:2.5rem;padding:0 var(--space-2,.5rem);display:flex;position:relative}.pentagon-onboarding-tooltip{width:100%;margin-top:var(--space-2,.5rem);pointer-events:none;flex-direction:column;justify-content:flex-start;align-items:center;animation:1s ease-in-out 5 tooltipBounce;display:flex}.pentagon-onboarding-tooltip .tooltip-arrow{border-left:8px solid #0000;border-right:8px solid #0000;border-bottom:8px solid var(--color-primary);width:0;height:0;margin-bottom:-1px}.pentagon-onboarding-tooltip .tooltip-content{background:var(--color-primary);color:var(--color-text-on-primary,white);padding:var(--space-2,.5rem) var(--space-4,1rem);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:var(--font-medium);text-align:center;box-shadow:var(--shadow-lg);white-space:nowrap}@keyframes tooltipBounce{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}.tone-svg-container{aspect-ratio:1;contain-intrinsic-size:31rem 31rem;width:100%;max-width:31rem;margin:0 auto;position:relative}.pentagon-container{user-select:none;touch-action:none;outline:2px solid #0000;width:100%;height:100%;position:relative}.pentagon-container:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-md)}.pentagon-container [class*=cursor-grab]{cursor:grab}.pentagon-container [class*=cursor-grab]:active{cursor:grabbing}.pentagon-action-buttons{z-index:var(--z-edit-button);gap:var(--space-2,.5rem);flex:none;display:flex}.edit-mode-button{padding:var(--space-2,.5rem);background:var(--color-surface);color:var(--color-text-secondary);border-radius:var(--radius-lg);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);align-items:center;gap:var(--space-2,.5rem);font-size:var(--text-xs);border:none;display:flex}.edit-mode-button:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.edit-mode-button[aria-pressed=true]{background:var(--color-accent-light);color:var(--color-accent)}@media (width>=640px){.edit-mode-button{font-size:var(--text-sm)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.edit-mode-button{font-size:var(--text-sm)}}}.custom-tones-button{padding:var(--space-2,.5rem) var(--space-3,.75rem);background:var(--color-primary);min-height:44px;color:var(--color-text-inverse);border-radius:var(--radius-lg);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);align-items:center;gap:var(--space-2,.5rem);font-size:var(--text-xs);font-weight:var(--font-medium);box-shadow:var(--shadow-sm);border:none;display:flex}@media (hover:hover){.custom-tones-button:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}}.custom-tones-button:active:not(:disabled){box-shadow:var(--shadow-sm);transform:translateY(0)}.custom-tones-button:disabled{opacity:.7;cursor:not-allowed}.custom-tones-button.custom-tones-loading{background:var(--color-primary-hover)}@media (width>=640px){.custom-tones-button{padding:var(--space-2,.5rem) var(--space-4,1rem);font-size:var(--text-sm)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.custom-tones-button{padding:var(--space-2,.5rem) var(--space-4,1rem);font-size:var(--text-sm)}}}.pentagon-container circle[class*=cursor-grab]{will-change:transform, opacity;transform:translateZ(0)}.tone-svg-loading-overlay{background:color-mix(in oklch, var(--color-surface) 80%, transparent);backdrop-filter:blur(2px);border-radius:var(--radius-xl);justify-content:center;align-items:center;gap:var(--space-3,.75rem);z-index:100;animation:fadeIn .2s var(--ease-out);flex-direction:column;display:flex;position:absolute;inset:0}.tone-svg-loading-spinner{width:3rem;height:3rem;color:var(--color-primary);animation:1s linear infinite spin}.tone-svg-loading-text{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary)}.shortcuts-modal-overlay{background:color-mix(in oklch, var(--color-surface-dark) 60%, transparent);backdrop-filter:blur(4px);z-index:1000;padding:var(--space-4,1rem);opacity:1;transition:opacity var(--duration-normal) var(--ease-out), display var(--duration-normal) allow-discrete, overlay var(--duration-normal) allow-discrete;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.shortcuts-modal-overlay:not(.visible){opacity:0;display:none}@starting-style{.shortcuts-modal-overlay.visible{opacity:0}}@supports not (transition-behavior:allow-discrete){.shortcuts-modal-overlay{animation:fadeIn .2s var(--ease-out)}}.shortcuts-panel{background:var(--color-surface);border-radius:var(--radius-2xl);box-shadow:var(--shadow-2xl);opacity:1;width:100%;max-width:40rem;max-height:80vh;transition:transform var(--duration-normal) cubic-bezier(.16, 1, .3, 1), opacity var(--duration-normal) var(--ease-out);overflow-y:auto;transform:translateY(0)}@starting-style{.shortcuts-modal-overlay.visible .shortcuts-panel{opacity:0;transform:translateY(2rem)}}@supports not (transition-behavior:allow-discrete){.shortcuts-panel{animation:.3s cubic-bezier(.16,1,.3,1) slideInFromBottom}}.shortcuts-header{padding:var(--space-6,1.5rem);border-bottom:1px solid var(--color-border-default);background:var(--color-surface);z-index:10;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.shortcuts-title{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-text-primary);align-items:center;gap:var(--space-2,.5rem);display:flex}.shortcuts-close-button{padding:var(--space-2,.5rem);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);color:var(--color-text-tertiary);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.shortcuts-close-button:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.shortcuts-close-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.shortcuts-content{padding:var(--space-6,1.5rem)}.shortcuts-section{margin-bottom:var(--space-8,2rem)}.shortcuts-section:last-child{margin-bottom:0}.shortcuts-section-title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-4,1rem)}.shortcuts-list{gap:var(--space-3,.75rem);flex-direction:column;display:flex}.shortcut-item{justify-content:space-between;align-items:center;gap:var(--space-4,1rem);display:flex}.shortcut-description{font-size:var(--text-sm);color:var(--color-text-primary);flex:1}.shortcut-keys{align-items:center;gap:var(--space-1,.25rem);flex-shrink:0;display:flex}.shortcut-key{min-width:2rem;padding:var(--space-1,.25rem) var(--space-2,.5rem);font-size:var(--text-xs);font-weight:var(--font-medium);font-family:var(--font-mono,"Courier New", monospace);color:var(--color-text-primary);background:var(--color-surface-hover);border:1px solid var(--color-border-default);border-radius:var(--radius-sm);box-shadow:0 1px 2px color-mix(in oklch, var(--color-surface-dark) 10%, transparent);justify-content:center;align-items:center;display:inline-flex}.shortcut-plus{font-size:var(--text-xs);color:var(--color-text-tertiary);font-weight:var(--font-medium)}.shortcuts-footer{padding:var(--space-4,1rem) var(--space-6,1.5rem);border-top:1px solid var(--color-border-default);background:color-mix(in oklch, var(--color-surface) 95%, var(--color-surface-hover));text-align:center;font-size:var(--text-xs);color:var(--color-text-tertiary)}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (width<=640px){.shortcuts-panel{border-radius:var(--radius-xl) var(--radius-xl) 0 0;max-height:90vh}.shortcuts-header,.shortcuts-content{padding:var(--space-4,1rem)}.shortcut-item{align-items:flex-start;gap:var(--space-2,.5rem);flex-direction:column}}@supports (container-type:inline-size){@container tone-keyboard (width<=600px){.shortcuts-panel{border-radius:var(--radius-xl) var(--radius-xl) 0 0;max-height:90vh}.shortcuts-header,.shortcuts-content{padding:var(--space-4,1rem)}.shortcut-item{align-items:flex-start;gap:var(--space-2,.5rem);flex-direction:column}}}.interaction-hint-enter{animation:.4s cubic-bezier(.16,1,.3,1) forwards fadeInUp}.interaction-hint-exit{animation:.3s cubic-bezier(.4,0,1,1) forwards fadeOutDown}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}.keyboard-header{text-align:center;margin-bottom:var(--space-4,1rem)}@media (width>=640px){.keyboard-header{margin-bottom:var(--space-8,2rem)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.keyboard-header{margin-bottom:var(--space-8,2rem)}}}.keyboard-title-row{justify-content:center;align-items:center;gap:var(--space-2,.5rem);margin-bottom:var(--space-2,.5rem);display:flex}.keyboard-title{font-size:var(--text-xl);color:var(--color-text-primary);font-weight:var(--font-bold)}@media (width>=640px){.keyboard-title{font-size:var(--text-2xl)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.keyboard-title{font-size:var(--text-2xl)}}}.keyboard-info-button{padding:var(--space-1,.25rem);border-radius:var(--radius-full);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out);color:var(--color-text-tertiary);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.keyboard-info-button:hover{background:var(--color-surface);color:var(--color-text-secondary)}.keyboard-subtitle{color:var(--color-text-secondary);margin-bottom:var(--space-4,1rem);font-size:var(--text-sm)}@media (width>=640px){.keyboard-subtitle{font-size:var(--text-base)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.keyboard-subtitle{font-size:var(--text-base)}}}.keyboard-tooltip{background:var(--color-surface-card);color:var(--color-text-primary);font-size:var(--text-sm);padding:var(--space-3,.75rem);border-radius:var(--radius-lg);max-width:20rem;z-index:var(--z-modal);box-shadow:var(--shadow-lg);border:1px solid var(--color-border-default);position:fixed;top:11.25rem;left:50%;transform:translate(-50%)}.advanced-options-summary{font-size:var(--text-sm);color:var(--color-text-secondary);cursor:pointer;transition:color var(--duration-fast) var(--ease-out);text-align:center;font-weight:var(--font-medium);justify-content:center;align-items:center;gap:var(--space-1,.25rem);display:flex}.advanced-options-summary-icon{font-size:var(--text-xs)}.advanced-options-buttons{justify-content:center;gap:var(--space-2,.5rem);margin-top:var(--space-3,.75rem);animation:.2s cubic-bezier(.16,1,.3,1) fadeIn;display:flex}.advanced-button-custom{padding:var(--space-2,.5rem) var(--space-3,.75rem);background:var(--color-accent);color:var(--color-text-inverse);font-size:var(--text-sm);border-radius:var(--radius-lg);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);justify-center:center;align-items:center;gap:var(--space-2,.5rem);font-weight:var(--font-medium);border:none;display:flex}.advanced-button-custom:hover:not(:disabled){background:var(--color-accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.advanced-button-custom:disabled{opacity:.5;cursor:not-allowed}.advanced-button-reset{padding:var(--space-2,.5rem) var(--space-3,.75rem);background:var(--color-surface);color:var(--color-text-secondary);font-size:var(--text-sm);border-radius:var(--radius-lg);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);justify-content:center;align-items:center;gap:var(--space-2,.5rem);border:none;display:flex}.advanced-button-reset:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.generate-button{margin-top:var(--space-2,.5rem);width:100%;padding:var(--space-2,.5rem);background:var(--color-primary);color:var(--color-text-inverse);font-size:var(--text-xs);border-radius:var(--radius-lg);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out);justify-content:center;align-items:center;gap:var(--space-1,.25rem);font-weight:var(--font-medium);border:none;grid-column:span 2;display:flex}@media (width>=640px){.generate-button{padding:var(--space-3,.75rem);font-size:var(--text-sm);gap:var(--space-2,.5rem)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.generate-button{padding:var(--space-3,.75rem);font-size:var(--text-sm);gap:var(--space-2,.5rem)}}}.generate-button:hover:not(:disabled){background:var(--color-primary-hover)}.generate-button:disabled{opacity:.6;cursor:not-allowed}.tone-analysis-section{gap:var(--space-6,1.5rem);flex-direction:column;display:flex}.tone-analysis-header{justify-content:space-between;align-items:center;gap:var(--space-4,1rem);margin-bottom:var(--space-4,1rem);display:flex}@media (width>=640px){.tone-analysis-title{font-size:var(--text-lg)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.tone-analysis-title{font-size:var(--text-lg)}}}.tone-percentages-toggle{align-items:center;gap:var(--space-2,.5rem);padding:var(--space-2,.5rem) var(--space-3,.75rem);border-radius:var(--radius-lg);background:var(--color-primary-alpha-10);cursor:pointer;font-size:var(--text-xs);transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);border:none;display:flex}.tone-percentages-toggle:hover{background:var(--color-primary-alpha-20)}@media (width>=640px){.tone-percentages-toggle{padding:var(--space-2,.5rem) var(--space-3,.75rem);font-size:var(--text-sm)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.tone-percentages-toggle{padding:var(--space-2,.5rem) var(--space-3,.75rem);font-size:var(--text-sm)}}}.tone-analysis-items{gap:var(--space-6,1.5rem);isolation:isolate;flex-direction:column;min-height:16rem;display:flex;position:relative}@media (width<=640px){.tone-analysis-items{gap:var(--space-4,1rem);min-height:12rem}}@supports (container-type:inline-size){@container tone-keyboard (width<=600px){.tone-analysis-items{gap:var(--space-4,1rem);min-height:12rem}}}.preset-overlay{z-index:var(--z-preset-overlay);background:color-mix(in oklch, var(--color-surface) 95%, transparent);backdrop-filter:blur(4px);border-radius:var(--radius-lg);padding:var(--space-4,1rem);box-shadow:0 8px 16px -4px var(--color-black-alpha-10);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow-y:auto}@media (width>=640px){.preset-overlay{padding:var(--space-6,1.5rem)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.preset-overlay{padding:var(--space-6,1.5rem)}}}.preset-header{justify-content:center;align-items:center;gap:var(--space-3,.75rem);margin-bottom:var(--space-6,1.5rem);text-align:center;display:flex}.preset-header-text{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text-primary)}@media (width>=640px){.preset-header-text{font-size:var(--text-base)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.preset-header-text{font-size:var(--text-base)}}}.preset-favorites-toggle{cursor:pointer;width:2rem;height:2rem;color:var(--color-text-tertiary);transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);border-radius:var(--radius-lg);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.preset-favorites-toggle:hover{background:var(--color-surface);color:var(--color-text-secondary)}.preset-favorites-toggle.active{color:var(--color-status-warning)}.preset-cards-grid{gap:var(--space-4,1rem);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));width:100%;max-width:32rem;margin:0 auto;display:grid}@media (width>=640px){.preset-cards-grid{gap:var(--space-6,1.5rem);grid-template-columns:repeat(2,1fr);max-width:none}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.preset-cards-grid{gap:var(--space-6,1.5rem);grid-template-columns:repeat(2,1fr);max-width:none}}}.preset-card-wrapper{isolation:isolate;z-index:var(--z-base);animation:linear preset-fade-in-up view();animation-range:entry cover 30%;animation-delay:calc(var(--index,0) * .1s);animation-fill-mode:backwards;position:relative}@keyframes preset-fade-in-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@supports not (animation-timeline:view()){.preset-card-wrapper{animation:.3s ease-out preset-slide-in;animation-delay:calc(var(--index,0) * .1s);animation-fill-mode:backwards}@keyframes preset-slide-in{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}}.preset-card{z-index:1;width:100%;padding:var(--space-6,1.5rem) var(--space-4,1rem);border-radius:var(--radius-xl);background:linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface) 100%);justify-content:center;align-items:center;gap:var(--space-2,.5rem);cursor:pointer;transition:background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);text-align:center;border:1px solid #0000;flex-direction:column;display:flex;position:relative}.preset-card:hover{box-shadow:0 8px 16px -4px var(--color-black-alpha-10);border-color:var(--color-border-default);transform:scale(1.05)}.preset-card-emoji{margin-bottom:var(--space-1,.25rem);font-size:2rem;line-height:1}.preset-card-name{font-size:var(--text-base);font-weight:var(--font-bold);color:var(--color-text-primary)}.preset-card-description{font-size:var(--text-xs);color:var(--color-text-secondary);font-weight:var(--font-medium);opacity:.8}.preset-star-button{cursor:pointer;width:2rem;height:2rem;z-index:var(--z-preset-star);color:var(--color-text-tertiary);transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);border-radius:var(--radius-lg);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:1rem;right:1rem}.preset-star-button:hover{color:var(--color-status-warning);background:var(--color-surface-alpha-50)}.preset-star-button.favorited{color:var(--color-status-warning)}@media (width<=640px){.preset-star-button{width:1.5rem;height:1.5rem;top:.5rem;right:.5rem}}@supports (container-type:inline-size){@container tone-keyboard (width<=600px){.preset-star-button{width:1.5rem;height:1.5rem;top:.5rem;right:.5rem}}}.preset-skip-link{margin-top:var(--space-6,1.5rem);font-size:var(--text-sm);color:var(--color-text-secondary);text-underline-offset:.25rem;cursor:pointer;transition:color var(--duration-fast) var(--ease-out);text-decoration:underline}.preset-skip-link:hover{color:var(--color-text-primary)}.fab-toolbar{z-index:var(--z-fab-toolbar);gap:var(--space-2,.5rem);background:var(--color-surface);border-radius:var(--radius-full);padding:var(--space-2,.5rem);box-shadow:0 8px 16px -4px var(--color-black-alpha-10);border:1px solid var(--color-border-default);flex-direction:row;align-items:center;display:flex;position:absolute;bottom:1rem;right:1rem}@media (width<=640px){.fab-toolbar{padding:var(--space-3,.75rem);flex-direction:column;bottom:.5rem;right:.5rem}}@supports (container-type:inline-size){@container tone-keyboard (width<=600px){.fab-toolbar{padding:var(--space-3,.75rem);flex-direction:column;bottom:.5rem;right:.5rem}}}.fab-button{justify-content:center;align-items:center;gap:var(--space-2,.5rem);padding:var(--space-4,1rem);border-radius:var(--radius-lg);background:var(--color-primary);min-width:3rem;height:3rem;color:var(--color-white);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);font-size:var(--text-sm);border:none;display:flex}.fab-button:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:0 4px 12px var(--color-primary-alpha-30);transform:translateY(-2px)}.fab-button:active:not(:disabled){box-shadow:0 2px 4px var(--color-primary-alpha-20);transform:translateY(0)}.fab-button:disabled{opacity:.5;cursor:not-allowed}.fab-button:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px}.fab-label{display:none}@media (width>=1024px){.fab-label{font-size:var(--text-xs);font-weight:var(--font-medium);display:inline}.fab-button{padding:var(--space-4,1rem) var(--space-6,1.5rem);min-width:auto}}@supports (container-type:inline-size){@container tone-keyboard (width>=980px){.fab-label{font-size:var(--text-xs);font-weight:var(--font-medium);display:inline}.fab-button{padding:var(--space-4,1rem) var(--space-6,1.5rem);min-width:auto}}}.history-panel{z-index:var(--z-side-panel);background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);width:20rem;max-height:28rem;box-shadow:0 20px 25px -5px var(--color-black-alpha-10);flex-direction:column;display:flex;position:absolute;bottom:4.5rem;right:1rem;overflow:hidden}@media (width<=640px){.history-panel{width:16rem;max-height:20rem;bottom:4rem;right:.5rem}}@supports (container-type:inline-size){@container tone-keyboard (width<=600px){.history-panel{width:16rem;max-height:20rem;bottom:4rem;right:.5rem}}}.history-header{padding:var(--space-4,1rem);border-bottom:1px solid var(--color-border-default);justify-content:space-between;align-items:center;display:flex}.history-title{font-weight:var(--font-semibold);color:var(--color-text-primary);font-size:var(--text-base)}.history-close-button{cursor:pointer;color:var(--color-text-tertiary);transition:color var(--duration-fast) var(--ease-out);padding:var(--space-1,.25rem);background:0 0;border:none}.history-close-button:hover{color:var(--color-text-primary)}.history-search-container{padding:var(--space-4,1rem);border-bottom:1px solid var(--color-border-default);position:relative}.history-search-input{width:100%;padding:var(--space-2,.5rem) var(--space-4,1rem) var(--space-2,.5rem) 2.5rem;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);font-size:var(--text-sm);background:var(--color-surface-background);color:var(--color-text-primary);transition:border-color var(--duration-fast) var(--ease-out)}.history-search-input:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 4px var(--color-primary-alpha-10);outline:2px solid #0000}.history-search-icon{color:var(--color-text-tertiary);font-size:var(--text-sm);position:absolute;top:50%;left:1.5rem;transform:translateY(-50%)}.history-list{gap:var(--space-2,.5rem);padding:var(--space-2,.5rem);flex-direction:column;flex:1;display:flex;overflow-y:auto}.history-item{padding:var(--space-3,.75rem);background:var(--color-surface-background);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);justify-content:space-between;align-items:center;gap:var(--space-2,.5rem);font-size:var(--text-sm);animation:linear history-item-fade-in view();animation-range:entry cover 20%;display:flex}@keyframes history-item-fade-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.history-item:hover{background:var(--color-surface-card);border-color:var(--color-primary-300)}.history-item-name{color:var(--color-text-primary);font-weight:var(--font-medium);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.history-item-delete{cursor:pointer;color:var(--color-text-tertiary);padding:var(--space-1,.25rem);transition:color var(--duration-fast) var(--ease-out);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.history-item-delete:hover{color:var(--color-status-error)}.comparison-panel{z-index:var(--z-side-panel);background:var(--color-surface-card);border-left:1px solid var(--color-border-default);width:24rem;box-shadow:-8px 0 16px -4px var(--color-black-alpha-10);flex-direction:column;max-height:100svh;display:flex;position:absolute;top:0;bottom:0;right:0;overflow:hidden}@media (width<=1024px){.comparison-panel{width:20rem}}@supports (container-type:inline-size){@container tone-keyboard (width<=980px){.comparison-panel{width:20rem}}}.comparison-header{padding:var(--space-6,1.5rem);border-bottom:1px solid var(--color-border-default);justify-content:space-between;align-items:center;display:flex}.comparison-title{font-weight:var(--font-semibold);color:var(--color-text-primary);font-size:var(--text-lg)}.comparison-close-button{cursor:pointer;color:var(--color-text-tertiary);transition:color var(--duration-fast) var(--ease-out);padding:var(--space-2,.5rem);border-radius:var(--radius-lg);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.comparison-close-button:hover{color:var(--color-text-primary);background:var(--color-surface-background)}.comparison-content{padding:var(--space-6,1.5rem);gap:var(--space-6,1.5rem);flex-direction:column;flex:1;display:flex;overflow-y:auto}.comparison-slot{gap:var(--space-4,1rem);padding:var(--space-4,1rem);background:var(--color-surface-background);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);flex-direction:column;display:flex}.comparison-slot-header{justify-content:space-between;align-items:center;gap:var(--space-2,.5rem);display:flex}.comparison-slot-name{font-weight:var(--font-semibold);color:var(--color-text-primary);font-size:var(--text-sm)}.comparison-slot-lock{cursor:pointer;color:var(--color-text-tertiary);transition:color var(--duration-fast) var(--ease-out);background:0 0;border:none;align-items:center;padding:0;display:flex}.comparison-slot-lock:hover{color:var(--color-text-primary)}.history-panel[data-state=open]{animation:.3s cubic-bezier(.16,1,.3,1) forwards slideInFromRight}.history-panel[data-state=closed]{animation:.25s cubic-bezier(.4,0,1,1) forwards slideOutToRight}.comparison-panel[data-state=open]{animation:.3s cubic-bezier(.16,1,.3,1) forwards slideInFromRight}.comparison-panel[data-state=closed]{animation:.25s cubic-bezier(.4,0,1,1) forwards slideOutToRight}@keyframes slideInFromRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOutToRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.history-panel .empty-state,.comparison-panel .empty-state{padding:var(--space-12,3rem) var(--space-6,1.5rem);text-align:center;color:var(--color-text-tertiary);justify-content:center;align-items:center;gap:var(--space-3,.75rem);flex-direction:column;display:flex}.empty-state-icon{opacity:.5;font-size:3rem}.empty-state-text{font-size:var(--text-sm);font-weight:var(--font-medium)}.panel-loading{padding:var(--space-8,2rem);color:var(--color-text-tertiary);justify-content:center;align-items:center;display:flex}.panel-loading-spinner{width:2rem;height:2rem;animation:1s linear infinite spin}.history-list,.comparison-content{scrollbar-width:thin;scrollbar-color:var(--color-border-default) transparent}.history-list::-webkit-scrollbar{width:8px}.comparison-content::-webkit-scrollbar{width:8px}.history-list::-webkit-scrollbar-track{background:0 0}.comparison-content::-webkit-scrollbar-track{background:0 0}.history-list::-webkit-scrollbar-thumb{background-color:var(--color-border-default);border-radius:var(--radius-sm,4px)}.comparison-content::-webkit-scrollbar-thumb{background-color:var(--color-border-default);border-radius:var(--radius-sm,4px)}.history-list::-webkit-scrollbar-thumb:hover{background-color:var(--color-text-tertiary)}.comparison-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-text-tertiary)}.history-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.history-close-button:focus-visible,.comparison-close-button:focus-visible,.history-item-delete:focus-visible,.comparison-slot-lock:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}.advanced-options{margin-top:var(--space-4,1rem);border-top:1px solid var(--color-border-default);padding-top:var(--space-4,1rem)}.advanced-options-summary{font-size:var(--text-sm);color:var(--color-text-secondary);cursor:pointer;user-select:none;justify-content:center;align-items:center;gap:var(--space-2,.5rem);font-weight:var(--font-medium);display:flex}.advanced-options-summary:hover{color:var(--color-text-primary)}.advanced-options-content{justify-content:center;gap:var(--space-4,1rem);margin-top:var(--space-6,1.5rem);display:flex}.advanced-button{padding:var(--space-3,.75rem) var(--space-4,1rem);background:var(--color-accent);color:var(--color-white);border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-medium);transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);align-items:center;gap:var(--space-2,.5rem);border:none;display:flex}.advanced-button:hover:not(:disabled){background:var(--color-accent-hover);transform:translateY(-1px)}.advanced-button:disabled{opacity:.5;cursor:not-allowed}.persona-save-section{margin-top:var(--space-6,1.5rem);padding:var(--space-4,1rem);background:var(--color-surface-background);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);gap:var(--space-4,1rem);flex-direction:column;display:flex}@media (width>=640px){.persona-save-section{gap:var(--space-2,.5rem);flex-direction:row}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.persona-save-section{gap:var(--space-2,.5rem);flex-direction:row}}}.persona-input{padding:var(--space-2,.5rem) var(--space-4,1rem);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);font-size:var(--text-sm);background:var(--color-surface-card);color:var(--color-text-primary);transition:border-color var(--duration-fast) var(--ease-out);flex:1}.persona-input:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 4px var(--color-primary-alpha-10);outline:2px solid #0000}.persona-save-button{padding:var(--space-2,.5rem) var(--space-4,1rem);background:var(--color-primary);color:var(--color-white);border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-medium);transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);white-space:nowrap;border:none}.persona-save-button:hover:not(:disabled){background:var(--color-primary-hover);transform:translateY(-1px)}@media (width<=640px){.persona-save-button{width:100%}}@supports (container-type:inline-size){@container tone-keyboard (width<=600px){.persona-save-button{width:100%}}}@media (pointer:fine) and (width>=1024px){@keyframes border-spin{0%{--angle:0deg}to{--angle:360deg}}@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}.fab-button:not(:disabled),.generate-button:not(:disabled),.persona-save-button:not(:disabled){isolation:isolate;position:relative}.fab-button:not(:disabled):before,.generate-button:not(:disabled):before,.persona-save-button:not(:disabled):before{content:"";border-radius:inherit;padding:var(--space-0-5);background:conic-gradient(from var(--angle), var(--color-primary-500), var(--color-accent-500), var(--color-primary-500));-webkit-mask:linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);-webkit-mask-composite:xor;z-index:-1;opacity:0;transition:opacity var(--duration-normal) var(--ease-out);animation:3s linear infinite paused border-spin;position:absolute;inset:-2px;mask-composite:exclude}.fab-button:hover:not(:disabled):before,.generate-button:hover:not(:disabled):before,.persona-save-button:hover:not(:disabled):before{opacity:.6;animation-play-state:running}.fab-button,.generate-button,.persona-save-button{--button-glow:0;transition:--button-glow var(--duration-normal) var(--ease-out)}.fab-button:hover:not(:disabled),.generate-button:hover:not(:disabled),.persona-save-button:hover:not(:disabled){--button-glow:1;box-shadow:0 0 calc(var(--button-glow) * 20px) var(--color-primary-alpha-30)}}.preset-card-wrapper:has(.preset-star-button.favorited) .preset-card{border-color:var(--color-status-warning);box-shadow:0 0 0 1px var(--color-status-warning-alpha-20)}.preset-card-wrapper:has(.preset-star-button.favorited) .preset-card:hover{border-color:var(--color-status-warning);box-shadow:0 8px 16px -4px var(--color-status-warning-alpha-30)}.fab-toolbar:has(~.history-panel[data-state=open]){transition:transform var(--duration-normal) var(--ease-out);transform:translate(-21rem)}.tone-keyboard-container:has(.comparison-panel[data-state=open]) .fab-toolbar{transition:transform var(--duration-normal) var(--ease-out);transform:translate(-25rem)}.persona-keyboard-wrapper:has(.history-panel[data-state=open]){transition:padding-right var(--duration-normal) var(--ease-out);padding-right:22rem}.persona-content-grid:has(~.shortcuts-modal-overlay.visible){filter:blur(2px);transition:filter var(--duration-normal) var(--ease-out)}.persona-content-grid{filter:blur();transition:filter var(--duration-normal) var(--ease-out)}@media (width<=640px){.persona-keyboard-wrapper{padding:var(--space-2,.5rem) var(--space-2,.5rem) var(--space-6,1.5rem)}.persona-content-grid,.tone-analysis-section{gap:var(--space-4,1rem)}.fab-toolbar:has(~.history-panel[data-state=open]),.tone-keyboard-container:has(.comparison-panel[data-state=open]) .fab-toolbar{transform:none}.persona-keyboard-wrapper:has(.history-panel[data-state=open]){padding-right:var(--space-2,.5rem)}}@supports (container-type:inline-size){@container tone-keyboard (width<=600px){.persona-keyboard-wrapper{padding:var(--space-2,.5rem) var(--space-2,.5rem) var(--space-6,1.5rem)}.persona-content-grid,.tone-analysis-section{gap:var(--space-4,1rem)}.fab-toolbar:has(~.history-panel[data-state=open]),.tone-keyboard-container:has(.comparison-panel[data-state=open]) .fab-toolbar{transform:none}.persona-keyboard-wrapper:has(.history-panel[data-state=open]){padding-right:var(--space-2,.5rem)}}}@media (forced-colors:active){.fab-button,.preset-card,.advanced-button,.persona-save-button{border:2px solid buttonborder}.fab-button:hover,.preset-card:hover,.advanced-button:hover,.persona-save-button:hover{color:highlighttext;background-color:highlight}}@media (prefers-reduced-motion:reduce){.fab-button:hover,.preset-card:hover,.advanced-button:hover,.persona-save-button:hover{transform:none}.fab-button,.preset-card,.advanced-button,.persona-save-button,.tone-percentages-toggle,.preset-star-button{transition:none}.preset-card-wrapper,.history-item{animation:none!important}}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:4px solid var(--color-primary-500);outline-offset:4px}html.dark{--tone-formal:#60a5fa;--tone-casual:#a78bfa;--tone-technical:#f472b6;--tone-playful:#34d399;--tone-empathetic:#fbbf24}html.dark .keyboard-title{color:color-mix(in oklch, var(--color-text-primary) 95%, white)}html.dark .keyboard-subtitle{color:color-mix(in oklch, var(--color-text-secondary) 85%, white)}html.dark .keyboard-info-button{color:color-mix(in oklch, var(--color-text-tertiary) 75%, white)}html.dark .keyboard-info-button:hover{color:color-mix(in oklch, var(--color-text-primary) 90%, white);background:color-mix(in oklch, var(--color-surface) 90%, white)}html.dark .keyboard-tooltip{color:color-mix(in oklch, var(--color-text-primary) 90%, white);background:color-mix(in oklch, var(--color-surface) 95%, white);border-color:color-mix(in oklch, var(--color-border-default) 70%, white)}html.dark .advanced-options-summary{color:color-mix(in oklch, var(--color-text-secondary) 80%, white)}html.dark .advanced-options-summary:hover{color:color-mix(in oklch, var(--color-text-primary) 85%, white)}html.dark .advanced-button-custom{background:color-mix(in oklch, var(--color-accent) 90%, white);color:var(--color-text-inverse)}html.dark .advanced-button-custom:hover:not(:disabled){background:color-mix(in oklch, var(--color-accent-hover) 95%, white)}html.dark .advanced-button-reset{border-color:color-mix(in oklch, var(--color-border-default) 60%, white);color:color-mix(in oklch, var(--color-text-secondary) 80%, white)}html.dark .advanced-button-reset:hover:not(:disabled){border-color:color-mix(in oklch, var(--color-border-default) 80%, white);color:color-mix(in oklch, var(--color-text-primary) 85%, white);background:color-mix(in oklch, var(--color-surface-hover) 85%, white)}html.dark .generate-button{background:color-mix(in oklch, var(--color-primary) 90%, white);color:var(--color-text-inverse)}html.dark .generate-button:hover:not(:disabled){background:color-mix(in oklch, var(--color-primary) 95%, white)}html.dark .tone-svg-loading-overlay{background:color-mix(in oklch, var(--color-surface) 85%, transparent)}html.dark .tone-svg-loading-text{color:color-mix(in oklch, var(--color-text-secondary) 85%, white)}html.dark .shortcuts-modal-overlay{background:color-mix(in oklch, var(--color-surface-dark) 70%, transparent)}html.dark .shortcuts-panel{background:color-mix(in oklch, var(--color-surface) 95%, white);box-shadow:0 25px 50px -12px var(--color-black-alpha-50)}html.dark .shortcuts-title{color:color-mix(in oklch, var(--color-text-primary) 95%, white)}html.dark .shortcuts-close-button{color:color-mix(in oklch, var(--color-text-tertiary) 75%, white)}html.dark .shortcuts-close-button:hover{background:color-mix(in oklch, var(--color-surface-hover) 85%, white);color:color-mix(in oklch, var(--color-text-primary) 90%, white)}html.dark .shortcuts-section-title{color:color-mix(in oklch, var(--color-text-secondary) 80%, white)}html.dark .shortcut-description{color:color-mix(in oklch, var(--color-text-primary) 90%, white)}html.dark .shortcut-key{color:color-mix(in oklch, var(--color-text-primary) 90%, white);background:color-mix(in oklch, var(--color-surface-hover) 80%, white);border-color:color-mix(in oklch, var(--color-border-default) 60%, white)}html.dark .shortcut-plus{color:color-mix(in oklch, var(--color-text-tertiary) 70%, white)}html.dark .shortcuts-footer{background:color-mix(in oklch, var(--color-surface) 92%, var(--color-surface-hover));border-color:color-mix(in oklch, var(--color-border-default) 50%, white);color:color-mix(in oklch, var(--color-text-tertiary) 75%, white)}html.dark .preset-card{border-color:color-mix(in oklch, var(--color-border-default) 50%, white)}html.dark .preset-card:hover{border-color:color-mix(in oklch, var(--color-border-default) 70%, white)}html.dark .preset-name{color:color-mix(in oklch, var(--color-text-primary) 90%, white)}html.dark .preset-description{color:color-mix(in oklch, var(--color-text-secondary) 80%, white)}html.dark .fab-button{background:color-mix(in oklch, var(--color-surface) 90%, white);border-color:color-mix(in oklch, var(--color-border-default) 55%, white);color:color-mix(in oklch, var(--color-text-primary) 85%, white)}html.dark .fab-button:hover:not(:disabled){background:color-mix(in oklch, var(--color-surface-hover) 90%, white);border-color:color-mix(in oklch, var(--color-border-default) 75%, white)}html.dark .fab-button.fab-button-active{background:color-mix(in oklch, var(--color-primary) 85%, white);border-color:color-mix(in oklch, var(--color-primary) 90%, white)}html.dark .history-item{border-color:color-mix(in oklch, var(--color-border-default) 50%, white)}html.dark .history-item:hover{background:color-mix(in oklch, var(--color-surface-hover) 80%, white);border-color:color-mix(in oklch, var(--color-border-default) 65%, white)}html.dark .history-item-description{color:color-mix(in oklch, var(--color-text-primary) 88%, white)}html.dark .history-item-timestamp{color:color-mix(in oklch, var(--color-text-tertiary) 70%, white)}html.dark .comparison-panel{background:color-mix(in oklch, var(--color-surface) 92%, white);border-color:color-mix(in oklch, var(--color-border-default) 50%, white)}html.dark .comparison-slot{border-color:color-mix(in oklch, var(--color-border-default) 50%, white)}html.dark .comparison-slot-title{color:color-mix(in oklch, var(--color-text-primary) 90%, white)}html.dark .comparison-slot-empty-text{color:color-mix(in oklch, var(--color-text-secondary) 75%, white)}html.dark .comparison-action-button{border-color:color-mix(in oklch, var(--color-border-default) 55%, white);color:color-mix(in oklch, var(--color-text-secondary) 80%, white)}html.dark .comparison-action-button:hover:not(:disabled){border-color:color-mix(in oklch, var(--color-border-default) 70%, white);color:color-mix(in oklch, var(--color-text-primary) 85%, white);background:color-mix(in oklch, var(--color-surface-hover) 85%, white)}html.dark .fab-menu-kbd{background:var(--theme-color-border);border-color:var(--theme-color-border-hover)}html.dark button:focus-visible,html.dark a:focus-visible,html.dark input:focus-visible,html.dark select:focus-visible,html.dark textarea:focus-visible,html.dark [tabindex]:focus-visible{outline-color:color-mix(in oklch, var(--color-primary-500) 90%, white)}.tone-analysis-header{margin-bottom:var(--space-2);justify-content:space-between;align-items:center;display:flex}@media (width>=640px){.tone-analysis-header{margin-bottom:var(--space-4)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.tone-analysis-header{margin-bottom:var(--space-4)}}}.tone-analysis-title{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-text-primary)}@media (width>=640px){.tone-analysis-title{font-size:var(--text-lg)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.tone-analysis-title{font-size:var(--text-lg)}}}.tone-percentages-btn{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-lg);background:color-mix(in oklch, var(--color-primary) 10%, transparent);cursor:pointer;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-text-primary);transition:background-color var(--duration-fast) var(--ease-out);border:none;display:flex}.tone-percentages-btn:hover{background:color-mix(in oklch, var(--color-primary) 20%, transparent)}@media (width>=640px){.tone-percentages-btn{gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--text-sm)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.tone-percentages-btn{gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--text-sm)}}}.tone-analysis-items-wrapper{gap:var(--space-2);isolation:isolate;flex-direction:column;min-height:16rem;display:flex;position:relative}@media (width>=640px){.tone-analysis-items-wrapper{gap:var(--space-3)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.tone-analysis-items-wrapper{gap:var(--space-3)}}}.preset-overlay-container{background:color-mix(in oklch, var(--color-surface) 95%, transparent);backdrop-filter:blur(4px);border-radius:var(--radius-lg);padding:var(--space-3);z-index:50;box-shadow:var(--shadow-lg);touch-action:pan-y;flex-direction:column;justify-content:center;display:flex;position:absolute;inset:0;overflow-y:auto}@media (width>=640px){.preset-overlay-container{padding:var(--space-5)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.preset-overlay-container{padding:var(--space-5)}}}.preset-overlay-header{text-align:center;margin-bottom:var(--space-3)}@media (width>=640px){.preset-overlay-header{margin-bottom:var(--space-4)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.preset-overlay-header{margin-bottom:var(--space-4)}}}.preset-overlay-title-row{justify-content:center;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2);display:flex}.preset-overlay-title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-primary)}@media (width>=640px){.preset-overlay-title{font-size:var(--text-base)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.preset-overlay-title{font-size:var(--text-base)}}}.preset-empty-hint{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-top:var(--space-2)}.preset-cards-container{gap:var(--space-3);width:100%;max-width:42rem;padding:0 var(--space-2);grid-template-columns:1fr;margin:0 auto;display:grid}@media (width>=640px){.preset-cards-container{gap:var(--space-4);grid-template-columns:repeat(2,1fr)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.preset-cards-container{gap:var(--space-4);grid-template-columns:repeat(2,1fr)}}}.preset-card-mentor{background:linear-gradient(135deg, var(--color-success-50) 0%, var(--color-success-100) 100%);color:var(--color-success-700);border-color:var(--color-success-200)}.preset-card-mentor:hover{background:linear-gradient(135deg, var(--color-success-100) 0%, var(--color-success-50) 100%)}.preset-card-patient{background:linear-gradient(135deg, color-mix(in oklch, var(--color-primary) 10%, transparent) 0%, color-mix(in oklch, var(--color-primary) 20%, transparent) 100%);color:var(--color-primary);border-color:color-mix(in oklch, var(--color-primary) 30%, transparent)}.preset-card-patient:hover{background:linear-gradient(135deg, color-mix(in oklch, var(--color-primary) 20%, transparent) 0%, color-mix(in oklch, var(--color-primary) 30%, transparent) 100%)}.preset-card-peer{background:linear-gradient(135deg, color-mix(in oklch, var(--color-accent) 10%, transparent) 0%, color-mix(in oklch, var(--color-accent) 20%, transparent) 100%);color:var(--color-accent);border-color:color-mix(in oklch, var(--color-accent) 30%, transparent)}.preset-card-peer:hover{background:linear-gradient(135deg, color-mix(in oklch, var(--color-accent) 20%, transparent) 0%, color-mix(in oklch, var(--color-accent) 30%, transparent) 100%)}.preset-card-expert{background:linear-gradient(135deg, color-mix(in oklch, var(--color-warning) 10%, transparent) 0%, color-mix(in oklch, var(--color-warning) 20%, transparent) 100%);color:var(--color-warning);border-color:color-mix(in oklch, var(--color-warning) 30%, transparent)}.preset-card-expert:hover{background:linear-gradient(135deg, color-mix(in oklch, var(--color-warning) 20%, transparent) 0%, color-mix(in oklch, var(--color-warning) 30%, transparent) 100%)}.preset-card-content{padding:var(--space-4) var(--space-4) var(--space-5);border-radius:var(--radius-xl);justify-content:center;align-items:center;gap:var(--space-2);cursor:pointer;transition:background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);text-align:center;box-shadow:var(--shadow-md);border:1px solid;flex-direction:column;display:flex}.preset-card-content:hover{box-shadow:var(--shadow-lg);transform:scale(1.05)}.preset-card-emoji{font-size:var(--text-3xl,1.875rem);margin-bottom:var(--space-1);line-height:1}.preset-card-image{object-fit:contain;width:48px;height:48px;margin-bottom:var(--space-1);pointer-events:none;user-select:none}.preset-card-title{font-size:var(--text-base);font-weight:var(--font-bold)}.preset-card-subtitle{font-size:var(--text-xs);opacity:.8;font-weight:var(--font-medium)}.icon-xs{width:.75rem;height:.75rem}.icon-sm{width:1rem;height:1rem}.icon-md{width:1.25rem;height:1.25rem}.icon-lg{width:1.5rem;height:1.5rem}.icon-responsive-sm{width:.75rem;height:.75rem}@media (width>=640px){.icon-responsive-sm{width:1rem;height:1rem}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.icon-responsive-sm{width:1rem;height:1rem}}}.tone-progress-row{font-size:var(--text-sm);margin-bottom:var(--space-1);justify-content:space-between;display:flex}.tone-progress-label{align-items:center;gap:var(--space-2);display:flex}.tone-progress-name{font-weight:var(--font-medium)}.tone-progress-description{color:var(--color-text-secondary)}.tone-progress-value{align-items:center;gap:var(--space-2);display:flex}.tone-progress-percent{color:var(--color-text-secondary)}.tone-progress-remove-btn{padding:var(--space-1);border-radius:var(--radius-full);cursor:pointer;opacity:0;transition:opacity var(--duration-fast) var(--ease-out);background:0 0;border:none}.tone-progress-remove-btn:hover{background:var(--color-surface)}.tone-item:hover .tone-progress-remove-btn{opacity:1}.tone-progress-bar-track{background:var(--color-surface);border-radius:var(--radius-full);height:.5rem;overflow:hidden}.tone-progress-bar-fill{border-radius:var(--radius-full);height:100%;transition:width var(--duration-normal) var(--ease-out);position:relative}.tone-progress-bar-shine{opacity:.5;position:absolute;inset:0}.voice-section{margin-top:var(--space-6);border-top:1px solid var(--color-border-default);padding-top:var(--space-4)}.voice-section-header{margin-bottom:var(--space-3);justify-content:space-between;align-items:center;display:flex}.voice-section-title-row{align-items:center;gap:var(--space-2);display:flex}.voice-section-title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text-primary)}.voice-lock-btn{padding:var(--space-2);border-radius:var(--radius-lg);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out);background:0 0;border:none}.voice-lock-btn:hover{background:var(--color-surface-hover)}.voice-card{padding:var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--color-border-default);margin-bottom:var(--space-3);transition:border-color var(--duration-fast) var(--ease-out)}.voice-card-content{justify-content:space-between;align-items:center;display:flex}.voice-card-info{flex:1}.voice-card-header{align-items:center;gap:var(--space-2);margin-bottom:var(--space-1);display:flex}.voice-card-name{font-weight:var(--font-medium);font-size:var(--text-sm);color:var(--color-text-primary)}.voice-card-badge{padding:var(--space-0-5) var(--space-2);font-size:var(--text-xs);border-radius:var(--radius-full)}.voice-card-description{font-size:var(--text-xs);opacity:.75;color:var(--color-text-secondary)}.voice-card-tags{gap:var(--space-1);margin-top:var(--space-2);flex-wrap:wrap;display:flex}.voice-card-tag{padding:var(--space-0-5) var(--space-2);font-size:var(--text-xs);border-radius:var(--radius-sm)}.voice-play-btn{padding:var(--space-2);border-radius:var(--radius-lg);cursor:pointer;margin-left:var(--space-2);transition:background-color var(--duration-fast) var(--ease-out);background:0 0;border:none}.voice-play-btn:hover{background:var(--color-surface)}.voice-selector-toggle{font-size:var(--text-sm);cursor:pointer;color:var(--color-text-secondary);transition:color var(--duration-fast) var(--ease-out);justify-content:space-between;align-items:center;display:flex}.voice-selector-toggle:hover{color:var(--color-accent)}.voice-option-btn{width:100%;padding:var(--space-3);border-radius:var(--radius-lg);border:1px solid var(--color-border-default);cursor:pointer;text-align:left;transition:border-color var(--duration-fast) var(--ease-out);background:0 0}.voice-option-btn:hover{border-color:var(--color-accent)}.saved-personas-section{margin-top:var(--space-4)}@media (width>=640px){.saved-personas-section{margin-top:var(--space-6)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.saved-personas-section{margin-top:var(--space-6)}}}.saved-personas-summary{font-size:var(--text-sm);color:var(--color-text-secondary);cursor:pointer;align-items:center;min-height:44px;display:flex}.saved-personas-form{gap:var(--space-2);margin-top:var(--space-3);margin-bottom:var(--space-3);flex-direction:column;display:flex}@media (width>=640px){.saved-personas-form{flex-direction:row}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.saved-personas-form{flex-direction:row}}}.saved-personas-input{padding:var(--space-2);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);font-size:var(--text-sm);background:var(--color-surface);color:var(--color-text-primary);flex:1;width:100%}.saved-personas-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in oklch, var(--color-accent) 15%, transparent);outline:2px solid #0000}.saved-personas-save-btn{padding:var(--space-2) var(--space-4);background:var(--color-accent);color:var(--color-text-inverse);border-radius:var(--radius-lg);font-size:var(--text-sm);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out);border:none;flex-shrink:0;width:100%}@media (width>=640px){.saved-personas-save-btn{width:auto}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.saved-personas-save-btn{width:auto}}}.saved-personas-save-btn:hover{background:color-mix(in oklch, var(--color-accent) 90%, black)}.apply-prompt-btn{width:100%;padding:var(--space-2) var(--space-4);background:var(--color-primary);color:var(--color-text-inverse);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;justify-content:center;align-items:center;gap:var(--space-2);margin-top:var(--space-2);transition:background-color var(--duration-fast) var(--ease-out);border:none;display:flex}.apply-prompt-btn:hover{background:var(--color-primary-hover)}.skip-preset-link{font-size:var(--text-sm);color:var(--color-text-secondary);font-weight:var(--font-medium);cursor:pointer;transition:color var(--duration-fast) var(--ease-out);background:0 0;border:none;padding:0;text-decoration:underline}.skip-preset-link:hover{color:var(--color-text-primary)}.tone-svg-wrapper{aspect-ratio:1;width:100%;position:relative}.tone-svg-element{width:100%;height:100%}.tone-pentagon-wrapper{touch-action:none;width:100%;height:100%;position:relative}.voice-info-box{padding:var(--space-3);border-radius:var(--radius-lg);margin-bottom:var(--space-3);background:var(--color-accent-light)}.voice-info-text{font-size:var(--text-xs);color:var(--color-accent)}.voice-loading-container{padding:var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--color-border-default);text-align:center}.voice-loading-spinner{width:1.25rem;height:1.25rem;color:var(--color-accent);margin:0 auto var(--space-2);animation:1s linear infinite spin}.voice-loading-text{font-size:var(--text-xs);color:var(--color-text-secondary)}.voice-empty-state{padding:var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--color-border-default);text-align:center}.voice-empty-text{font-size:var(--text-xs);color:var(--color-text-secondary)}.hidden-mobile{display:none}@media (width>=640px){.hidden-mobile{display:inline}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.hidden-mobile{display:inline}}}.preset-skip-section{margin-top:var(--space-5);text-align:center}.voice-recommendation-box{padding:var(--space-3) var(--space-3);border-radius:var(--radius-lg);margin-bottom:var(--space-3);background-color:var(--accent-light)}.voice-recommendation-text{font-size:var(--text-xs);color:var(--accent)}.voice-selector-details{margin-top:var(--space-3)}.voice-selector-summary{font-size:var(--text-sm);cursor:pointer;color:var(--text-secondary);transition:color var(--duration-fast) var(--ease-out);justify-content:space-between;align-items:center;display:flex}.voice-selector-summary:hover{color:var(--accent)}.voice-selector-label{font-weight:var(--font-medium)}.voice-selector-count{font-size:var(--text-xs);opacity:.75}.voice-selector-list{margin-top:var(--space-3);gap:var(--space-2);flex-direction:column;max-height:24rem;display:flex;overflow-y:auto}.voice-loading-center{text-align:center;padding-block:var(--space-4)}.voice-loading-icon{width:1.5rem;height:1.5rem;color:var(--accent);margin:0 auto var(--space-2);animation:1s linear infinite spin}.voice-list-item{width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);border:1px solid var(--border);background-color:var(--surface-card);text-align:left;transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out)}.voice-list-item:hover,.voice-list-item.selected-voice-item{border-color:var(--accent)}.voice-list-item-content{justify-content:space-between;align-items:center;display:flex}.voice-list-item-info{flex:1}.voice-list-item-header{align-items:center;gap:var(--space-2);display:flex}.voice-list-item-name{font-weight:var(--font-medium);font-size:var(--text-sm);color:var(--text-primary)}.voice-list-item-name.selected{color:var(--accent)}.voice-recommended-badge{padding:var(--space-1) var(--space-2);font-size:var(--text-xs);border-radius:var(--radius-full);background-color:var(--accent-light);color:var(--accent)}.voice-list-item-description{font-size:var(--text-xs);margin-top:var(--space-1);opacity:.75;color:var(--text-secondary)}.voice-labels-row{gap:var(--space-1);margin-top:var(--space-1);flex-wrap:wrap;display:flex}.voice-label-tag{padding:var(--space-1) 6px;font-size:var(--text-xs);border-radius:var(--radius-sm);background-color:var(--surface);color:var(--text-secondary)}.voice-preview-button{padding:var(--space-2);border-radius:var(--radius-lg);transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);margin-left:var(--space-2);cursor:pointer}.voice-preview-button:hover{background-color:var(--surface)}.voice-preview-icon{width:1rem;height:1rem;color:var(--accent)}.saved-personas-details{margin-top:var(--space-4)}@media (width>=640px){.saved-personas-details{margin-top:var(--space-6)}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.saved-personas-details{margin-top:var(--space-6)}}}.saved-personas-summary{font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer}.saved-personas-label{font-weight:var(--font-semibold)}.saved-personas-content{margin-bottom:var(--space-4)}.persona-input-row{gap:var(--space-2);margin-top:var(--space-3);margin-bottom:var(--space-3);flex-direction:column;display:flex}@media (width>=640px){.persona-input-row{flex-direction:row}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.persona-input-row{flex-direction:row}}}.persona-name-input{padding:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-lg);min-height:44px;font-size:var(--text-sm);background-color:var(--surface-card);flex-grow:1;width:100%}.persona-name-input:focus{box-shadow:0 0 0 1px var(--accent);outline:2px solid #0000}.persona-save-button{padding:var(--space-2) var(--space-4);background-color:var(--accent);min-height:44px;color:var(--color-text-on-primary);border-radius:var(--radius-lg);font-size:var(--text-sm);transition:background-color var(--duration-fast) var(--ease-out);flex:none;width:100%}@media (width>=640px){.persona-save-button{width:auto}}@supports (container-type:inline-size){@container tone-keyboard (width>=600px){.persona-save-button{width:auto}}}.persona-save-button:hover{background-color:color-mix(in srgb, var(--accent) 90%, black)}.persona-save-button:disabled{opacity:.5;cursor:not-allowed}.edit-mode-button.edit-mode-active{background-color:var(--accent-light);color:var(--accent)}.edit-mode-button.edit-mode-inactive{background-color:var(--surface);color:var(--text-secondary)}.edit-mode-button.edit-mode-inactive:hover{background-color:var(--surface-hover)}.tone-label-text{font-size:var(--text-sm);font-weight:var(--font-medium);user-select:none;transition:opacity var(--duration-fast) var(--ease-out)}.tone-point-circle{transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out)}.tone-point-label{font-size:var(--text-sm);font-weight:var(--font-medium);user-select:none;transition:opacity var(--duration-fast) var(--ease-out)}.icon-xs{flex-shrink:0;width:12px;height:12px}.icon-sm{flex-shrink:0;width:16px;height:16px}.icon-md{flex-shrink:0;width:20px;height:20px}.icon-lg{flex-shrink:0;width:24px;height:24px}.icon-xl{flex-shrink:0;width:48px;height:48px}.icon-responsive-xs-sm{flex-shrink:0;width:12px;height:12px}@media (width>=640px){.icon-responsive-xs-sm{width:16px;height:16px}}}.fab-menu-container{display:inline-flex;position:relative}.fab-menu-toggle{min-width:44px;min-height:44px;padding:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);cursor:pointer;color:var(--color-text-secondary);transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);justify-content:center;align-items:center;display:flex}.fab-menu-toggle:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.fab-menu-toggle-active{background:var(--color-primary-100,color-mix(in oklch, var(--color-primary) 15%, white));color:var(--color-primary);border-color:var(--color-primary-300,color-mix(in oklch, var(--color-primary) 40%, white))}.fab-menu-backdrop{z-index:var(--z-overlay,40);position:fixed;inset:0}.fab-dropdown-menu{top:calc(100% + var(--space-2));z-index:var(--z-dropdown,50);background:var(--color-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);min-width:200px;box-shadow:var(--shadow-lg,0 10px 25px -3px #0000001a);padding:var(--space-2);position:absolute;right:0}.fab-menu-group{flex-direction:column;display:flex}.fab-menu-item{align-items:center;gap:var(--space-2);width:100%;min-height:44px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-sm);color:var(--color-text-primary);transition:background-color var(--duration-fast) var(--ease-out);text-align:left;background:0 0;border:none;display:flex}.fab-menu-item:hover:not(:disabled){background:var(--color-surface-hover)}.fab-menu-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.fab-menu-item-disabled{opacity:.4;cursor:not-allowed}.fab-menu-item-active{background:color-mix(in oklch, var(--color-primary) 10%, transparent);color:var(--color-primary)}.fab-menu-item-highlight{color:var(--color-status-warning)}.fab-menu-divider{background:var(--color-border-default);height:1px;margin:var(--space-1) 0}.fab-menu-kbd{font-size:var(--text-xs);background:var(--color-surface-secondary,color-mix(in oklch, var(--color-surface) 90%, black));border:1px solid var(--color-border-default);border-radius:var(--radius-sm);color:var(--color-text-tertiary);margin-left:auto;padding:2px 6px;font-family:inherit}.fab-menu-badge{font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--color-status-warning)}.fab-menu-count{font-size:var(--text-xs);font-weight:var(--font-medium);background:color-mix(in oklch, var(--color-primary) 15%, transparent);border-radius:var(--radius-full);color:var(--color-primary);padding:1px 6px}.panel-backdrop{z-index:var(--z-overlay,40);background:#0000004d;position:fixed;inset:0}.preset-star-button{min-width:44px;min-height:44px}.tone-percentages-btn,.edit-mode-button{min-height:44px}.skip-preset-link{padding:var(--space-2) var(--space-3);align-items:center;min-height:44px;display:inline-flex}.tone-progress-remove-btn{opacity:1;min-width:44px;min-height:44px}@media (width<=640px){.preset-star-button{width:44px;min-width:44px;height:44px;min-height:44px}}@supports (container-type:inline-size){@container tone-keyboard (width<=600px){.preset-star-button{width:44px;min-width:44px;height:44px;min-height:44px}}}@media (prefers-reduced-motion:reduce){.animate-fly-up,.animate-fade-in{animation:none!important}}@supports (container-type:inline-size){@container tone-keyboard (width<=600px){.tone-preview-bubble{margin-top:var(--space-2,.5rem)}}}.vibe-card-svg{width:100%;max-width:400px;height:auto;margin:0 auto;display:block}.preset-card-create-custom{border:2px dashed var(--color-border-medium,#00000026);background:var(--color-surface-secondary,var(--color-surface,#f8f9fa))}@media (hover:hover){.preset-card-create-custom:hover{border-color:var(--color-primary-400,#818cf8);background:var(--color-primary-50,#6366f10d)}}.preset-card-create-custom .preset-card-emoji{color:var(--color-primary-500,#6366f1)}