@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
:root { --pi-bg: #120A1C; --pi-bg-2: #1A1028; --pi-panel: #221636; --pi-raised: #2F2048; --pi-border: #2F2048; --pi-border-strong: #4A3568; --pi-text: #F3EDFB; --pi-muted: #B4A5CC; --pi-dim: #83739C; --pi-accent: #C084FC; --pi-accent-hover: #D8B4FE; --pi-accent-text: #D8B4FE; --pi-on-accent: #22093F; --pi-accent-soft: rgba(192, 132, 252, 0.12); --pi-hover: rgba(180, 165, 204, 0.08); --pi-scrim: rgba(18, 10, 28, 0.7); --pi-a-50: 249 243 255; --pi-a-100: 242 230 254; --pi-a-200: 231 208 254; --pi-a-300: 218 184 253; --pi-a-400: 205 157 253; --pi-a-500: 192 132 252; --pi-a-600: 192 132 252; --pi-a-700: 154 106 202; --pi-a-800: 111 77 146; --pi-a-900: 86 59 113; --pi-a-950: 58 40 76; --pi-g-50: 250 248 253; --pi-g-100: 243 237 251; --pi-g-200: 230 223 242; --pi-g-300: 212 201 228; --pi-g-400: 180 165 204; --pi-g-500: 131 115 156; --pi-g-600: 102 84 130; --pi-g-700: 74 53 104; --pi-g-800: 47 32 72; --pi-g-900: 34 22 54; --pi-g-950: 18 10 28; --pi-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --pi-liquid-blur: blur(18px) saturate(150%); --pi-radius-sm: 12px; --pi-radius: 12px; --pi-radius-panel: 18px; --pi-radius-lg: 22px; --pi-glass: rgba(34, 22, 54, 0.66); --pi-glass-strong: rgba(34, 22, 54, 0.86); --pi-glass-inner: rgba(47, 32, 72, 0.45); --pi-glass-edge: rgba(255, 255, 255, 0.14); --pi-glass-shine: rgba(255, 255, 255, 0.12); --pi-glass-depth: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 36px -22px rgba(0, 0, 0, 0.7); --pi-pool-1: rgba(192, 132, 252, 0.32); --pi-pool-2: rgba(216, 180, 254, 0.192); --pi-surface: var(--pi-glass); --pi-surface-card: var(--pi-glass-strong); --pi-surface-dock: var(--pi-glass); }
[data-theme="light"],
html.light { --pi-bg: #FAF6FE; --pi-bg-2: #F1E9FA; --pi-panel: #FFFFFF; --pi-raised: #F1E9FA; --pi-border: #E3D6F2; --pi-border-strong: #CDB9E6; --pi-text: #24123F; --pi-muted: #5A4774; --pi-dim: #9585AD; --pi-accent: #7E22CE; --pi-accent-hover: #6B21A8; --pi-accent-text: #6B21A8; --pi-on-accent: #FFFFFF; --pi-accent-soft: rgba(126, 34, 206, 0.1); --pi-hover: rgba(36, 18, 63, 0.05); --pi-scrim: rgba(36, 18, 63, 0.4); --pi-a-50: 38 10 62; --pi-a-100: 57 15 93; --pi-a-200: 73 20 119; --pi-a-300: 101 27 165; --pi-a-400: 101 27 165; --pi-a-500: 126 34 206; --pi-a-600: 126 34 206; --pi-a-700: 101 27 165; --pi-a-800: 206 171 236; --pi-a-900: 229 211 245; --pi-a-950: 242 233 250; --pi-glass: rgba(255, 255, 255, 0.62); --pi-glass-strong: rgba(255, 255, 255, 0.86); --pi-glass-inner: rgba(241, 233, 250, 0.45); --pi-glass-edge: rgba(255, 255, 255, 0.75); --pi-glass-shine: rgba(255, 255, 255, 0.7); --pi-glass-depth: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 16px 36px -22px rgba(15, 23, 42, 0.25); --pi-pool-1: rgba(126, 34, 206, 0.2); --pi-pool-2: rgba(107, 33, 168, 0.12); --pi-surface: var(--pi-glass); --pi-surface-card: var(--pi-glass-strong); --pi-surface-dock: var(--pi-glass); }
/*
 * Liquid surfaces: added after the token overrides for themes with "surface": "liquid".
 * Uses only tokens (core/theme.py sets --pi-glass*, --pi-pool-*).
 *
 * Blur goes on the outermost layers only. It is skipped on panels holding a dialog,
 * because backdrop-filter would trap position:fixed children inside the panel.
 */

/* Colour pools drifting behind the page */
html:root { background-color: var(--pi-bg) !important; }
html:root body { background-color: transparent !important; background-image: none !important; }
.ambient-mesh { display: none; }

html::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 34% at 24% 26%, var(--pi-pool-1), transparent 70%),
    radial-gradient(34% 40% at 76% 68%, var(--pi-pool-2), transparent 70%),
    radial-gradient(26% 28% at 62% 20%, var(--pi-pool-2), transparent 72%);
  animation: pi-liquid-drift 48s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes pi-liquid-drift {
  from { transform: translate3d(-4%, -3%, 0) rotate(-4deg) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) rotate(6deg) scale(1.12); }
}

/* Shared surfaces */
.pi-card,
.pi-panel,
.liquid-glass-card {
  background: var(--pi-glass);
  border-color: var(--pi-glass-edge);
  box-shadow: var(--pi-glass-depth);
}

