/* ==========================================================================
   SimDuino — Arduino simulator landing + live demo
   Arduino-flavored teal dark UI, glass surfaces, subtle circuit motifs.
   ========================================================================== */

/* DARK theme (kept for the toggle) */
:root {
  color-scheme: dark;
  --bg: #04090c;
  --bg-deep: #02060a;
  --bg-elev: #0a1418;
  --bg-card: rgba(255, 255, 255, 0.025);
  --bg-card-hover: rgba(0, 196, 210, 0.06);
  --border: rgba(0, 196, 210, 0.12);
  --border-soft: rgba(0, 196, 210, 0.06);
  --border-strong: rgba(0, 196, 210, 0.28);
  --text: #e6f4f5;
  --text-muted: #7d9ea2;
  --text-dim: #4e6a6e;
  --accent: #00c4d2;
  --accent-bright: #2be6f0;
  --accent-warm: #00e6c0;
  --accent-soft: rgba(0, 196, 210, 0.14);
  --accent-glow: rgba(0, 196, 210, 0.32);
  --accent-deep: #007a82;
  --teal-board: #008b8e;
  --teal-board-dark: #006a6d;
  --copper: #c98a4b;
  --copper-dim: #8a5e34;
  --danger: #ff6c6c;
  --success: #2ee5a8;
  --warn: #ffb547;
  /* Composable surface tokens — used to override card backgrounds in light mode. */
  --surface-1: rgba(2, 6, 10, 0.55);    /* sidebars, runpane cards */
  --surface-2: rgba(2, 6, 10, 0.70);    /* code editor, serial screen */
  --surface-3: rgba(2, 6, 10, 0.94);    /* tooltip, modal */
  --surface-canvas: rgba(2, 6, 10, 0.65);
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --shadow-card: 0 30px 70px -36px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 30px 80px -30px rgba(0, 196, 210, 0.35);
  --font-display: 'Sora', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: 'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --max-w: 1180px;
}

/* LIGHT theme (default). Same Arduino-teal palette tuned for a bright bg. */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f9fa;
  --bg-deep: #eef4f5;
  --bg-elev: #ffffff;
  --bg-card: rgba(0, 90, 96, 0.045);
  --bg-card-hover: rgba(0, 122, 130, 0.10);
  --border: rgba(0, 122, 130, 0.20);
  --border-soft: rgba(0, 122, 130, 0.12);
  --border-strong: rgba(0, 122, 130, 0.42);
  --text: #0b2126;
  --text-muted: #45686d;
  --text-dim: #88a4a8;
  --accent: #007a82;
  --accent-bright: #00a8b5;
  --accent-warm: #00956f;
  --accent-soft: rgba(0, 122, 130, 0.14);
  --accent-glow: rgba(0, 122, 130, 0.28);
  --accent-deep: #004d52;
  --shadow-card: 0 20px 50px -28px rgba(0, 60, 70, 0.22);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 24px 60px -28px rgba(0, 122, 130, 0.25);
  /* Light surfaces — opaque whites with a faint cool tint */
  --surface-1: rgba(255, 255, 255, 0.85);
  --surface-2: rgba(255, 255, 255, 0.95);
  --surface-3: rgba(255, 255, 255, 0.98);
  --surface-canvas: rgba(248, 252, 252, 0.92);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent-bright);
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}

a:hover {
  color: var(--accent-warm);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

::selection {
  background: var(--accent);
  color: #04090c;
}

/* --------------------------------------------------------------------------
   Background layers
   -------------------------------------------------------------------------- */

.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg-grid {
  background-image:
    linear-gradient(rgba(0, 196, 210, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 196, 210, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
}

.bg-glow {
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(0, 196, 210, 0.18), transparent 60%),
    radial-gradient(800px 500px at 90% 10%, rgba(0, 230, 192, 0.10), transparent 60%),
    radial-gradient(700px 450px at 50% 110%, rgba(0, 196, 210, 0.10), transparent 65%);
}

.bg-noise {
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
  mix-blend-mode: overlay;
}

.bg-traces {
  background-image:
    radial-gradient(circle at 12% 22%, rgba(0, 196, 210, 0.55) 0 1.5px, transparent 2px),
    radial-gradient(circle at 88% 18%, rgba(0, 230, 192, 0.4) 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 80%, rgba(0, 196, 210, 0.5) 0 1.5px, transparent 2px),
    radial-gradient(circle at 25% 75%, rgba(0, 230, 192, 0.35) 0 1.5px, transparent 2px);
  background-repeat: no-repeat;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

main {
  position: relative;
  z-index: 1;
}

.section {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px 28px;
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 28px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 10px;
  color: var(--text);
}

.section-head p {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin: 0;
}

.desktop-only {
  display: revert;
}

.mobile-only {
  display: none;
}

/* --------------------------------------------------------------------------
   Top navigation
   -------------------------------------------------------------------------- */

.top-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 24px;
  /* App-shell chrome spans the full viewport edge-to-edge. Logo and
   * theme toggle anchor at the outer corners; the inner gap auto-
   * fills via `justify-content: space-between`. */
  max-width: none;
  margin: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(4, 9, 12, 0.92), rgba(4, 9, 12, 0.78));
  border-bottom: 1px solid var(--border);
}

/* App-shell mode: the nav is always solid (no fade-in on scroll) since
 * Studio sits directly underneath and the visual handoff should feel
 * decisive. is-scrolled keeps the rule for backwards compat but
 * matches the static state. */
.top-nav.is-scrolled {
  background: linear-gradient(180deg, rgba(4, 9, 12, 0.95), rgba(4, 9, 12, 0.82));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  flex-shrink: 0;
}

.brand img,
.brand .brand-img {
  height: 22px;
  width: auto;
}

/* Build label chip sitting inline with the logo. Reads as a version
 * tag, not as a marketing flourish — tight monospace, muted colour. */
.brand-version {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  margin-left: 4px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--accent-bright);
  background: rgba(0, 196, 210, 0.10);
  border: 1px solid rgba(0, 196, 210, 0.22);
}

/* Live run counter in the header's right cluster. Lines up with the
 * theme toggle on the same baseline. */
.nav-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-right: 6px;
  letter-spacing: 0.02em;
}

.nav-meta [data-sim-count] {
  color: var(--accent-bright);
  font-weight: 600;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Light/dark logo swap — both files exist; CSS hides one per theme. */
.brand .brand-img-light,
.mobile-hero-lockup .brand-img-light,
.academy-gate-brand .brand-img-light { display: none; }
.brand .brand-img-dark,
.mobile-hero-lockup .brand-img-dark,
.academy-gate-brand .brand-img-dark { display: inline-block; }
[data-theme="light"] .brand .brand-img-dark,
[data-theme="light"] .mobile-hero-lockup .brand-img-dark,
[data-theme="light"] .academy-gate-brand .brand-img-dark { display: none; }
[data-theme="light"] .brand .brand-img-light,
[data-theme="light"] .mobile-hero-lockup .brand-img-light,
[data-theme="light"] .academy-gate-brand .brand-img-light { display: inline-block; }

.nav-links {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}

.nav-links a {
  position: relative;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 4px 0;
  transition: color 160ms var(--ease-out);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 220ms var(--ease-out), left 220ms var(--ease-out);
}

.nav-links a:hover {
  color: var(--text);
}

.nav-links a:hover::after {
  width: 100%;
  left: 0;
}

.nav-waitlist {
  flex-shrink: 0;
}

.nav-waitlist-short {
  display: none;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-radius: 999px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--btn-radius);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 180ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    background 200ms var(--ease-out),
    border-color 200ms var(--ease-out),
    color 160ms var(--ease-out);
  white-space: nowrap;
}

.btn-primary {
  color: #02181a;
  background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 60%, var(--accent-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 0 1px rgba(0, 196, 210, 0.18),
    0 18px 40px -18px rgba(0, 196, 210, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0, 230, 192, 0.32),
    0 24px 50px -18px rgba(0, 230, 192, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

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

.btn-outline {
  color: var(--text);
  border: 1px solid var(--border);
  background: rgba(0, 196, 210, 0.04);
}

.btn-outline:hover {
  border-color: var(--border-strong);
  background: rgba(0, 196, 210, 0.10);
  color: var(--text);
}

.btn-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   Studio-as-hero overrides
   -------------------------------------------------------------------------- */

/* When the Studio section is the page hero, tighten the top padding so the
 * canvas sits close to the nav and dominates the first viewport. The
 * section-head heading has been removed in the markup, so we don't need
 * the 56px head spacing here either. */
.section.studio.is-hero {
  padding-top: 32px;
  padding-bottom: 60px;
}

/* --------------------------------------------------------------------------
   Compact pitch band (sits below the Studio hero)
   -------------------------------------------------------------------------- */

.section.pitch {
  padding-top: 56px;
  padding-bottom: 64px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg,
    rgba(0, 196, 210, 0.025) 0%,
    rgba(0, 196, 210, 0.00) 60%);
}

/* App-shell variant: single thin row under Studio. Badge on the left,
 * 1-line pitch in the middle, Learn-more link, run counter on the right. */
.section.pitch.pitch--strip {
  padding-top: 14px;
  padding-bottom: 14px;
}

.pitch-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: var(--max-w);
  margin: 0 auto;
}

.pitch-strip .pitch-badge {
  margin: 0;
}

.pitch-strip-copy {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.pitch-strip .pitch-link {
  padding: 4px 8px;
  font-size: 0.85rem;
  margin: 0;
}

.pitch-strip-meta {
  margin: 0;
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.pitch-strip-meta [data-sim-count] {
  color: var(--accent-bright);
  font-weight: 600;
}

@media (max-width: 720px) {
  .pitch-strip {
    justify-content: flex-start;
  }
  .pitch-strip-meta {
    margin-left: 0;
  }
}

.pitch-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.pitch-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-bright);
  background: rgba(0, 196, 210, 0.08);
  border: 1px solid var(--border);
  margin: 0 auto 22px;
}

.section.pitch h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 auto 18px;
  max-width: 16ch;
  color: var(--text);
}

.pitch-copy {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 auto 28px;
  max-width: 56ch;
}

.pitch-copy strong {
  color: var(--text);
  font-weight: 600;
}

.pitch-actions {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 22px;
}

.pitch-link {
  color: var(--accent-bright);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 120ms ease, background 120ms ease;
}

.pitch-link:hover {
  color: var(--text);
  background: rgba(0, 196, 210, 0.06);
}

.pitch-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}

.pitch-meta [data-sim-count] {
  color: var(--accent-bright);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  text-align: center;
  padding-top: 80px;
  padding-bottom: 100px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-bright);
  background: rgba(0, 196, 210, 0.08);
  border: 1px solid var(--border);
  margin: 0 auto 32px;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(46, 229, 168, 0.18);
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.86); }
}

/* DC-motor rotor: a continuous rotation whose period is set inline by the
 * studio's motor.onCircuitChange handler. Slower duty → longer period. */
@keyframes simduino-motor-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.2vw, 5.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 auto 24px;
  max-width: 14ch;
  color: var(--text);
}

.hero-accent {
  background: linear-gradient(120deg, var(--accent-bright) 0%, var(--accent-warm) 60%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-weight: 700;
}

.hero-copy {
  max-width: 640px;
  margin: 0 auto 38px;
  font-size: 1.15rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-meta {
  margin: 36px 0 0;
  font-size: 0.92rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.waitlist-count-loading {
  display: inline-block;
  min-width: 2.6ch;
  height: 0.92em;
  margin-right: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(0, 196, 210, 0.10), rgba(0, 196, 210, 0.25), rgba(0, 196, 210, 0.10));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  vertical-align: -1px;
}

.waitlist-count-loading::after {
  content: '\200B';
}

.waitlist-count-loading.is-loaded {
  animation: none;
  background: transparent;
  color: var(--accent-warm);
  font-weight: 600;
  letter-spacing: 0.02em;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   Product preview
   -------------------------------------------------------------------------- */

.product-preview {
  padding-top: 24px;
}

.product-frame {
  position: relative;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(0, 196, 210, 0.06), rgba(0, 196, 210, 0.01));
  border: 1px solid var(--border);
  padding: 10px;
  box-shadow:
    var(--shadow-card),
    0 0 0 1px rgba(0, 196, 210, 0.08),
    0 40px 100px -40px rgba(0, 196, 210, 0.4);
  overflow: hidden;
}

.product-frame::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(0, 196, 210, 0.18) 40deg, transparent 80deg, transparent 360deg);
  animation: rotate 14s linear infinite;
  z-index: 0;
  pointer-events: none;
}

.product-frame > * {
  position: relative;
  z-index: 1;
}

@keyframes rotate {
  to { transform: rotate(360deg); }
}

.product-frame img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-xl) - 12px);
  display: block;
}

.product-mobile-note {
  text-align: center;
  margin: 22px auto 0;
  max-width: 36ch;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Workflow
   -------------------------------------------------------------------------- */

.workflow-head .workflow-subcopy {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--accent);
  text-transform: uppercase;
}

.workflow-shell {
  border-radius: var(--radius-xl);
  padding: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 196, 210, 0.02));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.workflow-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 12px;
}

.workflow-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 20px;
  border-radius: var(--radius-md);
  background: rgba(0, 196, 210, 0.03);
  border: 1px solid var(--border-soft);
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}

.workflow-step:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  background: rgba(0, 196, 210, 0.07);
}

.workflow-step-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 196, 210, 0.14), rgba(0, 196, 210, 0.04));
  border: 1px solid var(--border);
  color: var(--accent-bright);
}

.workflow-step-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workflow-step h3 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.workflow-step-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 196, 210, 0.10);
  border: 1px solid var(--border);
}

.workflow-step-label-success {
  color: var(--success);
  background: rgba(46, 229, 168, 0.10);
  border-color: rgba(46, 229, 168, 0.25);
}

.workflow-step p {
  margin: 4px 0 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.workflow-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  color: var(--accent);
  opacity: 0.65;
}

.workflow-arrow svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Features
   -------------------------------------------------------------------------- */

.features {
  padding-top: 80px;
}

.mobile-feature-stack {
  display: none;
}

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

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 196, 210, 0.015));
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), background 220ms var(--ease-out);
}

.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 196, 210, 0.10), transparent 70%);
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
  pointer-events: none;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  background: linear-gradient(180deg, rgba(0, 196, 210, 0.06), rgba(0, 196, 210, 0.02));
}

.feature-card:hover::after {
  opacity: 1;
}

.feature-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.feature-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 196, 210, 0.14), rgba(0, 230, 192, 0.05));
  border: 1px solid var(--border);
  color: var(--accent-bright);
}

.feature-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 196, 210, 0.08);
  border: 1px solid var(--border);
}

