.margin-block{margin-block:1rem}.odd-bg{color:#fff}.odd-bg>div:nth-child(odd){background-color:var(--ui-indigo)}.odd-bg>div:nth-child(2n){background-color:var(--ui-gray)}.test-card{height:240px;border:1px solid var(--ui-border-subtle);display:flex;justify-content:center;align-items:center}.bg-gradient-sunrise,.bg-gradient-aurora,.bg-gradient-ocean,.bg-gradient-meadow,.bg-gradient-ember,.bg-gradient-dusk,.bg-gradient-gold,.bg-gradient-forest{color:var(--ui-fg);background-color:var(--ui-bg)}.bg-gradient-auto{background:radial-gradient(circle at 16% 16%,color-mix(in srgb,var(--tone-solid) 30%,transparent),transparent 34%),radial-gradient(circle at 84% 0%,color-mix(in srgb,var(--tone-tint) 24%,transparent),transparent 30%),linear-gradient(135deg,color-mix(in srgb,var(--ui-bg) 78%,var(--ui-surface-raised)),color-mix(in srgb,var(--ui-surface-raised) 86%,var(--tone-subtle)))}.bg-gradient-sunrise{background:radial-gradient(circle at 16% 16%,color-mix(in srgb,var(--tone-solid) 30%,transparent),transparent 34%),radial-gradient(circle at 84% 0%,color-mix(in srgb,var(--state-warning) 24%,transparent),transparent 30%),linear-gradient(135deg,color-mix(in srgb,var(--ui-bg) 78%,var(--ui-surface-raised)),color-mix(in srgb,var(--ui-surface-raised) 86%,var(--tone-subtle)))}.bg-gradient-aurora{background:radial-gradient(circle at 12% 12%,color-mix(in srgb,var(--state-info) 24%,transparent),transparent 32%),radial-gradient(circle at 84% 18%,color-mix(in srgb,var(--state-success) 20%,transparent),transparent 30%),linear-gradient(135deg,color-mix(in srgb,var(--ui-bg) 82%,var(--state-info-subtle)),color-mix(in srgb,var(--ui-surface-raised) 84%,var(--state-success-subtle)))}.bg-gradient-ocean{background:radial-gradient(circle at 22% 12%,color-mix(in srgb,var(--state-info) 28%,transparent),transparent 34%),radial-gradient(circle at 78% 0%,color-mix(in srgb,var(--ui-blue) 22%,transparent),transparent 28%),linear-gradient(135deg,color-mix(in srgb,var(--ui-bg) 76%,var(--ui-blue-tint)),color-mix(in srgb,var(--ui-surface-raised) 84%,var(--ui-teal-subtle, var(--state-info-subtle))))}.bg-gradient-meadow{background:radial-gradient(circle at 18% 16%,color-mix(in srgb,var(--state-success) 28%,transparent),transparent 34%),radial-gradient(circle at 82% 14%,color-mix(in srgb,var(--ui-mint) 24%,transparent),transparent 30%),linear-gradient(135deg,color-mix(in srgb,var(--ui-bg) 80%,var(--state-success-subtle)),color-mix(in srgb,var(--ui-surface-raised) 84%,var(--ui-mint-tint)))}.bg-gradient-ember{background:radial-gradient(circle at 18% 10%,color-mix(in srgb,var(--state-warning) 30%,transparent),transparent 32%),radial-gradient(circle at 84% 18%,color-mix(in srgb,var(--state-danger) 22%,transparent),transparent 28%),linear-gradient(135deg,color-mix(in srgb,var(--ui-bg) 80%,var(--state-warning-subtle)),color-mix(in srgb,var(--ui-surface-raised) 84%,var(--state-danger-subtle)))}.bg-gradient-dusk{background:radial-gradient(circle at 18% 16%,color-mix(in srgb,var(--tone-solid) 28%,transparent),transparent 33%),radial-gradient(circle at 82% 14%,color-mix(in srgb,var(--ui-violet) 22%,transparent),transparent 30%),linear-gradient(135deg,color-mix(in srgb,var(--ui-bg) 78%,var(--tone-wash)),color-mix(in srgb,var(--ui-surface-raised) 86%,var(--ui-violet-subtle, var(--tone-subtle))))}.bg-gradient-gold{background:radial-gradient(circle at 20% 16%,color-mix(in srgb,var(--ui-gold) 24%,transparent),transparent 34%),radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--state-warning) 18%,transparent),transparent 28%),linear-gradient(135deg,color-mix(in srgb,var(--ui-bg) 80%,var(--ui-gold-surface, var(--state-warning-subtle))),color-mix(in srgb,var(--ui-surface-raised) 86%,var(--ui-gold-tint)))}.bg-gradient-forest{background:radial-gradient(circle at 16% 16%,color-mix(in srgb,var(--ui-olive) 24%,transparent),transparent 34%),radial-gradient(circle at 84% 14%,color-mix(in srgb,var(--state-success) 18%,transparent),transparent 30%),linear-gradient(135deg,color-mix(in srgb,var(--ui-bg) 80%,var(--ui-olive-tint)),color-mix(in srgb,var(--ui-surface-raised) 86%,var(--state-success-subtle)))}.swiper-demo .j-swiper{max-width:600px;aspect-ratio:3 / 2}.section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.token-card{overflow:hidden;border-radius:20px;border:1px solid var(--ui-border);background:var(--ui-surface-raised);box-shadow:var(--shadow-xs);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.token-swatch{aspect-ratio:16/9;padding:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;background:var(--sample-fill);color:var(--sample-ink);border-bottom:1px solid var(--sample-border, var(--ui-border-subtle))}.token-swatch-meta{display:flex;gap:6px;width:100%;justify-content:space-between;align-items:end}.tone-ladder{display:grid;gap:4px;margin-top:4px}.tone-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;align-items:center;padding:8px;border-radius:10px;border:1px solid var(--sample-border, var(--ui-border-subtle));background:color-mix(in srgb,var(--sample-fill) 12%,var(--ui-surface))}.tone-chip-fill{width:64px;height:40px;border-radius:6px;background:var(--sample-fill);border:1px solid color-mix(in srgb,var(--sample-ink) 12%,transparent)}.tone-row-meta{display:grid;gap:4px}.tone-row-label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-fg-soft)}.tone-row-token{font-size:var(--font-size-sm);font-weight:600;line-height:1.2;color:var(--ui-fg);overflow-wrap:anywhere}.token-swatch strong{display:block;font-size:1rem;line-height:1.2}.token-swatch-token{font-size:.78rem;opacity:.8;letter-spacing:.04em;text-transform:none;overflow-wrap:anywhere}.token-body{display:grid;gap:4px;padding:12px 16px 16px}.token-head{display:flex;align-items:start;justify-content:space-between;gap:10px}.token-name{margin:0;font-size:var(--font-size-md);font-weight:600}.token-key{margin-top:4px;color:var(--ui-fg-soft);font-size:.82rem}.token-tag{padding:1px 6px;border-radius:16px;border:1px solid var(--ui-border-subtle);background:var(--ui-surface-subtle);color:var(--ui-fg-muted);font-size:var(--font-size-sm);white-space:nowrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.token-desc,.token-note{margin:0;line-height:1.65;font-size:var(--font-size-sm)}.token-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin-top:8px}.tone-chip{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:10px;border:1px solid var(--sample-border, var(--ui-border-subtle));background:var(--sample-fill);color:var(--sample-ink);font-weight:600;font-size:var(--font-size-md);text-align:center}.demo-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.demo-card{display:grid;gap:12px;padding:16px;border-radius:20px;border:1px solid var(--ui-border);background:var(--ui-surface-raised)}.demo-card h4{margin:0;font-size:1.05rem}.callout{display:grid;gap:10px;padding:16px;border-radius:18px;border:1px solid color-mix(in srgb,var(--tone-solid) 32%,var(--ui-border));background:linear-gradient(180deg,var(--tone-subtle),var(--ui-surface-subtle))}.callout strong{color:var(--ui-fg)}.callout p{margin:0;line-height:1.7;color:var(--ui-fg-muted)}.stack{display:grid;gap:10px}.stack-row{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:12px;align-items:center}.stack-label{color:var(--ui-fg-soft);font-size:.84rem}.stack-bar{height:14px;border-radius:9999px;background:var(--sample-fill);border:1px solid var(--sample-border, transparent)}.stack-meta{color:var(--ui-fg-muted);font-size:.82rem;white-space:nowrap}.gradient-grid{align-items:stretch}.gradient-card{display:grid;gap:8px;border:1px solid var(--ui-border);border-radius:20px;background:var(--ui-surface-raised);box-shadow:var(--shadow-xs)}.gradient-preview{display:grid;align-content:end;gap:6px;aspect-ratio:16 / 9;padding:16px;border-top-left-radius:18px;border-top-right-radius:18px;border-bottom:1px solid var(--ui-border-subtle);overflow:hidden}.gradient-preview-title{color:var(--ui-fg);font-size:1.05rem;font-weight:600;line-height:1.2}.gradient-preview-token{color:var(--ui-fg-muted);font-size:.78rem;overflow-wrap:anywhere}.gradient-desc{padding-inline:16px;color:var(--ui-fg-muted);font-size:var(--font-size-sm)}.gradient-desc p{margin:0}.gradient-desc p+p{margin-top:4px}.gradient-card h4{margin:0;color:var(--ui-fg);font-size:var(--font-size-lg);line-height:1.25}.gradient-note{padding:0 16px 16px}.gradient-meta{display:flex;flex-wrap:wrap;gap:8px}.gradient-pill{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:3px 6px;border:1px solid var(--ui-border-subtle);border-radius:var(--radius-xl);background:var(--ui-surface-subtle);color:var(--ui-fg-soft);font-size:var(--font-size-sm);line-height:1.2}@media(max-width:960px){.hero{grid-template-columns:1fr}.stack-row{grid-template-columns:72px minmax(0,1fr)}.stack-meta{grid-column:2}}@media(max-width:640px){.page-shell{padding-inline:14px;padding-top:18px}.hero-copy,.hero-panel,.section{border-radius:20px;padding:18px}.hero-copy{padding:22px}.toggle-group{width:100%}.toggle-btn{flex:1}.token-head{flex-direction:column;align-items:start}}