:root{font-family:Arial,Helvetica,sans-serif;--ink:#133b45;--paper:#fff9ec;--primary:#195561;--accent:#c5933d;--coral:#a45536}body{background:#e8ece4;isolation:isolate}.activity-backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.activity-backdrop img{position:absolute;width:100%;height:100%;object-fit:cover}.activity-backdrop .back-sky{inset:0}.activity-backdrop .back-school{inset:0;opacity:.7}.activity-backdrop .back-ground{inset:0;transform:translateY(15%);opacity:.75}.activity-backdrop::after{content:'';position:absolute;inset:0;background:#fff8e629}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:500}.page-title h1{font-size:clamp(30px,3.1vw,44px);margin-bottom:20px}.menu-grid{max-width:1120px;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin-inline:auto}.mode-card{background:#fffaf0f2;border:1px solid #d5c6ad;box-shadow:0 3px 0 #30493d13;border-radius:18px;padding:8px 12px 15px;min-height:125px}.mode-card:disabled{background:#efece1c9;opacity:.7}.mode-art{height:88px;padding:3px;margin:0 auto 4px;display:flex;justify-content:center;align-items:center}.mode-art img{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain}.mode-card strong{font-size:15px;font-weight:700}.coming{font-size:11px}.teacher-notes{max-width:1120px;background:#fffaf0ed;border:1px solid #d8cdb9;border-radius:10px;margin:14px auto;padding:10px 15px}.panel{background:#fffaf0f5;border:1px solid #d7c9b2;border-radius:20px;box-shadow:0 8px 35px #263e3512}.home,.utilities button{border-color:#d3c6ae;background:#fffaf0ec}.category-grid{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:12px}.category-card{width:auto;grid-column:span 5;background:#fffdf7;border:1px solid #d5c8b0;min-height:152px}.category-card:nth-child(n+5){grid-column:span 4}.category-illustration{height:95px!important;width:100%!important;margin:0 auto 5px;display:flex;justify-content:center;align-items:center;position:relative!important}.category-illustration img{height:100%;width:100%;object-fit:contain}.category-card.selected{border:2px solid #1d6470;background:#e8f0e7}.category-card strong{font-size:14px}.category-card>span{font-size:12px}.individual-picture{background:transparent!important;overflow:hidden}.individual-picture>img{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;object-fit:contain}.picture-pending{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#f1ecdf;border:1px dashed #c6baa3;border-radius:14px;font-family:Georgia,serif;font-size:clamp(18px,3vw,35px);padding:20px;text-align:center}.picture-pending small{font:11px Arial,sans-serif;color:#69766c;max-width:150px}.meaning-context{max-width:720px;margin:0 auto 15px}.screen{position:relative}.word-detail{font-size:18px}.answer-grid>button{background:#fffdf6}.knowledge-map{object-fit:contain}.notice{background:#fff7dd}.screen-menu{padding-top:0}.setup-panel{max-width:1120px}.feedback{color:#194d42}
/* Fill the assigned grid area at every breakpoint. A percentage flex width
   here would shrink the second row to a fraction of its own grid cell. */
.category-grid>.category-card{width:100%;max-width:100%;min-width:0;justify-self:stretch;align-self:stretch}.category-grid>.category-card strong{max-width:100%;overflow-wrap:normal;word-break:normal;line-height:1.25}.category-grid>.category-card.selected{padding:10px}
.mode-brief{font-size:11px;font-weight:400;color:#6b7261;margin-top:5px;line-height:1.3}.activity-instructions{max-width:650px;margin:0 auto 19px;font-size:14px;color:#5a6a5b;line-height:1.6}.mode-card:enabled{transition:background .15s,transform .15s,box-shadow .15s}.mode-card:enabled:focus-visible{outline-color:#98613e}.results .score{font-variant-numeric:tabular-nums}.notice:empty{display:none}.keyboard button:focus-visible{outline-offset:2px}
@media(hover:hover){.mode-card:hover:enabled{background:#fffdf7;transform:translateY(-2px);box-shadow:0 6px 14px #30493d18}}
@media(prefers-reduced-motion:reduce){button,.mode-card:enabled{transition:none}.mode-card:hover:enabled{transform:none}}
@media(min-width:900px) and (max-height:800px){.mode-art{height:77px}.mode-card{min-height:120px}.page-title h1{margin:8px 0 15px}.page-title .eyebrow{margin-bottom:7px}.menu-grid{gap:10px}.site-header{height:74px}.screen{min-height:calc(100svh - 74px)}.teacher-notes{margin-top:12px}.category-card{min-height:140px}.category-illustration{height:80px!important}}
@media(max-width:899px){.menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.category-card,.category-card:nth-child(n+5){grid-column:auto}.mode-art{height:90px}}
@media(max-width:599px){.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mode-art{height:85px}.mode-card{min-height:128px;padding:9px}.mode-card strong{font-size:13px}.category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.category-grid>.category-card,.category-grid>.category-card.selected{padding:8px 5px}.category-card,.category-card:nth-child(n+5){grid-column:auto;min-height:130px}.category-illustration{height:70px!important}.category-card strong{font-size:11px}.category-card>span{font-size:10px}.page-title h1{font-size:30px}.word-detail{font-size:17px}}