/* Visual foundation adapted from the user-supplied Varin Extensions reference.
 * See docs/web-design.md for provenance and the production adaptations. */


/* ═══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS (Direct port of Youzini-afk/Varin-web src/styles/tokens.css)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light dark;
  --paper: light-dark(#fcfbf9, #161616);
  --paper-deep: light-dark(#efefe8, #1e1e1d);
  --card: light-dark(#fffefd, #1c1c1c);
  --elev: light-dark(#ffffff, #242424);
  --bubble: light-dark(#f0efed, #262626);
  --ink: light-dark(#1b1a18, #ededed);
  --ink-hover: light-dark(#393632, #ffffff);
  --on-ink: light-dark(#fcfbf9, #141414);
  --muted: light-dark(#615e59, #a5a5a5);
  --sage: light-dark(#77837f, #8e9694);
  /* Keep reference sage for decoration; small text needs AA contrast. */
  --sage-text: light-dark(#626e69, #8e9694);
  --brand-a: light-dark(#20272a, #eeeee8);
  --brand-b: light-dark(#77837f, #8e9694);

  --line: light-dark(rgba(27, 26, 24, 0.15), rgba(255, 255, 255, 0.14));
  --hair: light-dark(rgba(24, 22, 19, 0.08), rgba(255, 255, 255, 0.08));
  --face: light-dark(rgba(27, 26, 24, 0.12), rgba(255, 255, 255, 0.13));
  --cell: light-dark(rgba(27, 26, 24, 0.38), rgba(255, 255, 255, 0.34));
  --tile-strong: light-dark(rgba(119, 131, 127, 0.24), rgba(142, 150, 148, 0.26));
  --hl: light-dark(rgba(119, 131, 127, 0.2), rgba(142, 150, 148, 0.24));
  --glass: light-dark(rgba(252, 251, 249, 0.78), rgba(22, 22, 22, 0.72));
  --shadow: light-dark(rgba(24, 22, 19, 0.32), rgba(0, 0, 0, 0.7));
  --focus: light-dark(rgba(27, 26, 24, 0.55), rgba(237, 237, 237, 0.6));

  --band: light-dark(#20272a, #232a2c);
  --on-band: #eeeee8;
  --code: light-dark(#1b1a18, #0e0e0e);
  --ok: light-dark(#5f8d3d, #76ad4f);
  --warn: light-dark(#8d6c15, #c67f13);
  --err: light-dark(#b7493f, #da5b4a);

  --scene-line: var(--line);
  --scene-pulse: color-mix(in srgb, var(--ink) 7%, var(--paper));

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 170ms;
  --t-normal: 280ms;
  --t-slow: 520ms;

  --sans: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono",
    Menlo, monospace;

  --page: 1200px;
  --gutter: clamp(18px, 3vw, 28px);
  --radius-card: 20px;
}

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

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

/* ═══════════════════════════════════════════════════════════════════════════
   2. BASE & PAPER GRAIN (Direct port of Varin-web src/styles/base.css)
   ═══════════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  scroll-padding-top: 72px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}

/* A barely visible paper grain. Pure texture, no pattern. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("/grain.svg");
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
canvas {
  display: block;
}

svg {
  overflow: visible;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--hl);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Brand Mark */
.mark-a {
  fill: var(--mark-a, var(--brand-a));
}

.mark-b {
  fill: var(--mark-b, var(--brand-b));
}

.mark.mono .mark-b {
  fill: var(--mark-a, var(--brand-a));
  opacity: 0.6;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--t-normal) var(--ease),
    background-color var(--t-normal) var(--ease),
    box-shadow var(--t-normal) var(--ease);
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--ink);
  color: var(--on-ink);
}

.btn-primary:hover {
  background: var(--ink-hover);
}

.btn-ghost {
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line);
  backdrop-filter: blur(10px);
}

.btn-ghost:hover {
  box-shadow: inset 0 0 0 1px var(--ink);
}

.btn-sm {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
}

.card {
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hair);
}

.rule {
  max-width: calc(var(--page) - 2 * var(--gutter));
  height: 1px;
  margin: 0 auto;
  background: var(--hair);
}

.kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-text);
}

.feats {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.feats li {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.feats li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 2px;
  background: var(--sage);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. NAV BAR (Direct port of Varin-web src/components/Nav.astro)
   ═══════════════════════════════════════════════════════════════════════════ */
.v-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 13px var(--gutter);
}

.v-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  box-shadow: 0 1px 0 var(--hair);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}

.v-nav.is-scrolled::before {
  opacity: 1;
}

.v-brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
}

.v-brand .brand-mark {
  width: 22px;
  height: 22px;
  transition: transform var(--t-slow) var(--ease);
}

.v-brand:hover .brand-mark {
  transform: rotate(-90deg);
}

.v-links {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13.5px;
}

.v-links button {
  position: relative;
  padding: 7px 12px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.v-links button:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.v-links button::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 14px;
  height: 2px;
  margin-left: -7px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--t-normal) var(--ease);
}

.v-links button[aria-current="true"] {
  color: var(--ink);
  font-weight: 500;
}

