/* UI Kit layout only; the samples inherit the portfolio's shared styles. */
.kit-main{padding-bottom:60px}.kit-hero{padding:72px 0 56px}.kit-hero h1{font-size:clamp(54px,6.8vw,100px);letter-spacing:-.055em;line-height:1.03;margin:24px 0 32px}.kit-hero h1>span{color:var(--green)}.kit-hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:32px}.kit-hero-bottom p{max-width:550px;color:var(--body-text);font-size:19px}.kit-download{font-size:14px;border-bottom:1px solid var(--green);padding:8px 0;white-space:nowrap}.kit-index{display:flex;flex-wrap:wrap;gap:16px 32px;padding:22px 0;border-block:1px solid var(--line);font-size:13px}.kit-index a:hover,.kit-download:hover{color:var(--green)}.kit-section{padding:72px 0;border-bottom:1px solid var(--line);scroll-margin-top:90px}.kit-heading{max-width:700px;margin-bottom:36px}.kit-heading h2{font-size:clamp(32px,3.5vw,48px);font-weight:500;letter-spacing:-1.5px;line-height:1.12;margin:14px 0 18px}.kit-heading p{color:var(--body-text)}.kit-palettes{display:grid;grid-template-columns:1fr 1fr;gap:24px}.kit-palette{border-radius:12px;padding:24px;border:1px solid var(--palette-line);color:var(--palette-ink);background:var(--palette-paper)}.kit-palette h3{font-size:24px;font-weight:500;letter-spacing:-.5px}.kit-palette>p{font-size:12px;margin:4px 0 22px;color:var(--palette-muted)}.kit-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 12px}.kit-swatch i{display:block;height:75px;border-radius:6px;background:var(--swatch);border:1px solid var(--palette-line)}.kit-swatch b,.kit-swatch code{display:block;font-size:11px;margin-top:7px;overflow-wrap:anywhere}.kit-swatch b{font-weight:500}.kit-swatch code{font-family:inherit;margin-top:2px;color:var(--palette-muted)}.kit-subtitle{font-size:25px;letter-spacing:-.6px;font-weight:500;margin:36px 0 20px}.kit-products{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0}.kit-products>.project{padding:24px;background:var(--card-color);color:#242820}.kit-products b,.kit-products span{display:block}.kit-products b{font-size:24px;font-weight:500}.kit-products span{font-size:12px;margin-top:8px}.kit-caption{font-size:13px!important;color:var(--muted)!important;line-height:1.5;margin-top:18px!important}.kit-type-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;border-top:1px solid var(--line);padding:28px 0;align-items:baseline}.kit-type-row small{display:block;margin-top:12px;font-size:12px;color:var(--muted)}.kit-display{font-size:clamp(48px,7.65vw,122px);line-height:1.04;letter-spacing:-.05em;font-weight:500}.kit-section-sample{font-size:var(--font-size-section);line-height:1.15;letter-spacing:-1.7px;font-weight:500}.kit-card-sample{font-size:var(--font-size-card);line-height:1.18;letter-spacing:-.8px;font-weight:500}.kit-component-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.kit-panel{background:var(--mint-surface);padding:28px;border:1px solid var(--line);border-radius:var(--radius-panel)}.kit-panel>h3{font-size:23px;line-height:1.2;font-weight:500;letter-spacing:-.5px;margin-bottom:24px}.kit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px}.kit-actions .hero-cta,.kit-actions .text-link{margin:0}.kit-secondary{padding:16px 24px;border-radius:var(--radius-pill);background:var(--secondary-surface);color:var(--ink);transition:background var(--duration-fast)}.kit-secondary:hover{background:var(--secondary-hover)}.kit-tabs{display:inline-flex;margin-bottom:24px}.kit-input{font:400 25px/1.4 var(--font-body);color:var(--ink);background:none;border:0;border-bottom:1px solid var(--control-line);border-radius:0;padding:14px 0;width:100%;margin:14px 0 0;outline-offset:6px}.kit-input::placeholder{color:var(--muted);opacity:1}.kit-input:focus{border-bottom:2px solid var(--green);outline:2px solid transparent}.kit-tag-sample{border:0;overflow:visible;background:transparent!important;padding:0!important}.kit-tag-sample .project-meta{display:block!important}.kit-tag-sample .tags{justify-content:flex-start!important;margin:0!important}.kit-project{padding:0}.kit-project .project{margin-bottom:0}.kit-spacing{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin-bottom:32px}.kit-spacing>div{min-width:0}.kit-spacing i{display:block;height:var(--spacing);width:100%;background:var(--green);border-radius:2px;margin-bottom:12px}.kit-spacing code{display:block;font:11px/1.4 var(--font-body);overflow-wrap:anywhere}.kit-spacing b{font-size:14px;font-weight:500}.kit-shapes{display:flex;gap:16px;flex-wrap:wrap}.kit-shapes span{display:grid;place-content:center;text-align:center;background:var(--quiet-surface);border:1px solid var(--control-line);height:100px;width:100px;font-size:13px}.kit-identity{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;align-items:center}.kit-identity>div{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;font-size:13px;color:var(--muted)}.kit-identity .about-portrait{position:static;width:260px;max-width:100%;height:260px;margin:0;mask-size:contain;-webkit-mask-size:contain}.kit-identity .brand-avatar{width:64px;height:64px}.kit-favicon{display:block;width:32px;height:32px;background:var(--portrait-ink);mask:url('../assets/favicon-face-v10.png') center/contain no-repeat;-webkit-mask:url('../assets/favicon-face-v10.png') center/contain no-repeat}.kit-dialog-copy{padding:48px}.kit-dialog-copy h2{font-size:40px;font-weight:500;letter-spacing:-1px;margin-bottom:16px}.kit-dialog-copy p{max-width:550px}.kit-tokens{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}.kit-tokens summary{cursor:pointer;font-size:14px}.kit-table-wrap{overflow:auto;margin-top:20px}.kit-token-table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}.kit-token-table td,.kit-token-table th{padding:12px 14px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.kit-token-table code{font:inherit}.kit-token-table th{font-weight:500}.kit-page .footer a:hover{color:var(--green);text-decoration:underline}
@media(max-width:1050px){.kit-palettes{grid-template-columns:1fr}.kit-swatches{grid-template-columns:repeat(8,minmax(0,1fr))}.kit-type-row{grid-template-columns:140px minmax(0,1fr)}}
@media(max-width:700px){.kit-hero{padding:44px 0 32px}.kit-hero h1{font-size:clamp(44px,10vw,62px);margin-top:18px}.kit-hero-bottom{display:block}.kit-hero-bottom p{font-size:16px}.kit-download{display:inline-block;margin-top:20px}.kit-index{gap:14px 22px;font-size:12px}.kit-section{padding:44px 0}.kit-heading{margin-bottom:24px}.kit-heading h2{font-size:var(--font-size-section-mobile);letter-spacing:-1px}.kit-swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 10px}.kit-palette{padding:20px}.kit-swatch i{height:60px}.kit-products,.kit-component-grid{grid-template-columns:1fr}.kit-products>.project{padding:20px}.kit-type-row{grid-template-columns:1fr;gap:14px;padding:24px 0}.kit-section-sample{font-size:var(--font-size-section-mobile);letter-spacing:-1px}.kit-card-sample{font-size:var(--font-size-card-mobile)}.kit-panel{padding:22px}.kit-spacing{grid-template-columns:repeat(4,1fr);gap:24px 12px}.kit-identity{grid-template-columns:1fr 1fr}.kit-identity>div:first-child{grid-column:1/-1}.kit-dialog-copy{padding:28px 22px}.kit-dialog-copy h2{font-size:32px}.kit-token-table td,.kit-token-table th{padding:10px 8px}}

