:root { --ink:#073b4c; --cream:#fffaf0; --paper:#f5f0e6; --paper-deep:#e8dfd1; --red:#f25f5c; --blue:#00a4cc; --green:#2d6a4f; --purple:#6f2dbd; --yellow:#ffd166; --shadow:7px 7px 0 var(--ink); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.5; }
a { color:inherit; }
.skip-link { position:fixed; z-index:50; top:8px; left:8px; padding:10px 14px; background:var(--yellow); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.kit-header { position:sticky; z-index:20; top:0; display:flex; justify-content:space-between; align-items:center; gap:18px; min-height:72px; padding:10px clamp(16px,5vw,70px); border-bottom:3px solid var(--ink); background:rgba(255,250,240,.96); backdrop-filter:blur(8px); }
.kit-brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.kit-brand strong,.kit-brand small { display:block; }
.kit-brand small { font-size:.7rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.brand-die { display:grid; place-items:center; width:40px; aspect-ratio:1; border:2px solid var(--ink); border-radius:10px; background:var(--red); box-shadow:3px 3px 0 var(--ink); font-weight:950; }
.header-actions { display:flex; gap:10px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:46px; padding:11px 17px; border:2px solid var(--ink); border-radius:999px; color:var(--ink); background:var(--cream); box-shadow:3px 3px 0 var(--ink); font:inherit; font-weight:900; text-decoration:none; cursor:pointer; }
.button.primary { background:var(--yellow); }
main { overflow:hidden; }
.kit-hero { padding:clamp(70px,10vw,130px) clamp(20px,7vw,100px); border-bottom:3px solid var(--ink); background:linear-gradient(135deg,var(--blue),#55d2e8); }
.eyebrow { margin:0 0 12px; font-size:.76rem; font-weight:950; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { max-width:1080px; margin-bottom:24px; font-size:clamp(3.2rem,8vw,7.8rem); line-height:.88; letter-spacing:-.065em; }
h1 em { color:var(--cream); font-style:normal; }
.lede { max-width:800px; font-size:clamp(1.08rem,2vw,1.35rem); font-weight:700; }
.turn-rule { display:flex; flex-wrap:wrap; gap:9px; margin-top:32px; }
.turn { padding:8px 12px; border:2px solid var(--ink); border-radius:999px; font-size:.78rem; font-weight:950; }
.turn.human { background:var(--cream); }.turn.ai { color:var(--cream); background:var(--purple); }
.setup-sheet,.move-sheet,.literacy-check,.safety-rules { max-width:1180px; margin:70px auto; }
.setup-sheet { display:grid; grid-template-columns:.7fr 1.3fr; gap:40px; padding:38px; border:3px solid var(--ink); border-radius:22px; background:var(--yellow); box-shadow:var(--shadow); }
.setup-sheet h2,.literacy-check h2,.safety-rules h2 { margin-bottom:16px; font-size:clamp(2rem,4vw,3.8rem); line-height:.95; letter-spacing:-.04em; }
.field-grid,.two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
label { display:grid; gap:7px; font-size:.8rem; font-weight:900; }
textarea { width:100%; resize:vertical; padding:12px; border:2px solid var(--ink); border-radius:10px; color:var(--ink); background:var(--cream); font:600 .92rem/1.4 inherit; }
textarea:focus { outline:4px solid rgba(0,164,204,.28); outline-offset:1px; }
.move-sheet { display:grid; grid-template-columns:130px 1fr; scroll-margin-top:92px; }
.move-side { align-self:start; display:grid; justify-items:center; gap:12px; }
.move-letter { display:grid; place-items:center; width:110px; aspect-ratio:1; border:3px solid var(--ink); border-radius:24px; color:var(--cream); background:var(--green); box-shadow:var(--shadow); font-size:4rem; font-weight:950; transform:rotate(-4deg); }
.move-g .move-letter { color:var(--ink); background:var(--red); }.move-a .move-letter { color:var(--ink); background:var(--blue); }.move-e .move-letter { background:var(--purple); }.move-s .move-letter { color:var(--ink); background:var(--yellow); }
.mode { padding:5px 8px; border:1.5px solid var(--ink); border-radius:999px; font-size:.65rem; font-weight:950; letter-spacing:.07em; text-align:center; text-transform:uppercase; }
.mode.human { background:var(--cream); }.mode.ai { color:var(--cream); background:var(--purple); }
.move-work { padding:clamp(28px,5vw,54px); border:3px solid var(--ink); border-radius:24px; background:var(--cream); box-shadow:var(--shadow); }
.move-work h2 { margin-bottom:12px; font-size:clamp(3rem,7vw,6.2rem); line-height:.86; letter-spacing:-.06em; }
.move-question { max-width:800px; margin-bottom:28px; font-size:1.15rem; font-weight:800; }
.move-work > label,.move-work > .two-col,.move-work > .audit-grid { margin-top:16px; }
.human-reason,.equivalent { margin:24px 0 0; padding:16px 18px; border:2px solid var(--ink); border-radius:12px; background:var(--paper-deep); }
.ai-sheet .move-work { box-shadow:9px 9px 0 var(--purple); }
.human-first { display:flex; gap:14px; align-items:center; margin:20px 0; padding:14px 16px; border:2px solid var(--ink); border-radius:12px; background:var(--yellow); }
.human-first strong { white-space:nowrap; text-transform:uppercase; letter-spacing:.08em; }
.choice-check { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:20px 0 12px; padding:14px 16px; border:2px solid var(--ink); border-radius:12px; background:var(--paper); }
.choice-check strong { margin-right:auto; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.choice-check .choice-option { display:flex; grid-template-columns:none; align-items:center; gap:7px; padding:6px 10px; border:1.5px solid var(--ink); border-radius:999px; background:var(--cream); font-size:.76rem; font-weight:900; cursor:pointer; }
.choice-check input { width:1rem; height:1rem; margin:0; accent-color:var(--purple); }
.mechanic-menu { margin:20px 0; padding:16px; border:2px solid var(--ink); border-radius:12px; background:var(--paper); }
.mechanic-menu > strong { display:block; margin-bottom:10px; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
.mechanic-menu > div { display:flex; flex-wrap:wrap; gap:6px; }
.mechanic-menu span { padding:5px 8px; border:1.5px solid var(--ink); border-radius:999px; background:var(--cream); font-size:.7rem; font-weight:850; }
.mechanic-menu small { display:block; margin-top:10px; font-size:.7rem; font-weight:750; }
.prompt-card { margin:20px 0; padding:20px; border:3px solid var(--cream); border-radius:14px; color:var(--cream); background:var(--purple); box-shadow:5px 5px 0 var(--yellow); }
.prompt-card strong { text-transform:uppercase; letter-spacing:.1em; }
.prompt-card p { margin:10px 0 0; }
.prompt-card span { color:var(--yellow); font-weight:900; }
.audit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.audit-grid.four { grid-template-columns:repeat(2,minmax(0,1fr)); }
.observation-table { overflow:hidden; border:2px solid var(--ink); border-radius:14px; }
.observation-table > * { display:grid; grid-template-columns:.65fr 1fr 1fr; gap:0; }
.observation-table span,.observation-table textarea { min-height:60px; border:0; border-radius:0; border-right:1px solid rgba(7,59,76,.35); border-bottom:1px solid rgba(7,59,76,.35); }
.observation-table span { display:flex; align-items:center; padding:12px; }
.observation-table .table-head { color:var(--cream); background:var(--ink); font-size:.75rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.observation-table .table-head span { min-height:auto; border-color:rgba(255,255,255,.3); }
.literacy-check { display:grid; grid-template-columns:.7fr 1.3fr; gap:34px; padding:clamp(28px,5vw,52px); border:3px solid var(--ink); border-radius:22px; color:var(--cream); background:var(--ink); box-shadow:9px 9px 0 var(--yellow); }
.literacy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.literacy-grid article { padding:17px; border:1.5px solid var(--cream); border-radius:12px; }
.literacy-grid article:last-child { grid-column:1/-1; }
.literacy-grid p { margin:6px 0 0; font-size:.86rem; }
.safety-rules { padding:clamp(28px,5vw,52px); border:3px solid var(--ink); border-radius:22px; background:var(--red); box-shadow:var(--shadow); }
.safety-rules ul { columns:2; column-gap:40px; margin-bottom:0; }
.safety-rules li { break-inside:avoid; margin-bottom:10px; }
footer { display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:30px clamp(20px,6vw,90px); border-top:3px solid var(--ink); background:var(--cream); }
footer p { margin:0; font-size:.84rem; }
@media (max-width:760px) { .kit-header { align-items:flex-start; }.kit-brand small { display:none; }.header-actions { flex-direction:column; }.button { min-height:40px; padding:8px 12px; font-size:.78rem; }.setup-sheet,.literacy-check,.move-sheet { grid-template-columns:1fr; margin:36px 16px; }.move-side { grid-template-columns:auto 1fr; justify-items:start; align-items:center; }.move-letter { width:62px; border-radius:14px; font-size:2.1rem; }.field-grid,.two-col,.audit-grid,.audit-grid.four,.literacy-grid,footer { grid-template-columns:1fr; }.literacy-grid article:last-child { grid-column:auto; }.observation-table > * { grid-template-columns:1fr; }.observation-table .table-head { display:none; }.observation-table label { padding-top:10px; border-bottom:2px solid var(--ink); }.observation-table span { min-height:auto; font-weight:950; }.safety-rules { margin:36px 16px; }.safety-rules ul { columns:1; }.human-first { align-items:flex-start; flex-direction:column; } }
@media print { @page { size:letter; margin:.45in; } body { background:#fff; font-size:10pt; } .kit-header,.skip-link,.kit-hero .lede,.turn-rule,.button { display:none !important; }.kit-hero { padding:0 0 18px; border-bottom:2px solid #000; background:#fff; }.kit-hero h1 { margin:0; color:#000; font-size:28pt; }.kit-hero h1 em { color:#000; }.setup-sheet,.move-sheet,.literacy-check,.safety-rules { break-inside:avoid; margin:20px 0; box-shadow:none; }.setup-sheet { grid-template-columns:.7fr 1.3fr; padding:18px; }.move-sheet { grid-template-columns:72px 1fr; }.move-side { display:block; }.move-letter { width:58px; border:2px solid #000; box-shadow:none; font-size:26pt; }.mode { display:block; width:65px; margin-top:7px; }.move-work { padding:18px; border:2px solid #000; box-shadow:none !important; }.move-work h2 { font-size:30pt; }.move-question { margin-bottom:14px; }.field-grid,.two-col { gap:8px; }.prompt-card { color:#000; background:#eee; border:2px solid #000; box-shadow:none; }.prompt-card span { color:#000; }.literacy-check { grid-template-columns:.7fr 1.3fr; color:#000; background:#fff; box-shadow:none; }.safety-rules { background:#eee; box-shadow:none; } textarea { min-height:52px; background:#fff; } footer { display:block; padding:18px 0 0; border-top:2px solid #000; } footer p + p { margin-top:8px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }