:root,
[data-theme="vaknir"] {
  color-scheme: dark;
  --color-base-100: oklch(17% 0.017 255);
  --color-base-200: oklch(21% 0.018 255);
  --color-base-300: oklch(28% 0.018 255);
  --color-base-content: oklch(94% 0.012 92);
  --color-primary: oklch(82% 0.184 138);
  --color-primary-content: oklch(18% 0.025 145);
  --color-secondary: oklch(73% 0.13 220);
  --color-secondary-content: oklch(17% 0.02 245);
  --color-accent: oklch(76% 0.14 70);
  --color-accent-content: oklch(18% 0.02 70);
  --color-neutral: oklch(31% 0.018 255);
  --color-neutral-content: oklch(94% 0.012 92);
  --color-info: oklch(72% 0.13 230);
  --color-info-content: oklch(18% 0.02 240);
  --color-success: oklch(82% 0.184 138);
  --color-success-content: oklch(18% 0.025 145);
  --color-warning: oklch(83% 0.16 80);
  --color-warning-content: oklch(22% 0.035 70);
  --color-error: oklch(70% 0.19 25);
  --color-error-content: oklch(96% 0.012 25);
  --radius-selector: 2rem;
  --radius-field: 0.35rem;
  --radius-box: 0.65rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

[data-theme="vaknir-light"] {
  color-scheme: light;
  --color-base-100: oklch(98% 0.009 120);
  --color-base-200: oklch(95% 0.012 120);
  --color-base-300: oklch(85% 0.018 130);
  --color-base-content: oklch(23% 0.023 255);
  --color-primary: oklch(43% 0.12 145);
  --color-primary-content: oklch(99% 0.005 120);
  --color-secondary: oklch(43% 0.09 230);
  --color-secondary-content: oklch(99% 0.005 120);
  --color-accent: oklch(46% 0.12 65);
  --color-accent-content: oklch(99% 0.005 120);
  --color-neutral: oklch(88% 0.016 130);
  --color-neutral-content: oklch(23% 0.023 255);
  --color-info: oklch(43% 0.09 230);
  --color-info-content: oklch(99% 0.005 120);
  --color-success: oklch(43% 0.12 145);
  --color-success-content: oklch(99% 0.005 120);
  --color-warning: oklch(48% 0.12 65);
  --color-warning-content: oklch(99% 0.005 120);
  --color-error: oklch(45% 0.17 28);
  --color-error-content: oklch(99% 0.005 120);
}
.theme-toggle { width: 2.75rem; height: 2.75rem; min-height: 2.75rem; color: var(--color-base-content); }
.theme-toggle .icon { width: 1.15rem; height: 1.15rem; }
.theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.theme-moon, [data-theme="vaknir-light"] .theme-sun { display: none; }
[data-theme="vaknir-light"] .theme-moon { display: block; }
[data-theme="vaknir-light"] .identity-console { box-shadow: 0 24px 65px rgba(28,50,38,.1); }
[data-theme="vaknir-light"] .wallpaper-horizon { opacity: .55; box-shadow: inset 3rem 2rem 8rem color-mix(in oklab, var(--color-secondary) 7%, transparent), inset -4rem -3rem 9rem rgba(70,110,70,.08), 0 0 9rem color-mix(in oklab, var(--color-primary) 5%, transparent); }
[data-theme="vaknir-light"] :is(.tag-line, .signal-row, .console-topline, .console-footer, .fit-header, .assistant-messages .chat-header, .assistant-boundary) { color: color-mix(in oklab, var(--color-base-content) 74%, var(--color-base-100)); }
[data-theme="vaknir-light"] :is(.hero-copy, .project-main > p, .project-proof, .section-heading > p, .sticky-copy p, .process-list p, .agent-intro, .endpoint-list span, .fit-note, .footer, .proof-cell span) { color: color-mix(in oklab, var(--color-base-content) 80%, var(--color-base-100)); }
[data-theme="vaknir-light"] .assistant-panel { box-shadow: 0 20px 65px rgba(28,50,38,.18); }
[data-theme="vaknir-light"] .assistant-launcher { box-shadow: 0 8px 28px rgba(28,70,38,.2); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  --nav-height: 4.5rem;
  --wallpaper-x: 0px;
  --wallpaper-y: 0px;
  --wallpaper-x-soft: 0px;
  --wallpaper-y-soft: 0px;
  --wallpaper-scroll: 0px;
  --wallpaper-scroll-soft: 0px;
  margin: 0;
  min-height: 100vh;
  padding-top: calc(var(--nav-height) + env(safe-area-inset-top));
  font-family: "Manrope", sans-serif;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--color-base-300) 28%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--color-base-300) 18%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
  background-attachment: fixed;
}

