.breakpoint-app{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 10px 28px #14213d0d}.breakpoint-app>header{display:block;min-height:auto;padding:22px 24px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#f8fbff,#fff)}.breakpoint-app>header strong,.breakpoint-app>header small{display:block}.breakpoint-app>header strong{font-size:20px}.breakpoint-app>header small{margin-top:4px;color:var(--muted)}.breakpoint-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:24px}.breakpoint-form label{display:block;margin-bottom:7px;font-size:13px;font-weight:800}.breakpoint-form input,.breakpoint-form select{width:100%;height:43px;border:1px solid #bdcadb;border-radius:8px;padding:9px 11px;background:#fff;font:15px Arial,sans-serif}.breakpoint-actions{display:flex;gap:10px;padding:0 24px 24px}.breakpoint-results,.breakpoint-code{border-top:1px solid var(--line)}.breakpoint-results>header,.breakpoint-code>header{display:flex;min-height:auto;align-items:center;justify-content:space-between;padding:15px 24px;background:#fbfdff}.breakpoint-results>header strong,.breakpoint-code>header strong{font-size:16px}.breakpoint-results>header span{font-size:13px;color:var(--muted)}.breakpoint-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:20px 24px}.breakpoint-card{padding:14px;border:1px solid #dbe5f2;border-radius:10px;background:linear-gradient(145deg,#fff,#f6f9ff)}.breakpoint-card span,.breakpoint-card strong,.breakpoint-card small{display:block}.breakpoint-card span{font-size:12px;color:var(--muted);font-weight:700}.breakpoint-card strong{margin:3px 0;color:var(--brand);font:800 22px ui-monospace,Consolas,monospace}.breakpoint-card small{font-size:11px;color:var(--muted)}.breakpoint-code pre{overflow:auto;margin:0;padding:18px 24px;background:#172235;color:#dce9ff;font:13px/1.6 ui-monospace,Consolas,monospace;white-space:pre-wrap}.breakpoint-devices{margin:0;padding:17px 24px;color:var(--muted);font-size:13px}.breakpoint-devices strong{color:var(--ink)}@media(max-width:780px){.breakpoint-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:540px){.breakpoint-form{grid-template-columns:1fr}.breakpoint-actions{flex-wrap:wrap}.breakpoint-cards{grid-template-columns:1fr}}