@font-face{font-family:Archivo Variable;src:url(assets/fonts/archivo-latin-wght-normal.0inx24hl2eswd.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Inter Variable;src:url(assets/fonts/inter-latin-wght-normal.0rpdhg_4ubdtf.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--accent:#e2a808;--accent-deep:#8a6603;--ink:#233d48;--body:#333333;--paper:#fff;--paper-alt:#f0f0f0;--charcoal:#333333;--border-soft:#233d4826;--radius:5px;--gutter:24px;--section:72px;--section-sm:44px;--section-lg:88px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper-alt);color:var(--body);font:16px/1.65 "Inter Variable",Arial,sans-serif}h1,h2,h3,h4{font-family:"Archivo Variable","Arial Narrow",sans-serif;font-weight:500;letter-spacing:-.025em;line-height:1.08;margin:0 0 20px}h1{font-size:clamp(38px,5.2vw,68px);max-width:850px;overflow-wrap:break-word}h2{font-size:clamp(30px,3.4vw,44px)}h3{font-size:24px}p{margin:0 0 20px}a{color:inherit}button,input{font:inherit}button,a{touch-action:manipulation}:focus-visible{outline:2px solid #8a6603;outline-offset:3px}code{font:13px/1.5 ui-monospace,monospace;overflow-wrap:anywhere}img{max-width:100%;height:auto}.container{width:min(1120px,calc(100% - 48px));margin:auto}.ds-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:16px 24px;background:#fffffff2;border-bottom:1px solid var(--border-soft);backdrop-filter:blur(12px)}.lockup-text{margin:0;font:600 18px/1.2 "Archivo Variable",sans-serif}.lockup-text small{display:block;font:12px/1.6 "Inter Variable",sans-serif;color:#333}.tabs{display:flex;gap:6px;flex-wrap:wrap}.tab{padding:10px 14px;text-decoration:none;font-size:14px;border-radius:4px}.tab.active{background:#233d48;color:white}.tab:hover{background:#eeece7;color:#233d48}.back{font-size:13px;text-decoration:underline}.ds-hero{padding:72px 0 48px;background:white}.lede{font-size:18px;line-height:1.65;max-width:760px}.meta-strip{display:flex;gap:30px;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--border-soft)}.meta-strip .k{display:block;font-size:12px}.meta-strip .v{font-weight:600}.section{padding:64px 0}.section.tight{padding:44px 0}.alt{background:#fff}.section-head{max-width:740px;margin-bottom:28px}.door-cards,.char-grid,.swatch-grid,.page-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:20px}.door-cards>*{min-width:0}.door,.anchor-tile,.page-card{padding:24px;background:white;border:1px solid var(--border-soft);border-radius:5px}.door{display:block;text-decoration:none;transition:background .15s}.door:hover{background:#eeece7}.door p,.anchor-tile p{margin:0}.swatch{background:white;border:1px solid var(--border-soft);border-radius:5px;overflow:hidden}.swatch .chip{height:110px}.swatch .meta{padding:16px}.swatch .meta b{display:block}.swatch .meta p{font-size:13px;line-height:1.5;margin:10px 0 0}.actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 20px;border:1px solid transparent;border-radius:5px;background:#e2a808;color:#333;text-decoration:none;font-size:14px;font-weight:600;transition:background .15s cubic-bezier(.4,0,.2,1);cursor:pointer}.btn:hover{background:#f0bb26}.btn-outline{background:white;border-color:#233d48;color:#233d48}.btn-outline:hover{background:#eeece7}.pill{border-radius:999px;height:52px;position:relative;overflow:hidden;isolation:isolate;padding:3px 3px 3px 24px;gap:20px}.pill-fill{position:absolute;inset:3px 3px 3px calc(100% - 51px);border-radius:999px;background:#fff;z-index:-1;transition:left .48s cubic-bezier(.76,0,.24,1)}.pill-label{height:21px;overflow:hidden;line-height:21px}.pill-track{display:flex;flex-direction:column;gap:9px;transition:transform .42s cubic-bezier(.76,0,.24,1)}.pill-track span{height:21px;white-space:nowrap}.pill-icon{height:46px;width:46px;display:grid;place-items:center;color:#8a6603}.pill:hover .pill-fill,.pill:focus-visible .pill-fill{left:3px}.pill:hover .pill-track,.pill:focus-visible .pill-track{transform:translateY(-30px)}.type-spec{padding:28px 0;border-bottom:1px solid var(--border-soft)}.type-spec:last-child{border:0}.note,.fine{font-size:13px;line-height:1.7}.type-display{font:500 clamp(40px,4vw,58px)/1.03 "Archivo Variable",sans-serif;letter-spacing:-.025em}.type-section{font:500 clamp(34px,3vw,44px)/1.08 "Archivo Variable",sans-serif;letter-spacing:-.025em}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;font-size:14px}.data-table th{text-align:left;color:#233d48;font-weight:600}.data-table th,.data-table td{padding:14px 16px;border-bottom:1px solid var(--border-soft);vertical-align:top}.spacing-row{display:flex;align-items:center;gap:16px;margin-bottom:12px}.spacing-bar{height:16px;background:#e2a808;flex-shrink:0}.dark-demo{background:#333;color:white;padding:28px;border-radius:6px}.dark-demo input{height:48px;width:100%;max-width:360px;padding:0 16px;color:white;background:#ffffff0e;border:1px solid #ffffff47;border-radius:4px;font-size:16px;transition:background .15s,border-color .15s}.dark-demo input:hover{border-color:#ffffff7a}.dark-demo input:focus{background:#ffffff14;border-color:#e2a808}.dark-demo label{display:block;margin-bottom:8px}.source-frame{width:100%;height:660px;border:1px solid var(--border-soft);background:#fff;border-radius:6px}.page-card{padding:20px}.page-card iframe{width:100%;height:430px;border:1px solid var(--border-soft);border-radius:5px}.page-card .btn{margin-top:12px}.page-grid{grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr))}.sx-index{padding:32px 0;background:#fff}.sx-index .grid{display:flex;gap:10px;flex-wrap:wrap}.sx-index a{padding:8px 12px;border:1px solid var(--border-soft);border-radius:4px;text-decoration:none;font-size:13px}.sx-pattern{padding:48px 0;border-bottom:1px solid var(--border-soft)}.pattern-meta{display:flex;align-items:flex-start;gap:32px;margin-bottom:24px}.pattern-meta>div{min-width:0}.pattern-meta .id{font-size:13px;font-weight:600;min-width:140px}.signature{display:block;font-size:11px;letter-spacing:.06em;margin-top:6px;color:#333}.pattern-meta .name{font:500 28px/1.15 "Archivo Variable",sans-serif;margin-bottom:8px}.pattern-meta .purpose{font-size:14px;margin:0}.sx-demo{background:white;border:1px solid var(--border-soft);border-radius:6px;overflow:hidden}.sx-demo iframe{width:100%;height:740px;border:0;display:block}.files-list a{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border-soft)}.footer{padding:40px 0;background:#233d48;color:white}.footer a{color:white}.footer .cols{display:flex;gap:36px;flex-wrap:wrap}.footer p{margin:0;font-size:13px}.snapshot-tag{display:inline-block;background:#f0f0f0;padding:8px 12px;border-radius:4px;font-size:12px;color:#233d48}.logo{width:94px}.notice{border-left:3px solid #8a6603;padding:16px 20px;background:white;font-size:14px}.reference-status{min-height:24px;font-size:13px;margin-top:12px}.frame-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;font-size:12px;border-bottom:1px solid var(--border-soft)}.frame-tools a{text-decoration:underline}.frame-tools button{border:1px solid var(--border-soft);background:#fff;border-radius:4px;padding:8px 12px;font-size:12px;cursor:pointer}.phone-frame{max-width:375px;margin:auto}.sx-demo:has(.phone-frame){background:#f0f0f0}
@media(max-width:880px){.ds-nav{gap:12px}.pattern-meta{flex-direction:column;gap:10px}.meta-strip{gap:20px}.data-table th,.data-table td{padding:12px}.page-grid{grid-template-columns:1fr}}
@media(max-width:600px){body .container{width:calc(100% - 32px)}body .ds-nav{padding:12px 16px}body .ds-hero{padding:44px 0 32px}body .tabs{gap:2px}body .tab{padding:10px;font-size:12px}body .section{padding:40px 0}body .sx-pattern{padding:32px 0}body .page-card{padding:16px}.spacing-row{gap:10px}.source-frame{height:720px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0s!important}}

.pill-icon{background:#fff;border-radius:999px}

.type-display{font-size:40px}.type-section{font-size:34px}.type-spec .lede{font-size:16px}
@media(min-width:640px){.type-display{font-size:52px}.type-section{font-size:44px}.type-spec .lede{font-size:18px}}
@media(min-width:1024px){.type-display{font-size:58px}}

/* This reference has one canonical palette and its own persistent library link. */
body #ds-back-link,body .palette-toggle{display:none!important}