/* Pocket device: a native low-poly Blender model with authored pixel paint. */
:root{font-size:min(1.25px,calc((100vw - 20px)/560),calc((100dvh - 32px)/820))}
html{background:#242c29}
body{background:radial-gradient(ellipse at 50% 38%,#39443e,#242c29 72%)}
.phone-case{width:480rem;height:640rem;transform:translateY(50rem);filter:drop-shadow(0 7rem 0 #101b1670) drop-shadow(1rem 15rem 13rem #0b151a38)}
.phone-case::before,.phone-case::after,.phone-shell::before,.phone-shell::after{display:none}
.phone-shell{display:block;height:100%;padding:0;gap:0;background:transparent;clip-path:none;overflow:visible}
.shell-face{inset:-140rem -40rem -40rem;z-index:3;clip-path:none;overflow:visible;pointer-events:none}
.shell-face picture,.shell-face img{display:block;width:100%;height:100%;image-rendering:auto}
.shell-top,.shell-bottom,.shell-pattern,.shell-sheen,.control-material{display:none}
.app-window{position:absolute;left:62rem;top:79rem;width:356rem;height:420rem;z-index:2;background:#657258;box-shadow:none;clip-path:none;border-radius:13rem}
.app-window::before,.app-window::after{inset:8rem 7rem 5rem 5rem;border-radius:7rem;clip-path:none;pointer-events:none}
.stream-dock{position:absolute;left:85rem;top:520rem;width:310rem;height:95rem;display:block;padding:0;z-index:4}
.dock-button{position:absolute;display:block;width:78rem;height:42rem;padding:0;clip-path:none;border-radius:21rem;outline:none;isolation:isolate}
#homeButton{left:8rem;top:27rem}
#streamButton{left:113rem;top:9rem;width:84rem;height:56rem;border-radius:28rem}
#settingsButton{left:224rem;top:27rem}
.dock-button::before,.dock-button::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0}
.dock-button::before{background:#f5ebc516}
.dock-button::after{inset:3rem;box-shadow:inset 0 0 0 2rem #f6efd2;background:none}
@media(hover:hover){.dock-button:hover::before{opacity:1}}
.dock-button:active::before{opacity:1;background:#28382d35;box-shadow:inset 0 3rem 0 #1f302f40}
.dock-button:focus-visible::after{opacity:1}
.mini-phone{width:72rem;height:105.43rem;background:none;box-shadow:none;clip-path:none}
.mini-phone::before,.mini-phone::after{display:none}
.mini-pattern,.mini-pattern img{width:100%;height:100%;display:block;object-fit:contain;image-rendering:auto}
.shell-option{gap:6rem}
@media(max-height:550px) and (min-width:600px){
  :root{font-size:min(.95px,calc((100dvh - 20px)/530),calc((100vw - 32px)/860))}
  .phone-case{width:620rem;height:410rem;transform:translateY(20rem)}
  .phone-shell{padding:0}
  .shell-face{inset:-80rem -120rem -40rem}
  .app-window{left:43rem;top:50rem;width:534rem;height:258rem}
  .stream-dock{left:170rem;top:321rem;width:280rem;height:70rem}
  .dock-button{width:71rem;height:42rem;border-radius:21rem}
  #homeButton{left:16.5rem;top:10rem}
  #streamButton{left:100rem;top:1.5rem;width:80rem;height:51rem;border-radius:26rem}
  #settingsButton{left:192.5rem;top:10rem}
}