/* Tailwind-built panels, outermost */
html:root :is(.pi-app, .pi-admin) :is([class^="bg-slate-950"], [class*=" bg-slate-950"], [class^="bg-slate-900"], [class*=" bg-slate-900"], [class^="bg-zinc-950"], [class*=" bg-zinc-950"], [class^="bg-zinc-900"], [class*=" bg-zinc-900"]):not(.pi-art, .pi-art *, input, select, textarea, button, option, span, .fixed, .absolute, .sticky) {
  background-color: var(--pi-glass) !important;
  border-color: var(--pi-glass-edge) !important;
  box-shadow: var(--pi-glass-depth) !important;
}

/* Panels inside panels: a light tint, so glass doesn't stack up and turn muddy */
html:root :is(.pi-app, .pi-admin) :is([class^="bg-slate-950"], [class*=" bg-slate-950"], [class^="bg-slate-900"], [class*=" bg-slate-900"], [class^="bg-zinc-950"], [class*=" bg-zinc-950"], [class^="bg-zinc-900"], [class*=" bg-zinc-900"]) :is([class^="bg-slate-950"], [class*=" bg-slate-950"], [class^="bg-slate-900"], [class*=" bg-slate-900"], [class^="bg-zinc-950"], [class*=" bg-zinc-950"], [class^="bg-zinc-900"], [class*=" bg-zinc-900"]):not(.pi-art, .pi-art *, input, select, textarea, button, option, span, .fixed, .absolute, .sticky) {
  background-color: var(--pi-glass-inner) !important;
  box-shadow: none !important;
}

/* Floating layers need to stay readable over whatever is behind them */
html:root :is(.pi-app, .pi-admin) :is([class^="bg-slate-950"], [class*=" bg-slate-950"], [class^="bg-slate-900"], [class*=" bg-slate-900"], [class^="bg-zinc-950"], [class*=" bg-zinc-950"], [class^="bg-zinc-900"], [class*=" bg-zinc-900"]):is(.fixed, .absolute, .sticky):not(.pi-art, .pi-art *, span),
.pi-menu,
.pi-pop,
.pi-dialog,
.pi-overflow-menu,
.pihub-drawer {
  background-color: var(--pi-glass-strong) !important;
  border-color: var(--pi-glass-edge) !important;
  backdrop-filter: var(--pi-liquid-blur) !important;
  -webkit-backdrop-filter: var(--pi-liquid-blur) !important;
}

.liquid-glass-header {
  background: var(--pi-glass-strong);
  border-bottom-color: var(--pi-glass-edge);
  backdrop-filter: var(--pi-liquid-blur);
  -webkit-backdrop-filter: var(--pi-liquid-blur);
  box-shadow: inset 0 -1px 0 var(--pi-glass-edge);
}

@supports selector(:has(*)) {
  .pi-card:not(:has(.fixed, .pi-dialog, [role="dialog"])),
  .pi-panel:not(:has(.fixed, .pi-dialog, [role="dialog"])),
  .liquid-glass-card:not(:has(.fixed, .pi-dialog, [role="dialog"])),
  html:root :is(.pi-app, .pi-admin) :is([class^="bg-slate-950"], [class*=" bg-slate-950"], [class^="bg-slate-900"], [class*=" bg-slate-900"], [class^="bg-zinc-950"], [class*=" bg-zinc-950"], [class^="bg-zinc-900"], [class*=" bg-zinc-900"]):not(:is([class^="bg-slate-950"], [class*=" bg-slate-950"], [class^="bg-slate-900"], [class*=" bg-slate-900"], [class^="bg-zinc-950"], [class*=" bg-zinc-950"], [class^="bg-zinc-900"], [class*=" bg-zinc-900"]) *):not(.pi-art, .pi-art *, input, select, textarea, button, option, span, .fixed, .absolute, .sticky):not(:has(.fixed, .pi-dialog, [role="dialog"])) {
    backdrop-filter: var(--pi-liquid-blur) !important;
    -webkit-backdrop-filter: var(--pi-liquid-blur) !important;
  }
}

/* Controls */
.pi-btn,
.liquid-glass-btn,
.pi-segment,
.pi-segment > button,
.pi-segment > a { border-radius: 9999px; }

.pi-btn,
.liquid-glass-btn { box-shadow: inset 0 1px 0 var(--pi-glass-shine); }

.pi-btn-primary {
  background: linear-gradient(180deg, var(--pi-accent-hover), var(--pi-accent));
  box-shadow: inset 0 1px 0 var(--pi-glass-shine), 0 6px 18px -8px var(--pi-accent);
}
.pi-btn-primary:hover { background: var(--pi-accent-hover); }

/* Lighter version: small landscape screens such as the Pi's own 7" display */
@media (max-height: 500px) and (min-width: 700px) {
  :root, [data-theme="light"], html.light {
    --pi-glass: var(--pi-glass-strong);
    --pi-liquid-blur: none;
  }
  html::before { animation: none; will-change: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html::before { animation: none; will-change: auto; }
}

@media (prefers-reduced-transparency: reduce) {
  :root, [data-theme="light"], html.light {
    --pi-glass: var(--pi-panel);
    --pi-glass-strong: var(--pi-panel);
    --pi-glass-inner: var(--pi-raised);
    --pi-liquid-blur: none;
    --pi-pool-1: transparent;
    --pi-pool-2: transparent;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, [data-theme="light"], html.light { --pi-glass: var(--pi-glass-strong); }
}