*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);font:16px/1.5 var(--font-sans);margin:0}button,input,select{font:inherit}button,select,input[type=color]{cursor:pointer}button{border:1px solid var(--rule);background:var(--bg);color:var(--fg-quiet);border-radius:var(--radius-sm);white-space:nowrap;padding:7px 12px}button:hover:not(:disabled){background:var(--bg-raised);color:var(--fg)}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input,select{border:1px solid var(--rule);border-radius:var(--radius-sm);color:var(--fg);background:var(--bg);min-width:0;padding:7px 10px}input[type=checkbox]{accent-color:var(--brand)}input[aria-invalid=true]{border-color:var(--bad)}a{color:var(--accent);text-underline-offset:3px}h1,h2,h3,h4,p{margin:0}h1{letter-spacing:-.045em;margin:8px 0;font-size:clamp(28px,3vw,40px);font-weight:560;line-height:1.2}h2{font-size:18px;font-weight:600}h3{font-size:15px;font-weight:550}code{font-family:var(--font-mono);font-size:13px}.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-header{border-bottom:1px solid var(--rule);align-items:center;gap:24px;min-height:72px;padding:16px 32px;display:flex}.wordmark{letter-spacing:-.05em;align-items:center;gap:18px;font-size:24px;font-weight:650;display:flex}.wordmark>span:last-child{letter-spacing:0;font-size:18px;font-weight:450}.wordmark-divider{background:var(--rule);width:1px;height:21px}.header-title{letter-spacing:-.02em;color:var(--fg-quiet);margin:0;font-size:18px;font-weight:450}.header-actions{align-items:center;gap:8px;margin-left:auto;display:flex}.server-workspace{border-bottom:1px solid var(--rule);background:var(--bg-raised);flex-wrap:wrap;align-items:center;gap:8px;padding:12px 24px;font-size:13px;display:flex}.server-workspace>div{flex-direction:column;gap:2px;margin-right:auto;display:flex}.server-workspace>div span,.server-user{color:var(--fg-quiet);font-size:12px}.server-login{color:var(--fg);border:1px solid var(--rule);border-radius:var(--radius-sm);padding:7px 12px;text-decoration:none}.server-login:hover{background:var(--selected)}button.primary{color:var(--fg-on-brand);background:var(--brand);border-color:var(--brand)}button.primary:hover:not(:disabled){color:var(--fg-on-brand);background:var(--brand);filter:brightness(.94)}.count{font:13px var(--font-mono);border-left:1px solid;margin-left:10px;padding-left:10px;display:inline-block}main{flex:1;width:100%;max-width:1900px;margin:0 auto;padding:20px 24px 40px}.eyebrow{color:var(--fg-faint);font:12px/1.5 var(--font-mono);letter-spacing:.09em;text-transform:uppercase}.workspace-toolbar{z-index:5;border-bottom:1px solid var(--rule);background:var(--bg);justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;padding:10px 0;display:flex;position:sticky;top:0}.editing-toolbar,.history-controls{align-items:center;gap:8px;display:flex}.editing-toolbar{flex-wrap:wrap;justify-content:flex-end}.history-controls button,.reset-changes{font-size:14px}.history-controls{border-right:1px solid var(--rule);gap:4px;padding-right:8px}.view-nav{gap:22px;display:flex}.view-nav button{color:var(--fg-faint);background:0 0;border:0;border-bottom:2px solid #0000;border-radius:0;padding:10px 0}.view-nav button[aria-pressed=true]{border-bottom-color:var(--brand);color:var(--fg)}.small-count{background:var(--bg-raised);border-radius:var(--radius-xs);font:12px var(--font-mono);margin-left:6px;padding:1px 5px}.mode-switch{border:1px solid var(--rule);border-radius:var(--radius-sm);padding:2px;display:flex}.mode-switch button{border-radius:var(--radius-xs);background:0 0;border:0;padding:4px 12px;font-size:14px}.mode-switch button[aria-pressed=true]{background:var(--selected);color:var(--accent)}.palette-workspace{grid-template-columns:minmax(0,1.28fr) minmax(390px,1fr);align-items:start;gap:24px;display:grid}.palette-panel,.inspector,.changes-panel{border:1px solid var(--rule);border-radius:var(--radius-md);min-width:0}.inspector{scrollbar-gutter:stable;max-height:calc(100dvh - 96px);position:sticky;top:80px;overflow:auto}.changes-panel{overflow:hidden}.panel-heading{border-bottom:1px solid var(--rule);justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;display:flex}.panel-heading h2>span{color:var(--fg-faint);margin-left:6px;font-size:14px;font-weight:400}.muted{color:var(--fg-faint);font-size:13px}.palette-rows{padding:16px 10px}.ramp-row{border-radius:var(--radius-sm);grid-template-columns:70px minmax(0,1fr);align-items:center;gap:8px;padding:5px 7px;display:grid}.ramp-row.selected-ramp{background:var(--bg-sunken)}.ramp-name{font:12px var(--font-mono);color:var(--fg-quiet)}.ramp-swatches{gap:3px;display:flex}.swatch{border:0;border-radius:3px;flex:1;min-width:0;height:48px;padding:0;position:relative}.swatch span{font:12px var(--font-mono);opacity:.85}.swatch:hover:not(:disabled){outline:2px solid var(--fg);outline-offset:2px;z-index:1}.swatch.selected{outline:3px solid var(--fg);outline-offset:2px;z-index:1}.swatch i{background:currentColor;border-radius:50%;width:4px;height:4px;position:absolute;top:3px;right:3px}.panel-note{border-top:1px solid var(--rule);color:var(--fg-faint);align-items:center;gap:7px;padding:14px 22px;font-size:12px;display:flex}.panel-note>span:last-child{margin-left:auto}.changed-dot{background:var(--accent);border-radius:50%;width:5px;height:5px}.color-comparison{border-radius:var(--radius-sm);grid-template-columns:1fr 1fr;height:72px;margin:18px 23px 16px;display:grid;overflow:hidden}.color-comparison>div{flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:3px;padding:10px;display:flex}.color-comparison span,.color-comparison code{background:var(--bg);color:var(--fg);border-radius:3px;padding:1px 5px;font-size:12px}.hex-row{justify-content:space-between;align-items:center;gap:12px;margin:0 23px 22px;display:flex}.hex-row>button{font-size:13px}.hex-editor{border:1px solid var(--rule);border-radius:var(--radius-sm);align-items:center;gap:8px;padding:4px 8px;display:flex}.hex-editor input[type=color]{background:0 0;border:0;width:32px;height:34px;padding:0}.hex-editor input:not([type=color]){width:106px;font:14px var(--font-mono);border:0;padding:0}.graph-heading{z-index:3;background:var(--bg);border-bottom:1px solid var(--rule);border-radius:var(--radius-md) var(--radius-md) 0 0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:14px 23px;display:flex;position:sticky;top:0}.graph-heading label{color:var(--fg-faint);align-items:center;gap:6px;font-size:14px;display:flex}.graph-heading select{padding:4px 6px;font-size:14px}.checkbox-label{white-space:nowrap}.graphs{padding:14px 23px 22px;overflow-x:auto}.graph-section{width:max-content;min-width:572px;margin-bottom:22px}.graph-section:last-child{margin-bottom:0}.graph-section h3{color:var(--fg-quiet);justify-content:space-between;margin-bottom:6px;font-size:12px;display:flex}.graph-section h3 span{font:12px var(--font-mono);color:var(--fg-faint)}.graph-canvas{background:var(--bg-raised);border-radius:0 0 6px 6px;line-height:0;overflow:hidden}.graph-canvas p{font-size:13px;line-height:1.5}.graphs{--c-divider:var(--rule-strong)}.dependencies{border-top:1px solid var(--rule);padding:18px 23px}.dependencies h3{margin-bottom:12px}.dependencies>div{align-items:center;gap:7px;margin-top:7px;display:flex}.dependencies code{overflow-wrap:anywhere;font-size:12px}.role-dot{border:1px solid var(--rule);vertical-align:middle;border-radius:3px;flex-shrink:0;width:12px;height:12px;margin-right:4px;display:inline-block}.tag{font:12px var(--font-mono);color:var(--fg-faint);background:var(--bg-sunken);border-radius:var(--radius-xs);padding:2px 4px}.roles-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;display:flex}.roles-toolbar label{color:var(--fg-quiet);flex-direction:column;gap:6px;font-size:13px;display:flex}.roles-toolbar select{max-width:330px}.search-label{width:min(420px,100%)}.presentation-switch{border:1px solid var(--rule);border-radius:var(--radius-sm);gap:3px;padding:3px;display:flex}.presentation-switch button{background:0 0;border:0;font-size:14px}.presentation-switch button[aria-pressed=true]{background:var(--selected);color:var(--accent)}.role-area{border:1px solid var(--rule);border-radius:var(--radius-md);margin-bottom:32px}.role-area>summary{cursor:pointer;padding:18px 22px}.role-area>summary h2{margin-left:6px;display:inline}.role-area>summary h2 span{color:var(--fg-faint);font:13px var(--font-mono);margin-left:10px}.role-section{border-top:1px solid var(--rule);padding:20px 22px 24px}.role-section>h3{margin-bottom:18px;font-size:18px}.state-headings,.role-family{grid-template-columns:100px repeat(4,minmax(0,1fr));gap:14px;display:grid}.state-headings{color:var(--fg-faint);margin-bottom:10px;font-size:13px}.role-family{align-items:stretch;margin-top:14px}.role-family h4{overflow-wrap:anywhere;grid-column:1;align-self:center;font-size:14px;font-weight:500}.role-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;display:grid}.role-card{text-align:left;white-space:normal;background:var(--bg);min-width:0;padding:0;overflow:hidden}.role-card:hover:not(:disabled){background:var(--bg);outline:2px solid var(--fg);outline-offset:2px}.role-card.changed{border-color:var(--rule-accent)}.role-preview{background:var(--preview-bg);border-bottom:1px solid var(--rule);height:110px;color:var(--sample-ink);justify-content:center;align-items:center;padding:16px;display:flex}.sample-tile{background:var(--sample-fill);color:var(--sample-ink);border-radius:var(--radius-sm);justify-content:center;align-items:center;min-width:94px;height:54px;padding:10px 20px;font-size:16px;display:flex}.text-preview{color:var(--preview)}.sample-text{text-align:center;font-size:30px}.sample-text small{font-size:13px;display:block}.surface-preview .sample-tile{background:var(--preview)}.border-preview .sample-tile{border:2px solid var(--preview)}.background-preview{background:var(--preview)}.shadow-preview .sample-tile{box-shadow:0 5px 15px var(--preview)}.swatch-preview{background:linear-gradient(var(--preview), var(--preview)), linear-gradient(var(--preview-bg), var(--preview-bg))}.role-card-info{flex-direction:column;gap:4px;padding:14px;display:flex}.role-card-info>code{color:var(--fg);overflow-wrap:anywhere;font-size:12px}.role-card-info>span{overflow-wrap:anywhere;color:var(--fg-faint);font:12px var(--font-mono)}.role-card-info>div{font:12px var(--font-mono);align-items:center;gap:5px;margin-top:9px;display:flex}.contrast-ratio{color:var(--fg-quiet);margin-left:auto}.section-note{color:var(--fg-faint);padding:16px 0;font-size:14px}.changes-panel .section-note{border-top:1px solid var(--rule);padding:18px 22px}.export-data{color:var(--fg-quiet);margin:0 22px 22px;font-size:14px}.export-data summary{cursor:pointer}.export-data textarea{resize:vertical;width:100%;height:230px;font:13px/1.6 var(--font-mono);background:var(--bg-sunken);color:var(--fg);border:1px solid var(--rule);border-radius:var(--radius-sm);margin-top:12px;padding:12px;display:block}.changes-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{text-align:left;border-bottom:1px solid var(--rule);white-space:nowrap;padding:12px 22px}th{color:var(--fg-faint);font-size:13px;font-weight:450}td{font:13px var(--font-mono)}td button{font:13px var(--font-sans)}.empty-state{text-align:center;color:var(--fg-quiet);padding:60px 24px}.empty-state p{margin-top:8px;font-size:14px}.notice{background:var(--selected);border:1px solid var(--rule-accent);border-radius:var(--radius-sm);align-items:center;gap:12px;margin:0 0 20px;padding:12px 16px;font-size:14px;display:flex}.notice>span{flex:1}.app-footer{border-top:1px solid var(--rule);color:var(--fg-faint);align-items:center;gap:14px;padding:16px 32px;font-size:12px;display:flex}.text-button{color:var(--fg-quiet);text-underline-offset:3px;background:0 0;border:0;padding:0;font-size:12px;text-decoration:underline}.footer-credit{margin-left:auto}.footer-credit a{color:var(--fg-quiet)}.load-error{max-width:680px}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=1100px){.palette-workspace{grid-template-columns:minmax(0,1fr)}.inspector{width:100%;max-height:none;position:static}.graphs{gap:24px;display:flex}.graph-section{flex-shrink:0}.workspace-toolbar{flex-wrap:wrap}.editing-toolbar{justify-content:flex-start}.state-headings,.role-family{grid-template-columns:70px repeat(4,minmax(0,1fr));gap:10px}.role-card-info{padding:10px}}@media (width<=650px){.app-header{flex-wrap:wrap;gap:12px;padding:16px}.header-title{margin-left:auto;font-size:15px}.header-actions{width:100%;margin:0}.header-actions button{flex:1}main{padding:12px 12px 24px}.workspace-toolbar{gap:12px;position:static}.view-nav{gap:18px;width:100%}.editing-toolbar{gap:6px}.history-controls{border:0;padding:0}.roles-toolbar{flex-direction:column;align-items:stretch;gap:12px}.roles-toolbar select{max-width:100%}.search-label{width:100%}.app-footer{flex-wrap:wrap;padding:16px}.footer-credit{width:100%;margin:0}.panel-note{flex-wrap:wrap}.panel-note>span:last-child{margin:0}.notice{flex-wrap:wrap}.ramp-row{grid-template-columns:50px minmax(0,1fr);gap:4px;padding:5px 0}.ramp-name{font-size:10px}.swatch span{font-size:9px}.ramp-swatches{gap:1px}.palette-rows{padding:10px 6px}.role-section{padding:12px}.state-headings{display:none}.role-family{grid-template-columns:repeat(2,minmax(0,1fr))}.role-family h4{grid-column:1/-1}.role-family .role-card{grid-column:auto!important}.role-preview{padding:10px}.role-card-info>div{flex-wrap:wrap}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.palette-actions{gap:8px;display:flex}.add-form{border-bottom:1px solid var(--rule);flex-wrap:wrap;align-items:flex-end;gap:12px;padding:16px 22px;display:flex}.add-form label{flex-direction:column;gap:6px;font-size:14px;display:flex}.gamut-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:0 23px 18px;display:flex}.gamut-actions button{font-size:14px}.gamut-warning{color:var(--warn);font-size:14px;font-weight:550}.gamut-explanation{color:var(--warn);margin:0 23px 18px;font-size:14px}.swatch.out-of-gamut,.swatch.out-of-gamut:hover:not(:disabled){background-image:repeating-linear-gradient(135deg,#0000 0 7px,#ffffff8c 7px 9px)}.swatch.out-of-gamut strong{font:700 13px var(--font-sans);position:absolute;inset:3px 3px auto auto}.bulk-actions{flex-wrap:wrap;gap:8px;margin:14px 23px 0;display:flex}.bulk-actions button{font-size:14px}@media (width<=650px){.panel-heading{flex-wrap:wrap}}