:root{--font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--bg: #f7f7f8;--bg-panel: #ffffff;--bg-inset: #eeeef0;--bg-hover: #e8e8ea;--border: #dcdce0;--border-strong: #b8b8c0;--text: #1a1a20;--text-muted: #6b6b76;--text-faint: #9a9aa4;--accent: #5b5bd6;--accent-text: #ffffff;--danger: #d64545;--shadow: 0 1px 3px rgb(0 0 0 / .08), 0 4px 16px rgb(0 0 0 / .06);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--topbar-height: 48px;--library-width: 240px;--inspector-width: 320px}:root[data-theme=dark]{--bg: #131316;--bg-panel: #1c1c21;--bg-inset: #26262c;--bg-hover: #2e2e35;--border: #33333b;--border-strong: #4a4a55;--text: #ececf1;--text-muted: #9c9ca8;--text-faint: #6b6b76;--accent: #7b7bec;--accent-text: #ffffff;--danger: #e06666;--shadow: 0 1px 3px rgb(0 0 0 / .4), 0 4px 16px rgb(0 0 0 / .3)}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-sans);font-size:14px;line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}input,select{font:inherit;color:inherit}canvas{display:block}code,pre{font-family:var(--font-mono);font-size:12px}.app{display:flex;flex-direction:column;height:100%}.app-body{flex:1;display:flex;min-height:0}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:var(--topbar-height);padding:0 14px;background:var(--bg-panel);border-bottom:1px solid var(--border);flex-shrink:0}.topbar__left{display:flex;align-items:center;gap:16px;min-width:0}.topbar__brand{display:flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap;padding:4px 8px;margin-left:-8px;border-radius:var(--radius-sm)}.topbar__brand:hover{background:var(--bg-hover)}.topbar__name{flex:1;min-width:80px;max-width:320px;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);padding:4px 8px;font-size:14px}.topbar__name:hover{border-color:var(--border)}.topbar__name:focus{border-color:var(--accent);outline:none;background:var(--bg-panel)}.topbar__actions{display:flex;align-items:center;gap:8px;justify-self:end}.button{padding:5px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-panel);font-size:13px}.button:hover{background:var(--bg-hover)}.button--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.button--primary:hover{background:var(--accent);filter:brightness(1.08)}.icon-button{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:15px;color:var(--text-muted)}.icon-button:hover:not(:disabled){background:var(--bg-hover);color:var(--text)}.icon-button:disabled{opacity:.35;cursor:default}.segmented{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.segmented button{padding:4px 10px;font-size:12.5px;color:var(--text-muted)}.segmented button+button{border-left:1px solid var(--border)}.segmented button.is-active{background:var(--accent);color:var(--accent-text)}.field{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted)}.field input{width:60px;padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-panel);font-size:13px}.field input:disabled{opacity:.45}.library{width:var(--library-width);flex-shrink:0;border-right:1px solid var(--border);background:var(--bg-panel);overflow:hidden;padding:12px;display:flex;flex-direction:column}.library__section+.library__section{margin-top:18px}.library__section--presets{flex:1;min-height:0;display:flex;flex-direction:column}.library__list--scroll{flex:1;min-height:0;overflow-y:auto}.library__section--saved{flex-shrink:0}.library__list--saved{max-height:30vh;overflow-y:auto}.library__title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:8px}.library__hint{font-size:12.5px;color:var(--text-faint)}.library__list{display:flex;flex-direction:column;gap:2px}.palette-tile{position:relative;border-radius:var(--radius-md)}.palette-tile:hover{background:var(--bg-hover)}.palette-tile__main{display:flex;flex-direction:column;gap:4px;width:100%;padding:7px 8px;text-align:left}.palette-tile__swatch{display:block;height:18px;border-radius:4px;border:1px solid rgb(0 0 0 / .08)}.palette-tile__meta{display:flex;align-items:baseline;gap:6px;min-width:0}.palette-tile__name{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.palette-tile__author{font-size:11px;color:var(--text-faint);white-space:nowrap}.palette-tile__actions{position:absolute;top:4px;right:4px;display:none;gap:2px;background:var(--bg-panel);border-radius:var(--radius-sm);box-shadow:var(--shadow)}.palette-tile:hover .palette-tile__actions{display:flex}.palette-tile__actions .icon-button{width:24px;height:24px;font-size:12px}.library__save{width:100%;margin-bottom:8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library__link{font-size:12px;color:var(--text-muted);margin-top:10px}.library__link:hover{color:var(--text)}.library__import-body{display:flex;flex-direction:column;gap:6px;margin-top:6px}.library__import-body textarea{width:100%;resize:vertical;font-family:var(--font-mono);font-size:11px;background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:6px}.editor-column{flex:1;min-width:0;overflow-y:auto;background:var(--bg)}.editor-column__inner{max-width:640px;margin:0 auto;padding:14px 24px 32px;display:flex;flex-direction:column;gap:8px}.surface-editor{position:relative;border-radius:var(--radius-lg);touch-action:none;outline:none}.surface-editor:focus-visible{box-shadow:0 0 0 2px var(--accent)}.surface-editor--wheel{width:min(100%,46vh);aspect-ratio:1 / 1;align-self:center}.surface-editor--strip{width:100%;height:150px}.surface-editor__canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.wheel-label{position:absolute;right:4px;bottom:2px;font-size:11px;color:var(--text-faint);pointer-events:none}.point-toolbar{position:absolute;top:6px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:2px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow);padding:2px;z-index:2}.point-toolbar button{padding:3px 8px;border-radius:var(--radius-sm);font-size:12px;color:var(--text-muted)}.point-toolbar button:hover:not(:disabled){background:var(--bg-hover);color:var(--text)}.point-toolbar button.is-active{background:var(--accent);color:var(--accent-text)}.point-toolbar__delete:disabled{opacity:.35}.shape-row{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.shape-row__button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 9px 4px;border-radius:var(--radius-md);color:var(--text-muted);font-size:10.5px}.shape-row__button svg{width:20px;height:20px}.shape-row__button:hover{background:var(--bg-hover);color:var(--text)}.shape-row__transforms{display:flex;align-items:center;gap:2px;margin-left:10px;padding-left:10px;border-left:1px solid var(--border)}.palette-bar{position:relative;height:44px;margin-top:5px}.palette-bar__canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:var(--radius-md)}.palette-bar__handle{position:absolute;top:-5px;bottom:-5px;width:12px;transform:translate(-50%);cursor:ew-resize;border-radius:4px;background:var(--bg-panel);border:1px solid var(--border-strong);box-shadow:var(--shadow)}.palette-bar__handle:after{content:"";position:absolute;top:6px;bottom:6px;left:50%;width:2px;transform:translate(-50%);background:var(--border-strong);border-radius:1px}.stop-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:6px}.inspector{width:var(--inspector-width);flex-shrink:0;border-left:1px solid var(--border);background:var(--bg-panel);display:flex;flex-direction:column;min-height:0}.inspector__tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}.inspector__tabs button{flex:1;padding:10px 0;font-size:13px;color:var(--text-muted);border-bottom:2px solid transparent}.inspector__tabs button.is-active{color:var(--text);border-bottom-color:var(--accent)}.inspector__body{flex:1;overflow-y:auto;padding:14px;min-height:0}.placeholder{color:var(--text-faint);font-size:13px;text-align:center;padding:40px 0}.export-panel{display:flex;flex-direction:column;gap:12px}.export-panel__controls{display:flex;align-items:center;gap:8px}.export-panel__swatches{display:flex;height:22px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border)}.export-panel__swatches span{flex:1}.export-panel__group-title{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:4px}.export-panel__formats{display:flex;flex-wrap:wrap;gap:4px}.export-panel__formats button{padding:3px 9px;border-radius:999px;border:1px solid var(--border);font-size:12px;color:var(--text-muted)}.export-panel__formats button:hover{background:var(--bg-hover)}.export-panel__formats button.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.export-panel__code{background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px;margin:0;max-height:260px;overflow:auto;white-space:pre;font-size:11px;line-height:1.5}.export-panel__preview{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.export-panel__note{font-size:12px;color:var(--text-faint);margin:0}.export-panel__actions{display:flex;gap:8px}.a11y-panel{display:flex;flex-direction:column;gap:18px}.a11y-panel__title{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:6px}.a11y-panel__title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.a11y-panel__title-row .a11y-panel__title{margin-bottom:0}.segmented--wrap{flex-wrap:wrap}.a11y-panel__note{font-size:12px;color:var(--text-faint);margin:8px 0 0;line-height:1.45}.a11y-panel__note.is-ok{color:#2fa36c}.a11y-panel__warnings{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:var(--danger)}.a11y-matrix-scroll{overflow-x:auto}.a11y-matrix{border-collapse:collapse}.a11y-matrix th{padding:2px}.a11y-matrix__chip{display:block;width:16px;height:16px;border-radius:4px;border:1px solid var(--border);margin:0 auto}.a11y-matrix__cell{width:30px;height:26px;text-align:center;font-size:9.5px;font-family:var(--font-mono);border:1px solid var(--bg-panel);position:relative}.a11y-matrix__cell.is-self{color:var(--text-faint);background:transparent!important}.a11y-matrix__cell.is-fail{opacity:.35}.a11y-matrix__cell.is-warn:after{content:"";position:absolute;right:2px;top:2px;width:4px;height:4px;border-radius:50%;background:#e6a23c}.a11y-matrix__cell.is-pass:after{content:"";position:absolute;right:2px;top:2px;width:4px;height:4px;border-radius:50%;background:#2fa36c}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:50}.modal{width:min(540px,calc(100vw - 32px));max-height:calc(100vh - 64px);overflow-y:auto;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 0}.modal__header h2{margin:0;font-size:16px}.modal__body{padding:6px 18px 18px;font-size:13.5px;line-height:1.6;color:var(--text-muted)}.modal__body strong{color:var(--text)}.modal__body a{color:var(--accent)}.modal__fine{font-size:12px;color:var(--text-faint)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--bg-panel);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow);padding:8px 16px;font-size:13px;z-index:100}@media(max-width:1100px){.library{display:none}}@media(max-width:800px){.app-body{flex-direction:column;overflow-y:auto}.editor-column{overflow-y:visible}.inspector{width:100%;border-left:none;border-top:1px solid var(--border)}.surface-editor--wheel{width:min(100%,70vw)}}.viz-previews{display:flex;flex-direction:column;gap:12px}.viz-cvd-badge{align-self:flex-start;font-size:11px;color:var(--text-muted);background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 8px}.viz-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px}.viz-card__title{margin:0 0 6px;font-size:11px;font-weight:500;color:var(--text-muted)}.viz-card svg{display:block;width:100%;height:auto;color:var(--text-muted)}