button.toggle{padding:0}button.toggle:hover{box-shadow:none}.toggle-track{background-color:var(--color-bg-secondary);width:4rem;height:2rem;border-radius:1rem}.toggle-track:hover{box-shadow:0 0 var(--space-sm) var(--color-accent)}.toggle-thumb{background-color:var(--color-primary);width:2rem;height:2rem;border-radius:50%;border:solid 2px var(--color-bg-secondary);transition:transform .3s ease,var(--transition-color)}.toggle-active .toggle-thumb{transform:translate(2rem)}.toggle-inactive .toggle-thumb{transform:translate(0)}header{background-color:var(--color-primary);width:100%;height:4em;display:flex;flex-direction:row;justify-content:start;gap:var(--space-md);align-items:center;overflow-x:scroll}header .avatar{height:3rem;margin-left:.5rem}header .title{margin-right:auto}header nav{margin-right:var(--space-lg);display:flex;gap:var(--space-lg)}header nav a{font-size:large}header nav a.active{font-weight:700;color:var(--color-accent)}.card{margin:var(--space-sm);background-color:var(--color-bg);border:solid 2px;border-radius:var(--space-md);padding:var(--space-md);cursor:default}.card:hover{background-color:var(--color-bg-hover)}.info-card{border-color:var(--color-info);color:var(--color-info)}.success-card{border-color:var(--color-success);color:var(--color-success)}.warning-card{border-color:var(--color-warning);color:var(--color-warning)}.error-card{border-color:var(--color-error);color:var(--color-error)}.article-list{margin:0 auto;background-color:var(--color-bg-secondary);width:48rem;border:solid 2px var(--color-bg-hover);padding:var(--space-md) var(--space-lg);padding-bottom:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md)}.article-list article{background-color:var(--color-bg);cursor:default;border-top:solid var(--space-sm) var(--color-primary);border-left:solid 2px var(--color-primary)}.article-list article:hover{box-shadow:0 0 var(--space-sm) var(--color-accent)}main article{margin:0 auto}article{max-width:48rem;background-color:var(--color-bg-secondary);padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-md)}@media not (min-width:48rem){.article-list,article{width:100%;padding:var(--space-sm)}}*{margin:0;padding:0;box-sizing:border-box;transition:var(--transition-color)}:root{--gray-50: #fafafa;--gray-100: #f4f4f5;--gray-200: #e4e4e7;--gray-300: #d4d4d8;--gray-400: #a1a1aa;--gray-500: #71717a;--gray-600: #52525b;--gray-700: #3f3f46;--gray-800: #27272a;--gray-900: #18181b;--sky-300: #7dd3fc;--blue-600: #2563eb;--violet-800: #5b21b6;--pink-200: #fbcfe8;--green-500: #22c55e;--amber-500: #f59e0b;--red-500: #ef4444;--blue-500: #3b82f6;--color-primary: var(--sky-300);--color-accent: var(--blue-600);--color-success: var(--green-500);--color-warning: var(--amber-500);--color-error: var(--red-500);--color-info: var(--blue-500);--color-bg: var(--gray-50);--color-bg-secondary: var(--gray-100);--color-bg-hover: var(--gray-200);--color-text: var(--gray-900);--color-text-secondary: var(--gray-600);--color-text-inverse: var(--gray-100);--transition-color: background-color .3s ease, color .3s ease, border-color .3s ease;--space-sm: .5rem;--space-md: 1rem;--space-lg: 2rem}:root.dark{--color-primary: var(--violet-800);--color-accent: var(--pink-200);--color-bg: var(--gray-900);--color-bg-secondary: var(--gray-800);--color-bg-hover: var(--gray-700);--color-text: var(--gray-100);--color-text-secondary: var(--gray-400);--color-text-inverse: var(--gray-900)}html{font-family:Cantarell,Roboto,Segoe UI,system-ui,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;color:var(--color-text);background-color:var(--color-bg);width:100%;height:100%}body,#app{width:100%;height:100%}main{width:100%;overflow-x:hidden}a{color:var(--color-text);text-decoration:none}a:hover{color:var(--color-accent);text-decoration:underline}button{background-color:var(--color-primary);color:var(--color-text);border:none;padding:calc(var(--space-md) / 3) var(--space-md);font-size:large;cursor:pointer}button:hover{box-shadow:0 0 var(--space-sm) var(--color-accent)}button:active{box-shadow:inset 0 0 var(--space-sm) var(--color-accent)}