:root{--theme-name: "Default";--theme-version: "1.0.0";--theme-author: "Kyle Blank Rollins";--color-primary: #2d2d2d;--color-primary-hover: #1a1a1a;--color-primary-active: #000000;--color-primary-subtle: #f5f5f5;--color-secondary: #4a4a4a;--color-secondary-hover: #616161;--color-secondary-active: #757575;--color-secondary-subtle: #f8f8f8;--color-accent: #0066cc;--color-accent-hover: #0052a3;--color-accent-active: #004080;--color-accent-subtle: #e6f2ff;--color-success: #22c55e;--color-success-hover: #16a34a;--color-success-subtle: #dcfce7;--color-warning: #f59e0b;--color-warning-hover: #d97706;--color-warning-subtle: #fef3c7;--color-error: #ef4444;--color-error-hover: #dc2626;--color-error-subtle: #fecaca;--color-info: #3b82f6;--color-info-hover: #2563eb;--color-info-subtle: #dbeafe;--color-background: #ffffff;--color-background-secondary: #f8f9fa;--color-background-tertiary: #e9ecef;--color-surface: #ffffff;--color-surface-hover: #f8f9fa;--color-surface-active: #e9ecef;--color-text: #212529;--color-text-secondary: #6c757d;--color-text-tertiary: #adb5bd;--color-text-inverse: #ffffff;--color-text-disabled: #ced4da;--color-border: #dee2e6;--color-border-secondary: #e9ecef;--color-border-strong: #adb5bd;--color-border-interactive: #0066cc;--color-shadow-light: rgba(0, 0, 0, .05);--color-shadow: rgba(0, 0, 0, .1);--color-shadow-strong: rgba(0, 0, 0, .15);--color-shadow-dark: rgba(0, 0, 0, .25);--font-family-primary: "valkyrie_b", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-family-heading: "valkyrie_b_caps", "IBM Plex Sans", serif;--font-family-mono: "IBM Plex Mono", "Cascadia Code", Monaco, monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-md: 1.125rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-3xl: 2.5rem;--font-size-4xl: 3rem;--font-size-5xl: 3.5rem;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.6;--line-height-loose: 1.8;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--space-32: 8rem;--space-xs: var(--space-2);--space-sm: var(--space-4);--space-md: var(--space-6);--space-lg: var(--space-8);--space-xl: var(--space-12);--space-2xl: var(--space-16);--content-max-width: 1200px;--content-narrow: 800px;--content-wide: 1600px;--sidebar-width: 280px;--header-height: 80px;--footer-height: 120px;--radius-sm: .25rem;--radius: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-full: 9999px;--button-padding-x: var(--space-6);--button-padding-y: var(--space-3);--button-border-radius: var(--radius);--button-font-weight: var(--font-weight-medium);--card-padding: var(--space-6);--card-border-radius: var(--radius-lg);--card-shadow: var(--color-shadow);--input-padding-x: var(--space-4);--input-padding-y: var(--space-3);--input-border-radius: var(--radius);--input-border-width: 1px;--nav-link-padding-x: var(--space-4);--nav-link-padding-y: var(--space-2);--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .35s;--duration-slower: .5s;--easing-ease: ease;--easing-ease-in: ease-in;--easing-ease-out: ease-out;--easing-ease-in-out: ease-in-out;--transition-fast: var(--duration-fast) var(--easing-ease);--transition-normal: var(--duration-normal) var(--easing-ease);--transition-slow: var(--duration-slow) var(--easing-ease);--focus-ring-width: 2px;--focus-ring-offset: 2px;--focus-ring-color: var(--color-accent);--focus-ring-style: solid;--animation-duration: var(--duration-normal);--animation-easing: var(--easing-ease)}[data-color-scheme=dark]{--color-background: #0f172a;--color-background-secondary: #1e293b;--color-background-tertiary: #334155;--color-surface: #1e293b;--color-surface-hover: #334155;--color-surface-active: #475569;--color-text: #f8fafc;--color-text-secondary: #cbd5e1;--color-text-tertiary: #94a3b8;--color-text-inverse: #0f172a;--color-text-disabled: #64748b;--color-border: #334155;--color-border-secondary: #475569;--color-border-strong: #64748b;--color-primary: #e2e8f0;--color-primary-hover: #f8fafc;--color-primary-active: #ffffff;--color-primary-subtle: #334155;--color-secondary: #94a3b8;--color-secondary-hover: #cbd5e1;--color-secondary-active: #e2e8f0;--color-secondary-subtle: #1e293b;--color-accent: #3b82f6;--color-accent-hover: #60a5fa;--color-accent-active: #93c5fd;--color-accent-subtle: #1e3a8a;--color-success: #10b981;--color-success-hover: #34d399;--color-success-subtle: #064e3b;--color-warning: #f59e0b;--color-warning-hover: #fbbf24;--color-warning-subtle: #78350f;--color-error: #f87171;--color-error-hover: #fca5a5;--color-error-subtle: #7f1d1d;--color-info: #60a5fa;--color-info-hover: #93c5fd;--color-info-subtle: #1e3a8a;--color-shadow-light: rgba(0, 0, 0, .3);--color-shadow: rgba(0, 0, 0, .4);--color-shadow-strong: rgba(0, 0, 0, .6);--color-shadow-dark: rgba(0, 0, 0, .8)}@media (prefers-reduced-motion: reduce){:root{--animation-duration: 0ms;--transition-fast: none;--transition-normal: none;--transition-slow: none}}@media (prefers-contrast: high){:root{--color-border: var(--color-text);--color-border-secondary: var(--color-text-secondary);--focus-ring-width: 3px}}[data-theme=base]{--theme-name: "Basic Blue";--theme-version: "1.0.0";--color-primary: #e2e8f0;--color-primary-hover: #cbd5e1;--color-primary-active: #94a3b8;--color-primary-subtle: #f8fafc;--color-secondary: #94a3b8;--color-secondary-hover: #64748b;--color-secondary-active: #475569;--color-secondary-subtle: #f1f5f9;--color-accent: #3b82f6;--color-accent-hover: #2563eb;--color-accent-active: #1d4ed8;--color-accent-subtle: #eff6ff;--color-success: #22c55e;--color-success-hover: #16a34a;--color-success-subtle: #dcfce7;--color-warning: #f59e0b;--color-warning-hover: #d97706;--color-warning-subtle: #fef3c7;--color-error: #ef4444;--color-error-hover: #dc2626;--color-error-subtle: #fecaca;--color-info: #3b82f6;--color-info-hover: #2563eb;--color-info-subtle: #dbeafe;--color-background: #ffffff;--color-background-secondary: #f8f9fa;--color-background-tertiary: #e9ecef;--color-surface: #ffffff;--color-surface-hover: #f8f9fa;--color-surface-active: #e9ecef;--color-text: #0f172a;--color-text-secondary: #475569;--color-text-tertiary: #64748b;--color-text-inverse: #f8fafc;--color-text-disabled: #94a3b8;--color-border: #e2e8f0;--color-border-secondary: #f1f5f9;--color-border-strong: #cbd5e1;--color-border-interactive: #3b82f6;--color-shadow-light: rgba(0, 0, 0, .05);--color-shadow: rgba(0, 0, 0, .1);--color-shadow-strong: rgba(0, 0, 0, .15);--color-shadow-dark: rgba(0, 0, 0, .25);--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);--gradient-primary-light: linear-gradient(90deg, rgba(226, 232, 240, .1) 0%, rgba(148, 163, 184, .1) 50%, rgba(59, 130, 246, .1) 100% );--gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);--gradient-surface: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-hover) 100%)}[data-theme=base][data-color-scheme=dark]{--color-background: #0f172a;--color-background-secondary: #1e293b;--color-background-tertiary: #334155;--color-surface: #1e293b;--color-surface-hover: #334155;--color-surface-active: #475569;--color-text: #f8fafc;--color-text-secondary: #cbd5e1;--color-text-tertiary: #94a3b8;--color-text-inverse: #0f172a;--color-text-disabled: #64748b;--color-primary: #1e293b;--color-primary-hover: #0f172a;--color-primary-active: #020617;--color-primary-subtle: #334155;--color-secondary: #334155;--color-secondary-hover: #475569;--color-secondary-active: #64748b;--color-secondary-subtle: #1e293b;--color-accent: #1e40af;--color-accent-hover: #1d4ed8;--color-accent-active: #2563eb;--color-accent-subtle: #1e3a8a;--color-success: #10b981;--color-success-hover: #34d399;--color-success-subtle: #064e3b;--color-warning: #f59e0b;--color-warning-hover: #fbbf24;--color-warning-subtle: #78350f;--color-error: #f87171;--color-error-hover: #fca5a5;--color-error-subtle: #7f1d1d;--color-info: #60a5fa;--color-info-hover: #93c5fd;--color-info-subtle: #1e3a8a;--color-border: #334155;--color-border-secondary: #475569;--color-border-strong: #64748b;--color-shadow-light: rgba(0, 0, 0, .3);--color-shadow: rgba(0, 0, 0, .4);--color-shadow-strong: rgba(0, 0, 0, .6);--color-shadow-dark: rgba(0, 0, 0, .8);--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);--gradient-primary-light: linear-gradient(90deg, rgba(30, 41, 59, .1) 0%, rgba(51, 65, 85, .1) 50%, rgba(30, 64, 175, .1) 100% );--gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);--gradient-surface: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-hover) 100%)}.gradient-bar{background:var(--gradient-primary)}.gradient-bar-light{background:var(--gradient-primary-light)}.gradient-accent{background:var(--gradient-accent)}.gradient-surface{background:var(--gradient-surface)}[data-theme=canney-valley]{--theme-name: "Canney Valley";--theme-version: "1.0.0";--theme-author: "Kyle Blank Rollins";--color-primary: #81c784;--color-primary-hover: #66bb6a;--color-primary-active: #4caf50;--color-primary-subtle: #e8f5e9;--color-secondary: #a5d6a7;--color-secondary-hover: #81c784;--color-secondary-active: #66bb6a;--color-secondary-subtle: #f1f8e9;--color-accent: #cab3bf;--color-accent-hover: #b39dac;--color-accent-active: #9c8799;--color-accent-subtle: #faf7f9;--color-success: #68b96b;--color-success-hover: #5aa65d;--color-success-active: #4d8850;--color-success-subtle: #f0f8f0;--color-warning: #e5a933;--color-warning-hover: #d4951f;--color-warning-active: #c2810c;--color-warning-subtle: #fdf6e8;--color-error: #f44336;--color-error-hover: #e53935;--color-error-active: #d32f2f;--color-error-subtle: #ffebee;--color-info: #66ab68;--color-info-hover: #5a9a5c;--color-info-active: #4d8850;--color-info-subtle: #f0f8f0;--color-background: #f4f5f2;--color-background-secondary: #eef0ec;--color-background-tertiary: #e8eae6;--color-text: #263238;--color-text-secondary: #546e7a;--color-text-tertiary: #78909c;--color-text-inverse: #f4f5f2;--color-text-disabled: #b0bec5;--color-border: #c8e6c9;--color-border-secondary: #e8f5e9;--color-border-strong: #81c784;--color-border-interactive: #cab3bf;--color-shadow-light: rgba(38, 50, 56, .05);--color-shadow: rgba(38, 50, 56, .1);--color-shadow-strong: rgba(38, 50, 56, .15);--color-shadow-dark: rgba(38, 50, 56, .25);--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);--gradient-primary-light: linear-gradient(90deg, rgba(129, 199, 132, .2) 2%, rgba(202, 179, 191, .2) 50%, rgba(165, 214, 167, .2) 98% );--gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);--gradient-surface: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-hover) 100%)}[data-theme=canney-valley][data-color-scheme=dark]{--color-background: #1c2420;--color-background-secondary: #263238;--color-background-tertiary: #37474f;--color-surface: #263238;--color-surface-hover: #37474f;--color-surface-active: #455a64;--color-text: #ecf4ec;--color-text-secondary: #b2d5b3;--color-text-tertiary: #839097;--color-text-inverse: #263238;--color-text-disabled: #546e7a;--color-primary: #2e7d32;--color-primary-hover: #1b5e20;--color-primary-active: #0d3d14;--color-primary-subtle: #4caf50;--color-secondary: #263238;--color-secondary-hover: #37474f;--color-secondary-active: #455a64;--color-secondary-subtle: #37474f;--color-accent: #6d4c5a;--color-accent-hover: #4a2c37;--color-accent-active: #2d1a23;--color-accent-subtle: #96687f;--color-border: #455a64;--color-border-secondary: #546e7a;--color-border-strong: #78909c;--color-shadow-light: rgba(0, 0, 0, .3);--color-shadow: rgba(0, 0, 0, .4);--color-shadow-strong: rgba(0, 0, 0, .6);--color-shadow-dark: rgba(0, 0, 0, .8);--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);--gradient-primary-light: linear-gradient(90deg, rgba(46, 125, 50, .2) 2%, rgba(109, 76, 90, .2) 50%, rgba(38, 50, 56, .2) 98% );--gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);--gradient-surface: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-hover) 100%)}@font-face{font-family:IBM Plex Sans;src:url(../fonts/IBMPlexSans-Thin.woff2) format("woff2");font-weight:100;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Sans;src:url(../fonts/IBMPlexSans-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Sans;src:url(../fonts/IBMPlexSans-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Sans;src:url(../fonts/IBMPlexSans-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Sans;src:url(../fonts/IBMPlexSans-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(../fonts/IBMPlexMono-ExtraLight.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(../fonts/IBMPlexMono-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(../fonts/IBMPlexMono-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:valkyrie_b;font-style:normal;font-weight:400;font-stretch:normal;font-display:auto;src:url(../fonts/valkyrie_b_regular.woff2) format("woff2")}@font-face{font-family:valkyrie_b;font-style:italic;font-weight:400;font-stretch:normal;font-display:auto;src:url(../fonts/valkyrie_b_italic.woff2) format("woff2")}@font-face{font-family:valkyrie_b;font-style:normal;font-weight:700;font-stretch:normal;font-display:auto;src:url(../fonts/valkyrie_b_bold.woff2) format("woff2")}@font-face{font-family:valkyrie_b_caps;font-style:normal;font-weight:400;font-stretch:normal;font-display:auto;src:url(../fonts/valkyrie_b_caps_regular.woff2) format("woff2")}@font-face{font-family:valkyrie_b_caps;font-style:normal;font-weight:700;font-stretch:normal;font-display:auto;src:url(../fonts/valkyrie_b_caps_bold.woff2) format("woff2")}html,.root{font-family:var(--font-family-primary);font-size:18px;line-height:23px;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.article{font-family:var(--font-family-primary);font-size:1rem;line-height:1.2777778rem;margin:auto}h1,h2,h3,h4,h5{font-family:var(--font-family-heading)}h1,.h1{font-size:3rem;line-height:3.63rem;margin-top:0;margin-bottom:1.81rem}h2,.h2{font-size:2rem;line-height:2.95rem;margin-top:.98rem;margin-bottom:.98rem}h3,.h3{font-size:1.6111111rem;line-height:2.5555556rem;margin-top:1.2777778rem;margin-bottom:0rem}h4,.h4,h5,.h5{font-size:1rem;line-height:1.2777778rem;margin-top:1.2777778rem;margin-bottom:0rem}p,ul,ol,pre,table,blockquote{margin-top:0rem;margin-bottom:1.2777778rem}ul ul,ol ol,ul ol,ol ul{margin-top:0rem;margin-bottom:0rem}hr,.hr{border:1px solid;margin:-1px 0}b,i,strong,em,small,code{line-height:0}sub,sup{line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a{color:var(--color-text);transition:all var(--transition-normal)}a:hover{font-weight:700}.ui-label{font-family:var(--font-family-heading);font-size:var(--font-size-base)}@media (max-width: 768px){h1,.h1{font-size:2.25rem;line-height:2.3rem;margin-bottom:1.2rem}h2,.h2{font-size:1.5rem;line-height:1.6rem;margin-top:.8rem;margin-bottom:.8rem}h3,.h3{font-size:1.3rem;line-height:1.4rem;margin-top:1rem}h4,.h4,h5,.h5{line-height:1.1rem;margin-top:1rem}}:root{color-scheme:light dark}*,*:before,*:after{box-sizing:border-box}html{color:var(--color-text);background:var(--gradient-primary);background-attachment:fixed}body{margin:0;padding:0;min-height:100vh;display:flex;flex-direction:column;background:transparent}.page-content{margin:var(--space-2xl) var(--space-lg)}.container{max-width:var(--content-max-width);margin:0 auto;padding:0 var(--space-md);&.narrow{max-width:var(--content-narrow)}}.grid{display:grid;gap:var(--space-lg);&.two-columns{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}&.three-columns{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}.card{background:var(--color-background);border:1px solid var(--color-border);border-radius:8px;padding:var(--space-lg);transition:all var(--transition-normal);container-type:inline-size;@container (min-width: 300px){padding:var(--space-xl)}.card-title{display:flex;justify-content:center;align-items:center;margin-bottom:var(--space-md);h2{margin:0}}.card-icon{margin-right:1em;font-size:var(--font-size-lg);color:var(--color-text)}.card-content{color:var(--color-text-secondary)}p{margin:0}}.nav-card{color:var(--color-text);text-decoration:none;text-align:center;&,&:visited{color:var(--color-text)}&:hover,&:focus{color:var(--color-text);background-color:var(--color-background-secondary);text-decoration:none}*{color:inherit}h2{color:var(--color-text)}p{color:var(--color-text-secondary)}}.samples-section{margin-top:var(--space-xl);h3{margin-bottom:var(--space-lg);color:var(--color-primary);border-bottom:2px solid var(--color-border);padding-bottom:var(--space-sm)}}.sample-card{display:flex;flex-direction:column;height:100%;.sample-image-container{width:100%;height:200px;overflow:hidden;border-radius:4px;margin-bottom:var(--space-md);background:var(--color-background-secondary)}.sample-image{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-normal)}.sample-content{flex:1;display:flex;flex-direction:column;h4{margin-bottom:var(--space-sm);font-size:var(--font-size-lg);color:var(--color-text);line-height:1.3}p{margin-bottom:var(--space-md);color:var(--color-text-secondary);flex:1}}.sample-link{display:inline-flex;align-items:center;color:var(--color-accent);text-decoration:none;font-weight:500;transition:color var(--transition-fast);margin-top:auto;&:hover{color:var(--color-primary);text-decoration:underline}}&:hover .sample-image{transform:scale(1.05)}}.project-card{display:flex;.project-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-md);h4{margin:0;font-size:var(--font-size-xl);color:var(--color-text);line-height:1.3}}.project-info{margin-left:var(--space-md);flex:2}.project-link{display:inline-flex;align-items:center;color:var(--color-accent);text-decoration:none;font-weight:500;font-size:var(--font-size-sm);transition:color var(--transition-fast);white-space:nowrap;&:hover{color:var(--color-primary);text-decoration:underline}}.project-image-container{flex:1;width:100%;height:auto;overflow:hidden;display:flex;align-items:center}.project-image{width:100%;height:auto;object-fit:contain;object-position:center;transition:transform var(--transition-normal)}.project-content{display:flex;flex-direction:column;gap:var(--space-lg)}.project-features{h5{margin:0 0 var(--space-sm) 0;font-size:var(--font-size-md);color:var(--color-text);font-weight:600}ul{list-style:none;margin:0;padding:0;li{margin-bottom:var(--space-sm);padding-left:var(--space-md);position:relative;color:var(--color-text);line-height:1.5;&:before{content:"•";color:var(--color-accent);font-weight:700;position:absolute;left:0}}}}.project-description{p{margin-bottom:var(--space-md);color:var(--color-text);line-height:1.6;&:last-child{margin-bottom:0}}}}@media (min-width: 1024px){.web-projects .project-card{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"header header" "image content";gap:var(--space-xl);align-items:start;.project-header{grid-area:header;margin-bottom:var(--space-md)}.project-image-container{grid-area:image;height:auto;margin-bottom:0;align-self:center;display:flex;align-items:center;justify-content:center}.project-content{grid-area:content;gap:var(--space-md);align-self:center;display:flex;flex-direction:column;justify-content:center}&:nth-child(2n){grid-template-areas:"header header" "content image"}}}.portfolio-toc{margin:var(--space-xl) 0}@media (min-width: 1200px){.portfolio-toc{position:fixed;top:calc(80px + var(--space-lg));right:var(--space-lg);width:340px;max-width:340px;margin:0;z-index:100}body:has(.portfolio-toc) main{margin-right:400px;max-width:calc(100% - 500px)}}@media (max-width: 1199px){.portfolio-toc{max-width:800px;margin-left:auto;margin-right:auto;margin-bottom:var(--space-xl)}.web-projects .project-card{display:block;.project-image-container{height:auto;margin-bottom:var(--space-lg)}.project-content{gap:var(--space-lg)}}}@media (max-width: 768px){.page-content{margin:0 .2em 2em}.container{padding:0 var(--space-sm)}.project-card{.project-header{flex-direction:column;align-items:flex-start;gap:var(--space-xs);h4{font-size:var(--font-size-lg)}}.project-image-container{display:none}.project-info{margin-left:0}.project-content{gap:var(--space-md)}.project-features{h5{font-size:var(--font-size-base);margin-bottom:var(--space-xs)}ul li{font-size:var(--font-size-sm);margin-bottom:var(--space-xs);padding-left:var(--space-sm)}}.project-description p{font-size:var(--font-size-sm);margin-bottom:var(--space-sm)}}.web-projects .project-card{display:block}}.navigation{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);padding:var(--space-md) 0;.nav-container{display:flex;justify-content:space-between;align-items:center}.nav-brand{font-family:var(--font-family-mono);font-size:var(--font-size-lg);font-weight:700;color:var(--color-text-inverse);text-decoration:none;&:hover{color:var(--color-text-inverse)}}.nav-links{display:flex;gap:var(--space-lg);list-style:none;margin:0;padding:0;a{color:var(--color-text-inverse);font-weight:500;padding:var(--space-xs) var(--space-sm);border-radius:4px;transition:background-color var(--transition-fast);&:hover{background-color:#ffffff1a;text-decoration:none}&.active{background-color:#fff3}}}}.hero{padding:calc(var(--space-2xl) * 2) 0;text-align:center;font-size:var(--font-size-lg);.hero-content{max-width:var(--content-narrow);margin:0 auto;h1{margin-bottom:var(--space-lg)}.hero-subtitle{font-size:var(--font-size-xl);margin-bottom:var(--space-xl);opacity:.9}}}.content-section{content-visibility:auto;contain-intrinsic-size:500px}@media (max-width: 768px){.navigation{.nav-links{gap:var(--space-md)}}.hero{padding:var(--space-xl) 0;margin:-.2em}.container{padding:0 var(--space-sm)}}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em rgba(45,45,45,.4))}.logo.vanilla:hover{filter:drop-shadow(0 0 2em rgba(26,26,26,.4))}.card{padding:2em}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-primary);color:var(--color-text-inverse);cursor:pointer;transition:border-color .25s}button:hover{border-color:var(--color-accent);background-color:var(--color-accent)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.blog-post-metadata{margin:var(--space-sm) 0 var(--space-lg) 0;padding:var(--space-md) 0;border-bottom:1px solid var(--color-border)}.blog-post-date time{color:var(--color-text-secondary);font-size:.9rem;font-style:italic}.blog-post-tags{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.tags-label{color:var(--color-text-secondary);font-size:.9rem;font-weight:500}.tag-list{display:flex;gap:var(--space-xs);flex-wrap:wrap}.blog-tag{background-color:var(--color-background-secondary);border:1px solid var(--color-border);color:var(--color-text);padding:var(--space-xs) var(--space-sm);border-radius:16px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);text-decoration:none}.blog-tag:hover{background-color:var(--color-accent);color:var(--color-text-inverse);transform:translateY(-1px);box-shadow:0 2px 4px var(--color-shadow)}.blog-tag:focus{outline:2px solid var(--color-accent);outline-offset:2px}@media (max-width: 768px){.blog-post-tags{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}.tag-list{width:100%}}.blog-hero{background:transparent;color:var(--color-text-inverse);padding:var(--space-2xl) 0;text-align:center;margin-bottom:var(--space-xl)}.blog-hero h1{display:none}.blog-content{padding:0 var(--space-md)}.blog-layout{display:grid;grid-template-columns:280px 1fr;gap:var(--space-xl);max-width:var(--content-max-width);margin:0 auto;align-items:start}.blog-sidebar{position:sticky;top:var(--space-lg)}.blog-posts{min-width:0}@media (max-width: 1024px){.blog-layout{grid-template-columns:250px 1fr;gap:var(--space-lg)}}@media (max-width: 768px){.blog-content{padding:0}.blog-layout{grid-template-columns:1fr;gap:var(--space-md)}.blog-sidebar{position:static;order:2}.blog-posts{order:1}.grid.two-columns{gap:var(--space-md)}.sample-card{.sample-image-container{height:150px;margin-bottom:var(--space-sm)}.sample-content{h4{font-size:var(--font-size-base);margin-bottom:var(--space-xs)}p{font-size:var(--font-size-sm);margin-bottom:var(--space-sm)}}}.project-card{padding:var(--space-md)}}.cards-container{display:flex;justify-content:center;margin-top:calc(var(--space-2xl) * -1)}.cards{width:100%;max-width:1200px}@media (max-width: 768px){.cards-container{margin-top:var(--space-md)}}.blog-post-layout{display:grid;grid-template-columns:350px 1fr;grid-template-areas:"sidebar content";gap:var(--space-xl);max-width:var(--content-max-width);margin:0 auto;padding:var(--space-lg);min-height:calc(100vh - 80px)}.blog-toc-sidebar{grid-area:sidebar;min-width:0}.blog-toc-sticky-container{position:sticky;top:var(--space-lg);max-height:calc(100vh - var(--space-xl));overflow-y:auto}.blog-post-content{grid-area:content;min-width:0;max-width:none}.blog-post-content blockquote{background:var(--color-background-secondary);border-left:4px solid var(--color-primary);padding:var(--space-lg);font-style:italic;color:var(--color-text-secondary)}.blog-post-content code{background:var(--color-background-secondary);border:1px solid var(--color-border);border-radius:4px;padding:.2em .5em;font-family:var(--font-family-mono);font-size:.875em;color:var(--color-primary);font-weight:500;box-shadow:0 1px 2px #0000000d;transition:all .2s ease}.blog-post-content code:hover{background:var(--color-background-tertiary, var(--color-background-secondary));transform:translateY(-1px);box-shadow:0 2px 4px #00000014}.blog-post-content pre{background:var(--color-background-secondary);border:1px solid var(--color-border);border-radius:8px;padding:var(--space-lg) var(--space-xl);margin:var(--space-lg) 0;overflow-x:auto;position:relative;box-shadow:0 2px 8px #00000014,0 1px 4px #0000000a;line-height:1.6;font-size:.9rem;transition:all .3s ease}.blog-post-content pre:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f,0 2px 8px #0000000f}.blog-post-content pre code{background:none;border:none;padding:0;font-size:inherit;color:var(--color-text);box-shadow:none;font-weight:400;transition:none}.blog-post-content pre code:hover{background:none;transform:none;box-shadow:none}.blog-post-content pre::-webkit-scrollbar{height:8px}.blog-post-content pre::-webkit-scrollbar-track{background:var(--color-background-tertiary, rgba(0, 0, 0, .05));border-radius:4px}.blog-post-content pre::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px;transition:background .2s ease}.blog-post-content pre::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@media (prefers-color-scheme: dark){.blog-post-content pre{box-shadow:0 2px 8px #0000004d,0 1px 4px #0003}.blog-post-content pre:hover{box-shadow:0 4px 16px #0006,0 2px 8px #00000040}.blog-post-content code{box-shadow:0 1px 2px #0003}.blog-post-content code:hover{box-shadow:0 2px 4px #0000004d}}.blog-post-content pre:focus-within{outline:2px solid var(--color-primary);outline-offset:2px}@media (max-width: 768px){.blog-post-content pre{padding:var(--space-md) var(--space-lg);border-radius:6px;font-size:.85rem}.blog-post-content pre:hover{transform:none}}.blog-post-metadata{border-bottom:2px solid var(--color-border);padding:0 0 var(--space-sm) 0}.blog-post-date time{color:var(--color-text-secondary);font-weight:500}.blog-post-tags{margin-top:var(--space-xl)}.tags-label{color:var(--color-text);font-weight:500;margin-right:var(--space-sm)}.tag-list{display:inline-flex;flex-wrap:wrap;gap:var(--space-xs)}.blog-tag{background:var(--color-background-secondary);border:1px solid var(--color-border);border-radius:20px;color:var(--color-text);cursor:pointer;font-size:.9rem;padding:var(--space-xs) var(--space-sm);transition:all var(--transition-fast)}.blog-tag:hover{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}@media (max-width: 1024px){.blog-post-layout{grid-template-columns:1fr;grid-template-areas:"sidebar" "content";gap:var(--space-lg);padding:var(--space-md)}.blog-toc-sidebar{order:1}.blog-post-content{order:2}}@media (max-width: 768px){.blog-post-layout{padding:var(--space-sm);gap:var(--space-md)}}@media (max-width: 480px){.blog-post-layout{padding:var(--space-xs)}.blog-post-content{padding:var(--space-sm)}}.blog-post-content pre[class*=language-]{position:relative}.blog-post-content code[class*=language-]{color:var(--color-text);font-family:var(--font-family-mono);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.6;tab-size:4;hyphens:none}:root{--prism-comment: var(--color-text-tertiary, #6a737d);--prism-punctuation: var(--color-text-secondary, #586069);--prism-property: var(--color-danger, #d73a49);--prism-string: var(--color-success, #28a745);--prism-operator: var(--color-warning, #e36209);--prism-keyword: var(--color-primary, #0366d6);--prism-function: var(--color-accent, #6f42c1);--prism-variable: var(--color-warning, #e36209)}[data-color-scheme=dark]{--prism-comment: #8b949e;--prism-punctuation: #c9d1d9;--prism-property: #ff7b72;--prism-string: #7ee787;--prism-operator: #ffa657;--prism-keyword: #79c0ff;--prism-function: #d2a8ff;--prism-variable: #ffa657}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--prism-comment);font-style:italic}.token.punctuation{color:var(--prism-punctuation)}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:var(--prism-property)}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:var(--prism-string)}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:var(--prism-operator)}.token.atrule,.token.attr-value,.token.keyword{color:var(--prism-keyword);font-weight:500}.token.function,.token.class-name{color:var(--prism-function);font-weight:500}.token.regex,.token.important,.token.variable{color:var(--prism-variable)}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.namespace{opacity:.7}.language-json .token.property{color:var(--prism-keyword)}.language-json .token.string{color:var(--prism-string)}.language-css .token.selector{color:var(--prism-function)}.language-css .token.property{color:var(--prism-keyword)}.language-javascript .token.template-string,.language-typescript .token.template-string{color:var(--prism-string)}.language-javascript .token.template-punctuation,.language-typescript .token.template-punctuation{color:var(--prism-property)}.language-bash .token.function{color:var(--prism-keyword)}.language-bash .token.parameter{color:var(--color-text)}.blog-post-content pre.language-javascript:before{content:"JS"}.blog-post-content pre.language-typescript:before{content:"TS"}.blog-post-content pre.language-css:before{content:"CSS"}.blog-post-content pre.language-scss:before{content:"SCSS"}.blog-post-content pre.language-json:before{content:"JSON"}.blog-post-content pre.language-bash:before{content:"BASH"}.blog-post-content pre.language-shell:before{content:"SHELL"}.blog-post-content pre.language-python:before{content:"PYTHON"}.blog-post-content pre.language-yaml:before{content:"YAML"}.blog-post-content pre.language-markdown:before{content:"MD"}.blog-post-content pre.language-sql:before{content:"SQL"}.blog-post-content pre.language-jsx:before{content:"JSX"}.blog-post-content pre.language-tsx:before{content:"TSX"}.blog-post-content pre.language-diff:before{content:"DIFF"}.blog-post-content pre[class*=language-]:before{position:absolute;top:0;right:0;background:var(--color-background-tertiary, rgba(0, 0, 0, .1));color:var(--color-text-secondary);font-size:.7rem;font-weight:600;padding:.25rem .5rem;border-radius:0 8px 0 4px;text-transform:uppercase;letter-spacing:.75px;opacity:.6;transition:opacity .2s ease;font-family:var(--font-family-heading)}.blog-post-content pre[class*=language-]:hover:before{opacity:.9}.blog-post-content pre.language-none:before,.blog-post-content pre.language-text:before,.blog-post-content pre.language-plain:before{display:none}[data-color-scheme=dark] .blog-post-content pre[class*=language-]:before{background:#ffffff1a;color:#fffc}[data-color-scheme=dark] .blog-post-content pre[class*=language-]:hover:before{color:#fffffff2}