*,*:before,*:after{box-sizing:border-box}html{font-family:var(--font-body);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height);letter-spacing:var(--letter-spacing);color:var(--color-text);background:var(--color-canvas);-webkit-font-smoothing:antialiased}body{margin:0;min-height:100vh;display:flex;flex-direction:column;transition:background var(--animation-speed) var(--animation-easing)}main{flex:1;max-width:var(--layout-max-width);padding:var(--layout-padding);width:100%;display:flex;flex-direction:column;gap:var(--content-gap)}[data-layout-alignment=center] main{margin:0 auto}[data-layout-alignment=left] main{margin-right:auto}[data-layout-alignment=right] main{margin-left:auto}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-weight-bold);letter-spacing:var(--heading-letter-spacing);text-transform:var(--text-transform);margin:0 0 .5em;line-height:1.2}h1{font-size:2.25rem}h2{font-size:1.75rem}h3{font-size:1.375rem}p{margin:0 0 1rem;color:var(--color-muted)}a{color:var(--color-accent);text-decoration:none;transition:color var(--animation-speed) var(--animation-easing)}a:hover{color:var(--color-accent-hover)}code,pre{font-family:var(--font-mono);font-size:.9em}pre{background:var(--color-surface);border:var(--border-width) var(--border-style) var(--color-border);border-radius:var(--border-radius);padding:1rem;overflow-x:auto}code{background:var(--color-surface);padding:.15em .35em;border-radius:calc(var(--border-radius) * .5)}pre code{background:none;padding:0}blockquote{margin:0 0 1rem;padding-left:1rem;border-left:var(--border-width) var(--border-style) var(--color-accent);color:var(--color-muted);font-style:italic}hr{border:none;border-top:var(--border-width) var(--border-style) var(--color-border);margin:2rem 0}.surface{background:var(--color-surface);border:var(--border-width) var(--border-style) var(--color-border);border-radius:var(--border-radius);box-shadow:var(--shadow-style);padding:var(--layout-padding)}.highlight{background:var(--color-highlight);padding:.1em .3em}.slogan{color:var(--color-muted);font-style:italic;font-size:1.1em}.theme-indicator{position:fixed;bottom:1rem;right:1rem;font-family:var(--font-mono);font-size:.75rem;color:var(--color-muted);opacity:.6;text-transform:lowercase}[data-animation-style=subtle] .fade-in{animation:fadeIn var(--animation-speed) var(--animation-easing) forwards;opacity:0}[data-animation-style=playful] .fade-in{animation:bounceIn var(--animation-speed) var(--animation-easing) forwards;opacity:0}[data-animation-style=dramatic] .fade-in{animation:slideUp calc(var(--animation-speed) * 1.5) var(--animation-easing) forwards;opacity:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.9)}60%{transform:scale(1.02)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.stagger-1{animation-delay:calc(var(--animation-speed) * .1)}.stagger-2{animation-delay:calc(var(--animation-speed) * .2)}.stagger-3{animation-delay:calc(var(--animation-speed) * .3)}.stagger-4{animation-delay:calc(var(--animation-speed) * .4)}[data-surface-texture=noise]:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E")}[data-surface-texture=grain]:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.8' numOctaves='4' seed='0' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23grain)'/%3E%3C/svg%3E")}[data-surface-texture=grid]:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;background-image:linear-gradient(var(--color-border) 1px,transparent 1px),linear-gradient(90deg,var(--color-border) 1px,transparent 1px);background-size:32px 32px}@media(max-width:640px){html{font-size:calc(var(--font-size-base) * .9)}main{padding:calc(var(--layout-padding) * .6)}h1{font-size:1.75rem}h2{font-size:1.5rem}}