*{box-sizing:border-box}body{margin:0;background:#f7f3ec;color:#25314c;font-family:Inter,ui-sans-serif,system-ui,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #6e91c9;outline-offset:2px}[hidden]{display:none!important}.ambient{position:fixed;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.35}.ambient-a{width:360px;height:360px;background:#fac9a5;top:-130px;left:-80px}.ambient-b{width:410px;height:410px;background:#c7e4dd;right:-160px;bottom:-160px}.app{max-width:1320px;padding:18px 30px;margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 0 20px;gap:12px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#27354e}.brand strong{display:block;font-size:1.32rem;letter-spacing:-.06em}.brand small{display:block;font-size:.68rem;color:#8b8792;font-weight:650;letter-spacing:.04em}.brand-accent{color:#e47669}.brand-mark{display:grid;grid-template-columns:repeat(2,12px);gap:3px;transform:rotate(-10deg)}.brand-mark i{width:12px;height:12px;background:#e88979;border-radius:2px}.brand-mark i:nth-child(2){background:#27354e}.brand-mark i:nth-child(3){background:#8fcbbb}.brand-mark i:nth-child(4){background:#efc777}.top-actions{display:flex;align-items:center;gap:12px}.course-tag,.top-button{font-size:.75rem;letter-spacing:.05em;font-weight:750}.course-tag{color:#7c7778}.top-button{border:1px solid #dcd8d4;background:#fffaf5;border-radius:12px;padding:10px 14px;color:#31415e}.top-button span{display:inline-flex;border-radius:50%;width:21px;height:21px;align-items:center;justify-content:center;background:#dce7ee;margin-left:7px}.eyebrow,.panel-kicker,.section-label{font-size:.69rem;font-weight:900;letter-spacing:.12em;color:#a4716c}.spark-dot,.status-dot{display:inline-block;width:8px;height:8px;background:#e78c78;border-radius:50%;margin-right:7px}.intro-grid{min-height:calc(100vh - 150px);display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:50px;padding:25px 0 55px}.intro-copy h1{font-size:clamp(3rem,6.1vw,6.25rem);letter-spacing:-.09em;line-height:1.06;margin:18px 0 24px}.intro-copy h1 em{font-style:normal;color:#e78b78}.intro-lead{font-size:1.16rem;line-height:1.75;max-width:520px;color:#747985}.intro-steps{display:grid;gap:10px;margin:28px 0}.intro-steps div{display:flex;align-items:center;gap:13px}.intro-steps span{font-weight:900;color:#e1937b}.intro-steps p{margin:0;color:#636e7e}.intro-steps b{color:#35425e}.intro-buttons,.finish-actions{display:flex;flex-wrap:wrap;gap:10px}.button{padding:13px 20px;border-radius:12px;border:1px solid transparent;font-weight:800;font-size:.87rem;transition:transform .15s,background .15s}.button:hover{transform:translateY(-1px)}.button-primary{background:#2e3b58;color:white;box-shadow:0 5px 0 #202d46}.button-primary:hover{background:#405577}.button-light{background:#fff;color:#34435f;border-color:#e2ded9}.button-large{padding:17px 25px}.tiny-copy{font-size:.76rem;color:#8e929c;margin-top:25px}.intro-art{position:relative;padding:25px 35px 35px}.intro-art-frame,.panel,.finish-card{background:#fffdf9;border:1px solid #e5dfd7;border-radius:23px;box-shadow:0 17px 48px #4e4c5320}.intro-art-frame{padding:20px;transform:rotate(2deg)}.art-frame-heading{display:flex;align-items:center;color:#747c8a;letter-spacing:.08em;font-size:.7rem;font-weight:850}.art-frame-heading span:last-child{margin-left:auto}.intro-sprite{display:block;margin:22px auto;width:min(100%,310px);height:auto;image-rendering:pixelated;background:#f4f5f6;border-radius:8px}.art-caption{display:flex;justify-content:space-between;color:#91929a;font-size:.8rem}.sticker{position:absolute;z-index:1;background:#f2bf72;padding:13px;border-radius:14px;font-size:.8rem;font-weight:900;box-shadow:0 8px 19px #52505a22;transform:rotate(-10deg)}.sticker-top{right:0;top:4px}.sticker-bottom{left:0;bottom:3px;background:#add9c9;transform:rotate(5deg)}.play-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 0}.play-heading h1{margin:6px 0;font-size:clamp(1.8rem,3vw,2.75rem);letter-spacing:-.065em}.heading-spark{color:#e6a975;font-size:.65em;margin-left:10px}.subhead{color:#80838a;margin:0;font-size:.89rem}.progress-shell{padding:9px 0 17px}.progress-heading{display:flex;justify-content:space-between;margin-bottom:9px;color:#7d8390;font-size:.76rem;font-weight:750}.progress-heading b{color:#283950}.progress-markers{display:flex;gap:5px;margin-bottom:9px}.progress-markers span{flex:1;height:7px;border-radius:5px;background:#dedfdf}.progress-markers span.done{background:#dd8b7b}.progress-track{height:5px;border-radius:8px;background:#e3e1df;overflow:hidden}.progress-fill{width:0;height:100%;background:#71ad9d;transition:width .3s}.game-grid{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(520px,1.2fr);gap:20px;align-items:start}.panel{padding:22px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}.panel-heading h2{font-size:1.32rem;margin:3px 0;letter-spacing:-.045em}.panel-pill,.mode-tag{border-radius:20px;padding:6px 10px;background:#e4efe8;color:#38745f;font-size:.7rem;font-weight:850}.mode-tag{background:#fbe8db;color:#a26a54}.canvas-stage{position:relative;background:#f2eee9;border:1px solid #e5ded5;border-radius:17px;padding:24px;display:flex;align-items:center;justify-content:center}.canvas-stage svg{width:100%;max-width:386px;image-rendering:pixelated;background:#e9e4db;box-shadow:0 6px 25px #4b506520}.board-corner{position:absolute;font-size:23px;color:#bfa995}.top-left{top:5px;left:11px}.bottom-right{bottom:5px;right:11px}.canvas-under{display:flex;justify-content:space-between;align-items:center;margin-top:15px;color:#777f8a;font-size:.73rem}.canvas-legend{display:flex;gap:7px;align-items:center}.canvas-legend i{width:9px;height:9px;background:#65738d;border-radius:2px}.canvas-tip{margin-top:20px;padding:14px;border-radius:12px;background:#f8eee5;color:#9c745f;font-size:.82rem}.canvas-tip span{margin-right:8px}.question-prompt{font-size:.87rem;color:#6e7683;line-height:1.6;margin:-4px 0 15px}.equation-card{background:#f8f3ec;border:1px solid #eee8e0;border-radius:14px;text-align:center;padding:15px 12px;margin:10px 0 18px}.equation-label{color:#a19387;font-size:.65rem;letter-spacing:.12em;font-weight:900}.equation{font-size:clamp(1.2rem,2vw,1.7rem);font-weight:750;margin:7px 0 2px;letter-spacing:.015em}.numberline-heading{display:flex;justify-content:space-between;align-items:center}.interactive-label{font-size:.69rem;color:#438f85;font-weight:850}.numberline-holder{width:100%;background:#faf9f6;border:1px solid #e7e5e1;border-radius:13px;overflow:hidden;margin:8px 0}.numberline-holder svg{display:block;width:100%;height:auto;touch-action:none;user-select:none}.direction-chooser{display:flex;gap:5px;margin:9px 0 14px}.direction-chooser button{flex:1;border:1px solid #dedfe3;border-radius:9px;padding:8px 3px;background:#fff;color:#637082;font-size:.76rem;font-weight:800}.direction-chooser button.selected{border-color:#729ea0;background:#eaf7f1;color:#37696a}.endpoint-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.endpoint-card{border:1px solid #e8e3dc;border-radius:14px;padding:12px;min-width:0}.endpoint-card.active{border-color:#6e8ca7;box-shadow:0 0 0 2px #dde8ee}.endpoint-head{display:flex;align-items:center;gap:8px;font-size:.8rem}.endpoint-marker{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#e8eff8;color:#58729e;font-size:.73rem}.right-marker{background:#fbebe6;color:#c47868}.endpoint-stepper{display:flex;gap:5px;margin:12px 0}.endpoint-stepper button,.endpoint-stepper input{text-align:center;border:1px solid #e4e4e6;background:#f7f7f8;color:#354663;border-radius:8px;min-width:0;height:36px}.endpoint-stepper button{flex:0 0 35px;font-size:1.1rem;font-weight:800}.endpoint-stepper input{flex:1;width:45px;font-weight:800}.circle-buttons{display:flex;gap:5px}.circle-buttons button{flex:1;min-width:0;padding:7px 2px;background:white;border:1px solid #e5e5e7;border-radius:8px;font-size:.72rem;color:#5b6579;font-weight:750;display:flex;align-items:center;justify-content:center;gap:5px}.circle-buttons button.selected{background:#e5f1f6;border-color:#94bdc9;color:#2d5f74}.open-circle,.closed-circle{display:inline-block;width:13px;height:13px;border:2px solid #6984a9;border-radius:50%;flex:none}.closed-circle{background:#6984a9}.read-area .section-label{display:block;margin:13px 0 7px}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.option-grid button{border:1px solid #e0e2e6;border-radius:10px;padding:15px 10px;color:#374766;background:#fff;font-size:1rem;font-weight:700}.option-grid button.selected{border-color:#628d9d;background:#e7f4f3}.working-shell{margin-top:12px}.working-shell label{font-size:.75rem;font-weight:850;color:#596578;display:block;margin-bottom:6px}.working-shell label span{font-weight:400;color:#9b9fa5}.working-shell textarea{width:100%;resize:vertical;border:1px solid #dedfe2;border-radius:10px;padding:10px;min-height:55px}.feedback{font-size:.84rem;border-radius:10px;line-height:1.55}.feedback:not(:empty){padding:12px;margin-top:14px;background:#fff0e8;color:#905c40}.feedback.success:not(:empty){background:#eaf7ef;color:#34705b}.hint-panel{padding:12px;background:#f0f1f8;border-left:3px solid #8392b9;border-radius:7px;margin-top:12px;font-size:.84rem;line-height:1.6}.hint-panel p{margin:0}.question-footer{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid #eeeae4;padding-top:17px;margin-top:18px}.footer-actions{display:flex;gap:8px}.game-foot,.page-footer{display:flex;justify-content:space-between;gap:10px;font-size:.72rem;color:#99949c;margin:20px 0}.finish-screen{display:grid;place-items:center;min-height:75vh}.finish-card{text-align:center;width:min(100%,600px);padding:32px}.finish-card h1{font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.07em;margin:10px 0}.finish-card p{color:#717783;line-height:1.6}.finish-stamp{font-size:.72rem;color:#bd8167;letter-spacing:.13em;font-weight:900}.finished-art-shell{width:min(100%,330px);margin:17px auto;background:#f0e8dc;padding:18px;border-radius:18px}.finished-art-shell svg{display:block;width:100%;image-rendering:pixelated}.finish-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.finish-stats div{border-radius:12px;padding:12px 5px;background:#f4f3f1}.finish-stats b{display:block;font-size:1.45rem}.finish-stats span{font-size:.72rem;color:#8c8992}.finish-actions{justify-content:center}.help-dialog{max-width:520px;border:1px solid #ded9d1;border-radius:22px;padding:0;box-shadow:0 25px 80px #20314c45;color:#2e3d58}.help-dialog::backdrop{background:#202b3c9e}.help-inner{padding:25px}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{margin:0;font-size:1.5rem}.dialog-head button{border:0;background:#f0eee9;width:34px;height:34px;border-radius:10px;font-size:1.5rem}.help-inner>p{line-height:1.6;color:#687284;font-size:.9rem}.help-rule{display:flex;align-items:center;gap:17px;background:#f7f5f1;border-radius:12px;padding:12px;margin:7px 0}.help-rule .open-circle,.help-rule .closed-circle{width:20px;height:20px}.help-rule p{margin:3px 0 0;font-size:.8rem;color:#7d8491}.help-star{font-size:1.4rem;color:#749db1}.dialog-done{width:100%;margin-top:10px}
@media(max-width:1000px){.app{padding:15px}.game-grid{grid-template-columns:minmax(270px,.85fr) minmax(420px,1.2fr);gap:12px}.panel{padding:15px}.intro-grid{gap:15px}.endpoint-card{padding:8px}.endpoint-stepper button{flex-basis:29px}.endpoint-head{font-size:.71rem}}
@media(max-width:740px){.course-tag{display:none}.app{padding:10px 12px}.topbar{padding-bottom:12px}.intro-grid{grid-template-columns:1fr;gap:10px;padding:28px 0}.intro-copy h1{font-size:3.4rem}.intro-art{max-width:400px;margin:auto}.game-grid{grid-template-columns:1fr}.canvas-stage{padding:13px}.canvas-stage svg{max-width:280px}.play-heading{align-items:start}.play-heading h1{font-size:1.8rem}.reset-button{padding:9px;font-size:.7rem}.panel{padding:16px}.game-foot{flex-direction:column}.question-footer{flex-wrap:wrap}.question-footer .footer-actions{margin-left:auto}.finish-card{padding:20px}.intro-lead{font-size:1rem}}
@media(max-width:380px){.endpoint-grid{gap:6px}.endpoint-card{padding:6px}.endpoint-stepper{gap:3px}.endpoint-stepper button{flex-basis:25px}.circle-buttons button{font-size:.64rem}.top-button{padding:9px;font-size:.68rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Level choice: one continuous picture, four mathematically distinct pathways. */
.level-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:24px 0 10px}
.level-heading #levelProgress{font-size:.75rem;color:#6d798b;font-weight:700}
.level-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:590px}
.level-card{min-width:0;display:flex;align-items:center;gap:11px;position:relative;padding:14px 12px;
  text-align:left;background:#fffdfb;border:2px solid #e3dfd9;border-radius:13px;color:#314159;
  transition:border-color .16s,background .16s,transform .16s}
.level-card:hover{transform:translateY(-2px);background:#fff}
.level-card.selected{border-color:#518a8b;background:#eef9f3;box-shadow:0 2px 0 #b8d8d1}
.level-card>span:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0}
.level-card b{font-size:.82rem;line-height:1.2}
.level-card small{font-size:.68rem;font-weight:550;color:#7c8390;line-height:1.3}
.level-icon{flex:none;width:32px;height:32px;background:#f3ece4;color:#b76c60;display:grid;place-items:center;font-size:1.15rem;border-radius:8px}
.level-card.selected .level-icon{background:#d6efe4;color:#377e70}
.level-badge{position:absolute;top:-8px;right:7px;border-radius:9px;padding:3px 7px;background:#eabe75;font-size:.55rem;letter-spacing:.04em;color:#655032;font-weight:900}
.level-description{font-size:.79rem;line-height:1.55;color:#6f7e86;margin:10px 0 18px;max-width:590px;min-height:35px}
.play-heading-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.mirror-notice{display:flex;gap:10px;align-items:center;background:#eaf5f1;border:1px solid #cce7dc;border-radius:12px;
  color:#416f65;padding:12px;margin:15px 0 0;font-size:.77rem;line-height:1.5;font-weight:700}
.mirror-symbol{flex:none;font-size:1.3rem}
.mirror-explainer{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;padding:10px 12px;border-radius:12px;
  background:#eff7f3;border:1px solid #d3eade;color:#5a716c;font-size:.78rem;line-height:1.55}
.mirror-explainer b{color:#3e7166;font-size:.72rem;letter-spacing:.06em}
.finish-level-label{text-transform:uppercase;letter-spacing:.1em;font-weight:800;font-size:.71rem!important;color:#9c7965!important}
@keyframes inkPop{0%{opacity:0;transform:translateY(.7px) scaleY(.3)}75%{opacity:1}100%{opacity:1;transform:translateY(0) scaleY(1)}}
.ink-new-primary{transform-box:fill-box;transform-origin:center;animation:inkPop .24s ease-out both}
.ink-new-reflection{transform-box:fill-box;transform-origin:center;animation:inkPop .27s ease-out .43s both}
.ink-new-full{transform-box:fill-box;transform-origin:center;animation:inkPop .24s ease-out both}
@media(min-width:741px) and (max-width:1000px){.level-grid{grid-template-columns:1fr 1fr}.level-card{padding:10px 8px;gap:6px}.level-card b{font-size:.72rem}.level-card small{font-size:.62rem}.level-icon{width:27px;height:27px}}
@media(max-width:740px){.intro-grid{align-items:start}.level-grid{grid-template-columns:1fr 1fr}.level-card{padding:12px 8px;gap:6px}.level-card b{font-size:.76rem}.level-card small{font-size:.65rem}.level-icon{width:27px;height:27px}.play-heading-actions{flex-direction:column}.play-heading-actions .button{width:100%}}
@media(max-width:400px){.level-grid{grid-template-columns:1fr}.level-card{padding:10px}.level-description{min-height:auto}}
@media(prefers-reduced-motion:reduce){.ink-new-primary,.ink-new-reflection,.ink-new-full{animation:none!important}}


/* Mirror Mode keeps the mathematical playing field on a half-width canvas.
   Reflection now happens only in the full-screen completion dialog. */
.canvas-stage svg.half-canvas{max-width:225px;max-height:390px}
.intro-sprite.half-canvas{max-width:190px}

/* Final character details live in independent, staged SVG groups. None
   appear on the mathematical canvas or before the full-colour reveal. */
#finishedArt [data-detail-stage]{pointer-events:none;transform-box:fill-box;transform-origin:center;shape-rendering:crispEdges}
#finishedArt [data-detail-stage] rect{shape-rendering:crispEdges}
@media(prefers-reduced-motion:reduce){
  #finishedArt [data-detail-stage]{transition:none!important}
}

/* A small, deliberate gallery of mystery pictures for the chosen difficulty.
   Selection exposes completion state, never the undiscovered coloured artwork. */
.picture-picker-shell{max-width:590px;margin:8px 0 22px}
.picture-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.picture-picker-heading #picturePickerStatus{font-size:.7rem;font-weight:750;color:#898e99}
.picture-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.picture-option{display:flex;gap:10px;align-items:center;min-width:0;text-align:left;
  border:2px solid #e5e2dd;border-radius:15px;padding:12px 10px;background:#fffcf8;
  color:#33415c;transition:background .16s,border-color .16s,transform .16s}
.picture-option:hover{transform:translateY(-1px);background:#fff}
.picture-option.selected{border-color:#628f87;background:#edf8f2}
.picture-option-icon{width:36px;height:36px;flex:none;display:grid;place-items:center;
  border-radius:10px;background:#f5e8e0;color:#cb8b7c;font-size:1.15rem;font-weight:900}
.picture-option.selected .picture-option-icon{background:#ceeade;color:#3b8676}
.picture-option-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.picture-option-copy strong{font-size:.83rem;line-height:1.15}
.picture-option-copy small{font-size:.67rem;color:#7c8491;line-height:1.32}
.picture-option-status{font-size:1rem;font-weight:900;color:#73a79a;margin-left:auto}
@media(max-width:400px){.picture-picker{grid-template-columns:1fr}}


/* The picture reveal is a complete, full-viewport celebration.
   It is NOT part of the statistics card: the dialog closes to show results. */
body.reveal-open{overflow:hidden}
.reveal-dialog{
  position:fixed;inset:0;margin:0;padding:0;
  width:100vw;max-width:none;height:100vh;height:100dvh;
  max-height:none;min-height:0;overflow:hidden;border:0;border-radius:0;
  color:#fff;background:
    radial-gradient(circle at 9% 14%,#455776 0,transparent 38%),
    radial-gradient(circle at 87% 87%,#385b5c 0,transparent 40%),
    #202d46;
  box-shadow:none;
}
.reveal-dialog::backdrop{background:#172033db}
.reveal-layout{
  box-sizing:border-box;display:flex;flex-direction:column;height:100%;
  padding:calc(13px + env(safe-area-inset-top,0px))
    calc(15px + env(safe-area-inset-right,0px))
    calc(13px + env(safe-area-inset-bottom,0px))
    calc(15px + env(safe-area-inset-left,0px));
  gap:8px;
}
.reveal-dialog[open] .reveal-layout{
  animation:reveal-pop-in .4s cubic-bezier(.13,.8,.23,1) both;
}
.reveal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex:0 0 auto}
.reveal-intro{min-width:0;flex:1}
.reveal-kicker{font-size:.65rem;letter-spacing:.12em;font-weight:850;color:#f4c69a}
.reveal-kicker span{color:#a4d8c9}
.reveal-top h2{
  margin:7px 0 0;line-height:1.14;letter-spacing:-.04em;
  font-size:clamp(1.35rem,4.1vw,2.2rem);
  color:#fffaf4;max-width:460px;
}
.reveal-close{
  flex:0 0 48px;display:grid;place-items:center;width:48px;height:48px;
  border:2px solid #ffffff6b;border-radius:50%;background:#ffffff21;color:#fff;
  font-size:1.9rem;font-weight:400;line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.reveal-close:hover,.reveal-close:focus-visible{background:#ffffff40}
.reveal-picture-space{
  position:relative;display:flex;flex:1 1 auto;min-height:0;min-width:0;
  justify-content:center;align-items:center;overflow:hidden;padding:8px 3px;
}
.reveal-picture-space::before{
  content:"";position:absolute;inset:12% 13%;border-radius:50%;
  background:radial-gradient(ellipse,#b7d8c02e 0,transparent 68%);
  pointer-events:none;
}
.reveal-board{
  position:relative;flex:none;width:min(100%,54dvh,610px);max-height:100%;
  aspect-ratio:1;overflow:visible;background:#e9e5df;
  border:9px solid #fffaf4;border-radius:9px;isolation:isolate;
  box-shadow:0 0 0 3px #72918f,0 20px 55px #101828a8;
  transition:box-shadow .9s ease-out;
}
.reveal-board.has-colour{
  box-shadow:0 0 0 3px #f1c99b,0 0 52px #f9d6a363,0 20px 55px #101828a8;
}
.reveal-build-layer,.reveal-mirror-layer,.reveal-final-art{
  position:absolute;top:0;height:100%;image-rendering:pixelated;
}
.reveal-build-layer{bottom:0;z-index:1}
.reveal-build-layer svg{display:block;width:100%;height:100%;image-rendering:pixelated;shape-rendering:crispEdges}
.reveal-mirror-layer{inset:0;z-index:2;display:flex;perspective:860px;transform-style:preserve-3d}
.reveal-mirror-layer svg{
  width:50%;height:100%;flex:0 0 50%;display:block;
  image-rendering:pixelated;shape-rendering:crispEdges;
}
.reveal-mirror-left{transform-origin:right center;transform:rotateY(180deg);opacity:0}
.reveal-mirror-layer.is-unfolding .reveal-mirror-left{
  opacity:1;animation:reveal-unfold 1.12s cubic-bezier(.22,.72,.14,1) both;
}
.reveal-mirror-layer.is-open .reveal-mirror-left{transform:rotateY(0deg);opacity:1}
.reveal-final-art{
  inset:0;z-index:3;display:block;width:100%;height:100%;opacity:0;
  transition:opacity .95s ease-out;pointer-events:none;
  image-rendering:pixelated;shape-rendering:crispEdges;
}
.reveal-board.has-colour .reveal-final-art{opacity:1}
.reveal-final-art [data-detail-stage]{pointer-events:none;shape-rendering:crispEdges}
.reveal-ink-row.is-painted{filter:drop-shadow(0 0 .08px #b9d1ed)}
.reveal-bottom{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  gap:8px;padding:5px 0 0;
}
.reveal-steps{display:flex;justify-content:center;gap:7px;width:100%;max-width:460px}
.reveal-step{
  flex:1;border:1px solid #a3afbe75;border-radius:999px;
  padding:7px 4px;font-weight:850;font-size:.65rem;
  text-align:center;letter-spacing:.03em;color:#bfc8d6;background:#ffffff0b;
  transition:color .25s,background .25s,border-color .25s;
}
.reveal-step.active{border-color:#eac49d;background:#f7ddaf29;color:#fff0d7}
.reveal-step.done{border-color:#8ad3bf;background:#9bdbc92f;color:#d7f8e9}
.reveal-stage-text{
  color:#fffaf3;text-align:center;font-size:clamp(.82rem,2.5vw,.98rem);
  font-weight:800;line-height:1.36;min-height:1.3em;margin:1px 0 0;
}
.reveal-row-count{font-size:.75rem;color:#c8d6e1;min-height:1em;margin:0}
.reveal-skip{
  min-height:45px;max-width:100%;padding:10px 18px;border-radius:12px;
  border:1px solid #c9d8e0aa;color:#fdfbf7;background:#ffffff1b;
  font-size:.83rem;font-weight:750;
}
.reveal-skip:hover,.reveal-skip:focus-visible{background:#ffffff35}
.reveal-close-hint{font-size:.74rem;color:#c1d0dc;margin:0;text-align:center}
.reveal-close-hint strong{color:#fff;font-size:.95em}
@keyframes reveal-pop-in{
  from{opacity:0;transform:scale(.965) translateY(9px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes reveal-unfold{
  0%{transform:rotateY(180deg);opacity:1}
  48%{transform:rotateY(92deg);opacity:1}
  100%{transform:rotateY(0deg);opacity:1}
}
@media(max-width:740px){
  .reveal-layout{gap:5px}
  .reveal-picture-space{padding:4px 2px}
  .reveal-board{border-width:7px;width:min(100%,57dvh,510px)}
  .reveal-stage-text{max-width:340px}
  .reveal-bottom{gap:6px}
  .reveal-step{font-size:.62rem;padding:6px 3px}
}
@media(max-height:600px){
  .reveal-layout{gap:3px}
  .reveal-top h2{font-size:1.25rem;margin-top:3px}
  .reveal-close{width:44px;height:44px;flex-basis:44px}
  .reveal-board{width:min(100%,47dvh,500px);border-width:5px}
  .reveal-bottom{gap:4px}
  .reveal-close-hint{display:none}
  .reveal-skip{min-height:40px;padding:6px 12px}
}
@media(prefers-reduced-motion:reduce){
  .reveal-dialog[open] .reveal-layout,
  .reveal-mirror-layer.is-unfolding .reveal-mirror-left{animation:none!important}
  .reveal-final-art,.reveal-board,.reveal-step,
  .reveal-final-art [data-detail-stage]{transition:none!important}
}


/* A truly celebratory desktop experience, using the same full-screen
   staged reveal as phones but giving the art significantly more presence. */
@media (min-width:900px) and (min-height:650px){
  .reveal-dialog{
    background:
      radial-gradient(circle at 10% 24%,#516890 0,transparent 34%),
      radial-gradient(circle at 89% 72%,#396e6a 0,transparent 38%),
      radial-gradient(circle at 52% 54%,#334e68 0,transparent 58%),
      #1b2840;
  }
  .reveal-layout{
    width:min(100%,1530px);margin-inline:auto;
    padding:clamp(24px,3vh,42px) clamp(42px,5.3vw,100px);
    gap:clamp(10px,1.3vh,19px);
  }
  .reveal-kicker{font-size:.81rem;letter-spacing:.19em}
  .reveal-top h2{font-size:clamp(2.1rem,3.1vw,3.25rem);max-width:none}
  .reveal-close{width:58px;height:58px;flex-basis:58px;font-size:2.15rem}
  .reveal-picture-space{padding:4px 42px}
  .reveal-board{
    width:min(100%,calc(100dvh - 330px),760px);
    max-height:100%;
    border-width:12px;
    box-shadow:0 0 0 4px #72918f,0 25px 90px #0a132ab3;
  }
  .reveal-board.has-colour{
    box-shadow:0 0 0 4px #f1c99b,0 0 90px #f9d6a387,
      0 28px 95px #07152fc2;
  }
  .reveal-steps{max-width:570px;gap:10px}
  .reveal-step{padding:10px 10px;font-size:.78rem}
  .reveal-stage-text{font-size:1.12rem}
  .reveal-row-count{font-size:.86rem}
  .reveal-bottom{gap:9px;padding-bottom:4px}
  .reveal-close-hint{font-size:.83rem}
  .reveal-dialog::before,.reveal-dialog::after{
    position:fixed;z-index:0;pointer-events:none;
    color:#f7deb2;opacity:.65;
    font-size:clamp(3rem,5vw,6rem);
    text-shadow:0 0 24px #e0f1df8a,0 0 55px #ffd9a062;
  }
  .reveal-dialog::before{content:"✦";top:23%;left:9%;transform:rotate(-15deg)}
  .reveal-dialog::after{content:"✧";bottom:25%;right:9%;transform:rotate(18deg)}
  .reveal-dialog.is-celebrated::before{
    animation:celebration-sparkle-left 2.8s ease-in-out infinite alternate;
  }
  .reveal-dialog.is-celebrated::after{
    animation:celebration-sparkle-right 2.4s ease-in-out infinite alternate;
  }
  .reveal-layout{position:relative;z-index:1}
}
@keyframes celebration-sparkle-left{
  from{transform:scale(.85) rotate(-17deg);opacity:.38}
  to{transform:scale(1.2) rotate(8deg);opacity:1}
}
@keyframes celebration-sparkle-right{
  from{transform:scale(.8) rotate(18deg);opacity:.45}
  to{transform:scale(1.18) rotate(-5deg);opacity:1}
}
/* The endpoint circle is a genuine one-tap button, while the entire number
   line remains draggable and interactive on both desktop and mobile. */
.draw-line-holder svg [data-endpoint]{cursor:pointer;touch-action:none}
.draw-line-holder svg [data-endpoint]:focus-visible circle:last-child{
  stroke:#427f92;stroke-width:3.5;
}
/* Keep result confirmation readable during the automatic row transition. */
#checkButton:disabled{opacity:.88;cursor:default;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal-dialog.is-celebrated::before,
  .reveal-dialog.is-celebrated::after{animation:none!important}
}


/* Answer ghosts show the mathematical consequence of the student's CURRENT
   selection, without altering any secret/persisted pixels. Feedback flashes
   affect only the candidate row, then fade back to the normal ink colour. */
.ink-live-preview{pointer-events:none}
.ink-live-preview .ink-preview-pixel{
  fill:#8ba9c4;fill-opacity:.45;
  stroke:#789bb5;stroke-opacity:.55;stroke-width:.045;
  pointer-events:none;
}
.ink-live-preview--incorrect .ink-preview-pixel{
  fill:#f4a244;fill-opacity:.96;stroke:#d47d24;stroke-opacity:1;
  animation:ink-rejected-flash .55s ease-in-out both;
}
.ink-live-preview--correct .ink-preview-pixel{
  fill:#56c78d;fill-opacity:1;stroke:#328e68;stroke-opacity:1;
  animation:ink-accepted-flash .32s ease-out both;
}
.canvas-stage.ink-stage--incorrect{
  animation:ink-stage-warning .55s ease-in-out both;
}
.canvas-stage.ink-stage--correct{
  animation:ink-stage-success .34s ease-out both;
}
@keyframes ink-rejected-flash{
  0%,100%{fill-opacity:.47}
  25%,65%{fill-opacity:1}
}
@keyframes ink-accepted-flash{
  0%{fill-opacity:.6}
  48%,100%{fill-opacity:1}
}
@keyframes ink-stage-warning{
  0%,100%{box-shadow:0 0 0 transparent}
  35%,65%{box-shadow:inset 0 0 0 3px #f2a84a88,0 0 22px #e99a3547}
}
@keyframes ink-stage-success{
  0%{box-shadow:0 0 0 transparent}
  45%,100%{box-shadow:inset 0 0 0 3px #58c18e89,0 0 22px #4cbe8244}
}
@media(prefers-reduced-motion:reduce){
  .ink-live-preview--incorrect .ink-preview-pixel,
  .ink-live-preview--correct .ink-preview-pixel,
  .canvas-stage.ink-stage--incorrect,
  .canvas-stage.ink-stage--correct{animation:none!important}
}


/* On phones the large board sits above the controls. Keep a small copy
   sticky INSIDE the question card so a changed answer can be seen immediately
   without jumping back up the page. Both boards share the same ghost pixels. */
.mobile-preview-strip{display:none}
@media(max-width:740px){
  .mobile-preview-strip{
    display:flex;align-items:center;gap:12px;
    position:sticky;top:calc(env(safe-area-inset-top,0px) + 5px);z-index:8;
    background:#f6faf9f5;border:1px solid #d6e8e3;
    border-radius:13px;padding:7px 12px;margin:0 0 14px;
    box-shadow:0 5px 20px #354e5716;
    backdrop-filter:blur(9px);
  }
  .mobile-preview-strip svg{
    display:block;flex:0 0 auto;height:72px;max-width:84px;
    width:auto;image-rendering:pixelated;shape-rendering:crispEdges;
    background:#e9e5df;border:2px solid #e8e2dc;border-radius:4px;
  }
  .mobile-preview-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
  .mobile-preview-copy strong{font-size:.82rem;color:#354f60}
  .mobile-preview-copy small{font-size:.68rem;color:#70838c;line-height:1.35}
  .mobile-preview-strip.ink-stage--incorrect{animation:ink-stage-warning .55s ease-in-out both}
  .mobile-preview-strip.ink-stage--correct{animation:ink-stage-success .34s ease-out both}
}
@media(max-width:390px){
  .mobile-preview-strip svg{height:59px;max-width:70px}
  .mobile-preview-copy small{font-size:.64rem}
}
@media(prefers-reduced-motion:reduce){
  .mobile-preview-strip.ink-stage--incorrect,
  .mobile-preview-strip.ink-stage--correct{animation:none!important}
}


/* PAINT BY INEQUALITIES — one-screen workspace.
   Picture, mathematical colour rules, enlarged integer row and Check
   remain simultaneously available instead of stacking long cards. */
body.paint-session{overflow:hidden}
.paint-screen{
  max-width:1250px;margin:0 auto;
  height:calc(100dvh - 109px);min-height:0;
  padding:0 0 6px;display:flex;flex-direction:column;overflow:hidden;
}
.paint-page-header{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:7px;min-height:44px;
}
.paint-page-title{min-width:0}
.paint-page-title .eyebrow{font-size:.62rem}
.paint-page-header h1{
  font-size:clamp(1.2rem,2.4vw,1.7rem);margin:3px 0 0;
  color:#28354e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.04em;line-height:1.15;
}
.paint-page-actions{display:flex;align-items:center;gap:7px;flex:none}
.paint-page-actions .button{padding:9px 12px;font-size:.76rem;border-radius:10px}
.paint-progress{
  flex:none;display:flex;align-items:center;gap:11px;
  font-size:.76rem;color:#455977;margin:0 0 9px;
}
.paint-progress .progress-track{flex:1;min-width:35px;margin:0}
.paint-progress strong{white-space:nowrap}
.paint-progress #paintRowsDone{white-space:nowrap;font-weight:800}
.paint-workspace{flex:1;min-height:0;display:flex}
.paint-studio-panel{
  width:100%;height:100%;min-height:0;min-width:0;
  display:grid;grid-template-rows:minmax(0,1fr) auto auto auto auto;
  gap:clamp(5px,1.1dvh,11px);
  padding:clamp(10px,1.6vw,20px);overflow:hidden;
}
.paint-main-stage{
  min-height:0;min-width:0;display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(9px,2vw,22px);align-items:stretch;
}
.paint-overview{
  min-height:0;min-width:0;display:flex;flex-direction:column;
  align-items:stretch;overflow:hidden;
}
.paint-overview-label{
  font-size:.65rem;font-weight:900;letter-spacing:.08em;
  color:#729098;line-height:1.2;margin-bottom:5px;text-align:center;
}
.paint-canvas-frame{
  flex:1;min-height:0;min-width:0;width:100%;
  display:flex;align-items:center;justify-content:center;
  padding:5px;border:5px solid #f8f3ec;border-radius:12px;
  background:#ece9e3;overflow:hidden;
}
.paint-canvas{
  display:grid;min-height:0;min-width:0;
  height:100%;width:auto;max-width:100%;max-height:100%;
  aspect-ratio:10 / 16;
  border:1px solid #e2e9e8;border-radius:3px;
  background:#eceae5;overflow:hidden;touch-action:none;
  user-select:none;-webkit-user-select:none;
  box-shadow:0 4px 13px #36445d16;
}
.paint-cell{
  display:flex;align-items:center;justify-content:center;
  min-width:0;min-height:0;aspect-ratio:1;
  padding:0;margin:0;border:1px solid #ffffffa0;border-radius:0;
  background:#f4f2ee;line-height:1;
  font-size:clamp(.6rem,1.1vw,.83rem);font-weight:850;
  font-variant-numeric:tabular-nums;color:#20344e;
  box-shadow:none;
}
.paint-cell:disabled{opacity:1;cursor:default}
.paint-cell--waiting{background:#eae7e2!important;pointer-events:none}
.paint-cell--finished{color:transparent;pointer-events:none}
.paint-cell--active{
  cursor:crosshair;touch-action:none;outline:1px solid #6e9fa7;
  outline-offset:-1px;text-shadow:0 1px 0 #fff9,1px 0 0 #fff9,-1px 0 0 #fff9;
  transition:background-color .08s ease-out;
}
.paint-cell--active:focus-visible{outline:3px solid #23536a;outline-offset:-3px;z-index:1}
.paint-cell--wrong{animation:paint-row-wrong .58s ease-in-out both}
.paint-cell--correct{animation:paint-row-correct .65s ease-in-out both}
@keyframes paint-row-wrong{
  0%,100%{box-shadow:inset 0 0 0 0 #e78c3d}
  23%,68%{box-shadow:inset 0 0 0 100px #f2a457b8}
}
@keyframes paint-row-correct{
  0%,100%{box-shadow:inset 0 0 0 0 #5abf8a}
  35%,68%{box-shadow:inset 0 0 0 100px #5ac58a9a}
}
.paint-rule-area{display:flex;flex-direction:column;justify-content:flex-start;min-height:0;min-width:0}
.paint-rule-heading{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:3px 8px;min-height:17px;
}
.paint-rule-heading strong{
  font-size:.76rem;letter-spacing:.065em;color:#a4716c;
}
.paint-rule-heading span{font-size:.72rem;color:#71818b}
.paint-rules{
  /* Never stretch two or three short rules to fill a tall picture canvas.
     Keep each equation in a compact, touch-friendly card at the top. */
  display:flex;flex-direction:column;align-items:stretch;
  flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  gap:clamp(5px,.7dvh,10px);margin-top:7px;scrollbar-width:thin;
}
.paint-rule{
  display:flex;align-items:center;gap:11px;min-height:56px;min-width:0;
  flex:0 0 auto;
  border:2px solid #e7e4e0;border-radius:11px;padding:8px 11px;
  background:#fffefa;color:#344154;text-align:left;
  transition:background .12s,border-color .12s;overflow:hidden;
}
.paint-rule:hover{border-color:#81aaa7;background:#f6faf8}
.paint-rule.selected{
  border-color:#398b78;background:#e9f7f0;
  box-shadow:inset 0 0 0 1px #398b7844,0 0 0 2px #56a38e18;
}
.paint-rule.selected::after{
  content:"✓";margin-left:auto;color:#28745b;font-size:.88rem;font-weight:900;
}
.paint-rule:focus-visible{outline:3px solid #4f819d;outline-offset:2px}
.paint-swatch{
  width:clamp(24px,2.8vw,35px);height:clamp(24px,2.8vw,35px);
  flex:0 0 clamp(24px,2.8vw,35px);
  border-radius:8px;border:1px solid #00000019;
  box-shadow:inset 0 2px 5px #ffffff49;
}
.paint-rule-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.paint-rule-copy strong{
  font-size:clamp(.68rem,1.2vw,.82rem);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.paint-equation{font-size:clamp(.95rem,1.6vw,1.23rem);font-weight:850;color:#263a57;line-height:1.1}
.paint-focus-area{min-width:0;display:flex;flex-direction:column;align-items:stretch}
.paint-focus-heading{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;margin-bottom:5px;min-width:0;
}
.paint-focus-heading strong{
  color:#547a80;font-size:.73rem;letter-spacing:.055em;white-space:nowrap;
}
.paint-selected-label{
  font-size:.73rem;font-weight:800;color:#486879;
  margin:0;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.paint-focus-row{
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));
  width:100%;max-width:660px;align-self:center;
  touch-action:none;user-select:none;-webkit-user-select:none;
  background:#edf4f2;border:3px solid #689d9b;
  border-radius:9px;overflow:hidden;
}
.paint-focus-cell{
  display:grid;place-items:center;min-width:0;
  aspect-ratio:1;touch-action:none;
  font-size:clamp(.83rem,1.45vw,1.16rem);
  font-weight:900;outline-offset:-2px;
}
.paint-controls{
  display:flex;align-items:stretch;gap:8px;width:100%;min-height:43px;
}
.paint-controls .button{padding:9px 14px;font-size:.79rem;border-radius:9px}
#paintEraser.selected{background:#d7ece2;border-color:#548f82}
.paint-check{flex:1;min-width:130px}
.paint-feedback{
  min-height:1.05em;font-size:.75rem;line-height:1.3;
  margin:0;text-align:center;overflow:hidden;
}
.paint-help-note{
  color:#78848e;font-size:.72rem;line-height:1.4;
  text-align:center;margin:0;
}

/* Desktop Paint by Inequalities: put the full portrait picture first.
   A short desktop window may scroll slightly rather than shrink a 16-row
   picture to an illegible thumbnail. The mobile rules below are untouched. */
@media(min-width:741px){
  body.paint-session{overflow-y:auto}
  body.paint-session .app{padding:7px 18px 15px}
  body.paint-session .topbar{min-height:42px;padding:0 0 5px}
  body.paint-session .brand{gap:8px}
  body.paint-session .brand strong{font-size:1.08rem}
  body.paint-session .brand small{font-size:.58rem}
  body.paint-session .brand-mark{transform:rotate(-10deg) scale(.79)}
  body.paint-session .top-actions>.top-button{padding:7px 9px;font-size:.69rem}
  .paint-screen{height:auto;min-height:0;overflow:visible;padding:0}
  .paint-page-header{min-height:35px;margin-bottom:3px;gap:10px}
  .paint-page-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 12px}
  .paint-page-title .eyebrow{font-size:.57rem;white-space:nowrap}
  .paint-page-header h1{
    margin:0;font-size:clamp(1.07rem,1.75vw,1.35rem);line-height:1.2
  }
  .paint-page-actions .button{padding:7px 9px;font-size:.7rem}
  .paint-progress{margin-bottom:7px;font-size:.68rem;gap:8px}
  .paint-workspace{display:block;height:auto}
  .paint-studio-panel{
    display:grid;height:auto;
    min-height:clamp(515px,calc(100dvh - 130px),760px);
    max-width:1050px;margin:0 auto;
    padding:clamp(12px,1.4vw,19px);overflow:visible;
    grid-template-columns:minmax(0,1fr) minmax(335px,420px);
    grid-template-rows:minmax(0,1fr) auto auto auto auto minmax(0,1fr);
    grid-template-areas:
      "artwork ."
      "artwork palette"
      "artwork focus"
      "artwork actions"
      "artwork feedback"
      "artwork .";
    column-gap:clamp(12px,2.3vw,30px);
    row-gap:clamp(6px,.85dvh,10px);align-items:stretch;
  }
  /* Keep the HTML/painting logic unchanged; reorganise only desktop sizing. */
  .paint-main-stage{display:contents}
  .paint-overview{
    grid-area:artwork;display:flex;flex-direction:column;align-items:center;
    justify-content:center;padding:0;width:100%;min-height:0;overflow:visible
  }
  .paint-overview-label{font-size:.68rem;margin:0 0 7px}
  .paint-canvas-frame{
    flex:1 1 0;width:100%;max-width:100%;min-height:0;max-height:none;
    padding:0;border:0;border-radius:8px;background:transparent;box-shadow:none
  }
  .paint-canvas{
    height:100%;width:auto;max-width:100%;max-height:100%;
    border:2px solid #e4e1dc;border-radius:5px;
    box-shadow:0 9px 24px #24334a22
  }
  .paint-rule-area{
    grid-area:palette;max-height:none;overflow:visible;align-self:stretch
  }
  .paint-rule-heading{min-height:17px}
  .paint-rule-heading strong{font-size:.7rem}
  .paint-rule-heading span{font-size:.65rem}
  .paint-rules{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:min-content;gap:6px;max-height:225px;
    margin-top:6px;padding:2px;overflow-y:auto;flex:0 1 auto
  }
  .paint-rule{
    min-height:43px;padding:6px 8px;gap:7px;
    border-width:1px;border-radius:8px
  }
  .paint-swatch{width:23px;height:23px;flex-basis:23px;border-radius:6px}
  .paint-rule-copy{gap:2px}
  .paint-rule-copy strong{font-size:.7rem}
  .paint-equation{font-size:.98rem;line-height:1.08}
  .paint-rule.selected{box-shadow:inset 0 0 0 1px #398b7866}
  .paint-focus-area{grid-area:focus;justify-content:flex-start}
  .paint-focus-heading{width:100%;max-width:none;margin-bottom:3px}
  .paint-focus-heading strong,.paint-selected-label{font-size:.69rem}
  .paint-focus-row{width:100%;max-width:none;border-width:2px;border-radius:7px}
  .paint-focus-cell{font-size:clamp(.8rem,1.1vw,1rem)}
  .paint-controls{
    grid-area:actions;max-width:none;width:100%;gap:6px;min-height:37px
  }
  .paint-controls .button{padding:7px 10px;font-size:.73rem;border-radius:7px}
  .paint-check{flex:1;min-width:125px}
  .paint-feedback{grid-area:feedback;max-width:none;width:100%}
  .paint-feedback:empty{display:none}
  .paint-help-note{display:none}
}
@media(min-width:741px) and (max-width:970px){
  .paint-studio-panel{
    grid-template-columns:minmax(0,1fr) minmax(300px,390px);column-gap:11px
  }
  .paint-page-title .eyebrow{display:none}
  .paint-rules{grid-template-columns:1fr;max-height:215px}
}

/* Phones: miniature artwork beside its rules, a large numbered row below,
   and a single Check action. No scrolling between maths and canvas. */
@media(max-width:740px){
  body.paint-session .app{padding:4px 10px 2px}
  body.paint-session .topbar{padding:1px 0 5px;min-height:42px}
  body.paint-session .brand{gap:8px}
  body.paint-session .brand strong{font-size:1.08rem}
  body.paint-session .brand small{display:none}
  body.paint-session .brand-mark{transform:rotate(-10deg) scale(.82)}
  body.paint-session .top-button{padding:7px 9px}
  .paint-screen{
    height:calc(100dvh - 56px - env(safe-area-inset-bottom,0px));
    padding:0 0 3px;
  }
  .paint-page-header{min-height:31px;gap:6px;margin-bottom:4px}
  .paint-page-title .eyebrow{display:none}
  .paint-page-header h1{
    margin:0;font-size:clamp(.93rem,3.8vw,1.16rem);
    max-width:calc(100vw - 147px);
  }
  .paint-page-actions{gap:5px}
  .paint-page-actions .button{padding:6px 9px;font-size:.74rem}
  .paint-page-actions .button span{display:none}
  .paint-progress{font-size:.7rem;margin:0 0 5px;gap:8px}
  .paint-studio-panel{
    border-radius:16px;
    grid-template-rows:minmax(0,1fr) auto auto auto;
    gap:clamp(3px,.75dvh,7px);
    padding:clamp(7px,2vw,10px);
  }
  .paint-main-stage{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    gap:8px;
  }
  .paint-overview-label{font-size:.55rem;margin-bottom:3px}
  .paint-canvas-frame{padding:2px;border-width:3px;border-radius:8px}
  .paint-canvas .paint-cell{font-size:clamp(.42rem,1.6vw,.64rem)}
  .paint-rule-heading{gap:2px;min-height:19px}
  .paint-rule-heading strong{font-size:.68rem}
  .paint-rule-heading span{font-size:.59rem;line-height:1.15}
  .paint-rules{margin-top:4px;gap:4px}
  .paint-rule{min-height:51px;border-radius:8px;padding:7px 7px;gap:7px}
  .paint-swatch{width:23px;height:23px;flex-basis:23px;border-radius:5px}
  .paint-rule-copy{gap:3px}
  .paint-rule-copy strong{font-size:clamp(.6rem,2.4vw,.73rem)}
  .paint-equation{font-size:clamp(.85rem,3.1vw,1.03rem)}
  .paint-focus-heading{margin-bottom:3px}
  .paint-focus-heading strong{font-size:.63rem}
  .paint-selected-label{font-size:.66rem}
  .paint-focus-row{border-width:2px;border-radius:6px}
  .paint-focus-cell{font-size:clamp(.7rem,3.1vw,.97rem)}
  .paint-controls{gap:5px;min-height:41px}
  .paint-controls .button{padding:8px 7px;font-size:.72rem;min-width:0}
  #paintEraser{flex:0 0 auto}
  #paintClear{flex:0 0 auto}
  .paint-check{flex:1;min-width:0}
  .paint-feedback{font-size:.7rem;min-height:1.15em}
  .paint-help-note{display:none}
}
@media(max-width:360px){
  .paint-main-stage{gap:5px}
  .paint-rule{gap:4px;padding:4px 5px}
  .paint-swatch{width:18px;height:18px;flex-basis:18px}
  .paint-equation{font-size:.83rem}
  .paint-controls .button{font-size:.67rem}
}
@media(max-height:655px) and (max-width:740px){
  body.paint-session .topbar{min-height:34px}
  .paint-screen{height:calc(100dvh - 49px - env(safe-area-inset-bottom,0px))}
  .paint-page-header{min-height:26px;margin-bottom:2px}
  .paint-progress{margin-bottom:3px}
  .paint-studio-panel{gap:3px;padding:6px}
  .paint-overview-label{margin-bottom:2px}
  .paint-rule-heading span{display:none}
  .paint-rule{min-height:43px;padding:4px 5px}
  .paint-rules{gap:3px;margin-top:3px}
  .paint-focus-heading{margin-bottom:2px}
  .paint-controls{min-height:35px}
  .paint-controls .button{padding:6px;font-size:.68rem}
}
/* Extremely short landscape viewports use a safe internal scroll fallback.
   Avoid clipping rule buttons or the Check action when there is no room. */
@media(max-height:450px){
  body.paint-session{overflow:auto}
  .paint-screen{height:auto;min-height:425px;overflow:visible}
  .paint-workspace{min-height:330px}
  .paint-main-stage{min-height:195px}
  .paint-studio-panel{overflow:visible}
}
@media(prefers-reduced-motion:reduce){
  .paint-cell--wrong,.paint-cell--correct{animation:none!important}
}


/* Picture journey: five clearly ordered quick wins, plus an optional
   expandable collection preserving every older picture and saved score. */
.picture-journey-help{
  color:#6d798a;font-size:.78rem;line-height:1.5;margin:0 0 9px;
}
.picture-path-heading{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:8px;margin:0 0 8px;font-size:.75rem;color:#536d81;
}
.picture-path-heading strong{color:#354960;font-size:.78rem}
.picture-path-heading span{font-size:.72rem}
.picture-step-track{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;margin:0 0 13px;
}
.picture-step{
  display:grid;place-items:center;min-width:0;height:23px;
  background:#eee9e4;border:1px solid #e0dbd3;
  border-radius:7px;color:#71818c;
  font-size:.74rem;font-weight:900;line-height:1;
}
.picture-step--next{
  background:#e0f1e9;border:2px solid #64a090;color:#397969;
}
.picture-step--done{
  background:#48907a;border-color:#438574;color:#fff;
}
.picture-option{position:relative}
.picture-option--next:not(.selected){
  border-color:#a7c8bc;background:#f5faf7;
}
.picture-option-icon{font-size:.9rem}
.picture-option-meta{
  display:block;color:#648295;font-size:.66rem;line-height:1.25;
  font-weight:750;
}
.picture-option.selected .picture-option-meta{color:#477f74}
.more-pictures{
  margin:13px 0 0;background:#f7f7f5;
  border:1px solid #e8e7e0;border-radius:12px;padding:0 12px;
}
.more-pictures summary{
  cursor:pointer;list-style:revert;
  padding:12px 3px;font-size:.78rem;font-weight:850;color:#526b7e;
}
.more-pictures summary:focus-visible{
  outline:3px solid #83aabc;outline-offset:2px;
}
.extra-picture-picker{
  padding:3px 0 13px;grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(max-width:400px){
  .picture-step-track{gap:4px}
  .picture-step{height:20px}
  .extra-picture-picker{grid-template-columns:1fr}
}


/* Solve & Paint: one optional working space with a typeset maths editor or
   a touch/stylus-friendly handwritten pad. Answer checking still uses the
   independent number line above it. */
.working-shell{
  margin-top:16px;
  padding:14px;
  border:1px solid #e5dfd8;
  border-radius:15px;
  background:#fffdfa;
}
.working-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:12px;
}
.working-heading .section-label{display:block;margin-bottom:4px}
.working-heading p{margin:0;font-size:.75rem;color:#7b8190;line-height:1.5}
.working-switch{
  display:flex;gap:3px;padding:3px;border-radius:11px;
  border:1px solid #e0e2e4;background:#f3f4f3;
}
.working-switch button{
  background:transparent;border:0;border-radius:8px;
  padding:8px 10px;color:#607086;font-size:.75rem;font-weight:800;
}
.working-switch button.selected{
  color:#2b5d6c;background:white;
  box-shadow:0 1px 5px #33405618;
}
.working-shell .working-method>label{
  display:block;margin:0 0 7px;
  font-size:.75rem;font-weight:750;color:#59677c;
}
.working-shell textarea{
  display:block;width:100%;min-height:90px;max-height:280px;
  padding:12px;border:1px solid #dce1e5;border-radius:11px;
  background:#fff;color:#273b57;font-size:.94rem;line-height:1.7;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  resize:vertical;white-space:pre-wrap;
}
.working-shell textarea::placeholder{color:#9aa4b0}
.work-math-keyboard{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  gap:5px;margin:9px 0 13px;
}
.work-math-keyboard button{
  min-width:0;min-height:37px;padding:5px 3px;border-radius:8px;
  border:1px solid #dfe2e6;background:#f7f9fa;color:#344763;
  font-size:.99rem;font-weight:750;
  transition:background .12s,border-color .12s;
}
.work-math-keyboard button:active,
.work-math-keyboard button:hover{
  background:#e7f2f2;border-color:#8ebbb6;
}
.working-preview-heading{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:5px;margin:0 0 7px;
  color:#967a70;font-size:.64rem;font-weight:900;letter-spacing:.09em;
}
.working-preview-heading small{
  color:#90949d;font-size:.67rem;letter-spacing:normal;font-weight:500;
}
.working-math-preview{
  display:grid;align-content:center;gap:9px;
  min-height:60px;max-height:250px;overflow:auto;
  padding:12px;border-radius:11px;
  background:#f8f5ef;border:1px solid #e9e4dc;
  color:#273954;
}
.working-math-preview math{
  display:block;width:max-content;min-width:0;
  font-size:1.22rem;line-height:1.5;
}
.work-preview-empty{color:#92969e;font-size:.79rem;font-weight:500}
.working-tip{
  margin:9px 0 0;color:#888e9b;font-size:.71rem;line-height:1.5;
}
.work-drawing-toolbar{
  display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px;
}
.work-drawing-toolbar button{
  min-width:80px;min-height:36px;padding:7px 11px;
  border:1px solid #dce1e5;border-radius:9px;background:#fff;
  color:#54677e;font-size:.76rem;font-weight:800;
}
.work-drawing-toolbar button.selected{
  background:#e6f3ef;border-color:#7eada1;color:#2f6b5a;
}
.work-drawing-toolbar button:disabled{opacity:.45;cursor:default}
.working-draw-surface{
  display:block;width:100%;height:clamp(195px,26vw,255px);
  border:1px solid #dce1e5;border-radius:11px;
  background-color:#fdfdfa;
  background-image:linear-gradient(#dfe7ef80 1px,transparent 1px),
    linear-gradient(90deg,#dfe7ef80 1px,transparent 1px);
  background-size:23px 23px;
  touch-action:none;cursor:crosshair;user-select:none;
}
.working-draw-surface.is-erasing{cursor:cell}
.working-draw-surface .working-stroke{pointer-events:none}
@media(max-width:740px){
  .working-shell{padding:11px;margin-top:12px}
  .working-heading{align-items:stretch;gap:8px}
  .working-switch{width:100%}
  .working-switch button{flex:1}
  .work-math-keyboard{grid-template-columns:repeat(5,minmax(0,1fr))}
  .working-preview-heading small{font-size:.63rem}
  .working-math-preview math{font-size:1.1rem}
  .working-draw-surface{height:205px}
  .work-drawing-toolbar button{min-width:0;flex:1}
}

/* Keep the optional practice route understated beside the main picture CTA. */
.practice-status{margin:10px 0 0;color:#377465;font-size:.82rem;font-weight:700;line-height:1.45}


/* Quadratic Quest is an optional, visually separate adventure. Its progress,
   answer controls and finished artwork do not enter the original five modes. */
.quest-invite{
  margin:24px 0 0;
  display:flex;gap:16px;justify-content:space-between;align-items:center;
  padding:17px 18px;border:1px solid #a6cbc5;border-radius:17px;
  background:linear-gradient(130deg,#f0faf6,#fbf8f1);
  box-shadow:0 5px 19px #3e69560c;
}
.quest-invite .eyebrow{font-size:.65rem;color:#477f77}
.quest-invite h2{margin:5px 0;font-size:1.23rem;letter-spacing:-.03em;color:#293a56}
.quest-invite p{margin:4px 0 0;font-size:.79rem;line-height:1.55;color:#687987;max-width:390px}
.quest-invite-actions{display:grid;justify-items:end;gap:7px;flex-shrink:0}
.quest-invite-actions .button{font-size:.76rem;padding:10px 12px;border-color:#a5c7bd;color:#2b7369}
.quest-invite-actions span{color:#73878a;font-size:.64rem;text-align:right;max-width:170px}
.quest-screen{padding:14px 0 50px}
.quest-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:5px 0 18px}
.quest-header h1{font-size:clamp(1.9rem,3.5vw,3rem);margin:7px 0;letter-spacing:-.065em}
.quest-header h1 span{color:#dd9b70}
.quest-header p{margin:0;max-width:740px;color:#6f7c88;font-size:.88rem;line-height:1.65}
.quest-header-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}
.quest-header-buttons button{padding:11px 13px;font-size:.78rem}
.quest-progress{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  margin-bottom:19px;color:#6c798a;font-size:.74rem}
.quest-progress strong{color:#334b65}
.quest-progress .progress-track{height:7px}
.quest-layout{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(450px,1.2fr);gap:20px;align-items:start}
.quest-art-panel,.quest-question-panel{min-width:0}
.quest-art-frame{display:grid;place-items:center;background:#f1eee8;border:1px solid #e6e0d6;
  border-radius:15px;padding:24px;min-height:270px}
.quest-art-frame svg{width:100%;max-width:440px;height:auto;
  background:#e9e6e0;image-rendering:pixelated;filter:drop-shadow(0 7px 13px #1c3a4a14)}
.quest-art-note{font-size:.75rem;line-height:1.55;color:#84909c;margin:13px 0 0}
.quest-equation{background:#f5f1ea;border:1px solid #ece4db;
  padding:16px 12px;border-radius:13px;text-align:center;margin:0 0 13px}
.quest-equation .equation{font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.5}
.quest-instruction{color:#69778a;font-size:.82rem;line-height:1.6;margin:0 0 10px}
.quest-region-chooser{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0}
.quest-region-chooser button{border-radius:10px;border:1px solid #d8e0e1;background:#fff;
  font-size:.8rem;font-weight:780;color:#51627b;padding:12px 7px;min-width:0}
.quest-region-chooser button.selected{border-color:#73aba3;background:#e9f5f0;color:#317768}
.quest-line-frame{border:1px solid #e4e3e1;background:#faf9f6;border-radius:13px;overflow:hidden}
.quest-line-frame svg{display:block;width:100%;height:auto;touch-action:none;user-select:none}
.quest-line-frame g[role="button"]{cursor:grab;touch-action:none}
.quest-line-frame g[role="button"]:focus-visible{outline:2px solid #2b8797;outline-offset:3px}
.quest-endpoints{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:10px 0}
.quest-endpoint{border:1px solid #e5e1da;padding:11px;border-radius:12px;min-width:0}
.quest-endpoint label{display:block;font-size:.77rem;font-weight:800;color:#40526d;margin-bottom:8px}
.quest-stepper{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:5px}
.quest-stepper button,.quest-stepper input{min-width:0;height:36px;
  border:1px solid #dfe3e5;border-radius:9px;color:#344b67;background:#f7f8f9;
  font-size:.92rem;font-weight:800;text-align:center}
.quest-stepper input{width:100%}
.quest-inclusion{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px}
.quest-inclusion button{min-width:0;background:white;border:1px solid #dfe1e3;
  border-radius:8px;padding:8px 2px;color:#526783;font-size:.73rem;font-weight:800}
.quest-inclusion button.selected{background:#e5f1f6;border-color:#90bfd0;color:#2c6477}
.quest-endpoint-note{font-size:.72rem;color:#878e98;margin:6px 0 13px}
.quest-working-details{margin:13px 0;background:#fcfbf8;border:1px solid #e5e2dc;border-radius:12px}
.quest-working-details summary{cursor:pointer;padding:12px 13px;color:#536980;font-size:.8rem;font-weight:850}
.quest-working-details .quest-working-shell{margin:0 10px 10px}
.quest-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.quest-tools .button{font-size:.78rem;padding:10px 12px}
.quest-graph-panel{background:#f8faf8;border:1px solid #d9e7e3;padding:13px;
  border-radius:12px;margin:11px 0}
.quest-graph-panel svg{display:block;width:100%;height:auto;max-height:265px}
.quest-graph-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  flex-wrap:wrap;color:#4a6675;font-size:.78rem}
.quest-graph-heading span{font-size:.7rem;color:#84909b}
.quest-graph-panel p{font-size:.76rem;color:#6d7b85;line-height:1.5;margin:8px 0 0}
.quest-question-panel .feedback{margin:11px 0}
.quest-check{width:100%;margin-top:12px}
.quest-check:disabled{opacity:.66;cursor:default}
.quest-finish{max-width:690px;margin:15px auto;text-align:center;padding:30px}
.quest-finish h2{font-size:clamp(1.8rem,3.2vw,3rem);margin:10px 0}
.quest-finish>p{color:#6c7986;font-size:.85rem;line-height:1.6}
.quest-finish>svg{width:100%;max-width:425px;image-rendering:pixelated;
  display:block;margin:15px auto;border-radius:12px;border:14px solid #f0ece6}
.quest-solution-review{background:#f8f6f1;text-align:left;margin:16px 0;
  padding:13px 17px;border-radius:12px;border:1px solid #e5e2dc}
.quest-solution-review summary{cursor:pointer;font-size:.8rem;font-weight:800;color:#496477}
.quest-solution-review ol{padding-left:24px;font-size:.83rem;color:#53637c;line-height:1.9}
.quest-reveal{width:min(90vw,720px);max-height:90vh;overflow:auto;border:0;border-radius:24px;
  background:#fffaf4;padding:0;box-shadow:0 30px 100px #17294266;color:#30425d}
.quest-reveal::backdrop{background:#192943cc;backdrop-filter:blur(7px)}
.quest-reveal-inner{text-align:center;padding:26px}
.quest-reveal h2{font-size:clamp(1.9rem,5vw,3.2rem);margin:12px 0;letter-spacing:-.065em}
.quest-reveal svg{display:block;max-width:540px;width:100%;margin:17px auto;
  image-rendering:pixelated;background:#f1ece4;border-radius:15px;
  border:12px solid #eee9e2;animation:quest-glow .8s ease-out both}
.quest-reveal p{font-size:.9rem;color:#657688}
.quest-reveal .button{margin:8px 0}
@keyframes quest-glow{from{opacity:.2;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@media(max-width:1050px){
  .quest-layout{grid-template-columns:minmax(245px,.82fr) minmax(350px,1.18fr);gap:12px}
  .quest-layout .panel{padding:15px}
}
@media(max-width:740px){
  .quest-invite{align-items:flex-start;flex-direction:column;margin-top:16px;padding:15px}
  .quest-invite-actions{justify-items:start;width:100%}
  .quest-invite-actions span{text-align:left;max-width:none}
  .quest-header{align-items:flex-start;flex-direction:column}
  .quest-header-buttons{width:100%;justify-content:flex-start}
  .quest-progress{grid-template-columns:1fr auto;gap:8px}
  .quest-progress .progress-track{grid-column:1/-1;grid-row:2}
  .quest-progress>span{font-size:.66rem}
  .quest-layout{grid-template-columns:1fr}
  .quest-art-frame{min-height:130px;padding:12px}
  .quest-art-frame svg{max-width:280px}
  .quest-question-panel .panel-heading{margin-bottom:13px}
  .quest-endpoints{gap:7px}
  .quest-endpoint{padding:8px}
  .quest-stepper{grid-template-columns:28px minmax(0,1fr) 28px;gap:4px}
  .quest-inclusion button{font-size:.7rem}
  .quest-reveal-inner{padding:17px}
}
@media(max-width:370px){
  .quest-region-chooser button{font-size:.72rem}
  .quest-inclusion{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .quest-reveal svg{animation:none}
}

/* Optional worked example is never a gate before a student's first picture row. */
.quest-worked-example{margin:9px 0 11px;border:1px solid #e2e5e0;background:#f9faf6;border-radius:10px;padding:0 11px}
.quest-worked-example summary{cursor:pointer;padding:10px 0;color:#4e7c74;font-size:.78rem;font-weight:800}
.quest-worked-example p,.quest-worked-example li{font-size:.75rem;line-height:1.6;color:#546775}
.quest-worked-example ol{padding-left:20px;margin:8px 0}


/* Quadratic Quest's five-step picture journey is opt-in and saved separately. */
.quest-picker-shell{
  padding:20px;
  margin:0 auto 18px;
  max-width:980px;
  border:1px solid #e5ded5;
  border-radius:19px;
  background:#fffdf9;
  box-shadow:0 9px 30px #35495d0b;
}
.quest-picker-heading{
  display:flex;align-items:start;justify-content:space-between;gap:15px;
  flex-wrap:wrap;margin-bottom:16px;
}
.quest-picker-heading h2{font-size:clamp(1.45rem,3vw,2rem);margin:6px 0;
  color:#293955;letter-spacing:-.045em}
.quest-picker-heading p{margin:0;color:#6b7888;font-size:.81rem;
  line-height:1.55;max-width:620px}
.quest-picker-heading strong{font-size:.78rem;color:#3f8677;white-space:nowrap}
.quest-picture-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;margin:15px 0;
}
.quest-picture-choice{
  position:relative;display:flex;align-items:start;text-align:left;
  gap:11px;min-width:0;padding:13px;
  background:#fff;border:2px solid #e6e0da;border-radius:13px;
  color:#344760;cursor:pointer;
}
.quest-picture-choice:hover{border-color:#a4c9c0;background:#f8fbf9}
.quest-picture-choice.selected{border-color:#4b9990;background:#edf7f3}
.quest-picture-choice--next:not(.selected){border-color:#a5cfc3}
.quest-picture-choice:focus-visible{outline:3px solid #4b9990;outline-offset:2px}
.quest-picture-number{
  display:grid;place-items:center;flex:none;width:34px;height:35px;
  background:#f4ece8;color:#ba7e72;border-radius:9px;font-size:.95rem;font-weight:900
}
.quest-picture-choice.selected .quest-picture-number{background:#d2ebe2;color:#2e8072}
.quest-picture-content{display:grid;gap:3px;min-width:0}
.quest-picture-content strong{font-size:.83rem}
.quest-picture-content small{font-size:.69rem;font-weight:650;color:#69798b;line-height:1.35}
.quest-picture-content em{font-size:.7rem;font-style:normal;color:#4b8a7f;font-weight:800}
.quest-picture-status{margin-left:auto;color:#679b8d;font-size:.93rem;font-weight:900}
.quest-picture-actions{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:12px;background:#f7f4ef;border:1px solid #ece4dc;
  padding:13px 15px;border-radius:12px
}
.quest-picture-actions strong{font-size:.86rem;color:#334761}
.quest-picture-actions p{margin:5px 0 0;color:#697b88;font-size:.74rem}
.quest-picture-actions .button{white-space:nowrap}
.quest-picker-note{font-size:.7rem;color:#829097;line-height:1.5;margin:11px 0 0}
.quest-progress[hidden],.quest-picker-shell[hidden]{display:none}
@media(max-width:740px){
  .quest-picker-shell{padding:13px;margin-bottom:12px}
  .quest-picture-grid{grid-template-columns:1fr;gap:8px}
  .quest-picture-choice{padding:11px}
  .quest-picker-heading strong{font-size:.71rem}
  .quest-picture-actions .button{width:100%}
}

/* Explicit hidden rules beat grid/flex display declarations in author CSS. */
.quest-layout[hidden],.quest-progress[hidden],.quest-picker-shell[hidden],
.quest-finish[hidden],.quest-screen[hidden]{display:none!important}


/* Shared navigation between self-contained Pixel Art and Graph Art experiences.
   The main game logic and layout stay separate from regions/ entirely. */
.studio-switch{
  display:flex;align-items:stretch;gap:3px;padding:4px;
  border-radius:13px;border:1px solid #e1dcd6;
  background:#ece9e4;white-space:nowrap
}
.studio-tab{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:37px;padding:8px 14px;border-radius:9px;
  font-size:.81rem;font-weight:850;letter-spacing:-.01em;
  text-decoration:none;color:#68768a;
  transition:background .13s ease,color .13s ease
}
.studio-tab:hover{background:#f6f7f4;color:#344a64}
.studio-tab.is-active,.studio-tab[aria-current="page"]{
  background:#fffdfa;color:#2e655f;
  box-shadow:0 2px 7px #36465615
}
.studio-tab:focus-visible{outline:3px solid #5c9d94;outline-offset:2px}
@media(max-width:740px){
  .topbar{flex-wrap:wrap}
  .top-actions{flex:1 1 100%;justify-content:space-between;gap:8px}
  .studio-switch{flex:1 1 auto}
  .studio-tab{flex:1 1 50%;font-size:.76rem;min-height:36px;padding:7px 9px}
  .top-actions .top-button{flex:0 0 auto}
  /* Protect the carefully tuned one-screen mobile painting workspace. */
  body.paint-session .studio-switch{display:none}
  body.paint-session .top-actions{flex:0 0 auto}
}
@media(max-width:380px){
  .studio-tab{font-size:.71rem;padding:6px 4px}
}


/* Desktop home workspace v1 — retain the existing mobile card styling and
   game screens while making Start picture visible on laptop-height displays. */
@media(min-width:741px){
  .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    padding:7px 0 14px;
  }
  .topbar .brand{grid-column:1;grid-row:1;justify-self:start}
  .topbar .top-actions{display:contents}
  .topbar .studio-switch{grid-column:2;grid-row:1;justify-self:center}
  .topbar .top-actions>.top-button{
    grid-column:3;grid-row:1;justify-self:end
  }
  #introScreen.intro-grid{
    min-height:0;
    align-items:start;
    padding:7px 0 34px;
    column-gap:clamp(14px,1.7vw,23px);
    row-gap:15px;
  }
  #introScreen .intro-copy{grid-area:intro;min-width:0}
  #introScreen .intro-copy .eyebrow{font-size:.65rem}
  #introScreen .intro-copy h1{
    font-size:clamp(2.1rem,3.3vw,2.9rem);
    letter-spacing:-.07em;
    line-height:1.1;
    margin:8px 0 5px;
  }
  #introScreen .intro-copy h1 br{display:none}
  #introScreen .intro-lead{
    font-size:.88rem;
    line-height:1.48;
    max-width:960px;
    margin:0;
    color:#727d8a;
  }
  #introScreen .intro-steps{display:none}
  #introScreen .intro-challenge-column{
    grid-area:challenges;min-width:0
  }
  #introScreen .level-heading{
    margin:1px 0 8px;gap:7px
  }
  #introScreen .level-heading #levelProgress{
    font-size:.68rem;white-space:nowrap
  }
  #introScreen .level-grid{
    grid-template-columns:1fr;
    max-width:none;gap:7px
  }
  #introScreen .level-card{
    min-height:52px;padding:8px 10px;
    border-radius:12px;gap:9px
  }
  #introScreen .level-card b{font-size:.77rem}
  #introScreen .level-card small{font-size:.65rem}
  #introScreen .level-icon{
    width:30px;height:30px;flex:0 0 30px;font-size:1rem
  }
  #introScreen .level-description{
    min-height:0;font-size:.73rem;
    line-height:1.45;margin:8px 0 0
  }
  #introScreen .picture-picker-shell{
    grid-area:pictures;min-width:0;
    max-width:none;margin:0
  }
  #introScreen .picture-picker-heading{margin:2px 0 7px;gap:7px}
  #introScreen .picture-picker-heading #picturePickerStatus{
    font-size:.67rem;white-space:nowrap
  }
  #introScreen .picture-journey-help{display:none}
  #introScreen .picture-path-heading{margin:6px 0 5px;gap:7px}
  #introScreen .picture-path-heading strong,
  #introScreen .picture-path-heading span{font-size:.69rem}
  #introScreen .picture-step-track{margin:6px 0 10px;gap:5px}
  #introScreen .picture-step{height:21px}
  #introScreen .picture-picker{
    grid-template-columns:1fr;gap:7px
  }
  #introScreen .picture-option{
    padding:8px 9px;min-height:54px;
    border-radius:12px;gap:8px
  }
  #introScreen .picture-option-icon{
    width:32px;height:32px;flex-basis:32px;border-radius:9px
  }
  #introScreen .picture-option-copy{gap:2px}
  #introScreen .picture-option-copy strong{font-size:.78rem}
  #introScreen .picture-option-copy small{font-size:.64rem}
  #introScreen .picture-option-meta{font-size:.63rem}
  #introScreen .more-pictures{margin:8px 0 0;padding:0 10px}
  #introScreen .more-pictures summary{padding:8px 3px;font-size:.72rem}
  #introScreen .extra-picture-picker{
    grid-template-columns:1fr;
    padding-bottom:9px
  }
  #introScreen .intro-canvas-column{
    grid-area:canvas;
    display:flex;flex-direction:column;
    align-self:start;min-width:0
  }
  #introScreen .intro-art{
    position:relative;
    max-width:none;
    padding:8px 12px 11px;
    margin:0
  }
  #introScreen .intro-art-frame{
    padding:12px;
    border-radius:18px;
    transform:rotate(1deg)
  }
  #introScreen .art-frame-heading{font-size:.63rem}
  #introScreen .intro-sprite{
    display:block;
    width:auto;
    height:clamp(160px,26vh,218px);
    max-width:100%;
    max-height:218px;
    margin:8px auto 9px
  }
  #introScreen .art-caption{font-size:.71rem}
  #introScreen .sticker{
    font-size:.64rem;padding:7px 9px;border-radius:10px
  }
  #introScreen .sticker-top{top:-2px;right:0}
  #introScreen .sticker-bottom{left:0;bottom:0}
  #introScreen .intro-action-column{margin-top:7px}
  #introScreen .intro-buttons{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
  }
  #introScreen .intro-buttons .button{min-width:0;white-space:nowrap}
  #introScreen #startButton{
    min-height:46px;
    padding:11px 12px;
    font-size:.81rem;
  }
  #introScreen #practiceButton{
    padding:10px 11px;
    font-size:.72rem
  }
  #introScreen .tiny-copy{
    margin:10px 0 0;
    text-align:center;
    font-size:.68rem
  }
  #introScreen .practice-status{margin:8px 0 0;font-size:.72rem}
  #introScreen .quest-invite{
    grid-area:extensions;
    margin:2px 0 0;
    padding:13px 16px;
    border-radius:14px;
  }
  #introScreen .quest-invite h2{font-size:1.12rem;margin:3px 0}
  #introScreen .quest-invite p{max-width:720px;font-size:.75rem}
}
/* Keep the main three decisions side by side on large desktops. */
@media(min-width:1200px){
  #introScreen.intro-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.91fr);
    grid-template-areas:
      "intro intro intro"
      "challenges pictures canvas"
      "extensions extensions extensions";
  }
}
/* At tablet and small laptop widths, keep Start beside the selectors.
   The canvas never pushes the Start action below the picture list. */
@media(min-width:741px) and (max-width:1199px){
  #introScreen.intro-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
    grid-template-areas:
      "intro intro"
      "challenges canvas"
      "pictures canvas"
      "extensions extensions";
    row-gap:12px;
  }
  #introScreen .intro-canvas-column{position:sticky;top:12px}
  #introScreen .level-grid,
  #introScreen .picture-picker{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  #introScreen .level-card{padding:8px 7px;gap:6px}
  #introScreen .level-card b{font-size:.72rem}
  #introScreen .level-card small{font-size:.61rem}
  #introScreen .level-icon{width:27px;height:27px;flex-basis:27px}
  #introScreen .picture-option{padding:7px;gap:6px}
  #introScreen .picture-option-icon{
    width:28px;height:28px;flex-basis:28px
  }
  #introScreen .picture-option-copy strong{font-size:.72rem}
  #introScreen .picture-option-copy small,
  #introScreen .picture-option-meta{font-size:.61rem}
  #introScreen .intro-sprite{height:clamp(170px,30vh,255px);max-height:255px}
  #introScreen .extra-picture-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* The existing mobile reading order, headline and large cards are preserved.
   Display:contents only separates the canvas preview from its action buttons
   so Start remains before the optional extension, as in the original design. */
@media(max-width:740px){
  #introScreen.intro-grid{
    display:grid;
    min-height:0;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "intro"
      "challenges"
      "pictures"
      "actions"
      "extensions"
      "art";
    gap:0;
    align-items:start;
    padding:28px 0;
  }
  #introScreen .intro-copy{grid-area:intro;min-width:0}
  #introScreen .intro-challenge-column{grid-area:challenges;min-width:0}
  #introScreen .picture-picker-shell{grid-area:pictures;min-width:0}
  #introScreen .intro-canvas-column{display:contents}
  #introScreen .intro-action-column{grid-area:actions;min-width:0}
  #introScreen .quest-invite{grid-area:extensions}
  #introScreen .intro-art{grid-area:art}
}

/* Polished, centred studio navigation; stable even for previously visited
   links. SVG symbols replace the Unicode characters of the first prototype. */
.studio-switch{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:4px;
  border-radius:13px;
  border:1px solid #e0ded9;
  background:#eeece7;
  white-space:nowrap;
}
.studio-switch .studio-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:39px;
  border-radius:9px;
  padding:9px 15px;
  background:transparent;
  color:#65738a;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:0;
  line-height:1;
  text-decoration:none;
  box-shadow:none;
  transition:background .15s,color .15s;
}
.studio-switch .studio-tab:visited:not([aria-current="page"]){
  color:#65738a;
  text-decoration:none;
}
.studio-switch .studio-tab:hover:not([aria-current="page"]){
  background:#faf8f4;color:#314b62;text-decoration:none;
}
.studio-switch .studio-tab.is-active,
.studio-switch .studio-tab[aria-current="page"],
.studio-switch .studio-tab[aria-current="page"]:visited{
  background:#2e3b58;
  color:#fff;
  box-shadow:0 2px 6px #17274025;
  text-decoration:none;
}
.studio-switch .studio-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;flex:0 0 17px
}
.studio-switch .studio-icon svg{
  display:block;width:17px;height:17px;
  stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round
}
@media(max-width:740px){
  .studio-switch{width:auto;max-width:100%;flex:1 1 auto}
  .studio-switch .studio-tab{
    flex:1 1 50%;padding:8px 9px;
    min-height:38px;font-size:.76rem;gap:6px
  }
}
@media(max-width:380px){
  .studio-switch .studio-tab{padding:7px 6px;font-size:.72rem}
}

/* Narrow phones: let the switch wrap naturally rather than clip or shrink labels. */
@media(max-width:350px){
  .topbar .top-actions{flex-wrap:wrap}
  .topbar .studio-switch{flex:1 1 100%;width:100%}
  .topbar .top-actions>.top-button{margin-left:auto}
}


/* My Mural is always optional and does not alter the quick-start workspace. */
.mural-nav-link{
 display:inline-flex;align-items:center;justify-content:center;
 text-decoration:none;border:1px solid #c9e0d4;background:#edf8f0;
 color:#367863;border-radius:11px;padding:9px 11px;
 white-space:nowrap;font-size:.78rem;font-weight:900;min-height:39px
}
.mural-nav-link:hover{background:#e1f3e7}
/* Do not add a control to the tightly packed one-screen painting workspace. */
body.paint-session .mural-nav-link{display:none}
.mural-nav-link:focus-visible,.mural-earned-link:focus-visible{
 outline:3px solid #e6a876;outline-offset:3px
}
.mural-earned-link{display:block;max-width:495px;margin:13px auto;
 border:1px solid #b8ddca;border-radius:12px;padding:12px 16px;
 background:#eaf8ed;color:#34745f;text-decoration:none;text-align:center;
 font-size:.83rem;font-weight:900
}
.mural-earned-link:hover{background:#d8f0de}
@media(min-width:741px){
 .topbar .top-actions>.mural-nav-link{
  grid-column:3;grid-row:1;justify-self:start
 }
}
@media(min-width:741px) and (max-width:1080px){
 .mural-nav-label{display:none}
 .mural-nav-link{padding:9px 12px}
}
@media(max-width:740px){
 .mural-nav-label{display:none}
 .mural-nav-link{padding:8px 11px;min-height:37px}
}
@media(max-width:380px){.mural-nav-link{padding:7px 9px}}
/* Classroom-feedback pass: persistent mathematical meanings, not a popup.
   Keep the existing endpoint tap-to-toggle and drag gestures unchanged. */
.endpoint-meaning{
  display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;
  gap:5px 15px;padding:7px 10px;margin:6px 0 10px;
  border:1px solid #e1e8e2;background:#f6faf6;border-radius:9px;
  font-size:.69rem;line-height:1.55;color:#42626a
}
.endpoint-meaning>span{display:inline-flex;align-items:center;gap:5px;white-space:normal}
.endpoint-meaning strong{color:#314e5e}
.endpoint-meaning .open-circle,.endpoint-meaning .closed-circle{
  width:15px;height:15px;flex:0 0 15px;border-color:#4c859f;
}
.endpoint-meaning .closed-circle{background:#4c859f}
.circle-interaction-tip{margin:0 0 7px;font-size:.68rem;color:#697c84}
.picture-variety-note{
  display:flex;align-items:center;justify-content:space-between;gap:9px;
  margin:9px 0 0;padding:8px 11px;border-radius:11px;
  background:#f2f7f4;border:1px dashed #d1dfd8;
  font-size:.72rem;color:#58776c
}
.picture-variety-button{
  border:1px solid #b6d6c7;border-radius:9px;background:#fffefa;
  color:#39735e;font-size:.73rem;font-weight:800;padding:8px 11px;
  min-height:37px;white-space:normal;text-align:center
}
.picture-variety-button:hover,.picture-variety-button:focus-visible{
  background:#e5f5ec;border-color:#63ab8a
}
#checkButton{
  min-height:47px;min-width:138px;
  background:#2a5971;color:white;
  box-shadow:0 4px 0 #1b3d50;
}
#checkButton:hover{background:#336a82}
#checkButton:focus-visible{outline:3px solid #e7a85e;outline-offset:3px}
#checkButton:disabled{box-shadow:0 2px 0 #34556a}
#finishSurpriseButton{border-color:#bad8c9;color:#39745b;background:#f0f8f3}
#finishSurpriseButton:hover{background:#e1f1e7}
@media(max-width:740px){
  #playScreen .question-footer{
    position:sticky;bottom:max(5px,env(safe-area-inset-bottom));
    z-index:12;margin-top:14px;padding:9px 10px;
    border:1px solid #d9e5dc;border-radius:12px;
    background:#fffdfa;box-shadow:0 -7px 26px #1e354923;
    align-items:center;gap:7px;flex-wrap:nowrap;
  }
  #playScreen .question-footer .footer-actions{
    margin-left:auto;flex:1 1 auto;min-width:0;justify-content:flex-end;
    gap:5px;align-items:center
  }
  #playScreen #hintButton{
    min-height:45px;padding:9px 8px;font-size:.72rem;white-space:normal;
    flex:0 1 auto
  }
  #playScreen #checkButton{
    min-height:49px;min-width:0;padding:11px 12px;
    font-size:.82rem;line-height:1.25;white-space:normal
  }
  #playScreen .question-footer .footer-actions #exitPracticeButton{
    padding:9px 7px;font-size:.68rem
  }
  .picture-variety-note{flex-wrap:wrap}
  .endpoint-meaning{font-size:.67rem;padding:6px 8px;gap:5px 11px}
}
@media(max-width:360px){
  #playScreen .question-footer #checkButton{padding:11px 8px;font-size:.76rem}
  #playScreen .question-footer #hintButton{font-size:.68rem;padding:9px 5px}
}


/* Difficulty-first mystery selector, compact enough for the desktop first fold. */
.difficulty-picker{display:grid;gap:7px;margin:9px 0}
.difficulty-card{width:100%;display:flex;align-items:center;gap:10px;
  background:#fffdfa;border:1.5px solid #e3e0da;border-radius:12px;
  text-align:left;padding:10px 11px;min-height:58px;color:#304560}
.difficulty-card:hover{border-color:#9cbfb2;background:#f9fcf9}
.difficulty-card.selected{border:2px solid #579b8c;background:#eaf6ef;
  padding:9.5px 10.5px;box-shadow:0 2px 0 #376d5d25}
.difficulty-stamp{display:grid;place-items:center;flex:0 0 35px;
  width:35px;height:35px;border-radius:9px;background:#f7eae3;
  color:#c37b71;font-weight:900;font-size:1rem}
.difficulty-card.selected .difficulty-stamp{background:#cce9dc;color:#357662}
.difficulty-copy{display:grid;gap:3px;min-width:0;flex:1}
.difficulty-copy strong{font-size:.86rem;line-height:1.2}
.difficulty-copy small{font-size:.69rem;line-height:1.3;color:#758194}
.difficulty-status{color:#6fac9b;font-size:1.1rem;font-weight:800}
.mystery-decision{padding:10px 11px;margin:10px 0;border:1px dashed #c5dcd0;
  background:#f2f9f4;border-radius:12px;display:grid;gap:8px}
.mystery-decision p{margin:0;color:#4c7466;font-size:.74rem}
#mysteryStartButton{width:100%;min-height:45px}
#mysteryStartButton:disabled{opacity:.6}
#mysteryContinueButton{min-height:39px;font-size:.79rem}
.gallery-description{font-size:.73rem;color:#6f8190;line-height:1.5;padding:4px 11px}
#morePicturesSection .picture-picker{margin-top:9px}
#morePicturesSection .picture-option{min-height:55px}
@media(max-width:740px){.difficulty-card{min-height:59px}.mystery-decision{margin-bottom:15px}}


/* Quadratic Quest · 25-picture, difficulty-first gallery.
   Shared difficulty-card primitives keep visual language aligned with
   Pixel Art and Graph Art while leaving maths controls untouched. */
.quest-difficulty-choices{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;margin:12px 0;
}
.quest-difficulty-card{min-width:0;min-height:80px;cursor:pointer}
.quest-difficulty-card:last-child:nth-child(odd){grid-column:1/-1}
.quest-difficulty-card .difficulty-copy small{font-size:.69rem;line-height:1.35}
.quest-difficulty-card .difficulty-copy .quest-difficulty-progress{
  color:#408777;font-size:.68rem;font-weight:800
}
.quest-difficulty-card.is-complete .difficulty-stamp{
  background:#d9f1e3;color:#347d65
}
.quest-mystery-decision{
  border-color:#c5ddce;background:#f0f8f2;
  gap:16px;margin:12px 0;
}
.quest-mystery-decision>div:first-child{flex:1;min-width:0}
.quest-mystery-decision #questSelectedTitle{font-size:1.01rem}
.quest-mystery-decision #questSelectedSummary{line-height:1.5}
.quest-mystery-decision #questTierStatus{
  color:#408b76;font-weight:800;margin-top:8px
}
.quest-mystery-buttons{display:grid;gap:8px;min-width:220px}
.quest-mystery-buttons .button{min-height:42px;font-size:.82rem}
.quest-mystery-buttons .button:disabled{opacity:.62;cursor:default}
.quest-mystery-buttons [hidden]{display:none!important}
.quest-optional-gallery{
  border:1px solid #dfe8df;background:#fcfdf9;
  border-radius:12px;padding:11px 14px;margin-top:14px;
}
.quest-optional-gallery summary{
  font-size:.81rem;font-weight:820;color:#367867;
  cursor:pointer;list-style-position:inside;
}
.quest-optional-gallery>p{
  font-size:.73rem;line-height:1.5;color:#70808b;
  margin:9px 0 1px
}
.quest-optional-gallery .quest-picture-grid{margin:10px 0 0}
.quest-picture-choice--complete{background:#f0f8f2}
.quest-picture-choice--complete .quest-picture-number{
  background:#d7eee2;color:#33846a
}
.quest-picture-choice--complete .quest-picture-status{color:#2f9577}
@media(max-width:740px){
  .quest-difficulty-choices{grid-template-columns:1fr;gap:8px}
  .quest-difficulty-card:last-child:nth-child(odd){grid-column:auto}
  .quest-difficulty-card{min-height:65px}
  .quest-mystery-decision{align-items:stretch;gap:10px}
  .quest-mystery-buttons{width:100%;min-width:0}
  .quest-mystery-buttons .button{width:100%}
  .quest-optional-gallery{padding:11px}
}