/*
  PSJ Glass UI Design System
  ------------------------------------------------------------
  This stylesheet is intentionally plain CSS. The goal is to make
  the design language easy to read, copy, and reuse across projects.
*/

/* 1. Font --------------------------------------------------- */
@font-face {
  font-family: "HarmonyOS Sans";
  src: url("./fonts/HarmonyOS_Sans_SC_Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HarmonyOS Sans";
  src: url("./fonts/HarmonyOS_Sans_SC_Medium.ttf") format("truetype");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HarmonyOS Sans";
  src: url("./fonts/HarmonyOS_Sans_SC_Bold.ttf") format("truetype");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* 2. Design tokens ----------------------------------------- */
:root {
  color-scheme: light;
  --bg: #d9ecff;
  --bg-deep: #bfe0ff;
  --ink: #101828;
  --text: #26344f;
  --muted: #667085;
  --muted-2: #8a98ad;
  --brand: #2f7df6;
  --brand-2: #62a0ff;
  --success: #0f9f6e;
  --danger: #d92d20;
  --warning: #b86b00;

  --glass-panel: rgba(255, 255, 255, 0.62);
  --glass-panel-strong: rgba(255, 255, 255, 0.78);
  --glass-panel-soft: rgba(255, 255, 255, 0.42);
  --glass-border: rgba(113, 150, 205, 0.30);
  --glass-border-strong: rgba(47, 125, 246, 0.38);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 26px 72px rgba(42, 98, 166, 0.18), 0 8px 22px rgba(42, 98, 166, 0.08);
  --glass-shadow-soft: 0 14px 34px rgba(42, 98, 166, 0.12);

  --radius-xl: 36px;
  --radius-lg: 28px;
  --radius-md: 22px;
  --radius-sm: 16px;
  --radius-pill: 999px;

  --page: min(1220px, calc(100vw - 32px));
  --speed-fast: 140ms;
  --speed: 220ms;
  --speed-slow: 520ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1b2a;
  --bg-deep: #132d46;
  --ink: #f4f8ff;
  --text: #d7e2f1;
  --muted: #98a8bd;
  --muted-2: #7f90a8;
  --glass-panel: rgba(19, 35, 56, 0.60);
  --glass-panel-strong: rgba(28, 48, 76, 0.78);
  --glass-panel-soft: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(151, 190, 255, 0.20);
  --glass-shadow: 0 26px 72px rgba(0, 0, 0, 0.34), 0 8px 22px rgba(0, 0, 0, 0.20);
}

/* 3. Base --------------------------------------------------- */
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%;
  margin: 0;
  color: var(--text);
  font-family: "HarmonyOS Sans", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.96), transparent 24%),
    radial-gradient(circle at 86% 6%, rgba(85,155,255,.28), transparent 28%),
    radial-gradient(circle at 75% 88%, rgba(255,255,255,.58), transparent 26%),
    linear-gradient(135deg, #eef8ff 0%, var(--bg) 44%, #eef8ff 100%);
  background-attachment: fixed;
}

/* The ambient light streaks create the "ice silk" texture behind the glass. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(118deg, transparent 0 18%, rgba(255,255,255,.30) 19%, transparent 34%),
    linear-gradient(142deg, transparent 0 52%, rgba(114,174,255,.18) 53%, transparent 72%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.14) 0 1px, transparent 1px 112px);
  mix-blend-mode: screen;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.38) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .22;
}

button,
input,
select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1,
h2,
h3,
h4,
p { margin-top: 0; }
p { line-height: 1.72; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

.section-shell {
  width: var(--page);
  margin: 0 auto;
  padding: 44px 0;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 20px;
}

.section-heading h2 {
  margin: 8px 0 10px;
  color: var(--ink);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -.05em;
}

.section-heading p { color: var(--muted); }
.eyebrow {
  margin-bottom: 8px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lead {
  max-width: 800px;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 21px);
}

/* 4. Glass material ---------------------------------------- */
.glass-layer,
.glass-card,
.glass-panel,
.metric-card,
.modal-demo,
.toast-demo,
.code-card,
.field,
.button,
.side-nav,
.tab-bar,
.chat-bubble,
.demo-window {
  border: 1px solid var(--glass-border);
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.42));
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  backdrop-filter: blur(24px) saturate(155%);
}

