:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#e9f2ff;background:#080e19}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 78% 42%,#1c3155 0,transparent 55%),#080e19}a{color:#b7d2fa;text-decoration:none}a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid #b9d7ff;outline-offset:4px}header{display:flex;justify-content:space-between;align-items:center;max-width:1440px;margin:auto;padding:22px 36px;border-bottom:1px solid #26374f;font-size:12px}.brand{font-size:34px;font-weight:900;letter-spacing:-2px;color:#e5efff;display:flex;align-items:center;gap:16px}.brand span{font-size:11px;letter-spacing:2px}main{display:grid;grid-template-columns:minmax(280px,390px) minmax(0,1fr);gap:50px;max-width:1250px;margin:35px auto;padding:0 35px}.controls{padding-top:50px}h1{font-size:clamp(40px,4vw,57px);line-height:1.05;letter-spacing:-2.5px;margin:18px 0 24px}em{font-style:normal;color:#b4cafa}.eyebrow{color:#a8c2e6;font:10px ui-monospace,monospace;letter-spacing:2px}.intro{color:#a4b9d5;line-height:1.8;font-size:14px;max-width:330px;margin-bottom:28px}label{display:block;color:#c2d1e4;font-size:12px;margin-bottom:8px}select,button{font:inherit;color:#dceaff;background:#122039;border:1px solid #3c5577;border-radius:9px;min-height:42px;padding:10px 14px}select{width:100%;max-width:330px;font-size:13px}button{cursor:pointer;font-size:12px}button:hover{background:#243955}nav{display:flex;flex-wrap:wrap;gap:8px;max-width:340px;margin:20px 0 28px}.preview-note{border-left:2px solid #76b0d3;padding:2px 0 2px 17px;max-width:330px;font-size:12px;line-height:1.7;color:#95aecf}.preview-note strong{color:#cee4fb}.preview-note p{margin:6px 0}.stage{display:flex;justify-content:center;align-items:flex-start;min-width:0;padding:10px 5px 25px}.scaled-space{position:relative}.phone{transform-origin:top left;position:absolute;padding:9px 9px 7px;border:1px solid #56708c;border-radius:37px;background:linear-gradient(145deg,#31405a,#0a1220 23%,#1c2b41 96%);box-shadow:0 24px 85px #0008,0 0 80px #397dc318}.phone-top{display:flex;align-items:center;justify-content:space-between;height:27px;padding:0 13px 7px;font:8px ui-monospace,monospace;letter-spacing:1px;color:#99aec9}.phone-top i{width:60px;height:7px;background:#070c15;border-radius:10px}.phone-bottom{height:19px;display:flex;justify-content:center;align-items:flex-end}.phone-bottom i{height:4px;border-radius:4px;width:95px;background:#627896}iframe{display:block;background:#080e19;border:0;border-radius:20px;width:390px;height:844px}#dimensions{font:11px ui-monospace,monospace;color:#85a2c6;margin:20px 0}
@media(max-width:820px){header{padding:18px 20px}main{grid-template-columns:1fr;margin:20px auto;padding:0 20px;gap:20px}.controls{padding-top:0}.controls h1{font-size:38px}.intro{max-width:600px}.preview-note{max-width:600px}.stage{min-height:400px}nav{max-width:none}.brand{font-size:28px}.brand span{font-size:9px}header>a:last-child{font-size:11px}}