:root{--demo-bar-height:76px}
html{scroll-padding-top:calc(var(--demo-bar-height) + 16px)}
body{padding-top:var(--demo-bar-height)!important}
.school-demo-bar{position:fixed!important;inset:0 0 auto!important;z-index:2147483000;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px max(16px,env(safe-area-inset-left));padding-top:max(12px,env(safe-area-inset-top));background:#123b65;color:#fff;box-shadow:0 2px 12px #123b6533;font:500 14px/1.35 system-ui,sans-serif;box-sizing:border-box}
.school-demo-bar a,.school-demo-bar button{font:700 14px/1.3 system-ui,sans-serif;color:#fff!important;border:1px solid #ffffff80!important;border-radius:10px;padding:11px 14px;background:#ffffff10!important;text-decoration:none;cursor:pointer;min-height:44px;flex-shrink:0}
.school-demo-bar div{display:flex;flex-direction:column;gap:3px;text-align:center}
.school-demo-bar b{font-size:15px}.school-demo-bar span{color:#d8efff}
.school-demo-bar :focus-visible{outline:3px solid #ffd557;outline-offset:3px}
.school-demo-bar button:hover,.school-demo-bar a:hover{background:#ffffff28!important}
.topbar{top:var(--demo-bar-height)!important}
.stage-map-overlay{top:var(--demo-bar-height)!important;height:calc(100dvh - var(--demo-bar-height))!important}
.school-demo-map{width:min(1120px,100%);margin:auto;padding:28px 18px 48px;box-sizing:border-box}
.school-demo-map h1{font-size:clamp(26px,4vw,38px);color:#153e65;margin:0 0 10px}
.school-demo-map>p{font-size:16px;line-height:1.6;color:#45607a}
.school-demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.school-demo-grid button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;border:2px solid #dbe5ef;border-radius:18px;background:#fff;padding:24px;font:600 16px/1.45 system-ui,sans-serif;color:#153e65;min-height:150px;cursor:pointer}
.school-demo-grid button:not(:disabled){border-color:#eeb63d;box-shadow:0 5px 0 #eeb63d33}
.school-demo-grid button:disabled{background:#f1f4f8;color:#647387;cursor:default}
.school-demo-grid strong{font-size:20px}.school-demo-grid small{font-size:14px;font-weight:500}
.school-demo-finish{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:22px auto}
.school-demo-finish a,.school-demo-finish button{padding:14px 20px;background:#153e65;color:#fff;border-radius:12px;text-decoration:none;font:700 16px system-ui;border:0;cursor:pointer}
[hidden]{display:none!important}
@media(max-width:700px){.school-demo-bar{gap:8px;flex-wrap:wrap;padding:8px 10px}.school-demo-bar>div{order:3;flex:1 0 100%;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:4px 12px}.school-demo-bar b{font-size:14px}.school-demo-bar span{font-size:13px}.school-demo-bar a,.school-demo-bar button{font-size:14px;padding:10px}.school-demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.school-demo-grid button{padding:16px}.school-demo-grid strong{font-size:18px}}
@media(max-width:420px){.school-demo-grid{grid-template-columns:1fr}}