:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#182027;background:#f7f8f6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}.skip{position:absolute;top:-100px;padding:16px;background:#e0f0d5}.skip:focus{top:0;z-index:2}button,input,select{font:inherit;color:inherit}button,select{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible,.table-wrap:focus-visible{outline:3px solid #365749;outline-offset:4px}button{border:1px solid #ced4ce;background:transparent;border-radius:6px;padding:10px 18px}.topbar{padding:22px 5vw;border-bottom:1px solid #dce1da;display:flex;justify-content:space-between;align-items:center;gap:20px}.wordmark{text-decoration:none;font-weight:700;letter-spacing:-.025em}.wordmark span{font-weight:400;color:#58655d;margin-left:18px;letter-spacing:0}.local-label{font-size:12px;color:#58655d}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:42px}.brand-picker{display:flex;align-items:center;gap:12px;font-size:13px}select{padding:9px 34px 9px 12px;border:1px solid #cbd2ca;border-radius:6px;background:#fcfdfa}.mono{font:12px ui-monospace,SFMono-Regular,monospace;color:#526156}main{max-width:1180px;margin:0 auto;padding:30px 44px 76px}.intro{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-bottom:50px}h1{font-size:44px;letter-spacing:-.045em;line-height:1.1;margin:10px 0 16px}h2{font-size:22px;letter-spacing:-.025em;margin:0;font-weight:600}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#546159}.lede{max-width:65ch;font-size:16px;line-height:1.6;color:#546159;margin:0}.status{white-space:nowrap;font-size:12px;background:#e9ece4;border:1px solid #d2d9cb;padding:8px 12px;border-radius:999px}section{margin-top:48px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.section-heading>span{font-size:12px;color:#536258}.palette{display:flex;gap:12px;flex-wrap:wrap}.swatch{flex:1;min-width:128px}.swatch-paint{height:98px;border:1px solid #0000000d;border-radius:8px;margin-bottom:12px}.swatch-name{font-size:13px;margin:0 0 4px;font-weight:600}.swatch-value{font:12px ui-monospace,monospace;color:#536258}.type-row{margin-top:30px;padding-top:24px;border-top:1px solid #dce1da;display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:start}.font-name{font-size:22px;letter-spacing:-.02em;margin:10px 0;overflow-wrap:anywhere}.note{font-size:13px;line-height:1.6;color:#59675d;max-width:75ch}.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.tabs button:hover{background:#e9eee5}.tabs button[aria-pressed=true]{background:#23332c;border-color:#23332c;color:#f7faf5}.specimen-wrap{background:#e9ede7;border-radius:12px;padding:24px}.specimen{padding:52px;border-radius:8px;min-height:380px;position:relative;background:var(--surface);color:var(--text);font-family:var(--font-family);transition:none}.sample-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;opacity:.85}.specimen h3{font-size:52px;line-height:1.04;letter-spacing:-.045em;margin:24px 0 18px;font-weight:700}.specimen p{font-size:16px;line-height:1.5;margin-bottom:26px}.sample-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.sample-button{background:var(--primary-background);color:var(--primary-foreground);padding:12px 22px;border-radius:999px;font-weight:600;font-size:14px;display:inline-flex;gap:36px}.sample-alt{font-size:14px;font-weight:500}.asset-placeholder{position:absolute;right:28px;bottom:28px;font-size:11px;max-width:120px;text-align:right;opacity:.75}.specimen.email{max-width:620px;margin:auto;padding:40px;font-family:var(--font-family)}.specimen.email h3{font-size:40px}.specimen.adfuse,.specimen.canva{max-width:460px;min-height:490px;margin:auto;background:var(--dark-surface);color:var(--inverse-text);display:flex;flex-direction:column;justify-content:center}.specimen.adfuse h3,.specimen.canva h3{font-size:42px}.pair-row{display:grid;grid-template-columns:160px 1fr auto;align-items:center;gap:22px;padding:16px 0;border-bottom:1px solid #dce1da;font-size:14px}.pair-sample{border-radius:6px;padding:12px 16px;font-weight:600;text-align:center}.pair-ratio{font:13px ui-monospace,monospace}details{border-bottom:1px solid #dce1da;padding:18px 0}summary{cursor:pointer;font-size:15px;font-weight:500}details p{margin:14px 0 0;font-size:14px;line-height:1.6;max-width:75ch}.gap-channels{font-size:11px;color:#57655c;margin-top:12px;text-transform:uppercase;letter-spacing:.05em}.search-label{font-size:12px;display:flex;align-items:center;gap:12px}input{border:1px solid #cbd2ca;border-radius:6px;background:#fcfdfa;padding:10px 12px;width:230px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left}th{font-weight:500;color:#546159;font-size:12px;padding:12px 8px;border-bottom:1px solid #cbd2ca}td{padding:14px 8px;font-size:13px;border-bottom:1px solid #e0e4dc}td:first-child{font:12px ui-monospace,monospace}.source{border-bottom:1px solid #dce1da;padding:16px 0}.source p{font-size:13px;line-height:1.6;color:#546159;max-width:75ch}.source a{font-size:14px}.hash{overflow-wrap:anywhere;line-height:1.6;margin-top:24px}.empty{padding:36px;background:#e9eee5;border-radius:8px}.empty p{line-height:1.6;max-width:65ch}footer{border-top:1px solid #dce1da;padding:24px 5vw;color:#546159;font-size:12px;line-height:1.6}footer span{display:block}[hidden]{display:none!important}@media(max-width:700px){main{padding:24px 20px 50px}.topbar{padding:20px}.wordmark span{display:block;margin:4px 0 0;font-size:12px}.intro{display:block;margin-bottom:32px}h1{font-size:36px}.status{display:inline-block;margin-top:18px}.toolbar{align-items:flex-start;margin-bottom:32px}.toolbar .mono{font-size:10px;text-align:right;max-width:140px;line-height:1.6}.section-heading{align-items:flex-start;flex-direction:column;gap:12px}.type-row{grid-template-columns:1fr 1fr}.type-row>.note{grid-column:1/-1}.swatch{min-width:90px}.swatch-paint{height:76px}.specimen-wrap{padding:12px}.specimen,.specimen.email{padding:28px 22px 70px}.specimen h3{font-size:38px}.specimen.adfuse h3,.specimen.canva h3{font-size:36px}.asset-placeholder{right:22px;bottom:20px}.pair-row{grid-template-columns:1fr auto;gap:12px}.pair-sample{grid-column:1/-1}.search-label{width:100%;justify-content:space-between;flex-wrap:wrap}input{max-width:100%;flex:1;min-width:140px}.local-label{font-size:10px}section{margin-top:36px}}
/* Foundation specimens retain source colors; review labels stay on neutral ground. */
.vertical-colors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 16px}.vertical-colors .swatch{min-width:0}.vertical-colors a,.gradient a{font-size:12px;overflow-wrap:anywhere}.vertical-colors .swatch-paint{display:flex;align-items:center;justify-content:center;font-size:32px}.vertical-colors .note{margin:8px 0}.gradients{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;margin-top:36px}.gradient{min-width:0}.gradient-paint{height:160px;background-size:100% 100%;border:1px solid #dce1da;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600}.gradient h3{font-size:18px;margin:16px 0 8px}.channel-label{font-size:12px;font-weight:600}.restriction{font-size:13px;line-height:1.6;background:#f1e8d9;padding:12px;border-radius:6px}.gradient-stops{padding-left:22px;font:12px/1.8 ui-monospace,monospace;overflow-wrap:anywhere}.gradient .mono{overflow-wrap:anywhere}.document-entry{white-space:pre-line}.table-wrap{max-width:100%}td{overflow-wrap:anywhere}#type-scale td{min-width:150px}#type-scale td:first-child{min-width:220px}#tokens td:nth-child(2){max-width:360px;overflow-wrap:anywhere}#foundation-documents details>a{display:inline-block;margin-top:16px;font-size:13px}#vertical{max-width:100%}#vertical-source{margin-bottom:24px}@media(max-width:700px){.vertical-colors{grid-template-columns:repeat(2,minmax(0,1fr))}.gradients{grid-template-columns:1fr}.gradient-paint{height:150px}#spacing-scale td{min-width:130px}}
.type-sample{font-family:system-ui,sans-serif;font-size:var(--desktop-size);line-height:var(--desktop-line);letter-spacing:var(--desktop-tracking);margin:18px 0 8px;overflow-wrap:anywhere}@media(max-width:767px){.type-sample{font-size:var(--mobile-size);line-height:var(--mobile-line);letter-spacing:var(--mobile-tracking)}}
.raw-gradient{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 ui-monospace,monospace}.specimen .source-type{font-size:var(--desktop-size);line-height:var(--desktop-line);letter-spacing:var(--desktop-tracking)}@media(max-width:767px){.specimen .source-type{font-size:var(--mobile-size);line-height:var(--mobile-line);letter-spacing:var(--mobile-tracking)}}
.specimen{background-size:100% 100%;background-repeat:no-repeat}
.type-sample{max-width:320px;overflow-x:auto;white-space:nowrap;overflow-wrap:normal;padding-bottom:8px}.type-sample:focus-visible{outline:3px solid #365749;outline-offset:4px}@media(max-width:767px){.type-sample{max-width:220px}}

.review-nav{display:flex;flex-wrap:wrap;gap:12px 22px;font-size:13px;padding-bottom:18px;border-bottom:1px solid #dce1da}.sample-button{padding:12px 32px;gap:8px}h2{scroll-margin-top:24px}

/* Review hierarchy: decisions first, visual foundations next, detail on demand. */
main{max-width:1200px}.toolbar{margin-bottom:24px}.intro{margin-bottom:28px;align-items:flex-start}h1{font-size:36px;margin:8px 0 12px}.intro .eyebrow{margin-top:0}.status{margin-top:4px}section{margin-top:36px}.section-heading{margin-bottom:16px}.section-heading .eyebrow{margin:0 0 8px}.section-heading .note{margin-bottom:0}.attention{background:#fffdf8;border:1px solid #dfd9c9;border-radius:10px;padding:24px;margin-top:0}.attention>.note{margin:0 0 22px;max-width:85ch}.count-badge{background:#eee6d5;color:#65502c!important;border-radius:5px;padding:6px 10px;white-space:nowrap}.attention-group{display:grid;grid-template-columns:170px minmax(0,1fr);column-gap:24px}.attention-group h3{font-size:12px;font-weight:600;color:#655f52;margin:18px 0;grid-column:1;grid-row:1/5}.attention-group details{grid-column:2;padding:14px 0}.attention-group:last-child details:last-child{border-bottom:0}.attention-group summary{display:flex;align-items:baseline;gap:12px;list-style:none}.attention-group summary::-webkit-details-marker{display:none}.attention-group summary:before{content:'+';font:18px ui-monospace,monospace;color:#75664e;flex-shrink:0}.attention-group details[open]>summary:before{content:'−'}.attention-label{display:block}.attention-title{display:block;font-size:14px;font-weight:600}.attention-action{display:block;font-size:12px;font-weight:400;color:#69685f;line-height:1.5;margin-top:5px}.attention-group details>p,.attention-group .gap-channels{margin-left:24px}.attention-group details>p{padding:12px 16px;background:#f4f1e9;border-radius:5px;font-size:13px}.review-nav{margin-top:28px;gap:6px 24px;padding:14px 0;line-height:2}.review-nav a{text-decoration:none}.review-nav a:hover{text-decoration:underline}h2{font-size:21px;scroll-margin-top:24px}.subheading{font-size:14px;font-weight:600;margin:28px 0 16px}.subheading span{font-size:12px;font-weight:400;color:#667166;margin-left:10px}.vertical-colors{grid-template-columns:repeat(8,minmax(0,1fr));gap:14px}.vertical-colors .swatch-paint{height:80px;font-size:24px}.vertical-colors details{padding:10px 0;border:0}.vertical-colors summary{font-size:11px}.vertical-colors .note{font-size:12px}.vertical-colors a{display:inline-block;margin-top:8px}.gradients{margin-top:0;gap:24px}.gradient{background:#fff;border:1px solid #dce1da;border-radius:8px;padding:16px}.gradient-paint{height:110px;font-size:20px}.gradient h3{font-size:15px;margin-top:14px}.gradient .note{margin:8px 0;font-size:12px}.gradient .restriction{background:#f4f2ed;border-left:2px solid #b8af9b;border-radius:0;font-size:12px;margin:12px 0;padding:8px 10px}.gradient>details{border-bottom:0;padding-bottom:0}.gradient summary{font-size:12px}.gradient .channel-label{margin:8px 0}.application-section{margin:16px 0 28px}.application-section .section-heading{margin-bottom:8px}.application-section h2{font-size:15px;letter-spacing:0}.example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.example-grid article{min-width:0}.example-caption{font-size:12px;font-weight:600;margin:12px 0}.example-grid .specimen{padding:32px;min-height:320px;border:1px solid #00000012}.example-grid .specimen h3{margin:20px 0 14px}.example-grid .specimen p{font-size:14px;margin:0 0 24px}.sample-label{font-size:10px}.reference-section{margin-top:16px;padding:0;border:1px solid #dce1da;border-radius:8px;background:#fafbf8}.reference-section>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px;font-size:15px;list-style:none}.reference-section>summary:before{content:'+';font:18px ui-monospace,monospace;color:#58655d}.reference-section[open]>summary:before{content:'−'}.reference-section>summary>span:first-child{flex:1}.reference-section>summary::-webkit-details-marker{display:none}.disclosure-hint{font-size:11px;font-weight:400;color:#657064}.reference-section[open]>summary .disclosure-hint{display:none}.reference-body{padding:0 20px 20px}.reference-body section{margin-top:12px}.reference-body .section-heading h2{font-size:17px}.table-wrap{max-height:600px}thead{position:sticky;top:0;background:#f7f8f6;z-index:1}#foundation-title{font-size:18px}#foundations>section:last-of-type{margin-bottom:32px}.type-row{margin-top:20px;padding-top:18px}.font-name{font-size:18px}.palette .swatch-paint{height:64px}.palette .swatch{min-width:90px}#font-note{margin-top:0}.hash{font-size:10px}
@media(max-width:900px){.vertical-colors{grid-template-columns:repeat(4,minmax(0,1fr))}.attention-group{grid-template-columns:145px minmax(0,1fr);column-gap:16px}.example-grid .specimen{padding:26px}}
@media(max-width:700px){.attention{padding:18px}.attention>.section-heading{flex-direction:row;align-items:center;gap:8px}.attention h2{font-size:19px}.attention-group{display:block}.attention-group h3{margin:22px 0 2px}.attention-group details{padding:12px 0}.attention-action{font-size:12px}.attention-title{font-size:13px}.review-nav{gap:4px 18px;font-size:12px}.intro h1{font-size:30px}.intro .status{margin-top:14px}.lede{font-size:14px}.example-grid{grid-template-columns:1fr;gap:12px}.example-grid .specimen{min-height:280px;padding:26px}.subheading span{display:block;margin:6px 0 0}.vertical-colors{gap:18px 10px}.vertical-colors .swatch-paint{height:65px}.vertical-colors .swatch-name{font-size:12px}.vertical-colors .swatch-value{font-size:10px}.vertical-colors summary{font-size:10px}.gradients{gap:16px}.reference-section>summary{padding:16px;font-size:14px}.disclosure-hint{display:none}.reference-body{padding:0 14px 16px}.type-row{gap:16px}.table-wrap{max-height:440px}.count-badge{font-size:11px!important}.source{overflow-wrap:anywhere}}

/* Reference content flows with the page, never inside a second scroll area. */
.table-wrap{overflow:visible;max-height:none;outline:none}.type-sample{max-width:none;overflow:visible;white-space:normal;overflow-wrap:anywhere}table{table-layout:fixed}#type-scale td,#type-scale td:first-child,#spacing-scale td{min-width:0}#type-scale th:first-child{width:35%}#type-scale th:last-child{width:12%}thead{position:static}.source-label{font-size:12px;color:#637066;overflow-wrap:anywhere}.vertical-colors .source-label{display:inline-block;margin-top:8px}.gradient .restriction{border-left:0;border:1px solid #ddd7ca;border-radius:5px}.source-label:empty{display:none}
.lab-settings{display:flex;align-items:center;gap:24px;border-bottom:1px solid #dce1da;padding:8px 0 18px}.lab-settings label{display:flex;align-items:center;gap:8px;font-size:13px}.lab-settings input{width:auto;min-width:0;flex:none}.lab-settings .note{margin:0}.lab-row{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px;padding:28px 0;border-bottom:1px solid #dce1da}.lab-description h3{font-size:15px;margin:0 0 12px}.lab-description p{font-size:13px;color:#59675d;line-height:1.6}.lab-description label{font-size:12px;display:block;margin:12px 0 6px}.lab-description select{max-width:100%;width:100%}.lab-description>button{font-size:12px;margin-top:18px}.lab-selects{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;align-items:center}.lab-selects label{margin:0}.lab-selects select{grid-column:2}.form-demo{align-self:center;max-width:580px;font-family:var(--lab-font,inherit)}.form-demo>label{font-size:14px;font-weight:600;display:block;margin-bottom:8px}.form-demo>input{width:100%;min-width:0;display:block;min-height:44px;color:#141a21;background:#ffffff;border:1px solid var(--status-border);transition:border-color var(--color-ms) var(--color-ease)}.form-demo>input:focus-visible{outline:2px solid #141a21;outline-offset:2px}.form-feedback{display:flex;gap:10px;align-items:flex-start;min-height:64px;padding:14px;margin-top:12px;border-radius:6px;background:var(--status-background);color:var(--status-foreground);transition:background-color var(--color-ms) var(--color-ease),color var(--color-ms) var(--color-ease);font-size:14px;line-height:1.5}.form-demo .note{font-size:12px;margin:12px 0}.lucide-icon{display:inline-block;width:20px;height:20px;flex:0 0 auto;background:currentColor;mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat;vertical-align:middle}.control-stage{border:1px solid #dce1da;border-radius:8px;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px;transition:background-color var(--color-ms) var(--color-ease),color var(--color-ms) var(--color-ease)}.control-stage p{font-size:12px;text-align:center;margin:0;line-height:1.6}.brand-control{position:relative;font-family:var(--lab-font,inherit);font-size:14px;font-weight:600;line-height:1.43;white-space:nowrap;background:var(--control-background);color:var(--control-foreground);border:0;border-radius:9999px;padding:12px 32px;min-height:44px;transition:background-color var(--color-ms) var(--color-ease),color var(--color-ms) var(--color-ease),opacity var(--color-ms) var(--color-ease)}.control-label{display:inline-flex;align-items:center;gap:8px}.brand-control[data-state=hover]{background:var(--control-hover)}.brand-control[data-state=pressed]{background:var(--control-pressed)}.brand-control[data-state=focus],.brand-control:focus-visible{outline:var(--ring-width) solid var(--control-ring);outline-offset:var(--ring-offset)}.brand-control:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.brand-control[aria-busy=true]{cursor:wait}.brand-control[aria-busy=true]>.control-label{opacity:0}.spinner{display:none;position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}.brand-control[aria-busy=true]>.spinner{display:block;animation:brand-spin var(--spinner-ms) linear infinite}.icon-stage{align-self:center;padding:24px;background:#fcfaf7;border:1px solid #dce1da;border-radius:8px;min-height:144px}.icon-stage #icon-preview{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:15px}.icon-control{padding:0;display:inline-flex;align-items:center;justify-content:center;min-width:44px}.identity-assets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.identity-item{margin:0}.identity-surface{height:180px;display:flex;align-items:center;justify-content:center;padding:24px;background:#fcfaf7;border:1px solid #dce1da;border-radius:8px;transition:background-color 180ms ease}.identity-surface.dark{background:#02272c}.identity-surface img{max-width:100%;max-height:100%;object-fit:contain}.identity-item figcaption{font-size:13px;margin:12px 0}.identity-item button{font-size:12px}#interaction-lab .status{background:#f0e8d8;border-color:#e2d8c5}.proposal-colors{font-family:ui-monospace,monospace}
@keyframes brand-spin{to{transform:rotate(360deg)}}
@media(hover:hover) and (pointer:fine){.brand-control:not(:disabled):not([aria-busy=true]):not([data-state=pressed]):hover{background:var(--control-hover)}}
.brand-control:not(:disabled):not([aria-busy=true]):active{background:var(--control-pressed)}
html[data-reduced-motion=true] .form-feedback,html[data-reduced-motion=true] .form-demo>input,html[data-reduced-motion=true] .brand-control,html[data-reduced-motion=true] .control-stage,html[data-reduced-motion=true] .identity-surface{transition:none}html[data-reduced-motion=true] .spinner{animation:none!important}
@media(prefers-reduced-motion:reduce){.form-feedback,.form-demo>input,.brand-control,.control-stage,.identity-surface{transition:none}.spinner{animation:none!important}}
@media(max-width:800px){.lab-row{grid-template-columns:1fr;gap:20px}.lab-description select{width:auto;min-width:160px}.lab-selects{max-width:380px}.form-demo{max-width:none}.lab-settings{align-items:flex-start;flex-direction:column;gap:12px}.table-wrap{max-height:none;overflow:visible}table,tbody,tr,td{display:block;width:100%}thead{display:none}tr{padding:16px 0;border-bottom:1px solid #dce1da}td{border:0;padding:6px 0!important;max-width:none!important;min-width:0!important}td:before{content:attr(data-label);font:11px -apple-system,BlinkMacSystemFont,sans-serif;color:#637066;display:block;margin-bottom:6px}#type-scale td:first-child{min-width:0}.type-sample{max-width:none;white-space:normal;overflow:visible}.identity-assets{grid-template-columns:1fr}}
/* Large type gets a full-width specimen; metrics sit underneath. */
[aria-label="Desktop and mobile typography"] thead{display:none}#type-scale{display:block}#type-scale tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px;padding:24px 0;border-bottom:1px solid #dce1da}#type-scale td{display:block;min-width:0;border:0;padding:0!important}#type-scale td:first-child{grid-column:1/-1;font:13px -apple-system,BlinkMacSystemFont,sans-serif}#type-scale td:first-child>.note{font-family:inherit}#type-scale td:not(:first-child):before{content:attr(data-label);display:block;font-size:11px;color:#637066;margin-bottom:6px}#type-scale td:last-child{grid-column:1/-1;color:#637066;font-size:11px}#type-scale td:last-child:before{display:none}#type-scale .type-sample{margin:18px 0;overflow-wrap:normal;word-break:normal}#type-scale td:first-child:before{display:none}
@media(max-width:700px){#type-scale tr{grid-template-columns:1fr;gap:12px}#type-scale .type-sample{overflow-wrap:anywhere}}

.detail-row { padding: 18px 0; border-bottom: 1px solid var(--line, #deded8); }
.detail-row:last-child { border-bottom: 0; }
.detail-row h3 { font-size: 1rem; margin: 0 0 8px; }
.detail-value { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 75ch; }

.source-slot{padding:24px 0;border-top:1px solid var(--line,#ddd);overflow-wrap:anywhere}.partial-type-sample{font-size:32px;line-height:1.2;margin:20px 0;overflow-wrap:anywhere}.slot-metrics{display:grid;grid-template-columns:minmax(90px,1fr) 3fr;gap:8px 16px;font-size:14px}.slot-metrics dt{color:#555}.slot-metrics dd{margin:0}

.source-icons{display:flex;gap:32px;flex-wrap:wrap}.source-icons figure{margin:0;padding:20px;background:#fff}.source-icons figcaption{margin-top:12px;font-size:14px}

/* Neutral workspace chrome. Source paints, samples and contrast ratios keep their own styles. */
:root{--ui-canvas:oklch(97.8% .003 260);--ui-surface:oklch(99.6% .002 260);--ui-soft:oklch(95.5% .004 260);--ui-line:oklch(87% .007 260);--ui-ink:oklch(25% .012 260);--ui-muted:oklch(46% .014 260);--ui-focus:oklch(46% .12 260);--line:var(--ui-line);color:var(--ui-ink);background:var(--ui-canvas)}
.topbar{background:var(--ui-surface);border-color:var(--ui-line);padding-block:20px}.wordmark{font-size:16px}.wordmark span,.local-label,.mono,.eyebrow,.lede,.note,.section-heading>span,.source-label,.swatch-value{color:var(--ui-muted)}
.toolbar{padding-bottom:20px;border-bottom:1px solid var(--ui-line)}.brand-picker>label{font-weight:600}.intro{margin-block:32px}.intro h1{font-size:36px;letter-spacing:-.035em}.intro .lede{font-size:15px}.status{background:var(--ui-soft);border-color:var(--ui-line);color:var(--ui-muted)}
/* Explicit shell control allowlist prevents styling source-button / form-demo specimens. */
:is(.brand-picker,.button-settings,.lab-description) select,#search,#button-replay,#restore-icon,.identity-item>button{border:1px solid var(--ui-line);border-radius:8px;background-color:var(--ui-surface);color:var(--ui-ink);font-size:13px;min-height:40px;box-shadow:0 1px 2px #18202708}
:is(.brand-picker,.button-settings,.lab-description) select{appearance:none;padding:10px 38px 10px 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23586273' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
:is(.brand-picker,.button-settings,.lab-description) select:hover,#button-replay:hover,#restore-icon:hover,.identity-item>button:hover{background-color:var(--ui-soft);border-color:oklch(70% .012 260)}
:is(.brand-picker,.button-settings,.lab-description) select:focus-visible,#search:focus-visible,#button-replay:focus-visible,#restore-icon:focus-visible,.identity-item>button:focus-visible,.review-nav a:focus-visible,summary:focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}
#button-replay:active,#restore-icon:active,.identity-item>button:active{background-color:var(--ui-line)}
.review-nav{gap:6px;margin-block:24px;padding:12px 0;border-block:1px solid var(--ui-line)}.review-nav a{padding:5px 10px;border-radius:6px;color:var(--ui-muted);line-height:1.7}.review-nav a:hover{background:var(--ui-soft);color:var(--ui-ink);text-decoration:none}
.attention{background:var(--ui-surface);border-color:var(--ui-line);padding:24px 28px;border-radius:12px}.attention>.note{max-width:75ch;color:var(--ui-muted)}.attention-group h3{color:var(--ui-muted);line-height:1.5}.attention-action{color:var(--ui-muted)}.attention-group details>p{background:var(--ui-soft)}.attention-group details{border-color:var(--ui-line)}.count-badge{background:oklch(95% .025 80);color:oklch(42% .055 70)!important;font-weight:600}
/* Shared chevron and generous hit area for native disclosures. */
summary{list-style:none;display:flex;align-items:baseline;gap:10px;line-height:1.5;min-height:32px}summary::-webkit-details-marker{display:none}summary:before,.attention-group summary:before,.reference-section>summary:before{content:'';display:inline-block;flex:0 0 6px;width:6px;height:6px;border:solid var(--ui-muted);border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);margin:0 4px 2px 2px}
details[open]>summary:before,.attention-group details[open]>summary:before,.reference-section[open]>summary:before{content:'';transform:rotate(45deg)}summary:hover{color:var(--ui-focus)}
.reference-section{background:var(--ui-surface);border-color:var(--ui-line);border-radius:10px}.reference-section>summary{padding:20px;min-height:60px}.reference-section[open]>summary{border-bottom:1px solid var(--ui-line);margin-bottom:20px}.disclosure-hint{color:var(--ui-muted)}
.section-heading h2{letter-spacing:-.025em}.button-settings{padding:18px;background:var(--ui-soft);border-radius:10px}.button-settings label{font-weight:600;font-size:12px}.button-stage{border-color:var(--ui-line)}
.swatch-name{line-height:1.5}.swatch-value{display:block;overflow-wrap:anywhere;line-height:1.5}.vertical-colors .swatch{padding-bottom:12px;border-bottom:1px solid var(--ui-line)}.vertical-colors summary{font-size:11px;align-items:center}.vertical-colors .restriction{padding:8px;font-size:11px;overflow-wrap:anywhere}.gradient{border-color:var(--ui-line);background:var(--ui-surface);padding:18px;border-radius:10px}.gradient>details{border-top:1px solid var(--ui-line);margin-top:14px;padding-top:12px}.gradient .gradient-paint{border-color:var(--ui-line)}
.identity-assets{gap:28px 24px}.identity-item>figcaption{line-height:1.6;color:var(--ui-muted);margin:14px 0 10px;font-size:12px}.identity-surface{background:var(--ui-surface);border-color:var(--ui-line);border-radius:10px}.identity-surface.dark{background:oklch(23% .007 260)}.identity-item>button{font-size:12px;padding:8px 12px}.identity-item>button[aria-pressed=true]{background:var(--ui-soft)}
.public-label{display:none}html[data-review-mode=public] .public-label{display:inline}html[data-review-mode=public] :is(.team-label,#brand-editor-host){display:none!important}
@media(max-width:700px){.intro h1{font-size:30px}.attention{padding:20px 18px}.toolbar{gap:12px}.brand-picker{gap:8px}.review-nav{gap:4px}.review-nav a{padding:6px 8px}.button-settings{padding:14px;gap:14px}.vertical-colors{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}.vertical-colors .swatch-paint{height:80px}.vertical-colors .swatch-value{font-size:12px}.gradient{padding:16px}.reference-section>summary{padding:16px}}