/* Pillow Light design system kit (Better Design). Do not edit by hand. */
:root {
  --background: #FFFFFF;
  --foreground: #0F172A;
  --card: #FFFFFF;
  --card-foreground: #0F172A;
  --popover: #FFFFFF;
  --popover-foreground: #0F172A;
  --primary: #1E66FF;
  --primary-foreground: #FFFFFF;
  --secondary: #F4F5F7;
  --secondary-foreground: #0F172A;
  --muted: #F4F5F7;
  --muted-foreground: #5B6573;
  --accent: #EEF2FF;
  --accent-foreground: #1E66FF;
  --destructive: #E11D48;
  --destructive-foreground: #FFFFFF;
  --border: #E5E7EB;
  --input: #FFFFFF;
  --ring: #1E66FF;
  --radius: 0.875rem;
  --shadow-pillow-primary: inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.30), inset 0 -0.125rem 0 0 rgba(0, 0, 0, 0.18), 0 0.0625rem 0.0625rem 0 rgba(15, 23, 42, 0.08), 0 0.25rem 0.625rem -0.125rem color-mix(in oklch, var(--primary) 35%, transparent);
  --shadow-pillow-primary-hover: inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.32), inset 0 -0.125rem 0 0 rgba(0, 0, 0, 0.20), 0 0.125rem 0.125rem 0 rgba(15, 23, 42, 0.10), 0 0.5rem 1.125rem -0.1875rem color-mix(in oklch, var(--primary) 45%, transparent);
  --shadow-pillow-destructive: inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.28), inset 0 -0.125rem 0 0 rgba(0, 0, 0, 0.20), 0 0.0625rem 0.0625rem 0 rgba(15, 23, 42, 0.08), 0 0.25rem 0.625rem -0.125rem color-mix(in oklch, var(--destructive) 35%, transparent);
  --shadow-pillow-destructive-hover: inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.30), inset 0 -0.125rem 0 0 rgba(0, 0, 0, 0.22), 0 0.125rem 0.125rem 0 rgba(15, 23, 42, 0.10), 0 0.5rem 1.125rem -0.1875rem color-mix(in oklch, var(--destructive) 45%, transparent);
  --shadow-pillow-secondary: inset 0 0.0625rem 0 0 rgba(255, 255, 255, 1), inset 0 -0.0938rem 0 0 rgba(15, 23, 42, 0.06), 0 0 0 0.0625rem rgba(15, 23, 42, 0.05), 0 0.0625rem 0.0625rem 0 rgba(15, 23, 42, 0.04), 0 0.1875rem 0.5rem -0.125rem rgba(15, 23, 42, 0.10);
  --shadow-pillow-secondary-hover: inset 0 0.0625rem 0 0 rgba(255, 255, 255, 1), inset 0 -0.0938rem 0 0 rgba(15, 23, 42, 0.08), 0 0 0 0.0625rem rgba(15, 23, 42, 0.07), 0 0.125rem 0.125rem 0 rgba(15, 23, 42, 0.06), 0 0.375rem 0.875rem -0.1875rem rgba(15, 23, 42, 0.14);
  --shadow-2xs: 0 0.0625rem 0.0625rem rgba(15, 23, 42, 0.04);
  --shadow-xs: 0 0.0625rem 0.125rem rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 0.0625rem 0.125rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.04);
  --shadow: 0 0.0625rem 0.125rem rgba(15, 23, 42, 0.06), 0 0.25rem 0.75rem rgba(15, 23, 42, 0.06);
  --shadow-md: 0 0.125rem 0.25rem rgba(15, 23, 42, 0.06), 0 0.5rem 1.25rem rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.08), 0 1rem 2rem rgba(15, 23, 42, 0.10);
  --shadow-xl: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.12), 0 0 0 0.0625rem rgba(15, 23, 42, 0.04);
  --chart-1: var(--primary);
  --chart-2: oklch(from var(--primary) calc(l - 0.09) calc(c * 0.92) h);
  --chart-3: oklch(from var(--primary) calc(l - 0.18) calc(c * 0.84) h);
  --chart-4: oklch(from var(--primary) calc(l - 0.27) calc(c * 0.76) h);
  --chart-5: oklch(from var(--primary) calc(l - 0.36) calc(c * 0.68) h);
  --transition-duration-fast: 150ms;
  --transition-duration-base: 200ms;
  --transition-duration-slow: 280ms;
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --default-transition-duration: var(--transition-duration-fast);
  --default-transition-timing-function: var(--ease-out);
  --ai-label: var(--muted);
  --ai-label-foreground: var(--foreground);
  --layout-density: comfortable;
  --layout-density-source: design-system;
  --layout-sidebar: calc(var(--spacing, 0.25rem) * 56);
  --layout-inset: calc(var(--spacing, 0.25rem) * 6);
  --layout-section-gap: calc(var(--spacing, 0.25rem) * 8);
  --layout-column-gap: calc(var(--spacing, 0.25rem) * 4);
  --layout-card-padding: calc(var(--spacing, 0.25rem) * 5);
}
.dark {
  --background: #FFFFFF;
  --foreground: #0F172A;
  --card: #FFFFFF;
  --card-foreground: #0F172A;
  --popover: #FFFFFF;
  --popover-foreground: #0F172A;
  --primary: #1E66FF;
  --primary-foreground: #FFFFFF;
  --secondary: #F4F5F7;
  --secondary-foreground: #0F172A;
  --muted: #F4F5F7;
  --muted-foreground: #5B6573;
  --accent: #EEF2FF;
  --accent-foreground: #1E66FF;
  --destructive: #E11D48;
  --destructive-foreground: #FFFFFF;
  --border: #E5E7EB;
  --input: #FFFFFF;
  --ring: #1E66FF;
  --radius: 0.875rem;
  --shadow-pillow-primary: inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.30), inset 0 -0.125rem 0 0 rgba(0, 0, 0, 0.18), 0 0.0625rem 0.0625rem 0 rgba(15, 23, 42, 0.08), 0 0.25rem 0.625rem -0.125rem color-mix(in oklch, var(--primary) 35%, transparent);
  --shadow-pillow-primary-hover: inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.32), inset 0 -0.125rem 0 0 rgba(0, 0, 0, 0.20), 0 0.125rem 0.125rem 0 rgba(15, 23, 42, 0.10), 0 0.5rem 1.125rem -0.1875rem color-mix(in oklch, var(--primary) 45%, transparent);
  --shadow-pillow-destructive: inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.28), inset 0 -0.125rem 0 0 rgba(0, 0, 0, 0.20), 0 0.0625rem 0.0625rem 0 rgba(15, 23, 42, 0.08), 0 0.25rem 0.625rem -0.125rem color-mix(in oklch, var(--destructive) 35%, transparent);
  --shadow-pillow-destructive-hover: inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.30), inset 0 -0.125rem 0 0 rgba(0, 0, 0, 0.22), 0 0.125rem 0.125rem 0 rgba(15, 23, 42, 0.10), 0 0.5rem 1.125rem -0.1875rem color-mix(in oklch, var(--destructive) 45%, transparent);
  --shadow-pillow-secondary: inset 0 0.0625rem 0 0 rgba(255, 255, 255, 1), inset 0 -0.0938rem 0 0 rgba(15, 23, 42, 0.06), 0 0 0 0.0625rem rgba(15, 23, 42, 0.05), 0 0.0625rem 0.0625rem 0 rgba(15, 23, 42, 0.04), 0 0.1875rem 0.5rem -0.125rem rgba(15, 23, 42, 0.10);
  --shadow-pillow-secondary-hover: inset 0 0.0625rem 0 0 rgba(255, 255, 255, 1), inset 0 -0.0938rem 0 0 rgba(15, 23, 42, 0.08), 0 0 0 0.0625rem rgba(15, 23, 42, 0.07), 0 0.125rem 0.125rem 0 rgba(15, 23, 42, 0.06), 0 0.375rem 0.875rem -0.1875rem rgba(15, 23, 42, 0.14);
  --shadow-2xs: 0 0.0625rem 0.0625rem rgba(15, 23, 42, 0.04);
  --shadow-xs: 0 0.0625rem 0.125rem rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 0.0625rem 0.125rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.04);
  --shadow: 0 0.0625rem 0.125rem rgba(15, 23, 42, 0.06), 0 0.25rem 0.75rem rgba(15, 23, 42, 0.06);
  --shadow-md: 0 0.125rem 0.25rem rgba(15, 23, 42, 0.06), 0 0.5rem 1.25rem rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.08), 0 1rem 2rem rgba(15, 23, 42, 0.10);
  --shadow-xl: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.12), 0 0 0 0.0625rem rgba(15, 23, 42, 0.04);
  --chart-1: var(--primary);
  --chart-2: oklch(from var(--primary) calc(l - 0.09) calc(c * 0.92) h);
  --chart-3: oklch(from var(--primary) calc(l - 0.18) calc(c * 0.84) h);
  --chart-4: oklch(from var(--primary) calc(l - 0.27) calc(c * 0.76) h);
  --chart-5: oklch(from var(--primary) calc(l - 0.36) calc(c * 0.68) h);
  --transition-duration-fast: 150ms;
  --transition-duration-base: 200ms;
  --transition-duration-slow: 280ms;
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --default-transition-duration: var(--transition-duration-fast);
  --default-transition-timing-function: var(--ease-out);
  --ai-label: var(--muted);
  --ai-label-foreground: var(--foreground);
  --layout-density: comfortable;
  --layout-density-source: design-system;
  --layout-sidebar: calc(var(--spacing, 0.25rem) * 56);
  --layout-inset: calc(var(--spacing, 0.25rem) * 6);
  --layout-section-gap: calc(var(--spacing, 0.25rem) * 8);
  --layout-column-gap: calc(var(--spacing, 0.25rem) * 4);
  --layout-card-padding: calc(var(--spacing, 0.25rem) * 5);
}
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root {
  --radius-sm: calc(var(--radius) - 0.375rem);
  --radius-md: calc(var(--radius) - 0.25rem);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 0.25rem);
}
:root {
  --shadow-pillow-primary:
    inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.30),
    inset 0 -0.125rem 0 0 rgba(0, 0, 0, 0.18),
    0 0.0625rem 0.0625rem 0 rgba(15, 23, 42, 0.08),
    0 0.25rem 0.625rem -0.125rem color-mix(in oklch, var(--primary) 35%, transparent);
  --shadow-pillow-primary-hover:
    inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.32),
    inset 0 -0.125rem 0 0 rgba(0, 0, 0, 0.20),
    0 0.125rem 0.125rem 0 rgba(15, 23, 42, 0.10),
    0 0.5rem 1.125rem -0.1875rem color-mix(in oklch, var(--primary) 45%, transparent);
  --shadow-pillow-destructive:
    inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.28),
    inset 0 -0.125rem 0 0 rgba(0, 0, 0, 0.20),
    0 0.0625rem 0.0625rem 0 rgba(15, 23, 42, 0.08),
    0 0.25rem 0.625rem -0.125rem color-mix(in oklch, var(--destructive) 35%, transparent);
  --shadow-pillow-destructive-hover:
    inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.30),
    inset 0 -0.125rem 0 0 rgba(0, 0, 0, 0.22),
    0 0.125rem 0.125rem 0 rgba(15, 23, 42, 0.10),
    0 0.5rem 1.125rem -0.1875rem color-mix(in oklch, var(--destructive) 45%, transparent);
  --shadow-pillow-secondary:
    inset 0 0.0625rem 0 0 rgba(255, 255, 255, 1),
    inset 0 -0.0938rem 0 0 rgba(15, 23, 42, 0.06),
    0 0 0 0.0625rem rgba(15, 23, 42, 0.05),
    0 0.0625rem 0.0625rem 0 rgba(15, 23, 42, 0.04),
    0 0.1875rem 0.5rem -0.125rem rgba(15, 23, 42, 0.10);
  --shadow-pillow-secondary-hover:
    inset 0 0.0625rem 0 0 rgba(255, 255, 255, 1),
    inset 0 -0.0938rem 0 0 rgba(15, 23, 42, 0.08),
    0 0 0 0.0625rem rgba(15, 23, 42, 0.07),
    0 0.125rem 0.125rem 0 rgba(15, 23, 42, 0.06),
    0 0.375rem 0.875rem -0.1875rem rgba(15, 23, 42, 0.14);
  --shadow-2xs: 0 0.0625rem 0.0625rem rgba(15, 23, 42, 0.04);
  --shadow-xs:  0 0.0625rem 0.125rem rgba(15, 23, 42, 0.05);
  --shadow-sm:  0 0.0625rem 0.125rem rgba(15, 23, 42, 0.06), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.04);
  --shadow:     0 0.0625rem 0.125rem rgba(15, 23, 42, 0.06), 0 0.25rem 0.75rem rgba(15, 23, 42, 0.06);
  --shadow-md:  0 0.125rem 0.25rem rgba(15, 23, 42, 0.06), 0 0.5rem 1.25rem rgba(15, 23, 42, 0.08);
  --shadow-lg:  0 0.25rem 0.75rem rgba(15, 23, 42, 0.08), 0 1rem 2rem rgba(15, 23, 42, 0.10);
  --shadow-xl:  0 0.5rem 1.5rem rgba(15, 23, 42, 0.12), 0 0 0 0.0625rem rgba(15, 23, 42, 0.04);
}
.bd-input, .ds-input, .ds-textarea, .ds-select { border-radius: var(--radius-lg, var(--radius, 0.5rem)); }
.bd-card, .ds-card { border-radius: var(--radius-2xl, 1rem); }
.bd-btn-primary, .bd-view, .ds-btn-primary { box-shadow: var(--shadow-pillow-primary); }
.bd-btn-primary, .bd-view, .ds-btn-primary { background-image: linear-gradient(180deg,color-mix(in oklch,var(--primary) 85%,white) 0%,var(--primary) 55%,color-mix(in oklch,var(--primary) 85%,black) 100%); }
*,*::before,*::after{box-sizing:border-box}
:where(.ds){font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);color:var(--foreground,oklch(0.2 0 0));background:var(--background,oklch(1 0 0));line-height:1.5}
.ds :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small){color:inherit}
.ds h1,.ds h2,.ds h3,.ds h4{font-family:inherit;font-weight:600;margin:0 0 .5em;color:var(--foreground,oklch(0.2 0 0))}
.ds .ds-display{font-family:inherit;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin:0;color:var(--foreground,oklch(0.2 0 0))}
.ds .ds-section-title{font-family:inherit;font-size:1.25rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;margin:0;color:var(--foreground,oklch(0.2 0 0))}
.ds .ds-supporting{font-size:.875rem;font-weight:400;line-height:1.5;color:var(--muted-foreground,oklch(0.55 0 0));margin:0}
/* A link styled as a button keeps the button's own label colour, so the link
   colour skips .ds-btn. Resetting it with color:inherit outranked every button
   variant and put the page's dark text on the dark primary fill. */
