/* Responsive device demonstration */
.demo-preview{transition:background .3s ease}
.demo-site{width:100%;max-width:100%;margin:auto;transition:width .4s ease,border-radius .3s ease,padding .3s ease;overflow:hidden}
.device-switch{display:flex;gap:5px;align-items:center}
.device-button{border:1px solid #6d756d;background:transparent;color:#f1f2f1;padding:7px 11px;cursor:pointer;font:700 11px Inter,Arial,sans-serif}
.device-button.active{background:#c7ff5a;border-color:#c7ff5a;color:#0f1113}
.device-button:focus-visible{outline:2px solid #c7ff5a;outline-offset:3px}
.demo-preview[data-device=mobile] .demo-site{width:min(100%,340px);border-radius:24px;border:8px solid #0f1113;min-height:560px}
.demo-preview[data-device=mobile] .demo-hero{display:flex;flex-direction:column;align-items:stretch;gap:15px;padding-top:30px}
.demo-preview[data-device=mobile] .demo-hero h3{font-size:clamp(35px,5vw,53px)}
.demo-preview[data-device=mobile] .demo-art{width:100%;min-height:165px}
.demo-preview[data-device=mobile] .demo-top{gap:6px;flex-wrap:wrap}
.demo-preview[data-device=mobile] .demo-top span{font-size:8px}
.demo-preview[data-device=mobile] .demo-bottom{gap:6px;font-size:8px;flex-wrap:wrap}
@media(max-width:650px){.demo-browser{flex-wrap:wrap;gap:10px}.device-button{padding:7px 8px}.demo-preview[data-device=mobile] .demo-site{min-height:485px}}
@media(prefers-reduced-motion:reduce){.demo-site{transition:none}}