html,body{margin:0;background:#0c0c0f;color:#fcfcfa}
body{min-height:100svh;display:grid;place-items:center}
.phone{box-sizing:border-box;width:100%;height:100svh;background:#000}
.screen{position:relative;box-sizing:border-box;width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;background:radial-gradient(120% 70% at 20% 0%,#3b2a63 0%,transparent 60%),radial-gradient(100% 60% at 100% 100%,#8a3a4e 0%,transparent 65%),#17142b;padding:max(14px,env(safe-area-inset-top)) 20px 0}
@media (min-width:600px){
  body{padding:32px 0}
  .phone{width:390px;height:min(844px,calc(100svh - 64px));padding:12px;border-radius:62px;background:#1b1b1f;box-shadow:0 0 0 2px #3a3a40,0 30px 80px rgba(0,0,0,.6)}
  .screen{border-radius:50px;padding-top:14px}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.status{position:relative;align-self:stretch;display:flex;justify-content:space-between;align-items:center;height:34px;padding:0 14px;font:600 15px/1 var(--font-body,system-ui);letter-spacing:.01em}
.island{position:absolute;left:50%;top:2px;transform:translateX(-50%);width:104px;height:30px;border-radius:15px;background:#000}
.bars{display:flex;gap:2px;align-items:flex-end}.bars i{display:block;width:4px;background:#fcfcfa;border-radius:1px}.bars i:nth-child(1){height:5px}.bars i:nth-child(2){height:8px}.bars i:nth-child(3){height:11px}
.grid{list-style:none;margin:36px 0 0;padding:0;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:26px 8px;align-items:start}
.grid a{display:flex;flex-direction:column;align-items:center;gap:7px;color:#fcfcfa;text-decoration:none;font:500 12px/1.15 var(--font-body,system-ui);text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.grid img{display:block;width:60px;height:60px;border-radius:14px;transition:transform .15s}
.grid a:hover img{transform:scale(1.06)}
.grid a:focus-visible{outline:2px solid #fcfcfa;outline-offset:4px;border-radius:12px}
.made{margin-top:auto;margin-bottom:22px;padding:8px 14px;color:#fcfcfa;font:600 13px/1 var(--font-body,system-ui);text-decoration:none;opacity:.85;letter-spacing:.02em}
.made:hover{opacity:1;text-decoration:underline}.made:focus-visible{outline:2px solid #fcfcfa;border-radius:8px}
.bar{width:134px;height:5px;border-radius:3px;background:#fcfcfa;opacity:.9;margin-bottom:8px;flex:none}
@media (prefers-reduced-motion:reduce){.grid img{transition:none}}