:root{color-scheme:dark;font:14px system-ui;background:#15171a;color:#e9edf0}*{box-sizing:border-box}body{margin:0}header{display:flex;gap:24px;align-items:center;padding:20px 26px;border-bottom:1px solid #32363e}header>a{font-size:26px;font-weight:800;letter-spacing:-1px;text-decoration:none;color:inherit}header strong{font-size:13px;display:block}header span{font-size:11px;color:#909aa9}nav{display:flex;gap:7px;margin-left:auto}button{font:inherit;border:1px solid #404651;background:#242933;color:#e9edf0;border-radius:7px;padding:8px 12px;cursor:pointer}button.active{border-color:#bbff6b;color:#bbff6b}main{display:grid;grid-template-columns:minmax(0,1fr) 414px;gap:26px;padding:20px 26px}h2{font-size:10px;letter-spacing:1.4px;color:#96a0af;display:flex;justify-content:space-between;margin:0 0 12px}h2 span{font-weight:400;letter-spacing:0}.desktop-frame{position:relative;overflow:hidden;border:1px solid #424853;border-radius:12px;background:#080b0e}.desktop iframe{position:absolute;top:0;left:0;width:1200px;height:900px;transform-origin:top left}.phone-frame{width:414px;padding:11px;border:1px solid #424853;border-radius:32px;background:#050709}.phone iframe{width:390px;height:844px;border-radius:22px;background:#080b0e}iframe{border:0;display:block}@media(max-width:850px){header{flex-wrap:wrap;gap:15px}nav{margin-left:0}main{grid-template-columns:1fr;padding:18px;gap:25px}.phone{width:min(414px,100%);margin:auto}.phone-frame{max-width:100%;padding:9px}.phone iframe{width:100%;height:844px}}button:focus-visible{outline:2px solid #bbff6b;outline-offset:3px}