.ds a:not(.ds-btn){color:var(--primary,oklch(0.45 0.15 264));text-decoration:none}
.ds a.ds-btn:hover{text-decoration:none}
.ds p{margin:0 0 1em}
.ds-muted{color:var(--muted-foreground,oklch(0.55 0 0))}

/* Button */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-size:.875rem;font-weight:500;line-height:1;padding:.6rem 1rem;border-radius:var(--radius-md,calc(var(--radius,0.5rem) - 2px));border:1px solid transparent;cursor:pointer;touch-action:manipulation;transition:opacity var(--transition-duration-fast,150ms) var(--ease-out,cubic-bezier(0.165, 0.84, 0.44, 1)),background var(--transition-duration-fast,150ms) var(--ease-out,cubic-bezier(0.165, 0.84, 0.44, 1));text-decoration:none}
.ds-btn:focus-visible{outline:2px solid var(--ring,var(--primary,oklch(0.45 0.15 264)));outline-offset:2px}
.ds-btn:disabled{background:var(--muted,oklch(0.94 0 0));color:var(--foreground,oklch(0.2 0 0));border-color:var(--border,oklch(0.85 0 0));opacity:1;cursor:not-allowed}
.ds-btn-primary{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0));box-shadow:var(--shadow-sm,var(--shadow-xs,none))}
.ds-btn-secondary{background:var(--secondary,oklch(0.96 0 0));color:var(--secondary-foreground,oklch(0.25 0 0));box-shadow:var(--shadow-xs,none)}
.ds-btn-outline{background:transparent;color:var(--foreground,oklch(0.2 0 0));border-color:var(--border,oklch(0.85 0 0))}
.ds-btn-ghost{background:transparent;color:var(--foreground,oklch(0.2 0 0))}
.ds .ds-btn[aria-pressed="true"],.ds .ds-btn[aria-pressed="true"]:hover{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0));border-color:var(--primary,oklch(0.45 0.15 264));opacity:1}
.ds-btn-sm{padding:.4rem .7rem;font-size:.8125rem}
.ds-btn-lg{padding:.75rem 1.4rem;font-size:1rem}

