/* AIWebPad — overrides on top of Quoty's compiled Tailwind */

@font-face {
  font-family: 'JetBrainsMono';
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: local('JetBrains Mono'), local('JetBrainsMono');
}

:root {
  --awp-bg: #f7f3e8;
  --awp-surface: #ffffff;
  --awp-border: #e6e0cf;
  --awp-text: #1a1a1f;
  --awp-muted: #5b5a55;
  --awp-radius: 12px;
  --awp-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --awp-rail-inset: 4px;
  --awp-content-gutter: 12px;
  --awp-banner-gutter: 18px;
}

html.dark {
  --awp-bg: #0a0a0c;
  --awp-surface: #141418;
  --awp-border: #26262e;
  --awp-text: #ede8d6;
  --awp-muted: #9b9789;
  color-scheme: dark;
}

/* Cursor-style cream-on-near-black */
html.dark body {
  background: var(--awp-bg);
  color: var(--awp-text);
}
body {
  background: var(--awp-bg);
  color: var(--awp-text);
}

/* Viewport rails — make the full-bleed layout feel deliberate, not loose. */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 6px;
  bottom: 6px;
  width: 2px;
  z-index: 18;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(180deg,
    #7cc4ff 0%,
    #8b5cf6 18%,
    #c8ff3d 38%,
    #10b981 58%,
    #38bdf8 78%,
    #a855f7 100%);
  opacity: 0.86;
  box-shadow: 0 0 14px rgba(124,196,255,0.32);
}
body::before { left: var(--awp-rail-inset); }
body::after { right: var(--awp-rail-inset); transform: scaleY(-1); }
@media (max-width: 1023px) {
  body::before,
  body::after {
    bottom: calc(62px + env(safe-area-inset-bottom));
  }
}
@media (min-width: 1024px) {
  body::before,
  body::after {
    width: 1px;
    opacity: 0.62;
    box-shadow: 0 0 10px rgba(124,196,255,0.22);
  }
}

/* Real breathing room from the viewport rails. Some Tailwind utility output
   gets too tight with this full-bleed composition, so these are explicit. */
.hero-inner,
.docs-inner {
  padding-left: max(var(--awp-content-gutter), calc(env(safe-area-inset-left) + var(--awp-content-gutter)));
  padding-right: max(var(--awp-content-gutter), calc(env(safe-area-inset-right) + var(--awp-content-gutter)));
}
@media (min-width: 640px) {
  .hero-inner,
  .docs-inner {
    padding-left: clamp(26px, 3vw, 42px);
    padding-right: clamp(26px, 3vw, 42px);
  }
}
@media (min-width: 1024px) {
  .hero-inner { padding-left: clamp(16px, 1.6vw, 28px); padding-right: clamp(14px, 1.4vw, 24px); }
  .docs-inner { padding-left: clamp(18px, 1.7vw, 30px); padding-right: clamp(18px, 1.7vw, 30px); }
}

/* Sticky top bar needs the same small inset from the RGB rails. */
.banner-inner {
  padding-left: max(var(--awp-banner-gutter), calc(env(safe-area-inset-left) + var(--awp-banner-gutter)));
  padding-right: max(var(--awp-banner-gutter), calc(env(safe-area-inset-right) + var(--awp-banner-gutter)));
}
@media (min-width: 768px) {
  .banner-inner {
    padding-left: clamp(22px, 2vw, 34px);
    padding-right: clamp(22px, 2vw, 34px);
  }
}

/* Desktop center seam — separates hero terminal from docs without boxing it in. */
@media (min-width: 1024px) {
  .site-shell::before {
    content: "";
    position: fixed;
    top: 52px;
    bottom: 0;
    left: 50%;
    width: 1px;
    z-index: 35;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(124,196,255,0.92) 0%,
      rgba(158,255,90,0.72) 34%,
      rgba(56,189,248,0.62) 66%,
      rgba(168,85,247,0.82) 100%);
    box-shadow:
      0 0 12px rgba(124,196,255,0.28),
      0 0 28px rgba(158,255,90,0.10);
  }
  .site-shell::after {
    content: "";
    position: fixed;
    top: 52px;
    bottom: 0;
    left: calc(50% - 24px);
    width: 48px;
    z-index: 34;
    pointer-events: none;
    background: linear-gradient(90deg,
      transparent,
      rgba(10,10,12,0.18) 46%,
      rgba(10,10,12,0.28) 50%,
      rgba(10,10,12,0.18) 54%,
      transparent);
  }
}

