/* AIP — a cheerful field guide for shared AI profiles. */
:root {
    --page: oklch(1 0 0);
    --surface: oklch(0.965 0.008 140);
    --surface-deep: oklch(0.91 0.026 140);
    --ink: oklch(0.23 0.045 145);
    --ink-soft: oklch(0.4 0.04 145);
    --primary: oklch(0.55 0.155 140);
    --primary-deep: oklch(0.4 0.11 140);
    --citrus: oklch(0.78 0.17 102);
    --orange: oklch(0.64 0.19 46);
    --orange-deep: oklch(0.43 0.14 42);
    --sky: oklch(0.7 0.125 235);
    --line: oklch(0.79 0.045 140);
    --dark: oklch(0.19 0.035 145);
    --on-dark: oklch(0.965 0.014 130);
    --font-display: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --page-pad: clamp(1.15rem, 3.7vw, 4.5rem);
    --content: 76rem;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    color-scheme: light;
}

[data-theme="dark"] {
    --page: oklch(0.17 0.018 145);
    --surface: oklch(0.215 0.025 145);
    --surface-deep: oklch(0.275 0.048 145);
    --ink: oklch(0.955 0.012 135);
    --ink-soft: oklch(0.79 0.034 140);
    --primary: oklch(0.74 0.14 140);
    --primary-deep: oklch(0.8 0.1 140);
    --line: oklch(0.4 0.045 140);
    --dark: oklch(0.12 0.014 145);
    --on-dark: oklch(0.965 0.014 130);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; background: var(--page); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.55; transition: background-color 250ms var(--ease), color 250ms var(--ease); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, code { font: inherit; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 50; top: .75rem; left: .75rem; transform: translateY(-200%); background: var(--dark); color: var(--on-dark); padding: .72rem 1rem; font-weight: 700; text-decoration: none; transition: transform 180ms var(--ease); }
.skip-link:focus { transform: translateY(0); }

/* Masthead */
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem; padding: .75rem var(--page-pad); background: color-mix(in oklab, var(--page) 90%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: .52rem; color: var(--ink); font-family: var(--font-display); font-size: 1.38rem; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.brand-mark { display: inline-flex; align-items: end; gap: 2px; height: 1.08rem; }
.brand-mark span { display: block; width: .25rem; background: var(--orange); border-radius: .25rem .25rem 0 0; }
.brand-mark span:nth-child(1) { height: .52rem; background: var(--primary); }
.brand-mark span:nth-child(2) { height: 1.08rem; }
.brand-mark span:nth-child(3) { height: .76rem; background: var(--sky); }
.section-nav { display: flex; gap: clamp(.7rem, 2vw, 1.55rem); margin-left: auto; }
.section-nav a, .github-link { color: var(--ink-soft); font-size: .9rem; font-weight: 650; text-decoration: none; }
.section-nav a:hover, .github-link:hover { color: var(--primary-deep); }
.header-actions { display: flex; align-items: center; gap: .9rem; }
.theme-toggle { display: inline-grid; place-items: center; width: 2.45rem; height: 2.45rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color 180ms var(--ease), transform 180ms var(--ease); }
.theme-toggle:hover { background: var(--surface-deep); transform: rotate(12deg); }
.theme-toggle svg { width: 1.1rem; height: 1.1rem; }

/* Hero */
.hero { position: relative; isolation: isolate; min-height: min(49rem, calc(100svh - 4.75rem)); overflow: hidden; background: var(--surface-deep); }
.hero-art, .hero-veil { position: absolute; inset: 0; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; animation: hero-drift 16s ease-in-out infinite alternate; }
.hero-veil { z-index: 1; background: linear-gradient(90deg, color-mix(in oklab, var(--page) 94%, transparent) 0%, color-mix(in oklab, var(--page) 80%, transparent) 33%, color-mix(in oklab, var(--page) 20%, transparent) 64%, transparent 100%); }
[data-theme="dark"] .hero-veil { background: linear-gradient(90deg, color-mix(in oklab, var(--page) 94%, transparent) 0%, color-mix(in oklab, var(--page) 84%, transparent) 38%, color-mix(in oklab, var(--page) 35%, transparent) 65%, color-mix(in oklab, var(--page) 5%, transparent) 100%); }
.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: min(43rem, calc(100svh - 4.75rem)); width: min(43rem, 100%); margin-left: max(var(--page-pad), calc((100vw - var(--content)) / 2)); padding: clamp(4.2rem, 10vw, 7.8rem) 0 7rem; }
.hero-label, .section-label { margin: 0 0 1rem; color: var(--primary-deep); font-family: var(--font-display); font-size: .86rem; font-weight: 800; letter-spacing: .045em; }
.hero h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.hero h1 { max-width: 12ch; font-size: clamp(3rem, 6.5vw, 6rem); color: var(--ink); }
.hero-copy { max-width: 54ch; margin: 1.7rem 0 0; color: var(--ink-soft); font-size: clamp(1.05rem, 1vw + .75rem, 1.31rem); line-height: 1.55; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.95rem; padding: .75rem 1.08rem; border: 1px solid transparent; border-radius: 999px; font-size: .94rem; font-weight: 800; text-decoration: none; transition: transform 180ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease); }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--orange); color: oklch(1 0 0); }
.button-quiet { border-color: var(--line); background: color-mix(in oklab, var(--page) 75%, transparent); color: var(--ink); }
.button-quiet:hover { background: var(--page); border-color: var(--ink-soft); }
.hero-note { position: absolute; z-index: 2; right: var(--page-pad); bottom: 1.45rem; display: flex; flex-wrap: wrap; justify-content: end; gap: .4rem; max-width: 31rem; }
.hero-note span { padding: .35rem .62rem; border: 1px solid color-mix(in oklab, var(--ink) 25%, transparent); background: color-mix(in oklab, var(--page) 68%, transparent); color: var(--ink-soft); font-size: .75rem; font-weight: 750; }

