.visualizer-page{background:oklch(98% .003 220);color:oklch(25% .015 240)}.visualizer-shell{max-width:1440px;margin:auto;padding:28px 40px 20px}.visualizer-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.visualizer-heading h1{font-size:28px;letter-spacing:-1px;margin:6px 0}.visualizer-heading h1 span{color:var(--accent,#2563eb)}.visualizer-heading p{margin:0;color:#737b83;font-size:13px}.back-link{font-size:12px;color:inherit;text-decoration:none}.palette-workspace{border:1px solid #dfe3e7;border-radius:12px;background:#fcfdfd;overflow:visible}.palette-toolbar{display:flex;justify-content:space-between;padding:12px 16px;gap:12px}.palette-actions{display:flex;align-items:center;gap:8px}.palette-actions button,.export-menu summary{border:1px solid #dce1e4;background:#fcfdfd;border-radius:6px;padding:8px 12px;font:inherit;font-size:12px;cursor:pointer;color:inherit;min-height:35px}.palette-actions .primary{background:#252d35;color:#fafbfc;border-color:#252d35}.palette-actions button:hover,.export-menu summary:hover{filter:brightness(.94)}.palette-actions button:disabled{opacity:.35;cursor:not-allowed}.palette-actions #color-count{font-size:12px;color:#68737c;margin-right:6px}.swatches{display:flex;min-height:108px}.swatch{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:end;padding:16px 4px;gap:8px}.swatch input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.swatch input[type=text]{z-index:1;width:90px;max-width:100%;font:600 13px ui-monospace,monospace;text-align:center;background:transparent;border:1px solid transparent;border-radius:4px;color:inherit;padding:4px 0;text-transform:uppercase}.swatch input[type=text]:hover,.swatch input[type=text]:focus{border-color:currentColor;outline-offset:2px}.swatch .swatch-number{pointer-events:none;z-index:1;opacity:.65;font-size:10px}.palette-caption{display:flex;justify-content:space-between;padding:10px 16px;color:#737b83;font-size:11px}.palette-caption kbd{border:1px solid #ddd;padding:1px 5px;border-radius:3px;font:inherit}.export-menu{position:relative}.export-menu summary{list-style:none}.export-menu summary::-webkit-details-marker{display:none}.export-menu>div{position:absolute;right:0;top:42px;width:170px;padding:6px;background:#fcfdfd;border:1px solid #dfe3e7;border-radius:8px;box-shadow:0 8px 24px #20283018;z-index:5}.export-menu button{display:block;width:100%;text-align:left;border:0}.preview-heading{display:flex;align-items:center;justify-content:space-between;margin:28px 0 14px}.preview-heading h2{font-size:14px;font-weight:600;margin:0}.preview-heading>span{font-size:9px;color:#768078;letter-spacing:1.5px}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.preview-grid figure{margin:0;min-width:0}.artwork{background:#f0f1f1;border:1px solid #e5e7e8;border-radius:8px;overflow:hidden}.artwork svg{display:block;width:100%;height:auto}.preview-grid figcaption{display:flex;justify-content:space-between;font-size:11px;margin-top:8px;color:#7a828a}.preview-grid figcaption span:first-child{font-weight:600;color:#46515b}.visualizer-footnote{text-align:center;font-size:11px;color:#7a828a;margin:26px 0 4px}#palette-status{font-size:12px;text-align:center;min-height:18px;margin:4px;color:#46515b}button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid #2563eb;outline-offset:3px}@media(min-width:1500px){.visualizer-shell{max-width:1540px}}@media(max-width:700px){.visualizer-shell{padding:22px 16px}.visualizer-heading h1{font-size:23px}.back-link{display:none}.preview-grid{grid-template-columns:1fr;gap:22px}.palette-toolbar{padding:10px;flex-wrap:wrap}.palette-actions{gap:5px}.palette-actions button,.export-menu summary{padding:8px}.swatches{flex-wrap:wrap}.swatch{flex:1 0 23%;min-height:90px}.palette-caption>span:last-child{display:none}.preview-heading{margin-top:24px}}

.dashboard-preview{grid-column:1 / -1}.dashboard-preview .artwork{overflow-x:auto}.dashboard-preview svg{min-width:680px}@media(max-width:700px){.dashboard-preview .artwork{border-radius:6px}.dashboard-preview figcaption{flex-wrap:wrap;gap:4px}}

#copy-fallback{padding:10px 16px;font-size:12px}#copy-values{width:min(100%,520px);padding:8px;border:1px solid #dce1e4;border-radius:4px;font-family:monospace}.palette-toolbar>.palette-actions{flex-wrap:wrap}@media(max-width:700px){.palette-caption>span:last-child{display:inline}.palette-caption{flex-wrap:wrap;gap:6px}}

#palette-mode{max-width:180px;min-height:35px;padding:7px 26px 7px 10px;border:1px solid #dce1e4;border-radius:6px;background:#fcfdfd;color:inherit;font:inherit;font-size:12px}.palette-toolbar{flex-wrap:wrap}#palette-mode:focus-visible{outline:2px solid #2563eb;outline-offset:3px}

.swatch-lock{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:30px;height:28px;border:1px solid transparent;border-radius:5px;color:inherit;background:transparent;flex-shrink:0}.swatch-lock:hover{border-color:currentColor}.swatch-lock[aria-pressed="true"]{border-color:currentColor;background:#ffffff20}.swatch input[type=color]:disabled{cursor:default}.swatch input[readonly]{cursor:default}

/* Visualizer-only fixed shell, inspired by the reference's palette dock. */
.visualizer-page{--dock-surface:oklch(99% .002 240);--dock-line:oklch(92% .006 240);height:auto;min-height:100dvh;display:block;background:oklch(99% .002 240)}
.visualizer-page .site-header{position:sticky;top:0;z-index:20;background:var(--dock-surface)}
.visualizer-page .visualizer-shell{display:block;width:100%;max-width:1500px;margin:0 auto;padding:16px 24px calc(var(--palette-dock-height,110px) + 40px)}
.visualizer-heading{align-items:center;margin:0 0 12px;gap:16px}
.visualizer-heading .eyebrow{display:none}
.visualizer-heading h1{font-size:18px;font-weight:700;letter-spacing:-.4px;margin:0;line-height:22px}
.visualizer-heading h1 span{display:none}
.visualizer-heading p{font-size:12px;line-height:1.5;margin:4px 0 0;max-width:65ch;color:var(--muted)}
.back-link{padding-top:0;font-size:12px}
.preview-heading{margin:0 0 12px;gap:12px}
.preview-filters{display:flex;flex-wrap:wrap;gap:8px}
.preview-filters button{border-radius:6px;background:oklch(96% .004 240);padding:7px 11px;font-size:12px;color:oklch(36% .012 240)}
.preview-filters button[aria-pressed=true]{background:oklch(25% .015 240);color:oklch(99% .002 240)}
.preview-grid{gap:32px;align-items:start}
.preview-grid figure[hidden]{display:none}
.dashboard-preview{grid-column:auto}
.visualizer-page .artwork{border:0;border-radius:0;background:oklch(96% .004 240);padding:24px;aspect-ratio:5 / 4;display:flex;align-items:center;justify-content:center;overflow:hidden}
.visualizer-page .artwork svg{min-width:0;max-width:100%;max-height:100%;width:100%;height:auto}
.preview-grid figcaption{gap:12px;line-height:1.6;margin-top:12px;flex-wrap:wrap}
.visualizer-page .palette-workspace{position:fixed;inset:auto 10% 8px;width:80%;z-index:40;display:flex;align-items:center;gap:16px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border:1px solid var(--dock-line);border-radius:10px;background:var(--dock-surface);box-shadow:0 -4px 24px oklch(25% .015 240 / .04)}
.palette-strip{flex:0 1 272px;min-width:160px}
.palette-swatches{display:flex;align-items:center;gap:4px}.palette-swatches .swatches{flex:1;min-width:0}.palette-size-controls{display:flex;gap:4px;flex-shrink:0}.palette-size-controls button{display:grid;place-items:center;width:32px;min-height:32px;padding:7px;border:0;border-radius:6px;background:oklch(96% .004 240);color:inherit;cursor:pointer}.palette-size-controls button:hover{filter:brightness(.94)}.palette-size-controls button:disabled{opacity:.35;cursor:not-allowed}.palette-strip:focus-visible{outline:2px solid oklch(53% .2 270);outline-offset:4px;border-radius:6px}
.visualizer-page .swatches{display:flex;flex-wrap:nowrap;min-height:0;height:38px;border-radius:6px;overflow:hidden}
.visualizer-page .swatch{min-height:0;min-width:0;flex:1;padding:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border-radius:0;transition:box-shadow .15s ease-out}
.visualizer-page .swatch:hover,.visualizer-page .swatch[aria-expanded=true]{box-shadow:inset 0 0 0 3px currentColor}
.visualizer-page .swatch:focus-visible{outline-offset:-4px;outline:2px solid currentColor}
.palette-hint{display:block;margin-top:6px;font-size:10px;color:oklch(49% .012 240)}
.visualizer-page .palette-toolbar{flex:1;padding:0;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.visualizer-page .palette-actions{gap:4px}
.visualizer-page .palette-actions button,.visualizer-page .export-menu summary,.visualizer-page #palette-mode{min-height:32px;border:0;background:oklch(96% .004 240);padding:7px 8px;border-radius:6px;font-size:11px;white-space:nowrap}
.visualizer-page .palette-actions .primary,.visualizer-page .export-menu summary{background:oklch(53% .2 270);color:oklch(99% .002 240)}
.visualizer-page .export-menu>div{top:auto;bottom:calc(100% + 12px);z-index:60;background:var(--dock-surface)}
.visualizer-page #copy-fallback{position:absolute;bottom:calc(100% + 8px);right:24px;max-width:calc(100vw - 48px);background:var(--dock-surface);border:1px solid var(--dock-line);border-radius:8px;box-shadow:0 4px 24px oklch(25% .015 240 / .1)}
.color-editor{position:fixed;z-index:50;left:24px;bottom:calc(var(--palette-dock-height,110px) + 12px);width:280px;max-width:calc(100vw - 32px);max-height:calc(100dvh - var(--palette-dock-height,110px) - 84px);overflow:auto;padding:16px;background:var(--dock-surface);border:1px solid var(--dock-line);border-radius:12px;box-shadow:0 8px 32px oklch(25% .015 240 / .16)}
.color-editor[hidden]{display:none}
.color-editor-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:14px}
#close-color-editor{font-size:24px;width:32px;height:32px;border-radius:6px;background:oklch(96% .004 240)}
.color-editor label{display:block;font-size:11px;margin:10px 0 6px;color:oklch(49% .012 240)}
#active-picker{display:block;width:100%;height:96px;padding:0;border:0;background:transparent;margin-top:8px;cursor:pointer}
#active-hex{width:100%;padding:12px;border:1px solid var(--dock-line);border-radius:6px;font:14px ui-monospace,monospace;background:var(--dock-surface);color:inherit}
#active-lock{margin-top:12px;padding:10px 12px;background:oklch(96% .004 240);border-radius:6px;width:100%;font-size:12px}
#active-lock[aria-pressed=true]{background:oklch(25% .015 240);color:oklch(99% .002 240)}
#color-editor-error{font-size:12px;color:oklch(45% .18 25);margin:8px 0 0}
#color-editor-error:empty{display:none}
.visualizer-page #palette-status{position:fixed;bottom:calc(var(--palette-dock-height,110px) + 12px);right:24px;max-width:min(420px,calc(100vw - 48px));padding:10px 14px;margin:0;z-index:45;background:var(--dock-surface);border:1px solid var(--dock-line);border-radius:8px;pointer-events:none;font-size:12px}
.visualizer-page #palette-status:empty{display:none}
@media(max-width:1100px){.visualizer-page .palette-workspace{left:12px;right:12px;width:calc(100% - 24px);gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.palette-strip{flex-basis:200px}.visualizer-page .palette-toolbar{gap:6px}.visualizer-page .palette-actions #color-count{display:none}.visualizer-page .visualizer-shell{padding:16px 24px calc(var(--palette-dock-height,150px) + 32px)}}
@media(max-width:700px){

.visualizer-page .visualizer-shell{padding:12px 12px calc(var(--palette-dock-height,190px) + 32px)}
.visualizer-heading{margin-bottom:10px}.visualizer-heading h1{font-size:16px;letter-spacing:-.3px}.visualizer-heading p{font-size:12px}
.preview-heading{margin-bottom:12px}.preview-heading>span{display:none}.preview-filters{gap:6px}.preview-filters button{font-size:12px;padding:7px 10px}
.preview-grid{grid-template-columns:1fr;gap:28px}.visualizer-page .artwork{padding:16px}
.visualizer-page .palette-workspace{display:block;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.palette-strip{width:100%;min-width:0}.visualizer-page .swatches{height:40px}.palette-size-controls button{width:34px;min-height:34px}.palette-hint{display:none}
.visualizer-page .palette-toolbar{margin-top:8px;justify-content:flex-start;gap:6px}
.visualizer-page .palette-toolbar>.palette-actions{gap:4px;flex-wrap:wrap}
.visualizer-page .palette-actions button,.visualizer-page .export-menu summary,.visualizer-page #palette-mode{min-height:34px;font-size:11px;padding:7px 9px}
.visualizer-page #palette-mode{max-width:108px}.color-editor{left:16px}.visualizer-page #palette-status{right:16px;font-size:11px;padding:8px 10px;max-width:calc(100vw - 32px)}
}
@media print{.visualizer-page .palette-workspace,.color-editor,.preview-filters,#palette-status{display:none!important}.visualizer-page .visualizer-shell{padding:0}.preview-grid{display:block}.preview-grid figure{break-inside:avoid;margin-bottom:24px}}
@media(max-width:760px){.visualizer-page .site-header{height:auto;background:var(--dock-surface)}.visualizer-page .site-header nav{background:var(--dock-surface)}.color-editor{max-height:calc(100dvh - var(--palette-dock-height,150px) - 112px)}}

.visualizer-page .palette-workspace .site-icon{width:14px;height:14px}.visualizer-page .palette-actions #color-count{font-size:11px}.visualizer-page #palette-mode{max-width:150px}@media(max-width:700px){.visualizer-page #palette-mode{max-width:108px}}
.visualizer-reading{max-width:850px;margin:42px auto 0;padding:22px 26px;border:1px solid var(--dock-line);border-radius:10px;background:var(--dock-surface);font-size:15px;line-height:1.8;color:var(--text)}.visualizer-reading h2{font-size:23px;line-height:1.35;margin:0 0 12px}.visualizer-reading p{margin:12px 0}.visualizer-reading ol{padding-left:24px}.visualizer-reading li{margin:7px 0}.visualizer-reading-links{display:flex;flex-wrap:wrap;gap:8px 20px}@media(max-width:700px){.visualizer-reading{margin-top:28px;padding:18px;font-size:14px}.visualizer-reading h2{font-size:20px}}