/* Lock single radius system */
.r { border-radius: var(--awp-radius); }
.r-r { border-radius: 0 var(--awp-radius) var(--awp-radius) 0; }

/* Mono detail */
.mono { font-family: var(--awp-mono); font-feature-settings: "ss01", "cv11"; letter-spacing: -0.01em; }
.mono-xs { font-family: var(--awp-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Editorial big display */
.display {
  font-family: 'Orbiter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.92;
}

/* Hairline rule */
.rule { border-top: 1px solid var(--awp-border); }

/* Glass banner — skinny, very translucent (no photo bg) */
.banner {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 48px;
  isolation: isolate;
  background: rgba(10, 10, 12, 0.22);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
}
html:not(.dark) .banner {
  background: rgba(247, 243, 232, 0.32);
}

/* Inline tagline next to brand — gives the bar a reason to exist. */
.banner-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.banner-brand__copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1;
}
.banner__tag {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
}
.banner__tag .dot { color: rgba(255,255,255,0.32); margin: 0 5px; }
.banner__tag .accent-b { color: #7cc4ff; }
.banner__tag .accent-g { color: #c8ff3d; }
html:not(.dark) .banner__tag { color: rgba(26,26,31,0.6); }
html:not(.dark) .banner__tag .dot { color: rgba(26,26,31,0.25); }

/* Hero eyebrow accent letters */
.eyebrow-accent-r { color: #f87171; font-weight: 600; }
.eyebrow-accent-g { color: #c8ff3d; font-weight: 600; }

/* Kill any horizontal page overflow caused by negative-margin marquee
   and full-bleed flourishes on small viewports. Use `clip` on body only
   — `overflow:hidden` on <html> breaks `position: sticky` for the banner. */
html, body { max-width: 100vw; }
body { overflow-x: clip; }
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }
.banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.5), rgba(16,185,129,0.55), rgba(59,130,246,0.5), transparent);
}
@media (min-width: 768px) { .banner { height: 52px; } }

/* Banner text colors flip in light mode */
html:not(.dark) .banner a span,
html:not(.dark) .banner nav a { color: var(--awp-text); }
html:not(.dark) .banner nav a { color: rgba(26,26,31,0.7); }
html:not(.dark) .banner nav a:hover { color: var(--awp-text); }

.install-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(124,196,255,0.48);
  background: rgba(124,196,255,0.10);
  color: #7cc4ff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 18px -10px rgba(124,196,255,0.95);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.install-app-btn[hidden] { display: none !important; }
.install-app-btn:hover {
  background: rgba(124,196,255,0.17);
  border-color: rgba(124,196,255,0.78);
  color: #dff2ff;
}
.install-app-btn__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c8ff3d;
  box-shadow: 0 0 10px rgba(200,255,61,0.8);
}
@media (max-width: 520px) {
  .install-app-btn {
    height: 26px;
    padding: 0 8px;
    font-size: 9px;
  }
}

/* Lime marquee */
.marquee {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  height: 88px;
  background: #c8ff3d;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(0,0,0,0.18);
}
.marquee__track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Inline variant — sits in document flow above the terminal. */
.marquee--inline {
  position: relative;
  inset: auto;
  height: 56px;
  margin: 36px -24px 24px;
  width: calc(100% + 48px);
  border-top: 1px solid rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(0,0,0,0.18);
}
@media (min-width: 640px) {
  .marquee--inline { margin: 40px -40px 28px; width: calc(100% + 80px); }
}
.marquee__item {
  font-family: 'Orbiter', sans-serif;
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -0.03em;
  line-height: 1;
  padding: 0 24px;
  color: #0a0a0c;
  display: inline-flex;
  align-items: center;
  gap: 24px;
}
.marquee__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #0a0a0c;
  display: inline-block;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Logo glow */
