:root {
  --stw-ink: #121212;
  --stw-cream: #F5F3EE;
  --stw-white: #FFFFFF;
  --stw-mint: #7CF2B5;
  --stw-green: #129E63;
  --stw-amber: #FFB020;
  --stw-amber-dark: #C77A00;
  --stw-coral: #FF6B57;
  --stw-coral-dark: #D93A25;
  --stw-stone: #E2DED5;
  --stw-graphite: #5C5A55;
  --stw-mist: #C9C8C2;
  --stw-text-secondary: #3A3834;
  --stw-divider: #EFECE6;
  --stw-amber-tint: #FFF3DC;
  --stw-green-tint: #EAF9F1;
  --stw-coral-tint: #FFE9E5;
  --stw-panel: #1C1C1E;
  --stw-panel-2: #2A2A2D;
  --stw-panel-line: #2C2C2F;
  --stw-mist-2: #9A9892;
  --stw-subtle: #F2F0EA;
  --stw-green-text: #0E7A4C;
  --stw-amber-text: #7A4F00;
  --stw-coral-text: #B42318;
  --stw-violet-tint: #ECEAF7;
  --stw-violet-text: #3A2E7A;
  --stw-rose-tint: #FFE0D9;
  --stw-rose-text: #8A2414;
  --stw-status-online-on-ink: #7CF2B5;
  --stw-status-online-on-cream: #129E63;
  --stw-status-working-on-ink: #FFB020;
  --stw-status-working-on-cream: #C77A00;
  --stw-status-problem-on-ink: #FF6B57;
  --stw-status-problem-on-cream: #D93A25;
  --stw-font-display: 'Space Grotesk', system-ui, sans-serif;
  --stw-font-prefix: 'Instrument Serif', Georgia, serif;
  --stw-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --stw-radius-pill: 999px;
  --stw-radius-card: 24px;
  --stw-radius-card-sm: 20px;
  --stw-radius-control: 12px;
  --stw-radius-slot: 14px;
  --stw-radius-bubble-in: 22px 22px 22px 6px;
  --stw-radius-bubble-out: 22px 22px 6px 22px;
  --stw-space-1: 4px;
  --stw-space-2: 8px;
  --stw-space-3: 12px;
  --stw-space-4: 16px;
  --stw-space-5: 20px;
  --stw-space-6: 24px;
  --stw-space-8: 32px;
  --stw-space-10: 40px;
  --stw-space-12: 48px;
  --stw-touch-min: 44px;
}

/* P-bot animation states — copy as-is */
@keyframes blink{0%,92%,100%{transform:scaleY(1)}
96%{transform:scaleY(.1)}
}
@keyframes dot{0%,100%{opacity:.3}
50%{opacity:1}
}
@keyframes pulse{0%,100%{opacity:1}
50%{opacity:.55}
}
@keyframes pulsefast{0%,100%{opacity:1}
50%{opacity:.4}
}
@keyframes hop{0%,100%{transform:translateY(0)}
30%{transform:translateY(-3px)}
60%{transform:translateY(0)}
}
@keyframes shake{0%,100%{transform:translateX(0)}
20%{transform:translateX(-1.2px)}
40%{transform:translateX(1.2px)}
60%{transform:translateX(-.8px)}
80%{transform:translateX(.8px)}
}
.pb-eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.5s infinite}
.pb-d1{animation:dot 1.2s infinite}
.pb-d2{animation:dot 1.2s .2s infinite}
.pb-d3{animation:dot 1.2s .4s infinite}
.pb-led-hello,.pb-led-typing,.pb-led-booked{animation:pulse 2.4s ease-in-out infinite}
.pb-led-thinking{animation:pulsefast 1.2s ease-in-out infinite}
.pb-hop{animation:hop .6s ease-out 1}
.pb-shake{animation:shake .4s ease-in-out 1}
@media (prefers-reduced-motion:reduce){.pb-eyes,.pb-d1,.pb-d2,.pb-d3,.pb-led-hello,.pb-led-typing,.pb-led-booked,.pb-led-thinking,.pb-hop,.pb-shake{animation:none}
}