.live-wallpaper { position: fixed; inset: calc(var(--nav-height) + env(safe-area-inset-top)) 0 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; background: radial-gradient(circle at 78% 46%, color-mix(in oklab, var(--color-primary) 5%, transparent), transparent 31%); }
.live-wallpaper::before { content: ""; position: absolute; inset: -20%; opacity: .28; background: linear-gradient(115deg, transparent 32%, color-mix(in oklab, var(--color-secondary) 9%, transparent) 48%, transparent 63%); transform: translate3d(var(--wallpaper-x-soft), var(--wallpaper-y-soft), 0) rotate(-4deg); animation: wallpaper-sweep 18s ease-in-out infinite alternate; }
.wallpaper-horizon { position: absolute; width: min(78vw, 70rem); aspect-ratio: 1; right: max(-24vw, -17rem); top: clamp(5rem, 18vh, 12rem); border-radius: 50%; opacity: .9; background: radial-gradient(circle at 36% 30%, color-mix(in oklab, var(--color-secondary) 22%, transparent) 0 4%, transparent 18%), radial-gradient(circle at 38% 36%, color-mix(in oklab, var(--color-primary) 36%, transparent) 0, color-mix(in oklab, var(--color-primary) 12%, transparent) 34%, transparent 66%), linear-gradient(145deg, color-mix(in oklab, var(--color-primary) 21%, var(--color-base-100)), color-mix(in oklab, var(--color-secondary) 10%, var(--color-base-100)) 42%, var(--color-base-100) 74%); box-shadow: inset 3rem 2rem 8rem color-mix(in oklab, var(--color-secondary) 9%, transparent), inset -4rem -3rem 9rem rgba(0,0,0,.52), 0 0 9rem color-mix(in oklab, var(--color-primary) 10%, transparent); transform: translate3d(var(--wallpaper-x), calc(var(--wallpaper-y) + var(--wallpaper-scroll)), 0); animation: wallpaper-breathe 13s ease-in-out infinite alternate; will-change: transform; }
.wallpaper-horizon::before { content: ""; position: absolute; inset: 7%; border: 1px solid color-mix(in oklab, var(--color-primary) 18%, transparent); border-radius: inherit; opacity: .65; box-shadow: inset 0 0 4rem color-mix(in oklab, var(--color-primary) 8%, transparent); }
.wallpaper-horizon::after { content: ""; position: absolute; inset: 18%; border-radius: inherit; opacity: .32; background: repeating-radial-gradient(circle at 42% 39%, transparent 0 1.15rem, color-mix(in oklab, var(--color-primary) 12%, transparent) 1.2rem 1.25rem); mask-image: linear-gradient(135deg, black, transparent 68%); }
.wallpaper-orbit { position: absolute; right: max(-15vw, -9rem); top: clamp(1rem, 10vh, 7rem); width: min(72vw, 64rem); aspect-ratio: 1; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent); opacity: .8; transform: translate3d(var(--wallpaper-x-soft), calc(var(--wallpaper-y-soft) + var(--wallpaper-scroll-soft)), 0) rotate(-16deg); }
.wallpaper-orbit::after { content: ""; position: absolute; width: .42rem; height: .42rem; left: 16%; top: 21%; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 1.4rem color-mix(in oklab, var(--color-primary) 72%, transparent); }
.wallpaper-orbit-a { animation: wallpaper-orbit 38s linear infinite; }
.wallpaper-orbit-b { right: max(-5vw, -2rem); top: clamp(9rem, 24vh, 17rem); width: min(54vw, 48rem); border-color: color-mix(in oklab, var(--color-secondary) 10%, transparent); transform: translate3d(var(--wallpaper-x-soft), calc(var(--wallpaper-y-soft) + var(--wallpaper-scroll-soft)), 0) rotate(22deg); animation: wallpaper-orbit-reverse 46s linear infinite; }
.wallpaper-orbit-b::after { left: auto; right: 9%; top: 58%; width: .3rem; height: .3rem; background: var(--color-secondary); box-shadow: 0 0 1.2rem color-mix(in oklab, var(--color-secondary) 65%, transparent); }
.wallpaper-glint { position: absolute; width: 24rem; height: 1px; right: 15%; top: 28%; opacity: .24; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-primary) 70%, white 10%), transparent); transform: translate3d(var(--wallpaper-x), var(--wallpaper-y), 0) rotate(-38deg); filter: blur(.2px); animation: wallpaper-glint 9s ease-in-out infinite alternate; }
.wallpaper-glint-b { width: 14rem; right: 4%; top: 66%; opacity: .15; transform: translate3d(var(--wallpaper-x-soft), var(--wallpaper-y-soft), 0) rotate(24deg); animation-delay: -4s; }
.wallpaper-grain { position: absolute; inset: 0; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
main, .footer { position: relative; z-index: 1; }

@keyframes wallpaper-breathe { from { scale: .985; filter: saturate(.92); } to { scale: 1.025; filter: saturate(1.08); } }
@keyframes wallpaper-orbit { to { rotate: 360deg; } }
@keyframes wallpaper-orbit-reverse { to { rotate: -360deg; } }
@keyframes wallpaper-sweep { from { translate: -3% -2%; } to { translate: 4% 3%; } }
@keyframes wallpaper-glint { from { opacity: .08; translate: -1.5rem 1rem; } to { opacity: .3; translate: 1.5rem -1rem; } }

a { transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--color-primary); color: var(--color-primary-content); padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; min-height: calc(var(--nav-height) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--color-base-300); background: var(--color-base-100); box-shadow: 0 10px 32px color-mix(in oklab, var(--color-base-100) 72%, transparent); isolation: isolate; }
.navbar { min-height: 4.5rem; }
.brand-mark { display: flex; align-items: center; gap: .75rem; font-weight: 700; letter-spacing: -.02em; }
.brand-glyph { display: inline-grid; height: 2.15rem; width: 2.15rem; place-items: center; border: 1px solid var(--color-primary); color: var(--color-primary); font: 500 .76rem/1 "DM Mono", monospace; }
.nav-links { display: flex; gap: 2rem; color: color-mix(in oklab, var(--color-base-content) 68%, transparent); font-size: .88rem; }
.nav-links a:hover { color: var(--color-base-content); }
.status-line { align-items: center; gap: .55rem; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: .75rem; }

