:root {
      /* Brand */
      --ink: #141821;
      --cyan: #00a9b7;
      --blue: #4f7cff;
      --violet: #8768ff;
      --rose: #e96099;
      --mint: #35b987;
      --amber: #d8912f;

      /* Text */
      --color-text-primary: #141821;
      --color-text-secondary: #405064;
      --color-text-tertiary: #667085;
      --color-text-on-dark: #ffffff;

      /* Surface */
      --color-surface-strong: #151a24;
      --color-surface-glass: rgba(255, 255, 255, .56);
      --color-surface-glass-light: rgba(255, 255, 255, .44);
      --color-surface-glass-strong: rgba(255, 255, 255, .78);
      --color-surface-page: #fbfdff;
      --color-surface-soft: #edf3f8;

      /* Border */
      --color-border: rgba(20, 24, 33, .10);
      --color-border-light: rgba(20, 24, 33, .08);

      /* Semantic */
      --color-success: #35b987;
      --color-warning: #d8912f;
      --color-error: #e96099;
      --color-info: #4f7cff;
      --color-accent: #1e7770;

      /* Spacing — 4px grid */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 24px;
      --space-6: 32px;
      --space-7: 48px;

      /* Radius */
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 24px;
      --radius-full: 999px;

      /* Shadow */
      --shadow-sm: 0 10px 28px rgba(52, 70, 100, .08);
      --shadow-md: 0 18px 50px rgba(52, 70, 100, .08);
      --shadow-lg: 0 26px 68px rgba(52, 70, 100, .12);
      --shadow-xl: 0 30px 90px rgba(52, 70, 100, .14);

      /* Typography */
      --text-xs: 12px;
      --text-sm: 13px;
      --text-base: 14px;
      --text-md: 16px;
      --text-lg: 18px;
      --leading-tight: 1.2;
      --leading-normal: 1.5;
      --leading-relaxed: 1.7;

      /* Button height */
      --btn-height-sm: 32px;
      --btn-height-md: 40px;
      --btn-height-lg: 48px;

      /* Motion */
      --ease-out: cubic-bezier(.16, 1, .3, 1);
      --duration-fast: 150ms;
      --duration-normal: 220ms;
      --duration-slow: 350ms;

      /* Focus */
      --focus-ring: 0 0 0 3px rgba(79, 124, 255, .45);

      /* Typeface */
      font-family: "Avenir Next", "PingFang SC", "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--color-text-primary);
      background:
        radial-gradient(circle at 12% 8%, rgba(0, 169, 183, .14), transparent 30%),
        radial-gradient(circle at 88% 14%, rgba(233, 96, 153, .13), transparent 30%),
        linear-gradient(180deg, var(--color-surface-page) 0%, #edf4fb 46%, #fff7ed 100%);
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(90deg, rgba(20, 24, 33, .035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(20, 24, 33, .026) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 84%);
    }

    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { cursor: pointer; }

    /* ---- Global interaction utilities ---- */
    :focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
      border-radius: var(--radius-sm);
    }

    ::selection {
      color: var(--color-text-on-dark);
      background: var(--color-info);
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
      .top {
        background: rgba(255, 255, 255, .92);
      }

      .glass,
      .check-card {
        background: rgba(255, 255, 255, .82);
      }

      .detail-sheet {
        background: rgba(255, 255, 255, .88);
      }

      .detail-backdrop {
        background: rgba(236, 244, 251, .88);
      }

      .liquid-lens { display: none; }
    }

    .top {
      position: sticky;
      top: 0;
      z-index: 50;
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-5);
      padding: var(--space-3) var(--space-6);
      border-bottom: 1px solid var(--color-border);
      background: rgba(255, 255, 255, .64);
      backdrop-filter: blur(26px) saturate(1.35);
      -webkit-backdrop-filter: blur(26px) saturate(1.35);
      box-shadow: var(--shadow-md);
    }

    .brand {
      min-width: 220px;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: var(--space-3);
      align-items: center;
    }

    .brand-mark {
      display: block;
      width: 44px;
      height: 44px;
      flex: 0 0 auto;
    }

    .brand-copy {
      display: grid;
      gap: var(--space-1);
      min-width: 0;
    }

    .brand strong {
      font-size: var(--text-lg);
      letter-spacing: -.02em;
    }

    .brand span {
      color: var(--color-text-tertiary);
      font-size: var(--text-xs);
    }

    .primary-nav {
      display: flex;
      gap: var(--space-2);
      overflow-x: auto;
      padding: var(--space-1);
      border-radius: var(--radius-full);
      border: 1px solid var(--color-border);
      background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.46));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 16px 42px rgba(52,70,100,.1);
    }

    .primary-nav a {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      padding: 0 15px;
      border-radius: var(--radius-full);
      color: var(--color-text-secondary);
      font-size: var(--text-base);
      transition: transform var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
    }

    .primary-nav a:hover,
    .primary-nav a.active {
      color: var(--color-text-on-dark);
      background: var(--color-surface-strong);
      transform: translateY(-1px);
    }

    .primary-nav a:focus-visible {
      border-radius: var(--radius-full);
      box-shadow: var(--focus-ring);
    }

    .primary-nav a:active {
      transform: translateY(0);
    }

    .search {
      min-width: 230px;
      min-height: var(--btn-height-md);
      padding: 0 15px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-full);
      outline: none;
      color: var(--color-text-primary);
      background: rgba(255,255,255,.64);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
      transition: box-shadow var(--duration-fast) var(--ease-out);
    }

    .search:focus-visible {
      border-radius: var(--radius-full);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--focus-ring);
    }

    .page {
      position: relative;
      z-index: 1;
      max-width: 1480px;
      margin: 0 auto;
      padding: var(--space-5) var(--space-6) 80px;
    }

    .hero {
      min-height: calc(100vh - 116px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
      gap: var(--space-7);
      align-items: center;
      padding: var(--space-6) 0 44px;
    }

    .tab-panel {
      display: none;
    }

    .tab-panel.active {
      display: block;
    }

    .tab-panel.hero.active {
      display: grid;
    }

    .hero-copy h1 {
      margin: 0;
      max-width: 900px;
      font-size: clamp(46px, 8vw, 112px);
      line-height: .88;
      letter-spacing: -.065em;
    }

    .hero-copy p {
      max-width: 720px;
      color: var(--color-text-secondary);
      font-size: var(--text-lg);
      line-height: 1.85;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      margin-top: var(--space-5);
    }

    .btn {
      min-height: var(--btn-height-lg);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-full);
      padding: 0 var(--space-4);
      color: var(--color-text-secondary);
      background: rgba(255,255,255,.64);
      backdrop-filter: blur(18px);
      transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out);
      cursor: pointer;
      font-weight: 600;
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-lg);
    }

    .btn:active {
      transform: translateY(0);
      box-shadow: var(--shadow-sm);
    }

    .btn:focus-visible {
      border-radius: var(--radius-full);
      box-shadow: var(--focus-ring);
    }

    .btn.primary {
      color: var(--color-text-on-dark);
      border-color: var(--color-surface-strong);
      background: var(--color-surface-strong);
    }

    .btn.primary:hover {
      opacity: .92;
    }

    .btn:disabled,
    .btn[aria-disabled="true"] {
      opacity: .4;
      cursor: not-allowed;
      pointer-events: none;
      transform: none;
      box-shadow: none;
    }

    .glass {
      position: relative;
      border: 1px solid rgba(255,255,255,.68);
      background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.86), transparent 26%),
        linear-gradient(145deg, rgba(255,255,255,.66), rgba(255,255,255,.24));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 18px 16px 44px rgba(255,255,255,.18),
        inset -20px -24px 50px rgba(60,80,110,.055),
        var(--shadow-xl);
      backdrop-filter: blur(30px) saturate(1.55) contrast(1.03);
      -webkit-backdrop-filter: blur(30px) saturate(1.55) contrast(1.03);
      overflow: hidden;
    }

    .glass::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(120deg, rgba(255,255,255,.74), transparent 22%, transparent 68%, rgba(255,255,255,.28));
      opacity: .72;
      mix-blend-mode: screen;
    }

    .glass::after {
      content: "";
      position: absolute;
      inset: -45%;
      border-radius: inherit;
      pointer-events: none;
      background: conic-gradient(from 90deg, transparent, rgba(255,255,255,.44), transparent 18%, rgba(255,255,255,.16), transparent 42%);
      opacity: .46;
      animation: sheenDrift 8s ease-in-out infinite;
      mix-blend-mode: screen;
    }

    .check-card {
      max-height: calc(100vh - 132px);
      display: flex;
      flex-direction: column;
      border-radius: var(--radius-xl);
      padding: var(--space-5);
      animation: softFloat 5s ease-in-out infinite;
    }

    .check-card > * { position: relative; z-index: 2; }

    .score-line {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--space-4);
      align-items: end;
      margin-bottom: var(--space-4);
    }

    .score-line strong {
      font-size: 82px;
      line-height: .9;
      letter-spacing: -.075em;
    }

    .score-line span {
      display: block;
      color: var(--color-text-tertiary);
      line-height: 1.6;
    }

    .dimension-bars {
      display: grid;
      gap: var(--space-3);
      margin: var(--space-4) 0;
    }

    .dimension {
      display: grid;
      grid-template-columns: 72px 1fr 44px;
      gap: var(--space-3);
      align-items: center;
      color: var(--color-text-secondary);
      font-size: var(--text-sm);
    }

    .track {
      height: var(--space-3);
      overflow: hidden;
      border-radius: var(--radius-full);
      background: rgba(20,24,33,.08);
    }

    .fill {
      display: block;
      height: 100%;
      width: var(--value);
      border-radius: inherit;
      background: linear-gradient(90deg, #4ccfc4, #6f8fff);
      transition: width .3s ease;
    }

    .check-list {
      flex: 1 1 auto;
      min-height: 140px;
      overflow: auto;
      display: grid;
      gap: var(--space-2);
      padding-right: var(--space-1);
    }

    .check-item {
      display: grid;
      gap: var(--space-2);
      padding: var(--space-3);
      border: 1px solid var(--color-border-light);
      border-radius: var(--radius-lg);
      background: var(--color-surface-glass-light);
      color: var(--color-text-secondary);
      font-size: var(--text-base);
      line-height: var(--leading-normal);
    }

    .check-item ul {
      margin: 0;
      padding-left: var(--space-4);
      display: grid;
      gap: var(--space-1);
    }

    .check-item strong {
      color: var(--color-text-primary);
    }

    .result-box {
      flex: 0 0 auto;
      margin-top: var(--space-4);
      padding: var(--space-4);
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.5);
      border: 1px solid var(--color-border-light);
      color: var(--color-text-secondary);
      line-height: 1.65;
      font-size: var(--text-base);
    }

    .check-actions {
      flex: 0 0 auto;
      margin-top: var(--space-4);
    }

    .section {
      padding: 54px 0 var(--space-4);
      scroll-margin-top: 96px;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-4);
      align-items: end;
      margin-bottom: var(--space-5);
    }

    .section h2 {
      margin: 0;
      font-size: clamp(34px, 5vw, 66px);
      line-height: .95;
      letter-spacing: -.055em;
    }

    .section p.lead {
      margin: var(--space-3) 0 0;
      max-width: 820px;
      color: var(--color-text-secondary);
      line-height: 1.8;
    }

    .filters {
      display: flex;
      gap: var(--space-2);
      flex-wrap: wrap;
    }

    .filter {
      min-height: var(--btn-height-sm);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-full);
      padding: 0 var(--space-3);
      color: var(--color-text-secondary);
      background: var(--color-surface-glass);
      cursor: pointer;
      transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
    }

    .filter:hover {
      transform: translateY(-1px);
    }

    .filter:active {
      transform: translateY(0);
    }

    .filter:focus-visible {
      border-radius: var(--radius-full);
      box-shadow: var(--focus-ring);
    }

    .filter.active {
      color: var(--color-text-on-dark);
      border-color: var(--color-surface-strong);
      background: var(--color-surface-strong);
    }

    .filter.active:focus-visible {
      border-radius: var(--radius-full);
      box-shadow: 0 0 0 3px rgba(79, 124, 255, .6);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-4);
    }

    .component-layout {
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr);
      gap: var(--space-4);
      align-items: start;
    }

    .component-menu {
      position: sticky;
      top: 96px;
      max-height: calc(100vh - 120px);
      overflow: auto;
      border-radius: var(--radius-xl);
      padding: var(--space-4);
      border: 1px solid var(--color-border);
      background: var(--color-surface-glass);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(22px) saturate(1.35);
    }

    .component-menu-title {
      margin: 2px var(--space-1) var(--space-3);
      color: var(--color-text-primary);
      font-size: var(--text-sm);
      font-weight: 900;
    }

    .component-menu-groups {
      display: grid;
      gap: var(--space-3);
    }

    .component-menu-group {
      border-radius: var(--radius-lg);
      padding: var(--space-3);
      background: var(--color-surface-glass-light);
      border: 1px solid var(--color-border-light);
    }

    .component-menu-group summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      list-style: none;
      cursor: pointer;
      color: var(--color-surface-strong);
      font-size: var(--text-sm);
      font-weight: 900;
      transition: color var(--duration-fast) var(--ease-out);
    }

    .component-menu-group summary:hover {
      color: var(--color-text-primary);
    }

    .component-menu-group summary:focus-visible {
      border-radius: var(--radius-sm);
      box-shadow: var(--focus-ring);
    }

    .component-menu-group summary::-webkit-details-marker {
      display: none;
    }

    .component-menu-group summary::after {
      content: "⌄";
      color: var(--color-text-tertiary);
      transition: transform var(--duration-normal) var(--ease-out);
    }

    .component-menu-group:not([open]) summary::after {
      transform: rotate(-90deg);
    }

    .component-menu-items {
      display: grid;
      gap: var(--space-2);
      margin-top: var(--space-2);
    }

    .component-menu-item {
      min-height: var(--btn-height-sm);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
      width: 100%;
      border: 0;
      border-radius: var(--radius-md);
      padding: 0 var(--space-3);
      color: var(--color-text-secondary);
      background: transparent;
      text-align: left;
      font-size: var(--text-sm);
      cursor: pointer;
      transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
    }

    .component-menu-item:hover,
    .component-menu-item.active {
      color: var(--color-text-on-dark);
      background: var(--color-surface-strong);
    }

    .component-menu-item:focus-visible {
      border-radius: var(--radius-md);
      box-shadow: var(--focus-ring);
    }

    .component-menu-item span:last-child {
      color: inherit;
      opacity: .58;
      font-size: var(--text-xs);
      font-weight: 800;
    }

    .card {
      position: relative;
      min-height: 220px;
      border-radius: var(--radius-xl);
      padding: var(--space-5);
      border: 1px solid var(--color-border);
      background: var(--color-surface-glass);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(22px) saturate(1.35);
      overflow: hidden;
      transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }

    .card:active {
      transform: translateY(0);
    }

    .component-card {
      cursor: pointer;
    }

    .component-card:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
      border-radius: var(--radius-xl);
    }

    .component-card .card-action {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      margin-top: var(--space-4);
      color: var(--color-text-primary);
      font-size: var(--text-sm);
      font-weight: 800;
    }

    .component-card .card-action::after {
      content: "->";
      transition: transform var(--duration-normal) var(--ease-out);
    }

    .component-card:hover .card-action::after {
      transform: translateX(var(--space-1));
    }

    .card h3 {
      margin: 0 0 var(--space-2);
      font-size: 22px;
      letter-spacing: -.025em;
    }

    .card p {
      margin: 0 0 var(--space-4);
      color: var(--color-text-tertiary);
      line-height: 1.65;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-top: var(--space-3);
    }

    .tag {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-full);
      padding: 0 var(--space-2);
      color: var(--color-text-secondary);
      background: rgba(255,255,255,.58);
      font-size: var(--text-xs);
    }

    .prompt {
      margin-top: var(--space-3);
      padding: var(--space-3);
      border-radius: var(--radius-lg);
      color: var(--color-text-secondary);
      background: rgba(255,255,255,.54);
      border: 1px solid var(--color-border-light);
      font-size: var(--text-sm);
      line-height: 1.6;
    }

    .component-preview,
    .system-preview,
    .skill-preview {
      position: relative;
      min-height: 112px;
      margin: var(--space-4) 0;
      padding: var(--space-4);
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-border-light);
      background:
        linear-gradient(145deg, var(--color-surface-glass-strong), rgba(255,255,255,.36)),
        radial-gradient(circle at 88% 18%, rgba(79,124,255,.12), transparent 32%);
      overflow: hidden;
    }

    .preview-line,
    .preview-box,
    .preview-pill {
      display: block;
      border-radius: var(--radius-full);
      background: rgba(20,24,33,.1);
    }

    .preview-line {
      height: var(--space-2);
      margin: var(--space-2) 0;
    }

    .preview-box {
      border-radius: var(--radius-md);
      min-height: var(--btn-height-sm);
    }

    .preview-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: var(--btn-height-sm);
      padding: 0 var(--space-3);
      color: var(--color-text-on-dark);
      background: var(--color-surface-strong);
      font-size: var(--text-xs);
      font-weight: 700;
    }

    .component-preview[data-kind="button"] {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    .component-preview[data-kind="button"] .secondary {
      color: var(--color-text-secondary);
      background: rgba(255,255,255,.72);
      border: 1px solid var(--color-border);
    }

    .component-preview[data-kind="form"] {
      display: grid;
      gap: var(--space-3);
    }

    .component-preview[data-kind="form"] .field {
      height: 36px;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border);
      background: rgba(255,255,255,.7);
    }

    .component-preview[data-kind="table"] .row {
      display: grid;
      grid-template-columns: 1.2fr .8fr .6fr;
      gap: var(--space-2);
      margin-bottom: var(--space-2);
    }

    .component-preview[data-kind="table"] .cell {
      height: 22px;
      border-radius: var(--radius-sm);
      background: rgba(20,24,33,.08);
    }

    .component-preview[data-kind="modal"] .dialog {
      width: 72%;
      min-height: 72px;
      margin: 6px auto;
      padding: var(--space-3);
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.82);
      box-shadow: var(--shadow-md);
    }

    .component-preview[data-kind="nav"] {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .component-preview[data-kind="nav"] .nav-dot {
      flex: 1;
      height: 34px;
      border-radius: var(--radius-full);
      background: rgba(20,24,33,.08);
    }

    .component-preview[data-kind="feedback"] {
      display: grid;
      align-content: center;
      gap: var(--space-3);
    }

    .component-preview[data-kind="feedback"] .notice {
      min-height: 38px;
      border-radius: var(--space-4);
      background: rgba(0,169,183,.12);
      border: 1px solid rgba(0,169,183,.18);
    }

    .component-preview[data-kind="icon"],
    .component-preview[data-kind="typography"],
    .component-preview[data-kind="layout"],
    .component-preview[data-kind="space"],
    .component-preview[data-kind="tag"],
    .component-preview[data-kind="avatar"],
    .component-preview[data-kind="upload"],
    .component-preview[data-kind="slider"],
    .component-preview[data-kind="date"],
    .component-preview[data-kind="progress"] {
      display: grid;
      align-content: center;
      gap: var(--space-3);
    }

    .preview-icon-grid {
      display: grid;
      grid-template-columns: repeat(4, 38px);
      gap: var(--space-3);
      justify-content: center;
    }

    .preview-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: var(--space-4);
      color: var(--color-text-primary);
      background: var(--color-surface-glass-strong);
      border: 1px solid var(--color-border);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
      font-weight: 900;
    }

    .type-sample {
      display: grid;
      gap: var(--space-2);
    }

    .type-sample strong {
      font-size: 26px;
      line-height: 1;
      letter-spacing: -.045em;
    }

    .type-sample span {
      color: var(--color-text-secondary);
      line-height: 1.35;
    }

    .type-sample code {
      width: max-content;
      padding: 5px var(--space-2);
      border-radius: var(--radius-sm);
      background: rgba(20,24,33,.08);
      color: var(--color-text-secondary);
      font-size: var(--text-xs);
    }

    .layout-mini {
      display: grid;
      grid-template-columns: .56fr 1fr;
      grid-template-rows: 24px 1fr;
      gap: var(--space-2);
      min-height: 82px;
    }

    .layout-mini span {
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.74);
      border: 1px solid var(--color-border-light);
    }

    .layout-mini span:first-child {
      grid-column: 1 / -1;
      background: var(--color-surface-strong);
    }

    .space-mini {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      min-height: 82px;
    }

    .space-mini span {
      width: 38px;
      height: 38px;
      border-radius: var(--radius-md);
      background: rgba(20,24,33,.11);
    }

    .space-mini i {
      width: var(--space-3);
      height: 2px;
      border-radius: var(--radius-full);
      background: rgba(0,169,183,.55);
    }

    .input-preview {
      display: grid;
      gap: var(--space-2);
    }

    .input-preview label {
      color: var(--color-text-secondary);
      font-size: var(--text-xs);
      font-weight: 800;
    }

    .input-preview .control {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border);
      background: rgba(255,255,255,.74);
      padding: 0 var(--space-3);
      color: var(--color-text-secondary);
      font-size: var(--text-xs);
    }

    .choice-row,
    .switch-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      align-items: center;
    }

    .choice {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: 0 var(--space-3);
      border-radius: var(--radius-full);
      background: rgba(255,255,255,.72);
      border: 1px solid var(--color-border);
      color: var(--color-text-secondary);
      font-size: var(--text-xs);
      font-weight: 700;
    }

    .choice::before {
      content: "";
      width: var(--space-3);
      height: var(--space-3);
      border-radius: var(--radius-sm);
      border: 2px solid var(--color-surface-strong);
      background: rgba(255,255,255,.8);
    }

    .choice.radio::before {
      border-radius: var(--radius-full);
      box-shadow: inset 0 0 0 3px rgba(255,255,255,.9);
      background: var(--color-surface-strong);
    }

    .switch-track {
      width: 58px;
      height: 30px;
      border-radius: var(--radius-full);
      padding: 3px;
      background: var(--color-surface-strong);
    }

    .switch-track::before {
      content: "";
      display: block;
      width: var(--space-5);
      height: var(--space-5);
      margin-left: 28px;
      border-radius: var(--radius-full);
      background: var(--color-text-on-dark);
    }

    .slider-track {
      height: var(--space-3);
      border-radius: var(--radius-full);
      background: rgba(20,24,33,.1);
      overflow: hidden;
    }

    .slider-track span {
      display: block;
      width: 62%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--color-success), var(--color-info));
    }

    .upload-box {
      min-height: 82px;
      display: grid;
      place-items: center;
      border-radius: var(--radius-lg);
      border: 1px dashed rgba(20,24,33,.28);
      color: var(--color-text-secondary);
      background: var(--color-surface-glass);
      font-weight: 800;
    }

    .tag-preview {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      align-content: center;
    }

    .avatar-stack {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 82px;
    }

    .avatar-stack span {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      margin-left: -8px;
      border-radius: var(--radius-full);
      border: 2px solid rgba(255,255,255,.9);
      color: var(--color-text-on-dark);
      background: var(--color-surface-strong);
      font-size: var(--text-xs);
      font-weight: 900;
    }

    .alert-mini {
      display: grid;
      gap: var(--space-2);
    }

    .alert-mini span {
      min-height: var(--btn-height-sm);
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border);
      background: rgba(255,255,255,.7);
    }

    .alert-mini span:nth-child(1) { border-left: var(--space-1) solid var(--color-success); }
    .alert-mini span:nth-child(2) { border-left: var(--space-1) solid var(--color-warning); }
    .alert-mini span:nth-child(3) { border-left: var(--space-1) solid var(--color-error); }

    .toast-mini {
      display: grid;
      justify-items: end;
      gap: var(--space-2);
    }

    .toast-mini span {
      min-height: var(--btn-height-sm);
      width: min(240px, 100%);
      border-radius: var(--radius-full);
      background: var(--color-surface-strong);
      color: var(--color-text-on-dark);
      display: grid;
      place-items: center;
      font-size: var(--text-xs);
      font-weight: 800;
    }

    .progress-mini {
      display: grid;
      gap: var(--space-3);
    }

    .progress-mini .bar {
      height: var(--space-3);
      border-radius: var(--radius-full);
      background: rgba(20,24,33,.1);
      overflow: hidden;
    }

    .progress-mini .bar span {
      display: block;
      width: 68%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #4ccfc4, #6f8fff);
    }

    .component-detail {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      padding: var(--space-6);
    }

    .component-detail[hidden] {
      display: none;
    }

    body.detail-open {
      overflow: hidden;
    }

    .detail-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(236, 244, 251, .56);
      backdrop-filter: blur(18px) saturate(1.2);
    }

    .detail-sheet {
      position: relative;
      z-index: 1;
      width: min(1120px, 100%);
      max-height: min(760px, calc(100vh - 56px));
      overflow: auto;
      border-radius: var(--radius-xl);
      padding: var(--space-5);
      animation: detailIn var(--duration-normal) var(--ease-out) both;
    }

    .detail-sheet > * {
      position: relative;
      z-index: 2;
    }

    .detail-close {
      position: sticky;
      top: 0;
      z-index: 4;
      float: right;
      width: 38px;
      height: 38px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-full);
      color: var(--color-text-primary);
      background: rgba(255,255,255,.72);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    }

    .detail-close:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

    .detail-close:active {
      transform: translateY(0);
    }

    .detail-close:focus-visible {
      border-radius: var(--radius-full);
      box-shadow: var(--focus-ring);
    }

    .detail-hero {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(340px, 1.05fr);
      gap: var(--space-5);
      align-items: stretch;
      clear: both;
    }

    .detail-title {
      min-height: 100%;
      display: grid;
      align-content: space-between;
      gap: var(--space-5);
      padding: var(--space-1) 0;
    }

    .detail-title h3 {
      margin: var(--space-2) 0 var(--space-3);
      font-size: clamp(36px, 5vw, 72px);
      line-height: .92;
      letter-spacing: -.06em;
    }

    .detail-title p {
      max-width: 560px;
      color: var(--color-text-secondary);
      line-height: 1.8;
      font-size: var(--text-md);
    }

    .detail-preview {
      min-height: 330px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--color-border-light);
      background:
        radial-gradient(circle at 20% 16%, rgba(255,255,255,.9), transparent 30%),
        radial-gradient(circle at 84% 20%, rgba(0,169,183,.12), transparent 28%),
        linear-gradient(145deg, var(--color-surface-glass-strong), rgba(255,255,255,.34));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--shadow-md);
      padding: var(--space-5);
      overflow: hidden;
    }

    .detail-preview-surface {
      min-height: 286px;
      display: grid;
      gap: var(--space-4);
      align-content: center;
      border-radius: var(--radius-xl);
      padding: var(--space-4);
      background: rgba(255,255,255,.54);
      border: 1px solid var(--color-border-light);
    }

    .demo-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      align-items: center;
    }

    .demo-button {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-full);
      padding: 0 var(--space-4);
      color: var(--color-text-secondary);
      background: rgba(255,255,255,.76);
      font-weight: 800;
      font-size: var(--text-sm);
      cursor: pointer;
      transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    }

    .demo-button:hover {
      transform: translateY(-1px);
    }

    .demo-button:active {
      transform: translateY(0);
    }

    .demo-button:focus-visible {
      border-radius: var(--radius-full);
      box-shadow: var(--focus-ring);
    }

    .demo-button.primary {
      color: var(--color-text-on-dark);
      border-color: var(--color-surface-strong);
      background: var(--color-surface-strong);
    }

    .demo-button.danger {
      color: var(--color-text-on-dark);
      border-color: var(--color-error);
      background: var(--color-error);
    }

    .demo-button.danger:hover {
      opacity: .88;
    }

    .demo-button.ghost {
      background: transparent;
    }

    .demo-button[aria-disabled="true"] {
      opacity: .4;
      cursor: not-allowed;
      transform: none;
    }

    .demo-field,
    .demo-select,
    .demo-textarea {
      min-height: var(--btn-height-md);
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border);
      background: var(--color-surface-glass-strong);
      padding: 0 var(--space-3);
      color: var(--color-text-secondary);
    }

    .demo-textarea {
      min-height: 84px;
      padding-top: var(--space-3);
    }

    .demo-table {
      display: grid;
      gap: var(--space-2);
    }

    .demo-table div {
      display: grid;
      grid-template-columns: 1.2fr .7fr .7fr;
      gap: var(--space-2);
      align-items: center;
    }

    .demo-table span,
    .demo-skeleton span,
    .demo-line {
      min-height: var(--space-5);
      border-radius: var(--radius-sm);
      background: rgba(20,24,33,.08);
    }

    .demo-alert,
    .demo-toast,
    .demo-modal,
    .demo-drawer {
      border: 1px solid var(--color-border);
      background: rgba(255,255,255,.76);
      box-shadow: var(--shadow-md);
    }

    .demo-alert {
      border-left: var(--space-1) solid var(--cyan);
      border-radius: var(--radius-lg);
      padding: var(--space-3);
      line-height: 1.55;
    }

    .demo-toast {
      justify-self: end;
      width: min(280px, 100%);
      border-radius: var(--radius-full);
      padding: var(--space-3) var(--space-4);
      font-size: var(--text-sm);
    }

    .demo-modal {
      width: min(320px, 86%);
      justify-self: center;
      border-radius: var(--radius-xl);
      padding: var(--space-4);
    }

    .demo-drawer {
      min-height: 170px;
      border-radius: var(--radius-xl);
      padding: var(--space-4);
      border-right-width: 6px;
    }

    .demo-skeleton {
      display: grid;
      gap: var(--space-2);
    }

    .detail-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-3);
      margin-top: var(--space-4);
    }

    .detail-block {
      min-height: 184px;
      border-radius: var(--radius-xl);
      padding: var(--space-4);
      border: 1px solid var(--color-border-light);
      background: rgba(255,255,255,.52);
    }

    .detail-block.wide {
      grid-column: span 2;
    }

    .detail-block h4 {
      margin: 0 0 var(--space-3);
      font-size: 15px;
    }

    .detail-list {
      display: grid;
      gap: var(--space-2);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .detail-list li {
      padding: var(--space-3);
      border-radius: var(--radius-md);
      color: var(--color-text-secondary);
      background: rgba(255,255,255,.58);
      line-height: var(--leading-normal);
      font-size: var(--text-sm);
    }

    .related-components {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
    }

    .related-components button {
      min-height: 30px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-full);
      padding: 0 var(--space-3);
      color: var(--color-text-secondary);
      background: rgba(255,255,255,.62);
      cursor: pointer;
      transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
    }

    .related-components button:hover {
      color: var(--color-text-on-dark);
      background: var(--color-surface-strong);
    }

    .related-components button:focus-visible {
      border-radius: var(--radius-full);
      box-shadow: var(--focus-ring);
    }

    @keyframes detailIn {
      from { opacity: 0; transform: translateY(16px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .system-preview {
      min-height: 148px;
      display: grid;
      gap: var(--space-3);
    }

    .system-preview .system-top {
      display: flex;
      gap: var(--space-2);
    }

    .system-preview .system-top span {
      height: 28px;
      flex: 1;
      border-radius: var(--radius-full);
      background: rgba(20,24,33,.08);
    }

    .system-preview .system-canvas {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: var(--space-3);
      min-height: 84px;
    }

    .system-preview .system-side,
    .system-preview .system-main {
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.62);
      border: 1px solid var(--color-border-light);
    }

    .system-preview[data-kind="headless"] .system-main,
    .system-preview[data-kind="source"] .system-main {
      background: repeating-linear-gradient(135deg, rgba(20,24,33,.08) 0 1px, rgba(255,255,255,.62) 1px 9px);
    }

    .system-preview[data-kind="token"] {
      grid-template-columns: repeat(4, 1fr);
      align-items: end;
    }

    .system-preview[data-kind="token"] span {
      min-height: 72px;
      border-radius: var(--radius-md);
      background: var(--swatch);
    }

    .skill-preview {
      min-height: 128px;
      display: grid;
      gap: var(--space-3);
      margin: 0;
    }

    .skill-preview-head {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      color: var(--color-text-primary);
      font-size: var(--text-sm);
    }

    .skill-preview .skill-icon {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, rgba(0,169,183,.18), rgba(79,124,255,.2));
      display: grid;
      place-items: center;
      color: var(--color-surface-strong);
      font-weight: 900;
    }

    .skill-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-3);
    }

    .skill-metric {
      display: grid;
      gap: var(--space-1);
      min-width: 0;
    }

    .skill-metric div {
      display: flex;
      justify-content: space-between;
      gap: var(--space-2);
      color: var(--color-text-tertiary);
      font-size: var(--text-xs);
      line-height: var(--leading-tight);
    }

    .skill-metric strong {
      color: var(--color-text-primary);
      white-space: nowrap;
    }

    .skill-meter {
      display: block;
      height: 6px;
      border-radius: var(--radius-full);
      background: rgba(20,24,33,.08);
      overflow: hidden;
    }

    .skill-meter span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(0,169,183,.62), rgba(79,124,255,.24));
    }

    /* 按分类区分指标颜色 */
    .skill-preview[data-category="视觉"] .skill-meter span { background: linear-gradient(90deg, rgba(245,158,11,.62), rgba(245,158,11,.16)); }
    .skill-preview[data-category="视觉"] .skill-icon { background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(245,158,11,.08)); }
    .skill-preview[data-category="交互"] .skill-meter span { background: linear-gradient(90deg, rgba(99,102,241,.62), rgba(99,102,241,.16)); }
    .skill-preview[data-category="交互"] .skill-icon { background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(99,102,241,.08)); }
    .skill-preview[data-category="系统"] .skill-meter span { background: linear-gradient(90deg, rgba(16,185,129,.62), rgba(16,185,129,.16)); }
    .skill-preview[data-category="系统"] .skill-icon { background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(16,185,129,.08)); }
    .skill-preview[data-category="可访问性"] .skill-meter span { background: linear-gradient(90deg, rgba(0,169,183,.62), rgba(0,169,183,.16)); }
    .skill-preview[data-category="可访问性"] .skill-icon { background: linear-gradient(135deg, rgba(0,169,183,.22), rgba(0,169,183,.08)); }
    .skill-preview[data-category="性能"] .skill-meter span { background: linear-gradient(90deg, rgba(239,68,68,.62), rgba(239,68,68,.16)); }
    .skill-preview[data-category="性能"] .skill-icon { background: linear-gradient(135deg, rgba(239,68,68,.22), rgba(239,68,68,.08)); }

    .advanced-layout {
      display: grid;
      grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
      gap: var(--space-4);
    }

    .doc-panel {
      align-self: start;
      border-radius: var(--radius-xl);
      padding: var(--space-5);
    }

    .doc-spec-list {
      display: grid;
      gap: var(--space-3);
      margin-top: var(--space-5);
    }

    .doc-spec {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: var(--space-3);
      padding: var(--space-3);
      border: 1px solid var(--color-border-light);
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.5);
    }

    .doc-spec strong {
      color: var(--color-text-primary);
      font-size: var(--text-sm);
      line-height: var(--leading-normal);
    }

    .doc-spec span {
      color: var(--color-text-secondary);
      font-size: var(--text-sm);
      line-height: var(--leading-normal);
    }

    .doc-panel pre {
      margin: var(--space-4) 0 0;
      padding: var(--space-4);
      white-space: pre-wrap;
      color: var(--color-text-secondary);
      background: rgba(20,24,33,.04);
      border: 1px solid var(--color-border-light);
      border-radius: var(--radius-md);
      font-size: var(--text-sm);
      line-height: 1.7;
    }

    .system-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-4);
    }

    .system-card {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .system-card-head {
      display: grid;
      justify-items: start;
      gap: var(--space-2);
    }

    .system-card-head h3,
    .system-card-head p {
      margin: 0;
    }

    .system-card .system-preview {
      margin: 0;
    }

    .system-card-body {
      display: grid;
      gap: var(--space-3);
      margin-top: auto;
      padding-top: var(--space-3);
      border-top: 1px solid var(--color-border-light);
    }

    .system-facts {
      display: grid;
      gap: var(--space-2);
      margin: 0;
    }

    .system-facts div {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: var(--space-3);
      align-items: start;
    }

    .system-facts dt {
      color: var(--color-text-primary);
      font-size: var(--text-xs);
      font-weight: 800;
    }

    .system-facts dd {
      margin: 0;
      color: var(--color-text-secondary);
      font-size: var(--text-sm);
      line-height: var(--leading-normal);
    }

    .system-card .meta {
      margin-top: 0;
    }

    .skill-list {
      display: grid;
      gap: var(--space-3);
    }

    .skill-row {
      display: grid;
      grid-template-columns: minmax(220px, 1.1fr) minmax(160px, .8fr) 100px 120px minmax(220px, .9fr);
      gap: var(--space-3);
      align-items: center;
      padding: var(--space-4);
      border-radius: var(--radius-xl);
      border: 1px solid var(--color-border);
      background: rgba(255,255,255,.58);
      box-shadow: var(--shadow-md);
    }

    .skill-row h3 {
      margin: 0 0 5px;
      font-size: var(--text-lg);
    }

    .skill-row p {
      margin: 0;
      color: var(--color-text-tertiary);
      line-height: 1.55;
      font-size: var(--text-base);
    }

    .stars {
      color: var(--color-accent);
      font-weight: 800;
    }

    code, .command {
      font-family: "SFMono-Regular", Consolas, monospace;
    }

    .command {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
      padding: var(--space-3);
      border-radius: var(--radius-md);
      color: var(--color-text-secondary);
      background: rgba(255,255,255,.66);
      border: 1px solid var(--color-border);
      font-size: var(--text-xs);
      overflow: hidden;
    }

    .command span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .copy {
      flex: 0 0 auto;
      min-height: 28px;
      border: 0;
      border-radius: var(--radius-full);
      padding: 0 var(--space-2);
      color: var(--color-text-on-dark);
      background: var(--color-surface-strong);
      font-size: var(--text-xs);
      cursor: pointer;
      transition: opacity var(--duration-fast) var(--ease-out);
    }

    .copy:hover {
      opacity: .88;
    }

    .copy:focus-visible {
      border-radius: var(--radius-full);
      box-shadow: var(--focus-ring);
    }

    .cheats {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: var(--space-3);
    }

    .cheat {
      min-height: 184px;
    }

    .empty {
      display: none;
      padding: var(--space-6);
      border-radius: var(--radius-xl);
      color: var(--color-text-tertiary);
      border: 1px dashed rgba(20,24,33,.18);
      background: var(--color-surface-glass-light);
    }

    .liquid-lens {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .liquid-lens span {
      position: absolute;
      width: 260px;
      height: 118px;
      border-radius: 58% 42% 46% 54% / 55% 48% 52% 45%;
      border: 1px solid rgba(255,255,255,.72);
      background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.74), transparent 25%), linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.08));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.84), inset 18px 18px 38px rgba(255,255,255,.16), 0 20px 70px rgba(52,70,100,.08);
      backdrop-filter: blur(16px) saturate(1.5) contrast(1.03);
      animation: refractFlow 9s ease-in-out infinite;
      opacity: .55;
    }

    .liquid-lens span:nth-child(1) { left: -4%; top: 14%; }
    .liquid-lens span:nth-child(2) { right: 8%; top: -3%; width: 210px; height: 170px; animation-delay: 1.4s; }
    .liquid-lens span:nth-child(3) { left: 32%; bottom: -2%; width: 330px; height: 110px; animation-delay: 2.1s; }

    @keyframes sheenDrift {
      0%,100% { transform: translate3d(-8%, -4%, 0) rotate(8deg); opacity: .28; }
      50% { transform: translate3d(8%, 5%, 0) rotate(22deg); opacity: .62; }
    }

    @keyframes softFloat {
      0%,100% { transform: translate3d(0,0,0); }
      50% { transform: translate3d(0,-10px,0); }
    }

    @keyframes refractFlow {
      0%,100% {
        transform: translate3d(0,0,0) rotate(-3deg) scale(1);
        border-radius: 58% 42% 46% 54% / 55% 48% 52% 45%;
      }
      35% {
        transform: translate3d(24px,-18px,0) rotate(5deg) scale(1.04);
        border-radius: 44% 56% 61% 39% / 46% 57% 43% 54%;
      }
      70% {
        transform: translate3d(-16px,14px,0) rotate(-7deg) scale(.98);
        border-radius: 63% 37% 42% 58% / 61% 39% 58% 42%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
    }

    @media (max-width: 1120px) {
      .top {
        align-items: flex-start;
        flex-direction: column;
      }

      .search {
        width: min(100%, 460px);
      }

      .hero,
      .advanced-layout {
        grid-template-columns: 1fr;
      }

      .doc-panel {
        min-height: auto;
      }

      .component-layout {
        grid-template-columns: 1fr;
      }

      .component-menu {
        position: static;
        max-height: none;
      }

      .component-menu-groups {
        grid-auto-flow: column;
        grid-auto-columns: minmax(190px, 1fr);
        overflow-x: auto;
        padding-bottom: 2px;
      }

      .grid,
      .system-grid,
      .cheats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .skill-row {
        grid-template-columns: 1fr 100px;
      }

      .detail-hero,
      .detail-grid {
        grid-template-columns: 1fr;
      }

      .detail-block.wide {
        grid-column: auto;
      }
    }

    @media (max-width: 720px) {
      .top,
      .page {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
      }

      .brand { min-width: 0; }
      .primary-nav,
      .search {
        width: 100%;
      }

      .primary-nav {
        justify-content: flex-start;
      }

      .hero { min-height: auto; padding-top: 34px; }
      .hero-copy h1 {
        font-size: 44px;
        line-height: .94;
      }

      .hero-copy p {
        font-size: var(--text-md);
      }

      .grid,
      .system-grid,
      .cheats,
      .skill-row {
        grid-template-columns: 1fr;
      }

      .section-head {
        grid-template-columns: 1fr;
      }

      .check-card {
        border-radius: var(--radius-xl);
        padding: var(--space-4);
      }

      .component-detail {
        padding: var(--space-4);
        place-items: stretch;
      }

      .detail-sheet {
        max-height: calc(100vh - 28px);
        border-radius: var(--radius-xl);
        padding: var(--space-4);
      }

      .detail-preview {
        min-height: 280px;
        padding: var(--space-4);
      }

      .score-line strong {
        font-size: 64px;
      }

      .doc-spec {
        grid-template-columns: 1fr;
      }
    }
  </style>