.mock{--frame:#1c1b18;--frame-line:#2e2c28;background:var(--frame);isolation:isolate;position:relative;box-shadow:inset 0 1px #ffffff0f,0 30px 60px -20px #16140f59,0 12px 24px -12px #16140f40}.mock-browser{border-radius:14px;padding:0 6px 6px}.mock-browser-bar{align-items:center;gap:14px;height:34px;padding:0 8px;display:flex}.mock-dots{gap:6px;display:inline-flex}.mock-dots i{background:#3b3934;border-radius:50%;width:10px;height:10px}.mock-dots i:first-child{background:#e0443e}.mock-url{color:#a7a196;min-width:0;font:500 11px/1.3 var(--font-mono);text-align:center;text-overflow:ellipsis;white-space:nowrap;background:#2a2925;border-radius:999px;flex:0 46%;margin:0 auto;padding:4px 12px;overflow:hidden}.mock-browser .mock-viewport{border-radius:9px}.mock-phone{border-radius:13.5% / calc(13.5% / (.941 * var(--h) / var(--w) + .059));max-width:340px}.mock-phone .mock-viewport{border-radius:11.25% / calc(11.25% * var(--w) / var(--h));margin:2.95%}.mock-phone-notch{z-index:2;aspect-ratio:95/22;background:#0b0b0a;border-radius:999px;width:28%;margin-top:5.9%;position:absolute;top:0;left:50%;transform:translate(-50%)}.mock-viewport{aspect-ratio:var(--w) / var(--h);background:#fff;position:relative;overflow:hidden;container-type:inline-size}.mock-canvas{width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);transform-origin:0 0;transform:scale(var(--scale,tan(atan2(100cqw, calc(var(--w) * 1px)))));pointer-events:none;-webkit-user-select:none;user-select:none;text-align:left;letter-spacing:normal;font-family:system-ui,sans-serif;line-height:normal;position:absolute;top:0;left:0;overflow:hidden}.mock-canvas :where(h1,h2,h3,h4,h5,h6,p,a,button,input,select,textarea){all:revert}.mock-canvas :where(img,svg){max-width:none;display:inline}.mock-canvas *,.mock-canvas :before,.mock-canvas :after{box-sizing:border-box}.mock-illustration{width:100%}.mock-illustration svg{width:100%;height:auto;display:block}