:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #172033; background: #f4f6fa; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button { border: 0; border-radius: 8px; background: #315ad9; color: #fff; cursor: pointer; font: inherit; font-weight: 700; padding: .7rem 1rem; }
button:focus-visible, a:focus-visible { outline: 3px solid #e8a838; outline-offset: 3px; }
.state-card { background: #fff; border: 1px solid #dfe5ef; border-radius: 16px; box-shadow: 0 12px 30px #17203312; margin: max(10vh, 4rem) auto; max-width: 38rem; padding: 2rem; }
.eyebrow { color: #53627c; font-size: .78rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 .75rem; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
.shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: 100vh; }
aside { background: #152039; color: #eaf0ff; padding: 1.5rem; }
.brand { color: #fff; font-size: 1.25rem; font-weight: 800; text-decoration: none; }
.surface { color: #aebddd; font-size: .85rem; margin: .35rem 0 2rem; }
nav a { background: #29395d; border-radius: 8px; color: #fff; display: block; font-weight: 700; padding: .7rem .8rem; text-decoration: none; }
.workspace { padding: clamp(1.5rem, 4vw, 4rem); }
.summary { background: #fff; border: 1px solid #dfe5ef; border-radius: 12px; max-width: 50rem; padding: 1.5rem; }
.muted { color: #53627c; }
.secondary { background: #fff; border: 1px solid #9eabc2; color: #172033; margin-top: 1rem; }
@media (max-width: 720px) { .shell { grid-template-columns: 1fr; } aside { display: flex; align-items: baseline; gap: 1rem; } .surface { margin: 0; } nav { display: none; } }