/* Form fields */
.ds-label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:.4rem;color:var(--foreground,oklch(0.2 0 0))}
.ds-input,.ds-textarea,.ds-select{width:100%;font:inherit;font-size:.875rem;padding:.55rem .75rem;border-radius:var(--radius-lg,var(--radius,0.5rem));border:1px solid var(--border,oklch(0.85 0 0));background:var(--input,var(--background,oklch(1 0 0)));color:var(--foreground,oklch(0.2 0 0));box-shadow:var(--shadow-inset,var(--shadow-2xs,none));transition:border-color var(--transition-duration-fast,150ms) var(--ease-out,cubic-bezier(0.165, 0.84, 0.44, 1)),box-shadow var(--transition-duration-fast,150ms) var(--ease-out,cubic-bezier(0.165, 0.84, 0.44, 1))}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--muted-foreground,oklch(0.6 0 0))}
.ds-input:focus,.ds-textarea:focus,.ds-select:focus{outline:none;border-color:var(--ring,var(--primary,oklch(0.45 0.15 264)));box-shadow:var(--shadow-inset,0 0 0 0 transparent),0 0 0 2px color-mix(in oklab,var(--ring,var(--primary,oklch(0.45 0.15 264))) 35%,transparent)}
.ds-textarea{min-height:5rem;resize:vertical}

