:root {
  --ink:#203a34;
  --green:#174f42;
  --muted:#52645e;
  --paper:#f7f7f1;
  --line:#d8ded3;
  --pale:#eaf0e6;
  --gold:#eac16c
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:1rem/1.7 system-ui,-apple-system,"Segoe UI",sans-serif
}
a {
  color:var(--green);
  text-underline-offset:4px
}
a:hover {
  text-decoration-thickness:2px
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea,summary {
  -webkit-tap-highlight-color:transparent
}
button,.button {
  min-height:44px
}
button,.button {
  display:inline-block;
  background:var(--green);
  color:white;
  border:1px solid var(--green);
  border-radius:4px;
  padding:10px 18px;
  text-decoration:none;
  cursor:pointer;
  font-weight:650
}
button.secondary {
  background:transparent;
  color:var(--green)
}
:focus-visible {
  outline:3px solid #ad570e;
  outline-offset:4px
}
.skip {
  position:absolute;
  left:15px;
  top:-100px;
  background:white;
  padding:12px;
  z-index:5
}
.skip:focus {
  top:10px
}
.site-header {
  max-width:1440px;
  margin:auto;
  padding:24px 4%;
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  border-bottom:1px solid var(--line)
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-weight:750;
  font-size:1.12rem
}
.mark {
  background:var(--green);
  color:white;
  font: bold 2.2rem Georgia;
  border-radius:5px;
  width:46px;
  height:46px;
  text-align:center;
  line-height:42px
}
.brand small {
  display:block;
  font-weight:400;
  font-size:.8rem;
  color:var(--muted)
}
.course {
  font-size:.8rem;
  color:var(--muted);
  text-align:right
}
.layout {
  max-width:1360px;
  margin:auto;
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:55px;
  padding:40px 4% 64px
}
.sidebar nav {
  display:grid;
  gap:4px
}
.sidebar nav a {
  padding:9px 10px;
  text-decoration:none;
  font-size:.9rem;
  border-radius:4px;
  display:flex;
  gap:13px;
  align-items:center;
  min-height:44px
}
.sidebar nav a span {
  font-size:.75rem;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.sidebar nav a[aria-current] {
  background:var(--green);
  color:white
}
.sidebar nav a[aria-current] span {
  color:#dbe8da
}
.eyebrow {
  font-size:.73rem;
  font-weight:750;
  letter-spacing:.12em;
  color:var(--muted)
}
.sidebar-note {
  margin:32px 10px;
  padding-top:22px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.8rem
}
main {
  min-width:0;
  max-width:920px
}
.page-heading {
  border-bottom:1px solid var(--line);
  padding-bottom:24px;
  margin-bottom:32px
}
h1,h2,h3 {
  line-height:1.2
}
h1 {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:clamp(2.2rem,4.3vw,3.7rem);
  letter-spacing:-.035em;
  max-width:780px;
  margin:15px 0 20px
}
h2 {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:1.85rem;
  margin:0 0 20px
}
h3 {
  font-size:1.1rem;
  margin-top:28px
}
.lead {
  font-size:1.15rem;
  max-width:680px;
  color:var(--muted)
}
p {
  margin:0 0 18px
}
section {
  margin:0 0 36px
}
.intro-grid,.two-col {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:30px
}
.field-note {
  padding:25px;
  background:var(--pale);
  border-top:4px solid var(--green);
  align-self:start
}
.field-note h2 {
  font-size:1.8rem
}
.field-note ol {
  padding-left:22px
}
.field-note p:last-child {
  font-size:.9rem;
  margin-bottom:0
}
.objectives {
  padding-left:24px
}
.objectives li {
  padding:6px 0
}
.learning-strip {
  padding:26px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.notice {
  background:#f5ecd6;
  border-left:4px solid #a57524;
  padding:20px;
  margin:24px 0
}
.next {
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:35px
}
footer {
  border-top:1px solid var(--line);
  padding:32px 5%;
  font-size:.85rem;
  color:var(--muted)
}
footer p {
  max-width:1000px;
  margin:8px 0
}
dl {
  margin:0
}
dt {
  font-weight:700;
  margin-top:20px
}
dd {
  margin:5px 0 20px
}
.source {
  font-size:.85rem;
  color:var(--muted)
}
.flow {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding:18px;
  background:var(--pale);
  font-weight:650
}
.flow span {
  padding:6px
}
.table-wrap {
  overflow-x:auto
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
  margin:16px 0
}
caption {
  text-align:left;
  font-weight:700;
  margin-bottom:8px
}
th,td {
  text-align:left;
  vertical-align:top;
  padding:12px;
  border-bottom:1px solid var(--line)
}
th {
  background:var(--pale)
}
details {
  border:1px solid var(--line);
  border-radius:4px;
  padding:15px;
  margin:15px 0
}
summary {
  cursor:pointer;
  font-weight:650;
  min-height:32px
}
label {
  display:block;
  font-weight:650;
  margin:12px 0 6px
}
input,select,textarea {
  max-width:100%;
  width:100%;
  border:1px solid #7d9086;
  border-radius:3px;
  padding:10px;
  background:white;
  color:var(--ink)
}
textarea {
  min-height:125px;
  resize:vertical
}
fieldset {
  min-width:0;
  border:1px solid var(--line);
  padding:20px;
  margin:20px 0
}
legend {
  font-weight:700;
  padding:0 6px
}
.controls {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0
}
.status {
  font-weight:650;
  margin:15px 0
}
.scenario {
  border-bottom:1px solid var(--line);
  padding:18px 0
}
.scenario.over {
  background:var(--pale)
}
.chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.chip {
  background:var(--pale);
  border:1px solid #9cad9d;
  border-radius:3px;
  padding:7px 12px;
  cursor:grab;
  font-size:.88rem
}
.feedback {
  font-size:.9rem;
  margin-top:8px
}
.correct {
  color:#17543d
}
.incorrect {
  color:#903418
}
.resource {
  padding:16px 0;
  border-bottom:1px solid var(--line)
}
.resource h3 {
  margin:0 0 6px
}
.resource p {
  margin:0
}
.grid-wrap {
  max-width:100%;
  overflow:auto
}
.word-grid {
  display:grid;
  grid-template-columns:repeat(14,minmax(0,1fr));
  gap:2px;
  max-width:560px;
  margin:18px 0
}
.word-grid button {
  padding:0;
  min-height:30px;
  aspect-ratio:1;
  background:white;
  color:var(--green);
  border:1px solid #a5b4a7;
  border-radius:2px;
  font:600 .9rem monospace
}
.word-grid button.selected {
  background:var(--gold);
  color:#203a34
}
.word-grid button.found {
  background:var(--green);
  color:white
}
.word-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  padding-left:20px
}
.word-list .done {
  text-decoration:line-through
}
.code-area {
  font-family:monospace;
  min-height:190px
}
.muted {
  color:var(--muted);
  font-size:.9rem
}
[hidden] {
  display:none!important
}
@media(max-width:900px) {
  .layout {
  grid-template-columns:190px minmax(0,1fr);
  gap:26px
}
.intro-grid,.two-col {
  grid-template-columns:1fr
}
.course {
  display:none
}

}
@media(max-width:640px) {
  .layout {
  display:block;
  padding:20px 5%
}
.sidebar nav {
  grid-template-columns:1fr 1fr;
  gap:2px
}
.sidebar nav a {
  font-size:.8rem;
  padding:8px 5px;
  gap:7px
}
.sidebar-note {
  display:none
}
.sidebar {
  margin-bottom:32px
}
.site-header {
  padding:18px 5%
}
.page-heading {
  margin-bottom:24px
}
h1 {
  font-size:2.5rem
}
.word-grid {
  gap:1px
}
.word-grid button {
  min-height:20px;
  font-size:.72rem
}
fieldset {
  padding:12px
}
th,td {
  padding:8px
}
.brand {
  font-size:1rem
}

}
@media print {
  body {
  background:white;
  color:black;
  font-size:11pt
}
.site-header,.sidebar,footer,.next,.controls,.skip,.chips {
  display:none
}
.layout {
  display:block;
  padding:0
}
main {
  max-width:none
}
h1 {
  font-size:26pt
}
h2 {
  font-size:20pt
}
textarea {
  border:0;
  resize:none;
  overflow:visible
}
button {
  color:black
}
.page-heading {
  margin-bottom:20px
}
section,fieldset {
  break-inside:auto
}
.word-grid button {
  color:black;
  background:white
}
.print-answer {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  border-bottom:1px solid #aaa;
  padding:8px 0
}
.resource a::after {
  content:" (" attr(href) ")";
  font-size:9pt
}
details> * {
  display:block!important
}

}
/* Long rubric labels and URLs must wrap on narrow screens. */
main, th, td, .resource a  {
   overflow-wrap: anywhere;
   
}

table  {
   table-layout: fixed;
   
}

th:nth-child(2), td:nth-child(2)  {
   width: 17%;
   
}

@media (max-width: 640px)  {
   th, td  {
   font-size: .8rem;
   padding: 6px;
   
}
 
}


/* Preserve usable letter targets;
   only the puzzle scrolls on small screens. */
.word-grid  {
   min-width: 460px;
   
}

.word-grid button  {
   min-height: 31px;
   font-size: .9rem;
   
}


/* Navigation reflows when text is enlarged. */
.sidebar nav a { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The merged worksheet uses a visible heading for every activity part. */
h4 { font-size: 1rem; margin: 24px 0 12px; }
.next { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.previous { max-width: 100%; }
.question-quote { font-family: Georgia, serif; font-size: 1.5rem; line-height: 1.4; }
.field-note h3 { margin-top: 0; }
.comparison-table { table-layout: fixed; }
.comparison-table th:nth-child(2), .comparison-table td:nth-child(2) { width: auto; }
.study-intro { margin-bottom: 24px; }
.guide-index { padding-left: 24px; }
.guide-index li { padding: 8px 0; }
.guide-index span { display: block; color: var(--muted); font-size: .9rem; }
.study-page #student { max-width: 380px; margin-bottom: 32px; }
.study-page #guide1, .study-page #guide2 { border-top: 3px solid var(--green); padding-top: 26px; margin-top: 24px; }
.activity-part { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 32px; }
.part-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.part-heading h3 { margin: 0; font-size: 1.25rem; }
.points { color: var(--muted); font-weight: 650; margin: 0; white-space: nowrap; }
.word-list { list-style: none; padding: 0; gap: 8px; }
.word-list li { border: 1px solid #9cad9d; border-radius: 20px; padding: 3px 12px; font-size: .9rem; }
.word-list li.done { background: var(--pale); }
.puzzle-shortcuts { font-size: .9rem; }
.chips { list-style: none; padding: 0; }
.scenario-list { padding-left: 28px; }
.scenario { border: 2px dashed #9cad9d; padding: 16px; margin: 18px 0; background: #fff; }
.scenario::marker { font-weight: 700; color: var(--green); }
.scenario label { margin-top: 0; }
.scenario select { margin-top: 12px; }
.feedback:empty { display: none; }
.response-question { margin: 26px 0; }
.response-question label { margin-bottom: 10px; }
.response-question textarea { background: #fff; }
.rubric { border-top: 2px solid var(--green); margin: 32px 0; padding-top: 8px; }
#review-checklist { background: var(--pale); padding: 22px; margin: 24px 0; }
#review-checklist h3 { margin-top: 0; }
#review-checklist li { margin: 12px 0; }
@media (max-width: 640px) {
 .scenario { padding: 12px; }
 .study-page h2 { font-size: 1.65rem; }
 .part-heading h3 { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media print {
 .study-intro nav, .puzzle-shortcuts, .requires-js:not(.grid-wrap), .points { display: none; }
 .part-heading h3, .rubric h3 { break-after: avoid; }
 .scenario, .response-question { break-inside: avoid; }
 .grid-wrap { overflow: visible; }
 .word-grid { min-width: 0; }
}