.color-tool{height:100%;min-width:0;display:grid;grid-template-rows:56px minmax(0,1fr);color:var(--brand-carbon);font:13px/1.4 var(--font-body)}.color-toolbar{display:flex;align-items:center;gap:18px;padding:0 16px;border-bottom:1px solid var(--tool-line);background:var(--tool-panel);min-width:0;z-index:6}.color-toolbar h1{margin:0;font:400 24px/1 var(--font-display)}.color-toolbar>.ui-button{min-width:150px}.color-toolbar-actions{margin-left:auto;display:flex;gap:4px}.color-work-area{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 304px;min-height:0}.color-inspector-hidden .color-work-area{grid-template-columns:minmax(0,1fr)}.color-stage{overflow:auto;min-width:0;min-height:0;background:var(--tool-worktop);scrollbar-width:thin}.color-pairing-sheet,.color-palette-sheet{max-width:1440px;padding:32px;margin:0 auto}.color-sheet-heading{display:flex;gap:24px;align-items:flex-end;justify-content:space-between;margin-bottom:24px}.color-sheet-heading h2{margin:8px 0 0;font:400 clamp(28px,3vw,48px)/1 var(--font-display)}.color-kicker{font:11px/1.5 var(--font-mono);color:var(--tool-muted)}.color-search{position:relative;width:220px;max-width:100%}.color-search svg{position:absolute;width:14px;left:10px;top:50%;transform:translateY(-50%)}.color-search .ui-input{width:100%;padding-left:32px}.color-swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}.color-pair-card,.color-swatch-card{appearance:none;padding:0;margin:0;text-align:left;font:inherit;color:var(--brand-carbon);border:1px solid transparent;border-radius:4px;background:var(--tool-panel);cursor:pointer;overflow:hidden}.color-pair-card[aria-pressed=true],.color-swatch-card[aria-pressed=true]{border-color:var(--brand-carbon);box-shadow:0 0 0 2px var(--tool-worktop),0 0 0 3px var(--brand-concrete)}.color-pair-card:focus-visible,.color-swatch-card:focus-visible{outline:2px solid var(--brand-carbon);outline-offset:3px}.color-swatch-fill{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:180px;padding:18px}.color-swatch-fill>span{overflow-wrap:anywhere;font:400 21px/1.2 var(--font-body)}.color-swatch-fill svg{width:16px;flex-shrink:0}.color-swatch-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;font-size:11px}.color-swatch-caption code{font:10px var(--font-mono)}.color-paper-note{margin:24px 0 0;font-size:12px;color:var(--tool-muted);line-height:1.6}.color-paper-note a{color:var(--brand-carbon);text-underline-offset:3px}.color-pair-ratio{font:400 30px/1 var(--font-mono);white-space:nowrap}.color-pair-ratio small{font-size:15px;color:var(--tool-muted)}.color-preview{display:flex;flex-direction:column;gap:32px;padding:32px;min-height:440px;border-radius:3px;overflow:hidden}.color-preview-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;font:11px/1.5 var(--font-mono)}.color-preview-main{display:grid;grid-template-columns:minmax(0,1fr) 23%;gap:24px;align-items:center;flex:1 1}.color-preview h2{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-family:var(--color-display);font-weight:400;font-size:var(--color-size);line-height:.98;letter-spacing:0}.color-preview-shape{aspect-ratio:1;position:relative}.color-preview-shape i{display:block;position:absolute;inset:0;border:1px solid;border-radius:50%}.color-preview-shape i+i{inset:23%;background:currentColor}.color-preview-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-top:24px;border-top:1px solid}.color-preview-bottom p{margin:0;max-width:45ch;font:400 17px/1.5 var(--color-body);white-space:pre-wrap}.color-preview-mark{font:400 48px/.8 var(--color-display);text-align:right}.color-preview-mark small{font:12px/1.4 var(--font-mono)}.color-preview[data-layout=poster] .color-preview-main{display:block;text-align:center;padding:40px 0}.color-preview[data-layout=poster] .color-preview-shape{display:none}.color-preview[data-layout=split] .color-preview-main{grid-template-columns:1fr 1fr}.color-preview[data-layout=split] .color-preview-shape{background:currentColor}.color-preview[data-layout=split] .color-preview-shape i{border-radius:0;inset:20%;border-color:var(--tool-panel)}.color-preview[data-layout=split] .color-preview-shape i+i{display:none}.color-pairing-heading{display:flex;justify-content:space-between;gap:16px;margin:32px 0 14px}.color-pairing-heading>span:last-child{color:var(--tool-muted);font-size:11px}.color-pair-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;padding-bottom:8px}.color-pair-sample{display:flex;min-height:140px;flex-direction:column;justify-content:center;gap:12px;padding:20px;font:400 60px/.9 var(--font-display)}.color-pair-sample>span{font:12px/1.4 var(--font-body)}.color-pair-caption{display:grid;grid-template-columns:1fr auto;gap:5px 8px;padding:12px;font-size:11px}.color-pair-caption code{font:10px var(--font-mono)}.color-pair-caption small{grid-column:1/-1;color:var(--tool-muted);font-size:10px}.color-inspector{display:flex;flex-direction:column;min-height:0;overflow:auto;padding:0 16px;background:var(--tool-panel);border-left:1px solid var(--tool-line);scrollbar-width:thin}.color-inspector>*{flex-shrink:0}.color-control-group{padding:16px 0;border-bottom:1px solid var(--tool-line);display:grid;gap:12px}.color-inspector-title{min-height:24px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}.color-inspector-title code{font:14px var(--font-mono)}.color-mini-swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.color-mini-swatches button{width:100%;aspect-ratio:1;border:1px solid #0002;border-radius:3px;cursor:pointer;display:grid;place-items:center;padding:3px}.color-mini-swatches button:focus-visible{outline:2px solid var(--brand-carbon);outline-offset:2px}.color-mini-swatches svg{width:14px;height:14px}.color-contrast-rows{display:grid;gap:8px;font-size:11px}.color-contrast-rows>div{display:flex;justify-content:space-between}.color-contrast-rows>div>span:last-child{display:flex;align-items:center;gap:5px}.color-contrast-rows svg{width:12px;height:12px}.color-reference{display:flex;gap:6px;align-items:center;color:var(--tool-muted);font-size:10px;text-underline-offset:3px}.color-reference svg{width:11px;height:11px}.color-control-group h3{margin:0;font:400 22px var(--font-display)}.color-value-row{display:flex;justify-content:space-between;align-items:center}.color-value-row code{font:20px var(--font-mono)}.color-token-list{margin:0;display:grid;gap:6px;font-size:11px}.color-token-list dt{color:var(--tool-muted);margin-top:6px}.color-token-list dd{margin:0;overflow-wrap:anywhere}.color-token-list code{display:block;font:10px/1.7 var(--font-mono)}.color-dialog label,.color-text-label{display:grid;gap:6px;font-size:11px;color:var(--tool-muted)}.color-dialog textarea,.color-text-label textarea{padding:10px;width:100%;border:1px solid var(--tool-line);border-radius:4px;background:var(--tool-soft);color:var(--brand-carbon);font:12px/1.5 var(--font-body);min-height:68px;resize:vertical}.color-dialog textarea:focus-visible,.color-text-label textarea:focus-visible{outline:1px solid var(--brand-carbon)}.color-control-group>.ui-button{width:100%;justify-content:space-between}.color-control-group>.ui-button-primary{justify-content:center}.color-control-group .ui-numeric{margin:0}.color-saved-list{display:grid;gap:4px}.color-saved-list>div{display:flex;align-items:center;gap:8px;padding:4px;border:1px solid var(--tool-line);border-radius:4px}.color-saved-list>div>button:first-child{flex:1 1;min-width:0;display:flex;gap:10px;align-items:center;padding:0;border:0;background:none;color:var(--brand-carbon);cursor:pointer;text-align:left;font:12px var(--font-body)}.color-saved-list i{flex-shrink:0;width:40px;height:40px;display:grid;place-items:center;font:24px var(--font-display);border-radius:2px}.color-saved-list small{display:block;font:10px var(--font-mono);margin-top:3px;color:var(--tool-muted)}.color-saved-list span{overflow-wrap:anywhere}.color-inspector .tool-panel-footer{bottom:0}.color-panel-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}.color-panel-bottom>span{font:10px var(--font-mono);color:var(--tool-muted)}.color-dialog{width:min(620px,calc(100vw - 32px))}.color-dialog>label,.color-dialog>textarea{margin:14px 0}.color-dialog textarea{font-family:var(--font-mono)}.color-dialog>.ui-button{margin-right:8px}.color-empty{padding:30px;border:1px solid var(--tool-line);line-height:1.6}.color-specimen-stage{min-width:100%;min-height:100%;width:max-content;display:flex;justify-content:center;align-items:center;padding:24px}.color-specimen-frame{flex-shrink:0;box-shadow:var(--tool-shadow)}.color-specimen-frame .color-preview,.color-specimen-frame>div{height:100%}.color-specimen-frame .color-preview{padding:48px;border-radius:0}@media (min-width:901px){.color-pairing-sheet .color-preview h2{font-size:min(var(--color-size),7vw)}}@media (max-width:1100px){.color-toolbar{gap:8px}.color-toolbar>.ui-button{min-width:0}.color-toolbar-actions{gap:0}.color-pairing-sheet,.color-palette-sheet{padding:24px}}@media (max-width:900px){.color-work-area{grid-template-columns:minmax(0,1fr)}.color-inspector{position:absolute;right:0;top:0;bottom:0;width:304px;z-index:5;box-shadow:-8px 0 24px #0001}.color-pairing-sheet .color-preview h2{font-size:min(var(--color-size),8vw)}}@media (max-width:600px){.color-toolbar{flex-wrap:wrap;gap:5px;padding:8px}.color-tool{grid-template-rows:auto minmax(0,1fr)}.color-toolbar h1{font-size:20px}.color-toolbar .ui-segment{padding-inline:5px;font-size:11px}.color-toolbar>.ui-button{order:3;flex:1 1}.color-toolbar-actions{gap:0}.color-toolbar-actions .ui-button{width:28px;padding:4px}.color-pairing-sheet,.color-palette-sheet{padding:18px}.color-sheet-heading{flex-wrap:wrap;gap:16px}.color-search{width:100%}.color-sheet-heading h2{font-size:30px}.color-swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.color-swatch-fill{min-height:140px;padding:12px}.color-swatch-fill>span{font-size:17px}.color-swatch-caption{flex-direction:column;align-items:flex-start;padding:10px}.color-pair-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.color-pair-caption{grid-template-columns:1fr}.color-pair-sample{padding:14px;font-size:50px}.color-preview{padding:22px;gap:24px;min-height:430px}.color-preview-meta{font-size:9px;flex-wrap:wrap}.color-preview-main,.color-preview[data-layout=split] .color-preview-main{grid-template-columns:1fr}.color-preview-shape{display:none}.color-pairing-sheet .color-preview h2{font-size:42px}.color-preview-bottom{display:block}.color-preview-mark{display:none}.color-preview-bottom p{font-size:15px}.color-inspector{width:min(304px,100%)}}.color-preview[data-mobile=true]{padding:28px;gap:24px}.color-preview[data-mobile=true] .color-preview-meta{flex-wrap:wrap;font-size:10px}.color-preview[data-mobile=true] .color-preview-main{grid-template-columns:1fr}.color-preview[data-mobile=true] h2{font-size:min(var(--color-size),54px)}.color-preview[data-mobile=true] .color-preview-shape{width:100px}.color-preview[data-mobile=true] .color-preview-bottom{display:block}.color-preview[data-mobile=true] .color-preview-mark{display:none}.color-preview[data-mobile=true] .color-preview-bottom p{font-size:16px}