:root{color-scheme:dark;--bg: #04070f;--glow: #3d8bff;--pad-face: rgba(12, 24, 48, .82);--pad-edge: rgba(61, 139, 255, .5);--pad-ink: #9fc4ff}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:radial-gradient(ellipse at 50% 0%,#0d1c3d 0%,var(--bg) 62%),var(--bg);color:#dce9ff;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;overflow:hidden;overscroll-behavior:none}#app{height:100%;height:100dvh;display:flex;flex-direction:column}#shell{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#stage{display:block;border-radius:12px;background:#04070f;box-shadow:0 0 0 1px #3d8bff59,0 0 42px #3d8bff38,0 18px 60px #000000bf}#pad{position:relative;flex:none;width:100%;height:clamp(150px,32vh,250px);padding-bottom:env(safe-area-inset-bottom,0px);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#pad[hidden]{display:none}.pad{position:absolute;inset:0;margin:0;padding:0;border:0;background:var(--pad-face);color:var(--pad-ink);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .07s ease,color .07s ease}.pad[data-dir=up]{clip-path:polygon(0 0,100% 0,50% 50%)}.pad[data-dir=right]{clip-path:polygon(100% 0,100% 100%,50% 50%)}.pad[data-dir=down]{clip-path:polygon(100% 100%,0 100%,50% 50%)}.pad[data-dir=left]{clip-path:polygon(0 100%,0 0,50% 50%)}.pad .arrow{position:absolute;width:clamp(28px,7vh,46px);height:auto;fill:currentColor;pointer-events:none}.pad[data-dir=up] .arrow{left:50%;top:16.7%;transform:translate(-50%,-50%)}.pad[data-dir=right] .arrow{left:83.3%;top:50%;transform:translate(-50%,-50%) rotate(90deg)}.pad[data-dir=down] .arrow{left:50%;top:83.3%;transform:translate(-50%,-50%) rotate(180deg)}.pad[data-dir=left] .arrow{left:16.7%;top:50%;transform:translate(-50%,-50%) rotate(-90deg)}#pad:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom right,transparent calc(50% - 1px),var(--pad-edge) 50%,transparent calc(50% + 1px)),linear-gradient(to bottom left,transparent calc(50% - 1px),var(--pad-edge) 50%,transparent calc(50% + 1px));opacity:.75}.pad.is-down{background:#306cdceb;color:#fff}#pad:has(.pad.is-down):after{opacity:1}@media (prefers-reduced-motion: reduce){.pad{transition:none}}@media (max-width: 520px){#stage{border-radius:8px}}@media (orientation: landscape) and (max-height: 560px){#shell{padding:6px}#pad{height:clamp(110px,40vh,190px)}}