.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 38rem; height: 38rem; right: -12rem; top: -15rem; background: radial-gradient(circle, color-mix(in oklab, var(--color-primary) 15%, transparent), transparent 64%); pointer-events: none; }
.hero-content { max-width: 80rem; }
.eyebrow { margin-bottom: 1.25rem; color: var(--color-primary); font: 500 .78rem/1.4 "DM Mono", monospace; letter-spacing: .14em; }
.display-title { max-width: 13ch; margin: 0; font-size: clamp(3.2rem, 7.2vw, 6.9rem); font-weight: 600; line-height: .97; letter-spacing: -.072em; }
.display-title span { color: var(--color-primary); }
.hero-copy { max-width: 42rem; margin-top: 2rem; color: color-mix(in oklab, var(--color-base-content) 68%, transparent); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.75; }
.signal-row { display: flex; flex-wrap: wrap; gap: .65rem 1.4rem; margin-top: 2.5rem; color: color-mix(in oklab, var(--color-base-content) 52%, transparent); font: 400 .72rem/1.4 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.signal-row span::before { content: "+"; margin-right: .4rem; color: var(--color-primary); }

.identity-console { overflow: hidden; border: 1px solid var(--color-base-300); background: color-mix(in oklab, var(--color-base-200) 84%, transparent); box-shadow: 0 42px 100px rgba(0,0,0,.34); transform: rotate(1deg); }
.console-topline, .console-footer { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font: 400 .68rem/1 "DM Mono", monospace; }
.console-topline { border-bottom: 1px solid var(--color-base-300); }
.console-footer { justify-content: space-between; border-top: 1px solid var(--color-base-300); }
.console-dots { display: flex; gap: .3rem; }
.console-dots i { display: block; width: .45rem; height: .45rem; border-radius: 999px; background: var(--color-base-300); }
.console-live { margin-left: auto; color: var(--color-success); }
.agent-code { min-height: 26rem; border-radius: 0; background: transparent; padding-block: 1.5rem; color: color-mix(in oklab, var(--color-base-content) 75%, transparent); font-size: .78rem; }
.agent-code pre::before { color: color-mix(in oklab, var(--color-base-content) 24%, transparent); }
.agent-code .code-focus { background: color-mix(in oklab, var(--color-primary) 9%, transparent); color: var(--color-primary); }
.copy-control { cursor: pointer; border: 0; background: transparent; color: var(--color-primary); font: inherit; }
.copy-control:hover { text-decoration: underline; }

.proof-strip { border-block: 1px solid var(--color-base-300); background: color-mix(in oklab, var(--color-base-200) 78%, transparent); }
.proof-cell { display: flex; min-height: 9rem; flex-direction: column; justify-content: center; gap: .35rem; border-right: 1px solid var(--color-base-300); padding: 1.5rem; }
.proof-cell:first-child { border-left: 1px solid var(--color-base-300); }
.proof-cell strong { color: var(--color-primary); font: 500 2.15rem/1 "DM Mono", monospace; }
.proof-cell span { max-width: 15rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: .78rem; line-height: 1.45; }

.section-shell { padding-block: clamp(6rem, 10vw, 10rem); }
.section-heading { display: grid; gap: 2rem; align-items: end; margin-bottom: 4rem; }
.section-heading h2, .sticky-copy h2, .agent-section h2 { max-width: 13ch; margin: 0; font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 600; line-height: 1.02; letter-spacing: -.055em; }
.section-heading > p { max-width: 34rem; margin: 0; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); line-height: 1.75; }

