body{background:#bde6d5;min-width:320px;min-height:100vh;margin:0}#root{min-height:100vh}:root{--ink:#3e3150;--muted:#746986;--paper:#fff8e8;--paper-2:#fbecc7;--wood:#d99a59;--wood-dark:#b8733e;--wall:#f7dca9;--chalk:#3f7f68;--chalk-dark:#2e5e4d;--blue:#68b7ff;--yellow:#ffd45e;--pink:#ff94bb;--leaf:#58a86c;--rug:#7cb8b8;--shadow:0 12px 0 #4a2e1f29;--pixel-border:0 0 0 2px #4b385f, 0 5px 0 #4b385f;color:var(--ink);font-family:Inter,ui-rounded,Trebuchet MS,system-ui,sans-serif}*{box-sizing:border-box}button,input,textarea{font:inherit}.app{background:radial-gradient(circle at 20% 10%,#ffffffb8,#0000 28%),linear-gradient(135deg,#bde6d5 0%,#f8d8a8 100%);grid-template-columns:minmax(560px,1fr) minmax(500px,630px);gap:18px;min-height:100vh;padding:18px;display:grid;overflow-x:hidden}.classroom-shell{place-items:center;min-height:calc(100vh - 36px);display:grid}.classroom-scene{aspect-ratio:4/3;background:linear-gradient(90deg, #6c472c21 2px, transparent 2px) 0 30% / 52px 100%, linear-gradient(0deg, transparent 0 31%, var(--wood-dark) 31% 31.8%, transparent 31.8%), linear-gradient(180deg, var(--wall) 0 31%, var(--wood) 31%);width:min(100%,980px);min-height:520px;image-rendering:pixelated;border:6px solid #5a405f;border-radius:8px;position:relative;overflow:hidden;box-shadow:0 18px 35px #31251f3d}.back-wall{background:linear-gradient(90deg,#80573424 2px,#0000 2px) 0 0/84px 100%,linear-gradient(#ffe8b7,#f5d29b);position:absolute;inset:0 0 69%}.classroom-object{border:3px solid #5a405f;border-radius:6px;position:absolute}.chalkboard{color:#fff7d3;background:linear-gradient(90deg, transparent 49%, #ffffff14 50%, transparent 51%), var(--chalk);width:42%;height:16%;box-shadow:inset 0 0 0 5px var(--chalk-dark), 0 7px 0 #48302338;text-align:center;border-color:#6e4a36;place-items:center;gap:2px;padding:12px;font-weight:800;display:grid;top:5%;left:29%}.chalkboard small{color:#d8f0e5;font-size:.78rem}.teacher-desk{width:22%;height:12%;box-shadow:var(--shadow);background:linear-gradient(#c98246 0 58%,#9f5d32 58%);top:23%;left:39%}.teacher-desk:before,.student-desk:before{content:"";border-top:3px solid #ffefbab3;border-radius:4px;position:absolute;inset:8px}.desk-paper,.desk-book,.desk-pencil,.desk-mug{border:2px solid #5a405f;display:block;position:absolute}.desk-paper{background:#fff8e8;width:24%;height:28%;top:23%;left:16%}.desk-mug{background:#a8ddff;border-radius:50%;width:13%;height:25%;top:22%;right:16%}.student-desk{width:17%;height:12%;box-shadow:var(--shadow);background:linear-gradient(#dd9b56 0 56%,#ad6c3b 56%)}.student-desk--1{top:46%;left:29%}.student-desk--2{top:46%;left:54%}.student-desk--3{top:64%;left:29%}.student-desk--4{top:64%;left:54%}.pet-desk-button{z-index:7;color:#3e3150;cursor:pointer;background:#fff9ca;border:3px solid #4b385f;border-radius:6px;width:12%;min-width:92px;min-height:30px;font-size:.7rem;font-weight:900;line-height:1.05;position:absolute;transform:translate(-50%,-50%);box-shadow:0 3px #4b385f47}.pet-desk-button:before{content:"";background:var(--desk-tag);border:2px solid #4b385f;border-radius:50%;width:10px;height:10px;position:absolute;top:50%;left:8px;transform:translateY(-50%)}.pet-desk-button:hover,.pet-desk-button.active{filter:drop-shadow(0 0 7px #fff8b8e6);background:#aee7d2}.pet-desk-button--blue{--desk-tag:var(--blue)}.pet-desk-button--yellow{--desk-tag:var(--yellow)}.pet-desk-button--pink{--desk-tag:var(--pink)}.desk-book{background:#7bb6ff;width:25%;height:24%;top:25%;left:18%}.desk-pencil{background:#ffe36b;width:30%;height:10%;top:35%;right:17%;transform:rotate(-8deg)}.door{background:linear-gradient(90deg,#b66d42,#d18b55);border-color:#6d4933;width:12%;height:26%;top:7%;right:6%}.door span{background:#ffe27b;border:2px solid #5a405f;border-radius:50%;width:10px;height:10px;position:absolute;top:48%;right:14%}.bookshelf{width:16%;height:24%;box-shadow:var(--shadow);background:#a9663d;border-color:#6d4933;align-items:flex-end;gap:5%;padding:4%;display:flex;top:11%;left:5%}.bookshelf:before{content:"";border-top:4px solid #6d4933;position:absolute;top:45%;left:0;right:0}.bookshelf i{background:#ff8da8;border:2px solid #5a405f;width:22%;height:70%}.bookshelf i:nth-child(2){background:#84d98a;height:52%}.bookshelf i:nth-child(3){background:#7fb9ff;height:64%}.plant{background:0 0;border:0;width:7%;height:10%}.plant:before{content:"";background:#d78457;border:3px solid #5a405f;border-radius:2px 2px 10px 10px;height:42%;position:absolute;bottom:0;left:24%;right:24%}.plant:after{content:"";background:radial-gradient(circle at 25% 55%, var(--leaf) 0 23%, transparent 24%), radial-gradient(circle at 49% 22%, #7ac27a 0 25%, transparent 26%), radial-gradient(circle at 73% 56%, #4f965f 0 24%, transparent 25%);width:90%;height:65%;position:absolute;top:0;left:5%}.plant--left{top:25%;left:22%}.plant--right{top:25%;right:20%}.rug{opacity:.86;background:radial-gradient(#ffffff42 0 36%,#0000 37%),repeating-linear-gradient(90deg,#76b8b6 0 16px,#6ca8b8 16px 32px);border-color:#4c6a79;border-radius:50%;width:32%;height:42%;top:42%;left:34%}.supply-bin{width:10%;height:9%;box-shadow:var(--shadow);background:#8cc7ff;bottom:12%;right:7%}.supply-bin:before{content:"";background:#ffe16a;border:3px solid #5a405f;height:22%;position:absolute;top:-14%;left:18%;right:18%}.clock{aspect-ratio:1;background:#fff8e8;border-radius:50%;width:6%;top:6%;left:73%}.clock:before,.clock:after{content:"";transform-origin:top;background:#5a405f;width:3px;height:28%;position:absolute;top:50%;left:48%}.clock:after{height:22%;transform:rotate(90deg)}.robot-pet{cursor:pointer;z-index:6;background:0 0;border:0;width:56px;height:70px;padding:0;transition:left 2.4s ease-in-out,top 2.4s ease-in-out,filter .18s;position:absolute;transform:translate(-50%,-50%)}.robot-pet[data-facing=left] .pet-head,.robot-pet[data-facing=left] .pet-body{transform:scaleX(-1)}.robot-pet.is-selected{filter:drop-shadow(0 0 9px #fff8b8f2);animation:.9s ease-in-out infinite selectedBounce}.pet-head,.pet-body,.pet-shadow,.pet-antenna,.pet-emote{display:block;position:absolute}.pet-head{background:var(--pet-main);z-index:2;border:3px solid #4b385f;border-radius:15px 15px 12px 12px;width:40px;height:34px;top:8px;left:8px;box-shadow:inset -5px -5px #3a264621}.pet-body{background:var(--pet-accent);z-index:1;border:3px solid #4b385f;border-radius:9px 9px 13px 13px;width:30px;height:24px;top:39px;left:13px}.pet-antenna{background:#4b385f;border-radius:4px;width:5px;height:13px;top:0;left:26px}.pet-antenna:before{content:"";background:#fff5ad;border:3px solid #4b385f;border-radius:50%;width:13px;height:13px;position:absolute;top:-7px;left:-4px}.pet-eye{background:#342745;border-radius:50%;width:7px;height:9px;position:absolute;top:13px}.pet-eye--left{left:10px}.pet-eye--right{right:10px}.pet-mouth{background:#342745b3;border-radius:999px;width:9px;height:3px;position:absolute;top:24px;left:16px}.pet-panel{background:#fff8e8;border:2px solid #4b385f;border-radius:3px;width:14px;height:10px;position:absolute;top:7px;left:8px}.pet-shadow{background:#522d2133;border-radius:50%;width:40px;height:11px;bottom:0;left:8px}.pet-emote{color:#4b385f;z-index:4;background:#fff8e8;border:3px solid #4b385f;border-radius:50% 50% 50% 8px;place-items:center;min-width:24px;height:24px;font-weight:900;animation:1.1s ease-out both pop;display:grid;top:-21px;left:34px}.robot-pet--blue{--pet-main:var(--blue);--pet-accent:#d8f1ff}.robot-pet--yellow{--pet-main:var(--yellow);--pet-accent:#fff0ad}.robot-pet--pink{--pet-main:var(--pink);--pet-accent:#ffd7e7}.coach-panel{grid-template-rows:auto minmax(0,1fr);align-content:stretch;gap:12px;max-height:calc(100vh - 36px);padding-right:4px;display:grid;overflow:auto}.panel-card{background:#fff8e8f0;border:3px solid #4b385f;border-radius:8px;padding:14px;box-shadow:0 6px #4b385f2e}.eyebrow{color:#7d6389;letter-spacing:0;text-transform:uppercase;margin:0 0 7px;font-size:.73rem;font-weight:900}.pet-tabs{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.pet-tabs button,.dialogue-input button{color:#3e3150;cursor:pointer;background:#fff3bf;border:3px solid #4b385f;border-radius:7px;font-weight:900;box-shadow:0 4px #4b385f}.pet-tabs button{min-height:42px}.pet-tabs button.active,.dialogue-input button:hover{background:#aee7d2}.mini-dot{vertical-align:-1px;border:2px solid #4b385f;border-radius:50%;width:12px;height:12px;margin-right:6px;display:inline-block}.mini-dot--blue{background:var(--blue)}.mini-dot--yellow{background:var(--yellow)}.mini-dot--pink{background:var(--pink)}.dialogue-panel{background:var(--chat-pattern), linear-gradient(#fff7db, #f0d49c);grid-template-rows:minmax(0,1fr) auto auto auto;gap:12px;min-height:0;display:grid}.dialogue-panel--blue{--chat-pattern:radial-gradient(circle at 14px 14px, #4484b838 0 2px, transparent 2.5px) 0 0 / 28px 28px}.dialogue-panel--yellow{--chat-pattern:linear-gradient(135deg, transparent 0 38%, #8b6f2033 38% 45%, transparent 45% 55%, #8b6f2033 55% 62%, transparent 62%) 0 0 / 34px 18px}.dialogue-panel--pink{--chat-pattern:linear-gradient(#8e52772e, #8e52772e) 9px 9px / 8px 8px repeat}.chat-log{align-content:start;gap:10px;min-height:300px;padding:2px 4px 2px 2px;display:grid;overflow:auto}.chat-row{display:flex}.chat-row--student{justify-content:flex-end}.chat-row--pet{justify-content:flex-start}.chat-bubble{border:3px solid #4b385f;border-radius:14px;gap:5px;max-width:min(78%,430px);padding:10px 12px;display:grid;box-shadow:0 3px #4b385f29}.chat-bubble strong{color:#614274;letter-spacing:0;text-transform:uppercase;font-size:.76rem}.chat-bubble span{color:#47385b;font-weight:780;line-height:1.25}.chat-bubble--pet{background:#fffdf5;border-bottom-left-radius:5px}.chat-bubble--student{background:#dff2ea;border-bottom-right-radius:5px}.chat-bubble--student strong,.chat-bubble--student span{color:#315147}.demo-complete{color:#614274;text-transform:uppercase;background:#fff3bf;border:3px solid #4b385f;border-radius:999px;justify-self:center;margin:10px 0;padding:6px 12px;font-size:.78rem;font-weight:900;box-shadow:0 3px #4b385f29}.dialogue-input{background:#fff8e8f0;border:4px solid #4b385f;border-radius:8px;grid-template-columns:1fr 84px;align-items:center;gap:9px;padding:10px;display:grid;box-shadow:0 5px #4b385f}.dialogue-input input{min-width:0;height:48px;color:var(--ink);background:#fffdf5;border:3px solid #4b385f;border-radius:6px;padding:0 12px;font-weight:750}.dialogue-input button{height:48px}.suggestion-tray{background:#fffdf5b8;border:3px solid #4b385f;border-radius:8px;gap:8px;padding:10px;display:grid}.suggestion-tray button{color:#47385b;cursor:pointer;text-align:left;background:#fffdf5;border:3px solid #4b385f;border-radius:12px;width:100%;padding:9px 12px;font-weight:780;line-height:1.22;box-shadow:0 3px #4b385f2e}.suggestion-tray button:hover{background:#dff2ea}.idea-preview{flex-wrap:wrap;gap:6px;display:flex}.idea-preview span{background:#d8f1ff;border:2px solid #4b385f;border-radius:999px;padding:5px 8px;font-size:.78rem;font-weight:900}.whiteboard-backdrop{z-index:30;background:#392a3c57;place-items:center;padding:5%;display:grid;position:absolute;inset:0}.whiteboard-popover{cursor:crosshair;background:linear-gradient(90deg,#62a89714 1px,#0000 1px) 0 0/34px 100%,linear-gradient(#fffef7,#f9f1df);border:7px solid #6e4a36;border-radius:10px;width:min(78%,720px);min-height:64%;padding:22px;position:relative;box-shadow:0 18px #33221a47,0 26px 44px #1e162642}.whiteboard-title{border-bottom:4px solid #aee7d2;justify-content:space-between;align-items:baseline;gap:16px;margin:0 44px 14px 0;padding-bottom:10px;display:flex}.whiteboard-title span{color:#614274;font-size:1.05rem;font-weight:900}.whiteboard-title strong{color:#315f52;font-size:1.45rem}.whiteboard-close{color:#4b385f;cursor:pointer;background:#ffd7e7;border:3px solid #4b385f;border-radius:50%;width:34px;height:34px;font-weight:900;position:absolute;top:12px;right:12px;box-shadow:0 3px #4b385f}.whiteboard-work{color:#3e3150;gap:8px;display:grid}.whiteboard-line{background:#ffffffb8;min-height:38px;margin:0;padding:7px 12px;font-family:Comic Sans MS,Bradley Hand ITC,Segoe Print,cursive;font-size:1.16rem;font-weight:780}.whiteboard-line--equation{grid-template-columns:minmax(110px,1fr) 24px minmax(110px,1fr);align-items:baseline;width:min(460px,100%);display:grid}.whiteboard-line--comment{color:#766987;width:fit-content;max-width:78%;margin-left:40px;font-size:.92rem;transform:rotate(-1deg)}.equation-left{text-align:right}.equation-equals{text-align:center}.equation-right{text-align:left}.whiteboard-character{opacity:0;white-space:pre;animation:90ms linear forwards writeCharacter}.robot-pencil{transform-origin:50%;background:linear-gradient(90deg,#ffcf5d 0 70%,#f6f0df 70% 86%,#4b385f 86%);border:3px solid #4b385f;border-radius:999px 6px 6px 999px;width:56px;height:13px;animation:5.8s ease-in-out forwards robotPencilWrite;position:absolute;top:34%;left:24%;box-shadow:0 4px #4b385f29}.robot-pencil:before{content:"";background:#aee7d2;border:3px solid #4b385f;border-radius:8px;width:16px;height:21px;position:absolute;top:-7px;left:-13px}.whiteboard-error{color:#763c45;background:#ffe1df;border:3px solid #a64f5c;border-radius:7px;margin-top:12px;padding:10px 12px;font-weight:900}.whiteboard-hint{color:#746986;font-size:.78rem;font-weight:900;position:absolute;bottom:14px;left:20px}.star-sticker{z-index:2;color:#ffc83d;text-shadow:-2px -2px #4b385f,2px -2px #4b385f,-2px 2px #4b385f,2px 2px #4b385f;pointer-events:none;font-size:3rem;line-height:1;position:absolute;transform:translate(-50%,-50%)rotate(-12deg)}@keyframes selectedBounce{0%,to{margin-top:0}50%{margin-top:-5px}}@keyframes pop{0%{opacity:0;transform:translateY(7px)scale(.8)}20%,80%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-4px)scale(.96)}}@keyframes stepIn{to{opacity:1;transform:translateY(0)}}@keyframes writeCharacter{to{opacity:1}}@keyframes robotPencilWrite{0%{transform:translate(0)rotate(-8deg)}18%{transform:translate(250px,4px)rotate(4deg)}35%{transform:translate(70px,52px)rotate(-6deg)}52%{transform:translate(260px,94px)rotate(5deg)}72%{transform:translate(70px,146px)rotate(-7deg)}to{transform:translate(405px,246px)rotate(3deg)}}@media (width<=1060px){.app{grid-template-columns:1fr}.classroom-shell{min-height:auto}.classroom-scene{min-height:420px}.coach-panel{grid-template-rows:auto auto;grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.dialogue-panel{grid-column:1/-1}.chat-log{min-height:220px}.whiteboard-popover{width:min(92%,720px)}}@media (width<=700px){.app{padding:10px}.classroom-scene{min-height:360px}.coach-panel,.pet-tabs,.dialogue-input{grid-template-columns:1fr}.pet-desk-button{min-width:86px;font-size:.68rem}.whiteboard-popover{width:96%;min-height:74%;padding:16px}.whiteboard-title{margin-right:38px;display:grid}}