:root{color:#f7f2df;background:#171421;font-family:system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(circle at 50% 20%,#353047 0,#171421 65%),#171421}#app{display:grid;place-items:center}canvas{display:block;max-width:100%;max-height:100%;image-rendering:auto;box-shadow:0 24px 80px #00000073}.orientation-overlay{position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:auto auto auto;align-content:center;justify-items:center;gap:18px;padding:max(28px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));color:#f7f2df;text-align:center;background:#171421}.orientation-overlay[hidden]{display:none}.orientation-overlay h1{max-width:360px;margin:8px 0 0;color:#f7dc64;font-family:Rubik,system-ui,sans-serif;font-size:28px;font-weight:900;line-height:1.05}.orientation-overlay p{max-width:330px;margin:0;color:#d8d1df;font-family:Rubik,system-ui,sans-serif;font-size:16px;font-weight:700;line-height:1.4}.orientation-phone{position:relative;width:82px;height:132px;border:6px solid #f7dc64;border-radius:8px;animation:rotate-phone 1.8s ease-in-out 3}.orientation-phone__screen{position:absolute;inset:12px 8px 18px;border:3px solid #8dd8dd;background:#312d3d}.orientation-phone__button{position:absolute;bottom:5px;left:50%;width:16px;height:4px;background:#f7dc64;transform:translate(-50%)}@keyframes rotate-phone{0%,22%{transform:rotate(0)}62%,to{transform:rotate(90deg)}}@media(prefers-reduced-motion:reduce){.orientation-phone{animation:none;transform:rotate(90deg)}}