.v-links button[aria-current="true"]::after {
  transform: scaleX(1);
}

.v-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hair);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.icon-btn:hover {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1080px) {
  .v-nav {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .v-links {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. SCENE & WIREFRAME CUBE (Direct port of Varin-web src/styles/scene.css)
   ═══════════════════════════════════════════════════════════════════════════ */
@property --tilt {
  syntax: '<angle>';
  inherits: true;
  initial-value: 58deg;
}

.scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene-floor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene-mask {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(
    ellipse var(--mask-w, 72%) var(--mask-h, 72%) at var(--mask-x, 50%) var(--mask-y, 58%),
    #000 22%,
    rgba(0, 0, 0, 0.55) 58%,
    transparent 92%
  );
  mask-image: radial-gradient(
    ellipse var(--mask-w, 72%) var(--mask-h, 72%) at var(--mask-x, 50%) var(--mask-y, 58%),
    #000 22%,
    rgba(0, 0, 0, 0.55) 58%,
    transparent 92%
  );
}

.horizon {
  position: absolute;
  left: var(--origin-x, 50%);
  top: var(--origin-y, 58%);
  width: 0;
  height: 0;
  translate: 0 var(--lift, 0px);
  scale: var(--scene-scale, 0.78);
}

.camera {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  transform-style: preserve-3d;
  transform: perspective(1800px) rotateX(var(--tilt, 58deg)) rotateZ(45deg);
}

.contact {
  position: absolute;
  left: -48px;
  top: -48px;
  width: 96px;
  height: 96px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink);
  opacity: calc(var(--contact, 0.3) * var(--contact-alive, 1));
}

.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tile-strong);
  opacity: var(--contact-lit, 0);
}

.scene.is-idle .contact {
  animation: contact-breathe 1.8s ease-in-out infinite;
}

@keyframes contact-breathe {
  0%, 100% { opacity: calc(0.22 * var(--contact-alive, 1)); }
  50% { opacity: calc(0.6 * var(--contact-alive, 1)); }
}

.markwrap {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  translate: 0 0 var(--drop, 0px);
  animation: land 1.2s 0.1s var(--ease) both;
}

@keyframes land {
  from { transform: translateZ(180px); }
  to { transform: none; }
}

.mark3d {
  position: absolute;
  left: -48px;
  top: -48px;
  width: 96px;
  height: 96px;
  transform-style: preserve-3d;
  transform: translateZ(var(--press, 48px));
}

.face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: repeat(4, 1fr) / repeat(4, 1fr);
  backface-visibility: hidden;
  background-color: var(--paper);
  background-image: linear-gradient(var(--face), var(--face));
  box-shadow: inset 0 0 0 1px var(--ink);
  opacity: var(--faces, 1);
}

.face.top {
  display: block;
  transform: translateZ(48px);
}

.face.fx {
  transform: rotateY(90deg) translateZ(48px);
}

.face.fy {
  transform: rotateX(-90deg) translateZ(48px);
}

.face i {
  background: var(--cell);
  opacity: var(--o);
}

.glyph {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--ink);
}

.scene.is-idle .glyph {
  animation: glyph 1.8s ease-in-out infinite;
}

@keyframes glyph {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 4px var(--ink)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. 3-COLUMN EXTENSION MARKETPLACE GRID, TABS & CARDS (Calm Varin-web Craft)
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes rise-blur {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes svg-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.rise-in {
  animation: rise-blur 680ms var(--ease) var(--d, 0ms) both;
}

/* Unified, low-contrast filter bar */
.market-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}

.wb-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--paper-deep);
  box-shadow: inset 0 0 0 1px var(--hair);
}

.wb-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.wb-tab:hover {
  color: var(--ink);
}

.wb-tab.is-active {
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  box-shadow:
    0 1px 3px rgba(24, 22, 19, 0.06),
    inset 0 0 0 1px var(--hair);
}

.wb-tab .count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--sage-text);
}

/* Segmented sub-pill group */
.seg-group {
  display: inline-flex;
  padding: 3px;
  border-radius: 11px;
  background: var(--paper-deep);
  box-shadow: inset 0 0 0 1px var(--hair);
}

.seg-btn {
  padding: 5px 10px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.seg-btn:hover {
  color: var(--ink);
}

.seg-btn.is-active {
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  box-shadow:
    0 1px 2px rgba(24, 22, 19, 0.05),
    inset 0 0 0 1px var(--hair);
}

/* Search Box */
.market-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.market-search input {
  width: 184px;
  height: 34px;
  padding: 0 26px 0 30px;
  border-radius: 11px;
  border: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: 12.5px;
  outline: none;
  transition: box-shadow var(--t-fast) var(--ease), width var(--t-normal) var(--ease);
}

.market-search input:focus {
  width: 224px;
  box-shadow: inset 0 0 0 1.5px var(--sage);
}

.market-search .s-ico {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--sage-text);
  pointer-events: none;
}

/* 3-Column Breathable Grid */
.market-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1040px) {
  .market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 660px) {
  .market-grid {
    grid-template-columns: 1fr;
  }
}