/* Compact theme comparison: one row per token, two theme-value columns. */
.kit-token-catalogue{border-block:1px solid var(--line)}
.kit-token-catalogue .kit-token-table{table-layout:fixed;font-size:14px}
.kit-token-catalogue .kit-token-table th,.kit-token-catalogue .kit-token-table td{padding:14px 20px;vertical-align:middle;text-align:left;line-height:1.45}
.kit-token-catalogue thead th{font-size:12px;letter-spacing:.7px;color:var(--muted);font-weight:500}
.kit-token-catalogue thead th:first-child{width:40%}
.kit-token-catalogue tbody th[scope="row"]{font-weight:400;color:var(--muted)}
.kit-token-catalogue .kit-token-group th{padding-top:30px;padding-bottom:12px;font-size:11px;text-transform:uppercase;letter-spacing:1.4px;font-weight:500;color:var(--green);border-bottom:1px solid var(--line)}
.kit-token-value{display:flex;align-items:center;gap:12px;min-width:0}
.kit-token-chip{display:block;width:16px;height:16px;flex:0 0 16px;border-radius:4px;border:1px solid var(--control-line)}
.kit-token-value code{min-width:0;overflow-wrap:anywhere}
@media(max-width:700px){
 .kit-token-catalogue .kit-token-table{font-size:11px}
 .kit-token-catalogue .kit-token-table th,.kit-token-catalogue .kit-token-table td{padding:12px 6px}
 .kit-token-catalogue thead th:first-child{width:42%}
 .kit-token-catalogue .kit-token-group th{padding-top:26px}
 .kit-token-value{gap:6px;flex-wrap:wrap}
 .kit-token-chip{width:12px;height:12px;flex-basis:12px;border-radius:3px}
}