*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;color:#000;background-color:#fff;display:flex;flex-direction:column;min-height:100vh}header{background-color:#f5f5f5;border-bottom:1px solid #e0e0e0;padding:1rem 2rem}header h1{margin:0}main{display:flex;flex:1}aside{max-width:250px;background-color:#f9f9f9;border-right:1px solid #e0e0e0;padding:1.5rem;overflow-y:auto}.content{flex:1;padding:2rem;overflow-y:auto;max-width:800px}footer{background-color:#2e2e2e;border-top:1px solid #444;padding:1.5rem 2rem;margin-top:auto;color:#fff}@media(max-width:768px){main{flex-direction:column}aside{width:100%;border-right:none;border-bottom:1px solid #e0e0e0}}h1{font-weight:700;font-size:1.5rem}