/* Shared by every prototype: Tercio Works tokens, the dummy-data banner and a few neutral building blocks. Each prototype adds its own styles. */
@font-face { font-family: "Archivo"; src: url("/_kit/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/_kit/atkinson.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
:root {
  --paper: #FFF6EA; --paper-2: #FFFDF8; --paper-3: #F6EBDB; --ink: #14121F; --ink-2: #3B3850; --muted: #5E5A70; --line: color-mix(in srgb, var(--ink) 18%, transparent);
  --pink: #FF4FA3; --pink-ink: #C2186E; --blue: #3D5AFE; --lime: #C6F432; --orange: #FF7A1A; --mint: #3DDBB0; --yellow: #FFD23F; --lilac: #B79CFF;
  --font-display: "Archivo", "Arial Narrow", ui-sans-serif, system-ui, sans-serif; --font-body: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --radius: 16px; --border: 2px solid var(--ink); --shadow: 4px 4px 0 var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
p { margin: 0; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.k-wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.k-empty { display: grid; gap: 16px; padding-block: 18vh; }
.k-tag { font: 600 0.8125rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--pink-ink); }

/* The banner every prototype carries: what this is, and that its data is invented */
.k-banner { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px clamp(16px, 4vw, 40px); background: var(--ink); color: var(--paper); font: 0.8125rem/1.4 var(--font-mono); }
.k-banner b { color: var(--lime); font-weight: 700; }
.k-banner a { color: inherit; }
.k-dummy { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--yellow); color: var(--ink); font: 700 0.6875rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; vertical-align: 2px; }
.k-proj { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--lilac); color: var(--ink); font: 700 0.6875rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; vertical-align: 2px; }

/* Neutral building blocks */
.k-card { padding: 20px; border: var(--border); border-radius: var(--radius); background: var(--paper-2); }
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: var(--border); border-radius: 999px; background: var(--paper-2); color: var(--ink); font: 700 0.9375rem var(--font-display); cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.k-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.k-btn-go { background: var(--lime); }
.k-btn-no { background: var(--paper-3); }
.k-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1.5px solid var(--ink); border-radius: 999px; font: 600 0.75rem var(--font-mono); }
.k-ai { background: var(--lime); }
.k-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.k-table th, .k-table td { padding: 10px 12px; text-align: left; border-bottom: 1.5px solid var(--line); vertical-align: top; }
.k-table th { font: 600 0.75rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.k-scroll { overflow-x: auto; }
.k-num { font: 850 clamp(2rem, 4vw, 3rem)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.k-num s { color: var(--muted); text-decoration-thickness: 0.08em; }
.k-steps { display: grid; gap: 8px; padding: 0; list-style: none; counter-reset: k; }
.k-steps li { counter-increment: k; display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper-2); }
.k-steps li::before { content: counter(k); font: 700 0.8125rem/1.6 var(--font-mono); color: var(--muted); }
.k-steps .removed { border-style: dashed; border-color: var(--muted); color: var(--muted); text-decoration: line-through; background: transparent; }
.k-steps .moved { background: #E6DCFF; }
.k-steps .new { border-width: 3.5px; }
.k-steps .ai { background: var(--lime); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }