Spaces:

MIS-752
/

lab09-lite

Running

Try it live on Hugging Face (with a screenshot); own card colors

545dc76 verified 24 days ago

16 kB

/* MIS 752 Lite labs: shared look. One file for every no-code lab page. */
:root {color-scheme: light;}
html, body {margin: 0; background: #f7f3ec; color: #111;}
.page {max-width: 100%; padding: 26px 2.5vw 70px; font-size: 18px; line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;}
textarea, input[type=text], input[type=password], select {width: 100%; box-sizing: border-box; font: inherit;
  font-size: 1.1rem; padding: 12px 14px; border: 2px solid #d4d4d8; border-radius: 12px; background: #fff; color: #111;}
textarea {resize: vertical;}
textarea:focus, input:focus, select:focus {outline: none; border-color: #B10202;}
.field {background: #fff; border: 2px solid #e4e4e7; border-radius: 16px; padding: 14px 16px; margin: 12px 0;}
.field > label {display: block; font-weight: 800; font-size: 1.12rem; margin-bottom: 8px;}
.row {display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch;}
.row > .field {flex: 1 1 260px; margin: 6px 0;}
.checkfield {display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; flex: 0 0 auto !important;}
.checkfield input {width: 22px; height: 22px;}
button {cursor: pointer; font: inherit;}
button:disabled {opacity: .55; cursor: wait;}
.btnrow {display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 14px 0;}
button.runbtn, button.dlbtn {width: 100%; margin: 6px 0;}
button.predbtn.selected {background: #111 !important; color: #fff !important; border-color: #111 !important;}
.design {display: grid; grid-template-columns: 3fr 2fr; gap: 22px; align-items: start;}
.design .side {position: sticky; top: 16px;}
.status {font-size: 1rem; color: #555; margin: 4px 0;}

/* bigger and bolder: everything sized for a projector or a laptop across the room */
.page {max-width: 100% !important; width: 100% !important; padding: 0 2.5vw !important; box-sizing: border-box;
  background: #f7f3ec !important; font-size: 18px !important;}
body *:not(code):not(.nm):not(.term):not(.oform):not(.oform *) {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;}
.predlabel {font-size: 1.3rem; font-weight: 800; color: #111; margin: 6px 0 2px 0;}
button.predbtn {font-size: 1.35rem !important; font-weight: 800 !important; padding: 16px !important;
  border-radius: 999px !important; background: #fff !important; color: #111 !important; border: 3px solid #c4c4c8 !important;}
button.predbtn:hover {border-color: #111 !important;}
button.predbtn.primary {background: #111 !important; color: #fff !important; border-color: #111 !important;}
.read {display: inline-block; margin-top: 18px; padding: 14px 20px; border-radius: 14px; background: #B10202;
  color: #fff !important; font-size: 1.3rem; text-decoration: none !important;}
.read b {color: #fff !important;}
button.runbtn {font-size: 1.45rem !important; font-weight: 900 !important; padding: 18px !important;
  background: #B10202 !important; border: none !important; color: #fff !important; border-radius: 14px !important;}
button.runbtn:hover {background: #8a0101 !important;}
.sec {border-left: 12px solid #B10202; padding: 6px 0 6px 20px; margin: 46px 0 14px 0;}
.sec h2 {font-size: 2.3rem !important; font-weight: 900 !important; margin: 0 !important; color: #111 !important;}
.sec p {font-size: 1.25rem; color: #333 !important; margin: 6px 0 0 0;}
.hero {background: #fff; border-radius: 22px; padding: 30px; box-shadow: 0 4px 18px rgba(0,0,0,.10);
  border-top: 10px solid #B10202;}
.hero h1 {font-size: 3.4rem; font-weight: 900; margin: 0 0 6px 0; color: #111;}
.hero .sub {color: #555; font-size: 1.25rem; margin-bottom: 24px;}
.map {display: grid; grid-template-columns: 170px repeat(9, auto); gap: 12px 8px; align-items: center;}
.map .lab {font-weight: 900; color: #B10202; font-size: 1.15rem; text-transform: uppercase;}
.map .cell {background: #f1f1f3; border: 3px solid #d4d4d8; border-radius: 16px; padding: 14px 10px; text-align: center; color: #111;}
.map .cell .ic {font-size: 3.2rem; display: block; line-height: 1.2;}
.map .cell .tx {font-size: 1.15rem; font-weight: 800;}
.map .ar {font-size: 2.2rem; font-weight: 900; color: #B10202; text-align: center;}
.hero .cap {margin-top: 22px; font-size: 1.45rem; line-height: 1.45; color: #111;}
.tools {display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;}
.tool {background: #fff; border: 3px solid #e4e4e7; border-radius: 20px; padding: 24px; text-align: center;
  box-shadow: 0 3px 12px rgba(0,0,0,.08);}
.tool .ic {font-size: 4.2rem; line-height: 1.2;} .tool .vb {font-size: 2.1rem; font-weight: 900; color: #111;}
.tool .wh {font-size: 1.25rem; color: #333;} .tool .nm {font-size: .95rem; color: #888; font-family: monospace;}
.qbubble {background: #fff; border: 4px solid #111; border-radius: 22px; padding: 22px 26px; font-size: 1.9rem;
  font-weight: 700; color: #111; margin: 14px 0;}
.qbubble .why {display: block; font-size: 1.2rem; font-weight: 500; color: #555; margin-top: 8px;}
.pair {display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 10px;}
.panel {border-radius: 20px; padding: 20px; min-height: 140px; color: #111;}
.panel.without {background: #ffe9e9; border: 5px solid #d64545;}
.panel.with {background: #e4f6e9; border: 5px solid #2f9e55;}
.p-head {font-size: 1.8rem; font-weight: 900; margin-bottom: 12px; color: #111;}
.p-head span {display: block; font-size: 1.15rem; font-weight: 600; color: #444;}
.step {display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 14px; padding: 14px 16px;
  margin: 10px 0; border: 3px solid #d4d4d8;}
.step.new {animation: pop .45s ease-out;}
.step.model {border-color: #3b82f6;} .step.system {border-color: #22c55e;}
.step.nolook {border-style: dashed; border-color: #ef4444; background: #fff7f7;}
.step.wait {border-style: dotted; color: #555;}
.s-icon {font-size: 2.5rem;} .s-who {font-size: .95rem; font-weight: 900; text-transform: uppercase; color: #444;}
.s-text {font-size: 1.3rem; font-weight: 600; color: #111;}
.answer {background: #fff8db; border: 3px solid #111; border-radius: 16px; padding: 16px 18px; margin-top: 14px;
  font-size: 1.35rem; line-height: 1.4; color: #111;}
.a-label {font-size: .95rem; font-weight: 900; text-transform: uppercase; color: #444; margin-bottom: 6px;}
.verdict {display: flex; gap: 14px; align-items: center; margin-top: 16px; padding: 14px 18px; border-radius: 16px;
  border: 3px solid transparent;}
.verdict.ok {background: #bbf7d0; border-color: #16a34a;} .verdict.meh {background: #fde68a; border-color: #d97706;}
.verdict.bad {background: #fecaca; border-color: #dc2626;}
.v-emo {font-size: 2.6rem;} .v-label {font-size: 1.9rem; font-weight: 900; color: #111;}
.v-mean {font-size: 1.2rem; font-weight: 600; color: #333;}
.pred, .truth, .note {margin-top: 16px; padding: 16px 20px; border-radius: 16px; font-size: 1.3rem; color: #111;}
.pred.hit {background: #bbf7d0; border: 3px solid #16a34a;} .pred.miss {background: #fde68a; border: 3px solid #d97706;}
.truth {background: #fff; border: 3px solid #111;}
.note {background: #ffedd5; border: 3px solid #f97316;} .note.big {font-size: 1.45rem;}
.board {background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 3px 12px rgba(0,0,0,.08); color: #111;
  border: 3px solid #e4e4e7;}
.b-title, .b-empty {font-size: 1.5rem; font-weight: 900;} .b-key {color: #444; font-size: 1.1rem; margin-top: 10px;}
.tiles {display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px;}
.tile {border-radius: 18px; padding: 18px; text-align: center;}
.tile.without {background: #ffe9e9; border: 4px solid #d64545;} .tile.with {background: #e4f6e9; border: 4px solid #2f9e55;}
.t-title {font-weight: 900; font-size: 1.4rem;} .t-row {display: flex; justify-content: center; gap: 30px;
  font-size: 2.8rem; font-weight: 900; margin-top: 8px;}
.oform {background: #fff; border: 3px solid #111; border-radius: 8px; padding: 18px; font-family: Georgia, serif !important;
  color: #111; font-size: 1.1rem;}
.oform * {font-family: Georgia, serif !important;}
.oform .fh {font-family: monospace !important; font-size: 1rem; letter-spacing: .12em; color: #B10202; font-weight: 900;}
.oform .fn {font-size: 1.5rem; font-weight: 900; margin: 6px 0;}
.oform .fl {font-size: .9rem; color: #666; text-transform: uppercase; margin-top: 10px; font-weight: 700;}
.oforms {display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;}
.handin {background: #fff; border-radius: 20px; padding: 24px; font-size: 1.3rem; line-height: 1.5; color: #111;
  border: 3px solid #e4e4e7;}
.handin li {margin: 12px 0;}
.keystat {margin-top: 10px; padding: 14px 18px; border-radius: 14px; font-size: 1.25rem; color: #111;}
.keystat.ok {background: #bbf7d0; border: 3px solid #16a34a;} .keystat.bad {background: #fecaca; border: 3px solid #dc2626;}
.keystat.meh {background: #fde68a; border: 3px solid #d97706;}
details.out {margin-top: 14px;}
details.out summary {cursor: pointer; font-size: 1.15rem; font-weight: 800; color: #111; padding: 10px 14px;
  background: #fff; border: 3px solid #111; border-radius: 12px;}
details.out[open] summary {border-radius: 12px 12px 0 0;}
details.out summary {list-style: none;} details.out summary::-webkit-details-marker {display: none;}
details.out summary::before {content: "▸  ";} details.out[open] summary::before {content: "▾  ";}
pre.term {margin: 0; background: #0b1020; color: #a7f3d0; font-size: .95rem; line-height: 1.45; padding: 16px;
  border-radius: 0 0 12px 12px; white-space: pre-wrap; word-break: break-word; max-height: 480px; overflow: auto;
  border: 3px solid #111; border-top: none;}
pre.term, pre.term * {font-family: Menlo, Consolas, monospace !important;}
.think {background: #fff; border: 3px solid #2563eb; border-radius: 16px; padding: 16px 20px; margin-top: 14px; color: #111;}
.th-head {font-size: 1.35rem; font-weight: 900; margin-bottom: 6px;}
.think li {font-size: 1.2rem; margin: 8px 0; line-height: 1.4;}
.read-alt {margin-top: 8px; font-size: 1rem; color: #555;} .read-alt a {color: #B10202;}
.excard {background: #fff; border: 4px solid #111; border-radius: 22px; padding: 10px 22px; margin: 14px 0;}
.exrow {display: grid; grid-template-columns: 11rem 1fr; gap: 14px; align-items: baseline; padding: 12px 0;
  border-bottom: 2px solid #eee;}
.exrow:last-child {border-bottom: none;}
.tag {display: inline-block; font-size: 1rem; font-weight: 900; letter-spacing: .06em; padding: 6px 12px;
  border-radius: 999px; text-align: center;}
.tag.goal {background: #dbeafe; color: #1e3a8a;} .tag.q {background: #111; color: #fff;}
.tag.why {background: #fef3c7; color: #78350f;}
.extx {font-size: 1.3rem; color: #111;} .extx.qtext {font-size: 1.75rem; font-weight: 800;}
.p-top {display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px;}
.p-title {font-size: 1.7rem; font-weight: 900; color: #111;} .p-sub {font-size: 1.1rem; font-weight: 600; color: #444;}
.vpill {display: flex; gap: 10px; align-items: center; padding: 8px 16px; border-radius: 16px; border: 3px solid;
  max-width: 55%;}
.vpill.ok {background: #bbf7d0; border-color: #16a34a;} .vpill.meh {background: #fde68a; border-color: #d97706;}
.vpill.bad {background: #fecaca; border-color: #dc2626;}
.vpill .v-emo {font-size: 2.1rem;} .vpill .v-label {display: block; font-size: 1.35rem; font-weight: 900; color: #111;}
.vpill .v-mean {display: block; font-size: .95rem; font-weight: 600; color: #333;}
.answer.waiting {color: #666; font-style: italic;}
.tl {margin-top: 16px;}
.tl-head {font-size: .95rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: #555; margin-bottom: 6px;}
.tl-row {display: grid; grid-template-columns: 2.6rem 8.5rem 1fr; gap: 6px; align-items: start; padding: 8px 0 8px 12px;
  margin-left: 10px; border-left: 4px solid #cbd5e1;}
.tl-row.new {animation: pop .45s ease-out;}
.tl-row.model {border-left-color: #3b82f6;} .tl-row.system {border-left-color: #22c55e;}
.tl-row.nolook {border-left-color: #ef4444; border-left-style: dashed;}
.tl-ic {font-size: 1.7rem; line-height: 1;} .tl-who {font-size: .9rem; font-weight: 900; text-transform: uppercase;
  color: #555; padding-top: 4px;}
.tl-tx {font-size: 1.15rem; font-weight: 600; color: #111;}
.sumrow {display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;}
.sumrow .pred, .sumrow .truth {margin-top: 0;}
.map .cell.photo {padding: 8px; background: #fff;}
.map .cell.photo img {width: 100%; height: 104px; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 6px;}
.hero .credits {font-size: .85rem; color: #888; margin-top: 8px;}
.excard.has-photo {display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: center; padding: 18px 22px;}
.exfig {margin: 0;} .exfig img {width: 100%; border-radius: 14px; display: block;}
.exfig figcaption {font-size: .8rem; color: #888; margin-top: 4px;}
.oform.mine {border: 4px solid #B10202; box-shadow: 6px 6px 0 #B10202; margin-bottom: 14px;}
.panel.mine {background: #eef4ff; border-color: #2563eb;}
button.dlbtn {font-size: 1.45rem !important; font-weight: 900 !important; padding: 18px !important;
  background: #15803d !important; color: #fff !important; border: none !important; border-radius: 14px !important;}
/* Thinking aids shared by every Lite lab: book links, model answers, self-checks, live demos. */
a.bookref {display: inline-block; margin: 12px 10px 0 0; padding: 9px 14px; border-radius: 12px; background: #fff1f1;
  border: 2px solid #B10202; color: #B10202 !important; font-weight: 800; font-size: 1.05rem; text-decoration: none;}
a.bookref:hover {background: #B10202; color: #fff !important;}
.ma-btn {margin-top: 10px; padding: 12px 18px; border-radius: 12px; border: 3px solid #2563eb; background: #fff; color: #1e3a8a;
  font: inherit; font-weight: 800; font-size: 1.1rem; cursor: pointer;}
.ma-btn:disabled {opacity: .45; cursor: not-allowed;}
.ma-hint {font-size: 1rem; color: #555; margin-left: 12px;}
.ma-box {margin-top: 12px; background: #eff6ff; border: 3px solid #2563eb; border-radius: 16px; padding: 14px 18px;
  font-size: 1.2rem; line-height: 1.5; color: #111;}
.ma-label {font-weight: 900; color: #1e3a8a; margin-bottom: 6px;}
.checks {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 18px;}
.check {background: #fff; border: 3px solid #111; border-radius: 16px; padding: 14px 18px; color: #111;}
.check summary {cursor: pointer; font-weight: 900; font-size: 1.2rem; line-height: 1.35; list-style: none;}
.check summary::-webkit-details-marker {display: none;}
.check summary::before {content: "❓ ";} .check[open] summary::before {content: "💡 ";}
.check p {font-size: 1.15rem; line-height: 1.5; margin: 10px 0 0 0;}
.live {background: #f0fdf4; border: 3px solid #16a34a; border-radius: 20px; padding: 20px 24px; color: #111; font-size: 1.2rem; line-height: 1.5;}
.live h3 {margin: 0 0 8px 0; font-size: 1.5rem; font-weight: 900; color: #111;}
.live li {margin: 6px 0;}
.live a.go {display: inline-block; margin: 8px 0 4px 0; padding: 12px 18px; border-radius: 12px; background: #16a34a;
  color: #fff !important; font-weight: 800; text-decoration: none;}
/* A live demo with a screenshot of it: picture left, steps right; stacked on a phone. */
.live.hf {display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 24px; align-items: start;}
.live.hf img.hfshot {width: 100%; border-radius: 12px; border: 2px solid #16a34a; display: block; box-shadow: 0 4px 14px rgba(0,0,0,.12);}
.live.hf .shotcap {font-size: .85rem; color: #555; margin-top: 4px;}
@media (max-width: 1000px) {.live.hf {grid-template-columns: 1fr;}}
@keyframes pop {from {opacity: 0; transform: translateY(8px) scale(.98);} to {opacity: 1; transform: none;}}
@media (max-width: 1000px) {.pair, .tools, .oforms, .tiles, .excard.has-photo, .sumrow {grid-template-columns: 1fr;}
  .map {grid-template-columns: 1fr;} .map .ar {transform: rotate(90deg);}}

	/* MIS 752 Lite labs: shared look. One file for every no-code lab page. */
	:root {color-scheme: light;}
	html, body {margin: 0; background: #f7f3ec; color: #111;}
	.page {max-width: 100%; padding: 26px 2.5vw 70px; font-size: 18px; line-height: 1.4;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;}
	textarea, input[type=text], input[type=password], select {width: 100%; box-sizing: border-box; font: inherit;
	font-size: 1.1rem; padding: 12px 14px; border: 2px solid #d4d4d8; border-radius: 12px; background: #fff; color: #111;}
	textarea {resize: vertical;}
	textarea:focus, input:focus, select:focus {outline: none; border-color: #B10202;}
	.field {background: #fff; border: 2px solid #e4e4e7; border-radius: 16px; padding: 14px 16px; margin: 12px 0;}
	.field > label {display: block; font-weight: 800; font-size: 1.12rem; margin-bottom: 8px;}
	.row {display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch;}
	.row > .field {flex: 1 1 260px; margin: 6px 0;}
	.checkfield {display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; flex: 0 0 auto !important;}
	.checkfield input {width: 22px; height: 22px;}
	button {cursor: pointer; font: inherit;}
	button:disabled {opacity: .55; cursor: wait;}
	.btnrow {display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 14px 0;}
	button.runbtn, button.dlbtn {width: 100%; margin: 6px 0;}
	button.predbtn.selected {background: #111 !important; color: #fff !important; border-color: #111 !important;}
	.design {display: grid; grid-template-columns: 3fr 2fr; gap: 22px; align-items: start;}
	.design .side {position: sticky; top: 16px;}
	.status {font-size: 1rem; color: #555; margin: 4px 0;}

	/* bigger and bolder: everything sized for a projector or a laptop across the room */
	.page {max-width: 100% !important; width: 100% !important; padding: 0 2.5vw !important; box-sizing: border-box;
	background: #f7f3ec !important; font-size: 18px !important;}
	body :not(code):not(.nm):not(.term):not(.oform):not(.oform ) {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;}
	.predlabel {font-size: 1.3rem; font-weight: 800; color: #111; margin: 6px 0 2px 0;}
	button.predbtn {font-size: 1.35rem !important; font-weight: 800 !important; padding: 16px !important;
	border-radius: 999px !important; background: #fff !important; color: #111 !important; border: 3px solid #c4c4c8 !important;}
	button.predbtn:hover {border-color: #111 !important;}
	button.predbtn.primary {background: #111 !important; color: #fff !important; border-color: #111 !important;}
	.read {display: inline-block; margin-top: 18px; padding: 14px 20px; border-radius: 14px; background: #B10202;
	color: #fff !important; font-size: 1.3rem; text-decoration: none !important;}
	.read b {color: #fff !important;}
	button.runbtn {font-size: 1.45rem !important; font-weight: 900 !important; padding: 18px !important;
	background: #B10202 !important; border: none !important; color: #fff !important; border-radius: 14px !important;}
	button.runbtn:hover {background: #8a0101 !important;}
	.sec {border-left: 12px solid #B10202; padding: 6px 0 6px 20px; margin: 46px 0 14px 0;}
	.sec h2 {font-size: 2.3rem !important; font-weight: 900 !important; margin: 0 !important; color: #111 !important;}
	.sec p {font-size: 1.25rem; color: #333 !important; margin: 6px 0 0 0;}
	.hero {background: #fff; border-radius: 22px; padding: 30px; box-shadow: 0 4px 18px rgba(0,0,0,.10);
	border-top: 10px solid #B10202;}
	.hero h1 {font-size: 3.4rem; font-weight: 900; margin: 0 0 6px 0; color: #111;}
	.hero .sub {color: #555; font-size: 1.25rem; margin-bottom: 24px;}
	.map {display: grid; grid-template-columns: 170px repeat(9, auto); gap: 12px 8px; align-items: center;}
	.map .lab {font-weight: 900; color: #B10202; font-size: 1.15rem; text-transform: uppercase;}
	.map .cell {background: #f1f1f3; border: 3px solid #d4d4d8; border-radius: 16px; padding: 14px 10px; text-align: center; color: #111;}
	.map .cell .ic {font-size: 3.2rem; display: block; line-height: 1.2;}
	.map .cell .tx {font-size: 1.15rem; font-weight: 800;}
	.map .ar {font-size: 2.2rem; font-weight: 900; color: #B10202; text-align: center;}
	.hero .cap {margin-top: 22px; font-size: 1.45rem; line-height: 1.45; color: #111;}
	.tools {display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;}
	.tool {background: #fff; border: 3px solid #e4e4e7; border-radius: 20px; padding: 24px; text-align: center;
	box-shadow: 0 3px 12px rgba(0,0,0,.08);}
	.tool .ic {font-size: 4.2rem; line-height: 1.2;} .tool .vb {font-size: 2.1rem; font-weight: 900; color: #111;}
	.tool .wh {font-size: 1.25rem; color: #333;} .tool .nm {font-size: .95rem; color: #888; font-family: monospace;}
	.qbubble {background: #fff; border: 4px solid #111; border-radius: 22px; padding: 22px 26px; font-size: 1.9rem;
	font-weight: 700; color: #111; margin: 14px 0;}
	.qbubble .why {display: block; font-size: 1.2rem; font-weight: 500; color: #555; margin-top: 8px;}
	.pair {display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 10px;}
	.panel {border-radius: 20px; padding: 20px; min-height: 140px; color: #111;}
	.panel.without {background: #ffe9e9; border: 5px solid #d64545;}
	.panel.with {background: #e4f6e9; border: 5px solid #2f9e55;}
	.p-head {font-size: 1.8rem; font-weight: 900; margin-bottom: 12px; color: #111;}
	.p-head span {display: block; font-size: 1.15rem; font-weight: 600; color: #444;}
	.step {display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 14px; padding: 14px 16px;
	margin: 10px 0; border: 3px solid #d4d4d8;}
	.step.new {animation: pop .45s ease-out;}
	.step.model {border-color: #3b82f6;} .step.system {border-color: #22c55e;}
	.step.nolook {border-style: dashed; border-color: #ef4444; background: #fff7f7;}
	.step.wait {border-style: dotted; color: #555;}
	.s-icon {font-size: 2.5rem;} .s-who {font-size: .95rem; font-weight: 900; text-transform: uppercase; color: #444;}
	.s-text {font-size: 1.3rem; font-weight: 600; color: #111;}
	.answer {background: #fff8db; border: 3px solid #111; border-radius: 16px; padding: 16px 18px; margin-top: 14px;
	font-size: 1.35rem; line-height: 1.4; color: #111;}
	.a-label {font-size: .95rem; font-weight: 900; text-transform: uppercase; color: #444; margin-bottom: 6px;}
	.verdict {display: flex; gap: 14px; align-items: center; margin-top: 16px; padding: 14px 18px; border-radius: 16px;
	border: 3px solid transparent;}
	.verdict.ok {background: #bbf7d0; border-color: #16a34a;} .verdict.meh {background: #fde68a; border-color: #d97706;}
	.verdict.bad {background: #fecaca; border-color: #dc2626;}
	.v-emo {font-size: 2.6rem;} .v-label {font-size: 1.9rem; font-weight: 900; color: #111;}
	.v-mean {font-size: 1.2rem; font-weight: 600; color: #333;}
	.pred, .truth, .note {margin-top: 16px; padding: 16px 20px; border-radius: 16px; font-size: 1.3rem; color: #111;}
	.pred.hit {background: #bbf7d0; border: 3px solid #16a34a;} .pred.miss {background: #fde68a; border: 3px solid #d97706;}
	.truth {background: #fff; border: 3px solid #111;}
	.note {background: #ffedd5; border: 3px solid #f97316;} .note.big {font-size: 1.45rem;}
	.board {background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 3px 12px rgba(0,0,0,.08); color: #111;
	border: 3px solid #e4e4e7;}
	.b-title, .b-empty {font-size: 1.5rem; font-weight: 900;} .b-key {color: #444; font-size: 1.1rem; margin-top: 10px;}
	.tiles {display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px;}
	.tile {border-radius: 18px; padding: 18px; text-align: center;}
	.tile.without {background: #ffe9e9; border: 4px solid #d64545;} .tile.with {background: #e4f6e9; border: 4px solid #2f9e55;}
	.t-title {font-weight: 900; font-size: 1.4rem;} .t-row {display: flex; justify-content: center; gap: 30px;
	font-size: 2.8rem; font-weight: 900; margin-top: 8px;}
	.oform {background: #fff; border: 3px solid #111; border-radius: 8px; padding: 18px; font-family: Georgia, serif !important;
	color: #111; font-size: 1.1rem;}
	.oform * {font-family: Georgia, serif !important;}
	.oform .fh {font-family: monospace !important; font-size: 1rem; letter-spacing: .12em; color: #B10202; font-weight: 900;}
	.oform .fn {font-size: 1.5rem; font-weight: 900; margin: 6px 0;}
	.oform .fl {font-size: .9rem; color: #666; text-transform: uppercase; margin-top: 10px; font-weight: 700;}
	.oforms {display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;}
	.handin {background: #fff; border-radius: 20px; padding: 24px; font-size: 1.3rem; line-height: 1.5; color: #111;
	border: 3px solid #e4e4e7;}
	.handin li {margin: 12px 0;}
	.keystat {margin-top: 10px; padding: 14px 18px; border-radius: 14px; font-size: 1.25rem; color: #111;}
	.keystat.ok {background: #bbf7d0; border: 3px solid #16a34a;} .keystat.bad {background: #fecaca; border: 3px solid #dc2626;}
	.keystat.meh {background: #fde68a; border: 3px solid #d97706;}
	details.out {margin-top: 14px;}
	details.out summary {cursor: pointer; font-size: 1.15rem; font-weight: 800; color: #111; padding: 10px 14px;
	background: #fff; border: 3px solid #111; border-radius: 12px;}
	details.out[open] summary {border-radius: 12px 12px 0 0;}
	details.out summary {list-style: none;} details.out summary::-webkit-details-marker {display: none;}
	details.out summary::before {content: "▸ ";} details.out[open] summary::before {content: "▾ ";}
	pre.term {margin: 0; background: #0b1020; color: #a7f3d0; font-size: .95rem; line-height: 1.45; padding: 16px;
	border-radius: 0 0 12px 12px; white-space: pre-wrap; word-break: break-word; max-height: 480px; overflow: auto;
	border: 3px solid #111; border-top: none;}
	pre.term, pre.term * {font-family: Menlo, Consolas, monospace !important;}
	.think {background: #fff; border: 3px solid #2563eb; border-radius: 16px; padding: 16px 20px; margin-top: 14px; color: #111;}
	.th-head {font-size: 1.35rem; font-weight: 900; margin-bottom: 6px;}
	.think li {font-size: 1.2rem; margin: 8px 0; line-height: 1.4;}
	.read-alt {margin-top: 8px; font-size: 1rem; color: #555;} .read-alt a {color: #B10202;}
	.excard {background: #fff; border: 4px solid #111; border-radius: 22px; padding: 10px 22px; margin: 14px 0;}
	.exrow {display: grid; grid-template-columns: 11rem 1fr; gap: 14px; align-items: baseline; padding: 12px 0;
	border-bottom: 2px solid #eee;}
	.exrow:last-child {border-bottom: none;}
	.tag {display: inline-block; font-size: 1rem; font-weight: 900; letter-spacing: .06em; padding: 6px 12px;
	border-radius: 999px; text-align: center;}
	.tag.goal {background: #dbeafe; color: #1e3a8a;} .tag.q {background: #111; color: #fff;}
	.tag.why {background: #fef3c7; color: #78350f;}
	.extx {font-size: 1.3rem; color: #111;} .extx.qtext {font-size: 1.75rem; font-weight: 800;}
	.p-top {display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px;}
	.p-title {font-size: 1.7rem; font-weight: 900; color: #111;} .p-sub {font-size: 1.1rem; font-weight: 600; color: #444;}
	.vpill {display: flex; gap: 10px; align-items: center; padding: 8px 16px; border-radius: 16px; border: 3px solid;
	max-width: 55%;}
	.vpill.ok {background: #bbf7d0; border-color: #16a34a;} .vpill.meh {background: #fde68a; border-color: #d97706;}
	.vpill.bad {background: #fecaca; border-color: #dc2626;}
	.vpill .v-emo {font-size: 2.1rem;} .vpill .v-label {display: block; font-size: 1.35rem; font-weight: 900; color: #111;}
	.vpill .v-mean {display: block; font-size: .95rem; font-weight: 600; color: #333;}
	.answer.waiting {color: #666; font-style: italic;}
	.tl {margin-top: 16px;}
	.tl-head {font-size: .95rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: #555; margin-bottom: 6px;}
	.tl-row {display: grid; grid-template-columns: 2.6rem 8.5rem 1fr; gap: 6px; align-items: start; padding: 8px 0 8px 12px;
	margin-left: 10px; border-left: 4px solid #cbd5e1;}
	.tl-row.new {animation: pop .45s ease-out;}
	.tl-row.model {border-left-color: #3b82f6;} .tl-row.system {border-left-color: #22c55e;}
	.tl-row.nolook {border-left-color: #ef4444; border-left-style: dashed;}
	.tl-ic {font-size: 1.7rem; line-height: 1;} .tl-who {font-size: .9rem; font-weight: 900; text-transform: uppercase;
	color: #555; padding-top: 4px;}
	.tl-tx {font-size: 1.15rem; font-weight: 600; color: #111;}
	.sumrow {display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;}
	.sumrow .pred, .sumrow .truth {margin-top: 0;}
	.map .cell.photo {padding: 8px; background: #fff;}
	.map .cell.photo img {width: 100%; height: 104px; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 6px;}
	.hero .credits {font-size: .85rem; color: #888; margin-top: 8px;}
	.excard.has-photo {display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: center; padding: 18px 22px;}
	.exfig {margin: 0;} .exfig img {width: 100%; border-radius: 14px; display: block;}
	.exfig figcaption {font-size: .8rem; color: #888; margin-top: 4px;}
	.oform.mine {border: 4px solid #B10202; box-shadow: 6px 6px 0 #B10202; margin-bottom: 14px;}
	.panel.mine {background: #eef4ff; border-color: #2563eb;}
	button.dlbtn {font-size: 1.45rem !important; font-weight: 900 !important; padding: 18px !important;
	background: #15803d !important; color: #fff !important; border: none !important; border-radius: 14px !important;}
	/* Thinking aids shared by every Lite lab: book links, model answers, self-checks, live demos. */
	a.bookref {display: inline-block; margin: 12px 10px 0 0; padding: 9px 14px; border-radius: 12px; background: #fff1f1;
	border: 2px solid #B10202; color: #B10202 !important; font-weight: 800; font-size: 1.05rem; text-decoration: none;}
	a.bookref:hover {background: #B10202; color: #fff !important;}
	.ma-btn {margin-top: 10px; padding: 12px 18px; border-radius: 12px; border: 3px solid #2563eb; background: #fff; color: #1e3a8a;
	font: inherit; font-weight: 800; font-size: 1.1rem; cursor: pointer;}
	.ma-btn:disabled {opacity: .45; cursor: not-allowed;}
	.ma-hint {font-size: 1rem; color: #555; margin-left: 12px;}
	.ma-box {margin-top: 12px; background: #eff6ff; border: 3px solid #2563eb; border-radius: 16px; padding: 14px 18px;
	font-size: 1.2rem; line-height: 1.5; color: #111;}
	.ma-label {font-weight: 900; color: #1e3a8a; margin-bottom: 6px;}
	.checks {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 18px;}
	.check {background: #fff; border: 3px solid #111; border-radius: 16px; padding: 14px 18px; color: #111;}
	.check summary {cursor: pointer; font-weight: 900; font-size: 1.2rem; line-height: 1.35; list-style: none;}
	.check summary::-webkit-details-marker {display: none;}
	.check summary::before {content: "❓ ";} .check[open] summary::before {content: "💡 ";}
	.check p {font-size: 1.15rem; line-height: 1.5; margin: 10px 0 0 0;}
	.live {background: #f0fdf4; border: 3px solid #16a34a; border-radius: 20px; padding: 20px 24px; color: #111; font-size: 1.2rem; line-height: 1.5;}
	.live h3 {margin: 0 0 8px 0; font-size: 1.5rem; font-weight: 900; color: #111;}
	.live li {margin: 6px 0;}
	.live a.go {display: inline-block; margin: 8px 0 4px 0; padding: 12px 18px; border-radius: 12px; background: #16a34a;
	color: #fff !important; font-weight: 800; text-decoration: none;}
	/* A live demo with a screenshot of it: picture left, steps right; stacked on a phone. */
	.live.hf {display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 24px; align-items: start;}
	.live.hf img.hfshot {width: 100%; border-radius: 12px; border: 2px solid #16a34a; display: block; box-shadow: 0 4px 14px rgba(0,0,0,.12);}
	.live.hf .shotcap {font-size: .85rem; color: #555; margin-top: 4px;}
	@media (max-width: 1000px) {.live.hf {grid-template-columns: 1fr;}}
	@keyframes pop {from {opacity: 0; transform: translateY(8px) scale(.98);} to {opacity: 1; transform: none;}}
	@media (max-width: 1000px) {.pair, .tools, .oforms, .tiles, .excard.has-photo, .sumrow {grid-template-columns: 1fr;}
	.map {grid-template-columns: 1fr;} .map .ar {transform: rotate(90deg);}}