/* Card */
.ds-card{display:flex;flex-direction:column;background:var(--card,var(--background,oklch(1 0 0)));color:var(--card-foreground,var(--foreground,oklch(0.2 0 0)));border:1px solid var(--border,oklch(0.9 0 0));border-radius:var(--radius-xl,calc(var(--radius,0.5rem) + 4px));box-shadow:var(--shadow-glass,var(--shadow-md,var(--shadow-sm,none)));overflow:hidden}
.ds-card-header{padding:1.1rem 1.25rem .5rem}
.ds-card-body{padding:.5rem 1.25rem 1.1rem}
.ds-card-footer{margin-top:auto;padding:.9rem 1.25rem;border-top:1px solid var(--border,oklch(0.92 0 0));display:flex;gap:.5rem;align-items:center}
.ds-card-title{font-size:1.05rem;margin:0 0 .25rem}
.ds-card-desc{font-size:.875rem;color:var(--muted-foreground,oklch(0.55 0 0));margin:0}

/* Badge */
.ds-badge{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;background:var(--secondary,oklch(0.9 0 0));color:var(--secondary-foreground,oklch(0.25 0 0));line-height:1.4}
.ds-badge-primary{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0))}
.ds-badge-outline{background:transparent;border:1px solid var(--border,oklch(0.85 0 0));color:var(--foreground,oklch(0.2 0 0))}
.ds-badge-safe{background:var(--pop-green,oklch(0.92 0.06 150));color:var(--pop-green-foreground,oklch(0.42 0.11 152))}
.ds-badge-warn{background:var(--pop-orange,oklch(0.93 0.05 40));color:var(--pop-orange-foreground,oklch(0.52 0.18 35))}
.ds-badge-danger{background:var(--destructive,oklch(0.58 0.22 32));color:var(--destructive-foreground,oklch(0.99 0 0))}
.ds-badge-unknown{background:var(--pop-yellow,oklch(0.9 0.085 92));color:var(--pop-yellow-foreground,oklch(0.42 0.09 75))}
.ds-badge-verified{background:var(--pop-blue,oklch(0.92 0.045 245));color:var(--pop-blue-foreground,oklch(0.48 0.14 252))}

