@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
:root{--color-primary-50:#f8f9fa;--color-primary-100:#e9ecef;--color-primary-500:#495057;--color-primary-900:#212529;--color-semantic-success:#28a745;--color-semantic-warning:#ffc107;--color-semantic-danger:#dc3545;--color-semantic-info:#17a2b8;--color-neutral-white:#ffffff;--color-neutral-gray50:#f8f9fa;--color-neutral-gray100:#e9ecef;--color-neutral-gray200:#dee2e6;--color-neutral-gray300:#ced4da;--color-neutral-gray400:#adb5bd;--color-neutral-gray500:#6c757d;--color-neutral-gray700:#495057;--color-neutral-gray800:#343a40;--color-neutral-gray900:#212529;--color-background-primary:#ffffff;--color-background-secondary:#f8f9fa;--color-background-accent:#e9ecef;--color-border-default:#dee2e6;--color-border-light:#e9ecef;--color-border-dark:#ced4da;--font-family-primary:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.2;--line-height-normal:1.4;--line-height-relaxed:1.6;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0em;--letter-spacing-wide:0.025em;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:0.75rem;--spacing-lg:1rem;--spacing-xl:1.25rem;--spacing-2xl:1.5rem;--spacing-3xl:2rem;--spacing-4xl:2.5rem;--spacing-5xl:3rem;--border-radius-none:0px;--border-radius-sm:0.125rem;--border-radius-base:0.25rem;--border-radius-md:0.375rem;--border-radius-lg:0.5rem;--border-radius-xl:0.75rem;--border-radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-base:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--border-thin:1px solid;--border-medium:2px solid;--border-thick:3px solid}
body{font-family:var(--font-family-primary);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-neutral-gray900);margin:0;padding:0;background-color:var(--color-background-primary);transition:background 0.3s,color 0.3s}
body.dark-mode{--color-background-primary:#181a1b;--color-background-secondary:#23272a;--color-background-accent:#23272a;--color-neutral-gray900:#f8f9fa;--color-neutral-gray700:#e9ecef;--color-neutral-gray500:#adb5bd;--color-border-default:#343a40;--color-border-light:#23272a;--color-border-dark:#181a1b;background-color:var(--color-background-primary);color:var(--color-neutral-gray900)}
h1,h2,h3,h4,h5,h6{color:var(--color-neutral-gray900);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight)}
a{color:var(--color-primary-500);text-decoration:none;transition:color 0.2s}
a:hover{color:var(--color-primary-900);text-decoration:underline}
button{background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;padding:0;margin:0}
button:hover{opacity:0.8}
input[type="text"]{border:var(--border-thin) var(--color-border-default);border-radius:var(--border-radius-base);padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base)}
.container{width:100%;margin:0 auto;padding:0 var(--spacing-lg)}
.grid{display:grid;gap:var(--spacing-lg)}
@media (min-width:640px){.container{max-width:640px}}
@media (min-width:768px){.container{max-width:768px}.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.container{max-width:1024px}.grid{grid-template-columns:repeat(3,1fr)}}
*{box-sizing:border-box}
.debug-mode *{outline:1px solid red!important}