.logo-led {
  filter: drop-shadow(0 0 10px rgba(56,189,248,0.45));
}

/* Code block */
.code {
  font-family: var(--awp-mono);
  font-size: 13px;
  line-height: 1.55;
  background: #0a0a0c;
  color: #ede8d6;
  border: 1px solid #26262e;
  border-radius: var(--awp-radius);
  padding: 16px 18px;
  overflow-x: auto;
}
.code .c-key { color: #7cc4ff; }
.code .c-str { color: #c8ff3d; }
.code .c-com { color: #6c7080; }
.code .c-num { color: #f0b76b; }

/* Dot list bullet */
.tickbar {
  display: inline-block;
  width: 8px; height: 1.5px;
  background: currentColor;
  margin-right: 10px;
  vertical-align: middle;
  opacity: 0.55;
}

/* Pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--awp-border);
  border-radius: 999px;
  font-family: var(--awp-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--awp-muted);
}
.pill .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* Right column number gutter */
.idx {
  font-family: var(--awp-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--awp-muted);
}

/* Asymmetric section padding system — 3 sizes only */
.s-tight { padding-top: 32px; padding-bottom: 32px; }
.s-norm  { padding-top: 56px; padding-bottom: 56px; }
.s-wide  { padding-top: 96px; padding-bottom: 32px; }

/* Mobile: marquee shorter */
@media (max-width: 1023px) {
  .marquee { height: 64px; }
  .marquee__item { font-size: 38px; }
}

/* Hero meta grid — GLASS: cells nearly invisible, hero image bleeds through. */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--awp-radius);
  overflow: hidden;
  backdrop-filter: blur(2px) saturate(1.05);
  -webkit-backdrop-filter: blur(2px) saturate(1.05);
}
.meta-grid > div {
  background: rgba(10,10,12,0.18);
  padding: 14px 16px;
}
html.dark .meta-grid > div { background: rgba(10,10,12,0.18); }
.meta-grid dt {
  font-family: var(--awp-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(237,232,214,0.6); margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.meta-grid dd {
  font-family: var(--awp-mono); font-size: 14px; color: #ede8d6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* Inline URL chip in the lede — the real landing URL */
.hero-url {
  font-family: var(--awp-mono);
  font-size: 0.86em;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(124,196,255,0.10);
  border-bottom: 1px solid rgba(124,196,255,0.55);
  color: #ede8d6;
  white-space: nowrap;
  text-decoration: none;
  transition: background 120ms ease;
}
.hero-url:hover { background: rgba(124,196,255,0.18); }
.hero-url__scheme { color: #6c7080; }
.hero-url__host { color: #7cc4ff; }
@media (max-width: 420px) {
  .hero-url { white-space: normal; overflow-wrap: anywhere; }
}

/* Random-color glyph trickle on the right-column paragraphs */
.glyph-g { color: #9eff5a; }
.glyph-b { color: #7cc4ff; }
.glyph-o { color: #f0b76b; }
.glyph-r { color: #f87171; }

/* Sticky CTA bar override */
.cta-bar {
  background: rgba(10,10,12,0.78);
  backdrop-filter: blur(14px) saturate(1.3);
  border-top: 1px solid var(--awp-border);
}
html:not(.dark) .cta-bar { background: rgba(247,243,232,0.82); }

/* Scroll devil — emoji replacement for the native translucent scroll pill.
   It only appears while the page is moving. */
.scroll-devil {
  position: fixed;
  right: 8px;
  top: 88px;
  z-index: 80;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  background: rgba(10,10,12,0.45);
  border: 1px solid rgba(168,85,247,0.42);
  box-shadow: 0 0 16px rgba(168,85,247,0.34);
  opacity: 0;
  transform: translateY(-50%) scale(0.82);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}
.scroll-devil.is-visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
@media (min-width: 1024px) {
  .scroll-devil { display: none; }
}

/* Hero media crossfade — sits behind hero text in left panel */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-media__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.06) brightness(0.66);
  transition: opacity 1400ms cubic-bezier(.4,0,.2,1), transform 8000ms linear;
}
.hero-media__layer.is-active {
  opacity: 1;
  transform: scale(1.0);
}
.hero-media__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 30% 10%, rgba(10,10,12,0) 0%, rgba(10,10,12,0.22) 55%, rgba(10,10,12,0.55) 100%),
    linear-gradient(180deg, rgba(10,10,12,0.12) 0%, rgba(10,10,12,0.24) 60%, rgba(10,10,12,0.54) 100%);
  mix-blend-mode: normal;
}
.hero-media__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) {
  .hero-media__layer { transition: opacity 400ms linear; transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Live executable terminal                                                */
/* ---------------------------------------------------------------------- */
.awp-term {
  --term-bg: #0c0c10;
  --term-line: #1a1a22;
  --term-mute: #6c7080;
  --term-fg: #e8e3d2;
  --term-green: #9eff5a;
  --term-cyan: #7cc4ff;
  --term-amber: #f0b76b;
  --term-rose: #f87171;
  position: relative;
  width: 100%;
  max-width: 100%;
  border: 1px solid #1f1f26;
  border-radius: 12px;
  background: linear-gradient(180deg, #0e0e13 0%, #0a0a0c 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 60px -30px rgba(0,0,0,0.6);
  overflow: hidden;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  margin-top: 32px;
  border-bottom-color: rgba(158,255,90,0.55);
}
.awp-term::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(124,196,255,0.85), rgba(158,255,90,0.95));
  pointer-events: none;
}

/* Hard divider after the terminal so the eye knows the section ended,
   regardless of where the right column is currently scrolled. */
.awp-term-after {
  margin-top: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,196,255,0.35), rgba(158,255,90,0.35), transparent);
}
.awp-term-caption {
  margin-top: 10px;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(237,232,214,0.45);
  text-align: right;
}
.awp-term__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--term-line);
  background: rgba(255,255,255,0.015);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.awp-term__dots { display: inline-flex; gap: 6px; }
.awp-term__dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2a2a32;
  display: inline-block;
}
.awp-term__dots i:nth-child(1) { background: #3f2a36; }
.awp-term__dots i:nth-child(2) { background: #3a3528; }
.awp-term__dots i:nth-child(3) { background: #2a3a2c; }
.awp-term__title { color: var(--term-fg); flex: 1; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: 0.01em; }
.awp-term__pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--term-green);
  box-shadow: 0 0 8px rgba(158,255,90,0.6);
  animation: awp-term-pulse 1.6s ease-in-out infinite;
}
@keyframes awp-term-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.awp-term__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.awp-term__chip--use {
  color: #fff;
  background: rgba(220,38,38,0.18);
  border: 1px solid rgba(248,113,113,0.58);
  box-shadow: 0 0 16px -8px rgba(248,113,113,0.9);
}
.awp-term__chip--live {
  color: #9eff5a;
  background: rgba(158,255,90,0.10);
  border: 1px solid rgba(158,255,90,0.48);
  text-shadow: 0 0 8px rgba(158,255,90,0.55);
  box-shadow: 0 0 18px -8px rgba(158,255,90,1);
  animation: awp-live-flash 1.15s ease-in-out infinite;
}
.awp-term__chip--live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9eff5a;
  box-shadow: 0 0 10px rgba(158,255,90,0.95);
}
@keyframes awp-live-flash {
  0%, 100% { opacity: 1; filter: saturate(1.25); }
  50% { opacity: 0.42; filter: saturate(0.75); }
}
.awp-term__run {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--term-green);
  background: rgba(158,255,90,0.08);
  border: 1px solid rgba(158,255,90,0.3);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.awp-term__run:hover { background: rgba(158,255,90,0.15); border-color: rgba(158,255,90,0.55); }
@media (max-width: 520px) {
  .awp-term__head { gap: 8px; }
  .awp-term__chip { height: 20px; padding: 0 6px; font-size: 9px; }
  .awp-term__run {
    padding: 4px 8px;
    color: #fff;
    background: rgba(220,38,38,0.24);
    border-color: rgba(248,113,113,0.72);
    box-shadow: 0 0 18px -8px rgba(248,113,113,1);
  }
  .awp-term__run:hover {
    background: rgba(220,38,38,0.34);
    border-color: rgba(248,113,113,0.9);
  }
}
@media (max-width: 420px) {
  .awp-term__chip--use { display: none; }
}
.awp-kbd {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--awp-border);
  background: rgba(255,255,255,0.02);
  color: var(--awp-text);
}
.awp-term-hint {
  color: #6c7080;
}
.awp-term-hint__text {
  color: #ff3b3b;
  text-shadow:
    0 0 6px rgba(255,59,59,0.62),
    0 0 18px rgba(220,38,38,0.42);
}
.awp-term-hint__sep {
  color: #6c7080;
  text-shadow: none;
}
.awp-term__body {
  padding: 14px 16px 12px;
  color: var(--term-fg);
  font-size: 12.5px;
  line-height: 1.55;
  min-height: 150px;
  height: clamp(150px, 21vh, 240px);
  max-height: 240px;
  display: flex;
  flex-direction: column;
}
.awp-term__scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #25252e transparent;
  margin-bottom: 8px;
}
.awp-term__scroll::-webkit-scrollbar { width: 6px; }
.awp-term__scroll::-webkit-scrollbar-thumb { background: #25252e; border-radius: 3px; }
.awp-term__line {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px dashed #1c1c24;
  padding-top: 8px;
}
.awp-term__prompt {
  white-space: nowrap;
  font-size: 12.5px;
  user-select: none;
}
.awp-term__prompt .tu { color: var(--term-green); }
.awp-term__prompt .td { color: var(--term-cyan); }
.awp-term__prompt .tp { color: var(--term-mute); margin: 0 2px; }
.awp-term__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--term-fg);
  font: inherit;
  caret-color: var(--term-green);
  padding: 0;
}

.tline { white-space: pre-wrap; word-break: break-word; }
.tline.tcmd { color: var(--term-fg); opacity: 0.9; margin-top: 2px; }
.tline .dim { color: var(--term-mute); }
.tline .arr { color: var(--term-mute); }
.tline .ok { color: var(--term-green); }
.tline .er { color: var(--term-rose); }
.tline .tdim { color: var(--term-mute); }
.tline .tc { color: var(--term-green); }
.tline .thd { color: var(--term-fg); font-weight: 700; letter-spacing: 0.02em; }
.tline .vp { color: var(--term-green); font-weight: 700; }
.tline .vg { color: var(--term-cyan); font-weight: 700; }
.tline .vd { color: var(--term-rose); font-weight: 700; }
.tline .tk { color: var(--term-cyan); }
.tline .ts { color: var(--term-green); }
.tline .tn { color: var(--term-amber); }
.tline .tb { color: var(--term-amber); }
.tline .jbody {
  margin: 4px 0 8px;
  padding: 8px 10px;
  border-left: 2px solid var(--term-line);
  background: rgba(255,255,255,0.015);
  border-radius: 0 6px 6px 0;
  color: #c8c2af;
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Mobile overflow guards ----------------------------------------------- */
@media (max-width: 640px) {
  .code, pre.code {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
  }
  /* API surface table: collapse columns under 60px verb */
  #api ul.mono li {
    flex-wrap: wrap;
    column-gap: 12px;
  }
  #api ul.mono li > span:nth-child(2) { width: auto; flex: 1; min-width: 60%; }
  #api ul.mono li > span:nth-child(3) { width: 100%; padding-left: 76px; font-size: 11px; }
  .awp-term { max-width: 100%; }
  .awp-term__body { max-height: 280px; }
}

/* View Transition theme flip — circular reveal from the toggle button. */
@supports (view-transition-name: root) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 380ms;
    animation-timing-function: cubic-bezier(.2,.7,.2,1);
    mix-blend-mode: normal;
  }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) {
    animation-name: awp-clip-reveal;
  }
  @keyframes awp-clip-reveal {
    from { clip-path: circle(0 at var(--theme-x, 100%) var(--theme-y, 0%)); }
    to   { clip-path: circle(150vmax at var(--theme-x, 100%) var(--theme-y, 0%)); }
  }
}