:root{--canvas-bg-color:10, 10, 11;--ui-surface:#141416;--ui-text:#e8e8e6;--ui-text-muted:#8a8a8e}html,body{overscroll-behavior:none;touch-action:none;background-color:rgb(var(--canvas-bg-color));margin:0;position:fixed;inset:0;overflow:hidden}#pixi-canvas{display:block}:focus-visible{outline:1px solid var(--ui-text);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important}}@scope(div#map-container){:scope{--map-duration:.3s;z-index:1000;box-sizing:border-box;cursor:default;opacity:1;visibility:visible;transition:opacity var(--map-duration) ease, visibility var(--map-duration);grid-template-rows:1fr;grid-template-columns:1fr;place-items:center;padding:min(6vmin,4rem);display:grid;position:fixed;inset:0;container-type:size}:scope[hidden]{visibility:hidden;opacity:0;transition-timing-function:ease-in}#map{--map-ratio:4/3;aspect-ratio:var(--map-ratio);width:min(100cqw, calc(100cqh * var(--map-ratio)));cursor:crosshair;outline:1px solid var(--ui-text);background-color:rgb(var(--canvas-bg-color));position:relative}#frames-container{z-index:10;position:absolute;inset:0}#frames-container>.frame{border:1px solid var(--ui-text-muted);position:absolute}#frames-container>.frame,#viewport-indicator{box-sizing:border-box}#viewport-indicator{border:1px solid var(--ui-text);z-index:100;position:absolute}}div#menu-container{z-index:100;box-sizing:border-box;pointer-events:none;justify-content:flex-end;align-items:flex-end;padding:min(1.5rem,2vw);display:flex;position:fixed;inset:0}div#menu-container button{pointer-events:auto}@scope(#menu-container>#menu){:scope{--menu-gapsize:.6rem;--menu-duration:.3s;box-sizing:border-box;width:min(20rem,100%);max-height:100%;padding:0 0 var(--menu-gapsize) var(--menu-gapsize);touch-action:auto;pointer-events:auto;color:var(--ui-text);opacity:.35;transition:opacity var(--menu-duration) ease, background-color var(--menu-duration) ease;flex-direction:column;align-items:stretch;font-family:Courier,monospace;display:flex;overflow:hidden}:scope:hover,:scope:focus-within,:scope[data-expanded=true]{opacity:1}:scope[data-expanded=true]{background-color:var(--ui-surface)}*{box-sizing:border-box}@scope(div#controls-container){:scope{--btn-size:min(2rem, 20%);justify-content:flex-end;align-items:center;gap:var(--menu-gapsize);display:flex}button{flex-basis:var(--btn-size);cursor:pointer;color:var(--ui-text-muted);background:0 0;border:none;margin:0;padding:.6rem;font-family:inherit;font-size:.8rem;line-height:1}button:hover{color:var(--ui-text)}button:focus{color:var(--ui-text);outline:none}}#menu-body{opacity:0;min-height:0;transition:grid-template-rows var(--menu-duration) ease, margin-top var(--menu-duration) ease, opacity var(--menu-duration) ease;grid-template-rows:0fr;margin-top:0;display:grid}:scope[data-expanded=true] #menu-body{margin-top:var(--menu-gapsize);opacity:1;grid-template-rows:1fr}#menu-body-content{flex-direction:column;align-items:stretch;gap:.2rem;display:flex;overflow:hidden}dl{grid-template-columns:auto 1fr;gap:.8rem .1rem;font-size:.9rem;line-height:1;display:grid}dt{color:var(--ui-text)}dd{color:var(--ui-text-muted)}#menu-links{flex-direction:row;align-items:center;gap:.5rem;display:flex}a#github-link{width:1.2rem;height:1.2rem;color:var(--ui-text-muted);justify-content:center;align-items:center;display:flex}a#credits-link{color:var(--ui-text-muted);font-size:.9rem;line-height:1;text-decoration:none}a#github-link:hover,a#github-link:focus-visible,a#credits-link:hover,a#credits-link:focus-visible{color:var(--ui-text)}svg.menu-icon{aspect-ratio:1;width:100%;margin:0;padding:0;display:block}}