/* prylski.dev design tokens v0.1.0 — generated from tokens.json (gen.py). MD3 base. */
:root{
  --font-sans:Inter, Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
  --type-display-size:56px; --type-display-line:60px; --type-display-weight:500; --type-display-tracking:-0.02em; --type-display-family:var(--font-mono);
  --type-headline-size:24px; --type-headline-line:32px; --type-headline-weight:600; --type-headline-tracking:0; --type-headline-family:var(--font-sans);
  --type-title-size:18px; --type-title-line:24px; --type-title-weight:600; --type-title-tracking:0; --type-title-family:var(--font-sans);
  --type-body-size:16px; --type-body-line:24px; --type-body-weight:400; --type-body-tracking:0; --type-body-family:var(--font-sans);
  --type-body-sm-size:14px; --type-body-sm-line:20px; --type-body-sm-weight:400; --type-body-sm-tracking:0.01em; --type-body-sm-family:var(--font-sans);
  --type-label-size:14px; --type-label-line:20px; --type-label-weight:600; --type-label-tracking:0.04em; --type-label-family:var(--font-sans);
  --type-value-size:16px; --type-value-line:24px; --type-value-weight:500; --type-value-tracking:0; --type-value-family:var(--font-mono);
  --type-status-size:14px; --type-status-line:20px; --type-status-weight:600; --type-status-tracking:0.06em; --type-status-family:var(--font-mono);
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --radius-none:0px;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-full:9999px;
  --state-hover:0.08;
  --state-focus:0.12;
  --state-pressed:0.12;
  --state-dragged:0.16;
  --state-disabled-content:0.38;
  --state-disabled-container:0.12;
  --motion-short:150ms;
  --motion-medium:200ms;
  --motion-long:250ms;
  --ease-standard:cubic-bezier(0.2,0,0,1);
  --ease-decelerate:cubic-bezier(0,0,0,1);
  --ease-accelerate:cubic-bezier(0.3,0,1,1);
  --size-touch-min:48px;
  --size-gap-min:8px;
  --size-app-bar:64px;
  --size-nav-bar:80px;
  --size-fab:56px;
  --size-stroke-hair:1px;
  --size-grid-cell:16px;
  --size-grid-major:80px;
  --size-dim-tick:8px;
  --shadow-fab:0 2px 6px rgba(0,0,0,.30);
  --elevation-0:var(--color-surface);
  --elevation-1:var(--color-surface-container-low);
  --elevation-2:var(--color-surface-container);
  --elevation-3:var(--color-surface-container-high);
  --elevation-4:var(--color-surface-container-highest);
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px); --safe-right:env(safe-area-inset-right,0px);
}
:root,[data-theme="dark"]{
  color-scheme:dark;
  --color-surface:#0F1215;
  --color-surface-container-lowest:#0A0C0F;
  --color-surface-container-low:#14181C;
  --color-surface-container:#191E23;
  --color-surface-container-high:#1F252B;
  --color-surface-container-highest:#272E35;
  --color-on-surface:#E6EAEE;
  --color-on-surface-variant:#A7B1BC;
  --color-outline:#77828E;
  --color-outline-variant:#2F373F;
  --color-primary:#22D3EE;
  --color-on-primary:#00363F;
  --color-primary-container:#004E5A;
  --color-on-primary-container:#B3F5FD;
  --color-warning:#FB923C;
  --color-on-warning:#3A1A00;
  --color-warning-container:#4D2600;
  --color-on-warning-container:#FFD9BC;
  --color-error:#FF8A80;
  --color-on-error:#4A0505;
  --color-success:#4ADE80;
  --color-on-success:#00391A;
  --color-inverse-surface:#E6EAEE;
  --color-inverse-on-surface:#191E23;
  --color-grid-line:rgba(34,211,238,0.06);
  --color-grid-line-major:rgba(34,211,238,0.12);
  --color-dimension-line:#5FC9DA;
  --color-scrim:rgba(0,0,0,0.6);
}
[data-theme="light"]{
  color-scheme:light;
  --color-surface:#F5F7F9;
  --color-surface-container-lowest:#FFFFFF;
  --color-surface-container-low:#EFF2F5;
  --color-surface-container:#E9EDF1;
  --color-surface-container-high:#E3E8ED;
  --color-surface-container-highest:#DDE3E9;
  --color-on-surface:#12161A;
  --color-on-surface-variant:#434E59;
  --color-outline:#6B7681;
  --color-outline-variant:#C3CBD3;
  --color-primary:#0A6A80;
  --color-on-primary:#FFFFFF;
  --color-primary-container:#C9F4FB;
  --color-on-primary-container:#002F38;
  --color-warning:#B13C06;
  --color-on-warning:#FFFFFF;
  --color-warning-container:#FFE3CC;
  --color-on-warning-container:#5C1E00;
  --color-error:#B3261E;
  --color-on-error:#FFFFFF;
  --color-success:#13703A;
  --color-on-success:#FFFFFF;
  --color-inverse-surface:#272E35;
  --color-inverse-on-surface:#EFF2F5;
  --color-grid-line:rgba(10,106,128,0.05);
  --color-grid-line-major:rgba(10,106,128,0.10);
  --color-dimension-line:#2B7F92;
  --color-scrim:rgba(0,0,0,0.4);
}
@media (prefers-color-scheme: light){:root:not([data-theme]){color-scheme:light;
  --color-surface:#F5F7F9;
  --color-surface-container-lowest:#FFFFFF;
  --color-surface-container-low:#EFF2F5;
  --color-surface-container:#E9EDF1;
  --color-surface-container-high:#E3E8ED;
  --color-surface-container-highest:#DDE3E9;
  --color-on-surface:#12161A;
  --color-on-surface-variant:#434E59;
  --color-outline:#6B7681;
  --color-outline-variant:#C3CBD3;
  --color-primary:#0A6A80;
  --color-on-primary:#FFFFFF;
  --color-primary-container:#C9F4FB;
  --color-on-primary-container:#002F38;
  --color-warning:#B13C06;
  --color-on-warning:#FFFFFF;
  --color-warning-container:#FFE3CC;
  --color-on-warning-container:#5C1E00;
  --color-error:#B3261E;
  --color-on-error:#FFFFFF;
  --color-success:#13703A;
  --color-on-success:#FFFFFF;
  --color-inverse-surface:#272E35;
  --color-inverse-on-surface:#EFF2F5;
  --color-grid-line:rgba(10,106,128,0.05);
  --color-grid-line-major:rgba(10,106,128,0.10);
  --color-dimension-line:#2B7F92;
  --color-scrim:rgba(0,0,0,0.4);
}}
/* Helper: blueprint background grid (minor 16px, major 80px) */
.bg-grid{background-color:var(--color-surface);background-image:
  linear-gradient(var(--color-grid-line-major) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid-line-major) 1px,transparent 1px),
  linear-gradient(var(--color-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid-line) 1px,transparent 1px);
  background-size:var(--size-grid-major) var(--size-grid-major),var(--size-grid-major) var(--size-grid-major),var(--size-grid-cell) var(--size-grid-cell),var(--size-grid-cell) var(--size-grid-cell);}
/* Helper: horizontal dimension line with end ticks; put label in .dim-label */
.dim-h{position:relative;height:var(--size-dim-tick);border-left:1px solid var(--color-dimension-line);border-right:1px solid var(--color-dimension-line);}
.dim-h::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--color-dimension-line);}
.dim-label{font:var(--type-status-weight) var(--type-status-size)/var(--type-status-line) var(--font-mono);letter-spacing:var(--type-status-tracking);color:var(--color-on-surface-variant);}
.hairline{border:0;border-top:var(--size-stroke-hair) dashed var(--color-outline-variant);}
/* MD3 state layer: element needs position:relative; set --state-color */
.state-layer{position:relative;isolation:isolate;}
.state-layer::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--state-color,currentColor);opacity:0;transition:opacity var(--motion-short) var(--ease-standard);pointer-events:none;z-index:-1;}
.state-layer:hover::after{opacity:var(--state-hover);} .state-layer:focus-visible::after,.state-layer:active::after{opacity:var(--state-pressed);}
@media (prefers-reduced-motion: reduce){*{transition-duration:0ms!important;animation-duration:0ms!important;}}