html,body{color-scheme:light dark;font-family:system-ui}body{margin:0;padding:0;height:100vh;display:flex;flex-direction:column;font-family:system-ui,serif}header{border-bottom:1px solid}main{flex-grow:1;display:flex;flex-direction:row}nav{width:16em;height:100%;border-right:1px solid}article{flex-grow:1}aside{width:16em;height:100%;border-left:1px solid}footer{border-top:1px solid}.row{display:flex;flex-direction:row;justify-content:space-between}input[type=text],input[type=range]{width:100%}button{white-space:nowrap}details summary{background-color:#000;color:#fff}