.project-list { border-top: 1px solid var(--color-base-300); }
.project-row { display: grid; gap: 1.5rem; align-items: start; border-bottom: 1px solid var(--color-base-300); padding-block: 2.25rem; }
.project-row:hover { background: color-mix(in oklab, var(--color-primary) 3.5%, transparent); }
.project-index { color: var(--color-primary); font: 500 .75rem/1.5 "DM Mono", monospace; }
.project-main h3 { margin: 0; font-size: 1.75rem; letter-spacing: -.035em; }
.project-main > p { max-width: 43rem; margin: .9rem 0 1.25rem; color: color-mix(in oklab, var(--color-base-content) 66%, transparent); line-height: 1.68; }
.tag-line { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: color-mix(in oklab, var(--color-base-content) 40%, transparent); font: 400 .7rem/1.4 "DM Mono", monospace; text-transform: uppercase; }
.tag-line span::before { content: "/"; margin-right: .25rem; color: var(--color-primary); }
.project-proof { max-width: 23rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: .82rem; line-height: 1.62; }
.project-proof > span { display: block; margin-bottom: .6rem; color: var(--color-base-content); font: 500 .65rem/1 "DM Mono", monospace; letter-spacing: .1em; }
.project-arrow { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border: 1px solid var(--color-base-300); color: var(--color-primary); }
.project-arrow .icon { width: 1.1rem; height: 1.1rem; }
.project-arrow:hover { transform: translate(3px, -3px); border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 8%, transparent); }

.approach-section { background: var(--color-base-200); border-block: 1px solid var(--color-base-300); }
.sticky-copy p { max-width: 31rem; margin-top: 1.5rem; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); line-height: 1.72; }
.process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-base-300); }
.process-list li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; border-bottom: 1px solid var(--color-base-300); padding-block: 1.75rem; }
.process-list > li > span { padding-top: .3rem; color: var(--color-primary); font: 500 .72rem/1 "DM Mono", monospace; }
.process-list h3 { margin: 0 0 .55rem; font-size: 1.15rem; }
.process-list p { max-width: 38rem; margin: 0; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); line-height: 1.65; }