/* The promise, and people at work */
.intro { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(16rem, .76fr); gap: clamp(2rem, 8vw, 9rem); width: min(var(--content), 100%); margin: 0 auto; padding: clamp(5rem, 11vw, 10rem) var(--page-pad) clamp(2.5rem, 6vw, 5rem); }
.intro h2, .profile-content h2, .setup h2, .use h2, .confidence h2 { font-size: clamp(2.25rem, 4.5vw, 4.8rem); }
.intro-copy { align-self: end; max-width: 48ch; color: var(--ink-soft); font-size: 1.07rem; }
.intro-copy p { margin: 0; text-wrap: pretty; }
.intro-copy p + p { margin-top: 1.1rem; }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(var(--content), 100%); margin: 0 auto; padding: 0 var(--page-pad) clamp(5.5rem, 11vw, 11rem); }
.person { position: relative; min-height: 20rem; overflow: hidden; background: var(--surface); }
.person:nth-child(2) { background: var(--citrus); }
.person:nth-child(3) { background: var(--sky); }
.person:nth-child(4) { background: var(--orange); }
.person img { position: absolute; bottom: -1.25rem; left: 50%; width: 142%; max-width: none; transform: translateX(-50%); transition: transform 450ms var(--ease); }
.person:hover img { transform: translateX(-50%) translateY(-.75rem) rotate(-2deg); }
.person div { position: absolute; right: .85rem; bottom: .85rem; left: .85rem; display: grid; gap: .1rem; padding: .6rem .68rem; background: color-mix(in oklab, var(--page) 86%, transparent); color: var(--ink); }
.person strong { font-family: var(--font-display); font-size: 1.08rem; letter-spacing: -.03em; }
.person span { font-size: .78rem; font-weight: 650; }

/* Profile folders */
.profile-story { display: grid; grid-template-columns: minmax(19rem, .9fr) minmax(18rem, 1fr); align-items: center; gap: clamp(3rem, 8vw, 9rem); padding: clamp(5rem, 10vw, 10rem) max(var(--page-pad), calc((100vw - var(--content)) / 2)); background: var(--primary); color: oklch(1 0 0); }
.profile-content .section-label { color: oklch(.93 .075 120); }
.profile-content h2 { color: oklch(1 0 0); }
.profile-content p:not(.section-label) { max-width: 53ch; margin: 1.35rem 0 0; color: oklch(.95 .025 135); text-wrap: pretty; }
.profile-content code { padding: .08em .3em; background: color-mix(in oklab, var(--primary-deep) 58%, transparent); color: oklch(1 0 0); font-size: .9em; }
.profile-visual { position: relative; height: clamp(21rem, 36vw, 29rem); }
.profile-folder { position: absolute; left: 50%; display: flex; align-items: end; width: clamp(14.5rem, 24vw, 20rem); height: clamp(13rem, 23vw, 18rem); padding: 1.2rem; transform-origin: bottom center; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.04em; }
.profile-folder::before { position: absolute; top: -1.65rem; left: 0; width: 48%; height: 1.7rem; border-radius: .5rem .5rem 0 0; background: inherit; content: ""; }
.folder-back { bottom: 4.1rem; background: var(--citrus); transform: translateX(-72%) rotate(-14deg); animation: folder-sway 4.5s var(--ease) infinite alternate; }
.folder-middle { bottom: 2rem; background: var(--sky); transform: translateX(-39%) rotate(8deg); animation: folder-sway 5.6s var(--ease) -1.5s infinite alternate-reverse; }
.folder-front { bottom: 0; background: var(--orange); transform: translateX(-51%); box-shadow: 0 .75rem 0 color-mix(in oklab, var(--primary-deep) 43%, transparent); }
.folder-front i { position: absolute; right: 1.25rem; bottom: 1.6rem; width: 1.65rem; height: .34rem; background: color-mix(in oklab, var(--orange-deep) 72%, transparent); }
.folder-front i:nth-of-type(2) { bottom: 2.45rem; width: 3.5rem; }
.folder-front i:nth-of-type(3) { bottom: 3.3rem; width: 2.65rem; }
.travel-line { position: absolute; top: 6%; right: -2rem; left: -2rem; height: 1.25rem; border-top: 2px dashed color-mix(in oklab, oklch(1 0 0) 64%, transparent); }
.travel-line span { position: absolute; top: -.42rem; width: .75rem; height: .75rem; border-radius: 50%; background: oklch(1 0 0); animation: travel 4.8s linear infinite; }
.travel-line span:nth-child(2) { animation-delay: -1.6s; }
.travel-line span:nth-child(3) { animation-delay: -3.2s; }

