/* APKTrack UI. System fonts, CSS gradients and inline SVG masks only; no external asset is ever fetched. */

:root {
  color-scheme: light dark;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --wide: 1200px;
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --brand: #6d4bff;
  --brand-2: #3d7bff;
  --brand-3: #16bfe6;
  --brand-grad: linear-gradient(135deg, #7c5cff 0%, #4d7dff 52%, #1ec8e8 100%);
  --brand-soft: linear-gradient(135deg, #7c5cff26, #1ec8e81f);

  --ok: #0e9f6e;
  --ok-2: #2fe0a0;
  --warn: #b06a00;
  --warn-2: #ffb84d;
  --bad: #d33a3a;
  --bad-2: #ff7a7a;

  /* light */
  --bg: #f1f0f7;
  --panel: #fffffff2;
  --panel-2: #ffffffbf;
  --panel-3: #ffffff80;
  --sunken: #eceaf5;
  --hair: #1b153f14;
  --hair-2: #1b153f24;
  --hair-top: #ffffff;
  --ink: #17132e;
  --ink-2: #565080;
  --ink-3: #7b76a0;
  --on-brand: #ffffff;
  --seal-ring: #f1f0f7;

  --aura-1: #7c5cff40;
  --aura-2: #1ec8e830;
  --aura-3: #ff6bb52b;
  --grain: .5;

  --sh-sm: 0 1px 2px #1b153f14, 0 2px 8px -4px #1b153f1f;
  --sh: 0 2px 6px -2px #1b153f1a, 0 14px 32px -18px #2a1f6b40;
  --sh-lg: 0 4px 12px -6px #1b153f21, 0 30px 60px -30px #2a1f6b59;
  --sh-brand: 0 8px 24px -10px #6d4bff66, 0 2px 6px -2px #6d4bff33;
  --sh-inset: inset 0 1px 0 #ffffffcc;

  --ico-w: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08070f;
    --panel: #ffffff0d;
    --panel-2: #ffffff0a;
    --panel-3: #ffffff08;
    --sunken: #ffffff08;
    --hair: #ffffff17;
    --hair-2: #ffffff26;
    --hair-top: #ffffff1f;
    --ink: #f2f0f9;
    --ink-2: #a9a4c4;
    --ink-3: #837da3;
    --on-brand: #ffffff;
    --seal-ring: #0e0c1a;

    --ok: #2fe0a0;
    --ok-2: #6ff2c4;
    --warn: #ffb84d;
    --warn-2: #ffd08a;
    --bad: #ff7a7a;
    --bad-2: #ffa6a6;

    --aura-1: #7c5cff45;
    --aura-2: #1ec8e82e;
    --aura-3: #ff4fa32b;
    --grain: .85;

    --sh-sm: 0 1px 2px #00000073;
    --sh: 0 2px 8px -2px #00000080, 0 18px 40px -22px #000000cc;
    --sh-lg: 0 6px 18px -8px #0000008c, 0 40px 80px -40px #000000e6;
    --sh-brand: 0 10px 30px -10px #6d4bff80, 0 0 0 1px #7c5cff40;
    --sh-inset: inset 0 1px 0 #ffffff14;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08070f;
  --panel: #ffffff0d;
  --panel-2: #ffffff0a;
  --panel-3: #ffffff08;
  --sunken: #ffffff08;
  --hair: #ffffff17;
  --hair-2: #ffffff26;
  --hair-top: #ffffff1f;
  --ink: #f2f0f9;
  --ink-2: #a9a4c4;
  --ink-3: #837da3;
  --on-brand: #ffffff;
  --seal-ring: #0e0c1a;

  --ok: #2fe0a0;
  --ok-2: #6ff2c4;
  --warn: #ffb84d;
  --warn-2: #ffd08a;
  --bad: #ff7a7a;
  --bad-2: #ffa6a6;

  --aura-1: #7c5cff45;
  --aura-2: #1ec8e82e;
  --aura-3: #ff4fa32b;
  --grain: .85;

  --sh-sm: 0 1px 2px #00000073;
  --sh: 0 2px 8px -2px #00000080, 0 18px 40px -22px #000000cc;
  --sh-lg: 0 6px 18px -8px #0000008c, 0 40px 80px -40px #000000e6;
  --sh-brand: 0 10px 30px -10px #6d4bff80, 0 0 0 1px #7c5cff40;
  --sh-inset: inset 0 1px 0 #ffffff14;
}

:root[data-theme="light"] { color-scheme: light }

/* project identity hues */
[data-hue="0"] { --h1: #7c5cff; --h2: #b49bff }
[data-hue="1"] { --h1: #5b7cff; --h2: #93b0ff }
[data-hue="2"] { --h1: #2f9bff; --h2: #7fcaff }
[data-hue="3"] { --h1: #10b3c8; --h2: #5fe2e8 }
[data-hue="4"] { --h1: #0eb47c; --h2: #55e3ab }
[data-hue="5"] { --h1: #58b524; --h2: #a3e05c }
[data-hue="6"] { --h1: #c39a00; --h2: #f2d75c }
[data-hue="7"] { --h1: #ef8a1f; --h2: #ffc077 }
[data-hue="8"] { --h1: #f2603c; --h2: #ff9c82 }
[data-hue="9"] { --h1: #ec3f70; --h2: #ff8bab }
[data-hue="10"] { --h1: #c53ce0; --h2: #e694f7 }
[data-hue="11"] { --h1: #8e45f0; --h2: #c39aff }

/* ------------------------------------------------------------------- icons */
:root {
  --i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.2' width='7.4' height='7.4' rx='2.2'/%3E%3Crect x='13.4' y='3.2' width='7.4' height='7.4' rx='2.2'/%3E%3Crect x='3.2' y='13.4' width='7.4' height='7.4' rx='2.2'/%3E%3Crect x='13.4' y='13.4' width='7.4' height='7.4' rx='2.2'/%3E%3C/svg%3E");
  --i-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 13.9 8.4 19.5 10.3 13.9 12.2 12 17.8 10.1 12.2 4.5 10.3 10.1 8.4z'/%3E%3Cpath d='M18.4 15.6 19.2 18 21.6 18.8 19.2 19.6 18.4 22 17.6 19.6 15.2 18.8 17.6 18z'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 4.6 5.5v5.8c0 4.6 3.1 7.9 7.4 9.2 4.3-1.3 7.4-4.6 7.4-9.2V5.5z'/%3E%3C/svg%3E");
  --i-verified: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 4.6 5.5v5.8c0 4.6 3.1 7.9 7.4 9.2 4.3-1.3 7.4-4.6 7.4-9.2V5.5z'/%3E%3Cpath d='m8.8 11.9 2.2 2.2 4.2-4.3'/%3E%3C/svg%3E");
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.9-3.9'/%3E%3C/svg%3E");
  --i-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.6-6.1'/%3E%3Cpath d='M20.6 3.6v4.6h-4.6'/%3E%3C/svg%3E");
  --i-chev-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.5 5.5-6.5 6.5 6.5 6.5'/%3E%3C/svg%3E");
  --i-chev-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E");
  --i-chev-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 9.5 6.5 6.5 6.5-6.5'/%3E%3C/svg%3E");
  --i-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.6' cy='15.4' r='3.6'/%3E%3Cpath d='m10.2 12.8 8-8'/%3E%3Cpath d='m14.8 7.6 2.1 2.1'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='10.4' width='14.8' height='10' rx='2.6'/%3E%3Cpath d='M8.2 10.4V7.6a3.8 3.8 0 0 1 7.6 0v2.8'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.3 17.2 4 11.9'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.8V12l3.4 2'/%3E%3C/svg%3E");
  --i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.6v5'/%3E%3Cpath d='M12 16.3h.01'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.4'/%3E%3Cpath d='M12 7.7h.01'/%3E%3C/svg%3E");
  --i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v10.8'/%3E%3Cpath d='m7.7 10.4 4.3 4.3 4.3-4.3'/%3E%3Cpath d='M4 16.5v2.2a1.8 1.8 0 0 0 1.8 1.8h12.4a1.8 1.8 0 0 0 1.8-1.8v-2.2'/%3E%3C/svg%3E");
  --i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2.8H7a2.2 2.2 0 0 0-2.2 2.2v14a2.2 2.2 0 0 0 2.2 2.2h10a2.2 2.2 0 0 0 2.2-2.2V8.6z'/%3E%3Cpath d='M13.4 2.8v5.8h5.8'/%3E%3C/svg%3E");
  --i-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.8 9 4.8-9 4.8-9-4.8z'/%3E%3Cpath d='m3 12.4 9 4.8 9-4.8'/%3E%3Cpath d='m3 17 9 4.8 9-4.8'/%3E%3C/svg%3E");
  --i-swap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.2h13.4l-3.6-3.6'/%3E%3Cpath d='M20 15.8H6.6l3.6 3.6'/%3E%3C/svg%3E");
  --i-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
  --i-radar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Cpath d='M16.6 7.4a6.5 6.5 0 0 1 0 9.2'/%3E%3Cpath d='M7.4 16.6a6.5 6.5 0 0 1 0-9.2'/%3E%3Cpath d='M19.8 4.2a10.6 10.6 0 0 1 0 15.6'/%3E%3Cpath d='M4.2 19.8a10.6 10.6 0 0 1 0-15.6'/%3E%3C/svg%3E");
  --i-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 5.2h17.2l-6.6 7.8v6l-4 2v-8z'/%3E%3C/svg%3E");
  --i-service: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='2.2'/%3E%3Crect x='3' y='13' width='18' height='7' rx='2.2'/%3E%3Cpath d='M7 7.5h.01M7 16.5h.01'/%3E%3C/svg%3E");
  --i-local: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2.2'/%3E%3Cpath d='m8 9 2.4 2.4L8 13.8'/%3E%3Cpath d='M13 13.8h3.6'/%3E%3Cpath d='M7.6 20.6h8.8'/%3E%3C/svg%3E");
  --i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11.4' height='11.4' rx='2.4'/%3E%3Cpath d='M5.4 15H4.6A1.6 1.6 0 0 1 3 13.4V4.6A1.6 1.6 0 0 1 4.6 3h8.8A1.6 1.6 0 0 1 15 4.6v.8'/%3E%3C/svg%3E");
  --i-signature: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.6c3.2 0 3.4-11 6.2-11s1.4 8.6 3.8 8.6 2.4-4.2 4.2-4.2c1.2 0 1.6 1.4 3.8 1.4'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E");
  --i-broadcast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3Cpath d='M8.2 8.2a5.4 5.4 0 0 0 0 7.6M15.8 15.8a5.4 5.4 0 0 0 0-7.6'/%3E%3Cpath d='M5.4 5.4a9.4 9.4 0 0 0 0 13.2M18.6 18.6a9.4 9.4 0 0 0 0-13.2'/%3E%3C/svg%3E");
  --i-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.4v2.4M12 19.2v2.4M4.4 4.4l1.7 1.7M17.9 17.9l1.7 1.7M2.4 12h2.4M19.2 12h2.4M4.4 19.6l1.7-1.7M17.9 6.1l1.7-1.7'/%3E%3C/svg%3E");
  --i-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 13.2A8.6 8.6 0 1 1 10.8 3.5a6.7 6.7 0 0 0 9.7 9.7z'/%3E%3C/svg%3E");
  --i-monitor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='13' rx='2.2'/%3E%3Cpath d='M8.5 20.5h7M12 17v3.5'/%3E%3C/svg%3E");
}

.ico {
  flex: none;
  display: inline-block;
  width: var(--ico-w);
  height: var(--ico-w);
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
[data-ico="grid"] { --ico: var(--i-grid) }
[data-ico="spark"] { --ico: var(--i-spark) }
[data-ico="shield"] { --ico: var(--i-shield) }
[data-ico="verified"] { --ico: var(--i-verified) }
[data-ico="search"] { --ico: var(--i-search) }
[data-ico="refresh"] { --ico: var(--i-refresh) }
[data-ico="chev-left"] { --ico: var(--i-chev-left) }
[data-ico="chev-right"] { --ico: var(--i-chev-right) }
[data-ico="chev-down"] { --ico: var(--i-chev-down) }
[data-ico="key"] { --ico: var(--i-key) }
[data-ico="lock"] { --ico: var(--i-lock) }
[data-ico="check"] { --ico: var(--i-check) }
[data-ico="clock"] { --ico: var(--i-clock) }
[data-ico="warn"] { --ico: var(--i-warn) }
[data-ico="alert"] { --ico: var(--i-alert) }
[data-ico="info"] { --ico: var(--i-info) }
[data-ico="download"] { --ico: var(--i-download) }
[data-ico="file"] { --ico: var(--i-file) }
[data-ico="layers"] { --ico: var(--i-layers) }
[data-ico="swap"] { --ico: var(--i-swap) }
[data-ico="inbox"] { --ico: var(--i-inbox) }
[data-ico="radar"] { --ico: var(--i-radar) }
[data-ico="filter"] { --ico: var(--i-filter) }
[data-ico="service"] { --ico: var(--i-service) }
[data-ico="local"] { --ico: var(--i-local) }
[data-ico="copy"] { --ico: var(--i-copy) }
[data-ico="signature"] { --ico: var(--i-signature) }
[data-ico="broadcast"] { --ico: var(--i-broadcast) }

/* -------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--font);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.aura {
  position: fixed;
  inset: -20vh -10vw;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(46rem 32rem at 12% 4%, var(--aura-1), transparent 60%),
    radial-gradient(40rem 28rem at 88% 0%, var(--aura-2), transparent 58%),
    radial-gradient(34rem 22rem at 70% 108%, var(--aura-3), transparent 60%);
  filter: blur(6px);
}
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: calc(.04 * var(--grain));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 { margin: 0; font-weight: 680; letter-spacing: -.024em; text-wrap: balance }
h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.35rem); line-height: 1.14 }
h2 { font-size: 1.125rem; line-height: 1.3 }
p { margin: 0 0 .7rem }
p:last-child { margin-bottom: 0 }
em { font-style: normal }

h1 em, .trusthead h1 em {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a { color: inherit; text-underline-offset: .2em }

.eyebrow {
  margin: 0 0 .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs) }

.skip {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 60;
  padding: .65rem 1rem;
  border-radius: var(--r-sm);
  background: var(--brand-grad);
  color: var(--on-brand);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sh-brand);
  transition: top .2s ease;
}
.skip:focus { top: .8rem }

/* ------------------------------------------------------------------ chrome */

.topbar { position: sticky; top: 0; z-index: 30 }
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 60px;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 1.75rem);
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid var(--hair);
  z-index: -1;
}

.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink) }
.brand-chip {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--brand-grad);
  color: #fff;
  box-shadow: var(--sh-brand);
}
.brand-chip svg { width: 17px; height: 17px }
.brand-chip.small { width: 22px; height: 22px; border-radius: 8px }
.brand-chip.small svg { width: 13px; height: 13px }
.brand-name { font-size: .9375rem; font-weight: 700; letter-spacing: -.018em }

.nav {
  display: flex;
  gap: .15rem;
  margin-left: auto;
  padding: 4px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel-2);
  box-shadow: var(--sh-inset);
}
.nav button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 32px;
  padding: 0 .85rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.nav button .ico { --ico-w: 15px; opacity: .75 }
.nav button:hover { color: var(--ink) }
.nav button.active { background: var(--brand-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2) }
.nav button.active .ico { opacity: 1; color: var(--brand) }

.themeswitch {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--hair);
  border-radius: 11px;
  background: var(--panel-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, transform .16s ease;
}
.themeswitch:hover { color: var(--ink); background: var(--panel); transform: translateY(-1px) }
.themeswitch-glyph { width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat }
.themeswitch[data-mode="system"] .themeswitch-glyph { --ico: var(--i-monitor) }
.themeswitch[data-mode="light"] .themeswitch-glyph { --ico: var(--i-sun) }
.themeswitch[data-mode="dark"] .themeswitch-glyph { --ico: var(--i-moon) }

main { flex: 1; width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 1.75rem) 5rem }
main:focus { outline: none }
.view { animation: rise .38s cubic-bezier(.2, .8, .25, 1) both }
@keyframes rise { from { opacity: 0; transform: translateY(10px) } }

.noscript { margin: 2rem 0; padding: 1rem 1.15rem; border-radius: var(--r); background: var(--panel); border: 1px solid var(--hair); font-size: .875rem }

.sitefoot { margin-top: auto; border-top: 1px solid var(--hair); background: var(--panel-3) }
.sitefoot-inner { max-width: var(--wide); margin: 0 auto; padding: 1.9rem clamp(1rem, 3vw, 1.75rem) 2.6rem }
.sitefoot-brand { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 700 }
.sitefoot-note { margin: .6rem 0 0; max-width: 60ch; font-size: .8125rem; color: var(--ink-2) }
.sitefoot-facts { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: .7rem 0 0; padding: 0; list-style: none }
.sitefoot-facts li { position: relative; color: var(--ink-3); font-size: .75rem }
.sitefoot-facts li + li::before { content: "·"; position: absolute; left: -.55rem; color: var(--hair-2) }

/* ---------------------------------------------------------------- controls */

button, input, select, textarea { font: inherit; color: inherit }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  height: 42px;
  padding: 0 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2, .8, .25, 1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease, filter .18s ease;
}
.btn.primary { background: var(--brand-grad); color: var(--on-brand); box-shadow: var(--sh-brand) }
.btn.primary:hover:not(:disabled) { transform: translateY(-2px); filter: saturate(1.12) brightness(1.06); box-shadow: 0 14px 34px -12px #6d4bff8c }
.btn.primary:active:not(:disabled) { transform: translateY(0) }
.btn.ghost { border-color: var(--hair-2); background: var(--panel-2); color: var(--ink) }
.btn.ghost:hover:not(:disabled) { background: var(--panel); border-color: var(--brand); transform: translateY(-1px) }
.btn.small { height: 34px; padding: 0 .8rem; font-size: .8125rem }
.btn.block { width: 100%; height: 46px; font-size: .9375rem }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none }
.btn .ico { --ico-w: 17px }
.btn.busy .ico { animation: spin .9s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

.actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem }

.field { margin: 0 0 1.1rem }
.field:last-child { margin-bottom: 0 }
label { display: block; margin: 0 0 .4rem; font-size: .8125rem; font-weight: 600 }
.hint { margin: .4rem 0 0; font-size: .75rem; color: var(--ink-3) }

input, select, textarea {
  width: 100%;
  height: 42px;
  padding: 0 .85rem;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--ink);
  font-size: .875rem;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
input::placeholder, textarea::placeholder { color: var(--ink-3) }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3) }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--panel);
  box-shadow: 0 0 0 4px #6d4bff26;
}
textarea { height: auto; min-height: 5.5rem; padding: .65rem .85rem; line-height: 1.55; resize: vertical }

select { appearance: none; padding-right: 2.1rem; cursor: pointer }
.field.select { position: relative }
.field.select::after {
  content: "";
  position: absolute;
  right: .7rem;
  bottom: .8rem;
  width: 16px;
  height: 16px;
  background: var(--ink-3);
  -webkit-mask: var(--i-chev-down) center / contain no-repeat;
  mask: var(--i-chev-down) center / contain no-repeat;
  pointer-events: none;
}

input[type="file"] {
  height: auto;
  padding: .5rem;
  border-style: dashed;
  background: var(--panel-3);
  font-size: .8125rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: .65rem;
  padding: .4rem .8rem;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-xs);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: .78125rem;
  font-weight: 650;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--brand) }

.check { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-size: .84375rem; cursor: pointer }
.check input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.check-box {
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--hair-2);
  border-radius: 7px;
  background: var(--panel-2);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.check input:checked + .check-box { background: var(--brand-grad); border-color: transparent; box-shadow: var(--sh-brand) }
.check input:checked + .check-box::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-mask: var(--i-check) center / 12px no-repeat;
  mask: var(--i-check) center / 12px no-repeat;
}
.check:hover .check-box { border-color: var(--brand) }
.check input:focus-visible + .check-box { outline: 2px solid var(--brand); outline-offset: 2px }
.check.optin { margin-bottom: 1.2rem }

