@font-face{font-family:Inter;src:url('files/fonts/web/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('files/fonts/web/Inter-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('files/fonts/web/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('files/fonts/web/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html{scrollbar-gutter:stable;scroll-behavior:auto;scroll-padding-top:7rem}
body{margin:0;background:var(--c-bg);color:var(--c-text);font:var(--c-type-body-font-weight) var(--c-type-body-font-size)/var(--c-type-body-line-height) var(--c-type-body-font-family),sans-serif}
[data-theme]{background:var(--c-bg);color:var(--c-text)}
[hidden]{display:none!important}
a{color:var(--c-link);text-underline-offset:.2em}
@media(hover:hover){a:where(:hover){color:var(--c-link-hover);text-decoration-thickness:2px}}
a:where(:active){color:var(--c-link-active)}
:focus-visible{outline:var(--c-layout-focus-width) solid var(--c-focus);outline-offset:var(--c-layout-focus-offset)}
:target{scroll-margin-top:7rem}
img{display:block;max-width:100%;height:auto}
button,input,select{font:inherit}
p,h1,h2,h3,figure{margin:0}
h1,h2,h3{font-family:var(--c-type-display-font-family),sans-serif;font-weight:600;overflow-wrap:anywhere}
h1{font-size:var(--c-type-display-font-size);line-height:var(--c-type-display-line-height);letter-spacing:var(--c-type-display-letter-spacing)}
h2{font-size:var(--c-type-section-font-size);line-height:var(--c-type-section-line-height)}
h3{font-size:var(--c-type-card-font-size);line-height:var(--c-type-card-line-height)}
p,li{overflow-wrap:anywhere}
code,pre{font-family:var(--c-type-label-font-family),monospace;font-size:.875em}
code{overflow-wrap:anywhere}
p code,li code,td code{background:var(--c-surface);padding:.08em .25em;border-radius:var(--c-radius-sm)}
.eyebrow{font:var(--c-type-label-font-weight) var(--c-type-label-font-size)/var(--c-type-label-line-height) var(--c-type-label-font-family),monospace;letter-spacing:var(--c-type-label-letter-spacing);text-transform:var(--c-type-label-text-transform);color:var(--c-muted)}
.skip-link{position:fixed;top:var(--c-space-4);left:var(--c-space-4);z-index:20;transform:translateY(-200%);background:var(--c-action-primary);color:var(--c-action-primary-fg);padding:var(--c-space-4)}
.skip-link:focus{transform:none}
.site-header{min-height:88px;position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--c-space-6);background:var(--c-bg);padding:var(--c-space-4) var(--c-space-8);border-bottom:1px solid var(--c-divider)}
.identity{width:160px;display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.identity img{width:48px;height:48px}
.identity span{font:var(--c-type-identity-label-font-weight) var(--c-type-identity-label-font-size)/var(--c-type-identity-label-line-height) var(--c-type-identity-label-font-family),sans-serif;letter-spacing:var(--c-type-identity-label-letter-spacing)}
.header-label{border-left:1px solid var(--c-divider-strong);padding-left:var(--c-space-6);color:var(--c-muted);font-size:var(--c-type-ui-font-size)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:var(--c-space-6);min-width:0}
.theme-control{display:flex;align-items:center;gap:var(--c-space-2);font-size:var(--c-type-ui-font-size)}
.source-link{display:inline-flex;align-items:center;min-height:var(--c-layout-control-min);font-size:var(--c-type-ui-font-size);text-decoration:none}
@media(hover:hover){.source-link:hover{text-decoration:underline}}
.reference-layout{display:grid;grid-template-columns:220px minmax(0,800px) 170px;gap:var(--c-space-12);max-width:1460px;padding:var(--c-space-8);margin:auto;align-items:start}
.sidebar,.page-index{position:sticky;top:7rem;max-height:calc(100dvh - 8rem);overflow:auto;scrollbar-width:thin;padding-bottom:var(--c-space-2)}
.navigation>summary{display:none}
.search{padding-bottom:var(--c-space-6);margin-bottom:var(--c-space-6);border-bottom:1px solid var(--c-divider)}
.search label{font-size:var(--c-type-ui-font-size);font-weight:500;display:block;margin-bottom:var(--c-space-2)}
.search .c-input{font-size:var(--c-type-control-font-size);padding-inline:var(--c-space-2)}
#search-status{font-size:var(--c-type-ui-small-font-size);color:var(--c-muted);margin-top:var(--c-space-2)}
#search-status:empty{display:none}
#search-results{padding:0;list-style:none;max-height:24rem;overflow:auto;border-bottom:1px solid var(--c-divider);margin-bottom:0}
#search-results a{display:block;padding-block:var(--c-space-2);font-size:var(--c-type-ui-font-size)}
#search-results span{display:block;color:var(--c-muted);font-size:var(--c-type-ui-small-font-size)}
.nav-group+.nav-group{margin-top:var(--c-space-6)}
.nav-group .eyebrow{font-size:var(--c-type-ui-small-font-size);margin-bottom:var(--c-space-2)}
.sidebar nav ul,.page-index ul{list-style:none;margin:0;padding:0}
.sidebar nav a{display:block;text-decoration:none;font-size:var(--c-type-ui-font-size);min-height:var(--c-layout-control-min);padding:var(--c-space-2) var(--c-space-4);border-left:2px solid transparent}
.sidebar nav a[aria-current]{border-left-color:var(--c-text);background:var(--c-surface);font-weight:600}
@media(hover:hover){.sidebar nav a:hover{background:var(--c-surface);text-decoration:underline}}
.sidebar-version{font:var(--c-type-ui-small-font-size)/1.6 var(--c-type-label-font-family),monospace;color:var(--c-muted);margin-top:var(--c-space-8);padding-top:var(--c-space-4);border-top:1px solid var(--c-divider)}
.page-index .eyebrow{font-size:var(--c-type-ui-small-font-size);margin-bottom:var(--c-space-4)}
.page-index a{display:block;font-size:var(--c-type-ui-small-font-size);line-height:1.6;min-height:var(--c-layout-control-min);padding-block:var(--c-space-2);color:var(--c-muted);text-decoration:none;overflow-wrap:anywhere}
@media(hover:hover){.page-index a:hover{text-decoration:underline;color:var(--c-text)}}
main{min-width:0;padding-top:var(--c-space-2)}
.hero{padding-block:var(--c-space-8) var(--c-space-12)}
.hero h1{margin-top:var(--c-space-6)}
.lead{font-size:var(--c-type-card-font-size);line-height:var(--c-type-card-line-height);color:var(--c-muted);max-width:42ch;margin-top:var(--c-space-6)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--c-space-6);margin-top:var(--c-space-8)}
.hero-actions .c-button{gap:var(--c-space-6)}

.section-title .eyebrow{margin-bottom:var(--c-space-4)}
.chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:var(--c-space-8);border-top:1px solid var(--c-divider)}
.chapter{display:block;text-decoration:none;padding:var(--c-space-6) var(--c-space-4) var(--c-space-8) 0;border-bottom:1px solid var(--c-divider);min-width:0}
.chapter:nth-child(2n){padding-left:var(--c-space-6);border-left:1px solid var(--c-divider)}
.chapter h3{margin-block:var(--c-space-4) var(--c-space-2);display:flex;align-items:baseline;justify-content:space-between;gap:var(--c-space-4)}
.chapter p:last-child{font-size:var(--c-type-control-font-size);color:var(--c-muted);max-width:32ch}
@media(hover:hover){.chapter:hover h3{text-decoration:underline}}
.scope-section,.reference-status{padding-top:var(--c-space-16)}
.scope-section h2,.reference-status h2{margin-block:var(--c-space-4) var(--c-space-6)}
.scope-section>p:not(.eyebrow),.reference-status>p:not(.eyebrow){max-width:var(--c-layout-line);color:var(--c-muted)}

.document-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--c-space-4);margin-bottom:var(--c-space-8)}
.document-meta>.eyebrow{flex:none;white-space:nowrap}
.source-links{display:flex;flex-wrap:wrap;gap:0 var(--c-space-4);min-width:0}
.provenance-note summary{cursor:pointer;min-height:var(--c-layout-control-min);align-content:center}
.provenance-note p:last-child{margin-bottom:0}
.prose{max-width:100%}
.prose>h1{margin-bottom:var(--c-space-8)}
.prose h2{padding-top:var(--c-space-4);margin-block:var(--c-space-12) var(--c-space-6);border-top:1px solid var(--c-divider)}
.prose h3{margin-block:var(--c-space-8) var(--c-space-4)}
.prose p{margin-block:var(--c-space-4);max-width:var(--c-layout-line)}
.prose ul,.prose ol{padding-left:var(--c-space-6);margin-block:var(--c-space-4)}
.prose li{padding-left:var(--c-space-2);margin-block:var(--c-space-2)}
.prose li p{margin-block:var(--c-space-2)}
.heading-anchor{font-size:.65em;text-decoration:none;margin-left:.4em;color:var(--c-muted)}
blockquote,.notice{border-left:3px solid var(--c-border);background:var(--c-surface);margin:var(--c-space-6) 0;padding:var(--c-space-4) var(--c-space-6);font-size:var(--c-type-control-font-size)}
blockquote p{margin:0!important}
.table-scroll{overflow:auto;max-width:100%;margin-block:var(--c-space-6);border:1px solid var(--c-divider-strong)}
table{width:100%;border-collapse:collapse;font-size:var(--c-type-control-font-size);line-height:1.6;text-align:left}
th{font-weight:500;background:var(--c-surface)}
td,th{vertical-align:top;padding:var(--c-space-4);border-bottom:1px solid var(--c-divider);min-width:8rem;overflow-wrap:anywhere}
tr:last-child td,tr:last-child th{border-bottom:0}
.align-right{text-align:right}.align-center{text-align:center}
.code-example{margin-block:var(--c-space-6);border:1px solid var(--c-divider-strong);min-width:0}
.code-example figcaption{font:var(--c-type-ui-small-font-size)/1.6 var(--c-type-label-font-family),monospace;padding:var(--c-space-2) var(--c-space-4);color:var(--c-muted);border-bottom:1px solid var(--c-divider)}
pre{margin:0;padding:var(--c-space-4);overflow:auto;background:var(--c-surface);line-height:1.6;tab-size:2}
pre code{font-size:inherit;overflow-wrap:normal;white-space:pre}
hr{border:0;border-top:1px solid var(--c-divider);margin-block:var(--c-space-8)}
.page-footer{margin-top:var(--c-space-16);padding-block:var(--c-space-8);border-top:1px solid var(--c-divider);font-size:var(--c-type-ui-small-font-size);color:var(--c-muted);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--c-space-4)}
.page-footer a{display:inline-flex;align-items:center;min-height:var(--c-layout-control-min)}
.document>h1{margin-block:var(--c-space-8) var(--c-space-6)}
.document>p{margin-block:var(--c-space-4)}
.document>section{margin-top:var(--c-space-12)}