.agent-section { position: relative; overflow: hidden; }
.agent-section::after { content: "//"; position: absolute; right: -1rem; bottom: -5rem; z-index: -1; color: color-mix(in oklab, var(--color-primary) 6%, transparent); font: 500 28rem/1 "DM Mono", monospace; }
.agent-grid { display: grid; gap: 5rem; align-items: center; }
.agent-intro { max-width: 42rem; margin-block: 1.5rem 2.2rem; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); line-height: 1.75; }
.endpoint-list { border-top: 1px solid var(--color-base-300); }
.endpoint-list a { display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: 1rem; border-bottom: 1px solid var(--color-base-300); padding-block: 1rem; }
.endpoint-list a:hover { padding-left: .5rem; color: var(--color-primary); }
.endpoint-list code { color: var(--color-primary); font-family: "DM Mono", monospace; font-size: .78rem; }
.endpoint-list span { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: .85rem; }
.endpoint-list .icon { width: 1rem; height: 1rem; color: color-mix(in oklab, var(--color-base-content) 42%, transparent); }
.endpoint-list a:hover .icon { color: var(--color-primary); transform: translate(2px, -2px); }
.fit-panel { border-color: var(--color-base-300); background: var(--color-base-200); box-shadow: 20px 20px 0 color-mix(in oklab, var(--color-primary) 8%, transparent); }
.fit-panel .card-body { padding: clamp(1.5rem, 4vw, 2.5rem); }
.fit-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; color: color-mix(in oklab, var(--color-base-content) 45%, transparent); font: 400 .68rem/1 "DM Mono", monospace; }
.fit-panel h3 { max-width: 16ch; font-size: 1.8rem; line-height: 1.15; }
.fit-panel ul { margin: 1.5rem 0; padding: 0; list-style: none; border-top: 1px solid var(--color-base-300); }
.fit-panel li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--color-base-300); padding-block: .9rem; color: color-mix(in oklab, var(--color-base-content) 72%, transparent); font-size: .88rem; }
.fit-panel li span { color: var(--color-primary); font: 500 .72rem/1.5 "DM Mono", monospace; }
.fit-note { margin-block: 1.6rem; border-left: 2px solid var(--color-warning); padding-left: 1rem; color: color-mix(in oklab, var(--color-base-content) 56%, transparent); font-size: .78rem; line-height: 1.6; }
.fit-note b { display: block; color: var(--color-base-content); }
.footer { background: color-mix(in oklab, var(--color-base-200) 90%, transparent); color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: .78rem; }

