:root { color-scheme: dark; font: 16px/1.65 system-ui, sans-serif; background: #091523; color: #eaf1f7; }
* { box-sizing: border-box; }
body { margin: 0; }
body > nav { position: fixed; inset: 0 auto 0 0; width: 220px; padding: 24px 16px; background: #112438; border-right: 1px solid #355266; display: flex; flex-direction: column; gap: 8px; }
nav img { width: 76px; height: 76px; margin-bottom: 12px; }
a { color: #95dcf2; }
nav a { padding: 9px; border-radius: 6px; text-decoration: none; }
nav a:hover, nav a:focus { background: #26455c; }
main { margin-left: 220px; padding: 36px; max-width: 1500px; }
h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.2; }
h2 { font-size: 23px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
article, .note { background: #112438; border: 1px solid #355266; border-radius: 10px; padding: 22px; margin: 20px 0; }
.button { display: inline-block; background: #275575; border: 1px solid #75a4bf; padding: 10px 16px; border-radius: 6px; text-decoration: none; }
.muted { color: #afc5d3; }
footer { border-top: 1px solid #355266; padding-top: 18px; margin-top: 30px; }
body > nav { overflow-y: auto; max-height: 100vh; }
nav button, nav select { font: inherit; color: inherit; background: #26455c; border: 1px solid #75a4bf; padding: 6px; border-radius: 5px; }
body.neo-nav-closed > nav { width: 84px; }
body.neo-nav-closed > nav > a, body.neo-nav-closed > nav > img, body.neo-nav-closed > nav > label { display: none; }
body.neo-nav-closed > main { margin-left: 84px; }
@media(max-width:760px) { body > nav { position: static; width: auto; flex-direction: row; flex-wrap: wrap; padding: 12px; } nav img { width: 36px; height: 36px; margin: 0; } main { margin: 0; padding: 20px; } }