:root { color-scheme: light dark; --paper: #fafafa; --ink: #151515; --muted: #525252; --line: #cecece; --surface: #fff; font: 100%/1.5 "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
.frame { width: min(100% - 2.5rem, 70rem); margin-inline: auto; }
.portal-header { display: flex; justify-content: space-between; align-items: baseline; padding: 1.5rem 0; border-bottom: 2px solid currentColor; }
.wordmark { font: 600 1.55rem/1.1 Georgia, serif; letter-spacing: -.055em; }
.environment { font-size: .8rem; font-weight: 650; }
.toolbar, nav { display: flex; align-items: center; gap: clamp(.8rem, 3vw, 2.2rem); }
.toolbar { justify-content: space-between; border-bottom: 1px solid var(--line); }
nav a, .account-action { color: var(--muted); padding: .95rem 0; background: none; border: 0; font: inherit; font-size: .94rem; cursor: pointer; text-decoration: none; }
nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px var(--ink); font-weight: 650; }
a:hover, .account-action:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
main { padding: clamp(2.5rem, 8vw, 5.75rem) 0; }
h1 { margin: 0 0 1.75rem; font: 500 clamp(2.6rem, 8vw, 4.8rem)/1.04 Georgia, serif; letter-spacing: -.065em; }
.portal-card { max-width: 46rem; border: 1px solid var(--line); border-top: 2px solid var(--ink); background: var(--surface); padding: clamp(1.25rem, 4vw, 2.25rem); }
h2 { margin: 0; font-size: 1.15rem; } p { color: var(--muted); }
.portal-card p { margin: .4rem 0 0; }
.auth { width: fit-content; max-width: 100%; margin: auto; }
@media (prefers-color-scheme: dark) { :root { --paper: #101010; --ink: #f5f5f5; --muted: #b8b8b8; --line: #464646; --surface: #191919; } }
@media (max-width: 32rem) { .frame { width: calc(100% - 2rem); } nav a, .account-action { font-size: .85rem; } }