.pillgroup { display: inline-flex; gap: .3rem; flex-wrap: wrap }
.pill {
  height: 32px;
  padding: 0 .85rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink-2);
  font-size: .78125rem;
  font-weight: 650;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.pill:hover { color: var(--ink); transform: translateY(-1px) }
.pill[aria-pressed="true"] { background: var(--brand-grad); border-color: transparent; color: var(--on-brand); box-shadow: var(--sh-brand) }

.minifield { position: relative; display: inline-flex; align-items: center; gap: .45rem }
.minifield label { margin: 0; font-size: .78125rem; font-weight: 500; color: var(--ink-3); white-space: nowrap }
.minifield select { width: auto; height: 32px; padding: 0 1.9rem 0 .7rem; font-size: .78125rem; border-radius: 999px }
.minifield::after {
  content: "";
  position: absolute;
  right: .6rem;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: var(--ink-3);
  -webkit-mask: var(--i-chev-down) center / contain no-repeat;
  mask: var(--i-chev-down) center / contain no-repeat;
  pointer-events: none;
}

.copy {
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.copy:hover { color: var(--ink); background: var(--panel); border-color: var(--hair) }
.copy .ico { --ico-w: 15px; position: absolute; transition: opacity .18s ease, transform .18s ease }
.copy .ico[data-ico="check"] { opacity: 0; transform: scale(.6) }
.copy.done { color: var(--ok) }
.copy.done .ico[data-ico="copy"] { opacity: 0; transform: scale(.6) }
.copy.done .ico[data-ico="check"] { opacity: 1; transform: none }
.copy.failed { color: var(--bad) }

.mono-text, .mono { font-family: var(--mono) }

/* -------------------------------------------------------- shared surfaces */

.note {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  margin: 1.2rem 0 0;
  padding: .85rem 1rem;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel-2);
  font-size: .84375rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.note p { margin: 0 }
.note-badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--panel);
  border: 1px solid var(--hair);
  color: var(--ink-3);
}
.note-badge .ico { --ico-w: 16px }
.note.good { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--panel-2)) }
.note.good .note-badge { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent) }
.note.warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 9%, var(--panel-2)) }
.note.warn .note-badge { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent) }

.empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: 3rem 1.5rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--panel-3);
  text-align: center;
}
.empty-badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: .6rem;
  border-radius: 18px;
  background: var(--brand-soft);
  border: 1px solid var(--hair);
  color: var(--brand);
}
.empty-badge .ico { --ico-w: 24px }
.empty-title { margin: 0; font-size: 1rem; font-weight: 680 }
.empty-body { margin: 0; max-width: 46ch; font-size: .84375rem; color: var(--ink-2) }
.empty.warn .empty-badge { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn) }

.sk { border-radius: 8px; background: linear-gradient(90deg, var(--panel-3), var(--panel), var(--panel-3)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite }
@keyframes shimmer { to { background-position: -200% 0 } }
.sk-mark { width: 46px; height: 46px; border-radius: 14px }
.sk-line { height: 11px; margin-top: .8rem }
.sk-line.w50 { width: 50% }
.sk-line.w60 { width: 60% }
.sk-line.w75 { width: 75% }
.sk-line.w80 { width: 80% }
.sk-line.w90 { width: 90% }
.sk-foot { height: 22px; margin-top: 1.2rem; border-radius: 999px }
.sk-btn { height: 46px; margin-top: 1.1rem; border-radius: var(--r-sm) }
.skeleton { pointer-events: none }

.code { margin: 1.1rem 0 0; border: 1px solid var(--hair); border-radius: var(--r); background: var(--panel-3); overflow: hidden }
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem .55rem .45rem .95rem;
  border-bottom: 1px solid var(--hair);
  background: var(--panel-2);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.code pre {
  margin: 0;
  padding: .95rem;
  max-height: 22rem;
  overflow: auto;
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mono {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: linear-gradient(150deg, var(--h1, #7c5cff), var(--h2, #b49bff));
  color: #fff;
  overflow: hidden;
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--h1, #7c5cff) 70%, transparent), var(--sh-inset);
}
.mono-letters { font-size: .9375rem; font-weight: 750; letter-spacing: -.02em; text-shadow: 0 1px 2px #00000038 }
.mono.large { width: 76px; height: 76px; border-radius: 24px }
.mono.large .mono-letters { font-size: 1.6rem }
.mono-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.mono.has-image .mono-letters { display: none }
.mono.blank { background: var(--panel-3); border: 1px dashed var(--hair-2); box-shadow: none; color: var(--ink-3) }
.mono.blank .mono-letters { text-shadow: none }

.seal {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--ok-2), var(--ok));
  color: #04231a;
  box-shadow: 0 0 0 2px var(--seal-ring), 0 4px 10px -4px color-mix(in srgb, var(--ok) 70%, transparent);
}
.seal .ico { --ico-w: 12px }
.seal.large { width: 26px; height: 26px }
.seal.large .ico { --ico-w: 15px }

.tagrow { display: flex; flex-wrap: wrap; gap: .3rem }
.tag {
  padding: .18rem .55rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink-3);
  font-size: .6875rem;
  font-weight: 600;
}

.chansum { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .75rem }
.chansum-lead { display: inline-flex; align-items: center; gap: .38rem; font-weight: 680; color: var(--ink) }
.chansum-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent) }
.chansum-rest { color: var(--ink-3) }
.chansum-lead + .chansum-rest::before { content: "·"; margin-right: .45rem; color: var(--ink-3) }

