:root{--primary-color: #90ee90;--secondary-color: #4cb44c;--primary-transparent: rgba(144, 238, 144, .25);--background-color: #f0ede8;--surface-color: #eae7e2;--text-color: #212529;--text-muted: #6c757d;--error-color: #dc3545;--success-color: #28a745;--warning-color: #ffc107;--font-family: "DejaVu Sans Mono", "DejaVu Mono", "GeistMono", "Consolas", "Monaco", "Courier New", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-bold: 700;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-xxl: 3rem;--border-radius-sm: .25rem;--border-radius-md: .5rem;--border-radius-lg: .75rem;--border-color: #c8c8c8;--border-color-dark: #555555;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--transition-fast: .15s ease-in-out;--transition-normal: .3s ease-in-out;--transition-slow: .5s ease-in-out}*{box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.5;color:var(--text-color);background-color:var(--background-color)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:var(--font-weight-medium);line-height:1.2}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}a{color:var(--primary-color);text-decoration:none;background-color:transparent}a:hover{color:var(--primary-color);text-decoration:underline}ul,ol{margin-top:0;margin-bottom:1rem}img{vertical-align:middle;border-style:none;max-width:100%;height:auto}section{margin:1.5rem 0!important;padding:1rem!important;border:.5px solid var(--border-color)!important}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button{overflow:visible;text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.p-4{padding:1.5rem}@media (max-width: 768px){.app-main{padding:0 .5rem}.app-title{font-size:1.25rem}.version-info{flex-direction:column;align-items:center}}.btn{display:inline-block;padding:.5rem 1rem;margin-bottom:0;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;border:1px solid transparent;border-radius:var(--border-radius-md);transition:all var(--transition-fast);user-select:none}.btn:focus{outline:0;box-shadow:0 0 0 .2rem #007bff40}.btn:hover{text-decoration:none}.btn:disabled{opacity:.65;cursor:not-allowed}.btn-primary{color:var(--text-color);background-color:var(--primary-color);border-color:var(--primary-color)}.btn-primary:hover{background-color:var(--secondary-color);border-color:var(--secondary-color)}.btn-secondary{color:var(--text-color);background-color:var(--surface-color);border-color:var(--border-color)}.btn-secondary:hover{background-color:var(--border-color);border-color:var(--border-color)}.btn-sm{padding:.25rem .5rem;font-size:var(--font-size-sm);border-radius:var(--border-radius-sm)}.btn-lg{padding:.75rem 1.5rem;font-size:var(--font-size-lg);border-radius:var(--border-radius-lg)}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:1.5;color:var(--text-color);background-color:var(--background-color);background-clip:padding-box;border:1px solid var(--border-color);border-radius:var(--border-radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.form-control:focus{color:var(--text-color);background-color:var(--background-color);border-color:var(--primary-color);outline:0;box-shadow:0 0 0 .2rem #90ee9040}.form-control:disabled{background-color:var(--surface-color);opacity:1}.form-group{margin-bottom:1rem}.form-text{display:block;margin-top:.25rem;font-size:var(--font-size-sm);color:var(--text-muted)}.upload-container{margin:1.5rem 0;padding:1rem;width:fit-content;margin-left:auto;margin-right:auto;border:2px dashed var(--border-color);border-radius:var(--border-radius-lg);text-align:center;transition:border-color var(--transition-fast);background-color:var(--primary-transparent);gap:1rem}.upload-container:hover{border-color:var(--primary-color)}.upload-content{cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;>.description{font-weight:300;font-size:var(--font-size-sm);font-style:italic;margin-bottom:0;padding:0 3rem}}.image-preview-container{display:flex;flex-direction:column;align-items:center;gap:1rem}.image-preview{max-width:100%;max-height:100%;border-radius:var(--border-radius-md);box-shadow:var(--shadow-md)}.config-section{margin:2rem 0;background-color:var(--surface-color);border-radius:var(--border-radius-lg);height:auto;display:flex;gap:2rem;align-items:flex-start;position:relative;overflow-x:hidden}.config-grid{display:flex;gap:.5rem;width:100%;height:100%}.config-column{flex:1;min-width:0;overflow:hidden}.config-column:first-child{flex:0 0 auto}.config-column:last-child{flex:1;min-width:0}.config-column h3{margin-bottom:1rem;color:var(--text-color)}.description{margin-bottom:1rem;color:var(--text-muted);font-size:var(--font-size-sm)}.density-labels{display:flex;justify-content:space-between;margin-top:.5rem;font-size:var(--font-size-sm);color:var(--text-muted)}.resolution-vertical{display:flex;flex-direction:row;align-items:center;gap:.5rem;width:80px;justify-content:center}.vertical-slider{writing-mode:bt-lr;-webkit-appearance:slider-vertical;appearance:slider-vertical;width:20px;height:100px;margin:.5rem 0}.vertical-slider::-webkit-slider-track{width:4px;background:var(--border-color);border-radius:2px}.vertical-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--primary-color);border-radius:50%;cursor:pointer}.vertical-slider::-moz-range-track{width:4px;background:var(--border-color);border-radius:2px;border:none}.vertical-slider::-moz-range-thumb{width:16px;height:16px;background:var(--primary-color);border-radius:50%;cursor:pointer;border:none}.resolution-controls{display:flex;flex-direction:column;align-items:center;gap:0rem;max-height:146px}.density-value-container{display:flex;justify-content:center}.density-input{width:40px;padding:4px 2px;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);background-color:var(--background-color);color:var(--text-color);font-size:14px;font-weight:600;text-align:center;transition:border-color var(--transition-fast);display:block;margin:0 auto;-moz-appearance:textfield;appearance:textfield}.density-input::-webkit-outer-spin-button,.density-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.density-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-transparent)}.state-entries-container{display:flex;gap:1rem;align-items:flex-start;overflow:visible}.state-controls-column{display:flex;flex-direction:column;padding-top:1rem;gap:.5rem;flex-shrink:0;align-items:center}.state-entries{display:flex;gap:.75rem;overflow-x:auto;overflow-y:visible!important;padding:1rem 1rem 1rem 1.5rem;width:100%;max-width:100%;background-color:var(--background-color);border-radius:var(--border-radius-md);border:.5px solid var(--border-color);flex:1;min-width:0;box-sizing:border-box;overscroll-behavior:none;touch-action:pan-x}.state-entries::-webkit-scrollbar{height:6px}.state-entries::-webkit-scrollbar-track{background:var(--surface-color);border-radius:3px}.state-entries::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.state-entries::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}.state-entry-wrapper{display:flex;flex-direction:column;align-items:center;min-width:50px;flex-shrink:0;flex:0 0 auto}.state-entry{display:flex;flex-direction:column;gap:.1rem;min-width:50px;flex-shrink:0;align-items:flex-start;flex:0 0 auto;padding:.5rem;border:.5px solid var(--border-color, black);border-radius:var(--border-radius-md);background-color:var(--surface-color);overscroll-behavior:none;touch-action:none}.drag-handle{cursor:grab;padding:.25rem;color:gray;font-size:var(--font-size-sm);display:flex;align-items:center;justify-content:space-evenly;transition:var(--transition-fast);user-select:none;width:calc(100% + 16px);margin:-8px;margin-bottom:.25rem;background-color:#d3d3d3}.drag-dot{display:inline-block;font-size:var(--font-size-sm);line-height:1}.drag-handle:active{cursor:grabbing}.state-entry.dragging{opacity:.5;z-index:1000}.state-entry.dragging .drag-handle{cursor:grabbing}.state-entry.swap-target{transition:all .3s cubic-bezier(.25,.46,.45,.94)!important;box-shadow:0 6px 16px #0000004d!important;opacity:.6!important;background-color:var(--primary-transparent)!important;will-change:transform!important;z-index:1000!important;border:2px solid var(--primary-color)!important}@media (prefers-reduced-motion: reduce){.state-entry.swap-target{transition:none!important}}body.drag-active{overflow:hidden!important;position:fixed!important;width:100%!important;height:100%!important}.state-entry label{font-weight:200;margin:0;margin-top:.25rem;font-size:var(--font-size-xs);writing-mode:vertical-rl;text-orientation:mixed;text-transform:uppercase;white-space:nowrap}.state-controls{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;row-gap:.5rem;align-items:center;justify-items:center}.state-char{width:32px;height:32px;font-weight:200;text-align:center;font-size:var(--font-size-base);padding:.25rem 0;background-color:#fff;border-radius:50%;border:.5px solid var(--border-color);cursor:pointer;transition:var(--transition-fast)}.state-char:hover{border:2px solid black}.state-char:focus{outline:none;box-shadow:0 0 0 2px var(--primary-transparent)}.state-color,.state-bg-color{width:32px;height:32px;padding:0!important;border:.5px solid var(--border-color);cursor:pointer;margin:0!important;-webkit-appearance:none;appearance:none;background:none;overflow:hidden;transition:var(--transition-fast)}.state-color:hover,.state-bg-color:hover{border:2px solid black}.state-color::-webkit-color-swatch-wrapper,.state-bg-color::-webkit-color-swatch-wrapper{padding:0;border:none;overflow:hidden}.state-color::-webkit-color-swatch,.state-bg-color::-webkit-color-swatch{border:none;width:100%;height:100%}.state-color{border-radius:50% 0 0 50%!important;border-right:none!important}.state-bg-color{border-radius:0 50% 50% 0!important}.background-color-container{position:relative;display:flex;align-items:center}.transparency-toggle{position:absolute;bottom:-2px;right:-2px;width:15px;height:15px;border-radius:50%;border:.5px solid var(--border-color);background-color:var(--background-color);color:var(--text-muted);font-size:8px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);z-index:1}.transparency-toggle.active{background-color:var(--primary-color);border-color:var(--border-color);color:var(--text-color)}.transparency-toggle:hover{background-color:var(--primary-color);color:var(--text-color)}.remove-state{background:none;border:none;color:var(--error-color);font-size:1rem;cursor:pointer;padding:0rem;border-radius:var(--border-radius-sm);transition:background-color var(--transition-fast);width:24px;height:24px;display:flex;align-items:center;justify-content:center}.remove-state:hover{background-color:var(--surface-color)}.add-state-button{border:.5px solid var(--border-color);color:var(--text-color);background-color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:var(--font-weight-light);transition:all var(--transition-fast);flex-shrink:0;position:relative;z-index:10}.add-state-button:hover{background-color:var(--primary-color)}.shuffle-states-button{background:none;border:.5px solid var(--border-color);color:var(--text-color);background-color:#fff;width:32px;height:32px;border-radius:0 50% 50% 0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;position:relative;z-index:10}.shuffle-states-button:hover{background-color:var(--primary-color)}.shuffle-controls{position:relative;display:flex;align-items:center;gap:0px;overflow:visible}.shuffle-mode-button{position:relative;width:32px;height:32px;border-radius:50% 0 0 50%;border:1px solid var(--border-color);border-right:none;background-color:#fff;color:var(--text-muted);font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);z-index:100}.shuffle-mode-button:hover{background-color:var(--primary-color);color:var(--text-color)}.shuffle-mode-modal{background-color:var(--background-color);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);max-width:500px;width:90%;max-height:80vh;overflow-y:auto}.mode-options{display:flex;flex-direction:column;gap:12px;margin-top:16px}.mode-option{padding:16px;border:1px solid var(--border-color);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--transition-fast);background-color:var(--surface-color)}.mode-option:hover{border-color:var(--primary-color);background-color:var(--background-color)}.mode-option.selected{border-color:var(--primary-color);background-color:var(--primary-transparent)}.mode-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.mode-number{width:24px;height:24px;border-radius:50%;background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.mode-label{font-weight:600;color:var(--text-color);font-size:16px}.mode-description{color:var(--text-muted);font-size:14px;line-height:1.4;margin:0}.shuffle-states-button svg{width:16px;height:16px}.shuffle-mode-dropdown{position:relative;display:inline-block}.shuffle-mode-dropdown-menu{position:fixed;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);z-index:9999;min-width:200px;margin-top:4px}.shuffle-mode-option{display:flex;align-items:center;gap:12px;padding:12px 16px;width:100%;border:none;background:none;text-align:left;cursor:pointer;transition:all var(--transition-fast);color:var(--text-color);font-size:14px}.shuffle-mode-option:hover{background-color:var(--surface-color)}.shuffle-mode-option.selected{background-color:var(--primary-transparent);color:var(--primary-color)}.shuffle-mode-option .mode-number{width:20px;height:20px;border-radius:50%;background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}.shuffle-mode-option .mode-label{font-weight:500}.ascii-loading-overlay{position:absolute;inset:0;background-color:#000000b3;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--border-radius-md);z-index:10}.ascii-loading-overlay .spinner{width:32px;height:32px;border:3px solid var(--border-color);border-top:3px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.ascii-loading-overlay .loading-text{color:var(--text-color);margin-top:.5rem;font-size:var(--font-size-sm)}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.help-modal{background-color:var(--background-color);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);max-width:400px;width:90%;max-height:80vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--border-color)}.modal-header h3{margin:0;color:var(--text-color);font-size:var(--font-size-lg)}.modal-close{background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);transition:background-color var(--transition-fast)}.modal-close:hover{background-color:var(--surface-color);color:var(--text-color)}.modal-content{padding:1.5rem}.modal-content p{margin:0;color:var(--text-color);line-height:1.6}.help-button{background:none;border:1px solid var(--border-color);color:var(--text-muted);width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:all var(--transition-fast);margin-left:.5rem}.help-button:hover{background-color:var(--primary-color);border-color:var(--primary-color);color:var(--text-color)}@font-face{font-family:DejaVu Sans Mono;src:url(./DejaVuSansMono-BxHJfdBA.woff) format("woff2"),url(./DejaVuSansMono-BxHJfdBA.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}.ascii-section{margin:2rem 0;padding:2rem;background-color:var(--surface-color);border-radius:var(--border-radius-lg);position:relative}.ascii-container{background-color:var(--background-color);padding:0rem!important;font-family:var(--font-family);white-space:pre;overflow-x:auto;max-width:100%;margin:0!important;justify-self:center}.ascii-line{display:block;line-height:1;width:100%}.ascii-char{display:inline-flex;justify-content:center;align-items:center;width:1em;height:1em;border-radius:0}.animation-section{margin:2rem 0;padding:2rem;background-color:var(--surface-color);border-radius:var(--border-radius-lg)}.animation-form{border:none}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}@media (max-width: 500px){.config-section{height:auto;min-height:200px;flex-direction:column;gap:1rem}.config-grid{flex-direction:column;gap:1rem}.form-grid{grid-template-columns:1fr}.entries{max-width:100%;overflow-x:auto}.state-entry{min-width:50px}}.character-selector-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;backdrop-filter:blur(2px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;box-sizing:border-box}.character-selector-modal{position:relative;width:90vw;max-width:600px;max-height:80vh;background:#fff;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);z-index:10000;display:flex;flex-direction:column;font-family:var(--font-family);animation:modalSlideIn .2s ease-out}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:var(--spacing-xs);padding:var(--spacing-md);overflow-y:auto;max-height:400px;z-index:1000}.character-item{width:40px;height:40px;border:1px solid var(--border-color);background:#fff;border-radius:var(--border-radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--font-family);font-size:var(--font-size-base);transition:var(--transition-fast)}.character-item.selected{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.character-item.supported{background-color:var(--background);border-color:var(--border)}.character-item.unsupported{background-color:var(--background-muted);border-color:var(--border-muted);opacity:.6;cursor:not-allowed}.character-item.unsupported:hover{background-color:var(--background-muted);border-color:var(--border-muted);transform:none}.unsupported-indicator{position:absolute;top:2px;right:2px;font-size:.6rem;color:var(--warning);background:var(--background);border-radius:50%;width:12px;height:12px;display:flex;align-items:center;justify-content:center;line-height:1}.animation-display{margin-top:2rem;padding:1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--border-radius)}.animation-display h3{margin:0 0 1rem;color:var(--text);font-size:1.1rem;font-weight:600}.animation-container{display:flex;justify-content:center;align-items:center;background:var(--background);border:1px solid var(--border);border-radius:var(--border-radius);padding:1rem;min-height:100px}.animation-gif{max-width:100%;max-height:100%;border-radius:var(--border-radius);box-shadow:0 2px 8px #0000001a}.animation-actions{margin-top:1rem;display:flex;justify-content:center;gap:1rem}.app{min-height:100vh;background:var(--background-color);background-image:url(https://arweave.net/jZ3EAO7Pl3ldWyNLkfDJ9ksghEouDZSuOAvS9T9Ii6M);background-repeat:repeat;background-position:center;background-attachment:fixed;background-size:160%;color:var(--text-color);font-family:var(--font-family)}.app-header{padding:2rem 1rem;text-align:center}.header-content{display:flex;align-items:center;flex-direction:column}.logo-container{height:100px;width:100px;display:flex;position:relative;margin-bottom:2.75rem}.logo-bar,.logo-block{position:absolute;width:20px;height:20px;border-radius:10px;border:.5px solid black;background:linear-gradient(45deg,var(--primary-color),var(--secondary-color));background-size:300% 300%}.logo-bar{height:20px;width:60px}.logo-block,.logo-bar{animation:color-blend 3s infinite ease-in-out}@keyframes color-blend{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes color-blend-alt{0%,to{background-position:100% 50%}50%{background-position:0% 50%}}.app-title{font-size:1.5rem;font-weight:200;letter-spacing:2px;margin:1.25rem 0 0}.app-description{margin:.4rem 0 .75rem;color:var(--text-color);font-weight:300;font-size:var(--font-size-sm);font-style:italic}.version-info{display:flex;justify-content:center;margin-bottom:.4rem;gap:.5rem}.version-badge{font-size:10px;padding:.25rem .5rem;background-color:#90ee90;border-radius:5px;border:.5px solid var(--border-color)}.company-link{font-size:10px;padding:.25rem .5rem;background-color:#000;color:#fff;border-radius:5px;text-decoration:none;transition:opacity .2s ease}.company-link:hover{opacity:.8}.app-main{max-width:1000px;margin:0 auto;padding:0 1rem}.loading-overlay{position:fixed;inset:0;background:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.spinner{width:40px;height:40px;border:4px solid var(--border-color);border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.loading-text{margin-top:1rem;color:#fff}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.error-message{background:var(--background-color);padding:2rem;border-radius:var(--border-radius-lg);text-align:center;max-width:400px;margin:1rem}.error-message h3{color:var(--error-color);margin-bottom:1rem}.initialization-overlay{position:fixed;inset:0;background:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.character-selector-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;backdrop-filter:blur(2px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:1rem;box-sizing:border-box}.character-selector-modal{position:relative;width:90vw;max-width:600px;max-height:80vh;background:#fff;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);z-index:10001;display:flex;flex-direction:column;font-family:var(--font-family);animation:modalSlideIn .2s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.character-selector-header{display:flex;align-items:center;padding:var(--spacing-md);border-bottom:1px solid var(--border-color);gap:var(--spacing-sm)}.character-search-input{flex:1;padding:var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);font-size:var(--font-size-base);font-family:var(--font-family)}.character-search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-transparent)}.character-selector-close{width:32px;height:32px;border:none;background:var(--surface-color);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);color:var(--text-muted);transition:var(--transition-fast)}.character-selector-close:hover{background:var(--border-color);color:var(--text-color)}.character-selector-content{display:flex;flex-direction:column;flex:1;overflow:hidden}.character-category-selector{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);border-bottom:1px solid var(--border-color)}.category-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-color);white-space:nowrap;display:inline;vertical-align:middle;writing-mode:horizontal-tb!important;text-orientation:mixed!important}.category-dropdown{flex:1;padding:var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);background:#fff;font-size:var(--font-size-sm);font-family:var(--font-family);cursor:pointer;transition:var(--transition-fast)}.category-dropdown:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-transparent)}.category-dropdown:hover{border-color:var(--primary-color)}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:var(--spacing-xs);padding:var(--spacing-md);overflow-y:auto;max-height:400px;background:var(--background-color);border-radius:var(--border-radius-sm)}.character-item{width:40px;height:40px;border:1px solid var(--border-color);background:var(--background-color);border-radius:var(--border-radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-color);transition:var(--transition-fast);position:relative}.character-item:hover{border-color:var(--primary-color);background:var(--primary-transparent);transform:scale(1.05)}.character-item:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-transparent)}.character-item:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.character-item.selected{background:var(--primary-color);color:var(--text-color);border-color:var(--primary-color);font-weight:var(--font-weight-medium)}.no-results{padding:var(--spacing-lg);text-align:center;color:var(--text-muted);font-style:italic}.character-load-more{padding:var(--spacing-md);text-align:center;color:var(--text-muted);font-size:var(--font-size-sm);border-top:1px solid var(--border-color);background:var(--surface-color)}.character-load-more p{margin:var(--spacing-xs) 0}.character-item.supported{background-color:var(--background-color);border-color:var(--border-color);color:var(--text-color)}.character-item.unsupported{background-color:var(--surface-color);border-color:var(--border-color);color:var(--text-muted);opacity:.6;cursor:not-allowed}.character-item.unsupported:hover{background-color:var(--surface-color);border-color:var(--border-color);transform:none;color:var(--text-muted)}.character-item.unsupported:disabled{opacity:.4;cursor:not-allowed}.unsupported-indicator{position:absolute;top:2px;right:2px;font-size:.6rem;color:var(--warning-color);background:var(--background-color);border-radius:50%;width:12px;height:12px;display:flex;align-items:center;justify-content:center;line-height:1;border:1px solid var(--border-color)}@media (max-width: 768px){.character-selector-backdrop{padding:.5rem}.character-selector-modal{width:95vw;max-height:90vh}.character-grid{grid-template-columns:repeat(auto-fill,minmax(35px,1fr));gap:var(--spacing-xs);padding:var(--spacing-sm)}.character-item{width:35px;height:35px;font-size:var(--font-size-sm)}.character-category-selector{padding:var(--spacing-sm);flex-direction:row;align-items:center;gap:var(--spacing-xs)}.category-label,.category-dropdown{font-size:var(--font-size-xs)}}