/* Alert */
.ds-alert{border:1px solid var(--border,oklch(0.9 0 0));border-radius:var(--radius-lg,var(--radius,0.5rem));padding:.9rem 1rem;background:var(--card,var(--background,oklch(1 0 0)));color:var(--card-foreground,var(--foreground,oklch(0.2 0 0)));font-size:.875rem}
.ds-alert-title{font-weight:600;margin:0 0 .2rem}

/* Avatar + misc */
.ds-avatar{width:2.25rem;height:2.25rem;border-radius:999px;background:var(--muted,oklch(0.95 0 0));color:var(--muted-foreground,oklch(0.45 0 0));display:inline-flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:600}
.ds-divider{height:1px;background:var(--border,oklch(0.9 0 0));border:0;margin:1rem 0}
.ds-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.ds-field{margin-bottom:1rem}
.ds-control-row{display:grid;grid-template-columns:minmax(8rem,14rem) auto;gap:.75rem;align-items:end;justify-content:start}
.ds-control-row>.ds-field{margin:0}
.ds-control-row>.ds-btn,.ds-control-row .ds-input,.ds-control-row .ds-select{min-height:2.75rem}
.ds-container{max-width:42rem;margin:0 auto;padding:1.5rem}

/* Switch */
.ds-switch{display:inline-flex;align-items:center;gap:.6rem;font-size:.875rem;cursor:pointer}
.ds-switch-track{width:2.25rem;height:1.25rem;border-radius:999px;background:var(--muted,oklch(0.9 0 0));position:relative;transition:background var(--transition-duration-fast,150ms) var(--ease-out,cubic-bezier(0.165, 0.84, 0.44, 1));flex:none}
.ds-switch-track.on{background:var(--primary,oklch(0.45 0.15 264))}
.ds-switch-thumb{position:absolute;top:2px;left:2px;width:calc(1.25rem - 4px);height:calc(1.25rem - 4px);border-radius:999px;background:var(--background,oklch(1 0 0));box-shadow:var(--shadow-sm,0 1px 2px oklch(0 0 0 / 0.2));transition:transform var(--transition-duration-fast,150ms) var(--ease-out,cubic-bezier(0.165, 0.84, 0.44, 1))}
.ds-switch-track.on .ds-switch-thumb{transform:translateX(1rem)}

