:root { --lab-ink:#12364a; --lab-teal:#097b78; --lab-line:#bfd8d8; --lab-paper:#fffef9; --lab-muted:#486674; --lab-yellow:#fff0ae; }
* { box-sizing:border-box; }
body { margin:0; background:#edf7f4; color:var(--lab-ink); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.65; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; }
button,.button { min-height:48px; padding:10px 18px; border:1px solid #8eaeb6; border-radius:13px; background:#fff; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; }
button:hover:not(:disabled),.button:hover { background:#e4f5ef; border-color:var(--lab-teal); }
button.primary,.button.primary { background:var(--lab-teal); border-color:var(--lab-teal); color:#fff; box-shadow:0 3px 0 #045753; }
button.primary:hover:not(:disabled),.button.primary:hover { background:#086560; border-color:#064f4b; }
button:disabled { opacity:.52; cursor:not-allowed; box-shadow:none; }
button[aria-pressed="true"] { background:#fff0ae; border:2px solid #9b7411; }
a { color:#075f8a; text-underline-offset:3px; }
:focus-visible { outline:3px solid #ad5500; outline-offset:4px; }
h1,h2,h3,p { margin:0 0 14px; }
h1 { font-size:clamp(1.8rem,4.6vw,2.7rem); line-height:1.35; letter-spacing:.03em; }
h2 { font-size:1.4rem; line-height:1.55; }
h3 { font-size:1.1rem; }
small,.muted { color:var(--lab-muted); }
rt { font-size:.52em; letter-spacing:0; }
#main { max-width:1000px; padding:14px 22px 50px; margin:auto; }
.skip { position:fixed; top:-100px; left:12px; padding:12px; z-index:9999; background:white; }
.skip:focus { top:4px; }
.save-status { margin:0 0 12px; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; font-size:.84rem; min-height:28px; }
.save-status button { padding:3px 12px; font-size:.85rem; min-height:44px; }
.save-status.warning { background:#fff0c4; border-radius:12px; padding:10px 14px; }
.panel { border:1px solid var(--lab-line); background:var(--lab-paper); border-radius:25px; padding:30px; box-shadow:0 7px 0 #d6e9e3; margin-bottom:20px; }
.eyebrow { color:var(--lab-teal); font-size:.83rem; font-weight:750; letter-spacing:.07em; margin-bottom:7px; }
.hero { display:grid; grid-template-columns:1.3fr .8fr; gap:24px; align-items:center; }
.hero-art { width:100%; max-width:320px; justify-self:center; }
.hero .lead { font-size:1.1rem; }
.tag { border-radius:30px; background:#e0f1eb; color:#17554d; padding:5px 12px; display:inline-block; font-size:.8rem; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 6px; }
.actions>* { flex:1 1 170px; }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:20px 0; }
.stat { border:1px solid var(--lab-line); border-radius:13px; padding:12px 8px; text-align:center; background:#f2f8f6; }
.stat b { display:block; font-size:1.4rem; }
.stat span { font-size:.85rem; }
.theme-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.theme { border-top:4px solid var(--lab-teal); padding:16px; background:#f0f7f3; border-radius:12px; }
.theme:nth-child(2) { border-color:#d05f50; }.theme:nth-child(3) { border-color:#d0a026; }
.theme p:last-child { margin:0; }
.steps { display:flex; gap:5px; margin:10px 0 18px; padding:0; list-style:none; }
.steps li { flex:1; text-align:center; padding:5px 1px; border-bottom:3px solid #d5e2df; font-size:.8rem; }
.steps .current { border-color:var(--lab-teal); font-weight:800; color:#075d59; }
.topline { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; }
.topline p { margin:0; }
.experiment-figure { margin:14px 0; }
.lab { border:1px solid #bad4d7; border-radius:18px; background:#edf7f9; overflow:hidden; }
.lab svg { width:100%; display:block; height:auto; }
.model-note { font-size:.8rem; line-height:1.6; color:var(--lab-muted); margin:6px 3px 0; }
.lab-label { font-size:.8rem; color:var(--lab-muted); margin:14px 0 -8px; }
.moving { will-change:transform; }
.observation { padding:12px 16px; border-radius:12px; border-left:5px solid var(--lab-teal); background:#e2f3ed; margin:12px 0; min-height:54px; }
.control-group { border:0; padding:0; margin:12px 0; }
.control-group legend { font-size:.86rem; margin-bottom:5px; font-weight:700; }
.controls { display:flex; flex-wrap:wrap; gap:8px; }.controls>* { flex:1 1 100px; }
.choice-list { display:grid; gap:10px; margin:14px 0; }.choice-list button { text-align:left; justify-content:flex-start; width:100%; }
.checklist { padding:0; list-style:none; font-size:.85rem; display:flex; flex-wrap:wrap; gap:5px 14px; margin:10px 0; }
.checklist li { color:#425c65; }.checklist .done { color:#005c41; font-weight:700; }
.question-box { background:#fff; border:2px solid #9dbdbf; padding:20px; border-radius:18px; margin:16px 0; }
.feedback { background:#e7f4eb; border-color:#31805d; }.feedback.rethink { background:#fff3cd; border-color:#a9802a; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.discovery { border:1px solid #c6d9d2; background:#fff; padding:18px; border-radius:15px; }
.discovery.locked { background:#f4f5ef; }
.card-replay { width:100%; margin-top:8px; font-size:.9rem; padding:10px 8px; }
.replay-note { margin-top:16px; font-size:.85rem; }
.stamp { display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; margin-bottom:14px; vertical-align:top; }
.stamp.completed { width:5rem; height:5rem; flex-shrink:0; flex-direction:column; gap:2px; padding:8px 3px; border:3px solid currentColor; border-radius:50%; color:#b42e32; background:#fff5f1; box-shadow:inset 0 0 0 3px #fff5f1,inset 0 0 0 4px currentColor; font-weight:800; line-height:1.3; transform:rotate(-8deg); }
.stamp-check { font-size:1.3rem; line-height:1; }
.stamp-label { white-space:nowrap; }
.stamp.pending { padding:4px 10px; min-height:30px; border:1px solid #c5ceca; border-radius:6px; background:#e9eeeb; color:#53615b; }
.foot-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; padding-top:18px; border-top:1px solid #d5ded9; }
.foot-actions>* { flex:1 1 180px; }
details { border-top:1px solid #ceddd5; padding-top:14px; margin-top:22px; font-size:.87rem; }
summary { cursor:pointer; min-height:44px; font-weight:700; }
.end-note { padding:16px; background:#fff1c5; border:1px solid #ab8524; border-radius:13px; margin:12px 0; }
.empty { padding:24px 0; text-align:center; }
.recovery-options { border:0; padding:0; margin:20px 0; min-width:0; }
.recovery-options legend { font-weight:700; margin-bottom:12px; }
.recovery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.recovery-card { display:block; min-width:0; border:2px solid var(--lab-line); border-radius:15px; background:#fff; padding:16px; cursor:pointer; }
.recovery-card.selected { border-color:var(--lab-teal); background:#e9f6f0; }
.recovery-card:focus-within { outline:3px solid #ad5500; outline-offset:3px; }
.recovery-choice { display:flex; align-items:center; gap:10px; min-height:48px; }
.recovery-choice input { flex:none; width:22px; height:22px; margin:0; accent-color:var(--lab-teal); }
.recovery-summary { margin:12px 0 0; font-size:.9rem; }
.recovery-summary>div { border-top:1px solid var(--lab-line); padding:9px 0; }
.recovery-summary dt { color:var(--lab-muted); font-size:.85rem; }
.recovery-summary dd { margin:2px 0 0; font-weight:650; overflow-wrap:anywhere; }
@media (max-width:600px) {
 #main { padding:9px 12px 30px; }.panel { padding:19px 16px; border-radius:20px; }
 .hero { gap:8px; grid-template-columns:1fr; }.hero-art { max-width:210px; order:-1; }
 .hero .lead { font-size:1rem; }.theme-list { grid-template-columns:1fr; }.theme { padding:11px 14px; }
 .theme h3 { margin:0 0 4px; }.card-grid { grid-template-columns:1fr; }
 .question-box { padding:14px; }.stats { gap:6px; }.stat { padding:8px 3px; }.stat b { font-size:1.2rem; }
 .actions { gap:10px; }.lab-label { font-size:.75rem; }.control-group { margin:10px 0; }
 .hero-art text { font-size:24px; }
 .recovery-grid { grid-template-columns:1fr; }.recovery-card { padding:12px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

/* Keep the next action in reach while leaving explanations and observations scrollable. */
@media(max-width:700px),(max-height:500px) and (max-width:1000px){
  #app:has([data-action="complete"]){padding-bottom:calc(128px + env(safe-area-inset-bottom,0px))}
  #app :is([data-action="complete"]){position:fixed;z-index:20;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));display:block;width:auto;margin:0;min-height:52px;padding:10px 12px;border-radius:14px;box-shadow:0 0 0 6px #fffdf7,0 -4px 18px #073e7d24}
}