.UseCaseMockFrame[data-v-7803a811]{--mockAccent: var(--color-accent);--mock-canvas-width: 48rem;--mock-canvas-height: 33rem;--mock-frame-aspect-ratio: 16 / 11;container:use-case-mock / inline-size;position:relative;width:100%;aspect-ratio:var(--mock-frame-aspect-ratio);margin:0;overflow:hidden;border-radius:var(--border-radius-xlarge);background:var(--white);box-shadow:0 var(--spacing-5) var(--spacing-9) color-mix(in srgb,var(--mockAccent) 18%,transparent)}.UseCaseMockFrame--blue[data-v-7803a811]{--mockAccent: var(--color-blue)}.UseCaseMockFrame--magenta[data-v-7803a811]{--mockAccent: var(--color-decorative-magenta)}.UseCaseMockFrame--orange[data-v-7803a811]{--mockAccent: var(--color-orange)}.UseCaseMockFrame__stage[data-v-7803a811]{position:absolute;top:50%;left:50%;width:var(--mock-canvas-width);height:var(--mock-canvas-height);transform:translate(-50%,-50%) scale(var(--stage-scale));transform-origin:center}.UseCaseMockFrame--fitContent[data-v-7803a811]{aspect-ratio:auto}.UseCaseMockFrame--fitContent .UseCaseMockFrame__stage[data-v-7803a811]{position:relative;top:auto;left:auto;width:100%;height:auto;transform:none}.UseCaseMockFrame__stage[data-v-7803a811] .browser-frame{border:0;box-shadow:none}.UseCaseMockFrame--fitContent .UseCaseMockFrame__stage[data-v-7803a811] .browser-frame{height:auto}.UseCaseMockFrame--fitContent .UseCaseMockFrame__stage[data-v-7803a811] .browser-frame__body{flex:none;overflow:visible}.UseCaseMockFrame__canvas[data-v-7803a811]{position:absolute;inset:0;box-sizing:border-box;padding:var(--spacing-8);background:linear-gradient(color-mix(in srgb,var(--mockAccent) 5%,var(--white)),var(--color-neutral-10))}.UseCaseMockFrame--fitContent .UseCaseMockFrame__canvas[data-v-7803a811]{position:relative;inset:auto}.UseCaseMockFrame--flush .UseCaseMockFrame__canvas[data-v-7803a811]{padding:0}.UseCaseMockFrame__content[data-v-7803a811]{height:100%;min-width:0}.UseCaseMockFrame--fitContent .UseCaseMockFrame__content[data-v-7803a811]{height:auto}