.roledot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3) }
.roledot.prod { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent) }
.roledot.dev { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent) }

.pager { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.8rem }
.pager-status { font-size: .8125rem; color: var(--ink-3) }

/* --------------------------------------------------------------- directory */

.masthead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2rem;
  align-items: center;
  margin: 1.5rem 0 0;
  padding: 2.1rem 2.2rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  background: var(--panel-2);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--sh-lg), var(--sh-inset);
  overflow: hidden;
}
.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(30rem 18rem at 88% 12%, #7c5cff1f, transparent 70%);
}
.masthead-copy { position: relative; min-width: 0 }
.masthead h1 { font-size: clamp(1.5rem, 1.05rem + 1.5vw, 1.95rem); letter-spacing: -.03em; max-width: 26ch }
.masthead-lead { margin: .8rem 0 0; max-width: 52ch; font-size: .9375rem; color: var(--ink-2); text-wrap: pretty }

.proofrow { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem }
.proof {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel-2);
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-2);
}
.proof .ico { --ico-w: 14px; color: var(--brand) }

.searchrow { display: flex; gap: .6rem; margin-top: 1.5rem }
.searchbox { position: relative; flex: 1; min-width: 0 }
.searchbox .ico { position: absolute; left: .95rem; top: 50%; margin-top: -9px; --ico-w: 18px; color: var(--ink-3); pointer-events: none; transition: color .16s ease }
.searchbox input { height: 50px; padding-left: 2.85rem; border-radius: var(--r); font-size: .96875rem; background: var(--panel) }
.searchbox:focus-within .ico { color: var(--brand) }

/* A cascade of app tiles carrying a verification seal: the product in one picture. */
.art { position: relative; display: grid; place-items: center; min-height: 236px }
.art-halo {
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, #7c5cff4d, #1ec8e81a 52%, transparent 70%);
  filter: blur(10px);
}
.art-deck { position: relative; width: 236px; height: 196px; animation: float 7s ease-in-out infinite }
@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.art-tile {
  position: absolute;
  display: grid;
  align-content: center;
  gap: .45rem;
  border-radius: 22px;
  background: linear-gradient(150deg, var(--h1), var(--h2));
  box-shadow: var(--sh-lg), var(--sh-inset);
}
.art-tile.back { width: 112px; height: 112px; left: 8px; top: 6px; transform: rotate(-10deg); opacity: .5; padding: .85rem }
.art-tile.mid { width: 120px; height: 120px; left: 60px; top: 32px; transform: rotate(-3deg); opacity: .72; padding: .95rem }
.art-tile.front { width: 132px; height: 132px; left: 108px; top: 58px; transform: rotate(4deg); padding: 1.1rem }
.art-glyph { width: 30px; height: 30px; border-radius: 10px; background: #fffffff2; box-shadow: 0 3px 10px -3px #0000004d }
.art-tile.back .art-glyph, .art-tile.mid .art-glyph { width: 26px; height: 26px; border-radius: 9px }
.art-bars { display: grid; gap: .35rem }
.art-bar { height: 7px; border-radius: 4px; background: #ffffff8c }
.art-tile.back .art-bar, .art-tile.mid .art-bar { height: 6px; background: #ffffff73 }
.art-bar.w1 { width: 76% }
.art-bar.w2 { width: 46% }
.art-seal {
  position: absolute;
  right: -4px;
  bottom: 32px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--ok-2), var(--ok));
  color: #04231a;
  box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--ok) 60%, transparent), 0 0 0 5px var(--seal-ring);
}
.art-seal .ico { --ico-w: 23px }

.browse { margin-top: 2.4rem }
.browse-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem }
.browse-controls .check { margin-left: auto }
.browse-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.6rem 0 .9rem }
.browse-head h2 { font-size: 1.0625rem }
.browse-count { margin: 0; font-size: .8125rem; color: var(--ink-3) }