/* Setup */
.setup { width: min(112rem, 100%); margin: 0 auto; padding: clamp(5rem, 11vw, 10rem) var(--page-pad); container-type: inline-size; }
.setup-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, .65fr); gap: 1.5rem clamp(2rem, 7vw, 8rem); max-width: var(--content); margin-bottom: clamp(2.3rem, 6vw, 5rem); }
.setup-heading .section-label, .setup-heading h2 { grid-column: 1; }
.setup-heading .section-label { margin-bottom: -1rem; }
.setup-heading > p:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; color: var(--ink-soft); text-wrap: pretty; }
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: .95rem; padding: 1.6rem clamp(1rem, 2.6vw, 2.4rem) 1.4rem 0; border-bottom: 1px solid var(--line); }
.steps li, .steps li > div { min-width: 0; }
.steps li + li { padding-left: 0; border-left: 0; }
.step-number { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--primary); color: oklch(1 0 0); font-family: var(--font-display); font-size: .86rem; font-weight: 800; }
.steps h3 { font-size: 1.36rem; line-height: 1.1; }
.steps p { margin: .75rem 0 1rem; color: var(--ink-soft); font-size: .94rem; text-wrap: pretty; }
.code-row { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; background: var(--dark); }
.code-row code { min-width: 0; flex: 1; padding: .82rem; color: var(--on-dark); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem; line-height: 1.6; white-space: pre; }
.copy-button { flex: 0 0 auto; padding: 0 .7rem; border: 0; border-left: 1px solid color-mix(in oklab, var(--on-dark) 30%, transparent); background: color-mix(in oklab, var(--dark) 75%, var(--primary)); color: oklch(1 0 0); font-size: .74rem; font-weight: 800; cursor: pointer; }
.copy-button:hover { background: var(--primary); }
.copy-feedback { min-height: 1.5rem; margin: .6rem 0 0; color: var(--primary-deep); font-size: .86rem; font-weight: 650; }

/* Normal day-to-day use */
.use { display: grid; grid-template-columns: minmax(0, .96fr) minmax(19rem, .82fr); align-items: center; gap: clamp(3rem, 8vw, 10rem); padding: clamp(5rem, 11vw, 10rem) max(var(--page-pad), calc((100vw - var(--content)) / 2)); background: var(--surface); }
.use-copy > p:not(.section-label) { max-width: 52ch; margin: 1.45rem 0 0; color: var(--ink-soft); text-wrap: pretty; }
.text-link { display: inline-flex; gap: .5rem; margin-top: 1.5rem; color: var(--primary-deep); font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.run-example { overflow: hidden; background: var(--dark); color: var(--on-dark); box-shadow: .7rem .7rem 0 var(--orange); }
.window-title { display: flex; align-items: center; gap: .34rem; margin: 0; padding: .65rem .9rem; border-bottom: 1px solid color-mix(in oklab, var(--on-dark) 18%, transparent); color: oklch(.76 .02 140); font-size: .77rem; font-weight: 700; }
.window-title span { width: .52rem; height: .52rem; border-radius: 50%; background: var(--orange); }
.window-title span:nth-child(2) { background: var(--citrus); }
.window-title span:nth-child(3) { background: var(--primary); }
.run-example pre { margin: 0; padding: 1.5rem; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(.76rem, 1.3vw, .92rem); line-height: 1.85; }
.command { color: oklch(.9 .11 130); }
.comment { color: oklch(.67 .025 140); }
.success { color: oklch(.84 .13 140); }

/* Reassurance */
.confidence { width: min(var(--content), 100%); margin: 0 auto; padding: clamp(5rem, 11vw, 10rem) var(--page-pad); }
.confidence h2 { max-width: 16ch; }
.confidence ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: clamp(2.2rem, 6vw, 4.5rem) 0 0; padding: 0; list-style: none; }
.confidence li { padding-top: 1rem; border-top: .34rem solid var(--orange); }
.confidence li:nth-child(2) { border-color: var(--primary); }
.confidence li:nth-child(3) { border-color: var(--sky); }
.confidence strong { display: block; font-family: var(--font-display); font-size: 1.27rem; letter-spacing: -.03em; }
.confidence span { display: block; max-width: 31ch; margin-top: .6rem; color: var(--ink-soft); text-wrap: pretty; }

