:root {
  --ink: #172b45;
  --muted: #607080;
  --paper: #fffaf0;
  --cream: #f5ecd3;
  --blue: #175fc4;
  --coral: #ee684f;
  --ochre: #efb83f;
  --mint: #3b9c86;
  font-family: ui-rounded, "Avenir Next", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; }
body { min-width: 1100px; min-height: 720px; overflow: hidden; color: var(--ink); background: #e9e5d8; }
button, input { color: inherit; font: inherit; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 4px solid rgba(23,95,196,.35); outline-offset: 4px; }

.lesson { position: relative; width: min(1300px, calc(100vw - 44px)); height: min(856px, calc(100vh - 30px)); margin: 15px auto; display: grid; grid-template-columns: minmax(0,1fr) 290px; grid-template-rows: minmax(0,1fr) 112px; gap: 14px; }
.light-table { position: relative; min-width: 0; padding: 18px 24px 20px; display: grid; grid-template-rows: 44px 72px minmax(0,1fr) 65px; border: 10px solid #d5bf91; border-radius: 34px; background: #e8ddcb; box-shadow: 0 24px 55px rgba(45,53,52,.18), inset 0 0 28px rgba(238,184,63,.15); overflow: hidden; isolation:isolate; }
.scene-art { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; user-select:none; }
.light-table::after { position:absolute; z-index:-1; inset:0; content:""; pointer-events:none; background:linear-gradient(rgba(255,249,232,.70),rgba(255,249,232,.36)); }
.table-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; }
.table-head > div:first-child { display: flex; flex-direction: column; }
.table-head span, .mission span, .decision span, .metrics span, .finale > span { color: var(--muted); font-size: 10px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.table-head strong { font-size: 14px; }
.table-head > button { justify-self: end; min-height: 42px; padding: 0 14px; border: 0; border-radius: 13px; background: #e4dfd1; font-weight: 850; cursor: pointer; }
.pips { display: flex; gap: 7px; padding-top: 9px; }
.pips i { width: 30px; height: 7px; border-radius: 99px; background: #d6d0c0; }
.pips i.on { background: var(--ochre); }
.pips i.done { background: var(--mint); }

.mission { text-align: center; }
.mission h1 { margin: 4px 0 3px; font-size: 28px; line-height: 1.05; letter-spacing: -.035em; }
.mission p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 650; }
.canvas-shell { position: relative; min-height: 0; overflow: hidden; border: 1px solid rgba(43,56,62,.16); border-radius: 22px; background: rgba(255,251,235,.78); box-shadow:0 12px 32px rgba(58,49,33,.16), inset 0 0 26px rgba(238,184,63,.13); }
#transformCanvas { width: 100%; height: 100%; display: block; }
#transformCanvas { touch-action:none; }
#transformCanvas .preview { cursor:grab; }
#transformCanvas.is-grabbing .preview { cursor:grabbing; filter:drop-shadow(0 10px 10px rgba(56,41,31,.22)); }
.grab-hint { position:absolute; z-index:4; left:50%; bottom:14px; padding:7px 12px; border-radius:999px; color:#fff; background:rgba(23,43,69,.88); font-size:11px; font-weight:950; letter-spacing:.05em; pointer-events:none; transform:translateX(-50%); }
.axis { stroke: #b6b09f; stroke-width: 1.5; }
.original { fill: rgba(23,95,196,.18); stroke: var(--blue); stroke-width: 5; stroke-linejoin: round; }
.preview { fill: rgba(238,104,79,.24); stroke: var(--coral); stroke-width: 5; stroke-linejoin: round; }
.target { fill: rgba(59,156,134,.08); stroke: var(--mint); stroke-width: 6; stroke-dasharray: 12 9; stroke-linejoin: round; }
.trail { stroke: #6b7780; stroke-width: 2.5; stroke-dasharray: 7 7; }
.trail.equal { stroke: var(--mint); }
.vertex { cursor: pointer; fill: #fff; stroke: var(--coral); stroke-width: 5; }
.vertex.failed { fill: var(--ochre); stroke: #8f5e08; animation: pulse 1.1s ease-in-out infinite; }
.mirror-line { stroke: #182b46; stroke-width: 5; stroke-dasharray: 10 8; }
.centre { fill: var(--ochre); stroke: #6f4d0b; stroke-width: 4; }
.vector-arrow { stroke: var(--blue); stroke-width: 6; marker-end: url(#arrow); }
.right-angle { fill: none; stroke: var(--ink); stroke-width: 3; }
.measure-label { fill: var(--ink); font-size: 13px; font-weight: 900; paint-order: stroke; stroke: #fffaf0; stroke-width: 5px; }

.pattern-bloom { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; opacity: .22; pointer-events: none; }
.pattern-bloom i { width: 62px; aspect-ratio: 1; justify-self: center; background: var(--blue); clip-path: polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%); }
.pattern-bloom i:nth-child(even) { background: var(--coral); transform: rotate(180deg) scale(.72); }
.pattern-bloom i:nth-child(3n) { background: var(--ochre); transform: rotate(90deg) scale(.86); }
.pattern-bloom:not([hidden]) i { animation: bloom .6s ease-out both; }
.pattern-bloom i:nth-child(2){animation-delay:.05s}.pattern-bloom i:nth-child(3){animation-delay:.1s}.pattern-bloom i:nth-child(4){animation-delay:.15s}.pattern-bloom i:nth-child(5){animation-delay:.2s}.pattern-bloom i:nth-child(6){animation-delay:.25s}.pattern-bloom i:nth-child(7){animation-delay:.3s}.pattern-bloom i:nth-child(8){animation-delay:.35s}

.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding-top: 10px; }
.metrics > div { min-width: 0; padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,.74); }
.metrics span { display: block; }
.metrics strong { display: block; margin-top: 3px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.control-deck { min-width: 0; padding: 18px; display: grid; grid-template-rows: auto minmax(0,1fr); gap: 16px; border-radius: 30px; background: #fffdf5; box-shadow: 0 18px 42px rgba(40,48,43,.13); }
.mode-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-controls button { min-height: 76px; padding: 10px; display: grid; grid-template-columns: 38px 1fr; align-items: center; border: 2px solid transparent; border-radius: 17px; background: #eeece4; text-align: left; cursor: pointer; }
.mode-controls button b { font-size: 27px; }
.mode-controls button span { font-size: 13px; font-weight: 900; }
.mode-controls button.active { border-color: var(--blue); background: #e6f0ff; box-shadow: 0 5px 0 #b8cce7; }
.mode-controls button:disabled { opacity: .35; cursor: not-allowed; }
.live-control { align-self: center; display: grid; gap: 12px; }
.live-control label { display: grid; gap: 7px; font-size: 12px; font-weight: 900; }
.live-control label span { display: flex; justify-content: space-between; }
.live-control input { width: 100%; accent-color: var(--coral); }
.control-note { padding: 12px; border-radius: 14px; color: var(--muted); background: var(--cream); font-size: 12px; font-weight: 750; line-height: 1.35; }

.decision { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1.6fr; align-items: center; gap: 24px; padding: 19px 28px; border-radius: 26px; background: var(--paper); box-shadow: 0 12px 30px rgba(44,53,48,.12); }
.decision > div:first-child { display: flex; flex-direction: column; gap: 5px; }
.decision > div:first-child strong { font-size: 17px; }
.actions { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.actions button, .finale button { min-height: 52px; padding: 11px 17px; border: 0; border-radius: 15px; background: #e2e8e4; font-weight: 900; cursor: pointer; }
.actions button.primary, .finale button { color: #fff; background: var(--blue); box-shadow: 0 5px 0 #0b3d85; }

.finale { position: absolute; z-index: 30; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; border-radius: 34px; color: #fff; background: rgba(18,40,70,.97); text-align: center; }
.finale > span { color: #ffe18a; }
.finale > strong { max-width: 650px; margin: 10px 0 20px; font-size: 36px; }
.finale > div:last-child { display: flex; gap: 12px; }
.sequence { min-height: 55px; margin-bottom: 18px; display: flex; gap: 8px; align-items: center; }
.sequence i { min-width: 110px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.12); font-style: normal; font-weight: 850; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
.is-pointed { animation: point .7s ease-out 2; }

@keyframes pulse { 50% { transform: scale(1.25); } }
@keyframes bloom { from { opacity: 0; transform: scale(.2) rotate(-40deg); } }
@keyframes point { 50% { filter: drop-shadow(0 0 9px var(--ochre)); } }

@media (max-width: 1180px) {
  .lesson { grid-template-columns: minmax(0,1fr) 255px; }
  .light-table { padding-inline: 16px; }
  .mode-controls button { grid-template-columns: 30px 1fr; }
}

@media (max-width: 1099px), (max-height: 719px) {
  body { min-width: 0; overflow: auto; }
  .lesson { width: min(100% - 24px,900px); height: auto; min-height: calc(100vh - 24px); margin: 12px auto; grid-template-columns: 1fr; grid-template-rows: minmax(700px,78vh) auto auto; }
  .control-deck { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .mode-controls { grid-template-columns: repeat(4,1fr); }
  .mode-controls button { grid-template-columns: 1fr; text-align: center; }
  .decision { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}