.feature-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.feature-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Builder CTA
   -------------------------------------------------------------------------- */

.builder-cta {
  padding-bottom: 120px;
}

.builder-shell {
  border-radius: var(--radius-xl);
  padding: 56px 32px;
  background: linear-gradient(160deg, rgba(0, 196, 210, 0.08), rgba(0, 230, 192, 0.04) 50%, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
}

.builder-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px circle at 15% 0%, rgba(0, 196, 210, 0.20), transparent 60%),
    radial-gradient(500px circle at 100% 100%, rgba(0, 230, 192, 0.16), transparent 60%);
  pointer-events: none;
}

.builder-shell > * {
  position: relative;
}

.builder-head {
  text-align: center;
  margin-bottom: 38px;
}

.builder-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--text);
}

.builder-showcase {
  max-width: 820px;
  margin: 0 auto;
}

.builder-composer {
  position: relative;
}

.builder-input {
  position: relative;
}

.builder-prompt-field {
  position: relative;
  border-radius: var(--radius-lg);
  background: rgba(4, 9, 12, 0.7);
  border: 1px solid var(--border);
  padding: 18px 18px 18px 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 1px rgba(0, 196, 210, 0.08),
    0 30px 80px -30px rgba(0, 196, 210, 0.35);
}

.builder-intent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.builder-intent {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 196, 210, 0.08);
  border: 1px solid var(--border);
  color: var(--accent-bright);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.builder-intent img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.builder-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(46, 229, 168, 0.20);
  animation: pulse 1.8s ease-in-out infinite;
}

.builder-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.builder-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.builder-action-pill svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.builder-action-pill:hover {
  background: rgba(0, 196, 210, 0.08);
  color: var(--text);
  border-color: var(--border);
  transform: translateY(-1px);
}

.builder-action-pill.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #02181a;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 18px -6px rgba(0, 196, 210, 0.6);
}

.builder-action-pill.is-active:hover {
  transform: none;
}

.builder-action-pill-accent {
  /* default active style; kept for semantic class */
}

.builder-stage {
  position: relative;
  min-height: 220px;
  margin-bottom: 14px;
  padding: 18px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(0, 196, 210, 0.04), rgba(0, 196, 210, 0)),
    rgba(2, 6, 10, 0.5);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}

.builder-stage-panel {
  position: absolute;
  inset: 18px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.99);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}

.builder-stage-panel.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.builder-send {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep));
  color: #02181a;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 28px -10px rgba(0, 196, 210, 0.7);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.builder-send svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.builder-send:hover {
  transform: translateY(-1px) rotate(-2deg);
  box-shadow: 0 14px 32px -10px rgba(0, 230, 192, 0.8);
}

/* Generate panel */
.builder-stage-generate {
  display: flex;
  align-items: flex-start;
  height: 100%;
  padding: 4px 4px 38px;
}

.builder-typed {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  min-height: 2.6em;
}

.builder-typed::after {
  content: '\258F';
  display: inline-block;
  margin-left: 2px;
  color: var(--accent-bright);
  animation: caret 1s steps(2) infinite;
}

@keyframes caret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Add Part panel */
.builder-stage-parts {
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.builder-stage-parts-marquee {
  display: flex;
  gap: 14px;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.builder-stage-parts-track {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
  animation: marquee 26s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.builder-part-card {
  width: 130px;
  flex-shrink: 0;
  padding: 14px 12px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}

.builder-part-card:hover {
  border-color: var(--border-strong);
  background: rgba(0, 196, 210, 0.06);
}

.builder-part-card img {
  width: 100%;
  height: 72px;
  object-fit: contain;
}

.builder-part-card span {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Breadboard panel */
.builder-stage-board {
  height: 100%;
  display: grid;
  place-items: center;
}

.builder-breadboard {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 3 / 1.05;
  background: linear-gradient(180deg, #f5ebd2 0%, #ead7b1 100%);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  grid-template-rows: 18px 1fr 18px;
  gap: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 18px 40px -18px rgba(0, 0, 0, 0.5);
}

.builder-breadboard-rails {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.builder-breadboard-rails span {
  position: relative;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(0, 0, 0, 0.18) 8px 9px),
    linear-gradient(90deg, rgba(255, 70, 70, 0.15), rgba(255, 70, 70, 0.05));
  border-radius: 4px;
  height: 14px;
}

.builder-breadboard-rails span:last-child {
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(0, 0, 0, 0.18) 8px 9px),
    linear-gradient(90deg, rgba(0, 100, 200, 0.18), rgba(0, 100, 200, 0.05));
}

.builder-breadboard-main {
  position: relative;
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(0, 0, 0, 0.07) 14px 15px),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(0, 0, 0, 0.06) 12px 13px);
  border-radius: 4px;
}

.builder-breadboard-chip {
  position: absolute;
  top: 22%;
  left: 6%;
  width: 28%;
  height: 56%;
  background: #006a6d;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 0 rgba(0, 0, 0, 0.3);
}

.builder-breadboard-chip::before {
  content: 'ARDUINO UNO';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
}

.builder-breadboard-module {
  position: absolute;
  top: 20%;
  left: 42%;
  width: 18%;
  height: 60%;
  background: #1a4f9c;
  border-radius: 3px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

.builder-breadboard-resistor {
  position: absolute;
  height: 8px;
  background: linear-gradient(90deg, #d4b283 0 25%, #2a2a2a 25% 30%, #cf6f3d 30% 40%, #2a2a2a 40% 45%, #d4b283 45% 100%);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.builder-breadboard-resistor-a {
  top: 26%;
  right: 22%;
  width: 14%;
}

.builder-breadboard-resistor-b {
  top: 58%;
  right: 28%;
  width: 12%;
}

.builder-breadboard-led {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.builder-breadboard-led-a {
  top: 28%;
  right: 5%;
  background: #ff5454;
  color: rgba(255, 84, 84, 0.7);
  animation: blink 1.4s ease-in-out infinite;
}

.builder-breadboard-led-b {
  top: 60%;
  right: 8%;
  background: var(--success);
  color: rgba(46, 229, 168, 0.7);
  animation: blink 1.4s 0.7s ease-in-out infinite;
}

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

.builder-breadboard-wire {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  transform-origin: 0 50%;
}

.builder-breadboard-wire-a { top: 35%; left: 34%; width: 8%; background: #d62828; }
.builder-breadboard-wire-b { top: 50%; left: 34%; width: 8%; background: #1f3d8a; }
.builder-breadboard-wire-c { top: 38%; left: 60%; width: 14%; background: #f4a261; }
.builder-breadboard-wire-d { top: 62%; left: 60%; width: 16%; background: #2a9d8f; }
.builder-breadboard-wire-e { top: 80%; left: 12%; width: 50%; background: #9d4edd; }

/* Schematic panel */
.builder-stage-schematic {
  height: 100%;
  display: grid;
  place-items: center;
}

.builder-stage-schematic svg {
  width: 100%;
  height: 100%;
  max-height: 200px;
  color: var(--accent-bright);
}

.builder-stage-schematic svg path,
.builder-stage-schematic svg circle {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.builder-stage-schematic svg text {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--text-muted);
}

/* PCB panel */
.builder-stage-pcb {
  height: 100%;
  display: grid;
  place-items: center;
}

.builder-pcb {
  position: relative;
  width: 100%;
  max-width: 580px;
  aspect-ratio: 16 / 7;
  background:
    radial-gradient(800px circle at 50% 50%, rgba(0, 230, 192, 0.10), transparent 60%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, var(--teal-board) 0%, var(--teal-board-dark) 100%);
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.builder-pcb-chip {
  position: absolute;
  top: 20%;
  left: 42%;
  width: 16%;
  height: 60%;
  background: #1a1a1a;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 0 rgba(0, 0, 0, 0.4);
}

.builder-pcb-silk {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.builder-pcb-silk-a { top: 8%; left: 44%; }
.builder-pcb-silk-b { top: 8%; left: 10%; }
.builder-pcb-silk-c { top: 8%; right: 12%; }

.builder-pcb-pad {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--copper);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3);
}

.builder-pcb-pad-a { top: 22%; left: 12%; }
.builder-pcb-pad-b { top: 60%; left: 12%; }
.builder-pcb-pad-c { top: 22%; right: 12%; }
.builder-pcb-pad-d { top: 60%; right: 12%; }
.builder-pcb-pad-e { top: 78%; left: 50%; }
.builder-pcb-pad-f { top: 22%; left: 50%; }

.builder-pcb-trace {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, var(--copper-dim), var(--copper));
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(201, 138, 75, 0.5);
}

.builder-pcb-trace-a { top: 26%; left: 16%; width: 26%; }
.builder-pcb-trace-b { top: 64%; left: 16%; width: 26%; }
.builder-pcb-trace-c { top: 26%; right: 16%; width: 26%; }
.builder-pcb-trace-d { top: 64%; right: 16%; width: 26%; }
.builder-pcb-trace-e { top: 80%; left: 30%; width: 22%; height: 2px; }
.builder-pcb-trace-f { top: 35%; left: 42%; width: 2px; height: 18%; }

.builder-pcb-vias {
  position: absolute;
  inset: 0;
}

.builder-pcb-vias span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0c1a1c;
  box-shadow: 0 0 0 2px var(--copper);
}

.builder-pcb-vias span:nth-child(1) { top: 12%; left: 25%; }
.builder-pcb-vias span:nth-child(2) { top: 88%; left: 24%; }
.builder-pcb-vias span:nth-child(3) { top: 12%; right: 30%; }
.builder-pcb-vias span:nth-child(4) { top: 86%; right: 22%; }
.builder-pcb-vias span:nth-child(5) { top: 48%; left: 22%; }
.builder-pcb-vias span:nth-child(6) { top: 48%; right: 22%; }

/* Simulate panel */
.builder-stage-simulate {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.builder-stage-sim-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sim-btn {
  padding: 4px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.sim-btn-run {
  background: rgba(46, 229, 168, 0.12);
  border-color: rgba(46, 229, 168, 0.3);
  color: var(--success);
}

.sim-readout {
  padding: 4px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--accent-bright);
  background: rgba(0, 196, 210, 0.08);
  border: 1px solid var(--border);
}

.builder-stage-sim-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sim-stat {
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
}

.sim-stat-live {
  color: var(--accent-bright);
  background: rgba(0, 196, 210, 0.10);
  border-color: var(--border);
}

.builder-stage-sim-wave {
  position: relative;
  flex: 1;
  min-height: 60px;
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(0, 196, 210, 0.06) 24px 25px),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(0, 196, 210, 0.04) 12px 13px),
    rgba(2, 6, 10, 0.6);
  overflow: hidden;
}

.builder-stage-sim-wave span {
  position: absolute;
  top: 50%;
  width: 200%;
  height: 2px;
  background: var(--accent-bright);
  box-shadow: 0 0 10px var(--accent-bright);
  transform: translateY(-50%);
  animation: sim-wave 4s linear infinite;
}

.builder-stage-sim-wave span:nth-child(1) { clip-path: polygon(0 0, 8% 0, 8% 100%, 16% 100%, 16% 0, 24% 0, 24% 100%, 32% 100%, 32% 0, 40% 0, 40% 100%, 48% 100%, 48% 0, 56% 0, 56% 100%, 64% 100%, 64% 0, 72% 0, 72% 100%, 80% 100%, 80% 0, 88% 0, 88% 100%, 96% 100%, 96% 0, 100% 0, 100% 100%, 0 100%); animation-delay: 0s; opacity: 0.95; }
.builder-stage-sim-wave span:nth-child(2) { display: none; }
.builder-stage-sim-wave span:nth-child(3) { display: none; }
.builder-stage-sim-wave span:nth-child(4) { display: none; }
.builder-stage-sim-wave span:nth-child(5) { display: none; }

@keyframes sim-wave {
  from { transform: translate(0, -50%); }
  to { transform: translate(-25%, -50%); }
}

.builder-stage-sim-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.builder-stage-sim-flow {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.builder-stage-sim-flow span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  animation: flow 2.4s linear infinite;
}

@keyframes flow {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.builder-stage-sim-nodes {
  display: flex;
  gap: 6px;
}

.builder-stage-sim-nodes span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-bright);
  animation: blink 1.6s ease-in-out infinite;
}

.builder-stage-sim-nodes span:nth-child(2) { animation-delay: 0.3s; background: var(--accent-warm); box-shadow: 0 0 6px var(--accent-warm); }
.builder-stage-sim-nodes span:nth-child(3) { animation-delay: 0.6s; background: var(--success); box-shadow: 0 0 6px var(--success); }

/* Serial monitor panel */
.builder-stage-serial {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.builder-stage-serial-head {
  display: flex;
  gap: 8px;
}

.serial-port,
.serial-baud {
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--accent-bright);
  background: rgba(0, 196, 210, 0.08);
}

.serial-baud {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
}

.builder-stage-serial-screen {
  flex: 1;
  border-radius: var(--radius-sm);
  background: rgba(2, 6, 10, 0.7);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  padding: 10px 14px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.builder-stage-serial-track {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text);
  animation: serial-scroll 14s linear infinite;
}

.builder-stage-serial-track span {
  color: var(--text-muted);
}

.builder-stage-serial-track span:nth-child(2n) {
  color: var(--accent-bright);
}

@keyframes serial-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* --------------------------------------------------------------------------
   Studio (drag-and-drop circuit canvas)
   -------------------------------------------------------------------------- */

.studio {
  padding-top: 32px;
  padding-bottom: 32px;
}

.studio-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 240px;
  grid-template-areas:
    "palette stage    inspector"
    "runpane runpane  runpane";
  gap: 16px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 196, 210, 0.02));
  border: 1px solid var(--border);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.studio-palette  { grid-area: palette; }
.studio-stage    { grid-area: stage; }
.studio-inspector { grid-area: inspector; }
.studio-runpane  {
  grid-area: runpane;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}

.studio-code-card,
.studio-serial-card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  max-height: 320px;          /* bounded so a long-running sim can't grow the page */
  border-radius: var(--radius-md);
  background: rgba(2, 6, 10, 0.55);
  border: 1px solid var(--border);
  overflow: hidden;
}

.studio-code-head,
.studio-serial-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(2, 6, 10, 0.5);
  flex-wrap: wrap;
}

.studio-code-head .simulator-meta,
.studio-serial-head .simulator-meta {
  margin-left: 0;
}

.studio-code-reset {
  margin-left: auto;
}

/* First "code-reset"-styled button in a row gets the auto margin; any
 * sibling code-reset buttons stack to the right with a small gap. This
 * is how the Copy + Reset / Copy + Clear pairs line up. */
.studio-code-head .studio-code-reset + .studio-code-reset,
.studio-serial-head .studio-code-reset + .studio-code-reset {
  margin-left: 4px;
}

.studio-code-reset.is-copied {
  color: var(--success);
  border-color: rgba(46, 229, 168, 0.55);
}

.studio-code-card .simulator-code {
  flex: 1;
  width: 100%;
  min-height: 220px;
  padding: 14px 16px;
  background: rgba(2, 6, 10, 0.7);
  border: 0;
  resize: vertical;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
  tab-size: 2;
  outline: none;
  /* Disable word-wrap so each visual row equals exactly one logical
     line — that's what lets the gutter line numbers stay aligned. */
  white-space: pre;
  overflow: auto;
}

.studio-code-card .simulator-code:focus {
  background: rgba(0, 196, 210, 0.04);
}

/* Line-number gutter. The wrapping .studio-code-body is a flex row so
   the gutter sits left of the textarea. The inner .studio-code-gutter-lines
   slides via translateY to mirror the textarea's scrollTop (cheaper than
   syncing scroll events on a real overflow). */
.studio-code-card .studio-code-body {
  flex: 1 1 auto;
  display: flex;
  /* Floor matches the old free-standing textarea (which had its own
     min-height: 220px). Without this, the textarea collapses to its
     2-row default and the card shrinks to ~77 px. */
  min-height: 220px;
  background: rgba(2, 6, 10, 0.7);
  overflow: hidden;
  /* The textarea's native `resize: vertical` was lost when we wrapped
     it for the gutter. Promote resize to the body so the user can drag
     the bottom edge of the editor area; the gutter + textarea flex-
     stretch to match. `overflow: hidden` above is what enables `resize`
     on a non-textarea block. */
  resize: vertical;
}

/* Drop the narrow-layout 320 px ceiling on the card so the body can
   actually grow when dragged — otherwise the cap clamps the resize. */
.studio-code-card {
  max-height: none;
}

/* Widescreen card removes its own min/max-height so the row tracks
   drive sizing — but the body still needs to be able to shrink past
   220 px when the runpane is short. Loosen the floor there. */
@media (min-width: 1400px) {
  .studio-code-card .studio-code-body {
    min-height: 0;
  }
}

.studio-code-card .studio-code-body .simulator-code {
  flex: 1 1 0;
  width: auto;
  min-height: 0;
  padding-left: 12px;
  resize: none;
  background: transparent;
}

.studio-code-gutter {
  flex: 0 0 auto;
  width: 3.25rem;
  padding: 14px 0;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(2, 6, 10, 0.35);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
  user-select: none;
  pointer-events: none;
}

.studio-code-gutter-lines {
  padding: 0 10px;
  text-align: right;
  will-change: transform;
}

.studio-code-gutter-line {
  display: block;
  font-variant-numeric: tabular-nums;
}

.studio-code-gutter-line.is-error {
  color: var(--danger);
  font-weight: 700;
}

.studio-serial-card .simulator-serial-screen {
  flex: 1;
  height: auto;
  min-height: 0;              /* lets the flex child shrink so overflow scrolls */
  /* Hard ceiling so a runaway sketch can never grow the page even if a
   * parent layout cap goes missing. The runpane cap handles the wide
   * layout; this is the belt-and-braces guard. */
  max-height: 50vh;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
}

.studio-code-card .simulator-code {
  flex: 1;
  min-height: 0;
  resize: none;               /* prevent the textarea from growing the card */
  overflow-y: auto;
}

.studio-palette,
.studio-inspector {
  border-radius: var(--radius-md);
  background: rgba(2, 6, 10, 0.55);
  border: 1px solid var(--border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 540px;
}

.studio-palette h3,
.studio-inspector h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.studio-palette-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 4px 4px 2px;
  border: 0;
  border-top: 1px dashed var(--border-soft);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
}

.studio-palette-group:hover { color: var(--text); }

.studio-palette-chev {
  width: 9px; height: 9px;
  color: var(--text-muted);
  margin-left: 6px;
  transition: transform 140ms var(--ease-out);
  flex-shrink: 0;
}

.studio-palette-group.is-collapsed .studio-palette-chev {
  transform: rotate(-90deg);
}

.studio-palette-item[data-collapsed="1"] {
  display: none;
}

/* The UA's `[hidden] { display: none }` would normally hide a
 * filtered-out item, but our `.studio-palette-item { display: flex }`
 * has equal specificity and wins by cascade order. Re-state hidden
 * with attribute specificity so the search actually hides. */
.studio-palette-item[hidden] {
  display: none;
}

.studio-palette-group[hidden] {
  display: none;
}

/* When the user types in the search box, override collapsed state so
 * matched items are reachable without expanding their group. The
 * :not([hidden]) guard prevents this override from also showing items
 * the filter has just hidden. */
.studio-palette.is-searching .studio-palette-item[data-collapsed="1"]:not([hidden]) {
  display: flex;
}

/* Palette search input. Tightened: smaller pad, smaller icon, smaller
 * font. Pinned to the top of the palette via source order. */
.studio-palette-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  margin-bottom: 6px;
  border-radius: 5px;
  background: rgba(0, 196, 210, 0.06);
  border: 1px solid var(--border);
}

.studio-palette-search svg {
  width: 10px;
  height: 10px;
  stroke: var(--text-muted);
  stroke-width: 1.6;
  fill: none;
  flex-shrink: 0;
}

.studio-palette-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.72rem;
  padding: 2px 0;
}

.studio-palette-search input::placeholder {
  color: var(--text-muted);
}

.studio-palette-empty {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  padding: 16px 6px;
  font-style: italic;
}

[data-theme="light"] .studio-palette-search {
  background: rgba(0, 122, 130, 0.05);
  border-color: rgba(0, 122, 130, 0.20);
}

.studio-palette-group:first-of-type {
  border-top: 0;
  margin-top: 2px;
}

.studio-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: grab;
  text-align: left;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 120ms var(--ease-out);
  touch-action: none;
}

.studio-palette-item:hover {
  background: rgba(0, 196, 210, 0.08);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.studio-palette-item:active {
  cursor: grabbing;
}

.studio-palette-item svg {
  flex-shrink: 0;
  width: 42px;
  height: 28px;
  display: block;
}

.studio-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.studio-stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px;
  flex-wrap: wrap;
}

.studio-actions {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.studio-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  background: rgba(2, 6, 10, 0.6);
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color 140ms var(--ease-out), background 140ms var(--ease-out), border-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.studio-action-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.studio-action-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: rgba(0, 196, 210, 0.08);
  transform: translateY(-1px);
}

.studio-action-danger:hover {
  color: var(--danger);
  border-color: rgba(255, 108, 108, 0.45);
  background: rgba(255, 108, 108, 0.10);
}

/* Demos dropdown ---------------------------------------------------------- */

.studio-action-wrapper {
  position: relative;
  display: inline-flex;
}

.studio-action-chevron {
  width: 9px !important;
  height: 9px !important;
  margin-left: 1px;
  transition: transform 140ms var(--ease-out);
}

.studio-action-wrapper.is-open .studio-action-chevron {
  transform: rotate(180deg);
}

.studio-action-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 280px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(2, 6, 10, 0.96);
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The user-agent's [hidden] { display: none } gets out-specificity'd by
 * our display:flex above. Re-state it so toggling the attribute actually
 * hides the menu. */
.studio-action-menu[hidden] {
  display: none;
}

.studio-demo-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 7px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: background 100ms var(--ease-out);
}

.studio-demo-item:hover,
.studio-demo-item:focus {
  background: rgba(0, 196, 210, 0.10);
  outline: none;
}

.studio-demo-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}

.studio-demo-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}

[data-theme="light"] .studio-action-menu {
  background: #fff;
  border-color: rgba(0, 122, 130, 0.25);
  box-shadow: 0 14px 32px rgba(0, 50, 60, 0.18);
}

[data-theme="light"] .studio-demo-item:hover,
[data-theme="light"] .studio-demo-item:focus {
  background: rgba(0, 122, 130, 0.08);
}

.studio-action-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep));
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 12px -4px rgba(0, 196, 210, 0.65);
  font-weight: 600;
}

.studio-action-primary:hover {
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent-warm), var(--accent));
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.studio-action-primary svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  stroke: none;
}

.studio-action-primary:disabled {
  opacity: 0.85;
  cursor: progress;
  transform: none;
}

.studio-action-primary.is-running {
  background: linear-gradient(135deg, var(--warn), #c87a14);
  color: #2a1e08;
  cursor: pointer;
  animation: studio-run-pulse 1.2s ease-in-out infinite;
}

@keyframes studio-run-pulse {
  0%, 100% { box-shadow: 0 4px 12px -4px rgba(255, 181, 71, 0.6); }
  50%      { box-shadow: 0 4px 24px -4px rgba(255, 181, 71, 0.9); }
}

.studio-view-toggle {
  display: inline-flex;
  background: rgba(2, 6, 10, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.studio-view-toggle button {
  padding: 5px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  border: 0;
  cursor: pointer;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}

.studio-view-toggle button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 4px 12px -4px rgba(0, 196, 210, 0.6);
}

.studio-soon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.65rem;
  background: rgba(255, 181, 71, 0.16);
  color: var(--warn);
  letter-spacing: 0.04em;
}

.studio-help {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.studio-help kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  border-radius: 4px;
  background: rgba(0, 196, 210, 0.10);
  color: var(--accent-bright);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  border: 1px solid var(--border);
}

.studio-canvas {
  width: 100%;
  height: 600px;
  border-radius: var(--radius-md);
  background:
    radial-gradient(900px 500px at 50% 30%, rgba(0, 196, 210, 0.05), transparent 70%),
    rgba(2, 6, 10, 0.65);
  border: 1px solid var(--border);
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.studio-canvas:active {
  cursor: grabbing;
}

/* JSON view: hide the canvas, show the editor. */
.studio-json-pane {
  display: none;
  flex-direction: column;
  gap: 8px;
  height: 700px;
  background: rgba(2, 6, 10, 0.65);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
}

.studio-shell[data-view="json"] .studio-canvas { display: none; }
.studio-shell[data-view="json"] .studio-json-pane { display: flex; }

.studio-json-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.studio-json-title {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent-bright);
  font-weight: 600;
}

.studio-json-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  flex: 1;
  min-width: 240px;
}

.studio-json-head .studio-action-btn {
  margin-left: auto;
}

.studio-json-editor {
  flex: 1;
  min-height: 0;
  resize: none;
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(2, 6, 10, 0.85);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  tab-size: 2;
  outline: none;
}

.studio-json-editor:focus {
  border-color: var(--accent);
  background: rgba(2, 6, 10, 0.95);
}

.studio-json-status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--success);
  min-height: 1em;
}

.studio-json-status.is-err {
  color: var(--danger);
}

[data-theme="light"] .studio-json-pane {
  background: rgba(0, 122, 130, 0.05);
  border-color: rgba(0, 122, 130, 0.20);
}

[data-theme="light"] .studio-json-editor {
  background: #ffffff;
  border-color: rgba(0, 122, 130, 0.20);
  color: var(--text);
}

[data-theme="light"] .studio-json-editor:focus {
  border-color: var(--accent);
  background: #ffffff;
}

.studio-shell[data-view="schematic"] .studio-canvas {
  background:
    radial-gradient(900px 500px at 50% 30%, rgba(0, 230, 192, 0.06), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0, 196, 210, 0.04) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(0, 196, 210, 0.04) 0 1px, transparent 1px 24px),
    rgba(2, 6, 10, 0.75);
}

/* Interactive bits */
.studio-button-plunger {
  cursor: pointer;
  transition: r 120ms var(--ease-out), fill 120ms var(--ease-out);
}

.studio-pot-knob {
  cursor: grab;
}

.studio-pot-knob:active {
  cursor: grabbing;
}

.studio-inspector-toggle {
  padding: 7px 14px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}

.studio-inspector-toggle:hover {
  background: rgba(0, 196, 210, 0.10);
  color: var(--text);
}

