*{box-sizing:border-box}html,body{height:100%}body{margin:0;overflow:hidden;color:#fff;background:radial-gradient(circle at 50% 25%,#425064,#111720 70%);font:13px Inter,system-ui,sans-serif}.studio{position:relative;z-index:10;height:68px;padding:0 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#0c1118;box-shadow:0 8px 30px rgba(0,0,0,.25)}.studio>div:first-child{display:flex;flex-direction:column}.studio span{color:#9aa5b2;font-size:11px}.devices{display:flex;gap:5px;padding:4px;border-radius:12px;background:#202833}.devices button{min-height:40px;padding:7px 13px;border:0;border-radius:9px;color:#aeb8c3;background:transparent;cursor:pointer}.devices button i{font-style:normal}.devices button.active{color:#111827;background:#fff}.devices button.active span{color:#111827}.actions{justify-self:end;display:flex;gap:17px}.actions a{color:#fff;text-decoration:none}.stage{height:calc(100% - 68px);padding:12px;display:grid;place-items:center}.device{position:relative;width:100%;height:100%;overflow:hidden;border:10px solid #161d26;border-radius:22px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.35);transition:width .4s,height .4s,border-radius .4s}.device.tablet{width:min(820px,100%);border-width:12px;border-radius:30px}.device.mobile{width:min(390px,100%);border-width:11px;border-radius:35px}.camera{position:absolute;z-index:2;top:4px;left:50%;width:48px;height:5px;border-radius:8px;background:#343e49;transform:translateX(-50%)}iframe{width:100%;height:100%;border:0;background:#fff}@media(max-width:700px){.studio{height:62px;padding:0 10px;grid-template-columns:1fr auto}.studio>div:first-child{display:none}.actions a:first-child{display:none}.stage{height:calc(100% - 62px);padding:8px}.devices button{padding:7px 10px}.devices button span{display:none}.device{border-width:7px}.device.tablet{width:100%;border-width:7px}.device.mobile{width:min(390px,100%);border-width:8px}}