@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght,SOFT,WONK@9..144,500,20,1;9..144,600,20,1&display=swap');

:root { color-scheme: light; --forest:#10292b; --forest-2:#19393a; --cream:#f7f3e9; --paper:#fffcf5; --ink:#1a3031; --muted:#627272; --gold:#e5b965; --line:#dcded3; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:'DM Sans',Arial,sans-serif; }
a { color:inherit; }
.page-shell { min-height:100vh; overflow:hidden; }
.topbar, main, footer { width:min(1180px, calc(100% - 48px)); margin-inline:auto; }
.topbar { height:92px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { width:43px; height:43px; display:grid; place-items:center; border-radius:13px 13px 13px 4px; background:var(--forest); color:var(--gold); font:600 31px 'Fraunces',Georgia,serif; box-shadow:3px 3px 0 #d5bb87; }
.brand-copy { display:grid; gap:1px; }.brand-copy strong { font:600 19px 'Fraunces',Georgia,serif; }.brand-copy small { font-size:9px; letter-spacing:.24em; font-weight:700; color:#6c7a74; }
.prototype-tag { border:1px solid #d7d9cd; border-radius:999px; padding:8px 13px; color:#64726c; font-size:12px; font-weight:700; letter-spacing:.025em; background:#fff9; }
.hero { min-height:390px; padding:57px 65px 42px; position:relative; overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr; border-radius:28px; background:var(--forest); color:#f9f4e8; box-shadow:0 18px 52px #163a351c; }
.hero:before { content:""; position:absolute; inset:0; opacity:.2; background:radial-gradient(circle at 64% 20%, #467365, transparent 35%),linear-gradient(120deg, transparent 50%, #365b4b 100%); pointer-events:none; }
.hero-copy { z-index:1; max-width:600px; }
.eyebrow { margin:0 0 13px; color:#ae8752; font-size:11px; letter-spacing:.21em; font-weight:700; }
.hero .eyebrow { color:var(--gold); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:'Fraunces',Georgia,serif; font-weight:600; }
h1 { font-size:clamp(39px,4.3vw,61px); line-height:1.08; letter-spacing:-.035em; margin-bottom:18px; }
h1 em { color:var(--gold); font-style:normal; }
.hero-intro { max-width:450px; color:#c4d2cb; font-size:16px; line-height:1.7; margin-bottom:29px; }
.status-panel { display:flex; gap:17px; align-items:flex-start; max-width:515px; border:1px solid #67817b; background:#203d3c; padding:18px 20px; border-radius:15px; box-shadow:inset 0 1px 0 #ffffff16; }
.status-light { flex:none; width:11px; height:11px; margin-top:6px; border-radius:50%; background:#e5b965; box-shadow:0 0 0 5px #e5b96522; }
.status-kicker { color:#b7ccb8; margin-bottom:6px; font-size:10px; letter-spacing:.16em; font-weight:700; }
.status-panel h2 { font-family:'DM Sans',Arial,sans-serif; font-size:18px; margin-bottom:6px; letter-spacing:-.02em; }
.status-panel p:last-child { font-size:13px; line-height:1.55; margin:0; color:#c9d6d0; }
.privacy-note { display:flex; align-items:center; gap:9px; margin:20px 0 0; font-size:12px; color:#a7bbb0; }
.privacy-note span { color:var(--gold); font-size:18px; }
.hero-art { position:relative; min-height:350px; z-index:1; }
.sun-disc { position:absolute; width:340px; height:340px; right:15%; top:-42px; background:#d6b374; border-radius:50%; opacity:.9; box-shadow:0 0 0 21px #d6b37410,0 0 0 51px #d6b3740a; }
.school-roof { position:absolute; z-index:3; width:390px; height:105px; right:-12px; top:110px; clip-path:polygon(50% 0,100% 100%,0 100%); background:#bd8263; filter:drop-shadow(0 8px 2px #0003); }
.school-body { position:absolute; z-index:4; width:328px; height:226px; right:19px; top:208px; background:#e8d4ae; border:9px solid #c1986c; border-bottom:0; box-shadow:14px 14px 0 #0002; }
.school-body:before { content:""; position:absolute; width:58px; height:25px; left:calc(50% - 29px); top:13px; border-radius:4px; background:#a96f55; }
.window { position:absolute; top:69px; width:60px; height:77px; background:#426c71; border:8px solid #fff3d8; box-shadow:inset 0 0 0 3px #7fa6a1; }.window:after { content:""; position:absolute; width:100%; height:7px; top:calc(50% - 3px); background:#fff3d8; }.window-left { left:31px; }.window-right { right:31px; }
.school-door { position:absolute; bottom:0; left:calc(50% - 40px); width:80px; height:119px; border-radius:40px 40px 0 0; background:#245354; border:8px solid #b48b67; border-bottom:0; }.school-door span { position:absolute; right:12px; top:63px; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.ground { position:absolute; width:450px; height:120px; bottom:-60px; right:-30px; border-radius:50%; background:#3c685b; }
.star { position:absolute; color:#f2d190; font-size:29px; }.star-one { top:60px; right:0; }.star-two { top:20px; left:52px; font-size:21px; }
.location-section { padding:28px 0 6px; }
.location-state { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:99px; background:#eceee7; color:#65716a; font-size:12px; font-weight:700; }
.location-state:before { content:""; width:8px; height:8px; border-radius:50%; background:#aab3a7; }
.location-state.is-live { background:#e0f1e7; color:#286649; }
.location-state.is-live:before { background:#3baa70; box-shadow:0 0 0 4px #3baa7024; }
.location-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:23px; }
.school-map { position:relative; min-height:410px; overflow:hidden; border-radius:23px; border:1px solid #c6d1bf; background:linear-gradient(90deg,#ffffff25 1px,transparent 1px),linear-gradient(#ffffff25 1px,transparent 1px),#dce8d7; background-size:34px 34px; box-shadow:inset 0 0 0 12px #f7f8ed,0 10px 30px #203f260e; }
.live-scene { position:absolute; inset:0; background:radial-gradient(circle at 50% 49%,#f8f8e9a8 0 14%,transparent 36%),linear-gradient(90deg,#ffffff45 1px,transparent 1px),linear-gradient(#ffffff45 1px,transparent 1px),#dbe9d8; background-size:auto,34px 34px,34px 34px,auto; }
.map-stage { position:absolute; inset:0; transition:width .2s ease; }
.school-map.has-open-chat .map-stage { width:55%; }
.map-fullscreen-button { position:absolute; z-index:8; top:14px; right:14px; display:flex; align-items:center; gap:7px; border:1px solid #a9bcab; border-radius:9px; padding:8px 11px; background:#fffdf5; color:#2a5442; font:700 11px 'DM Sans',Arial,sans-serif; cursor:pointer; box-shadow:0 3px 12px #1d3e2922; }
.map-fullscreen-button:hover { background:#edf5e9; }
.map-fullscreen-button:focus-visible { outline:3px solid #3c986d; outline-offset:2px; }
.school-map.is-maximized, .school-map:fullscreen { position:fixed; z-index:100; inset:0; width:100vw; height:100dvh; max-height:none; border:0; border-radius:0; box-shadow:none; }
.school-map:is(.is-maximized,:fullscreen) { display:grid; place-items:center; background:radial-gradient(circle at center,#315b4e,#10292b 72%); }
.school-map:is(.is-maximized,:fullscreen) .live-scene { position:relative; inset:auto; width:min(100vw,216.667dvh); height:min(100dvh,46.154vw); overflow:hidden; border-radius:20px; box-shadow:0 18px 70px #071c1988,inset 0 0 0 10px #f7f8ed; }
body.map-maximized { overflow:hidden; }
body.map-maximized .page-shell { overflow:visible; }
.closed-door { position:absolute; z-index:5; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:28px; text-align:center; background:#e5ebdf; color:#294e43; }
.closed-door strong { font:600 clamp(20px,2.4vw,29px) 'Fraunces',Georgia,serif; }
.closed-door>span { max-width:300px; font-size:12px; line-height:1.55; color:#668073; }
.door-illustration { position:relative; width:102px; height:145px; margin-bottom:14px; border:8px solid #547e6d; border-bottom:0; border-radius:48px 48px 0 0; background:#285344; box-shadow:inset -14px 0 #1d443a,0 10px 0 #c0ceb8; }
.door-illustration:before { content:"L"; position:absolute; top:25px; left:0; width:100%; color:#eac779; font:600 37px 'Fraunces',Georgia,serif; text-align:center; }
.door-knob { position:absolute; right:11px; top:85px; width:10px; height:10px; border-radius:50%; background:#eac779; }
[data-school-connection="live"] .closed-door { display:none; }
[data-school-connection="offline"] .school-map .map-room,
[data-school-connection="offline"] .school-map .map-stairs,
[data-school-connection="offline"] .school-section { display:none; }
.map-stage:before { content:""; position:absolute; left:25%; top:44%; width:50%; height:12%; border-radius:99px; background:linear-gradient(90deg,#bdd6c6,#e8ebd9,#bdd6c6); transform:rotate(-19deg); box-shadow:0 0 0 5px #b8d3c235; }
.map-stage:after { content:""; position:absolute; left:45%; top:39%; width:15%; aspect-ratio:1; border:7px double #8bae9a77; border-radius:50%; background:#e7eddb88; }
.map-room { position:absolute; display:grid; place-content:center; min-width:96px; height:76px; border-radius:14px; border:2px solid #7f9c8d; background:#f8f7ec; color:#2c4f43; text-align:center; font:600 18px 'Fraunces',Georgia,serif; box-shadow:0 5px 0 #8dab9250; }
.map-room { z-index:1; border-width:2px; box-shadow:0 7px 0 #879f8a88,0 15px 23px #31534227,inset 0 1px 0 #ffffffd9; text-shadow:0 1px 0 #fff9; }
.map-room:before { content:""; position:absolute; top:8px; left:9px; width:8px; height:8px; border-radius:50%; background:#ca9e66; box-shadow:0 0 0 3px #f3e9d2; }
.map-room small { font:600 10px 'DM Sans',Arial,sans-serif; color:#738478; }
.map-room.is-desk-open { z-index:2; border-color:#28a976; box-shadow:0 0 0 6px #37b98155,0 8px 0 #5a9b74,0 17px 28px #1b634052; }
.map-room.is-desk-open:after { content:"Offen"; position:absolute; right:-12px; top:-13px; padding:3px 7px; border-radius:99px; background:#188a60; color:#fff; font:700 10px 'DM Sans',Arial,sans-serif; }
.map-kathi { left:11%; top:8%; background:linear-gradient(145deg,#fff8ee,#efd9ca); }
.map-stella { left:52%; top:9%; background:linear-gradient(145deg,#fff6e9,#ecd9bd); }
.map-anna { left:28%; top:59%; background:linear-gradient(145deg,#f4fff7,#d4e9d9); }
.map-pia { left:70%; top:59%; background:linear-gradient(145deg,#f8faff,#d9e2f0); }
.map-stairs { position:absolute; left:13%; top:47%; padding:4px 9px; color:#62806b; background:#edf3e7; border-radius:7px; font-size:11px; transform:rotate(-63deg); }
.child-marker { position:absolute; z-index:3; width:31px; height:31px; display:grid; place-items:center; transform:translate(-50%,-50%); border-radius:50%; border:3px solid #fff; background:#eab65b; color:#18434a; box-shadow:0 0 0 5px #eab65b66,0 0 0 12px #eab65b24,0 6px 20px #193c4270; transition:left .25s ease,top .25s ease; }
.child-marker[hidden] { display:none; }
.child-marker span { font-size:20px; line-height:1; }
.location-controls { border-radius:23px; background:#fffdf7; border:1px solid var(--line); padding:27px; }
.location-controls h3 { font-size:29px; margin-bottom:12px; }
.location-controls>p { font-size:13px; color:var(--muted); line-height:1.65; }
.location-controls form { display:grid; gap:8px; margin-top:24px; }
.location-controls label { font-size:11px; font-weight:700; color:#576b5f; letter-spacing:.04em; }
.location-controls input { width:100%; min-width:0; border:1px solid #bfcbbe; border-radius:10px; padding:12px; background:#fff; color:#1d3430; font:13px 'DM Sans',Arial,sans-serif; margin-bottom:8px; }
.location-controls input:focus { outline:2px solid #b5d6b6; border-color:#5a8a68; }
.location-actions { display:flex; gap:9px; flex-wrap:wrap; }
.location-actions button { border:0; border-radius:10px; padding:12px 14px; background:#20443c; color:white; font:700 12px 'DM Sans',Arial,sans-serif; cursor:pointer; }
.location-actions button:hover { background:#326a56; }
.location-actions button#disconnect-button { background:#e9eee7; color:#375047; }
.location-actions button[hidden] { display:none; }
.location-controls .location-detail { margin:19px 0 6px; color:#2c5749; font-weight:700; }
.location-controls .location-privacy { margin:0; font-size:11px; }
.mini-chat-section { position:absolute; z-index:3; top:12px; right:12px; bottom:12px; width:calc(45% - 18px); display:flex; flex-direction:column; min-width:0; padding:16px; border:1px solid #d4ded0; border-radius:18px; background:#fffdf7; box-shadow:0 8px 25px #173c2a24; }
.mini-chat-section[hidden] { display:none; }
.mini-chat-heading { padding:30px 0 12px; }
.mini-chat-heading h3 { margin:0; font-size:22px; }
.mini-chat-heading .eyebrow { margin-bottom:5px; }
.mini-chat-heading>span { display:block; margin-top:5px; font-size:10px; color:#6a7d70; }
.mini-chat-list { flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; overflow:auto; padding:12px; border-radius:14px; background:#edf2e9; }
.mini-message { max-width:min(86%,620px); padding:11px 14px; border:1px solid #ceddce; border-radius:14px; background:#fffef9; }
.mini-message.is-user { align-self:flex-end; background:#d9eadf; border-color:#b9d6c2; }
.mini-message.is-pending { border-color:#d6b873; }
.mini-message-author { display:block; margin-bottom:4px; color:#647d69; font-size:10px; font-weight:700; letter-spacing:.08em; }
.mini-message-text { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.55; color:#213b31; }
.mini-chat-empty { padding:20px; color:#677c6c; text-align:center; font-size:13px; }
.school-section { padding:75px 0 66px; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:26px; }.section-heading h2 { font-size:clamp(30px,3.5vw,45px); margin:0; letter-spacing:-.025em; }.section-note { font-size:12px; color:var(--muted); padding-bottom:7px; }
.teacher-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }
.teacher-card { min-width:0; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--paper); box-shadow:0 12px 32px #2447360d; }
.teacher-card.is-desk-open { border-color:#38a976; box-shadow:0 0 0 3px #38a97625,0 12px 32px #2447360d; }
.desk-open-note { display:table; margin:0 0 9px; padding:7px 10px; border-radius:99px; background:#dff3e6; color:#176446; font-size:11px; font-weight:700; }
.desk-open-note[hidden] { display:none; }
.portrait-frame { position:relative; height:215px; overflow:hidden; display:flex; align-items:end; justify-content:center; background:#e9e7d8; }.portrait-frame:before { content:""; position:absolute; width:190px; height:190px; border-radius:50%; bottom:-66px; background:#d3dfd5; }.stella .portrait-frame { background:#e7dfce; }.anna .portrait-frame { background:#dce9df; }.pia .portrait-frame { background:#e0e4ee; }.kathi .portrait-frame { background:#eee4dc; }
.portrait-frame img { position:relative; z-index:1; width:100%; max-width:240px; height:220px; object-fit:contain; object-position:center bottom; }
.teacher-details { padding:20px; }.room-label { margin:0 0 7px; font-size:9px; letter-spacing:.12em; font-weight:700; color:#907a58; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.teacher-details h3 { margin:0 0 5px; font-size:28px; }.teacher-details>p:not(.room-label) { min-height:39px; font-size:13px; line-height:1.5; color:var(--muted); margin-bottom:17px; }
.offline-pill { display:inline-flex; gap:7px; align-items:center; padding:7px 9px; border-radius:99px; background:#eef1ea; color:#67756c; font-size:11px; font-weight:700; }.offline-pill i { width:7px; height:7px; border-radius:50%; background:#a6afa5; }
.offline-pill.is-ready { color:#21684a; background:#e1f2e7; }.offline-pill.is-ready i { background:#3eaf73; }
.offline-pill.is-active { color:#745917; background:#f7eed3; }.offline-pill.is-active i { background:#d5a12f; }
.next-section { display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:25px; padding:30px 34px; border-radius:19px; border:1px solid #d6d9c9; background:#e8ecdf; }.next-icon { display:grid; place-items:center; width:50px; height:50px; background:#d3dfc9; color:#3a6253; border-radius:14px; font-size:28px; }.next-section .eyebrow { margin-bottom:6px; }.next-section h2 { font-size:27px; margin-bottom:6px; }.next-section p:last-child { max-width:635px; margin:0; color:#596c63; font-size:13px; line-height:1.6; }.coming-pill { border:1px solid #acbfab; border-radius:100px; color:#59735c; padding:9px 12px; font-size:11px; font-weight:700; white-space:nowrap; }
footer { display:flex; justify-content:space-between; gap:12px; padding:38px 0 45px; color:#879087; font-size:11px; }
@media (max-width:1000px) { .hero { padding:48px 42px; }.hero-art { transform:scale(.83); transform-origin:right center; }.location-layout { grid-template-columns:1fr; }.teacher-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.portrait-frame { height:240px; }.portrait-frame img { max-width:280px; height:245px; } }
@media (max-width:700px) { .topbar,main,footer { width:min(100% - 28px,560px); }.topbar { height:75px; }.prototype-tag { font-size:10px; padding:6px 9px; }.brand-mark { width:38px; height:38px; font-size:27px; }.brand-copy strong { font-size:17px; }.hero { display:block; min-height:0; padding:36px 25px 0; border-radius:20px; }.hero-intro { font-size:14px; margin-bottom:22px; }.status-panel { padding:15px; gap:13px; }.status-panel h2 { font-size:16px; }.privacy-note { line-height:1.5; font-size:10px; }.hero-art { transform:scale(.58); height:215px; min-height:0; width:500px; margin-left:auto; margin-top:-13px; margin-bottom:-4px; transform-origin:right top; }.school-section { padding:47px 0 40px; }.section-heading { display:block; }.section-heading h2 { margin-bottom:9px; }.section-note { font-size:11px; }.teacher-grid { gap:11px; }.portrait-frame { height:156px; }.portrait-frame img { height:164px; }.teacher-details { padding:13px; }.teacher-details h3 { font-size:23px; }.teacher-details>p:not(.room-label) { min-height:41px; font-size:11px; margin-bottom:11px; }.room-label { font-size:8px; }.offline-pill { font-size:9px; padding:6px 7px; }.next-section { grid-template-columns:42px 1fr; padding:21px; gap:15px; }.next-icon { width:42px; height:42px; font-size:22px; }.next-section h2 { font-size:23px; }.next-section p:last-child { font-size:12px; }.coming-pill { grid-column:2; justify-self:start; }.privacy-note { display:block; }.privacy-note span { margin-right:5px; } }
@media (max-width:400px) { .hero { padding-inline:20px; }.teacher-grid { grid-template-columns:1fr 1fr; }.teacher-details { padding:11px; }.teacher-details h3 { font-size:22px; }.portrait-frame { height:135px; }.portrait-frame img { height:144px; } }
@media (max-width:700px) { .location-section { padding-top:18px; }.location-section .section-heading { display:grid; gap:13px; }.location-state { justify-self:start; }.school-map { min-height:300px; }.school-map.has-open-chat { min-height:590px; }.map-stage { height:300px; }.school-map.has-open-chat .map-stage { width:100%; }.map-room { min-width:66px; height:54px; border-radius:10px; font-size:14px; }.map-anna { left:21%; }.map-pia { left:70%; }.location-controls { padding:21px; }.location-controls h3 { font-size:25px; } }
@media (max-width:700px) { .mini-chat-section { top:310px; left:12px; right:12px; bottom:12px; width:auto; padding:14px; }.mini-chat-heading { padding:0 0 9px; }.mini-chat-list { padding:10px; }.mini-message { max-width:94%; }.school-map.is-maximized.has-open-chat, .school-map:fullscreen.has-open-chat { min-height:100dvh; }.school-map.is-maximized.has-open-chat .map-stage, .school-map:fullscreen.has-open-chat .map-stage { height:42%; }.school-map.is-maximized.has-open-chat .mini-chat-section, .school-map:fullscreen.has-open-chat .mini-chat-section { top:calc(42% + 8px); }.school-map.is-maximized:not(.has-open-chat) .map-stage, .school-map:fullscreen:not(.has-open-chat) .map-stage { height:100%; } }

/* Only fullscreen becomes a spatial scene: the chat floats beside its active desk. */
.chat-connector { position:absolute; z-index:2; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.chat-connector[hidden] { display:none; }
.chat-connector path { fill:none; stroke:#188a60; stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 2px 3px #16463155); }
.chat-connector circle { fill:#f5c976; stroke:#188a60; stroke-width:3; }
.orientation-hint { display:none; }
.school-map:is(.is-maximized,:fullscreen).has-open-chat .map-stage { width:100%; height:100%; }
.school-map:is(.is-maximized,:fullscreen).has-open-chat .mini-chat-section { top:auto; right:auto; bottom:auto; left:auto; width:min(30%,420px); height:min(62%,520px); border:2px solid #4a9b73; border-radius:25px; box-shadow:0 18px 56px #163d2a42,0 0 0 6px #6dbb8b24; transition:top .35s ease,left .35s ease,right .35s ease,bottom .35s ease; }
.school-map:is(.is-maximized,:fullscreen)[data-chat-desk="stella"] .mini-chat-section { top:26%; right:4%; }
.school-map:is(.is-maximized,:fullscreen)[data-chat-desk="kathi"] .mini-chat-section { top:26%; left:4%; }
.school-map:is(.is-maximized,:fullscreen)[data-chat-desk="anna"] .mini-chat-section { top:8%; left:4%; }
.school-map:is(.is-maximized,:fullscreen)[data-chat-desk="pia"] .mini-chat-section { top:8%; right:4%; }
.school-map:is(.is-maximized,:fullscreen) .map-kathi { left:35%; top:8%; }
.school-map:is(.is-maximized,:fullscreen) .map-stella { left:54%; top:8%; }
.school-map:is(.is-maximized,:fullscreen) .map-anna { left:35%; top:62%; }
.school-map:is(.is-maximized,:fullscreen) .map-pia { left:54%; top:62%; }
.school-map:is(.is-maximized,:fullscreen) .map-room.is-desk-open { border-color:#118961; box-shadow:0 0 0 8px #eac36b88,0 8px 22px #1d584747; }

@media (max-width:700px) {
  .school-map:is(.is-maximized,:fullscreen).has-open-chat .mini-chat-section { width:calc(100% - 28px); height:42dvh; left:14px; right:14px; }
  .school-map:is(.is-maximized,:fullscreen)[data-chat-desk="stella"] .mini-chat-section,
  .school-map:is(.is-maximized,:fullscreen)[data-chat-desk="kathi"] .mini-chat-section { top:auto; bottom:14px; }
  .school-map:is(.is-maximized,:fullscreen)[data-chat-desk="anna"] .mini-chat-section,
  .school-map:is(.is-maximized,:fullscreen)[data-chat-desk="pia"] .mini-chat-section { top:62px; bottom:auto; }
}
@media (max-width:700px) and (orientation:landscape) {
  .school-map:is(.is-maximized,:fullscreen).has-open-chat .mini-chat-section { top:auto; bottom:auto; left:auto; right:auto; width:30%; height:65%; padding:10px; border-radius:16px; }
  .school-map:is(.is-maximized,:fullscreen)[data-chat-desk="stella"] .mini-chat-section { top:26%; right:3%; }
  .school-map:is(.is-maximized,:fullscreen)[data-chat-desk="kathi"] .mini-chat-section { top:26%; left:3%; }
  .school-map:is(.is-maximized,:fullscreen)[data-chat-desk="anna"] .mini-chat-section { top:8%; left:3%; }
  .school-map:is(.is-maximized,:fullscreen)[data-chat-desk="pia"] .mini-chat-section { top:8%; right:3%; }
  .school-map:is(.is-maximized,:fullscreen) .mini-chat-heading { padding:14px 0 6px; }
  .school-map:is(.is-maximized,:fullscreen) .mini-chat-heading h3 { font-size:18px; }
}
@media (max-width:700px) and (orientation:portrait) {
  .school-map:is(.is-maximized,:fullscreen) .live-scene { width:100%; height:100%; border-radius:0; }
  .school-map:is(.is-maximized,:fullscreen) .orientation-hint { display:block; position:absolute; z-index:6; top:50%; left:50%; width:max-content; max-width:calc(100% - 30px); transform:translate(-50%,-50%); padding:7px 11px; border-radius:99px; background:#234a3de8; color:white; text-align:center; font-size:11px; box-shadow:0 4px 12px #15372533; }
}

/* Shared world plate: exactly the same 1536×1024 scene and sprite coordinates as Leoni. */
.school-map { aspect-ratio:16/9; min-height:0; background:#101d29; border-color:#725c3d; box-shadow:0 16px 42px #14243c38,inset 0 0 0 4px #e3bc78; }
.live-scene { background:#101d29; overflow:hidden; }
.map-stage, .school-map.has-open-chat .map-stage { position:absolute; width:1536px; height:1024px; inset:auto; transition:left .19s linear,top .19s linear; transform-origin:top left; }
.map-stage:before,.map-stage:after { content:none; }
.school-plate { position:absolute; inset:0; width:1536px; height:1024px; object-fit:fill; image-rendering:pixelated; pointer-events:none; }
.map-room { display:block; width:105px; min-width:0; height:145px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; text-shadow:none; z-index:2; }
.map-room:before,.map-room.is-desk-open:after { content:none; }
.map-room img { display:block; width:105px; height:145px; object-fit:contain; image-rendering:pixelated; }
.map-room span { position:absolute; top:135px; left:50%; transform:translateX(-50%); padding:3px 6px; border:1px solid #e5bd73; border-radius:4px; background:#152b39df; color:#ffe3a5; font:700 10px 'DM Sans',Arial,sans-serif; white-space:nowrap; }
.map-room.is-desk-open { border:0; box-shadow:none; }
.map-room.is-desk-open span { border-color:#8df2c1; background:#174b3edc; color:white; }
.map-anna,.school-map:is(.is-maximized,:fullscreen) .map-anna { left:690px; top:90px; background:none; }
.map-kathi,.school-map:is(.is-maximized,:fullscreen) .map-kathi { left:340px; top:545px; background:none; }
.map-stella,.school-map:is(.is-maximized,:fullscreen) .map-stella { left:893px; top:420px; background:none; }
.map-pia,.school-map:is(.is-maximized,:fullscreen) .map-pia { left:1090px; top:535px; background:none; }
.child-marker { display:block; width:86px; height:118px; border:0; border-radius:0; background:none; box-shadow:none; transform:scaleX(var(--facing-scale,1)); transform-origin:50% 85%; transition:left .19s linear,top .19s linear; object-fit:contain; image-rendering:pixelated; z-index:3; }
.child-marker[hidden] { display:none; }
.child-marker.is-stepping { animation:child-step 230ms ease-out both; }
@keyframes child-step { 0%,100% { transform:scaleX(var(--facing-scale,1)) translateY(0) rotate(0); } 50% { transform:scaleX(var(--facing-scale,1)) translateY(-8px) rotate(4deg); } }
.school-map:is(.is-maximized,:fullscreen) { background:#101d29; }
.school-map:is(.is-maximized,:fullscreen) .live-scene { width:min(100vw,177.778dvh); height:min(100dvh,56.25vw); border-radius:0; box-shadow:0 22px 80px #030c1e9e; }
.school-map:is(.is-maximized,:fullscreen).has-open-chat .map-stage { width:1536px; height:1024px; }
.mini-chat-section,.school-map:is(.is-maximized,:fullscreen).has-open-chat .mini-chat-section { top:15%; right:2%; left:auto; bottom:auto; width:31%; height:70%; z-index:5; border:2px solid #d3ae70; border-radius:13px; padding:10px; background:#172c38ec; color:#fff3d9; box-shadow:0 12px 32px #081323ba; }
.school-map[data-chat-desk="pia"] .mini-chat-section,.school-map[data-chat-desk="kathi"] .mini-chat-section { left:2%; right:auto; }
.mini-chat-heading { padding:0 0 8px; }
.mini-chat-heading h3 { font-size:clamp(12px,1.5vw,19px); color:#ffe0a1; }
.mini-chat-heading>span { color:#c7dbd9; }
.mini-chat-list { background:#0b202b; padding:7px; gap:5px; }
.mini-message { max-width:98%; padding:7px 9px; border-color:#587f81; border-radius:7px; background:#29444e; }
.mini-message.is-user { background:#425c52; }
.mini-message-text { color:white; font-size:clamp(10px,1vw,13px); }
.mini-message-author { color:#ffd994; }
.chat-connector { z-index:4; }
.chat-connector path { stroke:#f4d284; stroke-width:3; }
.chat-connector circle { fill:#f9e0a7; stroke:#144438; }
@media (max-width:700px) and (orientation:portrait) {
  .school-map.has-open-chat { min-height:600px; aspect-ratio:auto; }
  .school-map.has-open-chat .live-scene { height:300px; bottom:auto; overflow:visible; }
  .school-map.has-open-chat .mini-chat-section { left:10px; right:10px; top:310px; width:auto; height:275px; }
  .school-map:not(.has-open-chat) { min-height:0; aspect-ratio:16/9; }
  .school-map:is(.is-maximized,:fullscreen) .live-scene { width:100%; height:100%; overflow:hidden; }
}

/* A narrow sidebar can report landscape orientation. Stack the chat by width,
   otherwise min-height and 16:9 force the map wider than its viewport. */
@media (max-width:700px) {
  .school-map.has-open-chat:not(.is-maximized):not(:fullscreen) {
    min-height:600px;
    aspect-ratio:auto;
  }
  .school-map.has-open-chat:not(.is-maximized):not(:fullscreen) .live-scene {
    height:300px;
    bottom:auto;
    overflow:visible;
  }
  .school-map.has-open-chat:not(.is-maximized):not(:fullscreen) .mini-chat-section {
    top:310px;
    right:10px;
    bottom:auto;
    left:10px;
    width:auto;
    height:275px;
  }
}