#yb-landing, #yb-landing *, #yb-landing *::before, #yb-landing *::after { box-sizing: border-box; }
  /* global html/body reset removed — homepage keeps its own */

  /* ---- Motion + theme token system -----------------------------------
     One easing curve, a small set of durations, and every colour as a
     variable so a single [data-theme] swap restyles the whole page.
     Only transform + opacity animate (GPU, 60fps).
  --------------------------------------------------------------------- */
  #yb-landing {
    --ease: cubic-bezier(.22,.61,.36,1);
    --dur-fast: 150ms;
    --dur-card: 220ms;
    --dur-theme: 260ms;
    --orbit: 100s;
    --breath: 9s;
    --orbit-r: 300px;        /* true circular radius */
  }

  /* ---------- LIGHT ---------- */
  #yb-landing[data-theme="light"] {
    --bg:            radial-gradient(circle at 50% 36%, #f6f6f5 0%, #ececeb 56%, #dededc 100%);
    --ring:         rgba(46,125,70,.08);
    --hub-ring:     rgba(46,125,70,.14);
    --wire:         rgba(46,125,70,.15);
    --packet:       rgba(46,125,70,.55);
    --core-glow:    rgba(55,165,100,.16);

    --card-bg:      #ffffff;
    --card-border:  rgba(20,55,100,.07);
    --card-shadow:  0 8px 20px rgba(15,35,65,.10);
    --card-hover-shadow: 0 14px 30px rgba(15,35,65,.16);
    --card-hover-border: rgba(46,125,70,.28);
    --node-name:    #1d2c3e;

    --hub-bg:       radial-gradient(ellipse at 50% 24%, #ffffff 0%, #f4f8f5 58%, #ebf1ec 100%);
    --hub-border:   rgba(46,125,70,.28);
    --hub-shadow:   0 20px 50px rgba(20,60,35,.10), inset 0 2px 16px rgba(255,255,255,.9);
    --hub-sub:      #8a8d90;
    --hub-grey:     #5E6063;
    --chip-bg:      rgba(46,125,70,.08);
    --chip-border:  rgba(46,125,70,.22);

    --badge-bg:     rgba(255,255,255,.94);
    --badge-border: rgba(46,125,70,.3);
    --badge-shadow: 0 4px 14px rgba(20,60,35,.12);

    --panel-bg:     rgba(255,255,255,.84);
    --panel-border: rgba(20,55,100,.08);
    --panel-shadow: 0 14px 36px rgba(12,30,60,.12);
    --panel-icon-bg: #fff;
    --label:        #6e87a4;
    --typed:        #14314e;

    --accent:       #2E7D46;
    --accent-soft:  rgba(46,125,70,.28);

    --toggle-bg:    rgba(255,255,255,.9);
    --toggle-border: rgba(20,55,100,.1);
    --toggle-icon:  #5E6063;
  }

  /* ---------- DARK ---------- */
  #yb-landing[data-theme="dark"] {
    --bg:            radial-gradient(circle at 50% 34%, #12241a 0%, #0e1c14 56%, #0a140e 100%);
    --ring:         rgba(120,205,160,.10);
    --hub-ring:     rgba(120,205,160,.16);
    --wire:         rgba(120,205,160,.18);
    --packet:       rgba(150,225,185,.6);
    --core-glow:    rgba(60,180,110,.22);

    --card-bg:      rgba(255,255,255,.06);
    --card-border:  rgba(150,205,175,.14);
    --card-shadow:  0 8px 22px rgba(0,0,0,.35);
    --card-hover-shadow: 0 14px 32px rgba(0,0,0,.5);
    --card-hover-border: rgba(120,205,160,.4);
    --node-name:    #dbe9df;

    --hub-bg:       radial-gradient(ellipse at 50% 24%, #17301f 0%, #12271a 58%, #0e2015 100%);
    --hub-border:   rgba(120,205,160,.3);
    --hub-shadow:   0 20px 50px rgba(0,0,0,.5), inset 0 2px 16px rgba(120,205,160,.06);
    --hub-sub:      #7f948a;
    --hub-grey:     #b9c4bd;
    --chip-bg:      rgba(120,205,160,.12);
    --chip-border:  rgba(120,205,160,.28);

    --badge-bg:     rgba(20,40,28,.9);
    --badge-border: rgba(120,205,160,.32);
    --badge-shadow: 0 4px 14px rgba(0,0,0,.4);

    --panel-bg:     rgba(18,36,26,.8);
    --panel-border: rgba(120,205,160,.16);
    --panel-shadow: 0 14px 36px rgba(0,0,0,.5);
    --panel-icon-bg: rgba(255,255,255,.06);
    --label:        #7fa892;
    --typed:        #e6f3ec;

    --accent:       #46c07f;
    --accent-soft:  rgba(70,192,127,.32);

    --toggle-bg:    rgba(255,255,255,.06);
    --toggle-border: rgba(150,205,175,.18);
    --toggle-icon:  #cfe0d6;
  }
  #yb-landing {
    background: var(--bg);
    font-family: 'Manrope', system-ui, sans-serif;
    transition: background var(--dur-theme) var(--ease);
  }

  /* Every themed surface transitions colour together on toggle. */
  .themed {
    transition: background-color var(--dur-theme) var(--ease),
                background var(--dur-theme) var(--ease),
                border-color var(--dur-theme) var(--ease),
                box-shadow var(--dur-theme) var(--ease),
                color var(--dur-theme) var(--ease);
  }

  /* ---- Ambient animations (transform / opacity only) ------------------ */
  @keyframes yb-orbit  { to { transform: rotate(360deg); } }
  @keyframes yb-breath { 0%,100% { opacity:.42; } 50% { opacity:.68; } }
  @keyframes yb-caret  { 0%,49% { opacity:.85; } 50%,100% { opacity:0; } }

  .yb-orbit-layer {
    animation: yb-orbit var(--orbit) linear infinite;
    will-change: transform;
  }
  .yb-counter {
    animation: yb-orbit var(--orbit) linear infinite reverse;
    will-change: transform;
  }
  .yb-core-glow { animation: yb-breath var(--breath) var(--ease) infinite; }
  .yb-caret     { animation: yb-caret 1.1s steps(1) infinite; }

  .yb-node {
    transition: transform var(--dur-card) var(--ease),
                box-shadow var(--dur-card) var(--ease),
                border-color var(--dur-card) var(--ease),
                background-color var(--dur-theme) var(--ease);
    will-change: transform;
  }
  .yb-node:hover {
    transform: translate(-50%, -50%) translateY(-4px);
    box-shadow: var(--card-hover-shadow);
    border-color: var(--card-hover-border);
  }

  .yb-send {
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                background-color var(--dur-theme) var(--ease);
  }
  .yb-send:hover  { transform: translateY(-2px); box-shadow: 0 6px 16px var(--accent-soft); }
  .yb-send:active { transform: translateY(0);   box-shadow: 0 2px 6px var(--accent-soft); }

  .yb-toggle {
    transition: transform var(--dur-fast) var(--ease),
                background-color var(--dur-theme) var(--ease),
                border-color var(--dur-theme) var(--ease);
  }
  .yb-toggle:hover  { transform: translateY(-1px); }
  .yb-toggle:active { transform: translateY(0); }
  .yb-toggle svg { transition: opacity var(--dur-theme) var(--ease), transform var(--dur-theme) var(--ease); }

  /* ---- Reduced motion: freeze ambient system ------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .yb-orbit-layer, .yb-counter, .yb-core-glow, .yb-caret { animation: none !important; }
    .yb-core-glow { opacity: .5; }
  }

  /* ---- Top-right control toolbar ------------------------------------
     Prompt bar + toggle live in one fixed flex row so they share a
     baseline and a consistent gap. The prompt is prepended before the
     toggle by script. Widths flex down responsively; on small screens
     the row wraps so the toggle stacks above the prompt.
  --------------------------------------------------------------------- */
  .yb-toggle { z-index: 51; }

  #yb-prompt {
    flex: 0 1 480px;      /* desktop width, shrinkable */
    min-width: 0;
  }

  /* Tablet: narrow the prompt but keep it beside the toggle. */
  @media (max-width: 1024px) {
    #yb-toolbar { gap: 24px; }
    #yb-prompt  { flex-basis: 360px; }
  }

  /* Small tablet / large phone: tighter still, stays in-row. */
  @media (max-width: 720px) {
    #yb-prompt { flex-basis: 260px; }
  }

  /* Mobile: stack — toggle on its own row above a full-width prompt,
     kept compact and aligned to the right control area. */
  @media (max-width: 560px) {
    #yb-toolbar {
      flex-wrap: wrap;
      gap: 12px;
      left: 16px;
      right: 16px;
      top: 16px;
      max-width: none;
    }
    #yb-prompt { flex: 1 1 100%; order: 2; }
    .yb-toggle { order: 1; }
  }


/* ---- Landing integration overrides (scoped) ---- */
#yb-landing {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}
#yb-landing .yb-continue {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3vh, 30px);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hub-sub);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 40;
  font-family: 'Manrope', system-ui, sans-serif;
}
#yb-landing .yb-continue svg { animation: yb-bounce 1.9s var(--ease) infinite; }
@keyframes yb-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { #yb-landing .yb-continue svg { animation: none !important; } }