.studio-inspector-toggle.is-on {
  background: linear-gradient(135deg, var(--success), #1aa874);
  color: #02181a;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Components */
.studio-component {
  cursor: grab;
}

.studio-component:active {
  cursor: grabbing;
}

.studio-component.is-selected {
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 6px rgba(0, 196, 210, 0.7));
}

.studio-component text {
  pointer-events: none;
  user-select: none;
}

/* Pins — wrap holds a transparent hit overlay and the visible dot. */
.studio-pin-wrap .studio-pin {
  fill: rgba(255, 255, 255, 0.18);
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 0.8;
  pointer-events: none;
  transition: fill 120ms var(--ease-out), stroke 120ms var(--ease-out), r 120ms var(--ease-out);
}

.studio-pin-wrap .studio-pin-hit {
  fill: transparent;
  cursor: crosshair;
}

.studio-pin[data-kind="digital"],
.studio-pin[data-kind="power"],
.studio-pin[data-kind="analog"] {
  fill: #2a2a2a;
  stroke: rgba(255, 255, 255, 0.3);
}

.studio-pin[data-kind="rail-plus"] {
  fill: rgba(220, 60, 60, 0.5);
  stroke: rgba(220, 60, 60, 0.85);
}

.studio-pin[data-kind="rail-minus"] {
  fill: rgba(40, 90, 200, 0.5);
  stroke: rgba(40, 90, 200, 0.85);
}

.studio-pin[data-kind="tie"] {
  fill: rgba(255, 255, 255, 0.22);
  stroke: rgba(0, 0, 0, 0.35);
}

/* Hover the larger hit-target → light the visible sibling */
.studio-pin-wrap .studio-pin-hit:hover ~ .studio-pin,
.studio-pin-wrap .studio-pin-hit.is-wiring ~ .studio-pin,
.studio-pin-wrap .studio-pin-hit.is-snap ~ .studio-pin {
  fill: var(--accent-bright);
  stroke: var(--accent-warm);
  stroke-width: 1.4;
  r: 5.5;
}

/* Snap target gets an additional ring */
.studio-pin-wrap .studio-pin-hit.is-snap ~ .studio-pin {
  filter: drop-shadow(0 0 4px var(--accent-bright));
}

/* Wires */
.studio-wire {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  cursor: pointer;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

.studio-wire:hover {
  stroke-width: 4;
}

.studio-wire-pending {
  stroke: var(--accent-bright);
  stroke-dasharray: 4 4;
  opacity: 0.85;
  pointer-events: none;
}

.studio-wire.is-selected {
  filter: drop-shadow(0 0 6px rgba(0, 196, 210, 0.9)) drop-shadow(0 1px 1px rgba(0,0,0,0.5));
  stroke-width: 4;
}

.studio-pin-tooltip {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  background: rgba(2, 6, 10, 0.94);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.7);
  transform: translateY(-2px);
}

.studio-pin-tooltip strong {
  color: var(--accent-bright);
  font-weight: 600;
}

.studio-pin-tooltip span {
  color: var(--text-muted);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.studio-inspector-section {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.studio-inspector-conns {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.studio-inspector-conns-empty {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  padding: 4px 0;
  font-style: italic;
}

.studio-inspector-conn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  border-top: 1px dashed var(--border-soft);
}

.studio-inspector-conn:first-of-type {
  border-top: 0;
}

.studio-inspector-pin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-weight: 500;
}

.studio-inspector-pin i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.studio-inspector-peer {
  color: var(--text-muted);
  font-size: 0.68rem;
  text-align: right;
  flex: 1;
  min-width: 0;
}

.studio-inspector-peer em {
  color: var(--text-dim);
  font-style: normal;
  margin-left: 4px;
}

.studio-inspector-wire {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 196, 210, 0.04);
  border: 1px solid var(--border-soft);
}

.studio-inspector-row-wire {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
}

.studio-inspector-row-wire-arrow {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-family: var(--font-mono);
}

.studio-inspector-actions-wire {
  grid-template-columns: 1fr;
}

.studio-wire.is-pulse-high {
  animation: studio-wire-pulse-high 320ms ease-out;
}

.studio-wire.is-pulse-low {
  animation: studio-wire-pulse-low 320ms ease-out;
}

@keyframes studio-wire-pulse-high {
  0%   { filter: drop-shadow(0 0 0 rgba(255, 230, 109, 0)) drop-shadow(0 1px 1px rgba(0,0,0,0.5)); stroke-width: 3; }
  35%  { filter: drop-shadow(0 0 8px rgba(255, 230, 109, 0.9)) drop-shadow(0 1px 1px rgba(0,0,0,0.5)); stroke-width: 4; }
  100% { filter: drop-shadow(0 0 0 rgba(255, 230, 109, 0)) drop-shadow(0 1px 1px rgba(0,0,0,0.5)); stroke-width: 3; }
}

@keyframes studio-wire-pulse-low {
  0%   { filter: drop-shadow(0 0 0 rgba(0, 196, 210, 0)) drop-shadow(0 1px 1px rgba(0,0,0,0.5)); stroke-width: 3; }
  35%  { filter: drop-shadow(0 0 6px rgba(0, 196, 210, 0.7)) drop-shadow(0 1px 1px rgba(0,0,0,0.5)); stroke-width: 4; }
  100% { filter: drop-shadow(0 0 0 rgba(0, 196, 210, 0)) drop-shadow(0 1px 1px rgba(0,0,0,0.5)); stroke-width: 3; }
}

/* Inspector */
.studio-inspector-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.studio-inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}

.studio-inspector-head strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.studio-inspector-id {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
}

.studio-inspector-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.studio-inspector-row input,
.studio-inspector-row select {
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(2, 6, 10, 0.7);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
}

/* Selects: kill the browser's native chevron, draw our own once. */
.studio-inspector-row select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d9ea2' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 30px;
}

.studio-inspector-row select::-ms-expand { display: none; }

.studio-inspector-row input:focus,
.studio-inspector-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 196, 210, 0.18);
}

.studio-inspector-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.studio-inspector-actions button {
  padding: 7px 6px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}

.studio-inspector-actions button:hover {
  background: rgba(0, 196, 210, 0.08);
  border-color: var(--border-strong);
}

.studio-inspector-actions button[data-action="delete"]:hover {
  background: rgba(255, 108, 108, 0.12);
  border-color: rgba(255, 108, 108, 0.4);
  color: var(--danger);
}

/* Drag ghost */
.studio-drag-ghost {
  position: fixed;
  z-index: 80;
  width: 60px;
  height: 40px;
  pointer-events: none;
  opacity: 0.92;
  background: rgba(0, 196, 210, 0.10);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 8px 24px -8px rgba(0, 196, 210, 0.6);
}

.studio-drag-ghost svg {
  width: 100%;
  height: 100%;
}

/* Responsive */
/* Widescreen: pull the runpane up next to the canvas, expand the section. */
@media (min-width: 1400px) {
  .section.studio {
    max-width: min(94vw, 1760px);
  }
  .studio-shell {
    grid-template-columns: 220px minmax(0, 1.4fr) minmax(0, 1fr) 260px;
    grid-template-areas: "palette stage runpane inspector";
  }
  .studio-runpane {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.05fr) minmax(0, 1fr);
    /* Match the canvas height so the cards distribute within a bounded
     * region — without this, a long serial stream grows the page. */
    max-height: 700px;
    overflow: hidden;
  }
  .studio-canvas {
    height: 700px;
  }
  .studio-palette,
  .studio-inspector {
    min-height: 700px;
  }
  .studio-code-card,
  .studio-serial-card {
    min-height: 0;
    /* The runpane row tracks now provide the cap; cards flex within. */
    max-height: none;
  }
}

@media (min-width: 1800px) {
  .studio-shell {
    grid-template-columns: 240px minmax(0, 1.5fr) minmax(0, 1.05fr) 280px;
  }
  .studio-canvas {
    height: 780px;
  }
  .studio-runpane {
    max-height: 780px;
  }
}

@media (max-width: 1080px) {
  .studio-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "palette"
      "inspector"
      "runpane";
  }
  .studio-runpane {
    grid-template-columns: 1fr;
  }
  /* Palette stays vertical on mobile (was horizontal-scroll in the old
   * layout) so the new search bar and labels stay readable. The whole
   * pane caps its height so it doesn't push runpane way down. */
  .studio-palette {
    max-height: 280px;
    overflow-y: auto;
  }
  .studio-inspector {
    min-height: 0;
  }
  .studio-canvas {
    height: 460px;
  }
  /* ----- Mobile action toolbar layout -----
   *
   * Three-tier visual hierarchy on phone-class screens:
   *   1. Run (full-width primary CTA, top)
   *   2. Undo · Redo · Fit · Full · Clear  (icon-only square buttons, middle)
   *   3. Demos (text button, easy to spot)
   *
   * The wrapping is done by `flex-wrap` + `order` so we don't fight
   * the existing DOM. Icon-only buttons hide their text via
   * `font-size: 0` on a label span (text node fallback uses
   * width-zero whitespace styling).
   */
  .studio-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-left: 0;        /* override the desktop `margin-left: auto` */
    box-sizing: border-box;
  }
  .studio-action-btn {
    box-sizing: border-box;
    max-width: 100%;
  }
  .studio-stage-bar {
    align-items: stretch;
  }
  .studio-action-btn {
    padding: 8px 14px;
    font-size: 0.78rem;
    min-height: 40px;
  }
  /* Run = full-width primary CTA on top. */
  .studio-action-primary {
    width: 100%;
    min-height: 44px;
    font-size: 0.95rem;
    padding: 10px 18px;
    justify-content: center;
    order: -2;
    margin-bottom: 2px;
  }
  .studio-action-primary svg {
    width: 14px;
    height: 14px;
  }
  /* Demos: full text button, sits BELOW Run, ABOVE the icon row. */
  .studio-action-wrapper {
    display: flex;
    width: 100%;
    flex-basis: 100%;
    flex-grow: 1;
    order: -1;
  }
  .studio-action-wrapper .studio-action-btn[data-studio-action="demos-toggle"] {
    width: 100%;
    flex: 1;
    justify-content: center;
    min-height: 40px;
    font-size: 0.85rem;
  }
  /* Compact icon-only row for secondary actions. Each button is
   * 40×40, no text. We hide the trailing text node by zero-sizing the
   * button's font but keeping the SVG's own intrinsic size. */
  .studio-action-btn[data-studio-action="undo"],
  .studio-action-btn[data-studio-action="redo"],
  .studio-action-btn[data-studio-action="fit"],
  .studio-action-btn[data-studio-action="fullscreen"],
  .studio-action-btn[data-studio-action="clear"] {
    flex: 1 1 0;
    min-width: 0;
    width: 0;            /* allow flex to fully drive the width */
    padding: 8px 10px;
    font-size: 0;          /* hide the text label */
    gap: 0;
    justify-content: center;
  }
  .studio-action-btn[data-studio-action="fullscreen"] span {
    display: none;          /* drop the "Full" label */
  }
  .studio-action-btn[data-studio-action="undo"] svg,
  .studio-action-btn[data-studio-action="redo"] svg,
  .studio-action-btn[data-studio-action="fit"] svg,
  .studio-action-btn[data-studio-action="fullscreen"] svg,
  .studio-action-btn[data-studio-action="clear"] svg {
    width: 18px;
    height: 18px;
  }
  /* The Demos menu popover should drop to full width on phones, not
   * float anchored to a small button. */
  .studio-action-menu {
    left: 0;
    right: 0;
    min-width: 0;
    width: 100%;
  }
  .studio-view-toggle button {
    padding: 7px 14px;
    font-size: 0.8rem;
  }
  .studio-stage-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .studio-help {
    display: none;               /* keyboard shortcuts are irrelevant on touch */
  }
}

/* Phone-class screens: cards full-width, palette in a 2-col grid that
 * gives each item a finger-sized hit area. */
@media (max-width: 560px) {
  .studio-palette-item {
    padding: 10px 12px;
    font-size: 0.84rem;
  }
  /* Keep the view-toggle pills from shrinking past their text, but
   * DO let the action buttons shrink — they share a flex row and
   * each holds only an icon, so equal-flex is what we want. */
  .studio-view-toggle button {
    flex-shrink: 0;
  }
}

/* --------------------------------------------------------------------------
   Simulator (live demo)
   -------------------------------------------------------------------------- */

.simulator {
  padding-top: 80px;
  padding-bottom: 80px;
}

.kbd {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--accent-bright);
  background: rgba(0, 196, 210, 0.10);
  border: 1px solid var(--border);
  vertical-align: 1px;
}

.simulator-shell {
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 196, 210, 0.02));
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.simulator-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(2, 6, 10, 0.5);
  flex-wrap: wrap;
}

.simulator-toolbar-left,
.simulator-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.simulator-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--accent-bright);
  background: rgba(0, 196, 210, 0.08);
  border: 1px solid var(--border);
}

.simulator-build-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.btn-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.btn-icon:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: rgba(0, 196, 210, 0.06);
}

.btn-icon-accent {
  color: #02181a;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep));
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 16px -6px rgba(0, 196, 210, 0.7);
}

.btn-icon-accent svg {
  fill: currentColor;
  stroke: none;
}

.btn-icon-accent:hover {
  transform: translateY(-1px);
  color: #02181a;
}

.btn-icon-ghost {
  background: transparent;
}

.simulator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.simulator-editor,
.simulator-board {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
}

.simulator-editor {
  border-right: 1px solid var(--border);
}

.simulator-editor-head,
.simulator-board-head,
.simulator-serial-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(2, 6, 10, 0.4);
  flex-wrap: wrap;
}

.simulator-tab {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.simulator-tab.is-active {
  color: var(--accent-bright);
  background: rgba(0, 196, 210, 0.08);
  border-color: var(--border);
}

.simulator-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.simulator-code {
  flex: 1;
  width: 100%;
  min-height: 320px;
  padding: 16px;
  background: rgba(2, 6, 10, 0.6);
  border: 0;
  resize: vertical;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
  tab-size: 2;
  outline: none;
}

.simulator-code:focus {
  background: rgba(0, 196, 210, 0.04);
}

/* --- Virtual board ----------------------------------------------------- */

.simulator-board-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: rgba(2, 6, 10, 0.45);
}

.virtual-board {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 16 / 11;
  background:
    radial-gradient(800px circle at 50% 50%, rgba(0, 230, 192, 0.12), transparent 65%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, var(--teal-board) 0%, var(--teal-board-dark) 100%);
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.22), 0 24px 50px -28px rgba(0, 0, 0, 0.6);
  padding: 22px 12px 22px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}

.virtual-board-label {
  position: absolute;
  top: 6px;
  left: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.virtual-board-usb {
  position: absolute;
  top: 30%;
  left: -10px;
  width: 22px;
  height: 38px;
  background: #2a2a2a;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.virtual-board-power {
  position: absolute;
  top: 64%;
  left: -8px;
  width: 18px;
  height: 18px;
  background: #1a1a1a;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.virtual-board-pinrow {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 4px;
  padding: 0 6px;
}

.virtual-board-pinrow-bottom {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.virtual-board-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.virtual-board-pin i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 2px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.virtual-board-pin em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.65);
}