.download-list{padding:0;list-style:none;border-top:1px solid var(--c-divider);margin-top:var(--c-space-6)}
.download-list li{border-bottom:1px solid var(--c-divider)}
.download-list a{display:grid;grid-template-columns:minmax(0,1fr) 24px;padding-block:var(--c-space-4);text-decoration:none;gap:var(--c-space-base) var(--c-space-4)}
.download-list a span:nth-child(2){grid-row:2;color:var(--c-muted);font:var(--c-type-ui-small-font-size)/1.5 var(--c-type-label-font-family),monospace}
.download-list a span:last-child{grid-column:2;grid-row:1 / 3;align-self:center}
@media(hover:hover){.download-list a:hover span:first-child{text-decoration:underline}}
.token-tools{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--c-space-4);margin-block:var(--c-space-8);align-items:start}
.token-tools label{display:grid;gap:var(--c-space-2);font-size:var(--c-type-control-font-size);font-weight:500}
#token-status{grid-column:1 / -1;font-size:var(--c-type-ui-small-font-size);color:var(--c-muted)}
.token-table th[scope=row]{background:var(--c-bg);font-weight:400;min-width:15rem}
.token-group-label{display:block;font-size:var(--c-type-ui-small-font-size);color:var(--c-muted);margin-top:var(--c-space-2)}
.token-table td{min-width:13rem}
.swatch{display:inline-block;width:1.1rem;height:1.1rem;vertical-align:middle;margin-right:var(--c-space-2);border:1px solid var(--c-border);background:var(--swatch)}
.shared-value{color:var(--c-muted)}
@media(max-width:1279px){.reference-layout{grid-template-columns:200px minmax(0,1fr);gap:var(--c-space-8)}.page-index{position:static;grid-column:2;grid-row:1;max-height:none;border-bottom:1px solid var(--c-divider);padding-bottom:var(--c-space-6)}.page-index:empty{display:none}main{grid-column:2;grid-row:2}.sidebar{grid-row:1 / 3}.page-index ul{display:flex;flex-wrap:wrap;gap:0 var(--c-space-4)}.page-index a{padding-block:var(--c-space-base)}.overview{grid-row:1 / 3}}
@media(max-width:720px){
 html{scroll-padding-top:9rem}.site-header{min-height:72px;padding:var(--c-space-2) var(--c-space-4);gap:var(--c-space-2);flex-wrap:wrap}.header-label{display:none}.header-actions{gap:var(--c-space-4)}.theme-control{gap:var(--c-space-base)}.theme-control>span{max-width:7rem}.header-actions>.source-link{display:none}
 .reference-layout{display:flex;flex-direction:column;gap:var(--c-space-6);padding:var(--c-space-4)}.sidebar,.page-index,main{width:100%;position:static;max-height:none;overflow:visible}.sidebar{border-bottom:1px solid var(--c-divider);padding-bottom:var(--c-space-4)}.navigation>summary{display:flex;align-items:center;justify-content:space-between;min-height:var(--c-layout-control-min);font-size:var(--c-type-control-font-size);font-weight:500;cursor:pointer;list-style:none}.navigation>summary::after{content:'+';font-size:1.5em}.navigation[open]>summary::after{content:'−'}.navigation>summary::-webkit-details-marker{display:none}.navigation-content{padding-top:var(--c-space-4)}.sidebar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--c-space-6) var(--c-space-4)}.nav-group+.nav-group{margin:0}.sidebar-version{margin-top:var(--c-space-6)}.page-index{order:0}.sidebar{order:-1}.page-index a{font-size:var(--c-type-ui-small-font-size)}main{order:1}
 h1{font-size:var(--c-type-display-small-font-size);line-height:var(--c-type-display-small-line-height)}.hero{padding-block:var(--c-space-4) var(--c-space-8)}.lead{font-size:var(--c-type-card-font-size)}.chapters{grid-template-columns:1fr}.chapter:nth-child(2n){padding-left:0;border-left:0}.chapter{padding-right:0}.scope-section,.reference-status{padding-top:var(--c-space-12)}.document-meta{align-items:flex-start;flex-direction:column;gap:var(--c-space-base);margin-bottom:var(--c-space-4)}.source-links{flex-direction:column}.prose table{table-layout:fixed}.prose td,.prose th{min-width:0;padding:var(--c-space-2);overflow-wrap:anywhere}.prose h2{font-size:var(--c-type-card-font-size)}.token-tools{grid-template-columns:1fr}.page-footer{margin-top:var(--c-space-12);flex-direction:column}.table-scroll{max-width:100%}
}
@media(max-width:380px){.theme-control{font-size:0;gap:0}.identity{gap:var(--c-space-2)}.theme-control>span{max-width:6.5rem}}
@media print{.site-header,.sidebar,.page-index,.search,.hero-actions,.heading-anchor,.token-tools{display:none!important}.reference-layout{display:block;padding:0}main{width:100%}body{background:white;color:black;font-size:11pt}h1,h2,h3{break-after:avoid}pre,.table-scroll{overflow:visible;white-space:pre-wrap}pre code{white-space:pre-wrap;overflow-wrap:anywhere}a{color:inherit}tr,figure{break-inside:avoid}.page-footer{margin-top:2rem}}
/* Source-backed exhibits: same approved assets and complete token type roles. */

