.color-page .pattern-heading{margin-bottom:32px}.color-spectrum{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-radius:18px;overflow:hidden}.color-spectrum>button{border:0;background:var(--tile);color:var(--tile-ink);height:200px;position:relative;padding:24px;display:flex;align-items:flex-start;justify-content:flex-end;flex-direction:column;text-align:left;gap:8px;min-width:0}.color-spectrum>button>span{font-size:21px;font-weight:400;letter-spacing:-.3px}.color-spectrum>button>small{font-size:11px;opacity:.8}.color-spectrum>button[aria-pressed=true]:after{content:'';position:absolute;inset:10px;border:1px solid currentColor;border-radius:10px;opacity:.65;pointer-events:none}.color-spectrum>button:hover{filter:brightness(.97)}.color-spectrum>button:focus-visible{outline-offset:-5px;z-index:1}.color-spectrum-hint{font-size:12px;color:var(--muted);margin:16px 0 36px}
.color-page .color-scene{aspect-ratio:1.6}
@media(max-width:980px){.color-page .color-scene{aspect-ratio:1.3}}
@media(max-width:680px){.color-page .color-scene{aspect-ratio:auto}}
.color-lab{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:start}.color-preview-column{position:sticky;top:24px;min-width:0}.color-preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;margin-bottom:16px}.color-preview-title{font-size:13px}.color-view-modes{display:flex;align-items:center;gap:4px;background:var(--field-bg);padding:4px;border-radius:24px}.color-view-modes>button{border:0;background:transparent;color:var(--muted);font-size:11px;min-height:32px;min-width:52px;padding:0 14px;border-radius:18px}.color-view-modes>button[aria-pressed=true]{background:var(--surface);color:var(--text)}.color-view-modes>.expand-preview{width:36px;min-width:36px;height:32px;min-height:32px;padding:0;display:grid;place-items:center}.color-view-modes>.expand-preview svg{width:17px;height:17px}
.color-scene{--demo-background:#0F1624;--demo-ink:#fff;--demo-accent:#F27166;--shape-size:50%;background:var(--demo-background);color:var(--demo-ink);width:100%;aspect-ratio:1.25;min-height:380px;border-radius:20px;position:relative;overflow:hidden}.color-composition{position:absolute;inset:0;padding:40px;display:flex;flex-direction:column;align-items:flex-start}.color-scene-logo{width:112px;height:32px;flex-shrink:0;background:var(--demo-ink);mask:url('/static/docs-ui/brand/mega-white.svg') center/contain no-repeat;-webkit-mask:url('/static/docs-ui/brand/mega-white.svg') center/contain no-repeat}.color-scene-caption{font-size:9px;letter-spacing:1.2px;margin-top:28px;position:relative;z-index:1}.color-scene-title{font-weight:400;font-size:clamp(32px,3.8vw,64px);line-height:1.12;letter-spacing:-1.5px;position:relative;z-index:1;margin:auto 0;max-width:85%;padding:40px 0}.color-scene-foot{font-size:11px;position:relative;z-index:1;opacity:.75}.color-accent-shape{position:absolute;width:var(--shape-size);aspect-ratio:1;right:-12%;bottom:-12%;background:var(--demo-accent);mask:url('/static/docs-ui/brand/mega-shape.svg') center/contain no-repeat;-webkit-mask:url('/static/docs-ui/brand/mega-shape.svg') center/contain no-repeat}.color-solid{display:none;position:absolute;inset:0;padding:40px;background:var(--solid-color,#f27166);color:var(--solid-ink,#0f1624);flex-direction:column;justify-content:center;align-items:flex-start}.color-solid>span:first-child{font-size:12px;margin-bottom:auto}.color-solid h2{font-size:clamp(38px,4.7vw,80px);font-weight:400;line-height:1;letter-spacing:-2px;margin:30px 0}.color-solid>span:last-child{font-size:18px;margin-top:auto}.color-scene[data-mode=solid] .color-solid{display:flex}.color-scene[data-mode=solid] .color-composition{display:none}.color-preview-caption{display:flex;justify-content:space-between;gap:20px;margin-top:16px;font-size:11px;color:var(--muted);line-height:1.5}.color-preview-caption>[data-low=true]{color:var(--danger)}
.color-controls{display:flex;flex-direction:column;gap:24px;min-width:0}.color-selected .eyebrow{font-size:9px;letter-spacing:1px;line-height:1.6;margin-bottom:14px}.color-selected h2{font-size:32px;font-weight:400;letter-spacing:-.7px;margin-bottom:12px}.color-selected p{font-size:13px;color:var(--muted);line-height:1.7;margin:0}.color-code-list{display:grid;gap:0}.color-code-list button{display:flex;align-items:center;gap:12px;min-height:44px;max-width:100%;width:100%;padding:8px 0;border:0;border-bottom:1px solid var(--border);background:transparent;text-align:left;font-size:12px}.color-code-list button>span{color:var(--muted);width:46px;flex-shrink:0;font-size:11px}.color-code-list button>strong{font-size:13px;font-weight:400;overflow-wrap:anywhere;line-height:1.5}.color-code-list button>svg{margin-left:auto;width:15px;height:15px;color:var(--muted)}.color-print-codes>summary{font-size:11px;color:var(--muted);min-height:44px;display:flex;align-items:center;list-style:none;gap:12px;cursor:pointer}.color-print-codes>summary:after{content:'';width:6px;height:6px;border-right:1px solid;border-bottom:1px solid;transform:rotate(45deg);margin-left:auto}.color-print-codes[open]>summary:after{transform:rotate(225deg)}.color-print-codes>p{font-size:11px;color:var(--muted);line-height:1.65;margin:12px 0 0}.color-composition-controls{display:grid;gap:22px}.color-select-field{display:grid;gap:10px}.color-select-field label{font-size:13px}.color-controls input[type=range]{width:100%;height:24px;min-height:24px;padding:0;margin:0;background:transparent;border:0;accent-color:var(--action-primary)}.color-control-actions{display:flex;gap:12px}.color-control-actions>.button{width:calc(50% - 6px)!important;padding:0 16px}.color-load-error{color:var(--danger);font-size:13px;line-height:1.6}.color-roles{padding:64px 0 48px;margin-top:32px;border-bottom:1px solid var(--border)}.color-roles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 40px}.color-role{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start}.color-role-sample{width:48px;height:64px;border-radius:12px}.color-role h3{font-size:18px;font-weight:400;margin:0 0 6px}.color-role .color-role-caption{font-size:11px;color:var(--muted);display:block;margin-bottom:12px}.color-role p{font-size:14px;color:var(--muted);line-height:1.7;margin:0}
.color-origin{display:flex;flex-direction:column;min-height:420px;border-radius:18px;overflow:hidden}.color-origin>div{flex:1;padding:22px 24px;color:#fff;font-size:12px}.color-origin>div:first-child,.color-origin>div:nth-child(2){color:#0f1624}.color-hierarchy-demo{padding:36px;min-height:420px;background:#0f1624;color:#fff;border-radius:18px;position:relative}.color-hierarchy-demo>span{font-weight:700;font-size:16px;letter-spacing:1px}.color-hierarchy-demo h4{font-size:38px;font-weight:400;letter-spacing:-1px;line-height:1.15;margin:52px 0 28px}.color-hierarchy-demo>i{width:68px;height:8px;display:block;background:#f27166;margin:24px 0}.color-hierarchy-demo>p{font-size:12px;line-height:1.6;color:#fff9;margin-bottom:0}.color-warmth-demo{display:grid;grid-template-columns:1fr 1fr;border-radius:18px;overflow:hidden;min-height:380px}.color-warmth-demo>div{background:#f7b491;color:#424050;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}.color-warmth-demo>div+div{background:#805771;color:#fff}.color-warmth-demo span{font-size:12px}.color-warmth-demo p{font-size:27px;letter-spacing:-.6px;line-height:1.3;margin:0}.color-neutral-demo{background:#e4e2e2;color:#424050;padding:36px;min-height:380px;border-radius:18px}.color-neutral-demo>span{font-size:16px;font-weight:700}.color-neutral-demo h4{font-size:38px;line-height:1.15;letter-spacing:-1px;font-weight:400;margin:48px 0 32px}.color-neutral-demo>div{width:48px;height:8px;background:#f27166;margin-bottom:24px}.color-neutral-demo>p{font-size:11px}.color-systems-demo{display:grid;grid-template-columns:1fr 1fr;gap:16px}.color-systems-demo>div{padding:24px;min-height:170px;background:var(--surface);border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}.color-systems-demo>div:first-child{background:#f27166;color:#0f1624}.color-systems-demo span{font-size:11px}.color-systems-demo strong{font-size:22px;font-weight:400}.color-systems-demo p{font-size:12px;line-height:1.5;margin:0}
.mega-viewer-target.color-scene .color-composition{padding:6vh 6vw}.mega-viewer-target.color-scene .color-scene-title{font-size:clamp(42px,6.5vw,110px)}.mega-viewer-target.color-scene .color-scene-logo{width:160px;height:48px}.mega-viewer-target.color-scene .color-solid{padding:8vh 8vw}.mega-viewer-target.color-scene .color-solid h2{font-size:clamp(64px,10vw,180px)}
@media(max-width:1180px){.color-spectrum>button{padding:18px;height:170px}.color-spectrum>button>span{font-size:18px}.color-lab{grid-template-columns:minmax(0,1fr) 250px;gap:24px}.color-composition{padding:30px}.color-scene-title{font-size:38px}.color-warmth-demo>div{padding:20px}.color-warmth-demo p{font-size:23px}.color-roles-grid{gap:32px;grid-template-columns:1fr 1fr}}
@media(max-width:980px){.color-spectrum>button{padding:14px;height:150px}.color-spectrum>button>span{font-size:16px}.color-spectrum>button>small{font-size:9px}.color-lab{grid-template-columns:1fr}.color-preview-column{position:static}.color-controls{display:grid;grid-template-columns:1fr 1fr;gap:28px;background:var(--surface);padding:24px;border-radius:18px}.color-composition-controls{grid-column:1/-1;grid-template-columns:1fr 1fr}.color-control-actions{grid-column:1/-1}.color-control-actions>.button{width:160px!important}.color-code-list button>svg{width:13px}.color-scene{aspect-ratio:1.3;min-height:320px}.color-scene-title{font-size:clamp(32px,5vw,52px)}}
@media(max-width:680px){.color-spectrum{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:16px}.color-spectrum>button{height:122px;padding:16px 12px;gap:8px}.color-spectrum>button>span{font-size:16px}.color-spectrum>button>small{font-size:9px}.color-spectrum>button[aria-pressed=true]:after{inset:6px;border-radius:8px}.color-spectrum-hint{font-size:12px;line-height:1.6;margin-bottom:28px}.color-preview-title{font-size:11px}.color-preview-toolbar{gap:8px;flex-wrap:wrap}.color-view-modes>button{font-size:10px;padding:0 10px;min-width:42px}.color-view-modes>.expand-preview{width:30px;min-width:30px}.color-scene{min-height:340px;aspect-ratio:auto}.color-composition{padding:26px}.color-scene-logo{width:92px;height:28px}.color-scene-caption{font-size:8px;line-height:1.7;max-width:150px}.color-scene-title{font-size:34px;letter-spacing:-1px;max-width:100%}.color-scene-foot{font-size:10px}.color-solid{padding:28px}.color-solid h2{font-size:54px;letter-spacing:-1px}.color-preview-caption{font-size:10px;gap:12px;flex-direction:column}.color-controls{grid-template-columns:1fr;padding:22px;gap:24px}.color-composition-controls{grid-template-columns:1fr;grid-column:1}.color-control-actions{grid-column:1}.color-control-actions>.button{width:calc(50% - 6px)!important}.color-roles{padding:40px 0;margin-top:16px}.color-roles-grid{grid-template-columns:1fr;gap:28px}.color-role{grid-template-columns:40px minmax(0,1fr);gap:16px}.color-role-sample{width:40px;height:64px}.color-role p{font-size:15px}.color-origin{min-height:360px}.color-origin>div{padding:20px}.color-warmth-demo{min-height:320px}.color-warmth-demo>div{padding:20px 16px}.color-warmth-demo p{font-size:23px}.color-hierarchy-demo{padding:28px;min-height:380px}.color-hierarchy-demo h4{font-size:36px}.color-neutral-demo{padding:28px;min-height:350px}.color-neutral-demo h4{font-size:36px}.color-systems-demo{gap:12px}.color-systems-demo>div{padding:20px 16px;min-height:155px}.color-systems-demo strong{font-size:20px}.color-systems-demo p{font-size:11px}.mega-viewer-target.color-scene .color-scene-title{font-size:clamp(34px,9vw,64px)}.mega-viewer-target.color-scene .color-scene-logo{width:110px;height:32px}.mega-viewer-target.color-scene .color-solid h2{font-size:clamp(56px,14vw,100px)}}