/* Floating profile chat: compact launcher and anchored conversation. */
.assistant-launcher { position: fixed; right: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom)); z-index: 900; width: 3.6rem; height: 3.6rem; min-height: 3.6rem; padding: 0; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--color-primary) 64%, white 10%); box-shadow: 0 10px 32px rgba(0,0,0,.36); transition: transform .18s ease, box-shadow .18s ease; }
.assistant-launcher:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,.45); }
.assistant-launcher:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 5px; }
.assistant-launcher .icon { width: 1.5rem; height: 1.5rem; }
.assistant-launcher-label { position: absolute; right: calc(100% + .75rem); padding: .55rem .8rem; border: 1px solid var(--color-base-300); border-radius: 1rem 1rem .3rem 1rem; background: var(--color-base-100); color: var(--color-base-content); font-size: .78rem; font-weight: 500; white-space: nowrap; box-shadow: 0 6px 22px rgba(0,0,0,.2); }
.profile-assistant { z-index: 1100; padding: 1.25rem; padding-bottom: calc(5.6rem + env(safe-area-inset-bottom)); background: transparent; }
.profile-assistant::backdrop { background: rgba(3,7,12,.18); }
.profile-assistant.modal-open, .profile-assistant[open] { display: grid; align-items: end; justify-items: end; }
.assistant-panel { display: grid; grid-template-rows: auto minmax(0,1fr) auto auto auto; width: min(100%, 25rem); max-width: 25rem; height: min(37rem, calc(100dvh - 7rem - env(safe-area-inset-bottom))); max-height: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 1.2rem; background: var(--color-base-100); box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.assistant-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.3rem 1.15rem; border-bottom: 1px solid var(--color-base-300); }
.assistant-header h2 { margin: .35rem 0 0; font-size: 1.35rem; letter-spacing: -.035em; }
.assistant-kicker { display: flex; align-items: center; gap: .5rem; color: var(--color-primary); font: 500 .66rem/1 "DM Mono", monospace; letter-spacing: .11em; }
.assistant-messages { overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 1.15rem .5rem; scrollbar-color: var(--color-base-300) transparent; }
.assistant-messages .chat { margin-bottom: 1rem; }
.assistant-messages .chat-header { margin-bottom: .35rem; color: color-mix(in oklab, var(--color-base-content) 46%, transparent); font: 400 .63rem/1.2 "DM Mono", monospace; }
.assistant-messages .chat-bubble { max-width: 88%; border: 1px solid var(--color-base-300); border-radius: .5rem; background: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 86%, transparent); font-size: .86rem; line-height: 1.62; white-space: pre-wrap; }
.assistant-messages .chat-end .chat-bubble { border-color: color-mix(in oklab, var(--color-primary) 36%, var(--color-base-300)); background: color-mix(in oklab, var(--color-primary) 11%, var(--color-base-200)); }
.assistant-messages .chat-error .chat-bubble { border-color: color-mix(in oklab, var(--color-error) 48%, var(--color-base-300)); }
.assistant-suggestions { display: flex; gap: .5rem; overflow-x: auto; padding: .75rem 1.15rem; scrollbar-width: none; }
.assistant-suggestions::-webkit-scrollbar { display: none; }
.assistant-suggestions .btn { flex: none; height: 2rem; min-height: 2rem; border-color: var(--color-base-300); color: color-mix(in oklab, var(--color-base-content) 72%, transparent); font-size: .68rem; font-weight: 500; }
.assistant-composer { display: grid; grid-template-columns: 1fr auto; gap: .6rem; padding: .8rem 1.15rem .55rem; border-top: 1px solid var(--color-base-300); }
.assistant-composer .input { width: 100%; background: var(--color-base-200); font-size: .8rem; }
.assistant-composer .input:focus { outline-color: color-mix(in oklab, var(--color-primary) 55%, transparent); }
.assistant-boundary { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .35rem 1rem calc(.7rem + env(safe-area-inset-bottom)); color: color-mix(in oklab, var(--color-base-content) 42%, transparent); font: 400 .61rem/1.3 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .04em; }
.assistant-boundary .icon { color: var(--color-primary); }
.assistant-thinking { display: inline-flex; gap: .25rem; align-items: center; min-height: 1.25rem; }
.assistant-thinking i { width: .3rem; height: .3rem; border-radius: 99px; background: currentColor; animation: assistant-pulse .9s infinite ease-in-out; }
.assistant-thinking i:nth-child(2) { animation-delay: .13s; }
.assistant-thinking i:nth-child(3) { animation-delay: .26s; }
@keyframes assistant-pulse { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }

.reveal { animation: rise-in .7s both cubic-bezier(.2,.7,.2,1); }
.reveal-delay-1 { animation-delay: .08s; }
.reveal-delay-2 { animation-delay: .16s; }
.reveal-delay-3 { animation-delay: .24s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 768px) {
  .section-heading { grid-template-columns: 1fr .7fr; }
  .project-row { grid-template-columns: 3rem minmax(0,1.5fr) minmax(15rem,.7fr) 2rem; }
}
@media (min-width: 1024px) {
  .sticky-copy { position: sticky; top: 8rem; align-self: start; }
  .agent-grid { grid-template-columns: 1.14fr .86fr; }
}
@media (max-width: 767px) {
  .display-title { font-size: clamp(3rem, 15vw, 4.6rem); }
  .identity-console { transform: none; }
  .agent-code { font-size: .68rem; }
  .proof-cell { min-height: 7.5rem; border-bottom: 1px solid var(--color-base-300); }
  .proof-cell:nth-child(odd) { border-left: 1px solid var(--color-base-300); }
  .project-arrow { display: none; }
  .endpoint-list a { grid-template-columns: 6rem 1fr auto; }
  .footer { gap: 1.5rem; }
  .assistant-launcher { right: .8rem; bottom: calc(.8rem + env(safe-area-inset-bottom)); }
  .profile-assistant { padding: .8rem; padding-bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
  .assistant-panel { width: min(100%, 25rem); height: min(35rem, calc(100dvh - 6.4rem - env(safe-area-inset-bottom))); }
  .assistant-header { padding: 1rem; }
  .assistant-composer .input { font-size: 1rem; min-width: 0; }
  .live-wallpaper { opacity: .72; }
  .wallpaper-horizon { width: 118vw; right: -55vw; top: 10rem; }
  .wallpaper-orbit { width: 108vw; right: -45vw; }
  .wallpaper-orbit-b { width: 82vw; right: -28vw; top: 17rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .live-wallpaper { --wallpaper-x: 0px !important; --wallpaper-y: 0px !important; --wallpaper-x-soft: 0px !important; --wallpaper-y-soft: 0px !important; --wallpaper-scroll: 0px !important; --wallpaper-scroll-soft: 0px !important; }
}

/* Professional experience and native, readable case studies. */
.experience-grid, .case-grid { display: grid; gap: 2rem; }
.experience-current, .case-study { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--color-base-300); border-radius: 1rem; background: var(--color-base-200); min-width: 0; }
.experience-current h3, .case-study h3 { margin: .8rem 0; font-size: clamp(1.3rem, 2.5vw, 1.7rem); line-height: 1.3; letter-spacing: -.025em; }
.experience-current p, .case-study dd { color: color-mix(in oklab, var(--color-base-content) 78%, transparent); line-height: 1.75; font-size: .92rem; }
.experience-company { color: var(--color-primary) !important; font-weight: 700; margin-bottom: 1rem; }
.career-list { list-style: none; margin: 0; padding: 0; }
.career-list li { padding: 1.15rem 0; border-bottom: 1px solid var(--color-base-300); }
.career-list h3 { font-size: .98rem; font-weight: 600; line-height: 1.5; }
.career-list p { margin-top: .35rem; font-size: .8rem; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); }
.case-study dl { margin: 1.4rem 0 0; }
.case-study dl > div + div { margin-top: 1.2rem; }
.case-study dt { margin-bottom: .3rem; color: var(--color-primary); font: 500 .72rem/1.4 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .04em; }
.case-study dd { margin: 0; }
@media (min-width: 900px) { .experience-grid, .case-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Explicit page canvas and footer clearance for mobile safe areas and the launcher. */
html { background-color: var(--color-base-100); }
body { background-color: var(--color-base-100); }
.contact-card { display: grid; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--color-base-300); border-radius: 1rem; background: var(--color-base-200); }
.contact-card h2 { margin: .7rem 0 1rem; }
.contact-card p { max-width: 53ch; font-size: 1rem; line-height: 1.75; color: color-mix(in oklab, var(--color-base-content) 78%, transparent); }
.contact-card .contact-detail { margin-top: 1rem; font-size: .8rem; }
.contact-actions { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: .8rem; min-width: 0; }
.contact-actions .btn { height: auto; min-height: 3rem; padding: .9rem 1rem; white-space: normal; text-align: center; }
.site-footer { position: relative; border-top: 1px solid var(--color-base-300); background: var(--color-base-100); padding: 2rem 1.25rem calc(7rem + env(safe-area-inset-bottom)); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 80rem; margin-inline: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: color-mix(in oklab, var(--color-base-content) 80%, transparent); font-size: .88rem; }
.footer-links a:hover { color: var(--color-primary); }
@media (min-width: 900px) { .contact-card { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
@media (max-width: 767px) { .footer-inner { flex-direction: column; align-items: flex-start; } .assistant-launcher-label { display: none; } }