/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial}}}@layer studs-reset{html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{margin:.67em 0;font-size:2em}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:#0000}abbr[title]{text-decoration:underline;border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner{border-style:none;padding:0}[type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]::-moz-focus-inner{border-style:none;padding:0}[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring{outline:1px dotted buttontext}[type=button]:-moz-focusring{outline:1px dotted buttontext}[type=reset]:-moz-focusring{outline:1px dotted buttontext}[type=submit]:-moz-focusring{outline:1px dotted buttontext}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;white-space:normal;max-width:100%;padding:0;display:table}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template,[hidden]{display:none}}@layer studs-utilities{:root{--studs-checkbox-checked:url("data:image/svg+xml,%3Csvg width%3D%22100%25%22 height%3D%22100%25%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg clip-path%3D%22url(%23clip0_707_35)%22%3E%3Cpath d%3D%22M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z%22 fill%3D%22currentcolor%22%2F%3E%3Cpath d%3D%22M13.3333 4L6 11.3333L2.66667 8%22 stroke%3D%22white%22 stroke-width%3D%221.33%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cpath d%3D%22M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z%22 stroke%3D%22currentcolor%22%2F%3E%3Cdefs%3E%3CclipPath id%3D%22clip0_707_35%22%3E%3Cpath d%3D%22M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z%22 fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");--studs-checkbox-unchecked:url("data:image/svg+xml,%3Csvg width%3D%22100%25%22 height%3D%22100%25%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z%22 fill%3D%22transparent%22%2F%3E%3Cpath d%3D%22M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z%22 stroke%3D%22currentcolor%22%2F%3E%3C%2Fsvg%3E");--studs-checkbox-indeterminate:url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22 standalone%3D%22no%22%3F%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg width%3D%22100%25%22 height%3D%22100%25%22 viewBox%3D%220 0 16 16%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 xml%3Aspace%3D%22preserve%22 xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22 style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3B%22%3E    %3Cg%3E        %3Cg%3E            %3CclipPath id%3D%22_clip1%22%3E                %3Cpath d%3D%22M0%2C4C0%2C1.791 1.791%2C0 4%2C0L12%2C0C14.209%2C0 16%2C1.791 16%2C4L16%2C12C16%2C14.209 14.209%2C16 12%2C16L4%2C16C1.791%2C16 0%2C14.209 0%2C12L0%2C4Z%22%2F%3E            %3C%2FclipPath%3E            %3Cg clip-path%3D%22url(%23_clip1)%22%3E                %3Cpath d%3D%22M0%2C4C0%2C1.791 1.791%2C0 4%2C0L12%2C0C14.209%2C0 16%2C1.791 16%2C4L16%2C12C16%2C14.209 14.209%2C16 12%2C16L4%2C16C1.791%2C16 0%2C14.209 0%2C12L0%2C4Z%22 style%3D%22fill-rule%3Anonzero%3B%22%2F%3E                %3Cpath d%3D%22M13.333%2C8.023L2.667%2C8%22 style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3Awhite%3Bstroke-width%3A1.33px%3B%22%2F%3E            %3C%2Fg%3E        %3C%2Fg%3E    %3C%2Fg%3E    %3Cpath d%3D%22M4%2C0.5L12%2C0.5C13.933%2C0.5 15.5%2C2.067 15.5%2C4L15.5%2C12C15.5%2C13.933 13.933%2C15.5 12%2C15.5L4%2C15.5C2.067%2C15.5 0.5%2C13.933 0.5%2C12L0.5%2C4C0.5%2C2.067 2.067%2C0.5 4%2C0.5Z%22 style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3Awhite%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3B%22%2F%3E    %3Cg transform%3D%22matrix(1%2C0%2C0%2C1%2C-3%2C-2)%22%3E        %3Cg%3E            %3CclipPath id%3D%22_clip2%22%3E                %3Cpath d%3D%22M3%2C6C3%2C3.791 4.791%2C2 7%2C2L15%2C2C17.209%2C2 19%2C3.791 19%2C6L19%2C14C19%2C16.209 17.209%2C18 15%2C18L7%2C18C4.791%2C18 3%2C16.209 3%2C14L3%2C6Z%22%2F%3E            %3C%2FclipPath%3E            %3Cg clip-path%3D%22url(%23_clip2)%22%3E                %3Cpath d%3D%22M3%2C6C3%2C3.791 4.791%2C2 7%2C2L15%2C2C17.209%2C2 19%2C3.791 19%2C6L19%2C14C19%2C16.209 17.209%2C18 15%2C18L7%2C18C4.791%2C18 3%2C16.209 3%2C14L3%2C6Z%22 style%3D%22fill%3Argb(17%2C17%2C17)%3Bfill-rule%3Anonzero%3B%22%2F%3E                %3Crect x%3D%226.333%22 y%3D%229.333%22 width%3D%229.333%22 height%3D%221.333%22 style%3D%22fill%3Awhite%3Bfill-rule%3Anonzero%3B%22%2F%3E            %3C%2Fg%3E        %3C%2Fg%3E        %3Cpath d%3D%22M7%2C2.5L15%2C2.5C16.933%2C2.5 18.5%2C4.067 18.5%2C6L18.5%2C14C18.5%2C15.933 16.933%2C17.5 15%2C17.5L7%2C17.5C5.067%2C17.5 3.5%2C15.933 3.5%2C14L3.5%2C6C3.5%2C4.067 5.067%2C2.5 7%2C2.5Z%22 style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3Argb(17%2C17%2C17)%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3B%22%2F%3E    %3C%2Fg%3E%3C%2Fsvg%3E");--studs-radio-checked:url("data:image/svg+xml,%3Csvg width%3D%22100%25%22 height%3D%22100%25%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5Z%22 fill%3D%22white%22%2F%3E%3Cpath d%3D%22M8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5Z%22 stroke%3D%22currentcolor%22%2F%3E%3Cg clip-path%3D%22url(%23clip0_710_6)%22%3E%3Cpath d%3D%22M8 13.8333C11.2217 13.8333 13.8333 11.2217 13.8333 8C13.8333 4.77834 11.2217 2.16667 8 2.16667C4.77834 2.16667 2.16667 4.77834 2.16667 8C2.16667 11.2217 4.77834 13.8333 8 13.8333Z%22 fill%3D%22currentcolor%22 stroke%3D%22currentcolor%22 stroke-width%3D%221.33%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath id%3D%22clip0_710_6%22%3E%3Crect width%3D%2214%22 height%3D%2214%22 fill%3D%22transparent%22 transform%3D%22translate(1 1)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");--studs-radio-unchecked:url("data:image/svg+xml,%3Csvg width%3D%22100%25%22 height%3D%22100%25%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8Z%22 fill%3D%22transparent%22%2F%3E%3Cpath d%3D%22M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8Z%22 stroke%3D%22currentcolor%22%2F%3E%3C%2Fsvg%3E")}}@layer studs-fonts{@font-face{font-family:HelveticaNowRoman;font-weight:1 1000;font-style:normal;font-stretch:100%;font-display:swap;src:url(https://www.strongtie.com/studs/font/helvetica-now/HelveticaNowVariableRoman_normal_normal.woff2)format("woff2"),url(https://www.strongtie.com/studs/font/helvetica-now/HelveticaNowVariableRoman_normal_normal.woff)format("woff"),url(https://www.strongtie.com/studs/font/helvetica-now/HelveticaNowVar.ttf)format("truetype")}@font-face{font-family:HelveticaNowItalic;font-weight:1 1000;font-style:italic;font-stretch:100%;font-display:swap;src:url(https://www.strongtie.com/studs/font/helvetica-now/HelveticaNowVariableItalic_italic_normal.woff2)format("woff2"),url(https://www.strongtie.com/studs/font/helvetica-now/HelveticaNowVariableItalic_italic_normal.woff)format("woff"),url(https://www.strongtie.com/studs/font/helvetica-now/HelveticaNowVar-Italic.ttf)format("truetype")}:root{--font-family:"HelveticaNowRoman","Helvetica","Arial",sans-serif;--font-weight:var(--fontWeight-regular);--font-width:100;--font-size:1rem;--font-style:normal}}@layer studs-themes{:root{--font-size-50:.625rem;--font-size-75:.75rem;--font-size-100:.875rem;--font-size-200:1rem;--font-size-300:1.125rem;--font-size-400:1.25rem;--font-size-500:1.375rem;--font-size-600:1.875rem;--font-size-700:2.5rem;--font-size-800:3.375rem;--font-size-900:4.5rem;--font-size-1000:6rem;--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700;--space-00:0rem;--space-50:.125rem;--space-75:.25rem;--space-90:.375rem;--space-100:.5rem;--space-200:.75rem;--space-250:.875rem;--space-300:1rem;--space-350:1.25rem;--space-400:1.5rem;--space-500:2rem;--space-550:2.25rem;--space-600:2.5rem;--space-700:3rem;--space-800:4rem;--space-900:5rem;--space-1000:6rem;--corner-radius-00:0rem;--corner-radius-50:.03125rem;--corner-radius-75:.25rem;--corner-radius-100:.375rem;--corner-radius-200:.5rem;--corner-radius-300:.625rem;--corner-radius-400:.75rem;--corner-radius-500:1rem;--corner-radius-9999:100vh;--lineHeight-100:1.2;--lineHeight-200:1.3;--lineHeight-300:1.5;--lineHeight-400:1.7;--borderWidth-100:1px;--borderWidth-200:2px;--borderWidth-400:4px;--opacity-00:0;--opacity-10:.1;--opacity-20:.2;--opacity-30:.3;--opacity-40:.4;--opacity-50:.5;--opacity-60:.6;--opacity-70:.7;--opacity-80:.8;--opacity-90:.9;--opacity-100:1;--tint-100:#ffffffe6;--tint-200:#fffc;--tint-300:#ffffffb3;--tint-400:#fff9;--tint-500:#ffffff80;--tint-600:#fff6;--tint-700:#ffffff4d;--tint-800:#fff3;--tint-900:#ffffff1a;--tint-1000:#fff0;--shade-100:#000000e6;--shade-200:#000c;--shade-300:#000000b3;--shade-400:#0009;--shade-500:#00000080;--shade-600:#0006;--shade-700:#0000004d;--shade-800:#0003;--shade-900:#0000001a;--shade-1000:#0000;--color-neutral-000:#fff;--color-neutral-025:#f7f7f7;--color-neutral-050:#f5f5f5;--color-neutral-075:#e9e9e9;--color-neutral-100:#e3e3e3;--color-neutral-150:#d4d4d4;--color-neutral-200:#c6c6c6;--color-neutral-250:#b9b9b9;--color-neutral-300:#ababab;--color-neutral-350:#9d9d9d;--color-neutral-400:#909090;--color-neutral-450:#848484;--color-neutral-500:#777;--color-neutral-550:#6a6a6a;--color-neutral-600:#5e5e5e;--color-neutral-650:#525252;--color-neutral-700:#474747;--color-neutral-750:#3b3b3b;--color-neutral-800:#303030;--color-neutral-850:#262626;--color-neutral-900:#1c1c1c;--color-neutral-950:#111;--color-neutral-999:#000;--color-neutral-warm-000:#fff;--color-neutral-warm-025:#f9f7f6;--color-neutral-warm-050:#f6f4f2;--color-neutral-warm-075:#ece9e5;--color-neutral-warm-100:#e6e2dd;--color-neutral-warm-150:#dad3cd;--color-neutral-warm-200:#cec5bd;--color-neutral-warm-250:#c2b7ad;--color-neutral-warm-300:#b6a99d;--color-neutral-warm-350:#ab9b8d;--color-neutral-warm-400:#9f8e7e;--color-neutral-warm-450:#93806f;--color-neutral-warm-500:#87725f;--color-neutral-warm-550:#7b6756;--color-neutral-warm-600:#6d5b4c;--color-neutral-warm-650:#5f5042;--color-neutral-warm-700:#524438;--color-neutral-warm-750:#45392f;--color-neutral-warm-800:#382e25;--color-neutral-warm-850:#2c241d;--color-neutral-warm-900:#211b15;--color-neutral-warm-950:#15100b;--color-neutral-warm-999:#000;--color-orange-000:#fff;--color-orange-025:#fff5f2;--color-orange-050:#ffece5;--color-orange-075:#ffe2d8;--color-orange-100:#ffd9cb;--color-orange-150:#ffc5b1;--color-orange-200:#ffb197;--color-orange-250:#ff9d7c;--color-orange-300:#ff8760;--color-orange-350:#ff7041;--color-orange-400:#ff5308;--color-orange-450:#ec4c07;--color-orange-500:#d64405;--color-orange-550:#c13d04;--color-orange-600:#ac3503;--color-orange-650:#972e02;--color-orange-700:#832602;--color-orange-750:#701f01;--color-orange-800:#5d1901;--color-orange-850:#4b1201;--color-orange-900:#390c00;--color-orange-950:#270600;--color-orange-999:#000;--color-yellow-000:#fff;--color-yellow-025:#fff8e3;--color-yellow-050:#fff0c7;--color-yellow-075:#ffe8a9;--color-yellow-100:#ffe08a;--color-yellow-150:#ffd040;--color-yellow-200:#edc13b;--color-yellow-250:#ddb436;--color-yellow-300:#cda631;--color-yellow-350:#bd9a2d;--color-yellow-400:#ae8d28;--color-yellow-450:#9f8024;--color-yellow-500:#8f7420;--color-yellow-550:#81681b;--color-yellow-600:#725c17;--color-yellow-650:#645013;--color-yellow-700:#56450f;--color-yellow-750:#493a0b;--color-yellow-800:#3c2f08;--color-yellow-850:#2f2405;--color-yellow-900:#231b03;--color-yellow-950:#161001;--color-yellow-999:#000;--color-blue-000:#fff;--color-blue-025:#f4f8ff;--color-blue-050:#e9f1ff;--color-blue-075:#deeaff;--color-blue-100:#d3e4fe;--color-blue-150:#bdd6fd;--color-blue-200:#a8c8fc;--color-blue-250:#93bafa;--color-blue-300:#7eacf8;--color-blue-350:#699ef6;--color-blue-400:#548ff3;--color-blue-450:#3e80f0;--color-blue-500:#206eec;--color-blue-550:#1d65d9;--color-blue-600:#1859c2;--color-blue-650:#144eab;--color-blue-700:#104395;--color-blue-750:#0c387f;--color-blue-800:#082d6a;--color-blue-850:#052355;--color-blue-900:#031942;--color-blue-950:#020f2d;--color-blue-999:#000;--color-red-000:#fff;--color-red-025:#fff5f4;--color-red-050:#ffebe8;--color-red-075:#ffe1dd;--color-red-100:#ffd7d2;--color-red-150:#ffc3bc;--color-red-200:#ffaea6;--color-red-250:#ff9990;--color-red-300:#ff827b;--color-red-350:#ff6964;--color-red-400:#ff4d4d;--color-red-450:#ff002b;--color-red-500:#ef0028;--color-red-550:#d70023;--color-red-600:#bf001e;--color-red-650:#a90019;--color-red-700:#930014;--color-red-750:#7e0010;--color-red-800:#68000b;--color-red-850:#540007;--color-red-900:#410004;--color-red-950:#2c0002;--color-red-999:#000;--color-green-000:#fff;--color-green-025:#f2faef;--color-green-050:#e5f6e0;--color-green-075:#d7f1d0;--color-green-100:#caecc1;--color-green-150:#b0e2a2;--color-green-200:#94d781;--color-green-250:#78cd5e;--color-green-300:#4ebe1f;--color-green-350:#49b41d;--color-green-400:#43a51a;--color-green-450:#3c9616;--color-green-500:#368813;--color-green-550:#2f7a10;--color-green-600:#296c0d;--color-green-650:#1d5107;--color-green-700:#1d5107;--color-green-750:#174505;--color-green-800:#123804;--color-green-850:#0c2c02;--color-green-900:#072101;--color-green-950:#041501;--color-green-999:#000;--color-purple-000:#fff;--color-purple-025:#faf6ff;--color-purple-050:#f5edff;--color-purple-075:#f1e4ff;--color-purple-100:#ecdcff;--color-purple-150:#e3caff;--color-purple-200:#dab8ff;--color-purple-250:#d1a6ff;--color-purple-300:#c894ff;--color-purple-350:#bf81ff;--color-purple-400:#b76dff;--color-purple-450:#a763e8;--color-purple-500:#9759d3;--color-purple-550:#884fbe;--color-purple-600:#7846a9;--color-purple-650:#693d95;--color-purple-700:#5b3482;--color-purple-750:#4d2b6f;--color-purple-800:#3f225b;--color-purple-850:#321a4a;--color-purple-900:#261238;--color-purple-950:#180a26;--color-purple-999:#000;--color-pink-000:#fff;--color-pink-025:#fff5f8;--color-pink-050:#ffebf1;--color-pink-075:#ffe1ea;--color-pink-100:#ffd7e3;--color-pink-150:#ffc2d5;--color-pink-200:#ffaec7;--color-pink-250:#ff99b9;--color-pink-300:#ff82ac;--color-pink-350:#ff6da0;--color-pink-400:#e96392;--color-pink-450:#d55a85;--color-pink-500:#c15178;--color-pink-550:#ad486b;--color-pink-600:#9a3f5f;--color-pink-650:#883653;--color-pink-700:#762e47;--color-pink-750:#64263c;--color-pink-800:#531e31;--color-pink-850:#421726;--color-pink-900:#320f1c;--color-pink-950:#220811;--color-pink-999:#000;color-scheme:light only;--surface-primary-background:#fff;--surface-primary-foreground:#111;--surface-primary-border:#e9e9e9;--surface-primary-muted-foreground:#777;--surface-primary-muted-background:#f5f5f5;--surface-modal-background:var(--shade-200);--surface-secondary-background:#f7f7f7;--surface-secondary-foreground:#5e5e5e;--surface-secondary-border:#e3e3e3;--surface-auxiliary-background:#f5f5f5;--surface-auxiliary-foreground:var(--surface-primary-background);--surface-auxiliary-border:#d4d4d4;--action-default-background:#1c1c1c;--action-default-foreground:#fff;--action-default-hover-background:#474747;--action-default-hover-foreground:#fff;--action-default-active-background:#303030;--action-default-active-foreground:#fff;--action-selected-background:#f5f5f5;--action-focus-foreground:#111;--action-secondary-background:#f5f5f5;--action-secondary-foreground:var(--surface-primary-foreground);--action-secondary-hover-background:#f7f7f7;--action-secondary-hover-foreground:#111;--action-secondary-active-background:#e9e9e9;--action-secondary-active-foreground:#111;--action-destructive-background:#ef0028;--action-destructive-foreground:#fff;--action-destructive-hover-background:#ff002b;--action-destructive-hover-foreground:#fff;--action-destructive-active-background:#d70023;--action-destructive-active-foreground:#fff;--action-outline-background:#fff;--action-outline-foreground:var(--surface-primary-foreground);--action-outline-hover-background:#f5f5f5;--action-outline-active-foreground:#e9e9e9;--action-outline-border:#e3e3e3;--action-ghost-background:#fff;--action-ghost-foreground:var(--surface-primary-foreground);--action-ghost-hover-background:#f5f5f5;--action-link-foreground:#206eec;--action-link-hover-foreground:#1859c2;--control-background:#fff;--control-border:#e3e3e3;--control-focus:var(--surface-primary-foreground);--control-selected-background:#111;--control-selected-foreground:#fff;--control-selected-border:#111;--control-unselected-background:#fff;--control-unselected-border:#6a6a6a;--control-switch-background:#e3e3e3;--feedback-default-background:#1c1c1c;--feedback-default-foreground:#fff;--feedback-default-focus:var(--surface-primary-foreground);--feedback-secondary-background:#f5f5f5;--feedback-secondary-foreground:var(--surface-primary-foreground);--feedback-outline-background:#fff;--feedback-outline-foreground:var(--surface-primary-foreground);--feedback-outline-border:#e9e9e9;--feedback-info-background:#206eec;--feedback-info-foreground:#fff;--feedback-info-secondary-background:#fff;--feedback-info-secondary-foreground:#206eec;--feedback-success-background:#2f7a10;--feedback-success-foreground:#fff;--feedback-success-secondary-background:#fff;--feedback-success-secondary-foreground:#368813;--feedback-warning-background:#ffd040;--feedback-warning-foreground:#493a0b;--feedback-warning-secondary-background:#3b3b3b;--feedback-warning-secondary-foreground:#ffd040;--feedback-critical-background:#d70023;--feedback-critical-foreground:#fff;--feedback-critical-secondary-background:#fff;--feedback-critical-secondary-foreground:#ef0028;--focus-color:#c6c6c6;--focus-width:var(--borderWidth-300);--focus-border:oklch(70.8% 0 0);--disabled:var(--opacity-60);--shadow-default:0px 1px 3px 0px #0000001a,0px 1px 2px 0px #0000000f;--shadow-sm:0px 1px 2px 0px #0000000d;--shadow-md:0px 4px 6px -1px #0000001a,0px 2px 4px -1px #0000000f;--shadow-lrg:0px 10px 15px -3px #0000001a,0px 4px 6px -2px #0000000d;--dropshadow-default:drop-shadow(0px 1px 3px #0000001a)drop-shadow(0px 1px 2px #0000000f);--dropshadow-sm:drop-shadow(0px 1px 2px #0000000d);--dropshadow-md:drop-shadow(0px 4px 6px #0000001a)drop-shadow(0px 2px 4px #0000000f);--dropshadow-lrg:drop-shadow(0px 10px 15px #0000001a)drop-shadow(0px 4px 6px #0000000d);--tx-s:.1s;--tx-m:.25s;--tx-l:.4s;--tx-x:.6s;--tx-xx:1s;--interactive-feedback:translateY(-.075em)scale(1.01)}@media (prefers-color-scheme:dark){:root{--surface-primary-background:#fff;--surface-primary-foreground:#111;--surface-primary-border:#e9e9e9;--surface-primary-muted-foreground:#777;--surface-primary-muted-background:#f5f5f5;--surface-modal-background:var(--shade-200);--surface-secondary-background:#f7f7f7;--surface-secondary-foreground:#5e5e5e;--surface-secondary-border:#e3e3e3;--surface-auxiliary-background:#f5f5f5;--surface-auxiliary-foreground:var(--surface-primary-background);--surface-auxiliary-border:#d4d4d4;--action-default-background:#1c1c1c;--action-default-foreground:#fff;--action-default-hover-background:#474747;--action-default-hover-foreground:#fff;--action-default-active-background:#303030;--action-default-active-foreground:#fff;--action-selected-background:#f5f5f5;--action-focus-foreground:#111;--action-secondary-background:#f5f5f5;--action-secondary-foreground:var(--surface-primary-foreground);--action-secondary-hover-background:#f7f7f7;--action-secondary-hover-foreground:#111;--action-secondary-active-background:#e9e9e9;--action-secondary-active-foreground:#111;--action-destructive-background:#ef0028;--action-destructive-foreground:#fff;--action-destructive-hover-background:#ff002b;--action-destructive-hover-foreground:#fff;--action-destructive-active-background:#d70023;--action-destructive-active-foreground:#fff;--action-outline-background:#fff;--action-outline-foreground:var(--surface-primary-foreground);--action-outline-hover-background:#f5f5f5;--action-outline-active-foreground:#e9e9e9;--action-outline-border:#e3e3e3;--action-ghost-background:#fff;--action-ghost-foreground:var(--surface-primary-foreground);--action-ghost-hover-background:#f5f5f5;--action-link-foreground:#206eec;--action-link-hover-foreground:#1859c2;--control-background:#fff;--control-border:#e3e3e3;--control-focus:var(--surface-primary-foreground);--control-selected-background:#111;--control-selected-foreground:#fff;--control-selected-border:#111;--control-unselected-background:#fff;--control-unselected-border:#6a6a6a;--control-switch-background:#e3e3e3;--feedback-default-background:#1c1c1c;--feedback-default-foreground:#fff;--feedback-default-focus:var(--surface-primary-foreground);--feedback-secondary-background:#f5f5f5;--feedback-secondary-foreground:var(--surface-primary-foreground);--feedback-outline-background:#fff;--feedback-outline-foreground:var(--surface-primary-foreground);--feedback-outline-border:#e9e9e9;--feedback-info-background:#206eec;--feedback-info-foreground:#fff;--feedback-info-secondary-background:#fff;--feedback-info-secondary-foreground:#206eec;--feedback-success-background:#2f7a10;--feedback-success-foreground:#fff;--feedback-success-secondary-background:#fff;--feedback-success-secondary-foreground:#368813;--feedback-warning-background:#ffd040;--feedback-warning-foreground:#493a0b;--feedback-warning-secondary-background:#3b3b3b;--feedback-warning-secondary-foreground:#ffd040;--feedback-critical-background:#d70023;--feedback-critical-foreground:#fff;--feedback-critical-secondary-background:#fff;--feedback-critical-secondary-foreground:#ef0028;--focus-color:#c6c6c6;--focus-width:var(--borderWidth-300);--focus-border:oklch(70.8% 0 0);--disabled:var(--opacity-60);--shadow-default:0px 1px 3px 0px #0000001a,0px 1px 2px 0px #0000000f;--shadow-sm:0px 1px 2px 0px #0000000d;--shadow-md:0px 4px 6px -1px #0000001a,0px 2px 4px -1px #0000000f;--shadow-lrg:0px 10px 15px -3px #0000001a,0px 4px 6px -2px #0000000d;--dropshadow-default:drop-shadow(0px 1px 3px #0000001a)drop-shadow(0px 1px 2px #0000000f);--dropshadow-sm:drop-shadow(0px 1px 2px #0000000d);--dropshadow-md:drop-shadow(0px 4px 6px #0000001a)drop-shadow(0px 2px 4px #0000000f);--dropshadow-lrg:drop-shadow(0px 10px 15px #0000001a)drop-shadow(0px 4px 6px #0000000d)}}@media (prefers-reduced-motion:reduce){:root{--tx-s:0s;--tx-m:0s;--tx-l:0s;--tx-x:0s;--tx-xx:0s;--interactive-feedback:translateY(0)scale(1)}}}@layer studs-base{:root{--content-width:77.5rem;--padding:1rem;--border-radius:.25rem}html{font-family:var(--font-family);font-weight:var(--font-weight);font-size:var(--font-size);font-style:var(--font-style);font-variation-settings:"opsz" 12;color:var(--on-app);background:var(--app)}body{padding:0}main{width:min(var(--content-width),100vw - var(--padding)*4);margin-inline:auto}code{background:var(--surface);padding-inline:.25em;font-family:monospace}cite{font-variation-settings:"opsz" 12;font:italic 400 1rem HelveticaNowItalic,Helvetica,Arial,sans-serif}blockquote{border-inline-start:2px solid var(--border);margin:0;padding-inline-start:.5em}ul,ol{padding-left:1.2em}ul ::marker{color:var(--primary)}menu{margin:0;padding:0;list-style:none}menu a{text-decoration-color:#0000}abbr{text-underline-offset:.25em;cursor:help;text-decoration-style:dotted}em{font:italic 400 1rem HelveticaNowItalic,Helvetica,Arial,sans-serif}strong{font:700 1rem HelveticaNowRoman,Helvetica,Arial,sans-serif}mark{background-color:var(--highlight-color);padding-inline:.25em}[type=search]{-webkit-appearance:searchfield;outline-offset:-2px}:where(a,a:visited){color:var(--action-link-foreground);text-decoration:underline;text-decoration-color:var(--action-link-foreground);text-underline-offset:.25em;text-decoration-thickness:2px}:where(a:hover){color:var(--action-link-hover-foreground);text-decoration-color:var(--action-link-hover-foreground)}:where([disabled],:disabled,.-disabled,.disabled){opacity:var(--disabled)}.-noScroll{width:100vw;height:100vh;overflow:clip}}@layer studs-components{.badge{--bkg:var(--feedback-default-background);--text:var(--feedback-default-foreground);--hover:linear-gradient(var(--tint-800)),var(--bkg);background:var(--bkg);color:var(--text);padding:var(--space-50)var(--space-200);font-size:var(--font-size-75);border-radius:var(--corner-radius-75);border:1px solid #0000}.badge:hover{background:var(--hover);cursor:default}.badge.-secondary{--bkg:var(--action-secondary-background);--text:var(--action-secondary-foreground);--hover:var(--bkg)}.badge.-outline{--bkg:var(--action-outline-background);--text:var(--surface-primary-foreground);--hover:var(--bkg);border-color:var(--action-outline-border)}.badge.-destructive{--bkg:var(--action-destructive-background);--text:var(--action-destructive-foreground);--hover:linear-gradient(var(--shade-800)),var(--bkg)}button,.button{--bkg:var(--action-default-background);--text:var(--action-default-foreground);--bkg-hover:var(--action-default-hover-background);--bkg-active:var(--action-selected-background);--radius:var(--corner-radius-75);--shadow:var(--border);background:var(--bkg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-100)var(--space-300);cursor:pointer;transition:var(--tx-m);text-decoration:none;display:inline-flex}button:hover,.button:hover{background:var(--bkg-hover)}button:active,.button:active{--shadow:var(--bkg-active);background:var(--bkg-active)}button.-sm,.button.-sm{padding:var(--space-100)var(--space-200)}button.-lg,.button.-lg{padding:var(--space-100)var(--space-500)}button.-secondary,.button.-secondary{--bkg:var(--action-secondary-background);--text:var(--action-secondary-foreground);--border:var(--bkg);--bkg-hover:var(--action-secondary-hover-background);--bkg-active:var(--action-secondary-active-background)}button.-destructive,.button.-destructive{--bkg:var(--action-destructive-background);--text:var(--action-destructive-foreground);--border:var(--bkg);--bkg-hover:var(--action-destructive-hover-background);--bkg-active:var(--action-destructive-active-background)}button.-outline,.button.-outline{--bkg:var(--action-outline-background);--text:var(--surface-primary-foreground);--border:var(--action-outline-border);--bkg-hover:var(--action-outline-hover-background);--bkg-active:var(--action-outline-selected-bg);box-shadow:0 1px 2px #0000000d}button.-ghost,.button.-ghost{--bkg:transparent;--text:var(--action-secondary-foreground);--border:transparent;--bkg-hover:var(--action-outline-hover-background);--bkg-active:var(--action-outline-selected-bg)}button.-link,.button.-link{--bkg:transparent;--text:var(--action-link-foreground);--border:transparent;--bkg-hover:transparent;--bkg-active:transparent;text-decoration:underline;text-decoration-color:var(--text);text-underline-offset:.25em;text-decoration-thickness:2px}button.-link:hover,.button.-link:hover{--text:var(--action-link-hover-foreground)}button[disabled]:hover,button[disabled]:active,button.disabled:hover,button.disabled:active,.button[disabled]:hover,.button[disabled]:active,.button.disabled:hover,.button.disabled:active{--bkg-hover:var(--bkg);--bkg-active:var(--bkg);cursor:not-allowed}h1,h2,h3,h4,h5,h6{font:700 1rem HelveticaNowRoman,Helvetica,Arial,sans-serif}h1,h2,h3{font-variation-settings:"opsz" 30}h4,h5{font-variation-settings:"opsz" 12}h6{font-variation-settings:"opsz" 4;font-weight:500}h1{font-size:clamp(1.35rem,4.64516vw,3.6rem)}h2{font-size:clamp(1.2rem,3.6129vw,2.8rem)}h3{font-size:clamp(1rem,3.09677vw,2.4rem)}h4{font-size:clamp(1rem,2.58065vw,2rem)}h5{font-size:clamp(.8rem,2.32258vw,1.8rem)}h6{font-size:clamp(.8rem,1.67742vw,1.3rem)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;background-color:#0000;border:none;outline:none;margin:0;padding:0 1em 0 0}div.select{--border:var(--control-border);--opacity:1;border:1px solid var(--border);border-radius:var(--corner-radius-75);width:100%;min-width:12ch;max-width:20ch;padding:var(--space-100)var(--space-200);font-size:var(--font-size-100);cursor:pointer;background-color:var(--control-background);opacity:var(--opacity);grid-template-columns:auto 1em;align-items:center;line-height:1.1;display:grid;position:relative;box-shadow:0 1px 2px #0000000d}div.select:after{content:"";border:2px solid #0000;border-top-color:var(--control-fg);border-right-color:var(--control-fg);width:.5em;height:.5em;opacity:var(--opacity);justify-self:center;rotate:135deg}div.select:focus-within:before{content:"";width:calc(100% + var(--focus-width)*6);height:calc(100% + var(--focus-width)*6);top:calc(var(--focus-width)*-3);left:calc(var(--focus-width)*-3);border-radius:var(--corner-radius-75);border:var(--focus-width)solid var(--focus-color);opacity:var(--opacity);position:absolute}div.select:has([disabled]){cursor:not-allowed}:root{accent-color:var(--action-default-background)}:where(:focus-visible){outline:var(--focus-width)solid var(--focus-color);outline-offset:calc(var(--focus-width)*2);border-radius:var(--corner-radius-75)}fieldset{--border:var(--control-border);border:1px solid var(--border)}fieldset legend{color:var(--border);padding-inline:.5rem}:where(input[type=text]){--border:var(--control-border);padding-block:var(--space-75);padding-inline:var(--space-200);border-radius:var(--corner-radius-75);border:1px solid var(--border)}:where(input[type=text]):focus{--border:var(--focus-color);border-width:var(--focus-width);outline:none}:where(input[type=radio]){width:var(--space-300,16px);height:var(--space-300,16px)}:where(input[type=checkbox]):not([role=switch]){--img:var(--studs-checkbox-unchecked);-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1em;height:1em;position:relative}:where(input[type=checkbox]):not([role=switch]):checked,:where(input[type=checkbox]):not([role=switch]).checked{--img:var(--studs-checkbox-checked)}:where(input[type=checkbox]):not([role=switch]):indeterminate,:where(input[type=checkbox]):not([role=switch]).indeterminate{--img:var(--studs-checkbox-indeterminate)}:where(input[type=checkbox]):not([role=switch]):before{content:var(--img);width:100%;height:100%;filter:var(--dropshadow-default);position:absolute;top:.125em;left:0}label{font-size:var(--font-size-100)}details{border:1px solid var(--border);border-radius:.25rem;padding-inline:.5em}summary{cursor:pointer;margin-inline:-.5em;padding:.5em;font-weight:700}summary::marker{color:var(--primary)}summary::-webkit-details-marker{color:var(--primary)}details[open] summary{border-bottom:1px solid var(--border);margin-bottom:.5em}}@layer studs-layout,studs-overrides;.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.float-left{float:left}.container{width:100%}.mx-auto{margin-inline:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-full{height:100%}.min-h-\[140px\]{min-height:140px}.min-h-screen{min-height:100vh}.w-3\/4{width:75%}.w-full{width:100%}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.-rotate-90{rotate:-90deg}.rotate-0{rotate:none}.rotate-90{rotate:90deg}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.bg-gradient-to-tr{--tw-gradient-position:to top right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-\[radial-gradient\(circle_at_30\%_30\%\,rgba\(255\,255\,255\,0\.7\)\,transparent_60\%\)\]{background-image:radial-gradient(circle at 30% 30%,#ffffffb3,#0000 60%)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.lowercase{text-transform:lowercase}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-60{opacity:.6}.opacity-100{opacity:1}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + 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)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-300{--tw-duration:.3s;transition-duration:.3s}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}@media (hover:hover){.hover\:no-underline:hover{text-decoration-line:none}.hover\:underline:hover{text-decoration-line:underline}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--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)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}@media (prefers-color-scheme:dark){.dark\:bg-\[radial-gradient\(circle_at_70\%_70\%\,rgba\(0\,0\,0\,0\.4\)\,transparent_60\%\)\]{background-image:radial-gradient(circle at 70% 70%,#0006,#0000 60%)}}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}
/**
 * STUDS Design System - Dark Mode Customizations
 * 
 * This file extends STUDS 3 with dark mode support using STUDS CSS variables
 * and design tokens. Following STUDS design principles:
 * 
 * - Clear: Visual hierarchy through consistent color usage
 * - Precise: Purposeful use of STUDS semantic tokens
 * - Efficient: Minimal overrides, leveraging STUDS foundations
 * 
 * STUDS Color System:
 * - 23-weight color ramps (000 lightest → 999 darkest)
 * - Semantic tokens: --surface-*, --action-*, --control-*, --feedback-*
 * - Brand primary: --color-orange-400 (#ff5308)
 * - Accessibility: Weight 500 = 4.5:1 contrast on white/black
 * 
 * Resources:
 * - Design Principles: https://studs.strongtie.io/foundations/design-principles
 * - Colors: https://studs.strongtie.io/foundations/colors
 * - CSS Variables: https://studs.strongtie.io/foundations/variables
 */

/* Ensure STUDS components work well in dark mode */
.dark {
  color-scheme: dark;
}

/**
 * Card Components
 * Using STUDS neutral color ramp for dark surfaces
 */
.dark .card {
  background-color: var(--color-neutral-800, #303030);
  border: 1px solid var(--color-neutral-700, #474747);
  color: var(--color-neutral-050, #f5f5f5);
}
.dark .card-header { 
  color: var(--color-neutral-000, #ffffff); 
}
.dark .card-title { 
  color: var(--color-neutral-000, #ffffff); 
}
.dark .card-content { 
  color: var(--color-neutral-100, #e3e3e3); 
}
.dark .card-footer { 
  color: var(--color-neutral-100, #e3e3e3); 
}

/**
 * Tables
 * Following STUDS table patterns with proper contrast
 */
.dark table, 
.dark .table { 
  color: var(--color-neutral-100, #e3e3e3); 
}
.dark table th, 
.dark table td { 
  background-color: var(--color-neutral-900, #1c1c1c); 
  border-color: var(--color-neutral-700, #474747); 
}

/**
 * Form Controls (Inputs, Textareas, Selects)
 * Using STUDS control tokens for consistency
 */
.dark .input, 
.dark .textarea, 
.dark .select-trigger {
  background-color: var(--color-neutral-800, #303030);
  border: 1px solid var(--color-neutral-600, #5c5c5c);
  color: var(--color-neutral-050, #f5f5f5);
}
.dark .input:focus, 
.dark .textarea:focus, 
.dark .select-trigger:focus { 
  border-color: var(--color-orange-400, #ff5308); 
  outline: 2px solid var(--color-orange-400, #ff5308);
  outline-offset: 2px;
}

/* Light mode form controls */
.input, 
.textarea, 
.select-trigger {
  background-color: var(--color-neutral-000, #ffffff);
  border: 1px solid var(--color-neutral-400, #919191);
  color: var(--color-neutral-900, #121212);
}
.input:focus, 
.textarea:focus, 
.select-trigger:focus { 
  border-color: var(--color-orange-400, #ff5308); 
  outline: 2px solid var(--color-orange-400, #ff5308);
  outline-offset: 2px;
}

/**
 * Select Dropdown
 * Using STUDS surface tokens for elevated components
 */
.dark .select-content { 
  background-color: var(--color-neutral-800, #303030); 
  border: 1px solid var(--color-neutral-600, #5c5c5c); 
}
.dark .select-item { 
  color: var(--color-neutral-050, #f5f5f5); 
}
.dark .select-item[data-state='checked'] { 
  background-color: var(--color-orange-400, #ff5308); 
  color: var(--color-neutral-000, #ffffff); 
}
.dark .select-item[data-highlighted] {
  background-color: var(--color-neutral-700, #474747);
}

/* Light mode select dropdown */
.select-content { 
  background-color: var(--color-neutral-000, #ffffff); 
  border: 1px solid var(--color-neutral-400, #919191); 
}
.select-item { 
  color: var(--color-neutral-900, #121212); 
}
.select-item[data-state='checked'] { 
  background-color: var(--color-orange-400, #ff5308); 
  color: var(--color-neutral-000, #ffffff); 
}
.select-item[data-highlighted] {
  background-color: var(--color-neutral-100, #e3e3e3);
}

/**
 * Switch Component
 * Following STUDS interactive states with brand orange
 */
.dark .switch { 
  background-color: var(--color-neutral-600, #5c5c5c); 
}
.dark .switch[data-state='checked'] { 
  background-color: var(--color-orange-400, #ff5308); 
}
.dark .switch-thumb { 
  background-color: var(--color-neutral-000, #ffffff); 
}

/* Light mode switches */
.switch { 
  background-color: var(--color-neutral-300, #b8b8b8); 
}
.switch[data-state='checked'] { 
  background-color: var(--color-orange-400, #ff5308); 
}
.switch-thumb { 
  background-color: var(--color-neutral-000, #ffffff); 
}

/**
 * Checkbox / Radio
 * Using brand orange for checked state
 */
.dark [data-slot='checkbox'], 
.dark [data-slot='radio'] { 
  color: var(--color-neutral-000, #ffffff); 
}

/* Checkbox styling for forms */
.dark [type='checkbox'] {
  border-color: var(--color-neutral-500, #7a7a7a);
}
.dark [type='checkbox']:checked {
  background-color: var(--color-orange-400, #ff5308);
  border-color: var(--color-orange-400, #ff5308);
}
.dark [type='checkbox']:focus {
  outline-color: var(--color-orange-400, #ff5308);
  border-color: var(--color-orange-400, #ff5308);
}

/* Light mode checkbox */
[type='checkbox'] {
  border-color: var(--color-neutral-400, #919191);
}
[type='checkbox']:checked {
  background-color: var(--color-orange-400, #ff5308);
  border-color: var(--color-orange-400, #ff5308);
}
[type='checkbox']:focus {
  outline-color: var(--color-orange-400, #ff5308);
  border-color: var(--color-orange-400, #ff5308);
}

/**
 * Tabs
 * Using brand orange for active state
 */
.dark [role='tablist'] {
  background-color: var(--color-neutral-800, #303030);
  border: 1px solid var(--color-neutral-600, #5c5c5c);
}
[role='tablist'] {
  background-color: var(--color-neutral-100, #e3e3e3);
  border: 1px solid var(--color-neutral-300, #b8b8b8);
}
.dark [role='tab'][data-state='active'] {
  background-color: var(--color-neutral-700, #474747);
  color: var(--color-orange-400, #ff5308);
  font-weight: 600;
}
[role='tab'][data-state='active'] {
  background-color: var(--color-neutral-000, #ffffff);
  color: var(--color-orange-400, #ff5308);
  font-weight: 600;
}
.dark [role='tab'][data-state='inactive'] {
  color: var(--color-neutral-300, #b8b8b8);
}
[role='tab'][data-state='inactive'] {
  color: var(--color-neutral-600, #5c5c5c);
}
.dark [role='tab']:hover {
  background-color: var(--color-neutral-700, #474747);
}
[role='tab']:hover {
  background-color: var(--color-neutral-200, #d1d1d1);
}

/**
 * Accordion
 * Following STUDS typography hierarchy
 */
.dark .accordion-trigger { 
  color: var(--color-neutral-050, #f5f5f5); 
}
.dark .accordion-content { 
  color: var(--color-neutral-100, #e3e3e3); 
}

/**
 * Badge
 * Following STUDS feedback tokens for status
 * Badges should be concise (1 word/number per STUDS guidelines)
 */
.dark .badge { 
  color: var(--color-neutral-000, #ffffff); 
  background-color: var(--color-neutral-700, #474747); 
  border: 1px solid var(--color-neutral-600, #5e5e5e); 
}
.dark .badge[data-variant='secondary'], 
.dark .badge[data-variant='default'] { 
  background-color: var(--color-blue-500, #206eec); 
  color: var(--color-neutral-000, #ffffff); 
  border-color: var(--color-blue-500, #206eec);
}

/**
 * Typography
 * Using STUDS typography tokens
 * Font: Helvetica Now (Display for 18px+, Text for <18px)
 */
.dark h1, 
.dark h2, 
.dark h3, 
.dark h4 { 
  color: var(--color-neutral-000, #ffffff); 
}

/**
 * Placeholder Text
 * Using STUDS muted foreground color
 */
.dark ::-moz-placeholder { 
  color: var(--color-neutral-500, #777777); 
}
.dark ::placeholder { 
  color: var(--color-neutral-500, #777777); 
}

/**
 * Interactive States - Table Rows
 * Following STUDS hover state guidelines
 */
.dark table tbody tr:hover { 
  background-color: var(--color-neutral-700, #474747); 
}
.dark table tbody tr:hover td { 
  color: var(--color-neutral-000, #ffffff); 
}

/**
 * Custom Todo Checkbox
 * Scoped to avoid global overrides
 */
.dark .todo-checkbox { 
  border: 1px solid var(--color-neutral-600, #5e5e5e); 
  background-color: var(--color-neutral-800, #303030); 
}
.dark .todo-checkbox:checked { 
  background-color: var(--color-blue-500, #206eec); 
  border-color: var(--color-blue-500, #206eec); 
}
.dark .todo-checkbox:focus { 
  outline: 2px solid var(--color-blue-500, #206eec); 
  outline-offset: 2px; 
}

/**
 * Form Inputs (STUDS Data Attributes)
 * Using semantic control tokens
 */
.dark input[data-studs-input],
.dark textarea[data-studs-textarea] {
  background-color: var(--color-neutral-800, #303030);
  border-color: var(--color-neutral-700, #474747);
  color: var(--color-neutral-050, #f5f5f5);
}

.dark input[data-studs-input]:focus,
.dark textarea[data-studs-textarea]:focus {
  border-color: var(--color-blue-500, #206eec);
  outline: 2px solid var(--color-blue-500, #206eec);
  outline-offset: 2px;
}

/**
 * Labels
 * Consistent with STUDS form patterns
 */
.dark label, 
.dark .label { 
  color: var(--color-neutral-100, #e3e3e3); 
}

/**
 * Utility: Surface Blocks
 * Using STUDS surface tokens
 */
.dark .surface-soft { 
  background-color: var(--color-neutral-800, #303030); 
  border: 1px solid var(--color-neutral-700, #474747); 
}

/**
 * Brand Primary Button (light + dark)
 * Uses STUDS brand orange ramp with hover/active states
 */
.button-brand {
  background-color: var(--color-orange-400, #ff5308);
  color: var(--color-neutral-000, #ffffff);
  border: 1px solid var(--color-orange-400, #ff5308);
}
.button-brand:hover {
  background-color: var(--color-orange-500, #ec4c07);
}
.button-brand:active {
  background-color: var(--color-orange-600, #d64405);
}
.button-brand:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/**
 * Status Badges (light mode defaults)
 * Pending: neutral subtle surface
 * Done: success feedback
 */
.badge-pending {
  background-color: var(--color-neutral-150, #dddddd);
  color: var(--color-neutral-700, #474747);
  border: 1px solid var(--color-neutral-300, #c2c2c2);
}
.badge-done {
  background-color: var(--color-green-500, #2b8a3e);
  color: var(--color-neutral-000, #ffffff);
  border: 1px solid var(--color-green-500, #2b8a3e);
}

/* Dark mode overrides for badges */
.dark .badge-pending {
  background-color: var(--color-neutral-700, #474747);
  color: var(--color-neutral-050, #f5f5f5);
  border-color: var(--color-neutral-600, #5e5e5e);
}
.dark .badge-done {
  background-color: var(--color-green-500, #2b8a3e);
  color: var(--color-neutral-000, #ffffff);
  border-color: var(--color-green-500, #2b8a3e);
}

/* Light mode checkbox styling */
.todo-checkbox {
  background-color: var(--color-neutral-000, #ffffff);
}
.todo-checkbox:checked {
  background-color: var(--color-blue-600, #206ee2);
  border-color: var(--color-blue-600, #206ee2);
  color: var(--color-neutral-000, #ffffff);
}
.todo-checkbox:focus {
  outline: 2px solid var(--color-blue-500, #206eec);
  outline-offset: 2px;
}

/**
 * Heading Styles
 * heading-primary: adaptive foreground
 * heading-accent: brand underline accent for page titles
 */
.heading-primary {
  color: var(--color-neutral-900, #121212);
}
.dark .heading-primary {
  color: var(--color-neutral-050, #f5f5f5);
}
.heading-accent {
  position: relative;
}
.heading-accent::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  background: var(--color-orange-400, #ff5308);
  border-radius: 2px;
  margin-top: 12px;
}

/* Section heading accent (smaller underline) */
.section-heading-accent {
  position: relative;
}
.section-heading-accent::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-orange-400, #ff5308);
  border-radius: 2px;
  margin-top: 10px;
}

/** Accent utilities **/
.accent-border { border-left: 4px solid var(--color-orange-400, #ff5308); }
.check-accent { color: var(--color-orange-500, #ec4c07); }
.dark .check-accent { color: var(--color-orange-400, #ff5308); }