.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr)); gap: 1rem }

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.15rem 1.25rem 1.1rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--sh-sm);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .22s cubic-bezier(.2, .8, .25, 1), box-shadow .22s ease, border-color .22s ease;
  animation: rise .5s cubic-bezier(.2, .8, .25, 1) both;
}
.pcard[data-rise="1"] { animation-delay: .04s }
.pcard[data-rise="2"] { animation-delay: .08s }
.pcard[data-rise="3"] { animation-delay: .12s }
.pcard[data-rise="4"] { animation-delay: .16s }
.pcard[data-rise="5"] { animation-delay: .2s }
.pcard[data-rise="6"] { animation-delay: .24s }
.pcard[data-rise="7"] { animation-delay: .28s }
.pcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(22rem 12rem at 20% -20%, color-mix(in srgb, var(--h1) 24%, transparent), transparent 70%);
  transition: opacity .28s ease;
}
.pcard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--h1) 42%, var(--hair)); box-shadow: var(--sh-lg) }
.pcard:hover::before { opacity: 1 }
.pcard.curated { border-color: color-mix(in srgb, var(--ok) 26%, var(--hair)) }
.pcard-sheen {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--h1) 60%, transparent), transparent);
  opacity: .8;
}
.pcard-head { display: flex; align-items: center; gap: .8rem }
.pcard-names { min-width: 0 }
.pcard-name { display: flex; align-items: center; gap: .4rem; font-size: .96875rem; font-weight: 700; letter-spacing: -.015em }
.pcard-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pcard-slug { margin: .1rem 0 0; font-family: var(--mono); font-size: .71875rem; color: var(--ink-3) }
.pcard-desc {
  margin: 0;
  font-size: .84375rem;
  line-height: 1.5;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.pcard-desc.placeholder { color: var(--ink-3); font-style: italic }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--hair) }
.pcard-foot .tagrow { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap }
.pcard-foot .tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tag.muted { color: var(--ink-3); background: transparent; border-color: transparent }
.pcard-when { font-size: .71875rem; color: var(--ink-3); white-space: nowrap }
.pcard-when.stale { color: var(--warn) }

/* ----------------------------------------------------------------- project */

.backlink {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: 1.6rem;
  padding: .35rem .8rem .35rem .55rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink-2);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .16s ease, border-color .16s ease, transform .16s ease;
}
.backlink:hover { color: var(--ink); border-color: var(--brand); transform: translateX(-2px) }
.backlink .ico { --ico-w: 15px }

.applayout { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 1.4rem; align-items: start; margin-top: 1.1rem }
.appmain { min-width: 0; display: grid; gap: 1.2rem }

.apphero {
  position: relative;
  padding: 1.9rem 2rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  background: var(--panel-2);
  box-shadow: var(--sh), var(--sh-inset);
  overflow: hidden;
}
.apphero-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(20rem 11rem at 2% -30%, color-mix(in srgb, var(--h1) 16%, transparent), transparent 68%),
    radial-gradient(18rem 10rem at 100% -10%, color-mix(in srgb, var(--h2) 12%, transparent), transparent 70%);
}
.apphero-row { position: relative; display: flex; align-items: center; gap: 1.15rem }
.apphero-identity { min-width: 0 }
.apphero h1 { display: flex; align-items: center; gap: .55rem; font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.15rem) }
.apphero h1 > span { overflow-wrap: anywhere }
.apphero-pkg { margin: .3rem 0 0; font-family: var(--mono); font-size: .78125rem; color: var(--ink-3); overflow-wrap: break-word }
.apphero-desc { position: relative; margin: 1.1rem 0 0; max-width: 62ch; font-size: .96875rem; line-height: 1.6; color: var(--ink-2) }
.apphero-meta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.3rem }

.maintainer {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .5rem .4rem .75rem;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: var(--sh-sm);
}
.maintainer > .ico { --ico-w: 17px; color: var(--ok) }
.maintainer-text { display: grid; line-height: 1.25 }
.maintainer-role { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3) }
.maintainer-key { font-family: var(--mono); font-size: .78125rem; color: var(--ink) }

.statusboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem }
.statustile {
  position: relative;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel-2);
  overflow: hidden;
}
.statustile::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--tone, var(--ink-3)) }
.statustile.ok { --tone: linear-gradient(90deg, var(--ok), var(--ok-2)) }
.statustile.warn { --tone: linear-gradient(90deg, var(--warn), var(--warn-2)) }
.statustile.idle { --tone: linear-gradient(90deg, var(--ink-3), transparent) }
.statustile-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem }
.statustile-head .ico { --ico-w: 17px }
.statustile.ok .statustile-head .ico { color: var(--ok) }
.statustile.warn .statustile-head .ico { color: var(--warn) }
.statustile.idle .statustile-head .ico { color: var(--ink-3) }
.statustile-title { margin: 0; font-size: .84375rem; font-weight: 680 }
.statustile-body { margin: 0; font-size: .78125rem; line-height: 1.5; color: var(--ink-2) }

.stalebar {
  grid-column: 1 / -1;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .75rem .95rem;
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  font-size: .8125rem;
  color: var(--ink-2);
}
.stalebar .ico { --ico-w: 16px; margin-top: 2px; color: var(--warn) }
.stalebar p { margin: 0 }

.getpanel { position: sticky; top: 76px }
.getcard {
  position: relative;
  padding: 1.15rem;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--sh-lg), var(--sh-inset);
  overflow: hidden;
}
.getcard-glow {
  position: absolute;
  inset: -40% -20% auto;
  height: 220px;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 50%, #7c5cff2e, transparent 70%);
}
.getcard-head { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .9rem }
.getcard-title { margin: 0; font-size: .9375rem; font-weight: 700 }
.getcard-sub { margin: 0; font-size: .71875rem; color: var(--ink-3) }

