.demo-tutorial,.demo-guide{color:#442a1e;color-scheme:light;font-family:var(--brand-body,system-ui);box-sizing:border-box}
.demo-tutorial{width:min(720px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #efbe7a;border-radius:26px;background:#fff9ef;box-shadow:0 22px 80px #442a1e55;overflow:auto;scrollbar-width:thin;scrollbar-color:#d59a54 transparent}
.demo-tutorial[open]{display:grid;grid-template-columns:43% 57%}
.demo-tutorial::backdrop{background:#442a1e88;backdrop-filter:blur(4px)}
.demo-welcome-art{background:#ffecb5;min-height:350px;overflow:hidden;display:flex;align-items:center}
.demo-welcome-art img{width:100%;height:100%;object-fit:contain;max-height:500px}
.demo-welcome-copy{padding:34px 30px;align-self:center}
.demo-welcome-copy h1{font:800 clamp(26px,3.4vw,35px)/1.13 var(--brand-heading,system-ui);letter-spacing:-.5px;margin:12px 0 16px;color:#442a1e}
.demo-welcome-copy p{font-size:15px;line-height:1.6;margin:0 0 16px}
.demo-welcome-copy .demo-welcome-note{font-size:13px;color:#79563e}
.demo-welcome-copy small{display:block;font-size:11px;line-height:1.5;color:#79563e;margin-top:14px}
.demo-guide{position:fixed;z-index:7;top:104px;left:24px;width:320px;padding:13px 15px 15px;border:1px solid #e9bd7d;border-radius:18px;background:#fff9eff7;box-shadow:0 5px 22px #442a1e29;pointer-events:auto}
.demo-guide-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.demo-guide-kicker{color:#a24907;font:800 10px/1.4 var(--brand-body,system-ui);letter-spacing:1.2px}
.demo-guide button.demo-guide-toggle{border:0;background:#fff0d7;color:#8e470f;width:30px;min-width:30px;height:30px;padding:0;display:grid;place-items:center;border-radius:50%;font:600 23px/1 var(--brand-body,system-ui);cursor:pointer}
.demo-guide-task{display:grid;grid-template-columns:65px 1fr;gap:12px;align-items:start}
.demo-guide-art{height:82px;overflow:hidden;border-radius:12px;background:#ffe6af;display:grid;place-items:center}
.demo-guide-art img{display:block;width:100%;height:100%;max-height:82px;object-fit:contain}
.demo-guide h2{font:800 18px/1.16 var(--brand-heading,system-ui);letter-spacing:-.2px;color:#442a1e;margin:2px 0 7px}
.demo-guide p{font-size:12px;line-height:1.55;margin:0;color:#664833}
.demo-guide-progress{display:flex;gap:4px;margin:14px 0 12px}
.demo-guide-progress i{height:4px;flex:1;border-radius:6px;background:#ebd8ba}
.demo-guide-progress i.is-done{background:#f47708}
.demo-tutorial button.demo-guide-action,.demo-guide button.demo-guide-action{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1px solid #d98c18;border-radius:10px;background:#ffd34d;color:#442a1e;padding:10px 12px;font:800 12px/1.4 var(--brand-body,system-ui);cursor:pointer;box-shadow:0 2px 0 #d2912733}
.demo-tutorial button.demo-guide-action{font-size:14px;padding:13px}
.demo-guide button:focus-visible,.demo-tutorial button:focus-visible{outline:3px solid #f47708;outline-offset:3px}
.demo-guide button.demo-guide-resume{display:flex;gap:14px;justify-content:space-between;width:100%;font:800 14px/1.3 var(--brand-heading,system-ui);border:0;background:transparent;color:#442a1e;padding:1px 0 3px;text-align:left;cursor:pointer}
.demo-guide.is-minimized{width:248px;padding:10px 13px}
.demo-guide.is-minimized .demo-guide-heading{margin-bottom:2px}
.demo-guide-done{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:#ffdf84;color:#a3490b;font-size:30px}
.demo-guide-announcement{position:fixed;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
body:has(.demo-guide:not([hidden])) .compass{display:none}
@media(max-width:690px){.demo-guide{top:88px;left:12px;width:min(304px,calc(100vw - 24px));padding:11px 13px 13px}.demo-guide.is-minimized{width:230px}.demo-guide-task{grid-template-columns:53px 1fr;gap:10px}.demo-guide-art{height:70px}.demo-guide h2{font-size:17px}.demo-guide p{font-size:12px}.demo-guide-heading{margin-bottom:4px}.demo-guide-progress{margin:11px 0 10px}.demo-tutorial[open]{grid-template-columns:1fr}.demo-welcome-art{min-height:0;height:160px}.demo-welcome-art img{object-fit:cover;object-position:center 39%}.demo-welcome-copy{padding:23px}.demo-welcome-copy h1{font-size:28px;margin:9px 0 13px}.demo-welcome-copy p{font-size:14px;line-height:1.5}.demo-welcome-copy small{font-size:10px;margin-top:10px}}
@media(max-height:620px){.demo-guide{top:84px;width:280px;padding:9px 12px 11px}.demo-guide-task{grid-template-columns:45px 1fr;gap:10px}.demo-guide-art{height:64px}.demo-guide p{font-size:11px}.demo-guide h2{font-size:16px}.demo-guide-progress{margin:9px 0}.demo-guide button.demo-guide-action{font-size:11px;padding:8px}.demo-tutorial[open]{grid-template-columns:35% 65%}.demo-welcome-art{height:auto;min-height:200px}.demo-welcome-art img{object-fit:contain}.demo-welcome-copy{padding:20px}.demo-welcome-copy h1{font-size:25px}.demo-welcome-copy p{font-size:13px;margin-bottom:10px}.demo-welcome-copy .demo-welcome-note{font-size:12px}}
@media(prefers-reduced-motion:reduce){.demo-tutorial::backdrop{backdrop-filter:none}}

/* Introduce every objective in the center; the CTA releases the map for play. */
.demo-guide-backdrop{position:fixed;inset:0;z-index:50;background:#442a1e66;backdrop-filter:blur(2px)}
.demo-guide-backdrop[hidden]{display:none}
body[data-demo] .demo-guide.is-centered,body.student-world .demo-guide.is-centered{z-index:51;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);min-height:0;padding:26px;border-radius:24px;background:#fff9ef;box-shadow:0 18px 70px #442a1e55;overflow:auto;scrollbar-width:thin;scrollbar-color:#e8bd7d transparent;text-align:center}
.demo-guide.is-centered .demo-guide-heading{justify-content:center;margin-bottom:16px}
.demo-guide.is-centered .demo-guide-kicker{font-size:12px;letter-spacing:1.5px}
.demo-guide.is-centered .demo-guide-task{display:flex;flex-direction:column;align-items:center;gap:18px}
.demo-guide.is-centered .demo-guide-art{width:180px;height:160px;flex:none;border-radius:18px}
.demo-guide.is-centered .demo-guide-task h2{font-size:27px;line-height:1.2;margin:0 0 12px}
.demo-guide.is-centered .demo-guide-task p{display:block;font-size:15px;line-height:1.6;margin:0}
.demo-guide.is-centered .demo-guide-progress{margin:22px 0 18px}
body .demo-guide.is-centered button.demo-guide-action{font-size:15px;min-height:50px;padding:13px 18px}
body .demo-guide button.demo-guide-toggle[hidden]{display:none}
@media(max-width:520px){body[data-demo] .demo-guide.is-centered,body.student-world .demo-guide.is-centered{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:23px 20px}.demo-guide.is-centered .demo-guide-art{width:150px;height:130px}.demo-guide.is-centered .demo-guide-task h2{font-size:25px}}
@media(max-height:520px){body[data-demo] .demo-guide.is-centered,body.student-world .demo-guide.is-centered{padding:18px 22px}.demo-guide.is-centered .demo-guide-task{display:grid;grid-template-columns:90px 1fr;text-align:left;gap:16px}.demo-guide.is-centered .demo-guide-art{width:90px;height:100px}.demo-guide.is-centered .demo-guide-task h2{font-size:22px;margin-bottom:8px}.demo-guide.is-centered .demo-guide-task p{font-size:13px;line-height:1.45}.demo-guide.is-centered .demo-guide-progress{margin:16px 0 12px}}
@media(prefers-reduced-motion:reduce){.demo-guide-backdrop{backdrop-filter:none}}

.student-world:has(#shop:not([hidden])) .demo-guide-backdrop,.student-world:has(#plots-panel:not([hidden])) .demo-guide-backdrop{display:none}