.phone-wrapper{perspective:1200px}.phone{position:relative;width:380px;height:780px;background:linear-gradient(145deg,#2a2a2e 0%,var(--phone-body) 40%,#111114 100%);border-radius:48px;padding:12px;box-shadow:0 0 0 2px var(--phone-border),0 0 0 4px #0a0a0c,0 25px 60px #0009,0 0 80px #6366f11f,inset 0 1px #ffffff14;cursor:default}.phone:before{content:"";position:absolute;right:-3px;top:120px;width:3px;height:56px;background:#3a3a3e;border-radius:0 2px 2px 0;box-shadow:0 80px #3a3a3e,0 130px #3a3a3e}.phone:after{content:"";position:absolute;left:-3px;top:100px;width:3px;height:36px;background:#3a3a3e;border-radius:2px 0 0 2px;box-shadow:0 50px #3a3a3e}.screen{position:relative;width:100%;height:100%;background:var(--screen-bg);border-radius:38px;overflow:hidden;display:flex;flex-direction:column}.dynamic-island{position:absolute;top:12px;left:50%;transform:translate(-50%);width:96px;height:28px;background:#000;border-radius:20px;z-index:10;box-shadow:0 0 0 1px #ffffff0f}.status-bar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:14px 24px 6px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);flex-shrink:0}.status-bar .time{font-variant-numeric:tabular-nums}.status-icons{display:flex;align-items:center;gap:5px}.status-icons svg{display:block}.browser-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#1c1c1e;border-bottom:1px solid #2c2c2e;flex-shrink:0}.browser-dots{display:flex;gap:4px}.browser-dots span{width:6px;height:6px;border-radius:50%;background:#48484a}.url-bar{flex:1;display:flex;align-items:center;gap:6px;background:#2c2c2e;border-radius:8px;padding:6px 10px;font-size:11px;color:#a1a1aa;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.url-bar svg{flex-shrink:0;opacity:.6}.url-bar a{color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis}.viewport{flex:1;position:relative;background:#fff;min-height:0}.viewport iframe{width:100%;height:100%;border:none;display:block}.viewport-fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.5rem;text-align:center;background:#fafafa;color:#333}.viewport-fallback p{font-size:13px;line-height:1.5;color:#666;margin-bottom:1rem}.viewport-fallback a{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:var(--accent);color:#fff;text-decoration:none;border-radius:10px;font-size:13px;font-weight:500}.viewport-fallback a:hover{filter:brightness(1.1)}.home-indicator{position:absolute;bottom:8px;left:50%;transform:translate(-50%);width:120px;height:4px;background:#ffffff59;border-radius:2px;z-index:10;pointer-events:none}.loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#fff;z-index:3;transition:opacity .3s ease}.spinner{width:28px;height:28px;border:3px solid #e4e4e7;border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app{min-height:100vh;display:flex;align-items:center;justify-content:center}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f1117;--phone-body: #1a1a1e;--phone-border: #2c2c30;--screen-bg: #000;--accent: #6366f1;--text: #e4e4e7;--text-muted: #71717a}body{min-height:100vh;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text)}#root{min-height:100vh}