*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #012b36;--bg-light: #073642;--bg-lighter: #0a4a5a;--text: #93a1a1;--text-bright: #eee8d5;--accent: #ca4b15;--accent-hover: #e05a20;--border: #1a5a6a;--cell-hover: rgba(255,255,255,.15);--cell-selected: #268bd2;--danger: #dc322f;--success: #2aa198;--font-mono: "Menlo", "Monaco", "Consolas", "Courier New", monospace;--sidebar-width: 320px}body{background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:13px;height:100vh;overflow:hidden;display:flex;flex-direction:column}.app-nav{display:flex;align-items:center;padding:0 16px;height:44px;background:var(--bg-light);border-bottom:1px solid var(--border);flex-shrink:0;gap:8px}.nav-logo{font-size:13px;font-weight:700;color:var(--accent);text-decoration:none;margin-right:24px;white-space:nowrap}.nav-logo:hover{color:var(--accent-hover)}.nav-links{display:flex;gap:4px}.nav-link{padding:5px 14px;color:var(--text);text-decoration:none;font-size:12px;border-radius:4px;transition:all .15s}.nav-link:hover,.nav-link.active{background:var(--bg-lighter);color:var(--text-bright)}.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}.page{display:none;flex:1;overflow:hidden;flex-direction:column}.page.active{display:flex}.explore-placeholder{flex:1;display:flex;align-items:center;justify-content:center}.explore-hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}.explore-hero h1{font-size:20px;color:var(--text-bright);font-weight:700}.explore-hero p{font-size:13px;color:var(--text);max-width:400px}.explore-mascot{font-family:var(--font-mono);font-size:48px;line-height:1;white-space:pre;color:var(--accent);-webkit-user-select:none;user-select:none}.explore-cta{display:inline-block;padding:10px 24px;background:var(--accent);color:#fff;text-decoration:none;border-radius:6px;font-size:13px;font-weight:700;transition:background .15s;margin-top:8px}.explore-cta:hover{background:var(--accent-hover)}.explore-content{flex:1;overflow-y:auto;padding:24px}.explore-header{text-align:center;margin-bottom:32px}.explore-header h1{font-size:20px;color:var(--text-bright);font-weight:700;margin-bottom:8px}.explore-header p{font-size:13px;color:var(--text)}.explore-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;max-width:1200px;margin:0 auto}.explore-card{background:var(--bg-light);border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s}.explore-card:hover{border-color:var(--accent);transform:translateY(-2px)}.card-display{font-family:var(--font-mono);font-size:14px;line-height:1;white-space:pre;padding:20px;text-align:center;min-height:80px;display:flex;align-items:center;justify-content:center;background:var(--bg);-webkit-user-select:none;user-select:none;transition:opacity .2s}.card-loading{animation:shimmer 1.5s infinite}@keyframes shimmer{0%,to{opacity:1}50%{opacity:.5}}.card-info{padding:10px 12px}.card-title{font-size:12px;color:var(--text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}.card-author{font-size:10px;color:#557}.explore-load-more{text-align:center;margin-top:24px}.explore-load-btn{padding:10px 32px;background:var(--bg-light);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;cursor:pointer;border-radius:6px;transition:all .15s}.explore-load-btn:hover{background:var(--bg-lighter);color:var(--text-bright)}.explore-empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 0;color:var(--text);font-size:14px}.explore-empty .explore-mascot{font-family:var(--font-mono);font-size:48px;line-height:1;white-space:pre;color:var(--accent);-webkit-user-select:none;user-select:none}.viewer-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px}.viewer-display{font-family:var(--font-mono);font-size:64px;line-height:1;white-space:pre;letter-spacing:0px;-webkit-user-select:none;user-select:none;color:var(--accent)}.viewer-controls{display:flex;flex-direction:column;align-items:center;gap:12px}.viewer-title{font-size:16px;color:var(--text-bright);font-weight:700;margin-bottom:4px}.viewer-control-row{display:flex;align-items:center;gap:10px}.viewer-btn{padding:6px 16px;background:var(--bg-light);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;cursor:pointer;border-radius:4px;transition:all .15s}.viewer-btn:hover{background:var(--bg-lighter);color:var(--text-bright)}.viewer-btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}.viewer-btn-accent:hover{background:var(--accent-hover);color:#fff}.viewer-label{font-size:11px;color:var(--text);display:flex;align-items:center;gap:4px}.viewer-select{background:var(--bg-light);border:1px solid var(--border);color:var(--text-bright);font-family:var(--font-mono);font-size:11px;border-radius:3px;padding:3px 6px}.auth-signin-btn,.auth-user-btn{padding:5px 14px;background:var(--accent);border:1px solid var(--accent);color:#fff;font-family:var(--font-mono);font-size:11px;cursor:pointer;border-radius:4px;transition:background .15s}.auth-signin-btn:hover{background:var(--accent-hover)}.auth-user-btn{background:var(--bg-lighter);border-color:var(--border);color:var(--text-bright)}.auth-user-btn:hover{background:var(--border)}.auth-providers{display:flex;flex-direction:column;gap:8px}.auth-provider-btn{padding:10px;background:var(--bg);border:1px solid var(--border);color:var(--text-bright);font-family:var(--font-mono);font-size:12px;cursor:pointer;border-radius:4px;text-align:center;transition:all .15s}.auth-provider-btn:hover{background:var(--bg-lighter);border-color:var(--text)}.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:#557;font-size:11px}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border)}.save-status{font-size:10px;padding:2px 8px;border-radius:3px;transition:all .3s}.save-status-saving{color:var(--text)}.save-status-saved{color:var(--success)}.save-status-error{color:var(--danger)}.topbar-cloud{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}.topbar-cloud:hover{background:var(--accent-hover)!important}.topbar{display:flex;align-items:center;padding:8px 16px;background:var(--bg-light);border-bottom:1px solid var(--border);gap:8px;flex-shrink:0}.topbar-title{font-size:14px;font-weight:700;color:var(--text-bright);margin-right:16px}.tab-btn{padding:6px 14px;background:transparent;border:1px solid transparent;color:var(--text);font-family:var(--font-mono);font-size:12px;cursor:pointer;border-radius:4px;transition:all .15s}.tab-btn:hover{background:var(--bg-lighter)}.tab-btn.active{background:var(--bg-lighter);border-color:var(--border);color:var(--text-bright)}.topbar-spacer{flex:1}.topbar-action{padding:5px 12px;background:var(--bg-lighter);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:11px;cursor:pointer;border-radius:4px}.topbar-action:hover{background:var(--border);color:var(--text-bright)}.editor-main{flex:1;display:flex;overflow:hidden}.tab-content{display:none;flex:1;overflow:hidden}.tab-content.active{display:flex}.editor-tab{display:flex;flex-direction:row;height:100%}.unicode-panel{width:var(--sidebar-width);border-right:1px solid var(--border);background:var(--bg-light);display:flex;flex-direction:column;flex-shrink:0;height:100%;overflow:hidden}.editor-right{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.keyframe-strip{display:flex;flex-wrap:wrap;align-items:center;padding:8px 16px;gap:6px;background:var(--bg-light);border-bottom:1px solid var(--border);overflow-x:auto;flex-shrink:0}.kf-thumb{padding:4px 10px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font-mono);font-size:11px;cursor:pointer;white-space:nowrap;transition:all .15s;position:relative}.kf-thumb:hover{border-color:var(--accent)}.kf-thumb.active{border-color:var(--accent);background:var(--bg-lighter);color:var(--text-bright)}.kf-thumb .kf-delete{display:none;position:absolute;top:-6px;right:-6px;width:16px;height:16px;background:var(--danger);color:#fff;border:none;border-radius:50%;font-size:10px;line-height:16px;text-align:center;cursor:pointer}.kf-thumb:hover .kf-delete{display:block}.kf-add{padding:4px 10px;background:transparent;border:1px dashed var(--border);border-radius:4px;color:var(--text);font-family:var(--font-mono);font-size:11px;cursor:pointer}.kf-add:hover{border-color:var(--accent);color:var(--accent)}.grid-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow:auto;min-width:0;min-height:0}.grid-controls{display:flex;gap:6px;margin-bottom:12px;align-items:center}.grid-controls button{padding:3px 8px;background:var(--bg-light);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:11px;cursor:pointer;border-radius:3px}.grid-controls button:hover{background:var(--bg-lighter);color:var(--text-bright)}.grid-controls span{color:var(--text);font-size:11px}.char-grid-wrapper{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:16px;display:inline-block}.char-grid{display:inline-grid;font-family:var(--font-mono);line-height:1;letter-spacing:0px;-webkit-user-select:none;user-select:none}.char-cell{width:1ch;height:1em;cursor:pointer;text-align:center;position:relative;transition:outline-color .1s;outline:1px solid transparent}.char-cell:hover{outline:1px solid var(--cell-hover)}.char-cell.selected{outline:2px solid var(--cell-selected);z-index:1}.char-cell.has-color:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:currentColor;opacity:.5}.grid-props{display:flex;gap:12px;margin-top:16px;align-items:center;flex-wrap:wrap}.grid-props label{font-size:11px;color:var(--text);display:flex;align-items:center;gap:4px}.grid-props input[type=text]{background:var(--bg-light);border:1px solid var(--border);color:var(--text-bright);font-family:var(--font-mono);font-size:11px;padding:3px 6px;border-radius:3px;width:120px}.grid-props input[type=color]{width:28px;height:22px;border:1px solid var(--border);border-radius:3px;background:var(--bg-light);cursor:pointer;padding:0}.grid-props input[type=number]{background:var(--bg-light);border:1px solid var(--border);color:var(--text-bright);font-family:var(--font-mono);font-size:11px;padding:3px 6px;border-radius:3px;width:55px}.btn-sm{padding:3px 8px;background:var(--bg-light);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:11px;cursor:pointer;border-radius:3px}.btn-sm:hover{background:var(--bg-lighter);color:var(--text-bright)}.unicode-search{padding:8px;border-bottom:1px solid var(--border)}.unicode-search input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text-bright);font-family:var(--font-mono);font-size:12px;padding:6px 8px;border-radius:4px}.unicode-search input::placeholder{color:#557}.unicode-recent{padding:6px 8px;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:2px;max-height:60px;overflow-y:auto}.unicode-recent-label{font-size:10px;color:#557;width:100%;margin-bottom:2px}.unicode-char-btn{width:28px;height:28px;background:var(--bg);border:1px solid var(--border);color:var(--text-bright);font-family:var(--font-mono);font-size:16px;cursor:pointer;border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;position:relative}.unicode-char-btn:hover{border-color:var(--accent);background:var(--bg-lighter)}.unicode-char-btn.selected-char{border-color:var(--accent);background:var(--accent);color:#fff}.unicode-char-btn .fav-star{position:absolute;top:-2px;right:-2px;font-size:8px;color:gold;display:none}.unicode-char-btn.is-fav .fav-star{display:block}.unicode-categories{flex:1;overflow-y:auto;padding:4px}.unicode-cat-header{padding:6px 8px;font-size:11px;color:var(--text);cursor:pointer;border-radius:3px;display:flex;justify-content:space-between;align-items:center}.unicode-cat-header:hover{background:var(--bg-lighter)}.unicode-cat-header.active{color:var(--text-bright);background:var(--bg-lighter)}.unicode-cat-chars{display:none;flex-wrap:wrap;gap:2px;padding:4px 8px 8px}.unicode-cat-chars.open{display:flex}.unicode-favorites-section{padding:6px 8px;border-bottom:1px solid var(--border)}.unicode-fav-label{font-size:10px;color:#557;margin-bottom:2px;display:flex;justify-content:space-between;align-items:center}.unicode-fav-chars{display:flex;flex-wrap:wrap;gap:2px;max-height:60px;overflow-y:auto}.timeline-tab{flex-direction:column;overflow:hidden}.timeline-body{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:16px;gap:12px}.timeline-seq-manager{display:flex;flex-direction:column;gap:6px;flex-shrink:0}.seq-tabs{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.seq-tab{padding:4px 12px;background:var(--bg-light);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font-mono);font-size:11px;cursor:pointer;transition:all .15s}.seq-tab:hover{background:var(--bg-lighter);color:var(--text-bright)}.seq-tab.active{background:var(--bg-lighter);border-color:var(--accent);color:var(--text-bright)}.seq-tab.seq-new{border-style:dashed;background:transparent}.seq-tab.seq-new:hover{border-color:var(--accent);color:var(--accent)}.seq-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.btn-danger{color:var(--danger)!important;border-color:var(--danger)!important}.btn-danger:hover{background:var(--danger)!important;color:#fff!important}.timeline-strip-wrapper{overflow-x:auto;border:1px solid var(--border);border-radius:4px;background:var(--bg-light);padding:12px;flex-shrink:0}.timeline-strip{display:flex;gap:6px;align-items:stretch;min-height:80px}.timeline-step{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:8px;min-width:100px;cursor:grab;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;transition:border-color .15s}.timeline-step:hover{border-color:var(--accent)}.timeline-step.dragging{opacity:.4}.timeline-step.drag-over{border-color:var(--accent);border-style:dashed}.timeline-step.playing{border-color:var(--success);box-shadow:0 0 8px #2aa1984d}.timeline-step-preview{font-family:var(--font-mono);font-size:8px;line-height:1;white-space:pre;color:var(--accent);text-align:center}.timeline-step-name{font-size:10px;color:var(--text);text-align:center;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timeline-step-duration{display:flex;align-items:center;gap:2px}.timeline-step-duration input{width:50px;background:var(--bg-light);border:1px solid var(--border);color:var(--text-bright);font-family:var(--font-mono);font-size:10px;padding:2px 4px;border-radius:2px;text-align:center}.timeline-step-duration span{font-size:10px;color:#557}.timeline-step .step-delete{position:absolute;top:-5px;right:-5px;width:14px;height:14px;background:var(--danger);color:#fff;border:none;border-radius:50%;font-size:9px;line-height:14px;text-align:center;cursor:pointer;display:none}.timeline-step:hover .step-delete{display:block}.timeline-add-step{min-width:80px;background:transparent;border:1px dashed var(--border);border-radius:4px;color:var(--text);font-family:var(--font-mono);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center}.timeline-add-step:hover{border-color:var(--accent);color:var(--accent)}.timeline-add-dropdown{position:absolute;background:var(--bg-light);border:1px solid var(--border);border-radius:4px;padding:4px;z-index:100;display:none;max-height:200px;overflow-y:auto}.timeline-add-dropdown.open{display:block}.timeline-add-dropdown button{display:block;width:100%;padding:4px 10px;background:transparent;border:none;color:var(--text);font-family:var(--font-mono);font-size:11px;cursor:pointer;text-align:left;border-radius:2px}.timeline-add-dropdown button:hover{background:var(--bg-lighter);color:var(--text-bright)}.timeline-preview-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:0}.timeline-preview-display{font-family:var(--font-mono);font-size:48px;line-height:1;white-space:pre;letter-spacing:0px;-webkit-user-select:none;user-select:none;color:var(--accent)}.timeline-controls{display:flex;align-items:center;gap:10px}.timeline-controls button{padding:5px 12px;background:var(--bg-light);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;cursor:pointer;border-radius:4px}.timeline-controls button:hover{background:var(--bg-lighter);color:var(--text-bright)}.timeline-controls button.active{border-color:var(--success);color:var(--success)}.timeline-controls label{font-size:11px;display:flex;align-items:center;gap:4px}.timeline-controls select,.timeline-controls input[type=checkbox]{background:var(--bg-light);border:1px solid var(--border);color:var(--text-bright);font-family:var(--font-mono);font-size:11px;border-radius:3px;padding:2px 4px}.timeline-export{display:flex;gap:6px;flex-shrink:0}.timeline-export button{padding:5px 12px;background:var(--bg-light);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:11px;cursor:pointer;border-radius:4px}.timeline-export button:hover{background:var(--bg-lighter);color:var(--text-bright)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:none;align-items:center;justify-content:center;z-index:200}.modal-overlay.open{display:flex}.modal{background:var(--bg-light);border:1px solid var(--border);border-radius:8px;padding:20px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto}.modal h3{color:var(--text-bright);font-size:14px;margin-bottom:12px}.modal textarea{width:100%;height:200px;background:var(--bg);border:1px solid var(--border);color:var(--text-bright);font-family:var(--font-mono);font-size:11px;padding:8px;border-radius:4px;resize:vertical}.modal-actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}.modal-actions button{padding:6px 14px;border:1px solid var(--border);font-family:var(--font-mono);font-size:11px;cursor:pointer;border-radius:4px}.modal-actions .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.modal-actions .btn-primary:hover{background:var(--accent-hover)}.modal-actions .btn-cancel{background:var(--bg);color:var(--text)}.modal-actions .btn-cancel:hover{background:var(--bg-lighter)}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--bg-lighter);border:1px solid var(--border);color:var(--text-bright);padding:8px 16px;border-radius:4px;font-size:12px;z-index:300;opacity:0;transition:opacity .3s;pointer-events:none}.toast.show{opacity:1}.history-dock{position:fixed;bottom:20px;right:20px;display:flex;align-items:center;gap:8px;z-index:50}.undo-indicator{font-size:10px;color:#446;cursor:help}.history-toggle{background:var(--bg-light, #073642);color:var(--text, #93a1a1);border:1px solid var(--border, #14323c);font-family:var(--font-mono);font-size:10px;padding:4px 8px;border-radius:4px;cursor:pointer}.history-toggle:hover{background:var(--bg-lighter, #0a3a48);color:var(--text-bright, #eee8d5)}.history-panel{position:absolute;bottom:30px;right:0;width:280px;max-height:360px;background:var(--bg-light, #073642);border:1px solid var(--border, #14323c);border-radius:6px;box-shadow:0 8px 24px #0006;display:flex;flex-direction:column;overflow:hidden;font-family:var(--font-mono);font-size:11px}.history-panel[hidden]{display:none}.history-panel-header{padding:8px 10px;border-bottom:1px solid var(--border, #14323c);color:var(--text-bright, #eee8d5);font-weight:600}.history-title{font-size:11px}.history-nav{display:flex;gap:6px;padding:6px 10px;border-bottom:1px solid var(--border, #14323c)}.history-nav .btn-sm{flex:1}.history-list{flex:1;overflow-y:auto;display:flex;flex-direction:column}.history-row{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:8px;padding:6px 10px;background:transparent;border:none;border-bottom:1px solid rgba(20,50,60,.4);color:var(--text, #93a1a1);font-family:var(--font-mono);font-size:11px;cursor:pointer;text-align:left}.history-row:hover{background:#ca4b1514}.history-row.current{background:#ca4b152e;color:var(--text-bright, #eee8d5)}.history-row-idx,.history-row-time{color:#586e75;font-size:10px}.history-empty{padding:12px;color:var(--text, #93a1a1);text-align:center}.seq-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:10px;margin-right:8px;border:1px solid var(--border);white-space:nowrap}.seq-badge-local{color:#93a1a1}.seq-badge-saved{color:#859900;border-color:#859900}.seq-badge-public{color:#ca4b15;border-color:#ca4b15}.seq-badge-offline{color:#6c7b7b}.btn-cloud{background:#1a5a6a;color:#eee8d5;border-color:#1a5a6a}.btn-cloud:hover:not(:disabled){background:#2a6a7a}.btn-cloud:disabled{opacity:.5;cursor:not-allowed}.btn-publish{background:#ca4b15;color:#fdf6e3;border-color:#ca4b15}.btn-publish:hover{background:#da5b25}.btn-danger-outline{background:transparent;color:#dc322f;border:1px solid #dc322f}.btn-danger-outline:hover{background:#dc322f1a}.kf-thumb-name{display:inline}.kf-cloud{margin-left:4px;font-size:10px;color:#2aa198}#page-my-animations{overflow-y:auto}.my-anim-container{max-width:900px;margin:0 auto;padding:32px 20px}.my-anim-header h1{color:var(--accent);font-size:24px;margin:0 0 8px}.my-anim-header p{color:#93a1a1;margin:0 0 24px;font-size:13px}.my-anim-empty{text-align:center;color:#93a1a1;padding:40px 20px;border:1px dashed var(--border);border-radius:8px}.my-anim-empty .my-anim-signin,.my-anim-empty .explore-cta{margin-top:12px}.my-anim-loading{color:#6c7b7b;padding:20px;text-align:center}.my-anim-list{display:flex;flex-direction:column;gap:12px}.my-anim-card{display:flex;align-items:center;gap:16px;padding:12px 16px;background:#002b3666;border:1px solid var(--border);border-radius:6px}.my-anim-preview{font-family:Menlo,Monaco,Consolas,monospace;font-size:14px;line-height:1;white-space:pre;min-width:80px;-webkit-user-select:none;user-select:none}.my-anim-body{flex:1;min-width:0}.my-anim-title{color:#eee8d5;font-size:14px;font-weight:600;margin-bottom:4px}.my-anim-meta{display:flex;align-items:center;gap:8px;font-size:10px;color:#93a1a1}.my-anim-updated{color:#6c7b7b}.my-anim-actions{display:flex;gap:6px;flex-shrink:0}.palettes-panel{width:260px;border-left:1px solid var(--border);background:var(--bg-light);flex-shrink:0;height:100%;overflow-y:auto;display:flex;flex-direction:column;padding:12px;gap:16px}.palettes-header{font-size:12px;font-weight:600;color:var(--text-bright);text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;border-bottom:1px solid var(--border)}.palette-section{display:flex;flex-direction:column;gap:8px}.palette-section-label{font-size:10px;color:var(--text);text-transform:uppercase;letter-spacing:.06em}.palette-saved-header{display:flex;align-items:center;justify-content:space-between}.palette-swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.palette-swatch{width:100%;aspect-ratio:1 / 1;border-radius:4px;border:2px solid var(--bg);cursor:pointer;padding:0;background:transparent;transition:transform .08s,outline-color .1s;outline:2px solid transparent;outline-offset:1px}.palette-swatch:hover{transform:scale(1.05)}.palette-swatch.empty{border:2px dashed var(--border);background:transparent}.palette-swatch.active{outline:2px solid var(--accent)}.palette-slot-editor{display:flex;align-items:center;gap:6px;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;flex-wrap:wrap}.palette-slot-editor input[type=color]{width:28px;height:24px;border:1px solid var(--border);border-radius:3px;background:var(--bg-light);cursor:pointer;padding:0}.palette-hex-input{background:var(--bg-light);border:1px solid var(--border);color:var(--text-bright);font-family:var(--font-mono);font-size:11px;padding:3px 6px;border-radius:3px;width:80px}.palette-actions{display:flex;flex-wrap:wrap;gap:6px}.palette-actions .btn-sm,.palette-saved-actions .btn-sm,.palette-saved-header .btn-sm,.palette-slot-editor .btn-sm{padding:4px 8px;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:10px;cursor:pointer;border-radius:3px}.palette-actions .btn-sm:hover,.palette-saved-actions .btn-sm:hover,.palette-saved-header .btn-sm:hover,.palette-slot-editor .btn-sm:hover{background:var(--bg-lighter);color:var(--text-bright);border-color:var(--accent)}.palette-actions .btn-sm[disabled]{opacity:.4;cursor:not-allowed}.palette-actions .btn-sm[disabled]:hover{background:var(--bg);color:var(--text);border-color:var(--border)}.palette-empty-msg{font-size:11px;color:var(--text);font-style:italic}.palette-saved-list{display:flex;flex-direction:column;gap:8px}.palette-saved-row{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:8px;display:flex;flex-direction:column;gap:6px}.palette-saved-name{font-size:11px;color:var(--text-bright);font-weight:600}.palette-mini-row{display:flex;gap:3px}.palette-mini{width:16px;height:16px;border-radius:2px;border:1px solid var(--bg-light)}.palette-mini.empty{border:1px dashed var(--border);background:transparent}.palette-saved-actions{display:flex;gap:4px;justify-content:flex-end}.btn-danger-outline{border-color:var(--danger)!important;color:var(--danger)!important}.btn-danger-outline:hover{background:var(--danger)!important;color:#fff!important}.char-grid-wrapper{transition:background-color .1s ease}