:root{color-scheme:light;background:#101411;font-family:system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{overscroll-behavior:none}#app{display:grid;place-items:center}[hidden]{display:none!important}.home-scene{position:relative;width:100%;height:100dvh;overflow:hidden;isolation:isolate;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.home-background{position:absolute;inset:-30px;background:url(../image/index_bg.jpg) center / cover;transform:translate(var(--background-x, 0px),var(--background-y, 0px));will-change:transform}.home-gate{position:absolute;inset:0;display:grid;place-items:center;z-index:2}.alien,.instrument-icon{display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.alien{width:120px;height:120px;filter:drop-shadow(0 12px 10px #0003);animation:breathe 2.8s ease-in-out infinite}.alien img{width:100%;height:100%;object-fit:contain}.alien.permission-error{filter:drop-shadow(0 0 16px #f33)}.home-brand{position:absolute;z-index:1;top:max(26px,calc(env(safe-area-inset-top) + 16px));left:50%;width:170px;max-width:48%;height:auto;transform:translate(-50%);pointer-events:none;animation:reveal .45s ease both}.instrument-grid{position:absolute;inset:max(15%,calc(env(safe-area-inset-top) + 70px)) 10% max(15%,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);place-items:center;transform:translate(var(--icon-x, 0px),var(--icon-y, 0px));will-change:transform;animation:reveal .45s ease both}.instrument-icon{width:110px;height:110px}.instrument-icon img{width:86px;height:86px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 10px 6px #0003);transition:transform .16s ease}.instrument-icon:active img,.instrument-icon.pop img{transform:scale(1.12)}.alien:focus-visible,.instrument-icon:focus-visible{outline:2px solid #fff;outline-offset:5px}@keyframes breathe{50%{transform:translateY(-5px) scale(1.035)}}@keyframes reveal{0%{opacity:0}to{opacity:1}}@media(min-width:600px){.home-scene{width:min(430px,100vw);height:min(900px,100dvh)}}@media(max-height:500px){.instrument-grid{inset:65px 20% max(8%,env(safe-area-inset-bottom))}.instrument-icon{width:72px;height:72px}.instrument-icon img{width:60px;height:60px}}