*{box-sizing:border-box}body{margin:0;font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#17253b;color:#eef5ff}.demo-toolbar{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:14px 28px;background:#0d1a2e;border-bottom:1px solid #30445f;min-height:78px}a{color:inherit;text-decoration:none}.demo-brand{display:inline-flex;align-items:center;gap:10px;font-size:23px;font-weight:850;justify-self:start}.demo-brand>span>span{color:#7dbcff}.device-picker{display:flex;gap:6px;border:1px solid #344a68;padding:4px;border-radius:12px}.device-picker button{display:flex;align-items:center;gap:7px;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:#bed0e9;cursor:pointer;font:inherit;font-weight:600}.device-picker button[aria-pressed=true]{background:#c1ddff;color:#0e2c55}.device-picker svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}.buy-template{justify-self:end;display:flex;align-items:center;gap:10px;background:#246be2;color:white;padding:12px 18px;border-radius:8px;font-weight:700}.buy-template svg{width:18px;height:18px}.demo-context{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 28px;background:#13223a;color:#c4d4e9;font-size:12px}.demo-title{max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-context a{text-decoration:underline}.frame-notice{margin:0;padding:8px 28px;background:#1b304c;color:#c4d4e9;font-size:11px;text-align:center}.demo-stage{display:flex;justify-content:center;align-items:flex-start;overflow:auto;min-height:calc(100dvh - 160px);padding:20px}#demo-frame{display:block;flex:none;width:100%;height:calc(100dvh - 200px);min-height:500px;border:0;background:white;border-radius:8px;box-shadow:0 10px 40px #0004}.demo-stage[data-device=phone] #demo-frame{width:390px;height:844px;border-radius:24px;border:8px solid #080f1c}.demo-stage[data-device=tablet] #demo-frame{width:768px;height:1024px;border:8px solid #080f1c;border-radius:18px}.no-demo{padding:30px;max-width:1200px;margin:auto}.no-demo img{max-width:100%}button:focus-visible,a:focus-visible{outline:3px solid #88baff;outline-offset:3px}@media(max-width:650px){.demo-toolbar{padding:12px;grid-template-columns:1fr 1fr;gap:12px}.demo-brand{font-size:18px}.device-picker{grid-row:2;grid-column:1/-1;justify-self:center}.buy-template{padding:10px 12px;font-size:12px}.demo-context{padding:10px 12px;flex-wrap:wrap;gap:8px}.demo-title{max-width:100%;width:100%}.demo-stage{justify-content:flex-start;padding:10px}.demo-stage[data-device=desktop] #demo-frame{width:100%}.frame-notice{padding:8px 12px}}
/* Device sizes are content viewport widths; borders sit outside those widths. */
.demo-stage[data-device=phone] #demo-frame,.demo-stage[data-device=tablet] #demo-frame{box-sizing:content-box}