:root {
  color-scheme: dark;
  --ink: #edf3ff;
  --muted: #a7b4ca;
  --subtle: #71809b;
  --bg: #090e1b;
  --surface: rgba(19, 29, 50, 0.72);
  --surface-solid: #121d32;
  --line: rgba(174, 194, 230, 0.17);
  --accent: #95f0c9;
  --accent-strong: #5fcf9f;
  --violet: #b9a2ff;
  --max: 76rem;
  --header-height: 4.5rem;
}

[data-theme="light"] {
  color-scheme: light;
  --ink: #10213d;
  --muted: #52617b;
  --subtle: #6e7c93;
  --bg: #f6f8fc;
  --surface: rgba(255, 255, 255, 0.75);
  --surface-solid: #ffffff;
  --line: rgba(46, 68, 111, 0.17);
  --accent: #087c55;
  --accent-strong: #006a47;
  --violet: #7054d9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1rem); }
body { background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; overflow-x: hidden; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }

.skip-link { background: var(--accent); color: #062719; left: 1rem; padding: .7rem 1rem; position: fixed; top: -5rem; z-index: 20; }
.skip-link:focus { top: 1rem; }
.sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.section-shell { margin-inline: auto; max-width: var(--max); padding-inline: 1.5rem; }

.page-glow { border-radius: 999px; filter: blur(10px); opacity: .18; pointer-events: none; position: fixed; z-index: -1; }
.glow-one { background: #3c8ee9; height: 35rem; right: -15rem; top: -14rem; width: 35rem; }
.glow-two { background: #6e4ee7; bottom: 6rem; height: 29rem; left: -17rem; width: 29rem; }
.cursor-glow { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 67%); height: 34rem; left: 0; opacity: 0; pointer-events: none; position: fixed; top: 0; transform: translate3d(calc(var(--cursor-x, -20rem) - 50%), calc(var(--cursor-y, -20rem) - 50%), 0); transition: opacity .2s ease; width: 34rem; z-index: -1; }
.cursor-glow.is-visible { opacity: .72; }

.site-header { align-items: center; backdrop-filter: blur(18px); border-bottom: 1px solid transparent; display: flex; height: var(--header-height); justify-content: space-between; left: 0; padding: 0 max(1.5rem, calc((100vw - var(--max)) / 2)); position: fixed; right: 0; top: 0; transition: background .25s, border-color .25s; z-index: 10; }
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); border-color: var(--line); }
.brand { align-items: center; display: inline-flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; font-weight: 800; gap: .45rem; letter-spacing: .1em; }
.brand-mark { border-radius: .5rem; display: block; height: 2rem; width: 2rem; }
.brand-slash { color: var(--accent); font-size: 1rem; margin-left: -.35rem; }
.site-nav { display: flex; gap: 1.5rem; margin-left: auto; margin-right: 1.25rem; }
.site-nav a { color: var(--muted); font-size: .9rem; position: relative; }
.site-nav a::after { background: var(--accent); bottom: -.5rem; content: ""; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: right; transition: transform .2s; width: 100%; }
.site-nav a:hover, .site-nav a.is-active { color: var(--ink); }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.theme-toggle, .menu-toggle { background: transparent; border: 1px solid var(--line); border-radius: 999px; display: grid; height: 2.25rem; place-items: center; width: 2.25rem; }
.theme-toggle:hover, .menu-toggle:hover { border-color: var(--accent); color: var(--accent); }
.menu-toggle { display: none; }

.hero { align-items: center; display: grid; gap: 2rem; grid-template-areas: "copy signal" "proof proof"; grid-template-columns: 1.05fr .95fr; padding-bottom: 5rem; padding-top: calc(var(--header-height) + 7rem); }
.hero-copy { align-self: center; grid-area: copy; }
.eyebrow { color: var(--accent); font-size: .72rem; font-weight: 750; letter-spacing: .12em; margin: 0 0 1rem; text-transform: uppercase; }
.status-dot { background: var(--accent); border-radius: 99px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 15%, transparent); display: inline-block; height: .5rem; margin-right: .55rem; width: .5rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3rem, 6.1vw, 6rem); letter-spacing: -.075em; line-height: .93; margin-bottom: 1.7rem; max-width: 10ch; }
h1 em { color: var(--accent); font-family: ui-serif, Georgia, serif; font-weight: 500; }
.hero-lede { color: var(--muted); font-size: clamp(1.05rem, 1.45vw, 1.25rem); line-height: 1.65; max-width: 37rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }
.button { align-items: center; border-radius: .45rem; display: inline-flex; font-weight: 700; gap: .8rem; justify-content: center; padding: .85rem 1.1rem; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--accent); color: #08261a; }
.button-primary:hover { background: var(--accent-strong); }
.button-quiet { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.button-quiet:hover { border-color: var(--accent); }

.signal-panel { align-self: center; background: linear-gradient(145deg, color-mix(in srgb, var(--surface-solid) 85%, #24446b), var(--surface)); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 24px 70px rgba(0, 0, 0, .22); grid-area: signal; min-height: 28rem; overflow: hidden; padding: 1rem; }
.signal-panel { background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), color-mix(in srgb, var(--accent) 17%, transparent), transparent 42%), linear-gradient(145deg, color-mix(in srgb, var(--surface-solid) 85%, #24446b), var(--surface)); transition: border-color .25s, box-shadow .25s; }
.signal-panel:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 28px 78px rgba(0, 0, 0, .28); }
.signal-panel__top, .signal-panel__footer, .project-meta { color: var(--subtle); display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .67rem; justify-content: space-between; letter-spacing: .04em; text-transform: uppercase; }.signal-panel__status { align-items: center; display: flex; gap: .6rem; }.signal-replay { background: transparent; border: 1px solid var(--line); border-radius: 99px; color: var(--accent); font: inherit; letter-spacing: inherit; padding: .3rem .5rem; text-transform: inherit; transition: background .2s, border-color .2s; }.signal-replay:hover, .signal-replay:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); outline: none; }
.live-label { color: var(--accent); }
.signal-map { border: 1px dashed color-mix(in srgb, var(--line) 95%, transparent); border-radius: .75rem; height: 22rem; margin-top: 1rem; overflow: hidden; position: relative; }
.signal-flow { height: 100%; inset: 0; position: absolute; width: 100%; }.signal-flow__line { fill: none; marker-end: url(#signal-arrow); stroke: var(--accent); stroke-width: 1.25; }.signal-flow__label { fill: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: .08em; paint-order: stroke; stroke: var(--surface-solid); stroke-width: 3px; text-transform: uppercase; }
.signal-panel.is-replaying .signal-flow__line { animation: signal-flow 1s linear infinite; stroke-dasharray: 7 5; }.signal-node.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent), 0 0 1.5rem color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-3px); }@keyframes signal-flow { to { stroke-dashoffset: -24; } }
.signal-flow marker path { fill: var(--accent); }.signal-node { background: color-mix(in srgb, var(--surface-solid) 88%, transparent); border: 1px solid var(--line); border-radius: .55rem; display: grid; gap: .2rem; padding: .75rem; position: absolute; transition: transform .25s, border-color .25s; width: 8.1rem; }
.signal-node:hover { border-color: var(--accent); transform: translateY(-3px); }
.signal-node strong { font-size: .92rem; }.signal-node small { color: var(--muted); font-size: .67rem; }
.source { left: 5%; top: 10%; }.relay { left: 36%; top: 10%; }.partner { right: 5%; top: 10%; }.callback { bottom: 10%; right: 5%; }.hud { bottom: 10%; left: 36%; }
.signal-panel__footer { align-items: center; gap: .5rem; justify-content: center; margin: 1rem 0 .15rem; }.signal-panel__footer i { background: var(--line); height: 1px; width: 1.5rem; }
.hero-proof { align-items: stretch; border-top: 1px solid var(--line); display: grid; grid-area: proof; grid-template-columns: repeat(3, 1fr); margin-top: 1rem; }
.hero-proof div { border-right: 1px solid var(--line); display: grid; gap: .35rem; padding: 1.1rem 1rem 0 0; }.hero-proof div + div { padding-left: 1rem; }.hero-proof div:last-child { border: 0; }.hero-proof strong { font-size: clamp(1.4rem, 2vw, 2rem); letter-spacing: -.06em; }.hero-proof span { color: var(--muted); font-size: .8rem; }

.bio { border-top: 1px solid var(--line); display: grid; gap: 2.5rem; grid-template-columns: .45fr 1.1fr .85fr; padding-bottom: 8rem; padding-top: 8rem; }.bio-label span { color: var(--subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }.bio h2 { font-size: clamp(2rem, 3.8vw, 4rem); letter-spacing: -.055em; line-height: 1.04; margin-bottom: 1.5rem; max-width: 13ch; }.bio-copy p { color: var(--muted); line-height: 1.7; max-width: 39rem; }.bio-facts { border-left: 1px solid var(--line); margin: 0; padding-left: 1.6rem; }.bio-facts div + div { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }.bio-facts dt { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }.bio-facts dd { color: var(--muted); line-height: 1.5; margin: .45rem 0 0; }
.statement { align-items: start; border-top: 1px solid var(--line); display: grid; gap: 3rem; grid-template-columns: .7fr 1.3fr; padding-bottom: 8rem; padding-top: 8rem; }.statement h2, .section-heading h2, .now h2 { font-size: clamp(2rem, 3.8vw, 4rem); letter-spacing: -.055em; line-height: 1.04; margin-bottom: 1.5rem; }.statement p:not(.eyebrow), .section-note, .now > p { color: var(--muted); line-height: 1.7; max-width: 42rem; }
.work, .approach { padding-bottom: 8rem; }.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 1.6rem; }.section-heading h2 { margin-bottom: 0; max-width: 17ch; }.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }.filter { background: transparent; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: .82rem; padding: .45rem .85rem; }.filter:hover, .filter.is-active { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: var(--accent); color: var(--accent); }
.project-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }.project-card { background: var(--surface); border: 1px solid var(--line); border-radius: .8rem; display: flex; flex-direction: column; min-height: 20rem; padding: 1.4rem; transition: opacity .25s, transform .25s, border-color .25s; }.project-card:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); transform: translateY(-4px); }.project-card--feature { background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 14%, var(--surface-solid)), var(--surface)); grid-row: span 2; min-height: 41rem; }.project-card h3 { font-size: clamp(1.5rem, 2.5vw, 2.2rem); letter-spacing: -.055em; margin: auto 0 .8rem; }.project-card p { color: var(--muted); line-height: 1.6; }.tag-list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .6rem 0 1.1rem; padding: 0; }.tag-list li { border: 1px solid var(--line); border-radius: .25rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .67rem; padding: .3rem .45rem; }.project-links { display: grid; gap: .7rem; margin-top: auto; }.text-link { color: var(--accent); font-size: .9rem; font-weight: 700; }.text-link:hover { text-decoration: underline; text-underline-offset: .25rem; }.text-link--publication { color: var(--violet); }.project-card.is-hidden { display: none; }
.project-card { isolation: isolate; overflow: hidden; position: relative; transition: opacity .25s, transform .25s, border-color .25s, box-shadow .25s; }
.project-card::after { background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), color-mix(in srgb, var(--accent) 19%, transparent), transparent 42%); content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity .2s; z-index: 0; }
.project-card > * { position: relative; z-index: 1; }
.project-card:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }
.project-card:hover::after { opacity: 1; }
.career { border-top: 1px solid var(--line); padding-bottom: 8rem; padding-top: 8rem; }.career-layout { align-items: start; display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.45fr) minmax(16rem, .55fr); }.career-timeline { list-style: none; margin: 0; padding: 0; }.career-timeline > li { border-top: 1px solid var(--line); padding: 1.75rem 0; }.career-timeline > li:last-child { border-bottom: 1px solid var(--line); }.career-company { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; letter-spacing: .04em; margin: 0; text-transform: uppercase; }.career-company { color: var(--subtle); }.career-timeline article { max-width: 43rem; }.career-timeline h3 { font-size: clamp(1.35rem, 2.3vw, 1.9rem); letter-spacing: -.045em; margin: .45rem 0 .7rem; }.career-timeline article > p:not(.career-company) { color: var(--muted); line-height: 1.6; margin-bottom: .8rem; }.career-timeline ul { color: var(--muted); display: grid; gap: .35rem; line-height: 1.5; margin: 0; padding-left: 1.1rem; }.career-aside { display: grid; gap: 1rem; position: sticky; top: calc(var(--header-height) + 1rem); }.career-card { background: var(--surface); border: 1px solid var(--line); border-radius: .8rem; padding: 1.25rem; }.career-card .eyebrow { margin-bottom: 1.15rem; }.career-card dl { margin: 0; }.career-card dl div + div { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }.career-card dt { color: var(--ink); font-size: .88rem; font-weight: 750; }.career-card dd { color: var(--muted); font-size: .86rem; line-height: 1.55; margin: .35rem 0 0; }
.approach { border-top: 1px solid var(--line); padding-top: 8rem; }.principles { counter-reset: principle; list-style: none; margin: 3rem 0 0; padding: 0; }.principles li { border-top: 1px solid var(--line); display: grid; gap: 2rem; grid-template-columns: 5rem 1fr; padding: 1.5rem 0; }.principles li:last-child { border-bottom: 1px solid var(--line); }.principles li > span { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }.principles h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); letter-spacing: -.04em; margin-bottom: .5rem; }.principles p { color: var(--muted); line-height: 1.6; margin-bottom: 0; max-width: 38rem; }
.talk { padding-bottom: 8rem; }.talk-card { background: linear-gradient(120deg, #183a43, #202648 56%, #2b1e4d); border: 1px solid color-mix(in srgb, var(--violet) 40%, var(--line)); border-radius: 1rem; padding: clamp(2rem, 6vw, 5rem); }.talk-card .eyebrow { color: #bdf8db; }.talk-card h2 { font-size: clamp(2.3rem, 5.5vw, 5.5rem); letter-spacing: -.07em; line-height: .94; margin-bottom: 1.2rem; max-width: 12ch; }.talk-card p:not(.eyebrow) { color: #d5dcf3; line-height: 1.7; max-width: 43rem; }.talk-card .button { margin-top: 1rem; }
.now { align-items: end; border-top: 1px solid var(--line); display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; padding-bottom: 8rem; padding-top: 8rem; }.now h2 { margin-bottom: 0; max-width: 13ch; }.now .text-link { margin-top: -1rem; }
.contact { border-top: 1px solid var(--line); display: grid; gap: 4rem; grid-template-columns: .8fr 1.2fr; padding-bottom: 8rem; padding-top: 8rem; }.contact h2 { font-size: clamp(2rem, 3.8vw, 4rem); letter-spacing: -.055em; line-height: 1.04; margin-bottom: 1.4rem; max-width: 12ch; }.contact-intro > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; max-width: 32rem; }.contact-form { background: var(--surface); border: 1px solid var(--line); border-radius: .8rem; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; padding: clamp(1.2rem, 3vw, 2rem); }.form-row { display: grid; gap: .45rem; }.form-row--wide, .form-footer { grid-column: 1 / -1; }.form-row label { color: var(--muted); font-size: .8rem; font-weight: 700; }.form-row label span { color: var(--accent); }.form-row input, .form-row textarea { background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--line); border-radius: .4rem; color: var(--ink); line-height: 1.5; padding: .7rem .8rem; resize: vertical; }.form-row input:focus, .form-row textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); outline: none; }.form-footer { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-top: .35rem; }.form-footer p { color: var(--subtle); font-size: .72rem; line-height: 1.5; margin: 0; max-width: 22rem; }.honeypot { height: 0; opacity: 0; overflow: hidden; position: absolute; width: 0; }.thanks-page { align-items: center; display: grid; min-height: 100vh; }.thanks { max-width: 50rem; }.thanks h1 { max-width: 12ch; }.thanks p:not(.eyebrow) { color: var(--muted); font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; }
.site-footer { align-items: center; border-top: 1px solid var(--line); color: var(--muted); display: grid; font-size: .82rem; gap: 1rem; grid-template-columns: 1fr auto auto; padding-bottom: 2rem; padding-top: 2rem; }.site-footer p { margin: 0; }.site-footer div { display: flex; gap: 1rem; }.site-footer a:hover { color: var(--accent); }
.toast { background: var(--ink); border-radius: .4rem; bottom: 1.5rem; color: var(--bg); opacity: 0; padding: .7rem .9rem; pointer-events: none; position: fixed; right: 1.5rem; transform: translateY(1rem); transition: opacity .2s, transform .2s; z-index: 20; }.toast.is-visible { opacity: 1; transform: translateY(0); }
[data-reveal] { opacity: 1; transform: none; }.reveal-ready [data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--delay, 0ms); }.reveal-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) { .site-header { padding-inline: 1rem; }.menu-toggle { display: grid; gap: .22rem; padding: .5rem; }.menu-toggle span:not(.sr-only) { background: currentColor; height: 1px; width: 1rem; }.site-nav { background: color-mix(in srgb, var(--bg) 97%, transparent); border: 1px solid var(--line); border-radius: .6rem; display: none; flex-direction: column; left: 1rem; padding: 1rem; position: absolute; right: 1rem; top: calc(var(--header-height) - .25rem); }.site-nav.is-open { display: flex; }.site-nav a::after { display: none; }.theme-toggle { margin-left: auto; margin-right: .6rem; }.hero { display: block; padding-bottom: 2.5rem; padding-top: calc(var(--header-height) + 4rem); }.signal-panel { margin-top: 3rem; min-height: 24rem; }.signal-panel__top { align-items: flex-start; flex-direction: column; gap: .6rem; }.signal-panel__status { justify-content: space-between; width: 100%; }.signal-map { height: 19rem; }.signal-node { transform: scale(.78); transform-origin: top left; }.signal-node:hover { transform: scale(.78); }.source { left: 1%; }.relay { left: 34%; }.partner { right: -2%; }.callback { right: -2%; }.hud { left: 34%; }.hero-proof { margin-top: 2.5rem; }.hero-proof div { padding-right: .5rem; }.hero-proof div + div { padding-left: .5rem; }.bio, .statement, .career, .now, .contact { display: block; padding-bottom: 5rem; padding-top: 5rem; }.bio-label { margin-bottom: 2rem; }.bio-facts { border-left: 0; border-top: 1px solid var(--line); margin-top: 2rem; padding-left: 0; padding-top: 1rem; }.statement .eyebrow { margin-bottom: 2rem; }.work, .approach { padding-bottom: 5rem; }.section-heading { align-items: start; display: block; }.section-note { margin-top: 1rem; }.project-grid { grid-template-columns: 1fr; }.project-card--feature { min-height: 24rem; }.career-layout { display: block; }.career-timeline > li { display: block; }.career-timeline article { margin-top: .8rem; }.career-aside { margin-top: 1.5rem; position: static; }.approach { padding-top: 5rem; }.principles li { gap: 1rem; grid-template-columns: 2.5rem 1fr; }.talk { padding-bottom: 5rem; }.now > p { margin-top: 2rem; }.contact h2 { max-width: 14ch; }.contact-form { gap: .9rem; grid-template-columns: 1fr; margin-top: 2rem; padding: 1rem; }.form-row--wide, .form-footer { grid-column: auto; }.form-footer { align-items: stretch; flex-direction: column; gap: .85rem; margin-top: .15rem; }.form-footer p { max-width: none; }.form-footer .button { width: 100%; }.site-footer { grid-template-columns: 1fr; }.site-footer div { order: -1; } }
@media (hover: none) { .cursor-glow { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } .reveal-ready [data-reveal] { opacity: 1; transform: none; } }