.virtual-board-pin.is-high i {
  background: #ffd166;
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.virtual-board-pin.is-low i {
  background: #2a3a3c;
}

.virtual-board-pin.is-input i {
  background: #1f6f74;
  box-shadow: 0 0 8px rgba(0, 196, 210, 0.5);
}

.virtual-board-led {
  position: absolute;
  top: 38%;
  right: 12%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1a2a2c;
  border: 2px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.virtual-board-led.is-on {
  background: #ffe66d;
  box-shadow: 0 0 24px rgba(255, 230, 109, 0.85), 0 0 6px #fff inset;
}

.simulator-pin-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.simulator-pin-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pin-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2a3a3c;
  display: inline-block;
}

.pin-dot-high { background: #ffd166; box-shadow: 0 0 8px rgba(255, 209, 102, 0.6); }
.pin-dot-low { background: #2a3a3c; }
.pin-dot-input { background: #1f6f74; box-shadow: 0 0 6px rgba(0, 196, 210, 0.5); }

/* --- Serial monitor ---------------------------------------------------- */

.simulator-serial {
  padding-bottom: 6px;
}

.simulator-serial-head .btn-icon {
  margin-left: auto;
}

/* Serial monitor wears a subtle "phosphor terminal" skin so it reads as
   device output, distinct from the editor (calm input). Semantic line
   classes (.is-warn / .is-err / .is-ok / .is-sys) override colour AND
   retint the bloom so warnings glow amber, errors red, etc. */
.simulator-serial-screen {
  height: 200px;
  overflow-y: auto;
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--phosphor, #7cf2c0);
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(46, 229, 168, 0.08), transparent 65%),
    #02080a;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 242, 192, 0.35) transparent;
}

.simulator-serial-screen::-webkit-scrollbar {
  width: 8px;
}

.simulator-serial-screen::-webkit-scrollbar-thumb {
  background: rgba(124, 242, 192, 0.35);
  border-radius: 4px;
}

.simulator-serial-line {
  display: flex;
  gap: 12px;
  padding: 1px 0;
}

.simulator-serial-time {
  color: rgba(124, 242, 192, 0.45);
  flex-shrink: 0;
  width: 7ch;
}

.simulator-serial-msg {
  color: #7cf2c0;
  text-shadow: 0 0 6px rgba(124, 242, 192, 0.22);
  white-space: pre-wrap;
  word-break: break-word;
}

.simulator-serial-msg.is-sys  { color: rgba(124, 242, 192, 0.55); font-style: italic; text-shadow: none; }
.simulator-serial-msg.is-warn { color: var(--warn);    text-shadow: 0 0 6px rgba(255, 196, 100, 0.22); }
.simulator-serial-msg.is-err  { color: var(--danger);  text-shadow: 0 0 6px rgba(255, 100, 100, 0.24); }
.simulator-serial-msg.is-ok   { color: var(--success); text-shadow: 0 0 6px rgba(124, 242, 192, 0.28); }

/* Simulator responsive */
@media (max-width: 900px) {
  .simulator-grid {
    grid-template-columns: 1fr;
  }
  .simulator-editor {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .virtual-board {
    max-width: 360px;
  }
}

@media (max-width: 560px) {
  .virtual-board-pinrow {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .virtual-board-pinrow-bottom {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact {
  padding-bottom: 100px;
}

/* --------------------------------------------------------------------------
   Docs page (/apps/simduino/docs.php)
   -------------------------------------------------------------------------- */

.section.docs {
  padding-top: 48px;
  padding-bottom: 64px;
}

.docs-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.docs-toc {
  position: sticky;
  top: 80px;
  font-size: 0.82rem;
  padding: 16px 14px;
  border-radius: var(--radius-md);
  background: rgba(2, 6, 10, 0.5);
  border: 1px solid var(--border);
}

.docs-toc-title {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.docs-toc ol {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.docs-toc a {
  color: var(--text-dim);
}

.docs-toc a:hover {
  color: var(--accent-bright);
}

.docs-body {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
  max-width: 880px;
}

.docs-body h3 {
  margin: 36px 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  scroll-margin-top: 80px;
}

.docs-body h3:first-child {
  margin-top: 0;
}

.docs-body p {
  margin: 0 0 14px;
  color: var(--text-dim);
}

.docs-body strong {
  color: var(--text);
  font-weight: 600;
}

.docs-body ul,
.docs-body ol {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--text-dim);
}

.docs-body ul li,
.docs-body ol li {
  margin: 4px 0;
}

.docs-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--accent-bright);
  background: rgba(0, 196, 210, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
}

.docs-body pre {
  background: rgba(2, 6, 10, 0.7);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  overflow-x: auto;
  margin: 0 0 18px;
}

.docs-body pre code {
  background: none;
  padding: 0;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.6;
}

.docs-body a {
  color: var(--accent-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.docs-body a:hover {
  color: var(--accent-warm);
}

.docs-body kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: var(--accent-bright);
  background: rgba(0, 196, 210, 0.10);
  border: 1px solid var(--border);
}

.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 0.88rem;
}

.docs-table th,
.docs-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.docs-table th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  background: rgba(0, 196, 210, 0.04);
}

.docs-table tbody tr:hover {
  background: rgba(0, 196, 210, 0.03);
}

.docs-demo-list li {
  margin: 6px 0;
}

.docs-steps {
  counter-reset: docs-step;
}

/* Figures + inline SVG diagrams. */
.docs-figure {
  margin: 18px 0 26px;
  padding: 14px 16px 12px;
  border-radius: var(--radius-md);
  background: rgba(0, 196, 210, 0.025);
  border: 1px solid var(--border);
}

.docs-figure figcaption {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

.docs-svg {
  width: 100%;
  height: auto;
  display: block;
  color: var(--text-dim);            /* sets currentColor for arrows/strokes */
}

.docs-svg-box rect {
  fill: rgba(2, 6, 10, 0.55);
  stroke: var(--border-strong);
  stroke-width: 1;
}

.docs-svg-box-accent rect {
  fill: rgba(0, 196, 210, 0.10);
  stroke: var(--accent);
  stroke-width: 1.4;
}

.docs-svg-box-board rect {
  fill: rgba(0, 139, 142, 0.20);
  stroke: var(--accent-deep);
}

.docs-svg-title {
  fill: var(--text);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}

.docs-svg-sub {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
}

.docs-svg-pin {
  fill: var(--accent-bright);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
}

.docs-svg-caption {
  fill: var(--text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-style: italic;
}

.docs-svg-caption-bold {
  fill: var(--text);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.docs-svg-sub-mono {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
}

.docs-svg-glyph {
  stroke: var(--accent-bright);
  stroke-width: 1.4;
  fill: none;
}

.docs-svg-box-accent .docs-svg-glyph {
  stroke: var(--accent-warm);
}

.docs-svg-grid path {
  stroke-width: 1;
}

.docs-svg-box-result rect {
  fill: rgba(46, 229, 168, 0.07);
  stroke: rgba(46, 229, 168, 0.30);
  stroke-width: 1;
}

.docs-svg-wire {
  stroke: var(--accent);
}

.docs-svg-led circle {
  fill: rgba(255, 84, 84, 0.6);
  stroke: rgba(255, 84, 84, 0.8);
  filter: drop-shadow(0 0 4px rgba(255, 84, 84, 0.45));
}

.docs-svg-resistor {
  fill: #d4b283;
  stroke: #7a5b34;
}

.docs-svg-schem {
  stroke: var(--accent-bright);
  stroke-width: 1.6;
  fill: none;
}

.docs-svg-mono {
  fill: var(--accent-bright);
  font-family: var(--font-mono);
  font-size: 10px;
}

.docs-svg-box circle {
  fill: var(--accent);
}

/* Active TOC entry while scrolling */
.docs-toc a.is-active {
  color: var(--accent-bright);
  font-weight: 600;
}

[data-theme="light"] .docs-figure {
  background: rgba(0, 122, 130, 0.04);
  border-color: rgba(0, 122, 130, 0.20);
}

[data-theme="light"] .docs-svg-box rect {
  fill: rgba(255, 255, 255, 0.85);
  stroke: rgba(0, 122, 130, 0.30);
}

[data-theme="light"] .docs-svg-box-accent rect {
  fill: rgba(0, 122, 130, 0.10);
  stroke: var(--accent);
}

[data-theme="light"] .docs-svg-box-board rect {
  fill: rgba(0, 139, 142, 0.15);
  stroke: var(--accent-deep);
}

@media (max-width: 900px) {
  .docs-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .docs-toc {
    position: static;
  }
}

[data-theme="light"] .docs-toc {
  background: rgba(0, 122, 130, 0.05);
  border-color: rgba(0, 122, 130, 0.20);
}

[data-theme="light"] .docs-body pre {
  background: rgba(0, 122, 130, 0.04);
  border-color: rgba(0, 122, 130, 0.18);
}

[data-theme="light"] .docs-body pre code {
  color: var(--text);
}

[data-theme="light"] .docs-table th {
  background: rgba(0, 122, 130, 0.06);
}

[data-theme="light"] .docs-body code,
[data-theme="light"] .docs-body kbd {
  background: rgba(0, 122, 130, 0.10);
}

.contact-card {
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 196, 210, 0.02));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.contact-head {
  text-align: center;
  margin-bottom: 22px;
}

.contact-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--text);
}

.contact-head p {
  margin: 0;
  color: var(--text-muted);
}

.contact-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-soft);
  color: var(--text);
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}

.contact-link:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  background: rgba(0, 196, 210, 0.06);
  color: var(--text);
}

.contact-link svg,
.contact-link img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent-bright);
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.contact-link-instagram:hover { color: #ff4d8d; }
.contact-link-instagram:hover svg { color: #ff4d8d; }
.contact-link-x:hover { color: var(--text); }
.contact-link-x:hover svg { color: var(--text); }

.contact-link-muted {
  opacity: 0.55;
  cursor: default;
}

.contact-link-muted:hover {
  transform: none;
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.025);
}

.contact-link-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-link-copy strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
}

.contact-link-copy span {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.contact-soon {
  color: var(--warn) !important;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 40px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.footer p {
  margin: 0;
}

.footer .footer-credit {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  opacity: 0.75;
}

.footer .footer-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.is-open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 10, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: modal-fade 220ms var(--ease-out);
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 32px 28px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #08151a, #04090c);
  border: 1px solid var(--border-strong);
  box-shadow:
    0 30px 90px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 196, 210, 0.15);
  animation: modal-pop 280ms var(--ease-out);
}

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

@keyframes modal-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}

.modal-close:hover {
  background: rgba(0, 196, 210, 0.10);
  color: var(--text);
}

.modal-card h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.modal-copy {
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.waitlist-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.waitlist-form input,
.waitlist-form select,
.waitlist-form textarea {
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(2, 6, 10, 0.7);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
  outline: none;
}

.waitlist-form input:focus,
.waitlist-form select:focus,
.waitlist-form textarea:focus {
  border-color: var(--accent);
  background: rgba(0, 196, 210, 0.06);
  box-shadow: 0 0 0 3px rgba(0, 196, 210, 0.18);
}

.waitlist-form textarea {
  resize: vertical;
  min-height: 60px;
}

.waitlist-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d9ea2' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

.waitlist-form select option {
  background: #08151a;
  color: var(--text);
}

.waitlist-form .btn {
  margin-top: 8px;
  justify-content: center;
}

.waitlist-form .btn[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.hp-field {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 6px 0 0;
  font-size: 0.85rem;
  min-height: 1.2em;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.form-status.is-error {
  color: var(--danger);
}

.form-status.is-success {
  color: var(--success);
}

/* --------------------------------------------------------------------------
   Reveal animations
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .workflow-flow {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .workflow-arrow {
    display: none;
  }
  .workflow-shell {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 64px 20px;
  }
  .section-head {
    margin-bottom: 32px;
  }
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: revert;
  }
  .nav-links {
    display: none;
  }
  .nav-waitlist-full {
    display: none;
  }
  .nav-waitlist-short {
    display: inline;
  }
  .top-nav {
    padding: 14px 20px;
  }
  .hero {
    padding-top: 24px;
    padding-bottom: 56px;
  }
  .mobile-hero-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    margin: 12px 0 28px;
  }
  .mobile-hero-lockup img {
    height: 64px;
    width: auto;
  }
  .mobile-hero-tagline {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    background: linear-gradient(120deg, var(--accent-bright), var(--accent-warm));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .hero-badge-mobile {
    margin: 0;
  }
  .mobile-hero-copy {
    max-width: 30ch;
    margin: 0 auto 24px;
    font-size: 1rem;
    color: var(--text-muted);
    text-align: center;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .features .section-head,
  .features .feature-grid {
    display: none;
  }
  .mobile-feature-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .mobile-feature-head h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 6px 0 0;
  }
  .mobile-feature-kicker {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .mobile-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .mobile-feature-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: rgba(0, 196, 210, 0.04);
    border: 1px solid var(--border);
  }
  .mobile-feature-card strong {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
  }
  .mobile-feature-card span {
    font-size: 0.92rem;
    color: var(--text-muted);
  }
  .workflow-flow {
    grid-template-columns: 1fr;
  }
  .workflow-arrow {
    display: none;
  }
  .builder-shell {
    padding: 32px 18px;
  }
  .builder-action-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-left: -4px;
    margin-right: -4px;
    padding: 0 4px 6px;
    scrollbar-width: none;
  }
  .builder-action-row::-webkit-scrollbar {
    display: none;
  }
  .builder-action-pill {
    flex-shrink: 0;
  }
  .builder-stage {
    min-height: 200px;
  }
  .contact-card {
    padding: 32px 20px;
  }
  .modal-card {
    padding: 28px 20px;
  }
  .footer {
    padding: 32px 20px;
    text-align: center;
    justify-content: center;
  }
  .product-frame {
    padding: 6px;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    width: 100%;
    flex-direction: column;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .btn {
    padding: 12px 18px;
  }
  .builder-part-card {
    width: 110px;
  }
  .builder-part-card img {
    height: 56px;
  }
}

/* ==========================================================================
   LIGHT THEME — element overrides
   The :root [data-theme="light"] block handles all variable-driven elements.
   These rules cover the spots that hard-coded dark literals before the
   --surface-* tokens existed.
   ========================================================================== */

[data-theme="light"] body {
  background: var(--bg);
}

[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(rgba(0, 122, 130, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 122, 130, 0.08) 1px, transparent 1px);
}

[data-theme="light"] .bg-glow {
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(0, 196, 210, 0.10), transparent 60%),
    radial-gradient(800px 500px at 90% 10%, rgba(0, 230, 192, 0.06), transparent 60%),
    radial-gradient(700px 450px at 50% 110%, rgba(0, 196, 210, 0.06), transparent 65%);
}

[data-theme="light"] .bg-noise {
  opacity: 0.03;
  mix-blend-mode: multiply;
}

[data-theme="light"] .bg-traces {
  opacity: 0.45;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(0, 122, 130, 0.5) 0 1.5px, transparent 2px),
    radial-gradient(circle at 88% 18%, rgba(0, 150, 130, 0.4) 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 80%, rgba(0, 122, 130, 0.45) 0 1.5px, transparent 2px),
    radial-gradient(circle at 25% 75%, rgba(0, 150, 130, 0.35) 0 1.5px, transparent 2px);
}

[data-theme="light"] .top-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
}

[data-theme="light"] .top-nav.is-scrolled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78));
}

/* Studio surfaces */
[data-theme="light"] .studio-shell,
[data-theme="light"] .workflow-shell,
[data-theme="light"] .product-frame,
[data-theme="light"] .contact-card,
[data-theme="light"] .feature-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(0, 122, 130, 0.03));
}

[data-theme="light"] .studio-palette,
[data-theme="light"] .studio-inspector,
[data-theme="light"] .studio-code-card,
[data-theme="light"] .studio-serial-card {
  background: var(--surface-1);
}

[data-theme="light"] .studio-canvas {
  background:
    radial-gradient(900px 500px at 50% 30%, rgba(0, 196, 210, 0.06), transparent 70%),
    var(--surface-canvas);
}

[data-theme="light"] .studio-shell[data-view="schematic"] .studio-canvas {
  background:
    radial-gradient(900px 500px at 50% 30%, rgba(0, 230, 192, 0.05), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0, 122, 130, 0.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(0, 122, 130, 0.06) 0 1px, transparent 1px 24px),
    var(--surface-canvas);
}

[data-theme="light"] .studio-code-card .simulator-code,
[data-theme="light"] .studio-serial-card .simulator-serial-screen,
[data-theme="light"] .simulator-code,
[data-theme="light"] .simulator-serial-screen,
[data-theme="light"] .studio-code-card .studio-code-body {
  background: var(--surface-2);
  color: var(--text);
}