.visual-reference{margin-block:var(--c-space-8) var(--c-space-12);padding-bottom:var(--c-space-6);border-bottom:1px solid var(--c-divider)}
.prose .visual-reference h2{font-size:var(--c-type-card-font-size);border:0;padding:0;margin-block:var(--c-space-4)}
.color-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--c-divider-strong);margin-top:var(--c-space-6)}
.color-panel{padding:var(--c-space-4)}
.color-panel+.color-panel{border-left:1px solid var(--c-border)}
.color-role{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--c-space-base) var(--c-space-2);padding-block:var(--c-space-4);border-bottom:1px solid var(--c-divider)}
.color-role>span{width:24px;height:24px;border:1px solid var(--c-border);grid-row:1 / 3}
.color-role>code{font-size:var(--c-type-ui-small-font-size)}
.color-role>code:last-child{color:var(--c-muted)}
.type-specimens{margin-top:var(--c-space-6);border-top:1px solid var(--c-divider)}
.type-specimen{padding-block:var(--c-space-6);border-bottom:1px solid var(--c-divider)}
.prose .type-specimen .type-sample{margin-bottom:0;overflow-wrap:anywhere}
@media(max-width:720px){.color-panels{grid-template-columns:1fr}.color-panel+.color-panel{border-left:0;border-top:1px solid var(--c-border)}}
.additional-assets{margin-block:var(--c-space-8);border-block:1px solid var(--c-border)}
.additional-assets summary{cursor:pointer;min-height:var(--c-layout-control-min);padding-block:var(--c-space-4);font-weight:500;font-size:var(--c-type-control-font-size)}
.additional-assets .download-list{margin:0}

