.sys-wrap{max-width:1080px}.sys-meta{grid-template-columns:repeat(4,1fr)}.sys-tile{margin:24px 0 0;padding:28px 32px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:0;transition:background .25s var(--ease-out),border-color .25s var(--ease-out)}.sys-tile+.sys-tile{margin-top:12px}.sys-tile-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border-subtle)}.sys-tile-title{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-primary);letter-spacing:-.005em}.sys-tile-caption{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.04em}.sys-color-group{margin-bottom:28px}.sys-color-group:last-child{margin-bottom:0}.sys-color-grouphead{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:0 0 12px}.sys-swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.sys-swatch{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:0;overflow:hidden;transition:border-color .15s var(--ease-out)}.sys-swatch:hover{border-color:var(--border-strong)}.sys-swatch-chip{height:56px;border-bottom:1px solid var(--border-subtle)}.sys-swatch-chip.is-border{background:linear-gradient(135deg,var(--surface-sunken) 25%,transparent 25%) 0 0/12px 12px,linear-gradient(225deg,var(--surface-sunken) 25%,transparent 25%) 6px 0/12px 12px,var(--surface-canvas);position:relative}.sys-swatch-chip.is-border:after{content:"";position:absolute;inset:10px;border:1px solid var(--swatch-color, transparent);border-radius:0}.sys-swatch-body{padding:10px 12px;display:flex;flex-direction:column;gap:2px}.sys-swatch-name{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);letter-spacing:.02em;word-break:break-all}.sys-swatch-value{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:.02em}.sys-ramp{display:flex;flex-direction:column;margin-top:8px}.sys-ramp-row{display:grid;grid-template-columns:1fr 280px;gap:32px;align-items:baseline;padding:20px 0;border-top:1px solid var(--border-subtle)}.sys-ramp-row:first-child{border-top:none;padding-top:0}.sys-ramp-row:last-child{padding-bottom:0}.sys-ramp-sample{color:var(--text-primary);line-height:1.1;letter-spacing:-.01em}.sys-ramp-meta{display:flex;flex-direction:column;gap:4px;text-align:right}.sys-ramp-meta-name{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.sys-ramp-meta-spec{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);letter-spacing:.02em}.sys-ramp-row.is-hero .sys-ramp-sample{font-family:var(--font-display);font-weight:500;font-size:clamp(36px,5.6vw,76px);letter-spacing:-.045em}.sys-ramp-row.is-section .sys-ramp-sample{font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:-.025em}.sys-ramp-row.is-card .sys-ramp-sample{font-family:var(--font-display);font-weight:500;font-size:clamp(21px,2.3vw,30px);letter-spacing:-.035em}.sys-ramp-row.is-lede .sys-ramp-sample{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.6;color:var(--text-secondary)}.sys-ramp-row.is-body .sys-ramp-sample{font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1.6;color:var(--text-secondary)}.sys-ramp-row.is-mono .sys-ramp-sample{font-family:var(--font-mono);font-weight:400;font-size:12px;letter-spacing:0;color:var(--text-tertiary)}.sys-stage{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px;padding:24px;background:var(--surface-canvas);border:1px dashed var(--border-default);border-radius:0}.sys-stage.is-tight{padding:18px 20px;gap:12px}.sys-contact-mock .contact-link-item{padding:14px 0}.sys-contact-mock .contact-link-item:first-child{border-top:1px solid var(--border-subtle)}.sys-nav-mock{display:flex;flex-direction:column;gap:2px;width:220px;padding:18px 20px;background:var(--surface-canvas);border:1px dashed var(--border-default);border-radius:0}.sys-ease-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}.sys-ease{padding:20px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:0}.sys-ease-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}.sys-ease-name{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-primary)}.sys-ease-var{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:.04em}.sys-ease-curve{width:100%;height:120px;background:var(--surface-canvas);border-radius:0;margin-bottom:12px}.sys-ease-curve path.bg{fill:none;stroke:var(--border-default);stroke-width:1}.sys-ease-curve path.fg{fill:none;stroke:var(--accent);stroke-width:1.5}.sys-ease-curve circle{fill:var(--accent)}.sys-ease-spec{display:block;margin-top:10px;font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);letter-spacing:.02em}.sys-icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.sys-icon-cell{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;background:var(--surface-canvas);border:1px solid var(--border-subtle);border-radius:0;color:var(--text-secondary)}.sys-icon-cell svg{display:block}.sys-icon-cell-label{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:.04em}@media (max-width: 768px){.sys-meta{grid-template-columns:repeat(2,1fr)}.sys-ramp-row{grid-template-columns:1fr;gap:8px}.sys-ramp-meta{text-align:left}.sys-ease-grid{grid-template-columns:1fr}.sys-tile-head{flex-direction:column;align-items:flex-start;gap:4px}.sys-nav-mock{width:100%}}.sys-ramp-sample,.sys-swatch-name,.sys-ease-spec{overflow-wrap:anywhere;min-width:0}