*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;overflow:hidden;background-color:#f5f5f5}iframe{width:100%;height:100%;border:none;background-color:#fff}.top-bar{position:fixed;top:0;left:0;right:0;height:36px;background-color:#000;color:#fafafa;display:flex;align-items:center;position:relative;padding:0 16px;font-family:Lexend,ui-sans-serif,system-ui,sans-serif;font-size:13px;font-weight:400;z-index:1000;box-shadow:0 2px 4px #0000001a}.logo{display:flex;align-items:center;gap:8px}.logo-icon{width:20px;height:20px;background-color:#af1d5a;border-radius:50%;padding:2px}.size-controls{position:absolute;left:50%;transform:translate(-50%);display:flex;gap:6px}.size-btn{padding:6px;background-color:#ffffff1a;color:#fafafa;border:0px;border-radius:6px;height:28px;font-family:inherit;font-size:13px;font-weight:400;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center}.size-btn:hover{background-color:#ffffff4d}.size-btn.active{background-color:#fff6;color:#fafafa}.icon{width:16px;height:16px}.separator{width:1px;height:16px;background-color:#fff6;align-self:center}.iframe-container{position:absolute;inset:36px 0 0;transition:all .3s ease}.iframe-container.desktop{width:100%;height:calc(100% - 36px)}.iframe-container.tablet{width:768px;height:1024px;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 4px 20px #0003;border-radius:8px;overflow:hidden}.iframe-container.tablet iframe{border-radius:8px}.iframe-container.mobile{width:375px;height:667px;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 4px 20px #0000004d;border-radius:12px;overflow:hidden}.iframe-container.mobile iframe{border-radius:12px}