.style-shell{width:min(100%, var(--content-width));padding:clamp(3.25rem, 8vw, 7.5rem) var(--page-gutter) clamp(5rem, 10vw, 9rem);margin-inline:auto}.style-header{border-bottom:3px solid var(--ink);grid-template-columns:minmax(0,1fr) minmax(15rem,.42fr);align-items:end;gap:clamp(2rem,6vw,6rem);padding-bottom:clamp(3rem,7vw,6rem);display:grid;position:relative}.style-header:after{background:repeating-linear-gradient(135deg, transparent 0 .5rem, var(--color-accent-pattern) .5rem .57rem, transparent .57rem 1.1rem);content:"";opacity:.7;pointer-events:none;width:12rem;height:4rem;position:absolute;bottom:1.25rem;right:0;transform:rotate(-6deg)}.style-eyebrow,.style-index,.style-facts,.style-role-label,.theme-board-head,.token-swatch,.spacing-row,.width-stack,.radius-sample,.style-chip,.specimen-meta,.style-footer-note{font-family:var(--font-data)}.style-eyebrow{color:var(--accent-deep);letter-spacing:.12em;text-transform:uppercase;grid-column:1/-1;margin:0;font-size:.68rem}.style-header-copy{z-index:1;position:relative}.style-header h1{color:var(--ink);letter-spacing:-.065em;text-wrap:balance;margin:0;font-size:clamp(4rem,11vw,9rem);font-weight:500;line-height:.79}.style-header h1 em{color:var(--accent-deep);font-style:normal}.style-dek{max-width:32rem;color:var(--ink-soft);margin:2rem 0 0;font-size:clamp(1rem,2vw,1.22rem);line-height:1.45}.style-facts{z-index:1;border-top:1px solid var(--line-dark);gap:0;margin:0;display:grid;position:relative}.style-facts>div{border-bottom:1px solid var(--line);justify-content:space-between;gap:1rem;padding:.7rem 0;font-size:.67rem;line-height:1.25;display:flex}.style-facts dt{color:var(--ink-faint);text-transform:uppercase}.style-facts dd{color:var(--ink-dim);text-align:right;margin:0}.style-section{border-bottom:1px solid var(--line-dark);padding-block:clamp(3.75rem,8vw,7rem)}.style-section--last{border-bottom:0}.style-section-head{grid-template-columns:3rem minmax(0,1fr);align-items:start;gap:1.25rem;margin-bottom:clamp(2rem,5vw,3.5rem);display:grid}.style-index{color:var(--accent-deep);margin:.45rem 0 0;font-size:.7rem;line-height:1}.style-section h2{letter-spacing:-.055em;max-width:13ch;margin:0;font-size:clamp(2.8rem,6vw,5.4rem);font-weight:500;line-height:.88}.style-section-head>div>p:last-child{max-width:36rem;color:var(--ink-soft);margin:1.25rem 0 0;font-size:1rem;line-height:1.5}.theme-grid{background:var(--line-dark);grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;padding:1px;display:grid}.theme-board{min-width:0;color:var(--ink);background:var(--background-main);padding:1rem}.theme-board-head{color:var(--ink);letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:1rem;font-size:.7rem;display:flex}.theme-board-head code{color:var(--ink-faint);letter-spacing:0;text-transform:none;font-size:.62rem}.token-swatches{background:var(--line-dark);grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;padding:1px;display:grid}.token-swatch{min-height:5.8rem;color:var(--swatch-ink);background:var(--swatch-color);flex-direction:column;justify-content:space-between;padding:.7rem;font-size:.65rem;line-height:1.2;display:flex}.token-swatch strong{font-family:var(--font-ui);font-size:.76rem;font-weight:600}.token-swatch code{text-overflow:ellipsis;white-space:nowrap;font-size:.61rem;overflow:hidden}.style-note{max-width:48rem;color:var(--ink-soft);font:.7rem/1.6 var(--font-data);margin:1.5rem 0 0}.style-note code,.prose-specimen code{color:var(--accent-deep)}.type-specimens{grid-template-columns:minmax(0,1.4fr) minmax(14rem,.6fr);align-items:end;gap:clamp(2rem,7vw,7rem);display:grid}.type-display{grid-row:span 2}.type-role-label{color:var(--accent-deep);letter-spacing:.1em;text-transform:uppercase;margin:0 0 1rem;font-size:.65rem;line-height:1.2}.editorial-specimen{max-width:15ch;color:var(--ink);letter-spacing:-.05em;margin:0;font-size:clamp(2.9rem,6vw,6rem);font-weight:500;line-height:.88}.type-body{max-width:24rem;color:var(--ink-dim);font-size:1rem;line-height:1.6}.type-body p:last-child{margin:0}.type-data{border-block:1px solid var(--line-dark);color:var(--ink-soft);padding:1.25rem 0;font-size:.72rem;line-height:1.8}.type-data p{margin:0}.type-data .type-role-label{margin-bottom:.7rem}.rhythm-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,8vw,8rem);display:grid}.spacing-list{border-top:1px solid var(--line-dark);display:grid}.spacing-row{border-bottom:1px solid var(--line);min-height:2.5rem;color:var(--ink-faint);grid-template-columns:1.75rem 1fr auto;align-items:center;gap:.75rem;font-size:.65rem;display:grid}.spacing-row i{width:max(1rem, min(100%, calc(var(--space-size) * 8)));background:var(--accent);height:.5rem;display:block}.spacing-row code{color:var(--ink-dim)}.width-stack{gap:1.1rem;padding-top:.55rem;display:grid}.width-stack>div{width:min(100%, var(--ruler-width));min-height:2rem;color:var(--color-ink-on-inverse);background:var(--night);justify-content:space-between;align-items:center;gap:.75rem;padding-inline:.6rem;font-size:.65rem;display:flex}.width-stack>div:nth-child(2){color:var(--color-ink-on-accent);background:var(--accent-deep)}.width-stack>div:nth-child(3){background:var(--ink)}.width-stack code{color:inherit}.radius-row{border-top:1px solid var(--line-dark);margin-top:clamp(3rem,6vw,5rem);padding-top:1.25rem}.radius-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;display:grid}.radius-sample{color:var(--ink-soft);gap:.8rem;font-size:.62rem;display:grid}.radius-sample i{border:1px solid var(--accent-deep);border-radius:var(--radius-value);background:var(--accent-soft);height:3rem;display:block}.control-shelf{border:1px solid var(--line-dark);background:var(--surface);grid-template-columns:minmax(0,1.35fr) minmax(8rem,.65fr) minmax(10rem,.8fr);align-items:end;gap:1rem;padding:1.25rem;display:grid}.control-group{min-width:0}.button-row{flex-wrap:wrap;gap:.5rem;display:flex}.style-button{border:1px solid var(--line-dark);border-radius:var(--radius-sm);min-height:2.6rem;color:var(--ink);justify-content:center;align-items:center;gap:.65rem;padding:.65rem .9rem;font-size:.82rem;font-weight:600;text-decoration:none;display:inline-flex}.style-button:hover{color:var(--ink);border-color:var(--ink)}.style-button--primary{color:var(--color-ink-on-inverse);border-color:var(--night);background:var(--night)}.style-button--primary:hover{color:var(--color-ink-on-inverse);border-color:var(--accent-deep);background:var(--accent-deep)}.style-chip{min-height:2rem;padding:.45rem .65rem var(--chip-padding-block-end);border-bottom:2px solid var(--accent);color:var(--ink-dim);font-size:var(--chip-size);font-weight:var(--chip-weight);letter-spacing:.04em;align-items:center;gap:.55rem;display:inline-flex}.style-chip small{color:var(--accent-deep);font-size:inherit}.focus-demo{border:1px dashed var(--accent-deep);min-height:2.6rem;color:var(--accent-deep);font:.72rem/1 var(--font-data);align-items:center;padding:.65rem .9rem;text-decoration:none;display:inline-flex}.prose-specimen{max-width:var(--article-prose);color:var(--ink-dim);margin-inline:auto;font-size:1rem;line-height:1.75}.specimen-meta{color:var(--accent-deep);letter-spacing:.06em;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem;font-size:.68rem;line-height:1.4;display:flex}.specimen-meta span:nth-child(2n){color:var(--ink-faint)}.prose-specimen h3{color:var(--ink);letter-spacing:-.04em;margin:0;font-size:clamp(2rem,4vw,3rem);font-weight:500;line-height:1}.prose-specimen p{margin:1.25rem 0}.prose-specimen code{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:.1rem .3rem;font-size:.85em}.prose-specimen pre{border:1px solid var(--line-inverse);border-radius:var(--radius-md);color:var(--color-ink-on-inverse);background:var(--night);margin:2rem 0;padding:1rem;font-size:.82rem;line-height:1.6;overflow-x:auto}.prose-specimen pre code{color:inherit;background:0 0;border:0;padding:0}.prose-specimen blockquote{border-left:.2rem solid var(--accent);color:var(--ink-soft);background:var(--accent-soft);margin:2rem 0;padding:.8rem 1rem}.prose-specimen blockquote p{margin:0}.prose-specimen table{border-collapse:collapse;width:100%;font:.76rem/1.5 var(--font-data);margin:2rem 0}.prose-specimen th,.prose-specimen td{border:1px solid var(--line-dark);text-align:left;padding:.65rem}.prose-specimen th{color:var(--color-ink-on-inverse);background:var(--night);font-weight:500}.style-footer-note{color:var(--ink-faint);align-items:center;gap:.65rem;padding-top:1.5rem;font-size:.65rem;display:flex}.style-footer-note>span{color:var(--accent);font-size:.8rem}.style-footer-note a{color:var(--ink-dim)}@media (width<=760px){.style-header,.theme-grid,.type-specimens,.rhythm-grid,.control-shelf{grid-template-columns:1fr}.style-header{gap:2.5rem}.style-header:after{width:8rem}.style-header h1{font-size:clamp(3.8rem,18vw,6.8rem)}.style-header-copy{max-width:34rem}.type-display{grid-row:auto}.editorial-specimen{max-width:12ch}.radius-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=420px){.style-shell{padding-top:2.5rem}.style-section-head{grid-template-columns:2rem minmax(0,1fr);gap:.75rem}.style-section h2{font-size:2.7rem}.token-swatches{grid-template-columns:1fr}.token-swatch{min-height:4.4rem}.style-facts>div{gap:.25rem;display:grid}.style-facts dd{text-align:left}.button-row{flex-direction:column;align-items:stretch}.style-button{width:100%}}.theme-board{--background-main:#fff;--surface:#f5f7f4;--surface-2:#f0f3ef;--night:#111815;--ink:#171b19;--ink-dim:#3b4640;--ink-soft:#5f6c63;--ink-faint:#5f6e65;--line:#e2e8e3;--line-dark:#cbd5cd;--line-inverse:#344139;--accent:#16c878;--accent-deep:#087a48;--accent-soft:#e5f7ed;--color-ink-on-accent:#06130c;--color-ink-on-inverse:#f1f7f3}.theme-board[data-theme=dark]{color-scheme:dark;--background-main:#0e1210;--surface:#151b17;--surface-2:#1d2520;--night:#080c0a;--ink:#e6ebe8;--ink-dim:#b9c3bc;--ink-soft:#91a097;--ink-faint:#84948b;--line:#28332c;--line-dark:#3a473e;--line-inverse:#536158;--accent:#31d58e;--accent-deep:#78ebb3;--accent-soft:#133424;--color-ink-on-accent:#06130c;--color-ink-on-inverse:#f1f7f3}.theme-board[data-theme=dark] .token-swatch:nth-child(5),.theme-board[data-theme=dark] .token-swatch:nth-child(6){--swatch-ink:#06130c!important}html:not([data-theme=dark]) .width-stack>div:nth-child(2){color:var(--color-ink-on-inverse)}html[data-theme=dark] .width-stack>div:nth-child(3){color:#06130c}