/* Account access */
.site-nav .nav-login { border: 1px solid var(--line); border-radius: 99px; color: var(--ink); margin-block: -.45rem; padding: .45rem .7rem; }
.site-nav .nav-login::after { display: none; }
.site-nav .nav-login:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: var(--accent); color: var(--accent); }
.account-page { min-height: 100vh; }
.account-shell { display: grid; grid-template-rows: auto 1fr auto; margin-inline: auto; max-width: 86rem; min-height: 100vh; padding-inline: clamp(1.25rem, 4vw, 4rem); }
.account-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: var(--header-height); }
.account-header__actions { align-items: center; display: flex; gap: 1rem; }
.account-back { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.account-back:hover { color: var(--accent); }
.account-grid { align-items: stretch; display: grid; grid-template-columns: 1.08fr .92fr; padding-block: clamp(3rem, 9vw, 8rem); }
.account-intro { border-right: 1px solid var(--line); padding: clamp(1.5rem, 5vw, 4.5rem) clamp(1.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3rem) 0; }
.account-intro h1 { font-size: clamp(3.1rem, 6.5vw, 7rem); max-width: 8.4ch; }
.account-intro > p:not(.eyebrow) { color: var(--muted); line-height: 1.72; max-width: 35rem; }
.access-steps { border-top: 1px solid var(--line); list-style: none; margin: 3rem 0 0; padding: 0; }
.access-steps li { align-items: start; border-bottom: 1px solid var(--line); display: grid; gap: 1.1rem; grid-template-columns: 2.2rem 1fr; padding: 1rem 0; }
.access-steps span { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; font-weight: 800; }
.access-steps strong { display: block; font-size: .92rem; }
.access-steps small { color: var(--muted); display: block; line-height: 1.45; margin-top: .25rem; }
.login-card { align-self: center; background: linear-gradient(145deg, color-mix(in srgb, var(--surface-solid) 85%, #24446b), var(--surface)); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 24px 70px rgba(0, 0, 0, .22); margin-left: clamp(1.5rem, 6vw, 6rem); max-width: 29rem; padding: clamp(1.5rem, 4vw, 3.3rem); position: relative; }
.login-card::before { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 50%; content: ""; height: 13rem; position: absolute; right: -4rem; top: -4rem; width: 13rem; }
.login-card > * { position: relative; z-index: 1; }
.login-card .eyebrow { margin-top: 1.5rem; }
.login-card h2 { font-size: clamp(2.1rem, 4vw, 3.5rem); letter-spacing: -.07em; line-height: .92; margin-bottom: 1.2rem; max-width: 10ch; }
.login-card > p:not(.eyebrow):not(.login-note) { color: var(--muted); line-height: 1.65; }
.login-card__mark { align-items: center; background: var(--accent); border-radius: .65rem; color: #08261a; display: grid; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; font-weight: 800; height: 2.5rem; letter-spacing: .06em; place-items: center; width: 2.5rem; }
.provider-button { align-items: center; background: color-mix(in srgb, var(--surface-solid) 88%, transparent); border: 1px solid var(--line); border-radius: .5rem; color: var(--ink); display: flex; font-size: .82rem; font-weight: 750; gap: .65rem; justify-content: start; margin-top: 1.7rem; padding: .85rem .9rem; text-align: left; width: 100%; }
.provider-button:disabled { cursor: not-allowed; opacity: .72; }
.provider-button__icon { border-right: 1px solid var(--line); font-size: 1rem; padding-right: .65rem; }
.provider-button__status { color: var(--subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; margin-left: auto; text-transform: uppercase; }
.login-note { color: var(--subtle); font-size: .73rem; line-height: 1.5; margin: .75rem 0 1.5rem; }
.login-card .button { width: 100%; }
.account-footer { align-items: center; border-top: 1px solid var(--line); color: var(--subtle); display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .67rem; justify-content: space-between; letter-spacing: .03em; padding-block: 1.4rem; text-transform: uppercase; }
.account-footer a { color: var(--accent); font-weight: 800; }

@media (max-width: 760px) {
  .site-nav .nav-login { margin: 0; text-align: center; }
  .account-shell { padding-inline: 1rem; }
  .account-grid { display: block; padding-block: 2rem; }
  .account-intro { border-bottom: 1px solid var(--line); border-right: 0; padding: 2rem 0 3rem; }
  .login-card { margin: 2rem 0 0; max-width: none; }
  .account-footer { gap: 1rem; line-height: 1.4; }
}

.access-form { display: grid; gap: .65rem; margin-top: 1.7rem; }
.access-form label { color: var(--muted); font-size: .76rem; font-weight: 700; }
.access-form input { background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--line); border-radius: .4rem; color: var(--ink); line-height: 1.5; padding: .7rem .8rem; }
.access-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); outline: none; }
.access-form .login-note { margin: .15rem 0 .55rem; }
.private-workspace { align-items: center; display: grid; gap: clamp(2rem, 8vw, 7rem); grid-template-columns: .9fr 1.1fr; padding-block: clamp(3rem, 10vw, 8rem); }
.private-workspace > div > h1 { font-size: clamp(3rem, 6vw, 6.5rem); max-width: 8ch; }
.private-workspace > div > p:not(.eyebrow) { color: var(--muted); line-height: 1.72; max-width: 33rem; }
.file-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 24px 70px rgba(0, 0, 0, .16); min-height: 22rem; padding: clamp(1.25rem, 3vw, 2rem); }
.file-panel__heading { align-items: center; border-bottom: 1px solid var(--line); color: var(--subtle); display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; justify-content: space-between; letter-spacing: .05em; padding-bottom: .9rem; text-transform: uppercase; }
.file-browser__nav { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.file-browser__nav button { background: transparent; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.file-browser__nav button:hover { text-decoration: underline; }
.file-browser__nav button[disabled] { color: var(--subtle); cursor: default; text-decoration: none; }
.file-browser__separator { color: var(--subtle); font-size: .8rem; }
.file-status { color: var(--muted); font-size: .9rem; line-height: 1.6; margin: 2rem 0; }
.private-file-list { display: grid; gap: .7rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.private-file-list li { align-items: center; border: 1px solid var(--line); border-radius: .6rem; display: flex; gap: 1rem; justify-content: space-between; padding: .85rem; }
.private-file-list strong { display: block; font-size: .9rem; overflow-wrap: anywhere; }
.private-file-list small { color: var(--subtle); display: block; font-size: .72rem; margin-top: .25rem; }
.private-file-list .button { flex: 0 0 auto; font-size: .66rem; padding: .65rem .75rem; }
.private-file-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .45rem; justify-content: flex-end; }
.pdf-preview { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1.25rem; }
.pdf-preview__heading { align-items: center; display: flex; font-size: .8rem; font-weight: 700; gap: 1rem; justify-content: space-between; margin-bottom: .8rem; }
.pdf-preview__heading .button { font-size: .66rem; padding: .55rem .7rem; }
.pdf-preview iframe { background: #fff; border: 1px solid var(--line); border-radius: .55rem; display: block; height: min(58vh, 42rem); width: 100%; }
.account-logout { background: transparent; border: 0; color: var(--muted); padding: 0; }
.account-logout:hover { color: var(--accent); }

@media (max-width: 760px) {
  .private-workspace { display: block; padding-block: 3rem; }
  .file-panel { margin-top: 2rem; }
  .private-file-list li { align-items: stretch; flex-direction: column; }
  .private-file-list .button { width: 100%; }
  .private-file-actions { justify-content: stretch; }
}