[data-theme="light"] .studio-code-gutter {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-dim);
  border-right-color: rgba(0, 0, 0, 0.08);
}

/* Strip the phosphor bloom in light mode — the green-on-white would
   shimmer. Semantic colours still apply via their own rules. */
[data-theme="light"] .simulator-serial-msg {
  color: var(--text);
  text-shadow: none;
}
[data-theme="light"] .simulator-serial-time {
  color: var(--text-dim);
}

[data-theme="light"] .studio-code-card .simulator-code:focus {
  background: rgba(0, 196, 210, 0.06);
}

[data-theme="light"] .studio-code-head,
[data-theme="light"] .studio-serial-head {
  background: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .studio-view-toggle,
[data-theme="light"] .studio-action-btn,
[data-theme="light"] .studio-build-tag,
[data-theme="light"] .simulator-build-tag,
[data-theme="light"] .simulator-toolbar,
[data-theme="light"] .builder-prompt-field {
  background: rgba(255, 255, 255, 0.75);
}

[data-theme="light"] .studio-pin-tooltip {
  background: var(--surface-3);
  color: var(--text);
}

[data-theme="light"] .studio-pin-tooltip strong {
  color: var(--accent);
}

[data-theme="light"] .studio-inspector-row input,
[data-theme="light"] .studio-inspector-row select,
[data-theme="light"] .waitlist-form input,
[data-theme="light"] .waitlist-form select,
[data-theme="light"] .waitlist-form textarea {
  /* Only set background-color so the chevron background-image/repeat/size
     from the base .studio-inspector-row select rule survives. The `background:`
     shorthand would reset repeat back to its default ("repeat") and tile the
     chevron across the dropdown. */
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--text);
}

[data-theme="light"] .studio-inspector-row select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345686d' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

[data-theme="light"] .studio-inspector-toggle {
  background: rgba(0, 122, 130, 0.08);
  color: var(--text);
}

/* Modal */
[data-theme="light"] .modal-backdrop {
  background: rgba(70, 110, 115, 0.45);
}

[data-theme="light"] .modal-card {
  background: linear-gradient(180deg, #ffffff, #f6f9fa);
  color: var(--text);
}

/* Hero accent — punchier teal-to-emerald gradient that reads cleanly on the
   off-white background and still feels Arduino-flavoured. */
[data-theme="light"] .hero-accent {
  background: linear-gradient(120deg, #004d52 0%, #00b89a 55%, #00956f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0, 122, 130, 0.10);
}

/* Pin labels (drawn via JS as <text class="studio-pin-label">) take their
   fill from currentColor so the theme variables control colour. */
.studio-pin-label {
  color: rgba(255, 255, 255, 0.82);
}

[data-theme="light"] .studio-pin-label {
  color: rgba(2, 21, 24, 0.78);
}

/* Stroke the pin label on light so dark text reads cleanly even when it lands
   on a colorful pin background (transistor body, breadboard rails, etc). */
[data-theme="light"] .studio-pin-label {
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, 0.65);
  stroke-width: 0.5px;
}

/* Code editor textarea selection highlight on light */
[data-theme="light"] ::selection {
  background: var(--accent);
  color: #fff;
}

/* Theme toggle button (lives in the nav) */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nav-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.nav-theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}

.nav-theme-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Show the sun icon in dark mode (click → go light), moon in light (click → go dark) */
.nav-theme-toggle .theme-icon-moon { display: none; }
[data-theme="light"] .nav-theme-toggle .theme-icon-moon { display: inline; }
[data-theme="light"] .nav-theme-toggle .theme-icon-sun { display: none; }

/* Fullscreen mode — studio-shell takes over the viewport. The grid keeps the
   same area layout (palette | stage | inspector + runpane), but stage grows
   to fill the available height instead of using the fixed canvas size.
   The background must be fully opaque so page sections behind don't bleed
   through. (The default shell uses 0.9-alpha white on light theme.) */
.studio-shell.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 60;            /* above the sticky top-nav (z=50) */
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 12px;
  max-width: none !important;
  grid-template-rows: 1fr auto;
  background: var(--bg) !important;
  animation: studio-fs-in 240ms var(--ease-out);
}

/* Apply the same opaque bg under native fullscreen too (the :fullscreen
   pseudo-class covers the case where the browser took over). */
.studio-shell:fullscreen,
.studio-shell:-webkit-full-screen {
  background: var(--bg) !important;
}

@keyframes studio-fs-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* "Press Esc to exit" toast */
.studio-fullscreen-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(2, 6, 10, 0.88);
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: studio-fs-toast-in 240ms var(--ease-out) forwards;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}

.studio-fullscreen-toast kbd {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.studio-fullscreen-toast.is-fading {
  animation: studio-fs-toast-out 600ms var(--ease-out) forwards;
}

@keyframes studio-fs-toast-in {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
}

@keyframes studio-fs-toast-out {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateX(-50%) translateY(6px); }
}

@media (min-width: 1400px) {
  .studio-shell.is-fullscreen {
    grid-template-rows: 1fr;
  }
}

.studio-shell.is-fullscreen .studio-stage {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.studio-shell.is-fullscreen .studio-canvas {
  flex: 1;
  height: auto !important;
  min-height: 0;
}

.studio-shell.is-fullscreen .studio-palette,
.studio-shell.is-fullscreen .studio-inspector {
  min-height: 0;
  overflow-y: auto;
}

.studio-shell.is-fullscreen .studio-code-card,
.studio-shell.is-fullscreen .studio-serial-card {
  max-height: 260px;
}

/* Lock body scroll while the studio is fullscreen */
.studio-fullscreen-active {
  overflow: hidden;
}

/* Fullscreen icon swap */
.studio-action-btn[data-studio-action="fullscreen"] .icon-exit-fullscreen { display: none; }
.studio-action-btn[data-studio-action="fullscreen"].is-active .icon-exit-fullscreen { display: inline; }
.studio-action-btn[data-studio-action="fullscreen"].is-active .icon-enter-fullscreen { display: none; }

/* ==========================================================================
   LIGHT THEME — contrast polish round 2
   Tiny rgba-white tints used across the dark UI disappear on the cream
   background. These rules give those subtle surfaces a faint teal wash so
   they're actually visible.
   ========================================================================== */

/* Studio canvas grid pattern — bump stroke so the grid is readable */
[data-theme="light"] #studio-grid path {
  stroke: rgba(0, 122, 130, 0.18);
}

/* Inspector action row buttons (Rotate / Duplicate / Delete / wire Delete) */
[data-theme="light"] .studio-inspector-actions button {
  background: rgba(0, 122, 130, 0.08);
  border-color: rgba(0, 122, 130, 0.28);
  color: var(--text);
}

[data-theme="light"] .studio-inspector-actions button:hover {
  background: rgba(0, 122, 130, 0.16);
  border-color: rgba(0, 122, 130, 0.45);
}

[data-theme="light"] .studio-inspector-actions button[data-action="delete"]:hover {
  background: rgba(255, 108, 108, 0.14);
  border-color: rgba(255, 108, 108, 0.45);
}

/* Workflow step cards — were almost invisible on light */
[data-theme="light"] .workflow-step {
  background: rgba(0, 122, 130, 0.05);
  border-color: rgba(0, 122, 130, 0.18);
}

[data-theme="light"] .workflow-step:hover {
  background: rgba(0, 122, 130, 0.10);
  border-color: rgba(0, 122, 130, 0.36);
}

/* Tag pills that appear all over (feature tags, hero badge, workflow labels,
   tab pills, inspector pin labels, simulator-tab.is-active, etc.) */
[data-theme="light"] .feature-tag,
[data-theme="light"] .workflow-step-label,
[data-theme="light"] .hero-badge,
[data-theme="light"] .pitch-badge,
[data-theme="light"] .simulator-tab.is-active,
[data-theme="light"] .simulator-badge,
[data-theme="light"] .builder-intent {
  background: rgba(0, 122, 130, 0.12);
  border-color: rgba(0, 122, 130, 0.30);
}

[data-theme="light"] .section.pitch {
  border-top-color: rgba(0, 122, 130, 0.18);
  background: linear-gradient(180deg,
    rgba(0, 122, 130, 0.04) 0%,
    rgba(0, 122, 130, 0.00) 60%);
}

[data-theme="light"] .pitch-link:hover {
  background: rgba(0, 122, 130, 0.07);
}

[data-theme="light"] .workflow-step-label-success {
  background: rgba(46, 168, 116, 0.16);
  border-color: rgba(46, 168, 116, 0.45);
  color: #0a6f4a;
}

/* Feature cards — base + hover */
[data-theme="light"] .feature-card {
  border-color: rgba(0, 122, 130, 0.18);
}

[data-theme="light"] .feature-card:hover {
  background: linear-gradient(180deg, rgba(0, 122, 130, 0.08), rgba(0, 122, 130, 0.02));
  border-color: rgba(0, 122, 130, 0.40);
}

/* Feature card icon — dark blob on light needs more saturation than the dark
   version's near-transparent gradient produces. */
[data-theme="light"] .feature-icon,
[data-theme="light"] .workflow-step-icon {
  background: linear-gradient(135deg, rgba(0, 122, 130, 0.16), rgba(0, 150, 110, 0.08));
  color: var(--accent-deep);
}

/* Contact links — same gradient issue */
[data-theme="light"] .contact-link {
  background: rgba(0, 122, 130, 0.04);
  border-color: rgba(0, 122, 130, 0.18);
}

[data-theme="light"] .contact-link:hover {
  background: rgba(0, 122, 130, 0.10);
  border-color: rgba(0, 122, 130, 0.40);
}

/* Studio toolbar action buttons */
[data-theme="light"] .studio-action-btn {
  background: rgba(0, 122, 130, 0.06);
  border-color: rgba(0, 122, 130, 0.22);
  color: var(--text);
}

[data-theme="light"] .studio-action-btn:hover {
  background: rgba(0, 122, 130, 0.14);
  border-color: rgba(0, 122, 130, 0.45);
}

/* Studio view toggle (Breadboard / Schematic pills) */
[data-theme="light"] .studio-view-toggle {
  background: rgba(0, 122, 130, 0.06);
  border-color: rgba(0, 122, 130, 0.22);
}

[data-theme="light"] .studio-view-toggle button {
  color: var(--text-muted);
}

/* In light theme the active-toggle gradient is dark teal (#00a8b5 →
 * #004d52), so the dark text inherited from the dark-theme default is
 * unreadable. Flip the active label to white for legibility. */
[data-theme="light"] .studio-view-toggle button.is-active {
  color: #ffffff;
}

/* Palette section dividers — dashed teal */
[data-theme="light"] .studio-palette-group {
  border-top-color: rgba(0, 122, 130, 0.25);
  color: var(--text-muted);
}

/* Palette items */
[data-theme="light"] .studio-palette-item {
  background: rgba(0, 122, 130, 0.04);
  border-color: rgba(0, 122, 130, 0.16);
  color: var(--text);
}

[data-theme="light"] .studio-palette-item:hover {
  background: rgba(0, 122, 130, 0.12);
  border-color: rgba(0, 122, 130, 0.40);
}

/* Connections list dashed dividers */
[data-theme="light"] .studio-inspector-conn {
  border-top-color: rgba(0, 122, 130, 0.16);
}

/* Inspector wire card */
[data-theme="light"] .studio-inspector-wire {
  background: rgba(0, 122, 130, 0.05);
  border-color: rgba(0, 122, 130, 0.22);
}

/* Builder live-dot (subtle pulse on dark) stays green, fine */

/* Footer separator */
[data-theme="light"] .footer {
  border-top-color: rgba(0, 122, 130, 0.18);
  color: var(--text-muted);
}

/* Top nav link underline */
[data-theme="light"] .nav-links a {
  color: var(--text-muted);
}

[data-theme="light"] .nav-links a:hover {
  color: var(--accent-deep);
}

/* Studio toolbar background tint for the bar above the canvas */
[data-theme="light"] .studio-stage-bar {
  /* No explicit bg; inherits from shell. Sufficient. */
}

/* Mobile feature cards */
[data-theme="light"] .mobile-feature-card {
  background: rgba(0, 122, 130, 0.06);
  border-color: rgba(0, 122, 130, 0.22);
}

/* ==========================================================================
   SimDuino Academy  (/games.php)
   ==========================================================================
   ClickUp-inspired catalogue: left icon rail, top utility bar, grouped
   lesson list with coloured unit pills and ChIP-style topic / mode /
   difficulty tags. Uses the existing theme tokens so light/dark Just
   Work; per-unit pill colours come from a small bespoke palette below.
   ========================================================================== */

.academy-page {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body, 'Sora', sans-serif);
}

/* ---- Gate (signed-out) ---- */
.academy-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

.academy-gate-card {
  width: min(440px, 100%);
  padding: 32px 28px;
  border-radius: 18px;
  background: rgba(2, 6, 10, 0.55);
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .academy-gate-card {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 30px 80px -40px rgba(0, 60, 70, 0.25);
}

.academy-gate-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.academy-gate-brand .brand-img { height: 26px; width: auto; }
.academy-gate-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.academy-gate-card h1 {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  line-height: 1.25;
}
.academy-gate-card p {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.academy-gate-form label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.academy-gate-form input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(2, 6, 10, 0.5);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1rem;
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color 120ms, background 120ms;
}
.academy-gate-form input[type="text"]:focus {
  border-color: var(--accent-bright, #2ee5a8);
  background: rgba(46, 229, 168, 0.06);
}
[data-theme="light"] .academy-gate-form input[type="text"] {
  background: rgba(255, 255, 255, 0.9);
}

.academy-gate-error {
  margin: 10px 0 0;
  color: var(--danger);
  font-size: 0.84rem;
}

.academy-gate-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--accent-bright, #2ee5a8);
  background: var(--accent-bright, #2ee5a8);
  color: #001a14;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.95rem;
  transition: transform 100ms, box-shadow 200ms;
}
.academy-gate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -12px rgba(46, 229, 168, 0.55);
}

.academy-gate-foot {
  margin: 20px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}
.academy-gate-foot a {
  color: var(--accent-bright, #2ee5a8);
  text-decoration: none;
  margin-left: 8px;
}

/* ---- Shell (signed-in) ---- */
.academy-shell {
  display: grid;
  grid-template-columns: 60px 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* Left icon rail. Sticky so the user always has nav as they scroll the
   list. Width matches ClickUp's narrow icon strip. */
.academy-rail {
  background: rgba(2, 6, 10, 0.7);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  position: sticky;
  top: 0;
  height: 100vh;
}
[data-theme="light"] .academy-rail {
  background: rgba(0, 122, 130, 0.05);
  border-right-color: rgba(0, 122, 130, 0.18);
}

.academy-rail-brand {
  display: flex;
  justify-content: center;
  padding: 6px 8px;
  margin-bottom: 12px;
}
.academy-rail-brand .brand-img {
  width: 28px;
  height: 28px;
}

.academy-rail-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px;
}

.academy-rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.65rem;
  text-decoration: none;
  font-family: inherit;
  transition: background 120ms, color 120ms;
}
.academy-rail-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}
.academy-rail-btn:hover { background: rgba(46, 229, 168, 0.08); color: var(--text); }
.academy-rail-btn.is-active {
  color: var(--accent-bright, #2ee5a8);
  background: rgba(46, 229, 168, 0.12);
}
[data-theme="light"] .academy-rail-btn:hover { background: rgba(0, 122, 130, 0.08); }
[data-theme="light"] .academy-rail-btn.is-active { background: rgba(0, 122, 130, 0.12); color: #00665a; }

.academy-rail-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 8px 6px;
}
.academy-rail-foot form { width: 100%; }

.academy-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00a5a8 0%, #2ee5a8 100%);
  color: #001a14;
  font-weight: 800;
  font-size: 0.78rem;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.15);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.02em;
}