[data-theme="dark"] .glass-layer,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .glass-panel,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .modal-demo,
[data-theme="dark"] .toast-demo,
[data-theme="dark"] .code-card,
[data-theme="dark"] .field,
[data-theme="dark"] .button,
[data-theme="dark"] .side-nav,
[data-theme="dark"] .tab-bar,
[data-theme="dark"] .chat-bubble,
[data-theme="dark"] .demo-window {
  background: linear-gradient(135deg, rgba(28,48,76,.76), rgba(17,31,51,.42));
}

.glass-card {
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 42px);
}

.glass-panel {
  border-radius: var(--radius-lg);
  padding: 24px;
}

.glass-panel h3,
.glass-card h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 22px;
}

.glass-panel p,
.glass-card p { color: var(--muted); }

/* 5. Header ------------------------------------------------- */
.site-header {
  position: sticky;
  top: 16px;
  z-index: 20;
  width: var(--page);
  margin: 16px auto 0;
  border-radius: var(--radius-pill);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 14px 28px rgba(47,125,246,.28), var(--glass-highlight);
  font-weight: 900;
}

.brand strong { display: block; color: var(--ink); line-height: 1.1; }
.brand small { display: block; color: var(--muted); font-weight: 700; }

.top-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 4px;
}

.top-nav a,
.theme-toggle {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 10px 14px;
  background: transparent;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  transition: background var(--speed-fast), color var(--speed-fast), transform var(--speed-fast);
}

.top-nav a:hover,
.theme-toggle:hover {
  color: #155eef;
  background: rgba(47,125,246,.11);
}

.top-nav a[aria-current] {
  color: #155eef;
  background: rgba(47,125,246,.12);
  box-shadow: var(--glass-highlight);
}

.theme-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.38);
}

/* 6. Hero --------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: stretch;
  padding-top: 56px;
}

.hero h1 {
  max-width: 820px;
  margin: 8px 0 18px;
  color: var(--ink);
  font-size: clamp(46px, 7vw, 92px);
  line-height: .96;
  letter-spacing: -.07em;
}

.action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.action-row.wrap { flex-wrap: wrap; }

.hero-demo { min-height: 520px; display: grid; place-items: center; }
.demo-window { width: min(460px, 100%); border-radius: 32px; overflow: hidden; }
.demo-toolbar { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--glass-border); }
.demo-toolbar span { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); opacity: .42; }
.demo-toolbar strong { margin-left: auto; color: var(--muted); font-size: 13px; }
.demo-body { display: grid; gap: 14px; padding: 20px; }
.chat-bubble { width: fit-content; max-width: 86%; border-radius: 24px; padding: 16px 18px; }
.chat-bubble small { display: block; margin-bottom: 6px; color: var(--muted); font-weight: 800; }
.chat-bubble p { margin: 0; color: var(--ink); font-weight: 700; }
.chat-bubble.user { justify-self: end; background: rgba(203, 245, 184, .74); }
.metric-card.mini { width: 180px; }

/* 7. Foundation cards -------------------------------------- */
.principle-grid,
.pattern-grid,
.motion-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.number {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
}

.token-layout {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: 16px;
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.swatch {
  min-height: 110px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--glass-highlight), var(--glass-shadow-soft);
}

