/* Academy-owned dimensional teaching system. Owner palette20261025.
   Information never depends on motion. All animation follows deliberate input. */
.spatial-stage{margin-block:1.6rem;padding:1.2rem;border:1px solid #cddce9;border-radius:1.1rem;background:linear-gradient(145deg,#fff 0%,#f4f8fa 64%,#f6f5ee 100%);box-shadow:0 2px 0 #d7b46a66,0 24px 42px -30px #122e5266;isolation:isolate}
.stage-heading{display:flex;justify-content:space-between;gap:1rem;margin-block-end:.9rem}.stage-eyebrow{font-size:.95rem;font-weight:700;color:var(--ink)}.stage-controls{display:flex;flex-wrap:wrap;gap:.45rem;margin-block-end:1rem}.stage-controls button{display:flex;gap:.4rem;align-items:center;padding:.45rem .65rem;border-color:#d5dfe8;font-size:.8rem;color:var(--ink);background:#fff;min-height:44px;box-shadow:0 2px 0 #122e520d;transition:transform 180ms var(--ease-spatial),background-color 180ms ease}.stage-controls button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink);transform:translateY(-2px);box-shadow:0 4px 0 #d7b46a88}.stage-controls button:disabled{opacity:.55;cursor:default}.step-dot{display:grid;place-items:center;min-width:1.35rem;height:1.35rem;border-radius:50%;border:1px solid currentColor;font-size:.75rem}
.learning-room{height:330px;position:relative;perspective:850px;perspective-origin:50% 40%;transform-style:preserve-3d;border:1px solid #d8e2ec;border-radius:.85rem;background:#eaf4fb;overflow:hidden}
.room-backdrop{position:absolute;inset:0;background:linear-gradient(120deg,#f6f5ee 0%,#eef5f8 65%,#e2f3ff 100%);transform:translateZ(var(--depth-room));border-block-end:4px solid var(--gold)}
.room-window{position:absolute;inset-block-start:20px;inset-inline-start:7%;width:100px;height:116px;border:7px solid #fff;outline:1px solid #cadbe8;border-radius:48px 48px 2px 2px;background:linear-gradient(145deg,#b3e4ff,#eaf7ff);box-shadow:10px 12px 0 #122e5208;transform:rotateY(-12deg)}.room-window::after{content:"";position:absolute;inset-block:0;inset-inline-start:50%;width:3px;background:#fff}.room-shelf{position:absolute;inset-block-start:45px;inset-inline-end:5%;width:95px;height:5px;background:var(--gold);box-shadow:0 8px 12px #122e5220}.room-shelf::before{content:"";position:absolute;inset-block-end:5px;inset-inline-start:8px;width:18px;height:38px;border-radius:3px 3px 0 0;background:var(--ink);box-shadow:22px 0 0 #38b8ff99,42px 4px 0 #d7b46a88}
.room-floor{position:absolute;inset-inline:-4%;inset-block-end:-60px;height:195px;background:repeating-linear-gradient(90deg,transparent 0,transparent 85px,#122e5208 86px,#122e5208 87px),linear-gradient(#e4e6df,#f6f5ee);border-block-start:1px solid #c3ccd4;transform:rotateX(52deg) translateZ(-22px);transform-origin:center top;box-shadow:0 -7px 18px #122e5208}
.scene-person{position:absolute;inset-block-start:110px;width:82px;text-align:center;transform-style:preserve-3d;transition:transform var(--motion-spatial) var(--ease-spatial),opacity var(--motion-spatial) ease,filter var(--motion-spatial) ease}.scene-person.teacher{inset-inline-start:9%;transform:translateZ(var(--depth-people)) rotateY(-9deg)}.scene-person.learner{inset-inline-end:9%;transform:translateZ(15px) rotateY(9deg);opacity:.75}.person-portrait{position:relative;height:104px;filter:drop-shadow(0 12px 6px #122e521a)}.person-head{position:absolute;width:37px;height:40px;border-radius:50%;inset-inline:0;margin-inline:auto;inset-block-start:0;background:#e2bb8d;border:5px solid var(--ink);border-block-end-width:2px}.person-body{position:absolute;width:72px;height:60px;border-radius:32px 32px 8px 8px;background:var(--ink);inset-inline:0;margin-inline:auto;inset-block-start:42px;border:1px solid #ffffff80;box-shadow:inset -8px -6px 0 #ffffff13}.learner .person-head{background:#d8af7f;border-color:#77542f}.learner .person-body{background:var(--sky);box-shadow:inset -9px -5px 0 #122e5215}.person-label{display:inline-block;padding:.1rem .45rem;border-radius:.35rem;background:#ffffffdf;color:var(--ink);font-size:.77rem;border:1px solid #d2dce5}
.teaching-object{position:absolute;inset-inline:0;margin-inline:auto;inset-block-start:43px;width:172px;min-height:174px;padding:1rem .7rem;text-align:center;border:1px solid #bdcfe0;border-block-start:4px solid var(--gold);border-radius:.8rem;background:linear-gradient(150deg,#fff,#f6fafd);box-shadow:0 5px 0 #122e5210,0 22px 24px -15px #122e5266;transform:translateX(22px) translateZ(var(--depth-object)) rotateY(-7deg);transition:transform var(--motion-spatial) var(--ease-spatial),box-shadow var(--motion-spatial) ease;will-change:auto}.object-caption{display:block;font-size:.72rem;color:var(--muted)}.object-word{display:block;font-family:var(--serif);font-size:4.8rem;line-height:1.15;color:var(--ink);unicode-bidi:isolate}.object-meaning{font-size:.9rem}.letter-plane{position:absolute;inset-inline:0;margin-inline:auto;inset-block-end:27px;width:208px;display:flex;align-items:center;justify-content:center;gap:.7rem;padding:.4rem 1rem;background:#ffffffe8;border:1px solid #cbd9e5;border-radius:.6rem;transform:translateZ(34px) rotateX(8deg);box-shadow:0 12px 14px -10px #122e524d;transition:transform var(--motion-spatial) var(--ease-spatial),opacity var(--motion-spatial) ease}.letter-plane bdi{font-family:var(--serif);font-size:1.8rem;line-height:1.25}.letter-plane span{font-size:.7rem;color:var(--muted)}
.stage-caption{font-size:.95rem;color:var(--ink);margin-block:1.1rem .8rem;min-height:3.3em;line-height:1.7}.stage-next{width:100%;box-shadow:0 4px 0 #122e521a}.stage-feedback{position:absolute;inset-inline:6%;inset-block-end:16px;max-height:170px;overflow:auto;padding:.8rem 1rem;background:#fff;border:1px solid #c4d8e6;border-inline-start:4px solid var(--sky);border-radius:.7rem;box-shadow:0 18px 22px -12px #122e5259;transform:translateZ(var(--depth-feedback));font-size:.85rem;line-height:1.65}.stage-feedback p{margin:.4rem 0 0}.stage-feedback strong{color:var(--ink)}
.spatial-stage[data-mode=example] .teaching-object{transform:translateX(0) translateZ(98px) rotateY(8deg) rotateZ(-2deg);box-shadow:0 7px 0 #d7b46a80,0 25px 28px -15px #122e5270}.spatial-stage[data-mode=example] .scene-person.teacher{transform:translateZ(40px) rotateY(-12deg) translateX(-5px)}.spatial-stage[data-mode=example] .scene-person.learner{transform:translateZ(28px) rotateY(12deg);opacity:1}.spatial-stage[data-mode=example] .letter-plane{transform:translateZ(58px) rotateX(-4deg)}
.spatial-stage[data-mode=attempt] .teaching-object{transform:translateX(32px) translateY(-18px) translateZ(4px) rotateY(-12deg) scale(.78)}.spatial-stage[data-mode=attempt] .scene-person.teacher{transform:translateZ(0) scale(.94);opacity:.48}.spatial-stage[data-mode=attempt] .scene-person.learner{transform:translateX(12px) translateZ(65px) scale(1.06);opacity:1}.spatial-stage[data-mode=attempt] .letter-plane{transform:translateX(-8px) translateZ(72px) rotateX(-6deg);border-color:var(--sky)}
.spatial-stage[data-mode=feedback] .teaching-object{transform:translateY(-35px) translateZ(24px) rotateY(0) scale(.68)}.spatial-stage[data-mode=feedback] .scene-person{transform:translateY(-15px) translateZ(5px) scale(.86);opacity:.65}.spatial-stage[data-mode=feedback] .letter-plane{opacity:0;transform:translateZ(0) translateY(30px)}.spatial-stage[data-mode=feedback] .stage-feedback{animation:feedback-plane-arrive 520ms var(--ease-spatial) both}
@keyframes feedback-plane-arrive{from{opacity:.1;transform:translateY(26px) translateZ(30px) rotateX(-12deg)}to{opacity:1;transform:translateY(0) translateZ(var(--depth-feedback)) rotateX(0)}}
@media(max-width:760px){.spatial-stage{padding:.8rem;margin-block:1.2rem}.stage-controls{display:grid;grid-template-columns:1fr 1fr}.stage-controls button{font-size:.78rem;justify-content:center}.learning-room{height:310px;perspective:950px}.room-window{width:68px;height:91px;inset-inline-start:6%}.room-shelf{width:65px}.scene-person{width:58px;inset-block-start:130px}.scene-person.teacher{inset-inline-start:4%}.scene-person.learner{inset-inline-end:4%}.person-portrait{height:85px}.person-head{width:30px;height:33px}.person-body{width:54px;height:49px;inset-block-start:34px}.person-label{font-size:.66rem;padding:.1rem .3rem}.teaching-object{width:136px;min-height:151px;inset-block-start:38px;padding:.8rem .45rem}.object-word{font-size:4rem}.object-caption{font-size:.66rem}.object-meaning{font-size:.8rem}.letter-plane{width:170px;inset-block-end:22px}.stage-feedback{inset-inline:4%;font-size:.8rem;max-height:148px}.stage-caption{font-size:.9rem;min-height:5.1em}.spatial-stage[data-mode=attempt] .teaching-object{transform:translateX(17px) translateY(-15px) translateZ(4px) rotateY(-10deg) scale(.8)}}
@media(prefers-reduced-motion:reduce){.learning-room{perspective:none}.spatial-stage *{animation:none!important;transition:none!important}.room-floor{transform:none;height:80px;inset-block-end:0}.room-window,.scene-person.teacher,.scene-person.learner,.letter-plane,.teaching-object{transform:none!important}.spatial-stage[data-mode=feedback] .teaching-object{transform:translateY(-30px) scale(.7)!important}.spatial-stage[data-mode=feedback] .scene-person{transform:translateY(-16px) scale(.86)!important}.stage-feedback{transform:none!important}.stage-controls button[aria-pressed=true]{transform:none}}
@media(forced-colors:active){.teaching-object,.stage-feedback,.stage-controls button,.room-backdrop,.letter-plane{border:1px solid CanvasText}.person-head,.person-body{forced-color-adjust:none}.learning-room{border:1px solid CanvasText}}