:root{--body:#e7e0d0;--body-hi:#f3eee3;--body-lo:#d6ccb6;--body-edge:#b9ae94;--glass:#0d0e12;--label:#8b8a97;--brand:#3a4a8c;--btn-a:#d14b3a;--btn-b:#e0a431;--btn-x:#2f9690;--btn-y:#7b5aa6;--rubber:#6f6c79;--case-3d:#dfd9c1;--screen-aspect:1/1;--screen-ratio:1;--screen-inv:1;--buncss-light: ;--buncss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overflow:hidden;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:radial-gradient(at 50% 30%,#262a35 0%,#14161c 70%);height:100%;margin:0;font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}body{display:flex;flex-direction:column;justify-content:center;align-items: center}.console{position:relative;display:grid;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(172deg,var(--body-hi)0%,var(--body)38%,var(--body)72%,var(--body-lo)100%)}@media (orientation:portrait){.console{padding:0 0 calc(env(safe-area-inset-bottom) + 14px);grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto;grid-template-areas:"screen screen" "brand brand" "left right" "midl midr";--avail:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));--chrome:84px;--pad:clamp(104px,min(43vw,calc(var(--avail) - 100vw*var(--screen-inv) - var(--chrome))),188px);width:100vw;height:100dvh}.glass{padding-top:env(safe-area-inset-top)}.screen-wrap{aspect-ratio:var(--screen-aspect);max-height:calc(var(--avail) - var(--pad) - var(--chrome));width:100%}.area-left{padding-left:max(4px,2vw)}.area-right{padding-right:max(4px,2vw)}.brand,.hints{display:none}}@media (orientation:portrait) and (max-aspect-ratio:10/19){.brand{display:block}}@media (orientation:portrait) and (min-width:700px){.console{--pad:178px;border-radius:26px 26px 80px;width:min(560px,100vw);height:min(100dvh,980px);padding:22px 0}.area-screen{padding:0 22px}.screen-wrap{max-height:54dvh}.brand{display:block}}@media (orientation:landscape){.console{--side:max(calc(env(safe-area-inset-left) + 118px),17vw);width:min(100vw,calc(100dvh*(var(--screen-ratio) + .9)),1180px);height:min(100dvh,calc(100vw/(var(--screen-ratio) + .9)),625px);grid-template-columns:var(--side)minmax(0,1fr)var(--side);grid-template-rows:1fr auto;grid-template-areas:"left screen right" "midl brand midr";--pad:min(calc(var(--side) - 30px),30dvh,184px);border-radius:54px;padding:22px 0}.area-screen{min-height:0}.glass,.screen-wrap{height:100%}.area-left{padding-left:max(0px,calc(env(safe-area-inset-left) - 20px))}.area-right{padding-right:max(0px,calc(env(safe-area-inset-right) - 20px))}.area-mid{padding-bottom:6px}}@media (orientation:landscape) and (max-height:500px){.console{padding:0 0 calc(env(safe-area-inset-bottom) + 4px);grid-template-areas:"left screen right" "midl screen midr";grid-template-columns:1fr min(calc((100dvh - 4px)*var(--screen-ratio)),calc(100vw - 2*var(--side)))1fr;--pad:min(calc(var(--side) - 22px),38dvh,160px);border-radius:0;width:100vw;height:100dvh}.brand,.hints{display:none}}@media (orientation:landscape) and (min-height:501px),(orientation:portrait) and (min-width:700px){.console{box-shadow:inset 0 2px 0 #ffffffb3,inset 0 -5px 0 var(--body-edge),0 30px 70px #0000008c,0 4px 12px #0006}.glass{border-radius:16px 16px 40px;padding:12px;box-shadow:inset 0 2px 8px #000c,0 0 0 1px #00000040,0 2px #ffffffb3}#screen{border-radius:3px}}@media (orientation:landscape) and (min-height:501px){.area-screen{align-items: center}.glass{box-sizing:content-box;aspect-ratio:var(--screen-aspect);width:auto;max-width:calc(100% - 24px);height:calc(100% - 24px)}}.area-screen{grid-area:screen;display:flex;flex-direction:column;min-width:0;min-height:0}.area-left{grid-area:left;display:flex;justify-content:center;align-items: center;min-height:0}.area-right{grid-area:right;display:flex;justify-content:center;align-items: center;min-height:0}.mid-l{grid-area:midl;justify-self:end;margin-right:14px}.mid-r{grid-area:midr;justify-self:start;margin-left:14px}@media (orientation:landscape){.mid-l,.mid-r{justify-self:center;margin:0}}@media (orientation:landscape) and (min-height:501px){.mid-l{justify-self:end}.mid-r{justify-self:start}}.glass{position:relative;display:flex;background:linear-gradient(180deg,#ffffff08,#fff0 40%),var(--glass);flex-direction:column}@media (orientation:portrait) and (max-width:699px){.glass{box-shadow:0 1px #00000073,0 2px #ffffff8c,0 6px 10px -4px #00000040}}.screen-wrap{position:relative;flex:auto;min-height:0}#screen{position:absolute;display:block;image-rendering:pixelated;background:#000;top:50%;left:50%;transform:translate(-50%,-50%)}.brand{grid-area:brand;color:var(--brand);letter-spacing:.01em;text-shadow:0 1px #ffffffb3;justify-self:start;margin:12px 0 0 20px;font-family:Trebuchet MS,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:19px;font-style:italic;font-weight:800;line-height:1}.brand-sub{letter-spacing:.3em;text-transform:uppercase;color:var(--label);margin-left:7px;font-size:10px;font-style:normal}@media (orientation:landscape){.brand{place-self: center;margin:10px 0 0;font-size:17px}}.dpad{position:relative;width:var(--pad);aspect-ratio:1;touch-action:none;perspective:340px}.dpad:before{content:"";position:absolute;background:radial-gradient(circle at 50% 42%,#0000001a,#0000000a 62%,#ffffff38 71%,#0000 72%);border-radius:50%;inset:1%}.cross{position:absolute;overflow:visible;filter:drop-shadow(0 5px 5px #281e0a59);transform:rotateX(var(--rx,0deg))rotateY(var(--ry,0deg));width:100%;height:100%;transition:transform 45ms ease-out;inset:0}.dpad[data-tilt*=up]{--rx:13deg}.dpad[data-tilt*=down]{--rx:-13deg}.dpad[data-tilt*=left]{--ry:-13deg}.dpad[data-tilt*=right]{--ry:13deg}.cross .press{fill:#000;opacity:0;transition:opacity 45ms}.cross .press.down{opacity:.32}.cross .arrows path{fill:#1a1b20;stroke:#ffffff21;stroke-width:.8;paint-order:stroke}.face{position:relative;width:calc(var(--pad)*1.04);aspect-ratio:1;touch-action:none}.face:before{content:"";position:absolute;background:radial-gradient(circle at 50% 45%,#00000016 0%,#0000000d 66%,#ffffff40 70.2%,#0000 71%);border-radius:50%;inset:0}.well{position:absolute;aspect-ratio:1;background:radial-gradient(circle at 50% 38%,#1e140057,#1e14002e 64%,#1e140014);border-radius:50%;width:36%;box-shadow:inset 0 2px 3px #0000004d,0 1.5px #ffffffbf}.well-x{top:1%;left:32%}.well-y{top:32%;left:1%}.well-a{top:32%;right:1%}.well-b{bottom:1%;left:32%}.fb{--c:var(--btn-a);--c-hi:color-mix(in oklab,var(--c)62%,white);--c-lo:color-mix(in oklab,var(--c)74%,black);--c-side:color-mix(in oklab,var(--c)52%,black);position:absolute;display:grid;background:radial-gradient(ellipse 58% 34% at 50% 22%,#ffffff80,#fff0 72%),radial-gradient(circle at 50% 30%,var(--c-hi)0%,var(--c)46%,var(--c-lo)100%);box-shadow:inset 0 -2px 3px #0000002e,inset 0 1px 1px #ffffff59,0 4px 0 var(--c-side),0 6px 7px #1e140061;cursor:pointer;pointer-events:none;border:none;border-radius:50%;place-items: center;margin:0;padding:0;transition:transform 40ms,box-shadow 40ms;inset:8%;transform:translateY(-4px)}.fb b{font:800 calc(var(--pad)*.11)/1 "Trebuchet MS",ui-rounded,system-ui,sans-serif;color:color-mix(in oklab,var(--c)55%,black);text-shadow:0 1px #ffffff52;opacity:.85}.fb-x{--c:var(--btn-x)}.fb-y{--c:var(--btn-y)}.fb-a{--c:var(--btn-a)}.fb-b{--c:var(--btn-b)}.fb.down{filter:brightness(.92);box-shadow:inset 0 -1px 2px #0003,inset 0 2px 3px #0000001f,0 0 0 var(--c-side),0 1px 2px #1e140066;transform:translateY(0)}.area-mid{display:flex;touch-action:none;justify-content:center;align-items: center;padding:4px 0 2px}.pill-wrap{display:flex;flex-direction:column;align-items: center;gap:9px;padding:6px 8px}.slot{display:block;background:#281e0a29;border-radius:10px;width:58px;height:19px;padding:3px 4px;transform:rotate(-22deg);box-shadow:inset 0 2px 3px #00000047,0 1px #ffffffb3}.pill{display:block;background:linear-gradient(180deg,color-mix(in oklab,var(--rubber)80%,white),var(--rubber)55%,color-mix(in oklab,var(--rubber)80%,black));box-shadow:inset 0 1px 0 #ffffff4d,0 2px 0 color-mix(in oklab,var(--rubber)55%,black),0 3px 3px #00000040;pointer-events:none;border:none;border-radius:7px;width:100%;height:100%;padding:0;transition:transform 40ms,box-shadow 40ms;transform:translateY(-2px)}.pill.down{filter:brightness(.9);transform:translateY(0);box-shadow:inset 0 1px 2px #0000004d,0 0 #0000}.pill-label{letter-spacing:.16em;color:var(--label);text-shadow:0 1px #fff9;font-size:9px;font-weight:800}.grill{position:absolute;right:26px;bottom:calc(env(safe-area-inset-bottom) + 22px);display:flex;pointer-events:none;gap:7px;transform:rotate(-30deg)}.grill i{display:block;background:linear-gradient(90deg,#281e0a4d,#281e0a29);border-radius:3px;width:6px;height:40px;box-shadow:inset 0 2px 3px #0000004d,1px 1px #fff9}@media (orientation:landscape){.grill{bottom:30px;right:40px}.grill i{height:34px}}@media (orientation:portrait) and (max-height:720px),(orientation:landscape) and (max-height:500px){.grill{display:none}}.hints{color:#7d8296;letter-spacing:.02em;text-align:center;margin-top:14px;padding:0 12px;font-size:12px}@media (orientation:landscape) and (max-height:760px){.hints{display:none}}.controls3d{position:absolute;display:block;z-index:0;pointer-events:none;opacity:0;transition:opacity .16s ease-out;top:0;left:0}.shell-3d .controls3d{opacity:1}.console{overflow:hidden}.console>:not(.controls3d){z-index:1}.shell-3d,.shell-pending{background:var(--case-3d)}.shell-3d .cross,.shell-3d .dpad:before,.shell-3d .face:before,.shell-3d .well,.shell-3d .slot,.shell-3d .grill,.shell-pending .cross,.shell-pending .dpad:before,.shell-pending .face:before,.shell-pending .well,.shell-pending .slot,.shell-pending .grill{visibility:hidden}.shell-3d .glass,.shell-pending .glass{box-shadow:none}@media (orientation:landscape) and (min-height:501px),(orientation:portrait) and (min-width:700px){.shell-3d .glass,.shell-pending .glass{box-shadow:inset 0 2px 8px #000c}}html:not(.screen-on) #screen{visibility:hidden}.screen-wrap:after{content:"";position:absolute;opacity:0;pointer-events:none;animation:.3s ease-out .5s both kk-boot-in,.9s step-end .5s infinite kk-boot-dots;width:6px;height:6px;margin:-3px 0 0 -3px;top:50%;left:50%}html.screen-on .screen-wrap:after{display:none}@keyframes kk-boot-in{0%{opacity:0}to{opacity:1}}@keyframes kk-boot-dots{0%{background:#5d5c69;box-shadow:-12px 0 #8b8a97,12px 0 #5d5c69}33%{background:#8b8a97;box-shadow:-12px 0 #5d5c69,12px 0 #5d5c69}66%{background:#5d5c69;box-shadow:-12px 0 #5d5c69,12px 0 #8b8a97}}.boot-failed .screen-wrap{cursor:pointer}.boot-failed .screen-wrap:after{content:attr(data-error);box-shadow:none;animation:none;opacity:1;text-align:center;color:#8b8a97;letter-spacing:.02em;background:0 0;width:max-content;max-width:90%;height:auto;margin:0;font:600 13px/1.4 ui-rounded,SF Pro Rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;transform:translate(-50%,-50%)}@media (prefers-reduced-motion:reduce){.screen-wrap:after{animation:.3s ease-out .5s both kk-boot-in;background:#5d5c69;box-shadow:-12px 0 #5d5c69,12px 0 #5d5c69}}