/* Calm, low-density Card inspired directly by Varin-web Modes.astro */
.market-card {
  position: relative;
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hair);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  animation: rise-blur 560ms var(--ease) var(--d, 0ms) both;
  transition:
    transform var(--t-normal) var(--ease),
    background-color var(--t-normal) var(--ease),
    box-shadow var(--t-normal) var(--ease);
}

.market-card:hover {
  background: var(--elev);
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 22px 44px -28px var(--shadow);
}

/* Icon box with soft sage tint on hover (never harsh black in light mode) */
.ci {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--paper-deep);
  color: var(--ink);
  flex-shrink: 0;
  transition:
    background-color var(--t-normal) var(--ease),
    transform var(--t-normal) var(--ease);
}

.market-card:hover .ci {
  background: var(--hl);
  transform: scale(1.04);
}

.ci svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ci [pathLength] {
  stroke-dasharray: 1;
}

.market-card:hover .ci [pathLength] {
  animation: svg-draw 0.85s var(--ease) both;
}

/* Card Typography */
.market-card h3 {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.3;
}

.market-card .pkg-id {
  margin: -8px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--sage-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-card .desc-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Quiet bottom install bar matching Varin-web blockquote / bubble */
.market-card .install-bar {
  margin-top: auto;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--bubble);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.market-card:hover .install-bar {
  background: var(--paper-deep);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair);
}

.market-card .install-bar code {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-card .install-btn {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 6px;
  border: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hair);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.market-card .install-btn:hover {
  background: var(--hl);
}

.market-card .install-btn.is-copied {
  background: color-mix(in srgb, var(--ok) 15%, var(--card));
  color: var(--ok);
}

.feats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.feats li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--muted);
}

.feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--sage);
}

