@font-face{font-family:DM;src:url('assets/dm-sans.ttf')}@font-face{font-family:News;src:url('assets/newsreader.ttf')}
:root{--paper:#fff;--ink:#171717;--muted:#616161;--line:#d5d5d5;--yellow:#ffdb00;--back:#dadada}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px DM,Arial,sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:5px}h1,h2,p{margin:0}.math{font-family:News,Georgia,serif}::selection{background:var(--back)}
.app{width:100%;max-width:390px;height:844px;min-height:844px;margin:auto;padding:32px 24px 28px;position:relative;display:flex;flex-direction:column;background:var(--paper)}
.instruction{margin-top:20px;flex-shrink:0;text-align:center}.instruction h1{font-size:18px;font-weight:450;line-height:26px;letter-spacing:-.25px;white-space:nowrap}
.experiment,.completion-figure,.edge-stage{width:342px;height:380px;flex-shrink:0;margin:auto 0;position:relative;user-select:none}.experiment,.edge-stage{touch-action:none;cursor:ew-resize}.lesson-page:has(.experiment[role=button]) .experiment{cursor:pointer}.experiment.label-mode{cursor:default}.experiment.dragging{cursor:grabbing}
.paper-geometry{display:block;width:100%;height:100%;overflow:visible}.paper-geometry text{font-family:News,Georgia,serif;font-size:30px;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}.paper-geometry .slot-hint{font:13px DM,Arial,sans-serif;fill:var(--muted);stroke:none}.paper-geometry .formula-slot{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}.paper-geometry .moving-label{pointer-events:none}.paper-geometry .can-drag{pointer-events:all;cursor:grab}.paper-geometry .can-drag rect{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 4;fill-opacity:0}.paper-geometry .held{cursor:grabbing}.paper-geometry .held rect{stroke-dasharray:none;fill:var(--paper)}.paper-geometry .square-power{font-size:18px}.paper-geometry .final-dim-labels text{font-size:25px}.paper-geometry .final-dim-labels,.paper-geometry .square-power{pointer-events:none}.paper-geometry .limit-note{display:none}
.bottom-area{flex-shrink:0;width:100%}.primary{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;padding:0 20px;border:1px solid var(--ink);border-radius:0;background:var(--ink);color:var(--paper);font-size:16px;font-weight:500;transition:background .15s,transform .15s}.primary svg{width:21px;height:21px}.primary:hover:not(:disabled){background:#333}.primary:active:not(:disabled){transform:translateY(1px)}.primary:disabled{background:var(--paper);color:var(--muted);border-color:var(--line)}
.map-page{padding-top:28px;padding-bottom:0}.path-scroll{min-height:0;overflow:auto;flex:1;margin:0 -24px;scrollbar-width:none}.path-scroll::-webkit-scrollbar{display:none}.course-path{width:342px;height:954px;margin:0 24px;position:relative}.path-line{position:absolute;inset:0;width:342px;height:940px}.route-base{stroke:var(--line);stroke-width:1.5;stroke-dasharray:2 8;stroke-linecap:round}.route-complete{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0}.course-stop{position:absolute;left:var(--x);top:var(--y);width:0;height:0}.course-node{position:absolute;left:-34px;top:-34px;width:68px;height:68px;border:1px solid #bdbdbd;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;padding:10px;z-index:1}.node-geometry{display:block;width:44px;height:44px}.done .course-node{background:var(--back);border-color:transparent}.locked .course-node{border-style:dashed;color:#777}.current .course-node{width:112px;height:112px;left:-56px;top:-56px;border:1.5px solid var(--ink);padding:18px}.current .node-geometry{width:65px;height:65px}.course-node .icon-wedge{fill:var(--back)}.current .icon-wedge{fill:var(--yellow)}button.course-node:hover{border-color:var(--ink);background:#f6f6f6}button.course-node:active{transform:scale(.96)}.course-title{position:absolute;top:-10px;width:148px;pointer-events:none}.course-title.to-right{left:53px}.course-title.to-left{right:54px;text-align:right}.current .course-title.to-right{left:74px;width:154px}.current .course-title.to-left{right:74px;width:154px}.course-title h2{font-size:16px;font-weight:450;line-height:1.25;letter-spacing:-.25px}.current .course-title h2{font-size:22px;line-height:1.15;letter-spacing:-.55px}.locked .course-title h2{color:var(--muted)}.save-alert{position:absolute;bottom:16px;left:24px;right:24px;background:var(--paper);padding:12px;border:1px solid var(--ink);font-size:14px;line-height:1.5}
.quiz-figure{width:342px;height:400px;flex-shrink:0;margin:auto 0}.quiz-diagram{height:270px;width:342px}.quiz-diagram>svg{display:block;width:100%;height:100%}.quiz-diagram text.math{font-size:28px;fill:var(--ink)}.quiz-diagram .circle-edge-label{display:none}.math-choices{display:block;width:342px;height:70px;margin-top:32px;overflow:visible}.math-choice{cursor:pointer}.math-choice text{font-family:News,Georgia,serif;font-size:28px;fill:var(--ink)}.choice-line{stroke:var(--ink);stroke-width:1.5;opacity:0}.math-choice.selected .choice-line,.math-choice:hover .choice-line{opacity:1}.math-choice:not(.selected):hover .choice-line{opacity:.35}.math-choice .choice-error{display:none}.math-choice.wrong .choice-error{display:block}.math-choice[aria-disabled=true]{cursor:default}.math-choice[aria-disabled=true]:not(.selected) text{fill:var(--muted)}.quiz-page:has(.quiz-equation) .quiz-diagram{height:350px}.quiz-equation{font-size:30px;text-align:center;margin-top:-70px;animation:fold-feedback .25s ease-out}.quiz-diagram .formula-base,.quiz-diagram .square-power{display:none}
.edge-stage svg{width:100%;height:100%}.edge-stage .math{font-size:32px;fill:var(--ink)}.basic-diagram{margin:auto 0;display:grid;gap:40px;justify-items:center}.basic-diagram svg{width:170px;height:170px;stroke-width:.5px}.basic-diagram .math{font-size:30px}
@keyframes draw-path{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes fold-feedback{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* The same circle travels from the course path into the work area. */
.circle-transfer{position:fixed;left:0;top:0;z-index:5;pointer-events:none;transform-origin:0 0;overflow:hidden}
.circle-transfer .paper-geometry{width:100%;height:100%;overflow:hidden}
.circle-transfer .dimensions,.circle-transfer .circle-edge-label,.circle-transfer .moving-label,.circle-transfer .formula-base,.circle-transfer .square-power,.circle-transfer .final-dim-labels{visibility:hidden}
.showcase{background:#f5f5f5;padding:32px 0 28px}.showcase-head{max-width:1254px;margin:auto}.wordmark{font-size:41px;font-weight:600;letter-spacing:-2px}.screen-grid{display:grid;grid-template-columns:repeat(3,390px);gap:42px;justify-content:center;margin-top:27px}.screen-caption{font-size:14px;margin-bottom:13px;display:flex;gap:14px}.screen-caption span{font-size:13px;color:var(--muted)}.screen-grid iframe{display:block;width:390px;height:844px;border:0}
@media(min-width:600px){body:not(.showcase){background:#f5f5f5}}@media(max-width:1300px){.screen-grid{gap:22px}.showcase-head{max-width:1214px}}@media(max-width:900px){.screen-grid{display:flex;flex-direction:column;align-items:center}.showcase-head{max-width:390px;padding:0 5px}}@media(max-width:389px){.app{padding-left:18px;padding-right:18px}.experiment,.completion-figure,.edge-stage,.quiz-figure,.quiz-diagram,.math-choices{width:100%}.instruction h1{font-size:17px}.path-scroll{margin-left:-18px;margin-right:-18px}.course-path{margin:0 18px;transform:scale(.94);transform-origin:top left}.course-title h2{font-size:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}::view-transition-group(*){animation:none!important}}

/* The diagram, its instruction and the fixed action share one lower work area. */
.lesson-page .experiment,.quiz-page .quiz-figure,.complete-page .completion-figure{order:0;margin:auto 0 0}
.lesson-page .instruction,.quiz-page .instruction,.complete-page .instruction{order:1;margin:14px 0 16px}
.lesson-page .bottom-area,.quiz-page .bottom-area,.complete-page .bottom-area{order:2}
.bottom-area:has(.lesson-back){display:flex;gap:12px;align-items:center}
.bottom-area:has(.lesson-back) .primary{width:auto;flex:1;min-width:0}
.lesson-back{flex:0 0 44px;height:56px;padding:0;border:0;background:var(--paper);display:grid;place-items:center}
.lesson-back svg{width:21px;height:21px;transform:rotate(180deg)}
.lesson-back:hover{background:var(--back)}
.lesson-back:active{transform:translateX(-2px)}
/* SVG uses its own focus paint; retain a black local cue instead of the UA blue box. */
.math-choice:focus,.moving-label:focus{outline:none}
.math-choice:focus-visible .choice-line{opacity:1;stroke-width:2}
.moving-label:focus-visible rect{stroke:var(--ink);stroke-width:2}

/* Math operators have the same optical weight as their operands. */
.math-operator{font-family:News,Georgia,serif;font-size:1em;font-weight:650;stroke:none}
.paper-geometry .area-equals,.paper-geometry .multiply{font-size:30px;font-weight:650;stroke:none}
.quiz-equation{font-weight:500}

/* Lift the entire operation group together, retaining its internal spacing. */
.lesson-page,.quiz-page,.complete-page{padding-bottom:192px}