.swatch b { color: var(--ink); }
.swatch span { color: var(--muted); font-size: 13px; }
.swatch.blue { background: #2f7df6; }
.swatch.blue2 { background: #62a0ff; }
.swatch.ice { background: #d9ecff; }
.swatch.panel { background: rgba(255,255,255,.62); }
.swatch.ink { background: #101828; }
.swatch.green { background: #0f9f6e; }
.swatch.blue b,
.swatch.blue span,
.swatch.blue2 b,
.swatch.blue2 span,
.swatch.ink b,
.swatch.ink span,
.swatch.green b,
.swatch.green span { color: #fff; }

/* 7. Cheatsheet gallery ------------------------------------ */
.quickref-toolbar {
  position: sticky;
  top: 92px;
  z-index: 10;
  border-radius: var(--radius-lg);
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.quick-search span {
  display: block;
  margin: 0 0 7px 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.quick-search input {
  width: 100%;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 13px 16px;
  background: rgba(255,255,255,.62);
  color: var(--ink);
  outline: none;
  box-shadow: var(--glass-highlight);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.filter-chips button {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 10px 15px;
  background: rgba(255,255,255,.48);
  color: var(--text);
  font-weight: 900;
  box-shadow: var(--glass-highlight);
}

.filter-chips button.active {
  border-color: rgba(47,125,246,.52);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
}

.cheat-count {
  margin: 10px 0 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.cheat-grid {
  overflow-anchor: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 14px;
}

/* The reference catalogue has its own page, without unrelated sections below. */
[data-page="cheatsheet"] .section-heading h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  margin: 0 0 16px;
}
.cheat-empty { grid-column: 1 / -1; padding: 32px; text-align: center; }

.cheat-card {
  padding: 0;
  overflow: hidden;
  transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed);
}

.cheat-card:hover {
  border-color: var(--glass-border-strong);
  transform: translateY(-4px);
  box-shadow: 0 30px 78px rgba(42,98,166,.20), var(--glass-highlight);
}

.cheat-preview {
  position: relative;
  min-height: 150px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--glass-border);
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.82), transparent 28%),
    linear-gradient(135deg, rgba(233,246,255,.86), rgba(199,226,255,.52));
}

[data-theme="dark"] .cheat-preview {
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(135deg, rgba(31,52,82,.88), rgba(15,30,52,.70));
}

.cheat-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(112deg, rgba(255,255,255,.16) 0 1px, transparent 1px 42px);
  opacity: .42;
}

.cheat-preview > * { position: relative; z-index: 1; }
.cheat-meta { padding: 15px 16px 17px; }
.cheat-meta span {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cheat-meta b {
  display: block;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
}

.cheat-meta em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.cheat-meta p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Mini component previews keep each card readable without heavy DOM. */
.mini-btn,
.mini-icon,
.mini-field,
.mini-select,
.mini-number button,
.mini-upload,
.mini-tabs span,
.mini-pages span,
.mini-tour b,
.press-preview button {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.66);
  color: var(--ink);
  box-shadow: var(--glass-highlight), var(--glass-shadow-soft);
  font-weight: 900;
}

.mini-btn { padding: 10px 16px; margin: 4px; }
.mini-btn.primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.mini-icon { width: 42px; height: 42px; margin: 4px; }
.mini-icon.active { color: #fff; background: var(--brand); }
.mini-tabs { display: flex; gap: 6px; padding: 7px; border-radius: var(--radius-pill); background: rgba(255,255,255,.42); }
.mini-tabs span { padding: 8px 12px; }
.mini-tabs .active { background: var(--brand); color: #fff; }
.mini-anchor { width: 74%; display: grid; gap: 10px; }
.mini-anchor span { height: 9px; border-radius: var(--radius-pill); background: rgba(47,125,246,.18); }
.mini-anchor i { width: 38%; height: 3px; border-radius: var(--radius-pill); background: var(--brand); }
.mini-breadcrumb { padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.62); color: var(--muted); font-weight: 900; }
.mini-menu-pop { position: absolute; top: 76px; width: 120px; padding: 8px; border-radius: 18px; background: rgba(255,255,255,.76); box-shadow: var(--glass-shadow-soft), var(--glass-highlight); display: grid; gap: 5px; }
.mini-menu-pop span { height: 18px; border-radius: 8px; background: rgba(47,125,246,.12); }
.mini-menu { width: 70%; display: grid; gap: 8px; }
.mini-menu span { height: 20px; border-radius: 12px; background: rgba(255,255,255,.58); }
.mini-menu .active { background: rgba(47,125,246,.20); }
.mini-pagehead { width: 78%; display: grid; gap: 8px; }
.mini-pagehead b { width: 56%; height: 18px; border-radius: 8px; background: var(--ink); opacity: .82; }
.mini-pagehead small { width: 76%; height: 10px; border-radius: 8px; background: rgba(102,112,133,.35); }
.mini-pagehead button { width: 80px; height: 30px; border: 0; border-radius: var(--radius-pill); background: var(--brand); }
.mini-pages { display: flex; gap: 6px; }
.mini-pages span { width: 34px; height: 34px; display: grid; place-items: center; }
.mini-pages .active { color: #fff; background: var(--brand); }
.mini-steps { width: 76%; display: flex; align-items: center; gap: 7px; }
.mini-steps span { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(47,125,246,.30); background: rgba(255,255,255,.58); }
.mini-steps i { flex: 1; height: 3px; border-radius: var(--radius-pill); background: rgba(47,125,246,.20); }
.mini-steps .done,
.mini-steps .active { background: var(--brand); }
.mini-field { width: 76%; padding: 12px 14px; }
.mini-checks,
.mini-radios,
.mini-colors,
.mini-avatar { display: flex; gap: 12px; align-items: center; }
.mini-checks span,
.mini-radios span { width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid rgba(47,125,246,.32); background: rgba(255,255,255,.58); color: #fff; }
.mini-checks span { border-radius: 9px; }
.mini-radios span { border-radius: 50%; }
.mini-checks .checked,
.mini-radios .active { background: var(--brand); }
.mini-slider { width: 76%; position: relative; height: 8px; border-radius: var(--radius-pill); background: rgba(47,125,246,.16); }
.mini-slider i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--brand); }
.mini-slider b { position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 5px solid var(--brand); transform: translate(-50%, -50%); box-shadow: var(--glass-shadow-soft); }
.mini-select { padding: 11px 16px; }
.mini-switch { width: 62px; height: 34px; border-radius: var(--radius-pill); padding: 4px; background: rgba(102,112,133,.20); }
.mini-switch span { display: block; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: var(--glass-shadow-soft); }
.mini-switch.on { background: var(--brand); }
.mini-switch.on span { transform: translateX(28px); }
.mini-calendar,
.mini-time,
.mini-stat,
.mini-result,
.mini-empty { display: grid; place-items: center; padding: 18px 24px; border-radius: 22px; background: rgba(255,255,255,.58); box-shadow: var(--glass-highlight); }
.mini-calendar b,
.mini-stat b { color: var(--ink); font-size: 34px; }
.mini-time { color: var(--ink); font-size: 30px; font-weight: 900; }
.mini-number { display: flex; align-items: center; gap: 12px; }
.mini-number button { width: 34px; height: 34px; }
.mini-number b { color: var(--ink); font-size: 26px; }
.mini-rate { color: #ffb020; font-size: 25px; letter-spacing: 3px; }
.mini-upload { width: 140px; height: 78px; display: grid; place-items: center; color: var(--brand); }
.mini-upload span { display: block; color: var(--muted); font-size: 12px; }
.mini-colors span { width: 32px; height: 32px; border-radius: 50%; box-shadow: var(--glass-highlight); }
.mini-colors span:nth-child(1) { background: #2f7df6; }
.mini-colors span:nth-child(2) { background: #0f9f6e; }
.mini-colors span:nth-child(3) { background: #ffb020; }
.mini-colors span:nth-child(4) { background: #d92d20; }
.mini-cascader,
.mini-transfer,
.mini-auto,
.mini-form,
.mini-desc,
.mini-list,
.mini-table,
.mini-tree { width: 78%; display: grid; gap: 8px; }
.mini-cascader { grid-template-columns: repeat(3, 1fr); }
.mini-cascader span,
.mini-auto span,
.mini-form span,
.mini-desc span,
.mini-desc b,
.mini-list span,
.mini-table span,
.mini-tree span,
.mini-tree b { min-height: 22px; border-radius: 10px; background: rgba(255,255,255,.62); padding: 4px 8px; color: var(--muted); font-size: 12px; }
.mini-auto input { width: 100%; border: 0; border-radius: 12px; padding: 8px; background: rgba(255,255,255,.62); }
.mini-form button { width: 74px; height: 30px; border: 0; border-radius: var(--radius-pill); background: var(--brand); }
.mini-avatar span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); font-weight: 900; margin-left: -8px; border: 2px solid rgba(255,255,255,.72); }
.mini-tooltip,
.mini-popover { position: relative; display: grid; place-items: center; }
.mini-tooltip button,
.mini-popover button { border: 0; border-radius: var(--radius-pill); padding: 10px 16px; background: var(--brand); color: #fff; font-weight: 900; }
.mini-tooltip span,
.mini-popover span { position: absolute; top: -42px; white-space: nowrap; padding: 8px 12px; border-radius: 12px; background: rgba(16,24,40,.88); color: #fff; font-size: 12px; }
.mini-card { width: 72%; padding: 18px; border-radius: 22px; background: rgba(255,255,255,.58); display: grid; gap: 10px; box-shadow: var(--glass-highlight); }
.mini-card b,
.mini-card span { height: 12px; border-radius: 999px; background: rgba(47,125,246,.18); }
.mini-badge { position: relative; font-size: 36px; }
.mini-badge b { position: absolute; top: -8px; right: -16px; min-width: 24px; height: 24px; border-radius: 999px; background: var(--danger); color: #fff; display: grid; place-items: center; font-size: 12px; }
.mini-month { width: 78%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini-month b { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.mini-month span { height: 24px; border-radius: 8px; background: rgba(255,255,255,.58); }
.mini-month .active { background: var(--brand); }
.mini-carousel { width: 74%; height: 78px; position: relative; }
.mini-carousel span { position: absolute; inset: 0; border-radius: 22px; background: rgba(255,255,255,.58); box-shadow: var(--glass-highlight); }
.mini-carousel span:nth-child(2) { transform: translateX(18px) scale(.9); opacity: .7; }
.mini-carousel span:nth-child(3) { transform: translateX(-18px) scale(.9); opacity: .7; }
.mini-collapse { width: 78%; border-radius: 18px; padding: 12px; background: rgba(255,255,255,.58); display: grid; gap: 8px; }
.mini-collapse b { color: var(--ink); }
.mini-collapse span { height: 8px; border-radius: 999px; background: rgba(47,125,246,.18); }
.mini-comment { width: 78%; display: grid; grid-template-columns: 36px 1fr; gap: 8px; }
.mini-comment b { grid-row: span 2; border-radius: 50%; background: var(--brand); }
.mini-comment span { height: 12px; border-radius: 999px; background: rgba(255,255,255,.62); }
.mini-desc { grid-template-columns: 1fr 1fr; }
.mini-image { width: 78%; height: 88px; border-radius: 22px; background: linear-gradient(135deg, rgba(47,125,246,.32), rgba(255,255,255,.50)); display: grid; place-items: end start; padding: 12px; }
.mini-image span { width: 48px; height: 32px; clip-path: polygon(0 100%, 35% 30%, 55% 62%, 72% 18%, 100% 100%); background: rgba(255,255,255,.82); }
.mini-qr { display: grid; grid-template-columns: repeat(2, 36px); gap: 7px; }
.mini-qr span { height: 36px; border-radius: 9px; background: var(--ink); opacity: .82; }
.mini-alert,
.mini-toast,
.mini-note,
.mini-confirm { padding: 12px 16px; border-radius: 18px; background: rgba(255,248,230,.82); color: #875300; box-shadow: var(--glass-highlight); }
.mini-drawer { position: absolute; right: 0; top: 0; width: 42%; height: 100%; background: rgba(255,255,255,.70); box-shadow: -16px 0 30px rgba(42,98,166,.12), var(--glass-highlight); }
.mini-note,
.mini-confirm { display: grid; gap: 6px; color: var(--ink); background: rgba(255,255,255,.66); }
.mini-progress { width: 78%; height: 16px; border-radius: var(--radius-pill); background: rgba(47,125,246,.16); overflow: hidden; }
.mini-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.mini-result { color: var(--success); font-size: 28px; font-weight: 900; }
.mini-result span,
.mini-empty span { display: block; color: var(--muted); font-size: 13px; }
.mini-skeleton { width: 78%; display: grid; gap: 10px; }
.mini-skeleton span,
.shimmer-preview span { height: 14px; border-radius: var(--radius-pill); background: linear-gradient(90deg, rgba(255,255,255,.36), rgba(255,255,255,.80), rgba(255,255,255,.36)); background-size: 220% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.mini-skeleton span:nth-child(2) { width: 76%; }
.mini-skeleton span:nth-child(3) { width: 54%; }
.mini-spinner { width: 44px; height: 44px; border: 4px solid rgba(47,125,246,.18); border-top-color: var(--brand); border-radius: 50%; animation: spin 850ms linear infinite; }

/* Animation preview variants */
.animation-preview span { color: var(--ink); font-size: 24px; font-weight: 950; }
.animation-preview i,
.animation-preview b { position: absolute; border-radius: 999px; background: rgba(47,125,246,.18); }
.animation-preview i { width: 70px; height: 70px; }
.animation-preview b { width: 110px; height: 12px; bottom: 30px; }
.anim-fade span { animation: fadeDemo 1.8s ease-in-out infinite; }
.anim-slidein span { animation: slideDemo 1.8s var(--ease-out) infinite; }
.anim-scalein span { animation: scaleDemo 1.8s var(--ease-out) infinite; }
.anim-popspring span { animation: springDemo 1.4s cubic-bezier(.2,1.6,.3,1) infinite; }
.anim-blurin span { animation: blurDemo 1.8s ease-in-out infinite; }
.anim-stagger span,
.anim-stagger i,
.anim-stagger b { animation: staggerDemo 1.8s ease-in-out infinite; }
.anim-clipreveal span { clip-path: inset(0 0 0 0); animation: clipDemo 2s ease-in-out infinite; }
.anim-hoverlift span,
.anim-cardtilt span { animation: liftDemo 1.8s ease-in-out infinite; }
.anim-ripple i { animation: rippleDemo 1.4s ease-out infinite; }
.anim-morphload span { color: transparent; width: 120px; height: 42px; border-radius: 999px; background: var(--brand); animation: morphLoadDemo 1.8s ease-in-out infinite; }
.anim-skeleton span { width: 120px; height: 18px; color: transparent; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.36), rgba(255,255,255,.90), rgba(255,255,255,.36)); background-size: 220% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.anim-toastin span,
.anim-drawerpush span,
.anim-modalzoom span,
.anim-containermorph span { animation: riseIn 1.8s var(--ease-out) infinite; }
.anim-progressbar b,
.anim-scrollprogress b { left: 18%; right: auto; width: 0; height: 8px; background: var(--brand); animation: progressDemo 2s ease-in-out infinite; }
.anim-swipe span { animation: swipeDemo 1.8s ease-in-out infinite; }
.anim-dragdrop span { animation: dragDemo 2s ease-in-out infinite; }
.anim-pathdraw i,
.anim-svgline i { border-radius: 0; width: 120px; height: 4px; background: var(--brand); transform-origin: left; animation: pathDemo 1.8s ease-in-out infinite; }
.anim-successcheck span { color: var(--success); animation: popCheck 1.5s ease-in-out infinite; }
.anim-errorshake span,
.anim-wiggle span { animation: wiggleDemo .7s ease-in-out infinite; }
.anim-sharedmove span,
.anim-slidetransition span { animation: sharedMoveDemo 2s ease-in-out infinite; }
.anim-crossfade span { animation: fadeDemo 1.2s ease-in-out infinite alternate; }
.anim-parallax i { animation: slideDemo 2.8s ease-in-out infinite; }
.anim-scrollreveal span { animation: riseIn 2s ease-in-out infinite; }
.anim-stickypin span { position: sticky; top: 0; }
.anim-horizontalscroll span,
.anim-marquee span { animation: marqueeDemo 4s linear infinite; }
.anim-scrollytelling span { animation: blurDemo 2.2s ease-in-out infinite; }
.anim-pulseglow span,
.anim-breathing span { animation: pulseGlowDemo 1.6s ease-in-out infinite; }
.anim-bounce span { animation: bounceDemo 900ms ease-in-out infinite; }
.anim-flashhighlight span { animation: flashDemo 1.2s ease-in-out infinite; }
.anim-badgeanim i { width: 28px; height: 28px; background: var(--danger); animation: springDemo 1s ease-in-out infinite; }
.anim-animatedgradient span,
.anim-gradienttext span { background: linear-gradient(90deg, var(--brand), #9b7cff, var(--brand-2)); background-size: 220% 100%; -webkit-background-clip: text; color: transparent; animation: gradientFlow 2s linear infinite; }
.anim-float span,
.anim-particleblob span { animation: float 2.8s ease-in-out infinite; }
.anim-particleblob i { border-radius: 38% 62% 55% 45%; animation: blobDemo 4s ease-in-out infinite; }
.anim-typewriter span { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--brand); animation: typingDemo 2.6s steps(8) infinite; }
.anim-textscramble span { animation: flashDemo .8s steps(2) infinite; }
.anim-reveal span { animation: staggerDemo 1.5s ease-in-out infinite; }
.anim-count span { animation: countPulse 1.4s ease-in-out infinite; }
.anim-flip span { transform-style: preserve-3d; animation: flipDemo 2s ease-in-out infinite; }
.anim-cuberotation i { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); animation: cubeDemo 2s linear infinite; }
.anim-carousel3d i,
.anim-carousel3d b { animation: carousel3dDemo 2.4s ease-in-out infinite; }

/* Layout, token and SVG demos are isolated in demos.css. */

@keyframes shimmer { to { background-position: -220% 0; } }
@keyframes fadeDemo { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes slideDemo { 0% { transform: translateX(-26px); opacity: 0; } 40%,70% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(26px); opacity: 0; } }
@keyframes scaleDemo { 0%,100% { transform: scale(.72); opacity: .35; } 45%,65% { transform: scale(1); opacity: 1; } }
@keyframes springDemo { 0% { transform: scale(.6); } 50% { transform: scale(1.13); } 72% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes blurDemo { 0%,100% { filter: blur(8px); opacity: .25; } 50% { filter: blur(0); opacity: 1; } }
@keyframes staggerDemo { 0% { transform: translateY(18px); opacity: 0; } 45%,75% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } }
@keyframes clipDemo { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes liftDemo { 0%,100% { transform: translateY(0) rotateX(0); } 50% { transform: translateY(-12px) rotateX(10deg); } }
@keyframes rippleDemo { 0% { transform: scale(.2); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes morphLoadDemo { 0%,100% { width: 56px; border-radius: 50%; } 50% { width: 138px; border-radius: 999px; } }
@keyframes progressDemo { 0% { width: 0; } 70%,100% { width: 120px; } }
@keyframes swipeDemo { 0%,100% { transform: translateX(-28px); } 50% { transform: translateX(28px); } }
@keyframes dragDemo { 0%,100% { transform: translate(0,0); } 50% { transform: translate(42px,-18px); } }
@keyframes pathDemo { 0% { transform: scaleX(0); } 60%,100% { transform: scaleX(1); } }
@keyframes popCheck { 0% { transform: scale(.6); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes wiggleDemo { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes sharedMoveDemo { 0%,100% { transform: translateX(-36px); } 50% { transform: translateX(36px); } }
@keyframes marqueeDemo { from { transform: translateX(80px); } to { transform: translateX(-80px); } }
@keyframes pulseGlowDemo { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(47,125,246,.28); } 50% { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(47,125,246,0); } }
@keyframes bounceDemo { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes flashDemo { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.8); } }
@keyframes gradientFlow { to { background-position: 220% 0; } }
@keyframes blobDemo { 0%,100% { border-radius: 38% 62% 55% 45%; } 50% { border-radius: 62% 38% 42% 58%; } }
@keyframes typingDemo { 0% { width: 0; } 55%,100% { width: 112px; } }
@keyframes countPulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes flipDemo { 0%,100% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } }
@keyframes cubeDemo { to { transform: rotateX(360deg) rotateY(360deg); } }
@keyframes carousel3dDemo { 0%,100% { transform: translateX(-30px) scale(.75); } 50% { transform: translateX(30px) scale(1); } }
@keyframes svgDraw { 0% { stroke-dashoffset: 180; } 55%,100% { stroke-dashoffset: 0; } }
@keyframes marching { to { stroke-dashoffset: -22; } }

.font-showcase {
  margin: 0 0 12px;
  color: var(--ink) !important;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.compact-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.9;
}

.compact-list b { color: var(--ink); }

/* 8. Components ------------------------------------------- */
.component-stack { display: grid; gap: 18px; }
.component-block {
  display: grid;
  grid-template-columns: minmax(240px, .42fr) 1fr;
  gap: 24px;
  align-items: center;
}

.component-copy p { margin-bottom: 0; }

.component-demo {
  min-width: 0;
}

.button {
  position: relative;
  min-height: 46px;
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  color: var(--ink);
  font-weight: 900;
  transition: transform var(--speed-fast), box-shadow var(--speed-fast), border-color var(--speed-fast), background var(--speed-fast);
}

.button:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(42,98,166,.14), var(--glass-highlight); }
.button:active { transform: scale(.98); }
.button:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.button-primary { border-color: rgba(47,125,246,.64); background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.button-secondary { background: rgba(255,255,255,.62); }
.button-danger { border-color: rgba(217,45,32,.22); background: rgba(254,243,242,.72); color: #b42318; }
.button-quiet { background: rgba(255,255,255,.46); text-decoration: none; }

.is-loading { color: transparent; }
.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(16,24,40,.20);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

.form-demo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.form-demo label span {
  display: block;
  margin: 0 0 8px 4px;
  color: var(--ink);
  font-weight: 900;
}

.field {
  width: 100%;
  min-height: 50px;
  border-radius: 18px;
  padding: 13px 16px;
  color: var(--ink);
  outline: none;
}

.field:focus {
  border-color: var(--glass-border-strong);
  box-shadow: 0 0 0 4px rgba(47,125,246,.10), var(--glass-highlight);
}

.has-error .field { border-color: rgba(217,45,32,.45); }
.has-error small { display: block; margin-top: 8px; color: var(--danger); font-weight: 800; }

.metric-grid-demo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.metric-card {
  border-radius: var(--radius-md);
  padding: 20px;
}

.metric-card span { display: block; color: var(--muted); font-weight: 800; }
.metric-card strong { display: block; margin-top: 10px; color: var(--ink); font-size: 36px; letter-spacing: -.04em; }
.metric-card em { display: inline-flex; margin-top: 10px; color: var(--success); font-style: normal; font-weight: 900; }

.nav-demo {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 16px;
  align-items: start;
}

.side-nav,
.tab-bar {
  border-radius: var(--radius-lg);
  padding: 10px;
}

.side-nav { display: grid; gap: 6px; }
.side-nav button,
.tab-bar button {
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
  background: transparent;
  color: var(--text);
  font-weight: 900;
}

.side-nav button { text-align: left; }
.side-nav button.active,
.tab-bar button.active { color: #155eef; background: rgba(47,125,246,.12); box-shadow: var(--glass-highlight); }
.tab-bar { display: inline-flex; width: fit-content; gap: 4px; }

.feedback-demo { display: grid; gap: 14px; }
.toast-demo {
  position: relative;
  border-radius: 20px;
  padding: 14px 44px 14px 16px;
  color: #875300;
  background: rgba(255,248,230,.82);
}
.toast-demo button {
  position: absolute;
  right: 10px;
  top: 9px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.62);
}
.modal-demo { border-radius: var(--radius-lg); padding: 22px; }
.modal-demo h4 { margin: 0 0 8px; color: var(--ink); font-size: 22px; }
.modal-demo p { color: var(--muted); }

/* 9. Motion ------------------------------------------------ */
.motion-card {
  transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
}

.motion-card:hover {
  border-color: var(--glass-border-strong);
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(42,98,166,.22), var(--glass-highlight);
}

.motion-card span { color: var(--brand); font-weight: 900; }
.motion-card b { display: block; margin: 12px 0 8px; color: var(--ink); font-size: 24px; }
.motion-card p { margin: 0; color: var(--muted); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); filter: blur(10px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-12px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

[data-animate="rise"] { animation: riseIn var(--speed-slow) var(--ease-out) both; }
[data-animate="drop"] { animation: dropIn var(--speed-slow) var(--ease-out) both; }
[data-animate="float"] { animation: riseIn var(--speed-slow) var(--ease-out) both, float 5s ease-in-out 900ms infinite; }

/* 10. Code ------------------------------------------------- */
.code-layout {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
}

.code-card {
  margin: 0;
  border-radius: var(--radius-lg);
  padding: 22px;
  overflow: auto;
  background: rgba(16,24,40,.88);
  color: #dbeafe;
}

.code-card code {
  color: inherit;
  font-size: 13px;
  line-height: 1.8;
}

/* 11. Responsive ------------------------------------------ */
@media (max-width: 980px) {
  .site-header { align-items: flex-start; border-radius: 28px; flex-wrap: wrap; }
  .top-nav { order: 3; flex: 0 0 100%; min-width: 0; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  .top-nav a { flex-shrink: 0; white-space: nowrap; }
  .theme-toggle { margin-left: auto; }
  .quickref-toolbar { position: static; grid-template-columns: 1fr; }
  .filter-chips { justify-content: flex-start; }
  .hero,
  .component-block,
  .token-layout,
  .code-layout,
  .nav-demo { grid-template-columns: 1fr; }
  .principle-grid,
  .pattern-grid,
  .motion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-demo,
  .metric-grid-demo { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --page: min(100% - 22px, 1220px); }
  .section-shell { padding: 30px 0; }
  .brand { min-width: 0; }
  .brand small { display: none; }
  .hero h1 { font-size: 44px; }
  .action-row { flex-direction: column; align-items: stretch; }
  .button { width: 100%; justify-content: center; }
  .principle-grid,
  .pattern-grid,
  .motion-grid,
  .swatch-grid { grid-template-columns: 1fr; }
  .glass-card { border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}