/* Modal Backdrop & Dialog */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ink) 28%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
  animation: fade-in 200ms var(--ease) both;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-dialog {
  width: min(980px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-radius: 24px;
  background: var(--paper);
  box-shadow:
    0 0 0 1px var(--line),
    0 32px 80px -28px var(--shadow);
  padding: 0;
  animation: modal-up 280ms var(--ease) both;
}

@keyframes modal-up {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. ANATOMY, LAYERS & VIZ (Direct port of Extensions.astro)
   ═══════════════════════════════════════════════════════════════════════════ */
.anatomy {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 16px;
}

@media (max-width: 860px) {
  .anatomy {
    grid-template-columns: 1fr;
  }
}

.anatomy .files {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.anatomy .f-head {
  padding: 4px 10px 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
  margin-bottom: 4px;
}

.anatomy .f {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}

.anatomy .f:hover {
  background: var(--hl);
}

.anatomy .f svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.anatomy .f b {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.anatomy .f p {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

.anatomy .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.anatomy .pills span {
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--paper-deep);
  font-size: 11.5px;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.anatomy .pills span:hover,
.anatomy[data-active="id"] .pills span[data-g="id"],
.anatomy[data-active="entry"] .pills span[data-g="entry"],
.anatomy[data-active="provides"] .pills span[data-g="provides"],
.anatomy[data-active="contrib"] .pills span[data-g="contrib"] {
  background: var(--sage);
  color: #fff;
}

.code {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--code);
  color: #ededed;
  box-shadow: 0 26px 60px -36px var(--shadow);
}

.code .bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.code .tab {
  padding: 5px 11px;
  border-radius: 7px;
  background: transparent;
  font-family: var(--mono);
  font-size: 11.5px;
  color: #a5a5a5;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.code .tab:hover {
  color: #ededed;
}

.code .tab.is-on {
  background: rgba(255, 255, 255, 0.11);
  color: #ededed;
}

.code pre {
  margin: 0;
  padding: 14px 0;
  overflow: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.72;
  white-space: normal;
  font-variant-ligatures: none;
}

.code .line {
  display: block;
  padding: 0 18px;
  white-space: pre;
}

.code .grp {
  border-left: 2px solid transparent;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.code .grp.is-hi {
  background: rgba(142, 150, 148, 0.18);
  border-left-color: #9ec3b0;
}

.code .k { color: #6fbf73; }
.code .s { color: #d58373; }
.code .n { color: #79b8c9; }

.code .hint {
  margin: auto 0 0;
  padding: 10px 18px 14px;
  font-size: 11.5px;
  color: #8b8b8b;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Layers & Wire Packet */
.layers {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 16px;
}

@media (max-width: 1080px) {
  .layers {
    grid-template-columns: 1fr;
  }
}

.realms {
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.realm {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hair);
}

.realm h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.realm h4 small {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sage-text);
}

.realm p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.chips span {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--paper-deep);
  font-size: 11px;
}

.wire {
  position: absolute;
  left: 86px;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: var(--line);
}

.wire i {
  position: absolute;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--sage);
  animation: packet 4.8s var(--ease) infinite;
}

.wire i + i {
  animation-delay: 2.4s;
}

@keyframes packet {
  0% { top: 0; opacity: 0; }
  8% { opacity: 1; }
  45% { top: 100%; opacity: 1; }
  50%, 100% { top: 100%; opacity: 0; }
}

.points {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.points h4 {
  margin: 0 0 9px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
}

.points h4 span {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cloud button {
  padding: 4px 9px;
  border: 0;
  border-radius: 8px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 12px;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.cloud button:hover,
.cloud button.is-active {
  background: var(--hl);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--sage);
}

.cloud code {
  font-family: var(--mono);
  font-size: 11.5px;
}

/* 6 Micro-Visualizations (.whys & .viz from Extensions.astro) */
.whys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1080px) {
  .whys {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .whys {
    grid-template-columns: 1fr;
  }
  .realm {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .wire {
    display: none;
  }
}

.why {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.why h4 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.why p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

.viz {
  position: relative;
  height: 96px;
  margin-bottom: 6px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hair);
}

.v-doc {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 54px;
  height: 68px;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 9px;
  border-radius: 6px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}

.v-doc i {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}

.v-doc i:nth-child(2) { width: 70%; }
.v-doc i:nth-child(4) { width: 55%; }

.v-doc::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 0;
  height: 2px;
  background: var(--sage);
  box-shadow: 0 0 10px var(--sage);
  animation: scan 3s var(--ease) infinite;
}

@keyframes scan {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  80% { top: 100%; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.v-grants {
  position: absolute;
  inset: 12px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  font-size: 11.5px;
}

.v-grants div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sw2 {
  position: relative;
  width: 26px;
  height: 15px;
  border-radius: 999px;
  background: var(--ink);
}

.sw2::after {
  content: "";
  position: absolute;
  right: 2.5px;
  top: 2.5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper);
}

.pending {
  color: var(--warn);
  animation: blink 1.6s steps(1) infinite;
}

.pending .sw2 {
  background: var(--line);
}

.pending .sw2::after {
  right: auto;
  left: 2.5px;
}

@keyframes blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.35; }
}

.v-atomic {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.v-atomic i {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  background: var(--ink);
  animation: 4.8s var(--ease) infinite both;
}

.v-atomic i:nth-child(1) { animation-name: stage1; }
.v-atomic i:nth-child(2) { animation-name: stage2; }
.v-atomic i:nth-child(3) { animation-name: stage3; }

@keyframes stage1 {
  0% { opacity: 0; transform: translateY(8px); background: transparent; box-shadow: inset 0 0 0 1.5px var(--sage); }
  8%, 52% { opacity: 1; transform: none; background: transparent; box-shadow: inset 0 0 0 1.5px var(--sage); }
  58%, 90% { opacity: 1; background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
  100% { opacity: 0; }
}

@keyframes stage2 {
  0%, 14% { opacity: 0; transform: translateY(8px); background: transparent; box-shadow: inset 0 0 0 1.5px var(--sage); }
  22%, 52% { opacity: 1; transform: none; background: transparent; box-shadow: inset 0 0 0 1.5px var(--sage); }
  58%, 90% { opacity: 1; background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
  100% { opacity: 0; }
}

@keyframes stage3 {
  0%, 28% { opacity: 0; transform: translateY(8px); background: transparent; box-shadow: inset 0 0 0 1.5px var(--sage); }
  36%, 52% { opacity: 1; transform: none; background: transparent; box-shadow: inset 0 0 0 1.5px var(--sage); }
  58%, 90% { opacity: 1; background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
  100% { opacity: 0; }
}

.v-lanes {
  position: absolute;
  inset: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}

.v-lanes div {
  position: relative;
  height: 1px;
  margin-left: 26px;
  background: var(--line);
}

.v-lanes div::before {
  content: attr(data-v);
  position: absolute;
  left: -26px;
  top: -7px;
}

.v-lanes div i {
  position: absolute;
  top: -4px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
}

.v1 i {
  animation: run-long 6s linear infinite;
}

.v2 i {
  background: var(--sage);
  animation: run-new 6s linear infinite;
}

.v2 i + i {
  animation-delay: 1s;
}

@keyframes run-long {
  0% { left: 0; opacity: 1; }
  85% { left: calc(100% - 9px); opacity: 1; }
  92%, 100% { left: calc(100% - 9px); opacity: 0; }
}

@keyframes run-new {
  0%, 30% { left: 0; opacity: 0; }
  34% { opacity: 1; }
  70% { left: calc(100% - 9px); opacity: 1; }
  75%, 100% { left: calc(100% - 9px); opacity: 0; }
}

.v-procs {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.v-procs i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}

.v-procs i::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}

.crash {
  animation: crash 5s var(--ease) infinite;
}

.v-procs .crash::after {
  animation: crash-dot 5s steps(1) infinite;
}

@keyframes crash {
  0%, 30% { transform: none; opacity: 1; }
  34% { transform: translateX(-2px); }
  38% { transform: translateX(2px); }
  42% { transform: none; opacity: 0.35; }
  70% { opacity: 0.35; transform: scale(0.9); }
  80%, 100% { opacity: 1; transform: none; }
}

@keyframes crash-dot {
  0%, 34% { background: var(--ok); }
  35%, 75% { background: var(--err); }
  76%, 100% { background: var(--ok); }
}

.v-agent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 11.5px;
}

.pkg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  animation: drop-in 6s var(--ease) infinite;
}

@keyframes drop-in {
  0% { transform: translateY(-40px); opacity: 0; }
  12%, 100% { transform: none; opacity: 1; }
}

.tg {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--line);
  animation: approve 6s var(--ease) infinite;
}

.tg::after {
  content: "";
  position: absolute;
  left: 2.5px;
  top: 2.5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  animation: approve-dot 6s var(--ease) infinite;
}

@keyframes approve {
  0%, 62% { background: var(--line); }
  68%, 100% { background: var(--ink); }
}

@keyframes approve-dot {
  0%, 62% { transform: none; }
  68%, 100% { transform: translateX(12px); }
}

.lbl {
  position: relative;
  min-width: 9em;
  height: 16px;
}

.lbl span {
  position: absolute;
  inset: 0;
  white-space: nowrap;
}

.off {
  color: var(--warn);
  animation: lbl-off 6s steps(1) infinite;
}

.onl {
  color: var(--ok);
  opacity: 0;
  animation: lbl-on 6s steps(1) infinite;
}

@keyframes lbl-off {
  0%, 65% { opacity: 1; }
  66%, 100% { opacity: 0; }
}

@keyframes lbl-on {
  0%, 65% { opacity: 0; }
  66%, 100% { opacity: 1; }
}

.foot {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}

.foot span {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--ink);
}

.foot em {
  font-style: normal;
  margin: 0 6px;
}

.foot a {
  color: var(--ink);
  font-weight: 500;
  margin-right: 8px;
  transition: color var(--t-fast) var(--ease);
}

.foot a:hover {
  color: var(--sage-text);
}

/* Production structure. Reference geometry above is intentionally retained. */
h1,h2,h3,h4,p,pre,figure,blockquote,dl,dd { margin: 0; }
body { line-height: 1.5; }
[hidden] { display: none !important; }
button,input,select,textarea { font: inherit; }
input,textarea { color: var(--ink); }
button { cursor: pointer; }
code,kbd { font-family: var(--mono); }
a:hover { color: var(--sage-text); }
body.dialog-open { overflow: hidden; }
.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; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--on-ink); }
.skip-link:focus { top: 12px; }
.section-wrap { max-width: var(--page); padding-inline: var(--gutter); margin-inline: auto; }
.brand-suffix { font-size: 13px; font-weight: 500; color: var(--sage-text); padding-left: 9px; border-left: 1px solid var(--line); }
.v-links a { padding: 7px 12px; border-radius: 9px; color: var(--muted); white-space: nowrap; }
.v-links a:hover { color: var(--ink); background: color-mix(in srgb,var(--ink) 6%,transparent); }
.search-shortcut { width: auto; padding-inline: 10px; gap: 6px; display: inline-flex; font-size: 12.5px; }
.search-shortcut kbd { font-size: 11px; opacity: .75; }
.theme-sun { display: none; }
#theme-toggle.is-dark .theme-moon { display: none; }
#theme-toggle.is-dark .theme-sun { display: block; }
.mobile-menu-toggle { display: none; }
.mobile-menu { position: absolute; top: 60px; left: var(--gutter); right: var(--gutter); padding: 10px; box-shadow: 0 18px 40px -20px var(--shadow),inset 0 0 0 1px var(--line); }
.mobile-menu a { display: block; padding: 11px 14px; font-size: 13px; border-radius: 9px; }
.mobile-menu a:hover { background: var(--paper-deep); }
.market-hero { position: relative; padding-top: 104px; padding-bottom: 44px; overflow: hidden; }
.hero-content { position: relative; z-index: 2; padding-top: 8px; }
.hero-content h1 { margin: 10px 0 12px; font-size: clamp(30px,3.4vw,42px); line-height: 1.18; letter-spacing: -.02em; font-weight: 600; animation-delay: 70ms; }
.hero-content h1 span { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; letter-spacing: -.005em; color: var(--sage-text); }
.hero-content .desc { max-width: 38em; font-size: 16px; line-height: 1.5; animation-delay: 140ms; }
.hero-content .desc code { font-size: 13.5px; color: var(--ink); }
.market-hero .scene { --mask-w: 46%; --mask-h: 96%; --origin-x: 78%; --origin-y: 60%; --mask-x: 78%; --mask-y: 60%; }
.hero-melt { position: absolute; inset: auto 0 0; height: 28%; z-index: 1; pointer-events: none; background: linear-gradient(transparent,var(--paper)); }
.camera { transition: transform 320ms var(--ease); }
/* Same independent 4×4 wall cells as the supplied Cube3D component. */
.face.fx i:nth-child(1) { --o:.3; }.face.fx i:nth-child(2) { --o:.15; }.face.fx i:nth-child(3) { --o:.45; }.face.fx i:nth-child(4) { --o:.25; }.face.fx i:nth-child(5) { --o:.5; }.face.fx i:nth-child(6) { --o:.35; }.face.fx i:nth-child(7) { --o:.1; }.face.fx i:nth-child(8) { --o:.4; }.face.fx i:nth-child(9) { --o:.2; }.face.fx i:nth-child(10) { --o:.55; }.face.fx i:nth-child(11) { --o:.3; }.face.fx i:nth-child(12) { --o:.15; }.face.fx i:nth-child(13) { --o:.45; }.face.fx i:nth-child(14) { --o:.25; }.face.fx i:nth-child(15) { --o:.4; }.face.fx i:nth-child(16) { --o:.2; }
.face.fy i:nth-child(1) { --o:.2; }.face.fy i:nth-child(2) { --o:.45; }.face.fy i:nth-child(3) { --o:.15; }.face.fy i:nth-child(4) { --o:.55; }.face.fy i:nth-child(5) { --o:.35; }.face.fy i:nth-child(6) { --o:.1; }.face.fy i:nth-child(7) { --o:.5; }.face.fy i:nth-child(8) { --o:.25; }.face.fy i:nth-child(9) { --o:.4; }.face.fy i:nth-child(10) { --o:.3; }.face.fy i:nth-child(11) { --o:.45; }.face.fy i:nth-child(12) { --o:.15; }.face.fy i:nth-child(13) { --o:.55; }.face.fy i:nth-child(14) { --o:.2; }.face.fy i:nth-child(15) { --o:.35; }.face.fy i:nth-child(16) { --o:.1; }
.catalog-section { position: relative; padding-top: 16px; padding-bottom: 64px; }
.market-toolbar { animation-delay: 180ms; }
.toolbar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.market-search { margin: 0; }
#clear-query { position: absolute; right: 8px; border: 0; background: transparent; color: var(--muted); font-size: 15px; padding: 0 2px; }
.catalog-status { position: relative; height: 0; }
.catalog-status #status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
#reset-filters { position: absolute; right: 0; bottom: 4px; padding: 1px 5px; font-size: 10px; }
.quiet-button { border: 0; background: transparent; color: var(--muted); padding: 0; font-size: 12px; }
.quiet-button:hover,.quiet-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.quiet-link { font-size: 12.5px; color: var(--muted); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-top .ci img { width: 24px; height: 24px; object-fit: contain; }
.card-tag { padding: 3px 9px; border-radius: 999px; background: var(--paper-deep); font-size: 11.5px; color: var(--muted); max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-open { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; overflow-wrap: anywhere; }
.card-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.card-open:focus-visible { outline: none; }
.market-card:has(.card-open:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.market-card .install-btn { z-index: 1; position: relative; }
.market-card .desc-body { overflow-wrap: anywhere; }
.market-card .install-bar code { font: inherit; }
.loading-state { grid-column: 1/-1; padding: 70px 24px; text-align: center; color: var(--muted); font-size: 13.5px; }
.loading-line { display: block; width: 70px; height: 2px; background: var(--line); margin: 0 auto 18px; overflow: hidden; }
.loading-line::after { content: ""; display: block; width: 50%; height: 100%; background: var(--sage); animation: loading 1s infinite alternate ease-in-out; }
@keyframes loading { to { transform: translateX(100%); } }
.empty-state { padding: 42px 24px 44px; text-align: center; color: var(--muted); }
.empty-icon { margin: 0 auto 18px; }
.empty-state h2 { font-size: 17px; color: var(--ink); font-weight: 600; margin-bottom: 10px; }
.empty-state p { font-size: 13.5px; line-height: 1.75; margin-bottom: 20px; }
.empty-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; }
.catalog-footnote { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; color: var(--sage-text); font-size: 11.5px; }
.catalog-footnote a { font-family: var(--mono); }
.error-notice { padding: 22px 24px; color: var(--err); font-size: 13.5px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.error-notice p { overflow-wrap: anywhere; }.error-notice button { flex-shrink: 0; }
.architecture-section { padding-top: 32px; padding-bottom: 64px; }
.architecture-section > .rule { margin-bottom: 48px; }
.compact-heading { margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.compact-heading h2 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.compact-heading p { font-size: 13.5px; color: var(--muted); }
.realm h3 { margin: 0; font-size: 14px; font-weight: 600; }
.realm h3 small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; color: var(--sage-text); }
.points h3 { margin-bottom: 9px; display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
.points h3 span { font-size: 12px; font-weight: 400; color: var(--muted); }
.field-explanation { margin-top: 14px; padding: 13px 14px; border-radius: 10px; background: var(--paper); font-size: 12.5px; color: var(--muted); line-height: 1.65; min-height: 69px; }
.field-explanation code { font-size: 11.5px; color: var(--ink); }
.source-examples code { padding: 4px 8px; background: var(--paper); border-radius: 7px; box-shadow: inset 0 0 0 1px var(--hair); overflow-wrap: anywhere; }
.source-note { font-size: 11.5px; line-height: 1.65; color: var(--sage-text); overflow-wrap: anywhere; }
.source-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.points-boundary { padding-top: 16px; border-top: 1px solid var(--hair); }
.why-heading { margin-top: 56px; }
.why h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.foot p { flex: 1; min-width: 240px; line-height: 1.75; }
.authoring-section { padding-bottom: 80px; }
.author-panel { padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.panel-heading h3 { font-size: 14px; font-weight: 600; }
.panel-heading > code { font-size: 11.5px; color: var(--sage-text); }
.field-label { display: block; font-size: 12px; color: var(--muted); }
.field-label input { display: block; width: 100%; margin-top: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 12.5px; }
.author-panel > div > .field-label { margin-bottom: 6px; }
.scaffold-code { border-radius: 14px; margin-top: 2px; }
.code .bar { justify-content: flex-start; }
.code .bar > span { color: #a5a5a5; font: 11px var(--mono); }
.code-copy { margin-left: auto; padding: 3px 8px; border: 0; border-radius: 6px; background: #ffffff1a; color: #ededed; font-size: 11px; }
.code-copy:disabled { opacity: .4; cursor: not-allowed; }
.scaffold-code pre,.submission-body .code pre { padding: 14px 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; }
.scaffold-code pre { color: #a3c47a; }
#listing-input { width: 100%; flex: 1; min-height: 250px; max-height: 650px; padding: 14px; border: 0; border-radius: 14px; background: var(--code); color: #ededed; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; resize: vertical; }
#listing-input::placeholder { color: #8b8b8b; }
.precheck-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.precheck-actions > span { font-size: 11px; color: var(--sage-text); }
.draft-result { padding-top: 12px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 11.5px; line-height: 1.7; overflow-wrap: anywhere; }
.draft-result strong { display: block; margin-bottom: 6px; font-size: 12.5px; }
.draft-result ul { margin: 0 0 10px; padding-left: 18px; }.draft-result.valid strong { color: var(--ok); }.draft-result.invalid strong,.draft-result.invalid li { color: var(--err); }
.submission-checks { margin-top: 24px; color: var(--muted); font-size: 12.5px; }
.submission-checks summary { cursor: pointer; padding: 12px 0; }.submission-checks summary span { float: right; font-size: 11.5px; color: var(--sage-text); }
.submission-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; padding-top: 12px; }.submission-body p { line-height: 1.8; }.submission-body a { display: block; margin-top: 12px; color: var(--ink); }
.site-footer { border-top: 1px solid var(--hair); padding-top: 44px; padding-bottom: 52px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }.footer-brand strong { color: var(--ink); font-size: 15px; letter-spacing: -.02em; }.footer-links { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }.footer-links .quiet-button { font-size: 12px; }
/* Native dialog keeps the reference layout while adding focus trapping and return. */
#extension-dialog { border: 0; color: var(--ink); width: min(980px,calc(100% - 40px)); max-height: calc(100dvh - 40px); }
#extension-dialog::backdrop { background: color-mix(in srgb,var(--ink) 28%,transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dialog-header { position: sticky; top: 0; z-index: 5; padding: 22px 28px; background: var(--paper); border-bottom: 1px solid var(--hair); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dialog-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }.dialog-identity > div { min-width: 0; }.dialog-identity .ci { width: 48px; height: 48px; border-radius: 14px; }.dialog-identity .ci img { object-fit: contain; }.dialog-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }.dialog-title-row h2 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }.detail-badge { font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: var(--paper-deep); color: var(--muted); }#detail-id { margin-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--sage-text); overflow-wrap: anywhere; }
#close-dialog { padding: 6px 12px; flex-shrink: 0; }#close-dialog kbd { font-size: 11px; opacity: .65; }
.dialog-body { padding: 24px 28px 32px; display: flex; flex-direction: column; gap: 24px; }
.detail-install-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--bubble); box-shadow: inset 0 0 0 1px var(--hair); font-family: var(--mono); font-size: 13px; }
.detail-source-line { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }.detail-source-line span { color: var(--sage-text); }.detail-source-line code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.detail-install-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.small-action { display: inline-flex; align-items: center; padding: 6px 12px; border: 0; border-radius: 8px; font-family: var(--sans); font-size: 12px; font-weight: 500; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }.small-action:hover { background: var(--hl); color: var(--ink); }.small-action.secondary { background: transparent; color: var(--muted); }
#copy-status:empty { display: none; }.detail-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }.detail-overview h3 { font-size: 13px; color: var(--sage-text); font-weight: 600; margin-bottom: 8px; }#detail-description { font-size: 14px; line-height: 1.8; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }.detail-overview .feats { gap: 9px; }.detail-overview .feats li { font-size: 13px; }.detail-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; font-size: 12px; }
.inspector-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }.inspector-heading h3 { font-size: 15px; font-weight: 600; }.inspector-heading p { font-size: 12px; color: var(--sage-text); }
.anatomy .f { border: 0; background: transparent; font: inherit; color: inherit; text-align: left; }.anatomy .f.is-selected { background: var(--hl); }.anatomy .f .file-description { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }.anatomy .pills span { cursor: inherit; }.anatomy .f-head { overflow-wrap: anywhere; }.anatomy .code { min-width: 0; }.anatomy .code .tab { border: 0; }.anatomy .code pre { max-height: 400px; }.anatomy .code code { font: inherit; }.inspector-boundary { padding: 12px 10px; margin-top: auto; border-top: 1px solid var(--hair); }.inspector-boundary strong { font-size: 12px; font-weight: 500; color: var(--sage-text); }.inspector-boundary p { margin-top: 4px; font-size: 12px; color: var(--muted); }
.toast { position: fixed; z-index: 90; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 17px; border-radius: 11px; background: var(--ink); color: var(--on-ink); box-shadow: 0 8px 24px -10px var(--shadow); font-size: 12px; }
@media (max-width: 1080px) { .toolbar-controls { flex: 1; justify-content: flex-start; }.market-toolbar { justify-content: flex-start; }.authoring-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1080px) { .mobile-menu-toggle { display: grid; } }
@media (max-width: 860px) { .market-hero .scene { --mask-w: 62%; --mask-h: 86%; opacity: .42; }.hero-content .desc { max-width: 34em; }.authoring-grid { grid-template-columns: 1fr; }.detail-overview { grid-template-columns: 1fr; gap: 22px; }.anatomy .code pre { max-height: 330px; } }
@media (max-width: 660px) { html { scroll-padding-top: 76px; }.v-nav { gap: 10px; }.v-brand { font-size: 16px; gap: 8px; }.brand-suffix { font-size: 11px; padding-left: 8px; }.v-actions { gap: 6px; }.home-link { display: none; }.search-shortcut { display: none; }.market-hero { padding-top: 94px; padding-bottom: 34px; }.hero-content .kicker { font-size: 10px; letter-spacing: .1em; }.hero-content h1 { font-size: 32px; line-height: 1.22; }.hero-content h1 span { font-size: 13px; line-height: 1.6; max-width: 24em; }.hero-content .desc { font-size: 13.5px; line-height: 1.8; max-width: 30em; }.hero-content .desc code { font-size: 11.5px; }.market-hero .scene { --mask-w: 80%; --mask-h: 90%; opacity: .22; }.market-hero .horizon { scale: .58; }.catalog-section { padding-bottom: 42px; }.market-toolbar { gap: 12px; padding-bottom: 16px; margin-bottom: 24px; }.wb-tabs { gap: 2px; width: 100%; padding: 3px; }.wb-tab { padding: 6px 9px; font-size: 11.5px; }.wb-tab .count { font-size: 10px; }.toolbar-controls { width: 100%; gap: 8px; }.seg-btn { padding: 5px 9px; font-size: 11px; }.market-search { flex: 1; min-width: 150px; }.market-search input,.market-search input:focus { width: 100%; }.market-card { padding: 22px; }.market-card h3 { font-size: 16px; }.market-card .desc-body { font-size: 13px; }.catalog-footnote { font-size: 10.5px; }.empty-state { padding: 34px 20px; }.empty-state p { font-size: 12.5px; }.empty-state br { display: none; }.compact-heading h2 { font-size: 19px; }.compact-heading p { font-size: 12.5px; }.architecture-section { padding-top: 20px; padding-bottom: 44px; }.architecture-section > .rule { margin-bottom: 36px; }.realm { padding: 15px; }.realms { padding: 16px; }.points { padding: 20px; }.points h3 { font-size: 12px; }.points h3 span { font-size: 10.5px; }.why-heading { margin-top: 38px; }.foot p { min-width: 0; flex-basis: 100%; font-size: 11.5px; }.authoring-section { padding-bottom: 48px; }.author-panel { padding: 20px; }.submission-body { grid-template-columns: 1fr; }.submission-checks summary span { display: none; }.site-footer { padding-top: 30px; padding-bottom: 36px; font-size: 11.5px; }.footer-links { gap: 15px; }#extension-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 18px; }.dialog-header { padding: 18px; align-items: flex-start; gap: 12px; }.dialog-identity { gap: 10px; }.dialog-identity .ci { width: 40px; height: 40px; border-radius: 11px; }.dialog-title-row h2 { font-size: 17px; }#detail-id { font-size: 10.5px; }.detail-badge { font-size: 10.5px; }#close-dialog { height: 30px; font-size: 11px; }#close-dialog kbd { display: none; }.dialog-body { padding: 20px 18px 24px; gap: 22px; }.detail-install-strip { padding: 12px; }.detail-source-line { flex-basis: 100%; font-size: 11.5px; }.small-action { padding: 6px 9px; font-size: 11px; }.detail-overview .feats li { font-size: 12px; }#detail-description { font-size: 13px; }.inspector-heading p { font-size: 11px; }.anatomy .files { padding: 14px; }.error-notice { align-items: flex-start; flex-direction: column; gap: 12px; }.v-agent { gap: 8px; font-size: 10.5px; } }
@media (max-width: 360px) { .brand-suffix { display: none; }.wb-tab { padding-inline: 8px; }.v-actions { gap: 5px; }.footer-brand { flex-wrap: wrap; }.footer-brand > span:last-child { font-size: 10.5px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*,*::before,*::after { animation: none !important; transition: none !important; }.market-card:hover { transform: none; }.scene.is-idle .contact { opacity: .3; } }