@layer reset{:where(*){box-sizing:border-box}}@layer tokens{:root{--color-header:#666;--color-nav:#80bbdf;--color-section:#d6d6d6;--color-aside:#f56428;--color-text:#222;--color-on-header:#fff;--sidebar-width:160px;--space:.8em}}@layer layout{body{color:var(--color-text);flex-direction:column;min-block-size:100vh;margin:0;font-family:sans-serif;font-size:1em;line-height:1.4;display:flex}:is(header,footer){background-color:var(--color-header);color:var(--color-on-header);text-align:center;flex-grow:0;padding-block:.6em;padding-inline:1em;& :is(h1,p){margin:0;font-size:1.2em;font-weight:400}}main{flex-grow:1;display:flex;& nav{background-color:var(--color-nav);flex:0 0 var(--sidebar-width);padding:var(--space)}& section{background-color:var(--color-section);padding:var(--space);flex:1}& aside{background-color:var(--color-aside);flex:0 0 var(--sidebar-width);padding:var(--space)}& :is(nav,section,aside)>h2{margin-block-start:0;font-size:1em;font-weight:400}@media (width<=600px){flex-direction:column;& :is(nav,aside){flex:none}& section{order:1}& aside{text-align:center;order:2}& nav{text-align:center;order:3}}}}