/* WinPulse demo tokens: the real app's theme.slint and window-theme.slint as custom properties,
   scoped to .wp-app, in both themes, plus the drawn Windows 11 parts. Every px value inside the
   demo comes from here. Inter WP is Inter 4.1 (OFL) with tabular digits frozen in. */

@font-face { font-family: "Inter WP Text"; src: url("../fonts/InterWP-Text-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter WP Text"; src: url("../fonts/InterWP-Text-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter WP Text"; src: url("../fonts/InterWP-Text-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter WP Display"; src: url("../fonts/InterWP-Display-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

.wp-app { /* shared, theme independent */
  --wp-font-text: "Inter WP Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --wp-font-display: "Inter WP Display", "Inter WP Text", "Segoe UI Variable Display", system-ui, sans-serif;
  --wp-on-accent: #ffffff;
  --wp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --wp-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --wp-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --wp-ease-data: cubic-bezier(0.33, 1, 0.68, 1);
  --wp-ease-toast-in: cubic-bezier(0.1, 0.9, 0.2, 1);
  --wp-caption-close: #c42b1c;
  /* panel geometry (theme.slint) */
  --wp-panel-w: 360px; --wp-panel-pad: 12px; --wp-gap: 10px; --wp-panel-radius: 8px; /* DWMWCP_ROUND */
  --wp-card-radius: 14px; --wp-card-px: 18px; --wp-card-pt: 12px; --wp-card-pb: 10px;
  --wp-mini-pad: 11px; --wp-mini-h: 88px; --wp-strip-h: 38px; --wp-strip-radius: 12px; --wp-strip-inset: 4px;
  --wp-pill-radius: 9px; --wp-tab-icon: 18px; --wp-bar-h: 6px; --wp-bar-w: 56px; --wp-value-w: 72px;
  --wp-app-icon: 16px; --wp-row-h: 29px; --wp-stat-h: 24px; --wp-btn-h: 30px; --wp-btn-radius: 12px;
  --wp-size-number: 23px; --wp-size-unit-hero: 15px; --wp-size-unit-mini: 12px; --wp-size-number-small: 14px;
  --wp-size-row: 13px; --wp-size-small: 11px; --wp-size-section: 10px; --wp-section-tracking: 1px;
  /* window geometry (window-theme.slint) */
  --wp-w-page-pad: 28px; --wp-w-gap: 16px; --wp-w-section-gap: 30px; --wp-w-radius: 16px; --wp-w-card-pad: 20px;
  --wp-w-toolbar-h: 56px; --wp-w-status-h: 28px; --wp-w-control-h: 32px; --wp-w-app-icon: 18px;
  --wp-w-size-page-title: 26px; --wp-w-size-page-subtitle: 14px; --wp-w-size-section: 20px;
  --wp-w-size-card-title: 14px; --wp-w-size-body: 14px; --wp-w-size-small: 12px;
  --wp-w-size-number: 38px; --wp-w-size-unit: 20px; --wp-w-size-stat: 14px; --wp-w-size-tab: 14px;
  --wp-taskbar-h: 48px;
  font-family: var(--wp-font-text); line-height: 1.21; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-size: var(--wp-size-row); font-weight: 400;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.wp-app[data-theme="dark"] {
  color-scheme: dark;
  --wp-panel: #1d1d1d; --wp-card: #252525; --wp-hairline: #2f2f2f; --wp-divider: #333335; --wp-track: #333336;
  --wp-skeleton: #2e2e30; --wp-button-hover: #2d2d2f; --wp-button-pressed: #353537;
  --wp-text: #ffffff; --wp-text-2: #8e8e93; --wp-label: #7c7c80; --wp-tab-icon: #7c7c80; --wp-focus: #10e36c;
  /* round 10: WinPulse green as the one accent, a neutral Overview, coral Sound (theme.slint) */
  --wp-brand: #10e36c; --wp-on-brand: #04140a; --wp-brand-text: #10e36c;
  --wp-on-overview: #1d1d1d; --wp-sound: #f2775b; --wp-win-blue: #007aff;
  --wp-overview: #f2f2f4; --wp-cpu: #3886e4; --wp-memory: #9084e9; --wp-disk: #c88500; --wp-network: #169e6f;
  --wp-gpu: #d75182; --wp-battery: #2ea838; --wp-ports: #1a9fb5;
  --wp-mem-in-use: #3886e4; --wp-mem-compressed: #169e6f; --wp-mem-cached: #6b6b70; --wp-mem-free: #3d3d40;
  --wp-area-top: 0.30; --wp-area-bottom: 0.04; --wp-haze: 0.14;
  --wp-normal-text: #68ce67; --wp-normal-chip: #243b27; --wp-warning-text: #f5a623; --wp-warning-chip: #46372a;
  --wp-high-text: #ff6b61; --wp-high-chip: #4a2927;
  /* window */
  --wp-w-ground: #24282b; --wp-w-card: #2f3335; --wp-w-control: #2c3033; --wp-w-control-border: #3b4043;
  --wp-w-control-selected: #4a4f53; --wp-w-hover: #363a3d; --wp-w-pressed: #3d4245; --wp-w-hairline: #383d40;
  --wp-w-track: #3d4245; --wp-w-grid: #3a3f42; --wp-w-skeleton: #393d40; --wp-w-tooltip: #3d4245;
  --wp-w-tooltip-border: #4a4f53; --wp-w-text: #ffffff; --wp-w-text-2: #a2a6ab; --wp-w-label: #8a8f94;
  --wp-w-good: #68ce67; --wp-w-danger: #ff6b61; --wp-w-heat: #f0874a; --wp-w-mixer: #f2775b;
  --wp-w-chosen-alpha: 20%; --wp-w-chip-alpha: 22%; --wp-w-other: #5b6064;
  --wp-w-chart-fill-top: 0.34;
  /* Windows 11 chrome (the demo's drawn OS parts) */
  --wp-os-taskbar: #1c1c1c; --wp-os-taskbar-edge: rgba(255,255,255,0.08);
  --wp-os-hover: rgba(255,255,255,0.06); --wp-os-pressed: rgba(255,255,255,0.04);
  --wp-os-ink: #ffffff; --wp-os-ink-2: rgba(255,255,255,0.786); --wp-os-running: #9d9d9d; --wp-os-accent: #4cc2ff;
  --wp-os-tooltip: #2b2b2b; --wp-os-tooltip-border: rgba(255,255,255,0.08);
  --wp-os-toast: rgba(44,44,44,0.94); --wp-os-toast-solid: #2c2c2c; --wp-os-toast-border: rgba(255,255,255,0.08);
  --wp-os-button: rgba(255,255,255,0.061); --wp-os-button-hover: rgba(255,255,255,0.084);
  --wp-os-button-border: rgba(255,255,255,0.093);
  --wp-os-window-border: rgba(255,255,255,0.10);
  --wp-os-shadow-flyout: drop-shadow(0 14px 14px rgba(0,0,0,0.28)) drop-shadow(0 0 4px rgba(0,0,0,0.20));
  --wp-os-shadow-panel: 0 14px 28px rgba(0,0,0,0.28), 0 0 8px rgba(0,0,0,0.20);
  --wp-os-shadow-window: 0 32px 64px rgba(0,0,0,0.37), 0 2px 21px rgba(0,0,0,0.37);
  --wp-os-shadow-toast: 0 14px 28px rgba(0,0,0,0.28), 0 0 8px rgba(0,0,0,0.20);
}
.wp-app[data-theme="light"] {
  color-scheme: light;
  --wp-panel: #f2f2f5; --wp-card: #ffffff; --wp-hairline: #e3e3e8; --wp-divider: #e5e5ea; --wp-track: #e5e5ea;
  --wp-skeleton: #ececf0; --wp-button-hover: #f5f5f7; --wp-button-pressed: #ebebef;
  --wp-text: #1c1c1e; --wp-text-2: #6e6e73; --wp-label: #8a8a8e; --wp-tab-icon: #8a8a8e; --wp-focus: #0a7f3f;
  --wp-brand: #0a7f3f; --wp-on-brand: #ffffff; --wp-brand-text: #0a7a3b;
  --wp-on-overview: #ffffff; --wp-sound: #d0533a; --wp-win-blue: #006de4;
  /* light metric colours = the dark ones with every channel / 1.12 (Slint darker(0.12)); the
     Overview and Sound have their own light values (theme.slint) */
  --wp-overview: #1c1c1e; --wp-cpu: #3278cc; --wp-memory: #8176d0; --wp-disk: #b37700; --wp-network: #148d63;
  --wp-gpu: #c04874; --wp-battery: #299632; --wp-ports: #178ea2;
  --wp-mem-in-use: #3278cc; --wp-mem-compressed: #148d63; --wp-mem-cached: #aeaeb2; --wp-mem-free: #d1d1d6;
  --wp-area-top: 0.24; --wp-area-bottom: 0.03; --wp-haze: 0.14;
  --wp-normal-text: #1f7a34; --wp-normal-chip: #e4f5e7; --wp-warning-text: #b36b00; --wp-warning-chip: #fdf0dc;
  --wp-high-text: #c62f23; --wp-high-chip: #fde6e4;
  --wp-w-ground: #f0f0f3; --wp-w-card: #ffffff; --wp-w-control: #e6e6eb; --wp-w-control-border: #dcdce2;
  --wp-w-control-selected: #ffffff; --wp-w-hover: #f4f4f7; --wp-w-pressed: #ebebef; --wp-w-hairline: #e1e1e6;
  --wp-w-track: #e6e6eb; --wp-w-grid: #ebebef; --wp-w-skeleton: #ececf0; --wp-w-tooltip: #ffffff;
  --wp-w-tooltip-border: #dcdce2; --wp-w-text: #1c1c1e; --wp-w-text-2: #6e6e73; --wp-w-label: #8a8a8e;
  --wp-w-good: #2e9e3c; --wp-w-danger: #c62f23; --wp-w-heat: #cc5a1e; --wp-w-mixer: #d0533a;
  --wp-w-chosen-alpha: 13%; --wp-w-chip-alpha: 14%; --wp-w-other: #c7c7cc;
  --wp-w-chart-fill-top: 0.24;
  --wp-os-taskbar: #eeeeee; --wp-os-taskbar-edge: rgba(0,0,0,0.08);
  --wp-os-hover: rgba(0,0,0,0.05); --wp-os-pressed: rgba(0,0,0,0.03);
  --wp-os-ink: #1c1c1c; --wp-os-ink-2: rgba(0,0,0,0.62); --wp-os-running: #8a8a8a; --wp-os-accent: #005fb8;
  --wp-os-tooltip: #f9f9f9; --wp-os-tooltip-border: rgba(0,0,0,0.06);
  --wp-os-toast: rgba(249,249,249,0.94); --wp-os-toast-solid: #f9f9f9; --wp-os-toast-border: rgba(0,0,0,0.08);
  --wp-os-button: rgba(255,255,255,0.7); --wp-os-button-hover: rgba(249,249,249,0.5);
  --wp-os-button-border: rgba(0,0,0,0.0578);
  --wp-os-window-border: rgba(0,0,0,0.10);
  --wp-os-shadow-flyout: drop-shadow(0 14px 14px rgba(0,0,0,0.14)) drop-shadow(0 0 4px rgba(0,0,0,0.10));
  --wp-os-shadow-panel: 0 14px 28px rgba(0,0,0,0.14), 0 0 8px rgba(0,0,0,0.10);
  --wp-os-shadow-window: 0 32px 64px rgba(0,0,0,0.19), 0 2px 21px rgba(0,0,0,0.15);
  --wp-os-shadow-toast: 0 14px 28px rgba(0,0,0,0.14), 0 0 8px rgba(0,0,0,0.10);
}

/* Metric accents: an element takes its metric's colour as --acc; children use var(--acc). */
.wp-acc-overview { --acc: var(--wp-overview); }
.wp-acc-cpu { --acc: var(--wp-cpu); }
.wp-acc-memory { --acc: var(--wp-memory); }
.wp-acc-disk { --acc: var(--wp-disk); }
.wp-acc-network { --acc: var(--wp-network); }
.wp-acc-gpu { --acc: var(--wp-gpu); }
.wp-acc-battery { --acc: var(--wp-battery); }
.wp-acc-ports { --acc: var(--wp-ports); }
.wp-acc-sound { --acc: var(--wp-sound); }

/* The icon sprite: present (gradients need a rendered SVG) but takes no room. */
.wp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.wp-i { display: block; flex: none; width: 16px; height: 16px; fill: currentColor; overflow: visible; }

/* App logos: brand colours (Simple Icons, CC0); Windows rows as the real app draws them. */
.wp-brand-googlechrome { color: #4285f4; }
.wp-brand-discord { color: #5865f2; }
.wp-brand-spotify { color: #1ed760; }
.wp-brand-steam { color: var(--wp-text); }
.wp-brand-whatsapp { color: #25d366; }
.wp-brand-nodedotjs { color: #5fa04e; }
.wp-brand-python { color: #3776ab; }
.wp-brand-googledrive { color: #4285f4; }
.wp-brand-zoom { color: #0b5cff; }
.wp-brand-roblox { color: var(--wp-text); }
.wp-brand-windows { color: var(--wp-win-blue); }
.wp-brand-services { color: var(--wp-label); }
.wp-brand-none { color: var(--wp-label); }

/* A component that becomes visible renders its latest state with no transitions for one frame. */
.wp-instant, .wp-instant * { transition: none !important; }

/* Theme switch (C30): the page adds .wp-theming to every .wp-app for 250 ms. */
.wp-theming, .wp-theming * {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, fill 200ms ease, stroke 200ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .wp-theming, .wp-theming * { transition: none !important; }
}

/* Visually hidden text for screen readers. */
.wp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }