/* Prepared by: Codex. Scoped to menu.html only. */
:root{color-scheme:dark;--ink:#ededeb;--surface:#0b0c0c;--menu-width:clamp(235px,19vw,292px)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--surface);color:var(--ink)}
body{min-height:100svh;font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#school-scene{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% center;pointer-events:none}
main{position:relative;width:var(--menu-width);margin-left:clamp(24px,4vw,76px);padding-top:clamp(26px,5vh,54px);padding-bottom:24px}
.brand{margin:0 0 clamp(42px,8vh,88px);width:100%;line-height:0}
.brand img{display:block;width:100%;height:auto;filter:drop-shadow(1px 2px 1px #332712a6)}
.drawn-menu{position:relative;width:100%;margin-inline:auto}
.drawn-menu svg{display:block;width:100%;height:auto;overflow:visible}
.face,.curl{fill:url(#case-grain);stroke:url(#edge);stroke-width:6;stroke-linejoin:round}
.case-side{fill:url(#case-side);stroke:#38251b;stroke-width:4;stroke-linejoin:round;pointer-events:none}
.drawn-menu>svg{position:relative;z-index:2;pointer-events:none}
.choices a{pointer-events:auto}
.globe-well{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#201910;visibility:hidden;pointer-events:none}
.globe-well canvas{display:block;width:100%;height:100%}
.mechanism-running .globe-well{visibility:visible}
.mechanism-running .face{fill:#1b1510}
.mechanism-running .menu-shell{opacity:0;transform:perspective(600px) rotateX(100deg) translateY(-20px);pointer-events:none}
.mechanism-running .menu-shell a{pointer-events:none}
.menu-shell{transform-box:fill-box;transform-origin:50% 0;backface-visibility:hidden;transition:transform 1.15s cubic-bezier(.55,0,.22,1),opacity .12s linear .95s}
.mechanism-closing .menu-shell{transition:transform 1.1s cubic-bezier(.25,.6,.28,1),opacity 0s}
.mechanism-interrupted .menu-shell{transition:none!important}
.drive-belt{fill:none;stroke:#161310;stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.belt-teeth{fill:none;stroke:#4b4138;stroke-width:9;stroke-dasharray:2.5 4;animation:belt-drive .8s linear infinite;animation-play-state:paused}
.motor-wheel{transform-box:fill-box;transform-origin:center;animation:motor-drive 2.4s linear infinite;animation-play-state:paused}
.mechanism-running .belt-teeth,.mechanism-running .motor-wheel,.mechanism-closing .belt-teeth,.mechanism-closing .motor-wheel{animation-play-state:running}
@keyframes belt-drive{to{stroke-dashoffset:-26}}
@keyframes motor-drive{to{transform:rotate(360deg)}}
.choices a{outline:none;cursor:pointer}
.hit{fill:url(#case-grain);stroke:#734831;stroke-width:2;stroke-linejoin:round}
.choices text{fill:#1e120c;font:600 28px/1 Georgia,"Times New Roman",serif;text-anchor:middle;pointer-events:none}
.choices .intro-label{font-size:21px}
.choices a:hover .hit,.choices a:focus-visible .hit{fill:url(#metal-active)}
.choices a:hover text,.choices a:focus-visible text{fill:#111}
.choices a:active .hit{fill:#b6a375}
.choices a:focus-visible .hit{stroke:#29291e;stroke-width:4}
.engraving{fill:none;stroke:url(#edge);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.engraving>use{stroke-width:2.2}
.menu-note{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.website-link{position:fixed;right:30px;top:28px;color:#171710;text-decoration:none;padding:8px 0;font-size:15px;font-weight:600;text-shadow:0 1px 2px #fff9}
.website-link:hover{color:#443c2c}.website-link:focus-visible{outline:2px solid #171710;outline-offset:5px}
.build-link{position:fixed;left:30px;bottom:22px;color:#171710;font-size:12px;font-weight:600;text-decoration:none;text-shadow:0 1px 2px #fff9}
.build-link:focus-visible{outline:2px solid #171710;outline-offset:5px}
dialog{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;padding:0;border:0;color:var(--ink);background:#0b0c0c;overflow:hidden}
dialog::backdrop{background:#000}
dialog[open]{display:block}
.destination-bar{position:absolute;top:20px;right:24px;z-index:5;color:#ecd9aa;font:13px Arial,sans-serif}
.destination-bar h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
#destination-menu{position:relative}
#destination-menu summary{cursor:pointer;padding:10px 15px;min-height:40px;display:grid;place-items:center;border:1px solid #d2b97e66;border-radius:20px;background:#142335e8;list-style:none}
#destination-menu summary::-webkit-details-marker{display:none}
#destination-menu nav{position:absolute;right:0;top:48px;width:190px;padding:8px;background:#142335f5;border:1px solid #d2b97e66;border-radius:10px}
#destination-menu button{display:block;width:100%;padding:12px;text-align:left;font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:5px}
#destination-menu button:hover{background:#d2b97e22}
#destination-menu :is(button,summary):focus-visible{outline:2px solid #ead299;outline-offset:3px}
dialog[data-destination="shop"] .destination-bar,dialog[data-destination="learn"] .destination-bar{display:none}
#destination-frame{display:block;position:relative;z-index:1;width:100%;height:100%;border:0;background:#0b0c0c}
#radio-frame{display:block;position:relative;z-index:1;width:100%;height:100%;border:0;background:#181b1a}
#radio-frame[hidden],#destination-frame[hidden]{display:none}
#destination-status{position:absolute;top:70px;left:24px;z-index:3;margin:0;background:#0b0c0c;padding:8px 12px}
#destination-status[hidden]{display:none}
@media(max-height:760px) and (min-width:601px){:root{--menu-width:230px}main{padding-top:24px}.brand{margin-bottom:35px}.menu-note{margin-top:0}}
@media(max-width:600px){:root{--menu-width:240px}main{margin-left:22px;padding-top:68px}.brand{margin-bottom:42px}.website-link{right:22px;top:16px}.destination-bar{top:max(14px,env(safe-area-inset-top));right:14px}}
@media(max-width:600px) and (max-height:660px){:root{--menu-width:200px}main{margin-left:18px;padding-top:56px}.brand{margin-bottom:24px}.build-link{left:18px;bottom:14px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.hit,.menu-shell{transition:none!important}.belt-teeth,.motor-wheel{animation:none}}
/* Placement from Blu's marked 786 × 681 reference: x 4%, y 30%, height 61%. */
main{width:clamp(210px,22vw,360px);margin-left:4vw;padding-top:4svh}
.brand{margin:0;width:100%}
.drawn-menu{position:fixed;left:4vw;top:30svh;width:min(32vw,37.5svh);margin:0}
@media(max-width:600px){main{width:min(62vw,280px);padding-top:7svh}.drawn-menu{width:min(70vw,37.5svh)}}