/* ---- Main column ---- */
.academy-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.academy-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(2, 6, 10, 0.35);
}
[data-theme="light"] .academy-topbar { background: rgba(255, 255, 255, 0.6); }

.academy-topbar-left,
.academy-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.academy-workspace {
  font-weight: 700;
  font-size: 0.92rem;
}

.academy-meeting-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(46, 229, 168, 0.12);
  border: 1px solid rgba(46, 229, 168, 0.3);
  color: var(--accent-bright, #2ee5a8);
  font-size: 0.78rem;
  font-family: 'IBM Plex Mono', monospace;
}
.academy-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-bright, #2ee5a8);
  box-shadow: 0 0 6px rgba(46, 229, 168, 0.7);
}

.academy-xp,
.academy-streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text);
}
.academy-xp { color: #ffd166; }
.academy-xp svg { width: 14px; height: 14px; }

.academy-header-row {
  padding: 16px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.academy-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.academy-header-title h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.academy-header-icon { font-size: 1.25rem; }
.academy-header-chev {
  width: 16px;
  height: 16px;
  stroke: var(--text-muted);
  stroke-width: 2;
  fill: none;
}

.academy-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.academy-tabs button,
.academy-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color 120ms, border-color 120ms;
}
.academy-tabs a svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  flex-shrink: 0;
}
.academy-tabs button:hover,
.academy-tabs a:hover { color: var(--text); }
.academy-tabs button.is-active,
.academy-tabs a.is-active {
  color: var(--accent-bright, #2ee5a8);
  border-bottom-color: var(--accent-bright, #2ee5a8);
}

.academy-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}

.academy-toolbar-left,
.academy-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.academy-toolbar-left { flex: 1; }

.academy-toolicon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.academy-toolicon svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.academy-toolicon:hover { background: rgba(46, 229, 168, 0.08); color: var(--text); }

.academy-toolbar-spacer { flex: 1; }

.academy-search {
  flex: 0 1 280px;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(2, 6, 10, 0.4);
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem;
  outline: none;
}
.academy-search:focus { border-color: var(--accent-bright, #2ee5a8); }
[data-theme="light"] .academy-search { background: rgba(255, 255, 255, 0.7); }

.academy-newtask {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-radius: 6px;
  background: var(--accent-bright, #2ee5a8);
  border: 1px solid var(--accent-bright, #2ee5a8);
  color: #001a14;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.84rem;
}
.academy-newtask:disabled { opacity: 0.55; cursor: not-allowed; }
.academy-newtask svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ---- Lesson list ---- */
.academy-list {
  padding: 0 28px 40px;
  display: flex;
  flex-direction: column;
  max-width: 760px;
}

.academy-group {
  display: flex;
  flex-direction: column;
}

.academy-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px 0 6px;
  margin-top: 4px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-bottom: 1px solid var(--border);
}
.academy-group-head::-webkit-details-marker { display: none; }
.academy-group-chev {
  width: 10px;
  height: 10px;
  stroke: var(--text-muted);
  stroke-width: 2.4;
  fill: none;
  transition: transform 140ms ease;
  align-self: center;
}
details[open] > .academy-group-head .academy-group-chev { transform: rotate(90deg); }

.academy-group-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: 1;
}

.academy-group-count {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
}

/* ---- Row ---- */
.academy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.academy-row:last-of-type { border-bottom: none; }
.academy-row:hover .academy-row-title { text-decoration: underline; text-underline-offset: 3px; }
.academy-row.is-done { color: var(--text-muted); }
.academy-row.is-done .academy-row-title { text-decoration: line-through; text-decoration-color: var(--border); }

.academy-col { min-width: 0; }

.academy-col-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.academy-row-title {
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.academy-row-sub {
  color: var(--text-muted);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.academy-row-meta {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.74rem;
}

.academy-col-xp {
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  align-self: center;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .academy-shell { grid-template-columns: 56px 1fr; }
}

@media (max-width: 600px) {
  .academy-topbar { padding: 8px 12px; flex-wrap: wrap; gap: 6px; }
  .academy-header-row, .academy-toolbar, .academy-list { padding-left: 16px; padding-right: 16px; }
  .academy-tabs { overflow-x: auto; }
  .academy-search { flex: 1; min-width: 0; }
}

/* ==========================================================================
   Academy — Lesson player (/games-play.php)
   ==========================================================================
   Top: thin breadcrumb bar (back link → unit pill → lesson title → meta).
   Body: 2-column grid — left side carries the prompt and the "given"
   (circuit for write-code mode, sketch for build-circuit mode); right
   side carries the answer surface (textarea + Check button).
   ========================================================================== */

.academy-play { min-height: 100vh; }

.academy-play-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(2, 6, 10, 0.4);
}
[data-theme="light"] .academy-play-bar { background: rgba(255, 255, 255, 0.7); }

.academy-play-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.86rem;
  transition: background 120ms, color 120ms;
}
.academy-play-back:hover { background: rgba(46, 229, 168, 0.08); color: var(--text); }
.academy-play-back svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }

.academy-play-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.academy-play-title {
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.academy-play-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.academy-play-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 16px;
  padding: 16px;
  align-items: stretch;
}

.academy-play-side {
  background: rgba(2, 6, 10, 0.45);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  overflow: auto;
  max-height: calc(100vh - 110px);
}
[data-theme="light"] .academy-play-side { background: rgba(255, 255, 255, 0.7); }

.academy-play-h {
  margin: 0 0 8px;
  font-size: 1.25rem;
}
.academy-play-prompt {
  margin: 0 0 16px;
  color: var(--text);
  line-height: 1.55;
  font-size: 0.95rem;
}
.academy-play-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 18px;
}
.academy-play-sub {
  margin: 16px 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--text-muted);
  font-weight: 600;
}

.academy-play-given {
  border-radius: 8px;
  background: rgba(2, 6, 10, 0.5);
  border: 1px solid var(--border);
  padding: 10px 12px;
  font-family: 'IBM Plex Mono', monospace;
}
[data-theme="light"] .academy-play-given { background: rgba(255, 255, 255, 0.9); }
.academy-play-given pre { margin: 0; max-height: 380px; overflow: auto; }
.academy-play-given code { font-size: 0.78rem; line-height: 1.45; }
.academy-play-givenhint {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: 'Sora', sans-serif;
}

.academy-play-answer {
  background: rgba(2, 6, 10, 0.45);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 110px);
}
[data-theme="light"] .academy-play-answer { background: rgba(255, 255, 255, 0.7); }

.academy-play-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}
.academy-play-formhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0 2px;
}