/* Tabs */
.ds-tabs{display:inline-flex;gap:.15rem;padding:.25rem;border-radius:var(--radius-lg,var(--radius,0.5rem));background:var(--muted,oklch(0.96 0 0))}
.ds-tab{font:inherit;font-size:.8125rem;font-weight:500;padding:.4rem .8rem;border:0;border-radius:var(--radius-md,calc(var(--radius,0.5rem) - 2px));background:transparent;color:var(--muted-foreground,oklch(0.5 0 0));cursor:pointer;touch-action:manipulation}
.ds-tab.active{background:var(--background,oklch(1 0 0));color:var(--foreground,oklch(0.2 0 0));box-shadow:var(--shadow-sm,var(--shadow-xs,none))}

/* Progress */
.ds-progress{height:.5rem;border-radius:999px;background:var(--muted,oklch(0.92 0 0));overflow:hidden}
.ds-progress-bar{height:100%;border-radius:999px;background:var(--primary,oklch(0.45 0.15 264))}

/* Table */
.ds-table{width:100%;border-collapse:collapse;font-size:.8125rem}
.ds-table th,.ds-table td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--border,oklch(0.92 0 0))}
.ds-table th{font-weight:600;color:var(--muted-foreground,oklch(0.5 0 0));font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em}

/* Chip / keyboard key */
.ds-chip{display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.8125rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--border,oklch(0.88 0 0));background:var(--background,oklch(1 0 0));color:var(--foreground,oklch(0.2 0 0));cursor:pointer;touch-action:manipulation;transition:background-color var(--transition-duration-fast,150ms) var(--ease-out,cubic-bezier(0.165, 0.84, 0.44, 1)),border-color var(--transition-duration-fast,150ms) var(--ease-out,cubic-bezier(0.165, 0.84, 0.44, 1)),color var(--transition-duration-fast,150ms) var(--ease-out,cubic-bezier(0.165, 0.84, 0.44, 1))}
.ds-chip:focus-visible{outline:2px solid var(--ring,var(--primary,oklch(0.45 0.15 264)));outline-offset:2px}
.ds .ds-chip[aria-pressed="true"],.ds .ds-chip[aria-pressed="true"]:hover{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0));border-color:var(--primary,oklch(0.45 0.15 264))}
.ds-kbd{font-family:var(--font-mono,ui-monospace,monospace);font-size:.75rem;padding:.1rem .4rem;border-radius:var(--radius-sm,4px);border:1px solid var(--border,oklch(0.85 0 0));background:var(--muted,oklch(0.97 0 0));color:var(--foreground,oklch(0.2 0 0))}

