/* Live page viewport examples: one source per purpose at three actual CSS widths. */
.responsive-toolbar{width:calc((100% - 32px)*.75);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:16px}
.responsive-devices{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:0}.responsive-devices .btn{color:var(--secondary)}.responsive-devices .btn[aria-pressed=true]{color:var(--text);background:var(--hover);box-shadow:inset 0 0 0 1px var(--border)}.responsive-devices span{font-size:13px;color:var(--muted)}

.responsive-layout{display:grid;grid-template-columns:minmax(0,9fr) minmax(190px,3fr);gap:32px;align-items:start}.responsive-preview{min-width:0}.responsive-preview-bar{width:calc((100% - 32px)*.75);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;line-height:20px;color:var(--muted);padding-bottom:12px}.responsive-canvas{border:1px solid var(--divider);background:var(--surface);padding:16px;min-width:0;overflow:hidden;border-radius:24px}.responsive-frame-wrap{position:relative;margin-inline:auto;width:100%;height:540px;overflow:hidden;border-radius:8px;background:var(--page)}#responsive-frame{display:block;border:0;transform-origin:top left;background:var(--page);max-width:none}.responsive-preview>.note{margin-top:16px;max-width:78ch}.responsive-notes{padding-top:0}.responsive-notes h4{font-family:Manrope,Inter,Arial,sans-serif;font-size:25px;line-height:32px;margin:0 0 24px}.responsive-notes ul{list-style:none;padding:0;margin:0;color:var(--secondary)}.responsive-notes li+li{margin-top:16px}
@media(max-width:1023px){.responsive-toolbar,.responsive-preview-bar{width:100%}.responsive-layout{grid-template-columns:minmax(0,1fr)}.responsive-notes{padding-top:0}.responsive-notes ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0;list-style:none}.responsive-notes li+li{margin-top:0}}
@media(max-width:719px){.responsive-toolbar{display:flex;gap:16px}.responsive-devices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-top:0;gap:4px}.responsive-devices .btn{flex-direction:column;gap:0;padding:8px 4px;min-width:0}.responsive-canvas{padding:8px;border-radius:16px}.responsive-notes ul{display:block}.responsive-notes li+li{margin-top:16px}.responsive-notes h4{font-size:20px;line-height:28px;margin-bottom:16px}}