.academy-play-code {
  flex: 1 1 auto;
  min-height: 320px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(2, 6, 10, 0.7);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.86rem;
  line-height: 1.55;
  white-space: pre;
  overflow: auto;
  outline: none;
  resize: vertical;
}
.academy-play-code:focus { border-color: var(--accent-bright, #2ee5a8); }
[data-theme="light"] .academy-play-code { background: rgba(255, 255, 255, 0.9); }

.academy-play-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.academy-play-check {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--accent-bright, #2ee5a8);
  background: var(--accent-bright, #2ee5a8);
  color: #001a14;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.academy-play-check:hover { box-shadow: 0 10px 24px -10px rgba(46, 229, 168, 0.55); }

.academy-play-reset,
.academy-play-skip {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  font-size: 0.86rem;
}
.academy-play-reset:hover,
.academy-play-skip:hover { color: var(--text); border-color: var(--accent-bright, #2ee5a8); }

.academy-play-hint {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.86rem;
}
.academy-play-hint:hover:not(:disabled) { color: var(--text); border-color: var(--text-muted); }
.academy-play-hint:disabled { opacity: 0.5; cursor: default; }

.academy-play-hints {
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.academy-play-hints-inline { margin: 0 0 12px; }
.academy-play-hint-line {
  margin: 0;
  padding: 10px 12px;
  border-left: 2px solid var(--text-muted);
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}
.academy-play-hint-line span {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 2px;
}

.academy-play-result {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.86rem;
  line-height: 1.5;
}
.academy-play-result.is-pending { background: rgba(255, 255, 255, 0.04); color: var(--text-muted); }
.academy-play-result.is-pass    { background: rgba(46, 229, 168, 0.12); color: var(--accent-bright, #2ee5a8); border: 1px solid rgba(46, 229, 168, 0.3); }
.academy-play-result.is-fail    { background: rgba(255, 108, 108, 0.12); color: var(--danger, #ff6c6c); border: 1px solid rgba(255, 108, 108, 0.3); }
.academy-play-result a { color: inherit; text-decoration: underline; }

.academy-play-buildhint {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}
.academy-play-buildhint a { color: var(--accent-bright, #2ee5a8); }

@media (max-width: 900px) {
  .academy-play-shell { grid-template-columns: 1fr; }
  .academy-play-side,
  .academy-play-answer { max-height: none; }
}

/* Inline circuit diagram inside the lesson player ("given" side). */
.academy-circuit-svg {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.academy-play-rawjson {
  margin-top: 12px;
  font-family: 'Sora', sans-serif;
}
.academy-play-rawjson summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text-muted);
  user-select: none;
}
.academy-play-rawjson summary:hover { color: var(--text); }
.academy-play-rawjson pre { margin: 8px 0 0; max-height: 240px; overflow: auto; }
.academy-play-rawjson code { font-size: 0.74rem; line-height: 1.45; }

/* ---- Academy: circuit-from-code mode (Studio embed) ----
   Layout: top "buildbar" strip carries the lesson prompt + a
   collapsible reference sketch. Below: the studio-shell rendered
   full-width inside the player. Bottom: a sticky check bar so the
   user can hit Check without scrolling past the inspector. */
.academy-play-build {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px 18px;
  min-height: calc(100vh - 50px);
}

.academy-play-buildbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  background: rgba(2, 6, 10, 0.45);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
}
[data-theme="light"] .academy-play-buildbar { background: rgba(255, 255, 255, 0.7); }

.academy-play-buildtitle h1 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}
.academy-play-buildtitle p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.academy-play-buildref {
  align-self: stretch;
  background: rgba(2, 6, 10, 0.4);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: 'Sora', sans-serif;
}
[data-theme="light"] .academy-play-buildref { background: rgba(0, 0, 0, 0.03); }
.academy-play-buildref summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-muted);
  user-select: none;
}
.academy-play-buildref summary:hover { color: var(--text); }
.academy-play-buildref pre {
  margin: 8px 0 0;
  max-height: 200px;
  overflow: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.45;
}

/* Studio embed — collapses the default shell's min-heights so it fits
   in the lesson view, and keeps the palette + inspector reasonably
   sized. */
.academy-play-studio {
  flex: 1 1 auto;
  min-height: 540px;
}
.academy-play-studio .studio-palette,
.academy-play-studio .studio-inspector {
  min-height: 0;
  max-height: 600px;
}
.academy-play-studio .studio-canvas {
  min-height: 480px;
}

.academy-play-checkbar {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(2, 6, 10, 0.55);
  border: 1px solid var(--border);
  border-radius: 10px;
  backdrop-filter: blur(8px);
}
[data-theme="light"] .academy-play-checkbar { background: rgba(255, 255, 255, 0.85); }

.academy-play-result-inline {
  flex: 1;
  min-width: 0;
  margin: 0;
}

@media (max-width: 960px) {
  .academy-play-buildbar { grid-template-columns: 1fr; }
  .academy-play-studio { min-height: 480px; }
}

/* ---- Leaderboard ---- */
.academy-leaderboard {
  padding: 16px 24px 40px;
}

.academy-leader-empty {
  color: var(--text-muted);
  padding: 24px 12px;
  text-align: center;
}

.academy-leader-head,
.academy-leader-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 2fr) 90px 90px 90px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.academy-leader-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.academy-leader-row { transition: background 120ms; }
.academy-leader-row:hover { background: rgba(46, 229, 168, 0.06); }
[data-theme="light"] .academy-leader-row:hover { background: rgba(0, 122, 130, 0.05); }
.academy-leader-row.is-self {
  background: rgba(46, 229, 168, 0.10);
  border-left: 3px solid var(--accent-bright, #2ee5a8);
  padding-left: 9px;
}

.academy-leader-rank-n {
  display: inline-block;
  width: 28px;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.academy-leader-medal {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
}
.academy-leader-medal-gold   { background: linear-gradient(135deg, #ffd166, #b8860b); color: #2d1a00; }
.academy-leader-medal-silver { background: linear-gradient(135deg, #e0e0e0, #888); color: #1a1a1a; }
.academy-leader-medal-bronze { background: linear-gradient(135deg, #cd7f32, #6b3a16); color: #fff; }

.academy-leader-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.academy-leader-handle {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.academy-avatar-sm {
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
  border-width: 1.5px;
}

.academy-leader-stat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.academy-leader-xp {
  color: #ffd166;
  font-weight: 700;
}

.academy-leader-self {
  margin: 20px 0 0;
  padding: 12px 16px;
  background: rgba(46, 229, 168, 0.08);
  border: 1px dashed rgba(46, 229, 168, 0.4);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .academy-leader-head,
  .academy-leader-row {
    grid-template-columns: 50px minmax(0, 1.4fr) 70px;
  }
  .academy-leader-head .academy-leader-stat:nth-child(3),
  .academy-leader-row  .academy-leader-stat:nth-child(3),
  .academy-leader-head .academy-leader-stat:nth-child(4),
  .academy-leader-row  .academy-leader-stat:nth-child(4) { display: none; }
}

/* ---- Share button + modal + banner ---- */
.studio-share-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(2, 6, 10, 0.55);
  backdrop-filter: blur(6px);
}
.studio-share-card {
  position: relative;
  width: min(440px, 92vw);
  background: var(--bg, #06121a);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .studio-share-card { background: #fff; }
.studio-share-card h3 { margin: 0 0 6px; font-size: 1.1rem; }
.studio-share-card p  { margin: 0 0 14px; font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; }
.studio-share-card label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px; }
.studio-share-card label input {
  display: block; width: 100%; margin-top: 4px;
  padding: 9px 12px;
  background: rgba(2, 6, 10, 0.5); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: inherit; font-size: 0.9rem; outline: none;
}
[data-theme="light"] .studio-share-card label input { background: #f5f8f9; }
.studio-share-card label input:focus { border-color: var(--accent-bright, #2ee5a8); }

.studio-share-go {
  display: block; width: 100%;
  padding: 11px 14px; border-radius: 8px;
  background: var(--accent-bright, #2ee5a8); border: 1px solid var(--accent-bright, #2ee5a8);
  color: #001a14; font-weight: 700; cursor: pointer; font-family: inherit;
}
.studio-share-go:hover { box-shadow: 0 10px 24px -10px rgba(46, 229, 168, 0.55); }
.studio-share-go:disabled { opacity: 0.6; cursor: progress; }

.studio-share-result { margin-top: 14px; }
.studio-share-result p { margin: 0 0 6px; font-size: 0.84rem; color: var(--text); }
.studio-share-url {
  width: 100%; padding: 9px 11px; border-radius: 6px;
  background: rgba(2, 6, 10, 0.5); border: 1px solid var(--border);
  color: var(--text); font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem;
}
[data-theme="light"] .studio-share-url { background: #f5f8f9; }
.studio-share-copy {
  margin-top: 6px; padding: 6px 10px; border-radius: 6px;
  background: rgba(46, 229, 168, 0.18); border: 1px solid rgba(46, 229, 168, 0.4);
  color: var(--accent-bright, #2ee5a8); font-family: inherit; font-size: 0.78rem; cursor: pointer;
}
.studio-share-result a { margin-left: 8px; color: var(--accent-bright, #2ee5a8); font-size: 0.78rem; }
.studio-share-err { color: var(--danger); font-size: 0.86rem; }

.studio-share-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: 0; color: var(--text-muted);
  font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.studio-share-close:hover { color: var(--text); }

/* Loaded-from-share banner, fades in/out on share-URL visits. */
.studio-share-banner {
  position: fixed; left: 50%; bottom: 22px;
  transform: translate(-50%, 30px); opacity: 0;
  transition: transform 280ms ease, opacity 280ms ease;
  z-index: 150;
  padding: 8px 14px;
  background: rgba(2, 6, 10, 0.85);
  color: var(--text); border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.84rem; box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .studio-share-banner { background: rgba(255, 255, 255, 0.95); }
.studio-share-banner code { background: rgba(46, 229, 168, 0.18); padding: 1px 6px; border-radius: 4px; font-family: 'IBM Plex Mono', monospace; }
.studio-share-banner a { color: var(--accent-bright, #2ee5a8); margin-left: 6px; text-decoration: none; }
.studio-share-banner.is-show { transform: translate(-50%, 0); opacity: 1; }

/* ---- Community gallery ---- */
.community-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 16px;
  font-size: 0.95rem;
}
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 0 16px 40px;
}
.community-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: rgba(2, 6, 10, 0.4);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.community-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-bright, #2ee5a8);
  background: rgba(46, 229, 168, 0.06);
}
[data-theme="light"] .community-card { background: rgba(255, 255, 255, 0.7); }
[data-theme="light"] .community-card:hover { background: rgba(0, 122, 130, 0.05); }
.community-card-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.community-card-title {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.3;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.community-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.community-card-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* ---- Community: profile header + tabs + per-card owner row ---- */
.community-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 6px;
}
.community-profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00a5a8 0%, #2ee5a8 100%);
  color: #001a14;
  font-weight: 800;
  font-size: 1.05rem;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.15);
  font-family: 'IBM Plex Mono', monospace;
}
.community-profile-meta { flex: 1; min-width: 0; }
.community-profile-meta h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
}
.community-profile-meta p {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 0.86rem;
}
.community-profile-meta a {
  color: var(--accent-bright, #2ee5a8);
  text-decoration: none;
  margin-left: 6px;
}
.community-profile-back {
  font-size: 0.84rem;
  color: var(--text-muted);
  text-decoration: none;
}
.community-profile-back:hover { color: var(--text); }

.community-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.community-tabs a {
  padding: 9px 12px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.86rem;
  border-bottom: 2px solid transparent;
  transition: color 120ms, border-color 120ms;
}
.community-tabs a:hover { color: var(--text); }
.community-tabs a.is-active {
  color: var(--accent-bright, #2ee5a8);
  border-bottom-color: var(--accent-bright, #2ee5a8);
}

.community-card-wrap { display: flex; flex-direction: column; gap: 4px; }
.community-card-owner {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(46, 229, 168, 0.10);
  color: var(--accent-bright, #2ee5a8);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  text-decoration: none;
}
.community-card-owner:hover { background: rgba(46, 229, 168, 0.20); }
.community-card-owner.is-anon {
  background: transparent;
  color: var(--text-dim);
  cursor: default;
}

.community-card-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.community-card-flag {
  background: rgba(255, 209, 102, 0.18);
  color: #ffd166;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.66rem;
}
.community-card-fork {
  color: var(--accent-bright, #2ee5a8);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
}

/* Fork-from-banner button — matches the banner's pill shape. */
.studio-share-fork {
  margin-left: 6px;
  border: 0;
  background: rgba(46, 229, 168, 0.18);
  color: var(--accent-bright, #2ee5a8);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.studio-share-fork:hover { background: rgba(46, 229, 168, 0.32); }

/* Rotary-encoder tick buttons — same shape as the inspector toggle but
   they fire-and-forget rather than latching, so no .is-on state. */
.studio-inspector-tick {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(2, 6, 10, 0.4);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.76rem;
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.studio-inspector-tick:hover {
  background: rgba(46, 229, 168, 0.10);
  border-color: var(--accent-bright, #2ee5a8);
}
.studio-inspector-tick:active { background: rgba(46, 229, 168, 0.18); }
[data-theme="light"] .studio-inspector-tick { background: rgba(0, 0, 0, 0.03); }

/* IR receiver inspector remote — small button grid that triggers
   irBlast() with NEC codes. */
.studio-ir-remote {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.studio-ir-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;
}
.studio-ir-btn {
  padding: 5px 0;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: rgba(2, 6, 10, 0.4);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.studio-ir-btn:hover {
  background: rgba(46, 229, 168, 0.12);
  border-color: var(--accent-bright, #2ee5a8);
}
.studio-ir-btn:active { background: rgba(46, 229, 168, 0.24); }
[data-theme="light"] .studio-ir-btn { background: rgba(0, 0, 0, 0.03); }

/* ---- Examples gallery (/examples.php) ---- */
.examples-unit {
  margin: 24px 16px 8px;
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
}
.examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 0 16px 8px;
}
.examples-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(2, 6, 10, 0.4);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.examples-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-bright, #2ee5a8);
  background: rgba(46, 229, 168, 0.06);
}
[data-theme="light"] .examples-card { background: rgba(255, 255, 255, 0.7); }
[data-theme="light"] .examples-card:hover { background: rgba(0, 122, 130, 0.05); }
.examples-card-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.examples-card-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
}
.examples-card-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
  flex: 1;
}
.examples-card-go {
  margin-top: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: var(--accent-bright, #2ee5a8);
}

/* ---- Multi-sketch tabs (studio code card header) ---- */
.studio-sketch-tabs {
  display: flex;
  gap: 2px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  flex: 1 1 auto;
  min-width: 0;
}
.studio-sketch-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-bottom: 0;
  background: rgba(2, 6, 10, 0.3);
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
[data-theme="light"] .studio-sketch-tab { background: rgba(0, 122, 130, 0.05); }
.studio-sketch-tab:hover { color: var(--text); }
.studio-sketch-tab.is-active {
  background: rgba(2, 6, 10, 0.7);
  border-color: var(--border);
  color: var(--accent-bright, #2ee5a8);
}
[data-theme="light"] .studio-sketch-tab.is-active { background: rgba(255, 255, 255, 0.9); }
.studio-sketch-tab-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  line-height: 1;
  font-size: 0.95rem;
  opacity: 0.55;
  border-radius: 3px;
}
.studio-sketch-tab-x:hover {
  opacity: 1;
  background: rgba(255, 100, 100, 0.20);
  color: var(--danger, #ff6c6c);
}
.studio-sketch-tab-new {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.05rem;
  padding: 0 8px;
  cursor: pointer;
  flex-shrink: 0;
  align-self: stretch;
}
.studio-sketch-tab-new:hover { color: var(--accent-bright, #2ee5a8); }

/* ---- Mobile polish (Phase 5 tail) ----
   1. Bigger pin hit-targets on touch so a finger lands cleanly.
   2. Floating Run FAB stuck to the bottom-right of phone viewports.
   3. A touch tweak on the sketch tab strip. */

@media (hover: none) and (pointer: coarse) {
  /* The hit circle is r=9 by default; finger-width is ~30 px. Bump
     the touch hit radius so a tap reliably catches the pin. The
     *visible* dot stays the same size; only the invisible hit grows. */
  .studio-pin-wrap .studio-pin-hit { r: 14; }
}

/* The FAB is hidden on desktop; revealed at ≤768px. */
.studio-mobile-run { display: none; }
@media (max-width: 768px) {
  .studio-mobile-run {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--accent-bright, #2ee5a8);
    color: #001a14;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 14px 32px -10px rgba(46, 229, 168, 0.6);
    transition: transform 100ms;
  }
  .studio-mobile-run svg { width: 16px; height: 16px; flex-shrink: 0; }
  .studio-mobile-run:active { transform: scale(0.96); }
  .studio-mobile-run.is-running {
    background: #ffa040;
    box-shadow: 0 14px 32px -10px rgba(255, 160, 64, 0.55);
  }
  .studio-mobile-run.is-running svg { display: none; }
  .studio-mobile-run.is-running [data-mobile-run-label]::before {
    content: '■  ';
    font-family: 'IBM Plex Mono', monospace;
  }
}

@media (max-width: 600px) {
  .studio-sketch-tab { font-size: 0.84rem; padding: 6px 11px; }
  .studio-sketch-tab-new { font-size: 1.2rem; padding: 0 12px; }
}

/* ---- Academy: achievements grid ---- */
.academy-achievements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 8px 28px 40px;
  max-width: 920px;
}
.academy-badge {
  position: relative;
  padding: 16px 16px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
}
.academy-badge:not(.is-earned) { color: var(--text-muted); }
.academy-badge-icon {
  font-size: 1.3rem;
  line-height: 1;
  filter: grayscale(1);
  opacity: 0.55;
}
.academy-badge.is-earned .academy-badge-icon { filter: none; opacity: 1; }
.academy-badge-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.academy-badge-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.45;
  flex: 1;
}
.academy-badge-progress {
  height: 2px;
  background: var(--border);
  overflow: hidden;
  margin-top: 4px;
}
.academy-badge-progress-fill {
  height: 100%;
  background: var(--text-muted);
  transition: width 200ms ease-out;
}
.academy-badge.is-earned .academy-badge-progress-fill { background: var(--text); }
.academy-badge-progress-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Academy: Home dashboard (/games.php signed-in landing)
   ============================================================ */
.academy-home {
  padding: 0 28px 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 760px;
}

.academy-home-continue {
  padding: 0 0 24px;
  border-bottom: 1px solid var(--border);
}
.academy-home-eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.academy-home-continue h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 600;
}
.academy-home-continue p {
  margin: 0 0 4px;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 0.92rem;
}
.academy-home-cta-meta {
  margin: 0 0 14px !important;
  font-size: 0.78rem !important;
  color: var(--text-muted);
}
.academy-home-cta {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 4px;
  border: 1px solid currentColor;
  color: var(--text);
  background: transparent;
  font-weight: 500;
  text-decoration: none;
  font-size: 0.88rem;
}
.academy-home-cta:hover { background: var(--border); }

.academy-home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
}
.academy-home-stat { padding: 0; }
.academy-home-stat-n {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.academy-home-stat-n span {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.academy-home-stat-l {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.academy-home-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
}
.academy-home-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}
.academy-home-tile + .academy-home-tile { border-left: 1px solid var(--border); padding-left: 18px; }
.academy-home-tile:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.academy-home-tile strong { font-size: 0.95rem; font-weight: 600; }
.academy-home-tile small { color: var(--text-muted); font-size: 0.78rem; line-height: 1.4; }

.academy-home-recent { padding: 0; }
.academy-home-recent h3 {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.academy-home-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.academy-home-recent-row {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.academy-home-recent-row:last-child { border-bottom: 0; }
.academy-home-recent-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted);
  align-self: center;
}
.academy-home-recent-row.is-pass .academy-home-recent-dot { background: var(--text); }
.academy-home-recent-row.is-fail .academy-home-recent-dot { background: transparent; border: 1px solid var(--text-muted); }
.academy-home-recent-title { color: var(--text); text-decoration: none; font-size: 0.9rem; }
.academy-home-recent-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.academy-home-recent-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.academy-home-recent-when {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ============================================================
   Academy: My Path (/games-path.php) — three quiet lists
   ============================================================ */
.academy-path {
  padding: 0 28px 40px;
  display: grid;
  gap: 28px;
  max-width: 760px;
}
.academy-path-section {
  display: grid;
  gap: 4px;
}
.academy-path-h2 {
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.academy-path-empty {
  margin: 0;
  padding: 4px 0 2px;
  color: var(--text-muted);
  font-size: 0.86rem;
}
.academy-path-list {
  display: flex;
  flex-direction: column;
}
.academy-path-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}
.academy-path-row:last-child { border-bottom: none; }
.academy-path-row:hover .academy-path-row-title { text-decoration: underline; text-underline-offset: 3px; }
.academy-path-row-cleared { color: var(--text-muted); }
.academy-path-row-cleared .academy-path-row-title { text-decoration: line-through; text-decoration-color: var(--border); }
.academy-path-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.academy-path-row-title {
  font-size: 0.95rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.academy-path-row-meta {
  color: var(--text-muted);
  font-size: 0.78rem;
}
.academy-path-row-xp {
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .academy-home, .academy-path { padding: 0 16px 30px; }
  .academy-home-recent-row { grid-template-columns: 10px 1fr auto; }
  .academy-home-recent-when { display: none; }
}