:root {
    color-scheme: light;
    --bg: #edf3f7;
    --surface: #fff;
    --soft: #f4f7fa;
    --ink: #172129;
    --muted: #5f6d77;
    --line: #d5dfe5;
    --primary: #176b62;
    --primary-soft: #dbf2ed;
    --accent: #e76f51;
    --blue: #4263eb;
    --shadow: 0 20px 55px rgba(31, 52, 62, .1);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #091014;
    --surface: #111b21;
    --soft: #17242b;
    --ink: #eef6f7;
    --muted: #a7b8be;
    --line: #2b3b43;
    --primary: #70d4c4;
    --primary-soft: #183b38;
    --accent: #ff9b7f;
    --blue: #91a7ff;
    --shadow: 0 20px 55px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 10% 0, rgba(23,107,98,.12), transparent 30rem), var(--bg); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible, input:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.site-header { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem clamp(1rem,4vw,4rem); border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(18px); }
.brand { color: var(--ink); font-weight: 800; text-decoration: none; letter-spacing: -.02em; }
.brand span { margin-right: .5rem; color: var(--primary); }
nav { display: flex; align-items: center; gap: .5rem; }
nav a, nav button { min-height: 40px; display: inline-flex; align-items: center; padding: .5rem .72rem; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; text-decoration: none; cursor: pointer; }
nav a:hover, nav button:hover { border-color: var(--line); color: var(--ink); background: var(--surface); }

main { width: min(1220px, calc(100% - 2rem)); margin: 0 auto; }
.hero { padding: clamp(4rem,9vw,8rem) 0 4rem; }
.eyebrow { margin: 0 0 .75rem; color: var(--primary); font-size: .76rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
h1, h2 { margin: 0; letter-spacing: -.045em; line-height: 1.02; }
h1 { max-width: 850px; font-size: clamp(3.2rem,9vw,7.5rem); }
.hero > p:not(.eyebrow) { max-width: 720px; margin: 1.2rem 0 1.7rem; color: var(--muted); font-size: clamp(1rem,2vw,1.25rem); line-height: 1.65; }
.loop { display: flex; flex-wrap: wrap; gap: .5rem; }
.loop span { padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--primary); background: var(--surface); font-size: .8rem; font-weight: 800; }

.lab { margin: 0 0 2rem; padding: clamp(1rem,3vw,2rem); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.lab-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.2rem; }
.lab-heading h2 { font-size: clamp(1.75rem,4vw,3rem); }
.status { max-width: 430px; margin: 0; color: var(--muted); font-size: .9rem; text-align: right; }
.lab-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); gap: 1.25rem; align-items: start; }

.board { --cols: 14; width: 100%; aspect-ratio: 14 / 9; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 2px; overflow: hidden; padding: 8px; border: 1px solid #2d3d44; border-radius: 16px; background: #132027; user-select: none; }
.cell { position: relative; min-width: 0; border-radius: 3px; background: #26363d; transition: background .18s ease, transform .18s ease; }
.cell.wall { background: #0b1115; }
.cell.visited { background: #315765; }
.cell.trail { background: #365c57; }
.cell.frontier { background: #e9c46a; transform: scale(.86); }
.cell.path { background: #7bdcb5; }
.cell.start { background: #4263eb; }
.cell.goal { background: #ef476f; }
.cell.dirt::after, .cell.food::after { position: absolute; inset: 22%; border-radius: 50%; content: ""; background: #e9c46a; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.cell.robot::after { position: absolute; inset: 14%; display: grid; place-items: center; border-radius: 35% 35% 45% 45%; content: "R"; color: #fff; background: #e76f51; font-size: clamp(.42rem,1.2vw,.8rem); font-weight: 900; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.cell.snake-body { background: #58b99f; transform: scale(.82); }
.cell.snake-head { background: #f4a261; transform: scale(.9); }
.cell.food::after { background: #ef476f; }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: .85rem; }
.controls button { min-height: 42px; padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--soft); font-weight: 750; cursor: pointer; }
.controls button:hover { border-color: var(--primary); color: var(--primary); }
.controls label { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .82rem; }
.snake-controls button[data-direction] { width: 42px; padding-inline: 0; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; color: var(--muted); font-size: .75rem; }
.swatch { width: .8rem; height: .8rem; display: inline-block; border-radius: 3px; background: #26363d; }
.swatch.robot { background: #e76f51; }.swatch.dirt,.swatch.frontier { background:#e9c46a }.swatch.wall { background:#0b1115 }.swatch.trail,.swatch.snake-body { background:#58b99f }.swatch.start { background:#4263eb }.swatch.visited { background:#315765 }.swatch.path { background:#7bdcb5 }.swatch.snake-head { background:#f4a261 }.swatch.food { background:#ef476f }

.model-card { padding: .35rem 0 0; }
.model-card dl { margin: 0; }
.model-card dl div { padding: .66rem 0; border-bottom: 1px solid var(--line); }
.model-card dt { margin-bottom: .2rem; color: var(--primary); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.model-card dd { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.code-cta { display: inline-flex; margin-top: 1rem; color: var(--primary); font-weight: 800; text-decoration: none; }

.representation { padding: clamp(3rem,8vw,7rem) 0; }
.representation h2 { max-width: 750px; font-size: clamp(2rem,5vw,4rem); }
.representation > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.5rem; }
.representation article { padding: 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.representation strong { color: var(--primary); }
.representation p { color: var(--muted); font-size: .86rem; line-height: 1.55; }
footer { padding: 2rem; border-top: 1px solid var(--line); color: var(--muted); text-align: center; }

@media (max-width: 850px) {
    .site-header { align-items: flex-start; }
    .site-header nav a:not(:first-child) { display: none; }
    .lab-heading { align-items: flex-start; flex-direction: column; }
    .status { text-align: left; }
    .lab-layout { grid-template-columns: 1fr; }
    .representation > div { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    main { width: min(100% - 1rem, 1220px); }
    .site-header { padding-inline: .7rem; }
    .brand { font-size: .9rem; }
    .hero { padding-top: 3rem; }
    .lab { border-radius: 18px; }
    .board { gap: 1px; padding: 4px; border-radius: 10px; }
    .representation > div { grid-template-columns: 1fr; }
}

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