.site-footer { display: flex; align-items: center; gap: 1rem 2rem; padding: 1.5rem var(--page-pad); background: var(--dark); color: var(--on-dark); }
.site-footer .brand { color: var(--on-dark); }
.site-footer p { margin: 0 auto 0 0; color: oklch(.74 .025 140); font-size: .9rem; }
.site-footer > a:last-child { font-size: .85rem; font-weight: 700; text-underline-offset: .2em; }

@keyframes hero-drift { from { transform: scale(1.01) translateX(-.4%); } to { transform: scale(1.055) translateX(.5%); } }
@keyframes folder-sway { from { margin-bottom: 0; } to { margin-bottom: .8rem; } }
@keyframes travel { from { left: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { left: 100%; opacity: 0; } }

/* Each step keeps the same generous command width, whatever the browser zoom. */
@container (min-width: 68rem) {
    .steps { grid-template-columns: repeat(2, minmax(34rem, 1fr)); }
    .steps li:nth-child(2) { padding-left: clamp(1rem, 2.6vw, 2.4rem); border-left: 1px solid var(--line); }
    .steps li:nth-child(3) { grid-column: 1 / -1; }
}

@container (min-width: 102rem) {
    .steps { grid-template-columns: repeat(3, minmax(34rem, 1fr)); }
    .steps li:nth-child(3) { grid-column: auto; padding-left: clamp(1rem, 2.6vw, 2.4rem); border-left: 1px solid var(--line); }
}

@media (max-width: 760px) {
    .site-header { gap: .8rem; min-height: 4.2rem; }
    .section-nav { display: none; }
    .header-actions { margin-left: auto; }
    .github-link { font-size: .8rem; }
    .hero { min-height: 43rem; }
    .hero-art img { object-position: 64% 50%; }
    .hero-veil { background: linear-gradient(0deg, var(--page) 3%, color-mix(in oklab, var(--page) 84%, transparent) 48%, color-mix(in oklab, var(--page) 30%, transparent) 100%); }
    [data-theme="dark"] .hero-veil { background: linear-gradient(0deg, var(--page) 4%, color-mix(in oklab, var(--page) 88%, transparent) 48%, color-mix(in oklab, var(--page) 32%, transparent) 100%); }
    .hero-inner { min-height: 43rem; justify-content: end; width: auto; margin: 0; padding: 4rem var(--page-pad) 6rem; }
    .hero h1 { max-width: 11ch; font-size: clamp(2.65rem, 12vw, 4.3rem); }
    .hero-note { right: var(--page-pad); bottom: 1rem; justify-content: start; max-width: calc(100% - (var(--page-pad) * 2)); }
    .intro, .profile-story, .use { grid-template-columns: 1fr; }
    .intro { gap: 1.5rem; }
    .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .person { min-height: 14.8rem; }
    .profile-story { gap: 2.8rem; }
    .profile-visual { order: 2; }
    .profile-content { order: 1; }
    .setup-heading { display: block; }
    .setup-heading .section-label { margin-bottom: 1rem; }
    .setup-heading > p:last-child { margin-top: 1.4rem; }
    .steps { grid-template-columns: 1fr; }
    .steps li, .steps li + li { padding: 1.5rem 0; border-left: 0; }
    .use { gap: 2.7rem; }
    .confidence ul { grid-template-columns: 1fr; gap: 2rem; }
    .site-footer { align-items: flex-start; flex-direction: column; }
    .site-footer p { margin: 0; }
}

@media (max-width: 390px) { .github-link { display: none; } .hero-actions { display: grid; } .button { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}