*{box-sizing:border-box}
html,body,main{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:#e8edf1}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overscroll-behavior:none}
main{position:relative}
canvas{display:block;touch-action:none;cursor:default;-webkit-user-select:none;user-select:none}
#lab{position:absolute;inset:0;width:100%;height:100%;z-index:2}
#webgl{position:absolute;z-index:1;pointer-events:none;display:block;background:#eaf1f2}
.orientation-prompt{position:absolute;inset:0;z-index:10;display:none;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 35%,#17485f 0,#102f40 42%,#0b2230 100%);color:#fff;text-align:center}
.portrait-locked .orientation-prompt{display:flex}
.orientation-card{width:min(100%,360px);padding:28px 24px 24px;border:1px solid rgba(113,213,200,.28);border-radius:24px;background:rgba(5,24,35,.58);box-shadow:0 24px 64px rgba(0,0,0,.3);backdrop-filter:blur(12px)}
.orientation-brand{display:flex;flex-direction:column;align-items:flex-start;width:max-content;margin:0 auto 24px;line-height:.9;letter-spacing:.04em}
.orientation-brand span{font-size:11px;font-weight:850;color:#71d5c8}
.orientation-brand strong{font-size:24px;letter-spacing:0}
.phone-rotate-icon{position:relative;width:112px;height:88px;margin:0 auto 18px}
.phone-shape{position:absolute;left:31px;top:9px;width:50px;height:76px;border:4px solid #71d5c8;border-radius:12px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);transform:rotate(62deg)}
.phone-shape::after{content:"";position:absolute;left:50%;bottom:5px;width:5px;height:5px;border-radius:50%;background:#71d5c8;transform:translateX(-50%)}
.rotate-arrow{position:absolute;z-index:2;left:0;top:0;font-size:52px;font-weight:700;line-height:1;color:#08a5ef;text-shadow:0 6px 18px rgba(8,165,239,.25)}
.orientation-card h1{margin:0 0 10px;font-size:25px;line-height:1.15}
.orientation-card p{margin:0 auto;color:#c5d7dd;font-size:14px;line-height:1.5;max-width:300px}
.orientation-hint{display:inline-flex;align-items:center;gap:8px;margin-top:21px;padding:9px 14px;border-radius:999px;background:rgba(113,213,200,.12);color:#8ce3d8;font-size:12px;font-weight:750}
.orientation-hint span{font-size:18px;line-height:1}
@media (prefers-reduced-motion:no-preference){.phone-shape{animation:rotate-phone 1.8s ease-in-out infinite alternate}.rotate-arrow{animation:pulse-arrow 1.8s ease-in-out infinite alternate}}
@keyframes rotate-phone{from{transform:rotate(18deg)}to{transform:rotate(72deg)}}
@keyframes pulse-arrow{from{opacity:.65;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}