*{box-sizing:border-box}body{margin:0;background:#e5e9e1;color:#243c2d;font:14px Arial,sans-serif}header{display:flex;align-items:end;gap:16px;padding:16px 24px;background:#fff;flex-wrap:wrap}header a,button,select{color:inherit;font:inherit;min-height:44px;padding:10px 14px;border:1px solid #cbd6c3;border-radius:10px;background:#f6f8f3;text-decoration:none}header a{margin-right:auto;display:flex;align-items:center}label{display:grid;gap:6px;font-size:12px}select{min-width:160px}button{cursor:pointer}button[aria-pressed=true]{background:#dce8d3}output{align-self:center;white-space:nowrap;min-width:170px}.hint{margin:16px 24px;color:#697967;font-size:12px;line-height:1.5}main{padding:8px 24px 24px;display:flex;justify-content:center}#frame{position:relative;flex:none}iframe{display:block;border:0;border-radius:18px;background:#f5f4ef;box-shadow:0 12px 40px #20372b20;transform-origin:top left}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #486f3b;outline-offset:3px}@media(max-width:600px){header{padding:12px;gap:12px}header a{width:100%}label{flex:1}select{width:100%;min-width:0}main{padding:8px 12px 20px}.hint{margin:12px}}
/* Match the public site and embedded desk. */
body{background:#e9edf2;color:#202833}header a,button,select{border-color:#c4d0df;background:#f7f8fa}button:hover,header a:hover{background:#e7effa}button[aria-pressed=true]{background:#dce9fa;color:#1b5195;border-color:#97b8e1}.hint{color:#647080}iframe{background:#f7f8fa;box-shadow:0 12px 40px #14213620}button:focus-visible,select:focus-visible,a:focus-visible{outline-color:#2466b8}
#custom-size:not([hidden]){display:flex;gap:10px}#custom-size input{width:90px;min-height:44px;padding:10px;border:1px solid #c4d0df;border-radius:10px;font:inherit;color:inherit;background:#f7f8fa}
#phone{overflow:hidden;border-radius:26px;background:#f7f8fa;transform-origin:top left;box-shadow:0 0 0 6px #202833,0 18px 50px #14213630;display:flex;flex-direction:column}#phone iframe{flex:none;border-radius:0;box-shadow:none;transform:none}.phone-status{height:26px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:11px;font-weight:600}.browser-address{height:48px;flex:none;display:flex;align-items:center;gap:10px;padding:4px 12px;background:#edf0f4}.browser-address #address{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}.browser-address button,.browser-toolbar button{border:0;background:transparent;min-width:44px;height:44px;padding:0;font-size:25px;border-radius:8px}.browser-toolbar{height:48px;flex:none;display:flex;align-items:center;justify-content:space-around;border-top:1px solid #dce2e9;background:#f7f8fa}.browser-name{font-size:10px;color:#647080}.phone-gesture{height:16px;flex:none;display:grid;place-items:center}.phone-gesture span{width:100px;height:4px;background:#202833;border-radius:4px}.panels-hidden .browser-address,.panels-hidden .browser-toolbar{display:none}main{padding-top:16px;padding-bottom:40px}
/* Safari-style preview chrome; viewport remains independent of the shell. */
#phone.is-iphone{border-radius:38px;background:#f5f5f7}.is-iphone .phone-status{order:0;position:relative;padding-inline:24px}.is-iphone .phone-status:after{content:'';position:absolute;width:76px;height:17px;left:50%;top:4px;transform:translateX(-50%);background:#202833;border-radius:14px}.is-iphone iframe{order:1}.is-iphone .browser-address{order:2;margin:0;background:#e9e9ee;border-radius:14px;padding-inline:18px}.is-iphone #address{text-align:center}.is-iphone .browser-toolbar{order:3;border:0;background:#f5f5f7;color:#2466b8}.is-iphone .phone-gesture{order:4}.is-iphone .browser-name{color:#647080}

main{padding:12px 24px 16px}#frame{margin:0 auto}