:root {
  font-family: "Segoe UI", Arial, sans-serif;
  color: #173341;
  background: #f3f7f7;
  font-synthesis: none;
  --teal: #087f8c;
  --teal-dark: #075f69;
  --navy: #173341;
  --orange: #ba611b;
  --muted: #536b76;
  --line: #d6e3e6;
  --soft: #edf6f6;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button, select, input[type="file"] { max-width: 100%; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
a { color: var(--teal-dark); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
.skip-link { position: fixed; top: 10px; left: 16px; z-index: 1000; max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 8px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 650; transform: translateY(calc(-100% - 20px)); }
.skip-link:focus { transform: translateY(0); color: #fff; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 3px solid #dc8b37;
  outline-offset: 4px;
}
button {
  border: 1px solid #bdcfd5;
  border-radius: 9px;
  padding: 10px 15px;
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
button:hover { background: var(--soft); border-color: var(--teal); }
button:disabled, input:disabled, select:disabled { opacity: .45; cursor: wait; }
.primary, #importProject { color: #fff; background: var(--teal); border-color: var(--teal); }
.primary:hover, #importProject:hover { color: #fff; background: var(--teal-dark); border-color: var(--teal-dark); }
select { color: var(--navy); background: #fff; border: 1px solid #bdcfd5; border-radius: 8px; padding: 9px 11px; cursor: pointer; }
input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); flex: 0 0 auto; }
input[type="range"] { display: block; width: 100%; accent-color: var(--teal); cursor: pointer; min-width: 0; margin: 13px 0 3px; }
[hidden] { display: none !important; }
h1, h2, p { overflow-wrap: break-word; }
h1 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.16; letter-spacing: -.9px; margin: 10px 0 14px; max-width: 850px; }
h2 { font-size: 19px; line-height: 1.3; margin: 0 0 10px; letter-spacing: -.2px; }
p { margin: 7px 0; color: var(--muted); line-height: 1.6; }
main { max-width: 1360px; padding: 0 28px 28px; margin: 0 auto; }
.site-nav { max-width: 1360px; margin: 0 auto; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; font-size: 15px; font-weight: 750; letter-spacing: -.15px; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; background: var(--teal); flex: 0 0 auto; }
.brand-mark svg { display: block; width: 24px; height: 24px; }
.site-nav nav, .site-nav > div { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.site-nav nav a, .site-nav > div > a { font-size: 14px; font-weight: 600; text-decoration: none; padding: 8px 0; }
.intro { display: flex; align-items: center; justify-content: space-between; gap: 25px 38px; margin: 0; padding: 34px 0 27px; }
.intro > div:first-child { flex: 1 1 auto; min-width: 0; }
.intro-note { display: flex; flex-direction: column; gap: 7px; flex: 0 0 190px; padding: 4px 0 4px 21px; border-left: 2px solid #b8d5d8; }
.intro-note span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.intro-note strong { color: var(--teal-dark); font-size: 16px; font-weight: 650; line-height: 1.5; }
.eyebrow { color: var(--teal-dark); font-size: 11px; font-weight: 750; letter-spacing: 1.6px; line-height: 1.7; text-transform: uppercase; }
.intro p { max-width: 780px; font-size: 17px; }
.project-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 13px 28px; padding: 19px 22px; background: #e8f3f3; border: 1px solid #ccdfdf; border-radius: 12px; margin: 0 0 24px; }
.project-bar > div:first-child { flex: 1 1 380px; }
.project-bar h2 { font-size: 16px; margin: 0 0 4px; }
.project-bar p { font-size: 13px; margin: 0; }
.project-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.project-actions button { font-size: 13px; }
#importStatus { flex: 1 1 100%; width: 100%; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#importStatus:empty { display: none; }
#importStatus.error, .error { color: #a53225; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 14px; }
.panel nav, .tools, .options { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.panel nav { gap: 8px; }
.panel nav button { font-size: 13px; }
.selected { color: var(--teal-dark); border-color: var(--teal); background: var(--soft); }
#hint { margin: 14px 0 0; font-size: 13px; color: #385763; font-weight: 600; }
.parameters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-bottom: 22px; }
.parameters label { display: block; font-size: 13px; font-weight: 650; }
.parameters output { float: right; color: var(--teal-dark); font-size: 18px; font-variant-numeric: tabular-nums; }
.tools { justify-content: space-between; padding-top: 17px; border-top: 1px solid #e5edef; gap: 14px 22px; }
.tools > div:first-child { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tools .note { display: inline-flex; gap: 8px; align-items: center; margin-left: 5px; }
.options { gap: 11px 18px; }
.options label { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; color: #344f5b; cursor: pointer; }
.timebar { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.timebar label { white-space: nowrap; font-size: 13px; font-weight: 600; }
.timebar input { margin: 0; }
.timebar output { min-width: 62px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--teal-dark); text-align: right; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 19px 0 15px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 15px 19px; }
.stat small { display: block; color: var(--muted); font-size: 12px; }
.stat strong { display: block; padding-top: 5px; font-size: 26px; font-weight: 650; letter-spacing: -.5px; font-variant-numeric: tabular-nums; color: var(--teal-dark); }
.stat:nth-child(2) strong { color: var(--orange); }
.view-switch { display: none; }
.stage { min-width: 0; max-width: 100%; background: #fff; border: 1px solid #cddfe2; border-radius: 12px; overflow: hidden; }
.stage-head { display: grid; grid-template-columns: 1fr 1fr; min-width: 0; border-bottom: 1px solid var(--line); color: #315763; font-size: 14px; font-weight: 650; }
.stage-head div { padding: 15px 22px; }
.stage-head div + div { border-left: 1px solid var(--line); }
#ggb, .ggb-surface { width: 100%; height: 540px; min-width: 0; max-width: 100%; overflow: hidden; }
.status { margin: 9px 2px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 23px; }
.bottom > .panel { min-width: 0; margin-bottom: 0; padding: 22px; }
.bottom p { font-size: 14px; }
.bottom label.note { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 2px; cursor: pointer; }
.bottom .options { margin-top: 15px; }
table { border-collapse: collapse; width: 100%; text-align: center; margin-top: 14px; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 6px; border-bottom: 1px solid #e1ebed; }
th { background: #f0f6f7; color: #48616d; font-size: 12px; font-weight: 650; }
td { font-size: 13px; }
td button { padding: 6px 11px; font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
.formula { font-size: clamp(19px, 2vw, 24px); color: var(--teal-dark); line-height: 1.5; margin: 17px 0 8px; overflow-wrap: anywhere; }
#features { font-size: 13px; line-height: 1.7; }
.note, .badge { font-size: 13px; }
details { border-top: 1px solid var(--line); padding-top: 15px; margin-top: 18px; }
summary { font-size: 13px; font-weight: 650; line-height: 1.5; cursor: pointer; }
details p { margin-top: 11px; }
.resources { padding: 32px 0 25px; }
.resources h2 { font-size: 22px; margin-bottom: 8px; }
.resources > p { font-size: 14px; margin-bottom: 17px; }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.resource { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 11px; text-decoration: none; }
.resource:hover { background: var(--soft); border-color: #80b1b7; }
.resource strong { color: var(--navy); font-size: 15px; }
.resource span { color: var(--muted); font-size: 13px; line-height: 1.6; }
.resource b { color: var(--teal-dark); margin-top: auto; padding-top: 13px; font-size: 12px; font-weight: 650; }
footer { border-top: 1px solid var(--line); margin-top: 6px; padding: 20px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
footer p { font-size: inherit; }
@media (max-width: 900px) {
  .project-bar > div:first-child { flex-basis: 100%; }
  .parameters { gap: 22px; }
  .tools { align-items: flex-start; }
  .bottom { grid-template-columns: 1fr; }
  .resource-grid { gap: 10px; }
  .resource { padding: 16px; }
}
@media (max-width: 760px) {
  .intro { flex-direction: column; align-items: stretch; gap: 13px; }
  .intro-note { flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; padding: 0; border: 0; }
  .intro-note strong { font-size: 13px; }
  .view-switch { display: flex; gap: 6px; width: 100%; padding: 5px; margin: 17px 0 10px; border: 1px solid var(--line); border-radius: 11px; background: #e8f0f1; }
  .view-switch button { flex: 1 1 0; min-width: 0; padding: 10px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #49636e; font-size: 13px; }
  .view-switch button:hover { background: #f7fbfb; }
  .view-switch button.selected { background: #fff; color: var(--teal-dark); border-color: #accdd1; }
  .view-switch button:focus-visible { outline-offset: 2px; }
  .stage-head div { padding: 12px 16px; }
  #ggb, .ggb-surface { height: 430px; }
}
@media (max-width: 640px) {
  main { padding: 0 16px 22px; }
  .site-nav { padding: 17px 16px; gap: 16px; flex-wrap: wrap; }
  .site-nav nav, .site-nav > div { gap: 19px; }
  .site-nav nav a, .site-nav > div > a { font-size: 13px; }
  .brand { font-size: 14px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
  .intro { padding: 28px 0 21px; }
  .intro p { font-size: 15px; }
  h1 { font-size: 31px; letter-spacing: -.65px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.3px; }
  .project-bar { padding: 16px; gap: 13px; margin-bottom: 18px; }
  .project-actions { width: 100%; }
  .project-actions button { flex: 1 1 140px; }
  .panel { padding: 16px; }
  .panel nav { display: grid; grid-template-columns: 1fr 1fr; }
  .panel nav button { padding: 10px 8px; font-size: 12px; text-align: left; }
  .parameters { grid-template-columns: 1fr; gap: 22px; }
  .tools > div:first-child { width: 100%; }
  .tools .note { margin: 4px 0 0; }
  .tools button { font-size: 13px; }
  .tools .options { gap: 12px 16px; }
  .timebar { gap: 10px; margin-top: 23px; }
  .timebar label, .timebar output { font-size: 12px; }
  .timebar output { min-width: 52px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 15px; }
  .stat { padding: 12px 14px; }
  .stat strong { font-size: 24px; }
  .stat small { font-size: 11px; }
  .stage-head { font-size: 13px; }
  .bottom { margin-top: 20px; }
  .bottom > .panel { padding: 17px; }
  .bottom h2 { font-size: 18px; }
  th, td { padding: 9px 4px; }
  td button { padding: 6px 8px; }
  .resources { padding: 28px 0 21px; }
  .resource-grid { grid-template-columns: 1fr; gap: 10px; }
  .resource { padding: 18px; }
  .resource b { padding-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  button { transition: none; }
}
@media print {
  body { background: #fff; }
  main { max-width: none; padding: 0; }
  .site-nav, .project-bar, .parameters, .tools, .panel nav, button, .resources, .view-switch, .skip-link { display: none; }
  .intro { padding-top: 0; }
  .panel, .stat, .stage { break-inside: avoid; }
  .stage { overflow: hidden; }
}

#ggb > .applet_scaler { transform: none !important; width: 100% !important; height: 100% !important; } #ggb .appletParameters { width: 100% !important; height: 100% !important; } .stage-head.single-view { grid-template-columns: 1fr; } .stage-head [hidden] { display: none !important; }


/* Digital student activity */
.student-header{max-width:1360px;margin:auto;padding:34px 30px 14px}.student-header h1{font-size:clamp(26px,4vw,38px);margin:9px 0;color:var(--ink)}.student-header p{margin:0;color:#546674}.activity-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:16px 0 24px;border-bottom:1px solid #d5e1e3;padding-bottom:14px}.activity-tabs{display:flex;gap:8px}.activity-tabs button[aria-selected=true]{background:#087f8c;border-color:#087f8c;color:white}.activity-tabs span{margin-left:8px;font-size:12px;opacity:.85}#saveStatus{font-size:13px;color:#526674;margin:0}.simulation-intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.simulation-intro p{margin:0;max-width:760px}.simulation-intro button{flex-shrink:0}.exact-value{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}.exact-value label{font-size:12px;color:#667b87;font-weight:400}.exact-value input,.time-input input{width:90px;padding:7px;border:1px solid #b8cbd0;border-radius:6px;color:#173640;font:inherit;background:white}.time-input{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;margin-top:12px}.time-input span{color:#667b87}.model-options{margin:18px 0}.next-step{margin:12px 0 25px}#worksheet{max-width:1000px;margin:0 auto}.worksheet-heading{display:flex;gap:25px;justify-content:space-between;align-items:center}.worksheet-heading h2{font-size:30px;margin:8px 0}.worksheet-heading p{color:#526674}.worksheet-heading button{flex-shrink:0}.storage-note{font-size:14px;background:#e7f3f3;padding:15px 18px;border-radius:10px;line-height:1.6}.identity-fields{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin:25px 0}.identity-fields label{font-weight:600;font-size:14px}.identity-fields input{display:block;margin-top:7px}.question{border:1px solid #d8e3e5;background:#fff;border-radius:14px;padding:26px;margin:20px 0}.question-heading{display:flex;align-items:center;gap:14px}.question-heading h2{margin:0;font-size:23px}.question-number{width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;border-radius:50%;background:#e3f2f2;color:#087f8c;font-weight:700}.question.completed .question-number{background:#087f8c;color:white}.question p{line-height:1.65}.answer-field{display:block;margin:20px 0 0}.answer-field span{display:block;font-weight:600;font-size:15px;margin-bottom:8px;line-height:1.5}#worksheet input,#worksheet textarea{font:inherit;color:#173640;border:1px solid #b6cbd0;border-radius:7px;background:#fbfdfd;padding:10px;width:100%;box-sizing:border-box}#worksheet textarea{resize:vertical;min-height:105px}#worksheet input:focus,#worksheet textarea:focus{outline:3px solid #b8e2e2;border-color:#087f8c}.answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.table-scroll{overflow-x:auto;margin:20px 0;max-width:100%}.answer-table{width:100%;border-collapse:collapse}.answer-table td,.answer-table th{padding:10px;text-align:left;border-bottom:1px solid #e1e9eb}.answer-table th{background:#f0f6f6;font-size:13px;color:#36505b}.answer-table td input{min-width:60px}.comparison-table{min-width:690px}.comparison-table th:first-child{min-width:155px}.comparison-table button{text-align:left;font-size:12px}.drawing-wrap{border:1px solid #c8d9dc;border-radius:8px;overflow:hidden}#predictionCanvas{display:block;width:100%;height:260px;touch-action:none;cursor:crosshair}.drawing-actions{display:flex;gap:8px;margin-top:10px}.drawing-actions button{font-size:12px;padding:7px 11px}.math-line{font-family:Georgia,serif;font-size:25px;text-align:center;padding:16px;background:#f0f6f6;border-radius:8px}.worksheet-end{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:10px 0 30px}.worksheet-end p{flex:1;font-weight:600}footer{border-top:1px solid #dce5e7;padding:25px 0;color:#667b87;font-size:13px}
@media(max-width:700px){.student-header{padding:24px 18px 10px}.activity-nav{gap:12px}.activity-tabs{width:100%}.activity-tabs button{padding:11px 10px;font-size:13px}.simulation-intro,.worksheet-heading{display:block}.simulation-intro button{margin-top:12px}.worksheet-heading h2{font-size:26px}.worksheet-heading button{margin-bottom:10px}.identity-fields,.answer-grid{grid-template-columns:1fr}.identity-fields{gap:14px}.question{padding:18px 14px}.question-heading h2{font-size:20px}.question-heading{gap:10px}.answer-table th,.answer-table td{padding:8px 5px}.answer-table td button{font-size:12px}.worksheet-end p{flex-basis:100%}.time-input{gap:8px}.time-input span{width:100%}}