:root{--color-text: #111111;--color-text-muted: #555555;--color-background: #fafaf9;--color-accent: #e89aaa;--color-accent-soft: #fadadd;--color-border: #e5e7eb}@media(prefers-color-scheme:dark){:root{--color-text: #f5f5f5;--color-text-muted: #a1a1aa;--color-background: #0f0f10;--color-accent: #e89aaa;--color-accent-soft: #2a1c20;--color-border: #27272a}}:root[data-theme=light]{--color-text: #111111;--color-text-muted: #555555;--color-background: #fafaf9;--color-accent: #e89aaa;--color-accent-soft: #fadadd;--color-border: #e5e7eb}:root[data-theme=dark]{--color-text: #f5f5f5;--color-text-muted: #a1a1aa;--color-background: #0f0f10;--color-accent: #e89aaa;--color-accent-soft: #2a1c20;--color-border: #27272a}*,*:before,*:after{box-sizing:border-box}html{font-size:16px}body{color:var(--color-text);margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;background-color:var(--color-background)}#app{display:flex;min-height:100vh;flex-direction:column}header,main,footer{padding:1.25rem}main{flex:1;max-width:36rem;margin-left:auto;margin-right:auto}main p{line-height:1.7}header{display:flex;align-items:center;border-bottom:1px solid var(--color-border);justify-content:space-between}header h1{margin:0;font-size:1.25rem}header button{color:var(--color-text);border:none;cursor:pointer;display:inline-flex;font-size:1.25rem;background:none;align-items:center;justify-content:center}.header-actions{gap:.75rem;display:flex;align-items:center}.header-actions button{padding:.25rem}header .icon{width:1.25rem;height:1.25rem;display:block}#theme-toggle .icon-sun{display:none}@media(prefers-color-scheme:dark){#theme-toggle .icon-moon{display:none}#theme-toggle .icon-sun{display:block}}:root[data-theme=dark] #theme-toggle .icon-moon{display:none}:root[data-theme=dark] #theme-toggle .icon-sun{display:block}:root[data-theme=light] #theme-toggle .icon-moon{display:block}:root[data-theme=light] #theme-toggle .icon-sun{display:none}section{margin-bottom:3rem}section h2{font-size:1.5rem;margin-bottom:.75rem}.section-intro{color:var(--color-text-muted);font-size:.95rem;margin-top:.25rem}#hero{text-align:center;margin-top:2.5rem;margin-bottom:4rem}#hero h2{font-size:1.75rem;line-height:1.3}#hero p{color:var(--color-text-muted);margin-bottom:1.5rem}#hero>div{gap:.75rem;display:flex;max-width:28rem;margin-left:auto;margin-right:auto;flex-direction:column}button{cursor:pointer;padding:.75rem 1rem;font-size:1rem;border-radius:6px}#hero button:first-child{color:var(--color-text);border:none;background-color:var(--color-accent)}#hero button:last-child{color:var(--color-accent);border:2px solid var(--color-accent);background-color:transparent}.tag{color:var(--color-accent);padding:.25rem .5rem;font-size:.75rem;font-weight:500;border-radius:999px;background-color:var(--color-accent-soft)}.card{border:1px solid var(--color-border);padding:1.25rem;border-radius:.75rem;background-color:var(--color-background);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}.card-tags{gap:.5rem;margin:0;display:flex;padding:0;flex-wrap:wrap;list-style:none}.card-list{gap:1rem;display:flex;margin-top:1.5rem;flex-direction:column}.card-title{margin:0 0 .5rem;font-size:1.125rem;font-weight:600}.card-image{width:100%;overflow:hidden;border-radius:.5rem;margin-bottom:1rem;background-color:var(--color-accent-soft)}.card-image img{width:100%;height:100%;display:block;object-fit:cover}.card-content{display:flex;align-items:flex-start;flex-direction:column}.card-description{color:var(--color-text-muted);font-size:.95rem;line-height:1.5;margin-bottom:.75rem}.card--story{display:flex;gap:1rem;padding:1rem 1.25rem;align-items:center}.card--story .card-tags{margin-top:0}.card--story .card-image{flex:0 0 clamp(5rem,20vw,7rem);aspect-ratio:2 / 3;margin-bottom:0}.card--story .card-content{display:flex;flex-direction:column}.card--project .card-image{aspect-ratio:2 / 1}.card:hover,.card:focus-within{border-color:var(--color-accent);transform:translateY(-2px);box-shadow:0 4px 10px #0000000f}footer{color:var(--color-text-muted);font-size:.875rem;border-top:1px solid var(--color-border)}footer a{color:var(--color-accent);text-decoration:none}footer a:hover,footer a:focus{text-decoration:underline}
