/* A fixed iPhone canvas, including in a narrow preview panel. */
html,body{width:100%;height:100%;min-width:0;margin:0;overflow:hidden;color-scheme:light;background:#f2f3f5;}
.workspace{height:100dvh;min-height:0;padding:0;display:block;overflow:hidden;background:#f2f3f5;}
.demo-rail{display:none;}
.preview-shell{height:100%;display:flex;flex-direction:column;min-width:0;}
.preview-toolbar{height:48px;min-height:48px;padding:0 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e4e5e8;background:#fafafb;color:#75777e;gap:12px;}
.preview-device-name{display:flex;align-items:center;gap:7px;font-size:11px;white-space:nowrap;}
.preview-device-name svg{width:12px;height:18px;}
.preview-zoom{display:flex;align-items:center;gap:4px;}
.preview-zoom button{width:27px;height:27px;border-radius:6px;font-size:16px;color:#797c83;}
.preview-zoom button:hover{background:#e8e9ed;}
.preview-zoom button:focus-visible{outline:2px solid #d77a8c;outline-offset:1px;}
.preview-zoom output{font-size:10px;min-width:34px;text-align:center;color:#9699a0;font-variant-numeric:tabular-nums;}
.preview-zoom .preview-fit{width:auto;padding:0 9px;margin-left:7px;font-size:10px;border:1px solid #e5e6e9;}
.preview-zoom .preview-fit.active{background:#eceef1;border-color:#e1e3e7;color:#626670;}
.preview-zoom .preview-reset{width:auto;padding:0 9px;margin-left:5px;font-size:10px;color:#d73551;white-space:nowrap;border:1px solid #f0dce1;background:#fff;}
.preview-viewport{flex:1;min-height:0;min-width:0;padding:18px;overflow:auto;display:flex;overscroll-behavior:contain;}
.preview-holder{position:relative;flex-shrink:0;margin:auto;}
.device-wrap{width:410px;height:864px;position:absolute;left:0;top:0;transform-origin:0 0;flex-shrink:0;}
.device-wrap:before{content:"";position:absolute;width:3px;height:64px;left:-3px;top:142px;background:#333438;border-radius:3px 0 0 3px;box-shadow:0 76px 0 #333438;}
.device-wrap:after{content:"";position:absolute;width:3px;height:87px;right:-3px;top:182px;background:#333438;border-radius:0 3px 3px 0;}
.phone{box-sizing:border-box;width:410px;height:864px;min-height:0;max-width:none;border:10px solid #18191b;border-radius:55px;overflow:hidden;box-shadow:0 0 0 1px #8e8f93,0 0 0 3px #c1c2c5,0 15px 35px #26293320;position:relative;display:flex;flex-direction:column;background:#fff;}
.dynamic-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);height:29px;width:108px;border-radius:20px;background:#0a0a0a;z-index:50;pointer-events:none;}
.dynamic-island:after{content:"";position:absolute;right:10px;top:10px;width:9px;height:9px;border-radius:50%;background:#111824;box-shadow:inset 0 0 3px #1c2940;}
.statusbar{height:55px;min-height:55px;display:flex;padding:9px 23px 0;align-items:center;font-size:13px;position:relative;}
.statusbar:after{display:none;}
.status-right{font-size:10px;}
.status-right b{font-size:10px;}
.home-indicator{display:block;bottom:7px;height:4px;}
#app{width:390px;flex:1;min-height:0;overflow:hidden;}
.device-caption{display:none;}
.post .cover{height:211px;}
.post.short .cover{height:172px;}
.note-media{height:365px;max-height:none;}
.sheet{width:100%;max-width:100%;}
.plan-table-wrap{max-width:100%;}
.user-bubble,.assistant-bubble{overflow-wrap:anywhere;}
@media(max-width:450px){
  .preview-toolbar{padding:0 11px;}
  .preview-device-name{font-size:10px;gap:5px;}
  .preview-zoom{gap:1px;}
  .preview-zoom .preview-fit{padding:0 7px;margin-left:4px;}
  .preview-viewport{padding:18px;}
}