/* Touch canvases need finger-sized hit areas and inputs that do not trigger mobile zoom. */
@media (pointer:coarse){
.ds-btn,.ds-tab,.ds-chip{min-height:44px}
.ds-input,.ds-select{min-height:44px;font-size:1rem}
}
@media (max-width:40rem){
.ds-control-row{grid-template-columns:1fr}
.ds-control-row>.ds-btn{width:100%}
}

/* Hover is a neutral fine-pointer cue, never a second selection color. */
@media (hover:hover) and (pointer:fine){
.ds a:hover{text-decoration:underline}
.ds-btn:hover:not(:disabled):not([aria-pressed="true"]){opacity:.9}
.ds-btn-ghost:hover:not(:disabled):not([aria-pressed="true"]){background:var(--accent,oklch(0.96 0 0));opacity:1}
.ds-input:hover:not(:disabled),.ds-textarea:hover:not(:disabled),.ds-select:hover:not(:disabled){border-color:color-mix(in oklab,var(--foreground,oklch(0.2 0 0)) 20%,transparent)}
.ds .ds-chip:hover:not([aria-pressed="true"]){background:color-mix(in oklab,var(--foreground,oklch(0.2 0 0)) 4%,var(--background,oklch(1 0 0)));color:var(--foreground,oklch(0.2 0 0));border-color:color-mix(in oklab,var(--foreground,oklch(0.2 0 0)) 28%,var(--border,oklch(0.88 0 0)))}
}

