:root { --ink:#152c34; --muted:#607279; --paper:#fffdf7; --green:#2c9b67; --green-dark:#176342; --coral:#ff7657; --gold:#ffd34d; --cyan:#45c5da; --blue:#2869c7; --line:#d8e3de; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#f1f6f2; color:var(--ink); }
body { font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif; }
button { font:inherit; cursor:pointer; }
button:focus-visible,[tabindex]:focus-visible { outline:4px solid rgba(40,105,199,.38); outline-offset:3px; }
[hidden] { display:none !important; }
.lesson { position:relative; width:min(1240px,calc(100vw - 48px)); height:calc(100vh - 28px); min-height:740px; margin:14px auto; display:grid; grid-template-rows:minmax(0,1fr) 178px; gap:14px; }
.mute { position:absolute; z-index:50; top:16px; right:16px; width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.92); color:var(--ink); }
.mute svg { width:23px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sound-off,.mute[aria-pressed="true"] .sound-on { display:none; }.mute[aria-pressed="true"] .sound-off { display:block; }
.studio { position:relative; min-height:0; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:0 8px 0 #dce8e1; }
.paper-grid { position:absolute; inset:0; opacity:.42; background-image:linear-gradient(#dce7e2 1px,transparent 1px),linear-gradient(90deg,#dce7e2 1px,transparent 1px); background-size:26px 26px; mask-image:linear-gradient(90deg,#000 0 76%,transparent 94%); }
.level-label { position:absolute; z-index:5; top:22px; left:25px; display:flex; flex-direction:column; gap:3px; }
.level-label span,.eyebrow { color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.level-label strong { font-size:20px; }
.geometry-wrap { position:absolute; inset:54px 288px 0 0; }
#proofSvg { width:100%; height:100%; overflow:visible; }
.square { opacity:.12; transform-box:fill-box; transform-origin:center; transition:opacity 220ms ease-out,transform 220ms ease-out,filter 220ms ease-out; }
.square.is-built { opacity:1; }
.square.is-source { cursor:pointer; }
.square.is-source:hover { filter:brightness(1.04) drop-shadow(0 7px 5px rgba(21,44,52,.17)); }
.square.is-pointed { filter:drop-shadow(0 0 8px white) drop-shadow(0 0 16px var(--blue)); animation:pulse 500ms ease-out 3; }
.square-outline { stroke:var(--ink); stroke-width:5; stroke-linejoin:round; }
.triangle-shape { fill:white; stroke:var(--ink); stroke-width:6; stroke-linejoin:round; }
.right-angle { fill:none; stroke:var(--green); stroke-width:5; }
.side-label,.area-label { text-anchor:middle; fill:var(--ink); font-weight:950; paint-order:stroke; stroke:white; stroke-width:7px; stroke-linejoin:round; }
.side-label { font-size:18px; }.area-label { font-size:27px; }
.fill-cell { stroke:rgba(255,255,255,.75); stroke-width:1; animation:cell-in 300ms ease-out both; }
.equation { position:absolute; left:50%; bottom:17px; transform:translateX(-50%) rotate(-1deg); min-width:330px; display:flex; justify-content:center; align-items:center; gap:12px; padding:10px 18px; border:3px solid var(--ink); background:white; box-shadow:5px 5px 0 var(--ink); font-size:28px; font-weight:950; }
.equation .a { color:#bd3e27; }.equation .b { color:#8b6600; }.equation .c { color:#087187; }
.area-ledger { position:absolute; z-index:4; top:82px; right:32px; width:226px; padding:24px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 7px 20px rgba(21,44,52,.08); }
.ledger-term { position:relative; display:grid; grid-template-columns:28px 1fr; column-gap:10px; align-items:center; padding:15px 0 8px; }
.ledger-term i { grid-row:1/3; width:25px; height:25px; border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); }.ledger-term.coral i{background:var(--coral)}.ledger-term.gold i{background:var(--gold)}.ledger-term.cyan i{background:var(--cyan)}
.ledger-term span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }.ledger-term strong { font-size:19px; }
.ledger-sign { height:0; position:relative; left:6px; top:5px; font-size:22px; font-weight:950; }.ledger-rule { height:3px; margin:12px 0 0; background:var(--ink); }
.area-ledger p { min-height:55px; margin:16px 0 0; color:var(--muted); font-family:system-ui,sans-serif; font-size:13px; line-height:1.42; }
.intro-card,.finale { position:absolute; z-index:30; left:50%; top:50%; width:510px; min-height:330px; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; border:2px solid var(--ink); border-radius:20px; background:rgba(255,255,255,.98); box-shadow:11px 12px 0 var(--ink); text-align:center; }
.intro-card span,.finale>span { color:var(--blue); font-size:11px; font-weight:950; letter-spacing:.12em; text-transform:uppercase; }.intro-card h1,.finale h1 { margin:8px 0 10px; font-size:39px; line-height:1; letter-spacing:-.04em; }.intro-card p,.finale p { max-width:410px; margin:0 0 23px; color:var(--muted); font-family:system-ui,sans-serif; line-height:1.5; }
.intro-card button,.finale button,.primary { min-height:54px; padding:0 24px; border:2px solid var(--green-dark); border-radius:12px; color:white; background:var(--green); box-shadow:0 6px 0 var(--green-dark); font-weight:950; transition:transform 150ms ease-out,box-shadow 150ms ease-out; }.intro-card button:hover,.finale button:hover,.primary:hover { transform:translateY(-2px); box-shadow:0 8px 0 var(--green-dark); }.intro-card button:active,.finale button:active,.primary:active { transform:translateY(4px); box-shadow:0 2px 0 var(--green-dark); }
.finale { min-height:430px; background:#fffdf2; }.finale>strong { margin:-7px 0 23px; color:#087187; font-size:27px; }.final-mark { position:relative; width:82px; height:82px; margin-bottom:18px; transform:rotate(45deg); border:4px solid var(--ink); background:var(--cyan); box-shadow:7px 7px 0 var(--ink); }.final-mark i,.final-mark b { position:absolute; border:3px solid var(--ink); }.final-mark i { width:35px;height:35px;left:-18px;bottom:-18px;background:var(--coral)}.final-mark b { width:28px;height:28px;right:-15px;top:-15px;background:var(--gold)}
.context-card { position:absolute; z-index:4; left:40px; bottom:34px; width:210px; padding:15px 18px; border:2px solid var(--ink); border-radius:14px; background:white; box-shadow:5px 5px 0 var(--ink); }.context-card strong{display:block;font-size:18px}.context-card span{display:block;margin-top:4px;color:var(--muted);font:13px/1.35 system-ui,sans-serif}
.decision { display:grid; grid-template-columns:340px 1fr; align-items:center; gap:30px; padding:20px 26px; border:1px solid var(--line); border-radius:19px; background:white; box-shadow:0 6px 0 #dce6e1; }
.decision-copy span { color:var(--blue); font-size:10px; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }.decision-copy h2 { margin:5px 0 5px; font-size:25px; line-height:1.08; }.decision-copy p { margin:0; color:var(--muted); font:13px/1.4 system-ui,sans-serif; }
.actions { display:flex; align-items:center; justify-content:center; gap:13px; }
.choice,.build-button,.tile-button { min-height:92px; flex:1; max-width:270px; padding:14px 18px; border:2px solid #cbd8d2; border-radius:14px; background:#f9fbfa; color:var(--ink); text-align:left; transition:transform 150ms ease-out,border-color 150ms ease-out,box-shadow 150ms ease-out; }.choice:hover,.build-button:hover,.tile-button:hover { transform:translateY(-3px); border-color:var(--blue); box-shadow:0 5px 0 #d9e5ef; }.choice strong,.build-button strong,.tile-button strong { display:block;font-size:17px }.choice small,.build-button small,.tile-button small { display:block;margin-top:5px;color:var(--muted);font:12px/1.3 system-ui,sans-serif }.build-button.a{border-color:#e85d41;background:#fff4ef}.build-button.b{border-color:#d2a600;background:#fffbed}.build-button.c{border-color:#139cb5;background:#effcff}
.primary { min-width:260px; font-size:17px; }.result { display:flex;align-items:center;gap:15px;color:var(--green-dark);font-size:17px;font-weight:900}.result i{width:48px;height:48px;display:grid;place-items:center;border:3px solid var(--ink);border-radius:50%;background:var(--gold);font-style:normal;font-size:24px}.wrong { color:#a63b28; }
.studio.is-demoing .square.is-source { filter:brightness(1.05) drop-shadow(0 0 12px rgba(40,105,199,.35)); }.studio.is-celebrating { animation:studio-glow 700ms ease-out; }
.sr-only { position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
@keyframes cell-in{0%{opacity:0}100%{opacity:1}}@keyframes pulse{50%{opacity:.65}}@keyframes studio-glow{50%{box-shadow:0 8px 0 #dce8e1,0 0 0 8px rgba(69,197,218,.23)}}
@media(max-height:790px){.lesson{min-height:690px;grid-template-rows:minmax(0,1fr) 160px}.geometry-wrap{inset-top:42px}.decision{padding-top:14px;padding-bottom:14px}.choice,.build-button,.tile-button{min-height:82px}.area-ledger{top:70px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}