.edu-workspace { max-width: 1120px; margin: 2rem auto; color: #193b43; }
.edu-hero { background: #e5f4ee; border-radius: 24px; padding: clamp(1.5rem, 5vw, 3.5rem); margin-bottom: 1.5rem; }
.edu-hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.15; max-width: 22ch; }
.edu-eyebrow { font-weight: 700; letter-spacing: .12em; font-size: .8rem; }
.edu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.5rem; }
.edu-panel { background: #fff; border: 1px solid #c8d8d3; border-radius: 18px; padding: 1.5rem; min-width: 0; }
.edu-form { display: grid; gap: .7rem; margin-top: 2rem; }
.edu-form input { min-height: 44px; width: 100%; box-sizing: border-box; border: 1px solid #647d77; border-radius: 8px; padding: .7rem; font: inherit; }
.edu-workspace button { min-height: 44px; background: #215c4c; color: #fff; border: 0; border-radius: 8px; padding: .7rem 1rem; font: inherit; cursor: pointer; }
.edu-workspace :focus-visible { outline: 3px solid #9b5000; outline-offset: 3px; }
.edu-school { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #d5e2de; }
.edu-panel li { margin-block: .8rem; overflow-wrap: anywhere; }
.edu-story { min-height: 65vh; background: #142d45; color: #f9f5e8; text-align: center; }
.edu-story h1 { margin-inline: auto; }
.edu-castle { font-size: clamp(3rem, 9vw, 7rem); color: #f4cf78; }
.edu-panel table { width: 100%; border-collapse: collapse; }
.edu-panel th, .edu-panel td { padding: .7rem; text-align: left; border-bottom: 1px solid #c8d8d3; }
@media print { nav, footer, form, [data-print] { display: none; } .edu-hero, .edu-panel { break-inside: avoid; } }
/* EDU surfaces share a quiet teacher palette and generous touch targets. */
.edu-app { background:#f5f7f3; color:#183d43; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.65; }
.edu-app * { box-sizing:border-box; }
.edu-app .container { width:min(1200px,calc(100% - 2.5rem)); max-width:1200px; }
.edu-app h1,.edu-app h2,.edu-app h3 { color:inherit; letter-spacing:-.025em; line-height:1.22; margin:0 0 1rem; }
.edu-app p { margin:.75rem 0 1.25rem; max-width:75ch; }
.edu-app a { color:#17665d; text-underline-offset:.22em; }
.edu-app a:hover { color:#0c453e; }
.edu-app :focus-visible { outline:3px solid #ad620a; outline-offset:4px; }
.edu-topbar { background:#fff; border-bottom:1px solid #d7e2de; }
.edu-navigation { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1rem; flex-wrap:wrap; }
.edu-brand { display:flex; align-items:center; gap:.8rem; font-size:1.05rem; text-decoration:none; font-weight:750; }
.edu-brand strong { display:inline-block; font-size:.7rem; letter-spacing:.1em; background:#deefe8; padding:.2rem .45rem; border-radius:.4rem; vertical-align:middle; }
.edu-brand-mark { display:grid; place-items:center; width:42px; height:42px; background:#185a50; color:#f7d592; border-radius:13px; font-size:1.7rem; }
.edu-nav-actions { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; font-size:.9rem; }
.edu-nav-actions form { margin:0; }
.edu-surface-label,.edu-help { color:#526b6d; font-size:.92rem; }
.edu-skip { position:absolute; top:-100px; left:1rem; z-index:100; background:white; padding:.8rem; }
.edu-skip:focus { top:1rem; }
.edu-workspace { margin:2.5rem auto 4rem; }
.edu-hero { position:relative; overflow:hidden; background:linear-gradient(120deg,#e0eee6,#f0f3df); border:1px solid #d6e4d9; border-radius:24px; }
.edu-hero h1 { font-weight:780; font-size:clamp(2rem,4.5vw,3.4rem); }
.edu-eyebrow { color:#42695c; margin-top:0!important; }
.edu-panel { box-shadow:0 5px 20px #183d4305; padding:clamp(1.25rem,3vw,2rem); margin-bottom:1.5rem; }
.edu-grid .edu-panel { margin-bottom:0; }
.edu-panel h2 { font-size:1.4rem; }
.edu-panel h3 { font-size:1.1rem; margin-top:1.5rem; }
.edu-steps { list-style:none; padding:0; margin:0 0 2rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.edu-steps li { padding:1rem 1.25rem; border-left:3px solid #86b49d; }
.edu-steps strong,.edu-steps span { display:block; }
.edu-steps span { font-size:.9rem; color:#526b6d; margin-top:.25rem; }
.edu-app .edu-form { gap:.65rem; margin-top:1.5rem; }
.edu-form label { font-weight:650; margin-top:.5rem; }
.edu-app input,.edu-app select,.edu-app textarea { min-height:48px; width:100%; background:#fff; border:1px solid #819994; border-radius:10px; padding:.8rem; color:#183d43; font:inherit; }
.edu-app button,.edu-app .btn,.edu-link-button { display:inline-flex; justify-content:center; align-items:center; min-height:46px; border:1px solid transparent; border-radius:10px; padding:.7rem 1.1rem; font:inherit; font-weight:650; text-decoration:none; cursor:pointer; background:#185d51; color:#fff; gap:.4rem; }
.edu-app button:hover,.edu-app .btn:hover,.edu-link-button:hover { background:#104b41; color:#fff; }
.edu-app button[hidden] { display:none; }
.edu-app .edu-secondary,.edu-app .btn.ghost { background:#fff; border-color:#a7bcb5; color:#185d51; }
.edu-app .edu-secondary:hover,.edu-app .btn.ghost:hover { background:#eaf2ed; }
.edu-link-button { margin-block:.65rem; }
.edu-school { align-items:center; }
.edu-back { display:inline-block; margin-bottom:1.25rem; font-size:.92rem; }
.edu-empty { padding:1rem; background:#f2f6f1; border-radius:12px; }
.edu-status { display:inline-block; padding:.3rem .8rem; border:1px solid #c7ddd1; background:#edf5ed; border-radius:30px; font-size:.9rem; font-weight:650; }
.edu-pair-code { display:block; width:fit-content; background:#f1f5ee; padding:.8rem 1.2rem; border:1px dashed #8aa69a; border-radius:12px; letter-spacing:.14em; overflow-wrap:anywhere; font-family:ui-monospace,monospace; font-size:clamp(1rem,3vw,1.5rem); margin:1rem 0; }
.edu-challenge-preview { padding:1rem 0 1.5rem; border-bottom:1px solid #dce6df; }
.edu-table-scroll { overflow-x:auto; }
.edu-panel table { min-width:460px; font-size:.95rem; }
.edu-panel thead { background:#eef4ef; }
.edu-panel td { font-variant-numeric:tabular-nums; }
.edu-story { background:radial-gradient(ellipse at 50% 0,#315e65 0, #172f49 65%); color:#fffaed; min-height:72vh; display:flex; align-items:center; flex-direction:column; justify-content:center; }
.edu-story .edu-eyebrow { color:#f5d893; }
.edu-story [data-narrative] { font-size:clamp(1.15rem,2.5vw,1.65rem); max-width:60ch; }
.edu-story [data-discovery] { color:#d2e9df; }
.edu-story [data-progress] { border:1px solid #6d9197; border-radius:30px; padding:.65rem 1.2rem; }
.edu-story .edu-castle { text-shadow:0 0 45px #f8d48660; }
.edu-footer { text-align:center; color:#607772; font-size:.85rem; padding:2rem 1rem; border-top:1px solid #dce5df; }
.edu-app .card--narrow { max-width:520px; margin:3rem auto; padding:clamp(1.5rem,4vw,2.5rem); border:1px solid #d2dfd6; border-radius:20px; background:#fff; box-shadow:0 10px 35px #183d4308; }
.edu-app .form-grid { display:grid; gap:1.15rem; }
.edu-app .form-grid label { display:grid; gap:.4rem; }
.edu-app .actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.5rem; }
.edu-app .actions .btn { font-size:.85rem; }
@media(max-width:640px) { .edu-app .container { width:calc(100% - 2rem); } .edu-workspace { margin-top:1.5rem; } .edu-steps { grid-template-columns:1fr; gap:.4rem; } .edu-navigation { gap:.8rem; } .edu-nav-actions { gap:.8rem; } .edu-hero { padding:1.5rem; border-radius:18px; } .edu-school button { width:100%; } .edu-story { min-height:70vh; } }
@media(prefers-reduced-motion:no-preference) { .edu-app button,.edu-app a { transition:background-color .16s ease,color .16s ease; } }
@media print { .edu-topbar,.edu-footer,.edu-back,.edu-steps,.edu-help,[data-connection] { display:none!important; } .edu-app { background:white; color:black; } .edu-app .container { width:100%; } .edu-panel,.edu-hero { box-shadow:none; border:1px solid #aaa; margin:1rem 0; padding:1rem; } .edu-story { background:white; color:black; } }
.edu-app input[type=checkbox],.edu-app input[type=radio] { width:20px; height:20px; min-height:20px; padding:0; accent-color:#185d51; flex-shrink:0; }
.edu-app .terms-check { display:flex; align-items:flex-start; gap:.7rem; }
.edu-app .grid-12 { display:grid; gap:1rem; }
.edu-app .grid-12 > * { grid-column:1/-1; }
.edu-kingdom-art { width:min(640px,100%); height:auto; margin-bottom:1rem; }