.switcher {
  position: relative;
  display: grid;
  padding: 3px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel-3);
}
.switcher[data-count="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)) }
.switcher[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.switcher[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.switcher[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.switcher[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.switcher[data-count="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.switcher[data-count="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)) }
.switcher[data-count="8"] { grid-template-columns: repeat(8, minmax(0, 1fr)) }
.switcher-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  border-radius: 999px;
  background: var(--brand-grad);
  box-shadow: var(--sh-brand);
  transition: transform .32s cubic-bezier(.2, .8, .25, 1);
}
.switcher[data-count="1"] .switcher-thumb { width: calc((100% - 6px) / 1) }
.switcher[data-count="2"] .switcher-thumb { width: calc((100% - 6px) / 2) }
.switcher[data-count="3"] .switcher-thumb { width: calc((100% - 6px) / 3) }
.switcher[data-count="4"] .switcher-thumb { width: calc((100% - 6px) / 4) }
.switcher[data-count="5"] .switcher-thumb { width: calc((100% - 6px) / 5) }
.switcher[data-count="6"] .switcher-thumb { width: calc((100% - 6px) / 6) }
.switcher[data-count="7"] .switcher-thumb { width: calc((100% - 6px) / 7) }
.switcher[data-count="8"] .switcher-thumb { width: calc((100% - 6px) / 8) }
.switcher[data-active="1"] .switcher-thumb { transform: translateX(100%) }
.switcher[data-active="2"] .switcher-thumb { transform: translateX(200%) }
.switcher[data-active="3"] .switcher-thumb { transform: translateX(300%) }
.switcher[data-active="4"] .switcher-thumb { transform: translateX(400%) }
.switcher[data-active="5"] .switcher-thumb { transform: translateX(500%) }
.switcher[data-active="6"] .switcher-thumb { transform: translateX(600%) }
.switcher[data-active="7"] .switcher-thumb { transform: translateX(700%) }
.switch {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  height: 32px;
  min-width: 0;
  padding: 0 .4rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: .78125rem;
  font-weight: 650;
  cursor: pointer;
  transition: color .2s ease;
}
.switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.switch-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); transition: background .2s ease }
.switch[data-state="ready"] .switch-dot { background: var(--ok) }
.switch[data-state="empty"] .switch-dot { background: var(--ink-3); opacity: .5 }
.switch.active { color: #fff }
.switch.active .switch-dot { background: #ffffffd9 }
.switch:focus-visible { outline-offset: -2px }

.getcard-body { position: relative; margin-top: 1rem }
.channelpanel:focus { outline: none }
.versionrow { display: flex; align-items: baseline; gap: .55rem }
.version-number { font-size: 2rem; font-weight: 750; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1 }
.version-build { font-family: var(--mono); font-size: .71875rem; color: var(--ink-3) }
.versionfacts { display: flex; flex-wrap: wrap; align-items: center; margin: .5rem 0 1.1rem; font-size: .78125rem; color: var(--ink-2) }
.versionfacts > span + span::before { content: "·"; margin: 0 .45rem; color: var(--ink-3) }
.getcard-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem }
.textlink { display: inline-flex; align-items: center; gap: .35rem; font-size: .78125rem; font-weight: 600; color: var(--ink-2); text-decoration: none }
.textlink .ico { --ico-w: 14px }
.textlink:hover { color: var(--brand) }
.compat { display: inline-flex; align-items: center; gap: .35rem; font-size: .71875rem; color: var(--ink-3) }
.compat .ico { --ico-w: 14px }
.getcard-caveat { margin: .85rem 0 0; font-size: .71875rem; line-height: 1.5; color: var(--ink-3) }

.qrdevice {
  display: grid;
  justify-items: center;
  gap: .5rem;
  margin-top: 1.1rem;
  padding: .85rem .85rem .7rem;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel-3);
}
.qrscreen { padding: 9px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px -10px #00000059 }
.qr { display: block; width: 116px; height: 116px }
.qrhint { margin: 0; font-size: .6875rem; font-weight: 600; color: var(--ink-3) }

.nobuild { display: grid; justify-items: center; gap: .3rem; padding: 1.6rem .5rem; text-align: center }
.nobuild .ico { --ico-w: 26px; color: var(--ink-3); margin-bottom: .35rem }
.nobuild-title { margin: 0; font-size: .875rem; font-weight: 680 }
.nobuild-body { margin: 0; font-size: .78125rem; line-height: 1.5; color: var(--ink-2) }

.comparecard { padding: 1.2rem 1.3rem 1.1rem; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--panel-2); box-shadow: var(--sh-sm) }
.comparecard-head { margin-bottom: .85rem }
.comparecard-head h2 { font-size: .96875rem }
.comparecard-sub { margin: .2rem 0 0; font-size: .78125rem; color: var(--ink-3) }
.comparerows { display: grid; gap: .25rem }
.comparerow {
  display: grid;
  grid-template-columns: minmax(6rem, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .9fr);
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.comparerow:hover { background: var(--panel-3); border-color: var(--hair) }
.comparerow.active { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 32%, transparent) }
.comparerow-name { display: inline-flex; align-items: center; gap: .45rem; font-size: .84375rem; font-weight: 680 }
.comparerow-role { font-size: .75rem; color: var(--ink-3) }
.comparerow-version { font-family: var(--mono); font-size: .78125rem; font-weight: 600; color: var(--ink) }
.comparerow-version.muted { font-family: var(--font); font-weight: 500; color: var(--ink-3) }
.comparerow-size, .comparerow-when { font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums }

.disclosure { border: 1px solid var(--hair); border-radius: var(--r); background: var(--panel-2); overflow: hidden }
.disclosure summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .9rem 1.05rem;
  font-size: .875rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none }
.disclosure summary .ico { --ico-w: 16px; color: var(--ink-3) }
.disclosure summary .ico[data-ico="chev-down"] { margin-left: auto; transition: transform .22s ease }
.disclosure[open] summary .ico[data-ico="chev-down"] { transform: rotate(180deg) }
.disclosure summary:hover { background: var(--panel-3) }
.disclosure-note { margin-left: .1rem; font-size: .75rem; font-weight: 500; color: var(--ink-3) }
.disclosure-body { padding: 0 1.05rem 1.1rem }
.detail-note { margin: 1rem 0 0; font-size: .75rem; line-height: 1.55; color: var(--ink-3) }

.factgroup { margin-top: 1.1rem }
.factgroup-title { margin: 0 0 .3rem; font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3) }
.factrow { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-bottom: 1px solid var(--hair) }
.factrow:last-child { border-bottom: 0 }
.factrow-key { flex: 0 0 10.5rem; font-size: .8125rem; color: var(--ink-3) }
.factrow-value { flex: 1; min-width: 0; font-size: .8125rem; overflow-wrap: anywhere }
.factrow-value.mono { font-family: var(--mono); font-size: .75rem }

/* ------------------------------------------------------------------- trust */

.trusthead { max-width: 62ch; margin: 2.2rem 0 1.8rem }
.trusthead-lead { margin: .8rem 0 0; font-size: .96875rem; color: var(--ink-2) }

.chain {
  margin: 0;
  padding: 1.6rem 1.6rem 1.3rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  background: var(--panel-2);
  box-shadow: var(--sh), var(--sh-inset);
}
.chain-caption { margin: 0 0 1.5rem; font-size: .8125rem; font-weight: 650; color: var(--ink-3) }
.chainrail { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none }
.chainrail::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 10%;
  right: 10%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ok), var(--ok) 38%, var(--warn) 68%, var(--ink-3) 100%);
  opacity: .8;
}
.chainnode { position: relative; padding: 0 .6rem; text-align: center }
.chainnode-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto .75rem;
  border-radius: 16px;
  border: 1px solid var(--hair-2);
  background: var(--panel);
  color: var(--ink-3);
  box-shadow: var(--sh-sm);
}
.chainnode-dot .ico { --ico-w: 21px }
.chainnode.ok .chainnode-dot {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--ok-2), var(--ok));
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--ok) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--ok) 14%, transparent);
}
.chainnode.warn .chainnode-dot {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--warn-2), var(--warn));
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--warn) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--warn) 14%, transparent);
}
.chainnode-title { margin: 0 0 .2rem; font-size: .84375rem; font-weight: 680 }
.chainnode-body { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--ink-2) }
.chainlegend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--hair) }
.chainkey { display: inline-flex; align-items: center; gap: .4rem; font-size: .71875rem; font-weight: 600; color: var(--ink-3) }
.chainkey-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3) }
.chainkey.ok .chainkey-dot { background: var(--ok) }
.chainkey.warn .chainkey-dot { background: var(--warn) }

.stagegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem }
.stagecard {
  position: relative;
  padding: 1.3rem 1.35rem 1.4rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--panel-2);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2, .8, .25, 1), box-shadow .22s ease;
}
.stagecard:hover { transform: translateY(-3px); box-shadow: var(--sh) }
.stagecard-edge { position: absolute; inset: 0 0 auto; height: 3px; background: var(--tone) }
.stagecard.ok { --tone: linear-gradient(90deg, var(--ok), var(--ok-2)); --accent: var(--ok) }
.stagecard.warn { --tone: linear-gradient(90deg, var(--warn), var(--warn-2)); --accent: var(--warn) }
.stagecard.idle { --tone: linear-gradient(90deg, var(--ink-3), transparent); --accent: var(--ink-3) }
.stagecard-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .55rem }
.stagecard-head h2 { font-size: .96875rem }
.stagecard-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.stagecard-icon .ico { --ico-w: 18px }
.stagecard-lead { margin: 0 0 .9rem; font-size: .78125rem; color: var(--ink-3) }
.stagelist { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none }
.stagelist li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: .55rem; align-items: start; font-size: .8125rem; line-height: 1.45; color: var(--ink-2) }
.stagelist-mark { width: 6px; height: 6px; margin: .45rem 0 0 4px; border-radius: 50%; background: var(--accent); opacity: .7 }

.levels { margin-top: 2.6rem }
.levels h2 { margin-bottom: .9rem }
.levellist { display: grid; gap: .6rem }
.level {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel-2);
}
.level-badge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--hair); background: var(--panel); color: var(--ink-3) }
.level-badge .ico { --ico-w: 17px }
.level.ok .level-badge { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent) }
.level.warn .level-badge { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent) }
.level-title { margin: 0 0 .15rem; font-size: .875rem; font-weight: 680 }
.level-body { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--ink-2) }

.closing { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.2rem; align-items: start; margin-top: 2.6rem }
.closing-body h2 { margin-bottom: .7rem }
.closing-body p { max-width: 62ch; font-size: .90625rem; line-height: 1.65; color: var(--ink-2) }
.commandcard {
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--sh), var(--sh-inset);
}
.commandcard-title { margin: 0 0 .7rem; font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3) }
.commandline {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .55rem .55rem .85rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  background: var(--panel-3);
}
.commandline-text { flex: 1; min-width: 0; font-family: var(--mono); font-size: .8125rem; color: var(--ink); overflow-wrap: anywhere }
.commandcard-note { margin: .8rem 0 0; font-size: .78125rem; line-height: 1.5; color: var(--ink-2) }

/* ------------------------------------------------------------------ wizard */

.stepper {
  position: relative;
  margin: 1.6rem 0 1.6rem;
  padding: 1.35rem 1.5rem 1.2rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  background: var(--panel-2);
  box-shadow: var(--sh-sm), var(--sh-inset);
}
/* The rail lives inside each phase group so it always meets the dot centres. */
.stepper-track { display: none }
.stepper-fill { display: none }

.phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem 1.1rem }
.phase { min-width: 0 }
.phase-label { margin: 0 0 .55rem; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); transition: color .2s ease }
.phase.done .phase-label { color: var(--ink-2) }
.phase.current .phase-label {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.phase-nodes { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem }
/* the rail spans dot centre to dot centre, so it never crosses a label */
.phase-nodes::before {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  top: 1.05rem;
  height: 2px;
  border-radius: 2px;
  background: var(--hair-2);
}
.phase.done .phase-nodes::before, .phase.current .phase-nodes::before { background: var(--brand-grad); opacity: .9 }
.node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  padding: .15rem .2rem .3rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: center;
  cursor: pointer;
  transition: background .18s ease;
}
.node:hover { background: var(--panel-3) }
.node-dot {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  background: var(--bg);
  color: var(--ink-3);
  font-size: .71875rem;
  font-weight: 650;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.node-name { max-width: 100%; font-size: .71875rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s ease }
.node.done .node-dot { background: var(--brand-grad); border-color: transparent; color: #fff }
.node.done .node-name { color: var(--ink-2) }
.node.active .node-dot {
  background: var(--brand-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 4px #6d4bff2e, var(--sh-brand);
  transform: scale(1.08);
}
.node.active .node-name { color: var(--ink); font-weight: 650 }

.setuplayout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.4rem; align-items: start }
.setuppanel {
  min-width: 0;
  padding: 1.75rem 1.9rem 1.6rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  background: var(--panel-2);
  box-shadow: var(--sh), var(--sh-inset);
}
.setuphead { padding-bottom: 1.4rem; border-bottom: 1px solid var(--hair) }
.setuphead h1 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem) }
.setuphead-lead { margin: .55rem 0 0; max-width: 58ch; font-size: .90625rem; color: var(--ink-2) }

.group { padding: 1.7rem 0; border-bottom: 1px solid var(--hair) }
.group:last-child { border-bottom: 0; padding-bottom: .4rem }
.group-head h2 { font-size: .96875rem }
.group-head p { margin: .25rem 0 0; max-width: 58ch; font-size: .8125rem; color: var(--ink-2) }
.group-body { margin-top: 1.1rem }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; align-items: start }

.scopes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem }
.scope {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 1.1rem 1.2rem 1.25rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--panel-2);
  overflow: hidden;
}
.scope::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tone) }
.scope.prod { --tone: linear-gradient(90deg, var(--ok), var(--ok-2)); --dot: var(--ok) }
.scope.dev { --tone: linear-gradient(90deg, var(--warn), var(--warn-2)); --dot: var(--warn) }
.scope legend { float: left; width: 100%; padding: 0; margin: 0 0 1rem }
.scope::after { content: ""; display: table; clear: both }
.scope-head { display: flex; align-items: center; gap: .45rem }
.scope-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 20%, transparent) }
.scope-role { font-size: .875rem; font-weight: 700 }
.scope-hint { display: block; margin-top: .2rem; font-size: .75rem; color: var(--ink-3) }
.dropfield { margin-top: 1.2rem }
.file-result { margin: .5rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere }
.file-result.mono { font-family: var(--mono); font-size: .6875rem }

.rolegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem }
.rolecard { padding: 1.05rem 1.1rem 1.15rem; border: 1px solid var(--hair); border-radius: var(--r); background: var(--panel-2) }
.rolecard-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: .65rem;
  border-radius: 11px;
  background: var(--brand-soft);
  border: 1px solid var(--hair);
  color: var(--brand);
}
.rolecard-icon .ico { --ico-w: 17px }
.rolecard-title { margin: 0 0 .2rem; font-size: .84375rem; font-weight: 680 }
.rolecard-body { margin: 0; font-size: .78125rem; line-height: 1.5; color: var(--ink-2) }

.policydoc-summary { margin-bottom: 1rem; font-size: .875rem; line-height: 1.55; color: var(--ink-2) }
.policydoc-summary p { margin: 0 0 .25rem }
.policydoc-summary p:first-child { font-weight: 680; color: var(--ink) }
.policyscope {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-top: .35rem;
  padding: .55rem .75rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  background: var(--panel-3);
  font-family: var(--mono);
  font-size: .71875rem;
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.policyscope-dot { flex: none; width: 6px; height: 6px; margin-top: .45rem; border-radius: 50%; background: var(--brand) }

.terminal { border: 1px solid var(--hair); border-radius: var(--r); background: var(--panel-3); overflow: hidden }
.terminal-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-bottom: 1px solid var(--hair); background: var(--panel-2) }
.terminal-dots { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #ff6b6b; box-shadow: 14px 0 0 #ffbe4d, 28px 0 0 #35d07f; margin-right: 28px }
.terminal-title { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) }
.terminal-line { display: flex; align-items: center; gap: .55rem; padding: .5rem .55rem .5rem .9rem; border-top: 1px solid var(--hair) }
.terminal-line:first-of-type { border-top: 0 }
.terminal-prompt { color: var(--brand); font-family: var(--mono); font-size: .8125rem; font-weight: 700 }
.terminal-line code { flex: 1; min-width: 0; font-family: var(--mono); font-size: .75rem; color: var(--ink-2); overflow-wrap: anywhere }

.previewpanel { position: sticky; top: 76px }
.preview {
  padding: 1.2rem 1.25rem 1.3rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--panel-2);
  box-shadow: var(--sh-sm), var(--sh-inset);
}
.preview-title { margin: 0 0 .8rem; font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3) }
.preview-card { animation: none; box-shadow: var(--sh-sm) }
.preview-card:hover { transform: none }
.preview-note { margin: .9rem 0 0; font-size: .6875rem; line-height: 1.5; color: var(--ink-3) }
.readiness { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--hair) }
.readiness-title { margin: 0 0 .6rem; font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3) }
.readylist { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none }
.readylist li { display: flex; align-items: center; gap: .55rem; font-size: .8125rem; color: var(--ink-3) }
.readylist li.done { color: var(--ink) }
.readymark {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  background: var(--panel-3);
  transition: background .2s ease, border-color .2s ease;
}
.readylist li.done .readymark {
  border-color: transparent;
  background: linear-gradient(140deg, var(--ok-2), var(--ok));
  -webkit-mask: none;
  mask: none;
  position: relative;
}
.readylist li.done .readymark::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #04231a;
  -webkit-mask: var(--i-check) center / 10px no-repeat;
  mask: var(--i-check) center / 10px no-repeat;
}