/* Family-guide navigation has the current site's identity, not its neighbors'. */
.brand-sites{display:flex;align-items:center;flex-wrap:wrap;gap:var(--c-space-6);padding:var(--c-space-2) var(--c-space-8);border-bottom:1px solid var(--c-divider);font-size:var(--c-type-control-font-size)}
.brand-sites>span{font-size:var(--c-type-ui-small-font-size);color:var(--c-muted)}
.brand-sites a{display:inline-flex;align-items:center;min-height:var(--c-layout-control-min);text-decoration:none}
.brand-sites a[aria-current]{font-weight:600;text-decoration:underline;text-decoration-thickness:2px}
@media(hover:hover){.brand-sites a:hover{text-decoration:underline}}
@media(max-width:720px){.brand-sites{padding-inline:var(--c-space-4);gap:var(--c-space-4)}}
@media print{.brand-sites{display:none}}

/* Shared component examples in the reference shell. */
.component-panel{padding:var(--c-space-6);border:1px solid var(--c-divider-strong);margin-top:var(--c-space-8)}.component-panel form{display:grid;gap:var(--c-space-6);margin-top:var(--c-space-6)}.component-panel label{display:grid;gap:var(--c-space-2)}.component-panel details{border-top:1px solid var(--c-divider);padding-top:var(--c-space-4)}.component-panel summary{cursor:pointer;min-height:var(--c-layout-control-min)}.sample-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--c-space-4)}

