:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--page:var(--lightningcss-light,#f6f6f3)var(--lightningcss-dark,#121317);--panel:var(--lightningcss-light,#fff)var(--lightningcss-dark,#1a1c21);--ink:var(--lightningcss-light,#1d1e22)var(--lightningcss-dark,#eceef2);--muted:var(--lightningcss-light,#646872)var(--lightningcss-dark,#9da2ad);--line:var(--lightningcss-light,#dcdde2)var(--lightningcss-dark,#2d3038);--floor:var(--lightningcss-light,#fff)var(--lightningcss-dark,#1f2228);--virtual-floor:var(--lightningcss-light,#eef1f7)var(--lightningcss-dark,#181b21);--wall:var(--lightningcss-light,#8b9099)var(--lightningcss-dark,#8d929c);--wall-faint:var(--lightningcss-light,#c3c7cf)var(--lightningcss-dark,#454952);--mirror:var(--lightningcss-light,#2f6fed)var(--lightningcss-dark,#5c93ff);--mirror-faint:var(--lightningcss-light,#9ab9f5)var(--lightningcss-dark,#2f4f8f);--object:var(--lightningcss-light,#f0624d)var(--lightningcss-dark,#ff7360);--object-edge:var(--lightningcss-light,#c8402c)var(--lightningcss-dark,#ff9c8d);--eye:var(--lightningcss-light,#1d1e22)var(--lightningcss-dark,#f2f3f5);--eye-faint:var(--lightningcss-light,#b9bcc4)var(--lightningcss-dark,#5a5e68);--light:var(--lightningcss-light,#f2a516)var(--lightningcss-dark,#ffb733);--light-deep:var(--lightningcss-light,#c27c00)var(--lightningcss-dark,#ffcf73);--tutor:var(--lightningcss-light,#8a4bf0)var(--lightningcss-dark,#b48cff);--focus:var(--lightningcss-light,#2f6fed)var(--lightningcss-dark,#7aa6ff);--good:var(--lightningcss-light,#1d7f4e)var(--lightningcss-dark,#5fd18f);--bad:var(--lightningcss-light,#b3261e)var(--lightningcss-dark,#ff8a80);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:15px;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--page);color:var(--ink);margin:0}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.app{grid-template-columns:minmax(0,1fr);min-height:100dvh;display:grid}.app.with-sandbox{grid-template-columns:minmax(0,1fr) 380px}@media (width<=960px){.app.with-sandbox{grid-template-columns:minmax(0,1fr)}}main{flex-direction:column;gap:12px;min-width:0;padding:20px clamp(16px,3vw,40px);display:flex}header{flex-wrap:wrap;align-items:center;gap:8px;display:flex}header button{white-space:nowrap}.theme{display:flex}.theme button{text-transform:capitalize;border-radius:0;margin-left:-1px}.theme button:first-child{border-radius:8px 0 0 8px;margin-left:0}.theme button:last-child{border-radius:0 8px 8px 0}h1{margin:0 auto 0 0;font-size:18px;font-weight:700}button.quiet,.chips button,.reflections button{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:8px;padding:4px 10px}button.quiet:hover,.chips button:hover,.reflections button:hover{border-color:var(--muted)}button[aria-pressed=true],button[aria-checked=true]{background:var(--ink);color:var(--page);border-color:var(--ink)}aside{border-left:1px solid var(--line);background:var(--panel);max-height:100dvh;position:sticky;top:0;overflow-y:auto}@media (width<=960px){aside{border-left:0;border-top:1px solid var(--line);max-height:none;position:static}}.problem{border:1px solid var(--bad);color:var(--bad);overflow-wrap:anywhere;border-radius:8px;margin:0;padding:8px 12px}.how{color:var(--muted);max-width:70ch;margin:0;font-size:14px}.interactive{flex-direction:column;gap:10px;margin:0;display:flex}.stage{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px}.objective{background:var(--panel);border:1px solid var(--line);border-radius:14px;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:10px 14px;display:grid}.objective.met{border-color:var(--good)}.objective p{margin:0}.objective .goal{font-weight:700}.objective .now{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700}.objective.met .now{color:var(--good)}.objective .feedback{color:var(--muted);grid-column:1/-1;max-width:70ch}.world{-webkit-user-select:none;user-select:none;width:100%;height:auto;max-height:calc(100dvh - 300px);display:block}.world *{vector-effect:non-scaling-stroke}.readout{min-height:1.5em;font-size:15px}.readout:empty{display:none}.floor{fill:var(--floor)}.virtual-floor{fill:var(--virtual-floor);stroke:var(--line);stroke-width:1px;stroke-dasharray:4 4}.wall,.mirror{stroke-linecap:square;stroke-width:5px;pointer-events:none}.wall{stroke:var(--wall)}.mirror{stroke:var(--mirror)}.virtual-room .wall{stroke:var(--wall-faint);stroke-width:2.5px}.virtual-room .mirror{stroke:var(--mirror-faint);stroke-width:2.5px}.virtual-room{pointer-events:none}.wall-tap{stroke:#0000;stroke-width:24px;cursor:pointer;outline:none}.wall-tap:hover+g .wall,.wall-tap:focus-visible+g .wall{stroke:var(--ink)}.wall-tap:focus-visible{stroke:color-mix(in srgb, var(--focus) 20%, transparent)}.triangle{fill:var(--object);stroke:var(--object-edge);stroke-width:1.5px;stroke-linejoin:round}.triangle.virtual{fill-opacity:.45;stroke:var(--object);stroke-dasharray:3 3}.eye circle{fill:var(--eye)}.eye .pupil{fill:var(--floor)}.eye.virtual{fill:var(--eye-faint)}.draggable{cursor:grab;touch-action:none;outline:none}.draggable.dragging{cursor:grabbing}.grab-area,.tap-area{fill:#0000}.draggable:focus-visible .grab-area,.reflection:focus-visible .tap-area{stroke:var(--focus);stroke-width:2px;stroke-dasharray:4 3}.mirror-grip{fill:var(--floor);stroke:var(--mirror);stroke-width:2.5px}.reflection{cursor:pointer;outline:none}.reflection:hover .triangle.virtual{fill-opacity:.75}.traced-ring{fill:none;stroke:var(--light);stroke-width:2.5px}.light-path{fill:none;stroke:var(--light);stroke-width:3px;stroke-linejoin:round;stroke-dasharray:10 6;animation:.9s linear infinite flow}@keyframes flow{to{stroke-dashoffset:-16px}}.chevron{fill:none;stroke:var(--light-deep);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round}.bounce-angles path{fill:var(--light);fill-opacity:.25;stroke:var(--light-deep);stroke-width:1px}.sight-line{stroke:var(--light-deep);stroke-width:1.5px;stroke-dasharray:2 5;stroke-linecap:round}.sight-crossing{fill:var(--light-deep)}.highlight-ring{fill:none;stroke:var(--tutor);stroke-width:3px;transform-box:fill-box;transform-origin:50%;pointer-events:none;animation:1.4s ease-in-out infinite pulse}.highlight-wall{stroke:var(--tutor);stroke-width:14px;stroke-linecap:round;stroke-opacity:.4;pointer-events:none;animation:1.4s ease-in-out infinite glow}.highlight-room{fill:var(--tutor);fill-opacity:.1;stroke:var(--tutor);stroke-width:2px;stroke-dasharray:6 4;pointer-events:none}@keyframes pulse{50%{stroke-opacity:.55;transform:scale(1.18)}}@keyframes glow{50%{stroke-opacity:.15}}.more text{fill:var(--muted);paint-order:stroke;stroke:var(--panel);stroke-width:4px;font-weight:600}@media (prefers-reduced-motion:reduce){.light-path,.highlight-ring,.highlight-wall{animation:none}}.sandbox{flex-direction:column;font-size:13.5px;display:flex}.sandbox section{border-bottom:1px solid var(--line);flex-direction:column;gap:8px;padding:14px 16px;display:flex}.sandbox h2{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0;font-size:12px;font-weight:700}.sandbox .label{margin:4px 0 0;font-weight:600}.sandbox .count{color:var(--muted);font-weight:500}.sandbox .note{color:var(--muted);margin:0}.sandbox .words{font-size:12.5px}.sandbox .note:empty{display:none}.sandbox .note{overflow-wrap:anywhere}.toggle{cursor:pointer;align-items:center;gap:8px;display:flex}.toggle input{accent-color:var(--mirror);margin:0}.field{align-items:center;gap:8px;display:flex}.field span{min-width:42px;font-weight:600}.field input[type=range]{min-width:0;accent-color:var(--mirror);flex:1}.field select{min-width:0;font:inherit;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:8px;flex:1;padding:3px 6px}.developer{flex-direction:column;gap:8px;margin-top:8px;display:flex}.developer h3{margin:4px 0 0;font-size:13.5px}.chips{flex-wrap:wrap;gap:6px;display:flex}.chips button{padding:3px 9px}.reflections{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.reflections li{align-items:center;gap:8px;display:flex}.reflections .name{overflow-wrap:anywhere;flex:1;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12.5px}.reflections .actions{gap:3px;display:flex}.reflections button{padding:1px 6px;font-size:12px}.log .ok span{color:var(--good)}.log .refused span{color:var(--bad)}.log{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.log li{flex-direction:column;display:flex}.log code{overflow-wrap:anywhere;font-size:12px}.sandbox pre{background:var(--page);border-radius:8px;max-height:320px;padding:8px;font-size:11.5px;overflow:auto}.sandbox summary{cursor:pointer;font-weight:600}