.completion { margin-top: 1.6rem; padding: 1.2rem 1.35rem 1.3rem; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--panel-2) }
.completion:focus { outline: none }
.completion.good { border-color: color-mix(in srgb, var(--ok) 32%, transparent); background: color-mix(in srgb, var(--ok) 7%, var(--panel-2)) }
.completion.bad { border-color: color-mix(in srgb, var(--bad) 32%, transparent); background: color-mix(in srgb, var(--bad) 7%, var(--panel-2)) }
.completion-head { display: flex; align-items: center; gap: .65rem }
.completion-head h2 { font-size: 1rem }
.completion-badge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff }
.completion.good .completion-badge { background: linear-gradient(140deg, var(--ok-2), var(--ok)); color: #04231a }
.completion.bad .completion-badge { background: linear-gradient(140deg, var(--bad-2), var(--bad)); color: #fff }
.completion-badge .ico { --ico-w: 18px }
.completion-lead { margin: .5rem 0 0; font-size: .84375rem; color: var(--ink-2) }
.checklist { display: grid; gap: .45rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .84375rem }
.checklist li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: .6rem; align-items: start; line-height: 1.5 }
.checkmark { width: 16px; height: 16px; margin-top: .12rem; border-radius: 50%; background: var(--mark, var(--ink-3)); position: relative }
.completion.good .checkmark { background: color-mix(in srgb, var(--ok) 22%, transparent) }
.completion.bad .checkmark { background: color-mix(in srgb, var(--bad) 22%, transparent) }
.checkmark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ok);
  -webkit-mask: var(--i-check) center / 10px no-repeat;
  mask: var(--i-check) center / 10px no-repeat;
}
.completion.bad .checkmark::after { background: var(--bad); -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); -webkit-mask-size: 11px; mask-size: 11px }

.setupfoot { display: flex; align-items: center; gap: .7rem; margin-top: 2rem; padding-top: 1.35rem; border-top: 1px solid var(--hair) }
.setupfoot-note { margin: 0 auto; font-size: .8125rem; color: var(--ink-3) }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .applayout { grid-template-columns: minmax(0, 1fr) 320px }
  .setuplayout { grid-template-columns: minmax(0, 1fr) 280px }
  .closing { grid-template-columns: minmax(0, 1fr) 300px }
}

@media (max-width: 940px) {
  .masthead { grid-template-columns: minmax(0, 1fr); padding: 1.75rem 1.6rem }
  .art { display: none }
  .applayout { grid-template-columns: minmax(0, 1fr) }
  .getpanel { position: static }
  .comparerow { grid-template-columns: minmax(5rem, 1fr) minmax(0, 1fr) minmax(0, 1fr); row-gap: .2rem }
  .comparerow-size, .comparerow-when { grid-column: span 1 }
  .setuplayout { grid-template-columns: minmax(0, 1fr) }
  .previewpanel { position: static }
  .preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.4rem; align-items: start }
  .preview-title { grid-column: 1 / -1; margin-bottom: 0 }
  .readiness { margin-top: 0; padding-top: 0; border-top: 0 }
  .preview-note { grid-column: 1 / -1; margin-top: .2rem }
  .stagegrid { grid-template-columns: minmax(0, 1fr) }
  .closing { grid-template-columns: minmax(0, 1fr) }
  .chainrail { grid-template-columns: minmax(0, 1fr); gap: 1.1rem }
  .chainrail::before { top: 6px; bottom: 6px; left: 23px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--ok), var(--ok) 38%, var(--warn) 68%, var(--ink-3) 100%) }
  .chainnode { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 .9rem; padding: 0; text-align: left }
  .chainnode-dot { grid-row: span 2; margin: 0 }
  .statusboard { grid-template-columns: minmax(0, 1fr) }
  .scopes { grid-template-columns: minmax(0, 1fr) }
  .rolegrid { grid-template-columns: minmax(0, 1fr) }
  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .5rem }
  .stepper-track { display: none }
}

@media (max-width: 760px) {
  main { padding-bottom: 6.5rem }
  .topbar-inner { height: 56px }
  .brand-name { font-size: .875rem }
  .nav {
    position: fixed;
    left: .6rem;
    right: .6rem;
    bottom: .6rem;
    bottom: max(.6rem, env(safe-area-inset-bottom));
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .2rem;
    margin: 0;
    padding: .35rem;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--sh-lg);
  }
  .nav button { flex-direction: column; gap: .2rem; height: 50px; padding: 0; border-radius: var(--r-sm); font-size: .6875rem }
  .nav button .ico { --ico-w: 19px }
  .nav-label { font-size: .65rem; font-weight: 650 }

  .masthead { padding: 1.4rem 1.2rem; border-radius: var(--r-lg) }
  .masthead h1 { font-size: 1.5rem; max-width: none }
  .masthead-lead { font-size: .875rem }
  .proofrow { gap: .3rem }
  .proof { padding: .28rem .55rem; font-size: .6875rem }
  .searchrow { flex-direction: column; margin-top: 1.2rem }
  .searchrow .btn { width: 100%; height: 46px }
  .browse-controls { gap: .5rem }
  .browse-controls .pillgroup { width: 100%; display: flex; flex-wrap: wrap }
  .browse-controls .pill { flex: 1 1 auto; padding: 0 .55rem; font-size: .6875rem; white-space: nowrap }
  .browse-controls .minifield { flex: 1 1 100%; justify-content: space-between }
  .browse-controls .minifield select { flex: 1; width: auto; min-width: 0 }
  .browse-controls .check { margin-left: 0; width: 100% }
  .cardgrid { grid-template-columns: minmax(0, 1fr) }
  .apphero-meta .tag:nth-child(n+4) { display: none }

  .apphero { padding: 1.4rem 1.25rem; border-radius: var(--r-lg) }
  .apphero-row { gap: .9rem }
  .mono.large { width: 62px; height: 62px; border-radius: 20px }
  .mono.large .mono-letters { font-size: 1.3rem }
  .apphero h1 { font-size: 1.5rem }
  .maintainer { width: 100% }
  .getcard { border-radius: var(--r-lg) }
  .factrow { flex-wrap: wrap; gap: .1rem .7rem }
  .factrow-key { flex: 1 0 100%; font-size: .71875rem }
  .factrow-value { flex: 1 1 auto }
  .factrow .copy { margin-left: auto }

  .preview { grid-template-columns: minmax(0, 1fr) }
  .setuppanel { padding: 1.35rem 1.15rem 1.3rem; border-radius: var(--r-lg) }
  .stepper { padding: 1.1rem 1.15rem; border-radius: var(--r-lg) }
  .phases { grid-template-columns: minmax(0, 1fr); gap: .2rem }
  .phase { display: none }
  .phase.current { display: block }
  .phase.current .phase-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .pair { grid-template-columns: minmax(0, 1fr) }
  .setupfoot { flex-wrap: wrap }
  .setupfoot .btn { flex: 1 }
  .setupfoot-note { order: 3; width: 100%; margin: .3rem 0 0; text-align: center }
  .actions .btn { flex: 1 1 auto }
  .chain { padding: 1.25rem 1.15rem 1.1rem; border-radius: var(--r-lg) }
  .level { padding: .85rem .95rem }
  .closing-body p { font-size: .875rem }
}

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