/* Shared chrome: the symbol plus a live UI label on every reference site. */
.identity-symbol{display:grid;place-items:center;width:48px;height:48px;flex:none}
.identity-symbol--hplx img{width:36px;height:36px}
.identity-symbol img{object-fit:contain}
.identity span{color:var(--c-text)}
@media(max-width:380px){.identity{width:144px;gap:12px}}
/* Original canvases stay intact. Different canvas padding is compensated by
   the display width, not by cropping or rebuilding the approved lockups.
   Ink/canvas widths: Cosmik 1336.64/2172; HPLX 178.892/192;
   Tectra 178.03/195. Products scale to the same visible lockup width. */
main{container-type:inline-size}
.identity-surfaces{display:grid;grid-template-columns:1fr;gap:var(--c-space-6);margin-block:var(--c-space-8)}
.identity-surface{border:1px solid var(--c-divider-strong);min-width:0;margin:0}
.artwork-stage{height:200px;display:flex;align-items:center;justify-content:center;padding:var(--c-space-4)}
.artwork-stage picture{width:100%;display:flex;justify-content:center}
.artwork-lockup{width:67.41%;max-width:269.64px;height:auto}
.artwork-stage--hplx .artwork-lockup{width:66.05%;max-width:264.2px}
.artwork-stage--cosmik .artwork-lockup{width:100%;max-width:400px}
.artwork-symbol{width:128px;height:128px;object-fit:contain}
.artwork-stage--hplx .artwork-symbol{width:96px;height:96px}
.identity-surface figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--c-space-2);padding:var(--c-space-4);border-top:1px solid var(--c-divider);font-size:var(--c-type-ui-small-font-size);color:var(--c-muted)}
@container(min-width:800px){.identity-surfaces{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.artwork-stage .artwork-lockup{width:128px;height:128px;object-fit:contain}.artwork-stage--hplx .artwork-lockup{width:96px;height:96px}}
.overview-explore>h2{margin-bottom:var(--c-space-6)}
.guide-index table th:first-child,.guide-index table td:first-child{width:30%}
.endorsement{margin-top:var(--c-space-4);font-size:var(--c-type-ui-font-size);color:var(--c-muted)}

.artwork-kind-symbol{display:none}
@media(max-width:400px){.artwork-kind-lockup{display:none}.artwork-kind-symbol{display:inline}}