/* Selection adopts the accent, matching the real systems */
.ds ::selection{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0))}
.bd-input, .ds-input, .ds-textarea, .ds-select { border-radius: var(--radius-lg, var(--radius, 0.5rem)); }
.bd-card, .ds-card { border-radius: var(--radius-2xl, 1rem); }
.bd-btn-primary, .bd-view, .ds-btn-primary { box-shadow: var(--shadow-pillow-primary); }
.bd-btn-primary, .bd-view, .ds-btn-primary { background-image: linear-gradient(180deg,color-mix(in oklch,var(--primary) 85%,white) 0%,var(--primary) 55%,color-mix(in oklch,var(--primary) 85%,black) 100%); }
.ds-switch-track.on { background-image: linear-gradient(180deg,color-mix(in oklch,var(--primary) 85%,oklch(1 0 0)) 0%,var(--primary) 55%,color-mix(in oklch,var(--primary) 85%,oklch(0 0 0)) 100%); }
.ds-switch-track.on { box-shadow: var(--shadow-pillow-primary); }
.ds-badge, .ds-badge-primary { border-radius: 9999px; }
.ds-input, .ds-textarea, .ds-select { border-radius: var(--radius-lg, var(--radius, 0.5rem)); }
*,::before,::after,::backdrop{--tw-ring-color:currentcolor;--tw-ring-shadow:0 0 0 transparent;--tw-ring-offset-shadow:0 0 0 transparent;--tw-ring-offset-width:0px;--tw-ring-offset-color:oklch(1 0 0);--tw-ring-inset:;--tw-shadow:0 0 0 transparent;--tw-inset-shadow:0 0 0 transparent;--tw-inset-ring-shadow:0 0 0 transparent;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:;--tw-rotate-y:;--tw-rotate-z:;--tw-skew-x:;--tw-skew-y:;--tw-gradient-from:transparent;--tw-gradient-to:transparent;--tw-gradient-stops:;--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-saturate:;--tw-content:''}
.ds-badge { display:inline-flex; align-items:center; justify-content:center; border-radius:calc(infinity * 1px); font-weight:500; transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms; background-color:var(--foreground); color:var(--background) }
.ds-badge:focus { outline:2px solid transparent;outline-offset:2px; --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color:var(--ring); --tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) }
.ds-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; white-space:nowrap; font-size:0.875rem;line-height:1.25rem; font-weight:600; letter-spacing:-0.005em; border-radius:0.875rem; transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms; transition-duration:var(--transition-duration-fast); transition-timing-function:cubic-bezier(0,0,0.2,1) }
.ds-btn:focus-visible { outline:2px solid transparent;outline-offset:2px; --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color:var(--ring); --tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) }
.ds-btn:disabled { pointer-events:none; opacity:0.5 }
.ds-btn:active { --tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y) }
.ds .ds-btn-primary { color:var(--primary-foreground); background-image:linear-gradient(180deg,color-mix(in oklch,var(--primary) 85%,white) 0%,var(--primary) 55%,color-mix(in oklch,var(--primary) 85%,black) 100%); box-shadow:var(--shadow-pillow-primary) }
.ds .ds-btn-primary:hover { --tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y); box-shadow:var(--shadow-pillow-primary-hover) }
.ds .ds-btn-secondary { color:var(--foreground); background-image:linear-gradient(180deg,#FFFFFF 0%,#FAFAFB 100%); box-shadow:var(--shadow-pillow-secondary) }
.ds .ds-btn-secondary:hover { --tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y); box-shadow:var(--shadow-pillow-secondary-hover) }
.ds .ds-btn-outline { border-width:1px; border-color:var(--border); background-color:var(--background); color:var(--foreground) }
.ds .ds-btn-outline:hover { background-color:var(--muted); border-color:color-mix(in oklab, var(--foreground) 20%, transparent) }
.ds .ds-btn-ghost { background-color:transparent; color:var(--foreground) }
.ds .ds-btn-ghost:hover { background-color:var(--muted) }
.ds-input, .ds-textarea, .ds-select { display:flex; height:3rem; width:100%; border-radius:var(--radius-lg, var(--radius)); border-width:1px; border-color:var(--border); background-color:var(--background); padding-left:1rem;padding-right:1rem; padding-top:0.75rem;padding-bottom:0.75rem; font-size:0.875rem;line-height:1.25rem; color:var(--foreground); transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms; transition-duration:var(--transition-duration-fast) }
.ds-input::placeholder, .ds-textarea::placeholder, .ds-select::placeholder { color:var(--muted-foreground) }
.ds-input:hover, .ds-textarea:hover, .ds-select:hover { border-color:color-mix(in oklab, var(--foreground) 40%, transparent) }
.ds-input:focus-visible, .ds-textarea:focus-visible, .ds-select:focus-visible { outline:2px solid transparent;outline-offset:2px; border-color:var(--foreground) }
.ds-input::file-selector-button, .ds-textarea::file-selector-button, .ds-select::file-selector-button { border-width:0; background-color:transparent; font-size:0.875rem;line-height:1.25rem; font-weight:500 }
.ds-input:disabled, .ds-textarea:disabled, .ds-select:disabled { cursor:not-allowed; opacity:0.5 }
.ds-card { border-radius:var(--radius-2xl, 1rem); background-color:var(--card); color:var(--card-foreground) }
.ds{color:var(--foreground,oklch(0.2 0 0));background:var(--background,oklch(1 0 0))}
.ds :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small):not(.ds-supporting):not(.ds-card-desc):not(.ds-muted){color:inherit!important}