body{color:#222;background:#f5f7fa;margin:0;font-family:system-ui,Arial,sans-serif}main{box-sizing:border-box;background:#fff;border-radius:12px;max-width:900px;margin:0 auto;padding:24px;box-shadow:0 2px 8px #0000000a}h1,h2,h3{color:#005fcc}button:focus{outline-offset:2px;outline:2px solid #005fcc}@media (width<=600px){main{max-width:100%;padding:8px}ul{flex-direction:column;gap:.5rem}[role=region]{min-height:200px;padding:8px}}.template-demo .demo-grid{grid-template-columns:220px 1fr;gap:16px;display:grid}.template-demo .sidebar{background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:12px}.chip-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.chip{cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:999px;align-items:center;gap:6px;padding:8px 10px;font-size:14px;display:inline-flex}.chip--sm{padding:6px 8px;font-size:13px}.chip--active{background:#e6f0ff;border:2px solid #0a66c2}.chip:focus{outline-offset:2px;outline:2px solid #005fcc}.preview-area{flex-direction:column;gap:12px;display:flex}.controls{background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:12px}.controls-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.label{color:#1f2937;min-width:140px}.slider{flex:1}.number{border:1px solid #cbd5e1;border-radius:6px;width:96px;padding:6px 8px}.muted{color:#475569;margin:6px 0 0}.preview-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.preview-card__header{background:#f8fafc;border-bottom:1px solid #e5e7eb;padding:8px 12px}.preview-card__header h3{color:#0f172a;margin:0;font-size:1.05rem}.preview-card__body{background:#fafafa;padding:12px}.preview-frame-container{resize:horizontal;background:#fff;border:1px solid #e5e7eb;min-width:320px;max-width:1200px;margin:0 auto;overflow:auto}.preview-iframe{background:#fff;border:0;width:100%;display:block}.sr-only{width:1px;height:1px;position:absolute;left:-9999px;overflow:hidden}@media (width<=900px){.template-demo .demo-grid{grid-template-columns:1fr}.template-demo .sidebar{order:2}.template-demo .preview-area{order:1}}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}
