*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#111827;background:#f3f4f6}#app{display:grid;grid-template-columns:390px 1fr}.panel{height:100vh;overflow:auto;padding:28px;background:#fff;border-right:1px solid #e5e7eb;box-shadow:0 20px 80px #0f172a14;z-index:10}.panel.busy{pointer-events:none;opacity:.82}.eyebrow{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.16em;color:#6b7280;text-transform:uppercase}h1{margin:0;font-size:28px;line-height:1.05}.description{margin:12px 0 0;color:#6b7280;line-height:1.5}.group{margin-top:28px}h2{margin:0 0 12px;font-size:15px}.layout-list{display:grid;gap:12px}.layout-card{width:100%;padding:14px;border:1px solid #e5e7eb;border-radius:18px;background:#f9fafb;color:#111827;text-align:left;cursor:pointer;transition:.18s ease}.layout-card:hover{transform:translateY(-1px);border-color:#9ca3af}.layout-card.active{background:#111827;border-color:#111827;color:#fff}.layout-card strong{display:block;font-size:15px}.layout-card span{display:block;margin-top:6px;color:inherit;opacity:.72;font-size:13px;line-height:1.35}.layout-card em{display:inline-block;margin-top:10px;padding:5px 8px;border-radius:999px;background:#2563eb1a;color:#2563eb;font-style:normal;font-size:12px;font-weight:800}.layout-card.active em{background:#ffffff24;color:#fff}.fabric,.primary{display:block;width:100%;margin-bottom:10px;padding:13px 14px;border:1px solid #e5e7eb;border-radius:14px;background:#f9fafb;color:#111827;font-weight:700;text-align:left;cursor:pointer;transition:.18s ease}.fabric:hover{transform:translateY(-1px);border-color:#9ca3af}.fabric.active{background:#111827;color:#fff;border-color:#111827}#fabricList{display:grid;grid-template-columns:1fr;gap:10px}#fabricList .fabric{margin-bottom:0}.fabric-swatch{display:inline-block;width:18px;height:18px;margin-right:10px;vertical-align:-4px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background-size:cover;background-position:center}.summary{margin-top:28px}pre{min-height:170px;margin:0 0 12px;padding:14px;overflow:auto;white-space:pre-wrap;font-size:12px;line-height:1.45;border-radius:14px;background:#f3f4f6;color:#374151}.primary{text-align:center;background:#2563eb;border-color:#2563eb;color:#fff}.viewer-wrap{position:relative;height:100vh}.viewer-wrap.busy #viewer{filter:blur(3px);pointer-events:none}#viewer{width:100%;height:100%}.hint{position:absolute;left:24px;bottom:24px;max-width:min(680px,calc(100% - 48px));padding:12px 16px;border-radius:999px;background:#ffffffe0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#374151;font-size:14px;box-shadow:0 10px 40px #0f172a1a}.toolbar{position:absolute;top:22px;right:22px;z-index:20}.toolbar button{padding:10px 14px;border:0;border-radius:999px;background:#111827db;color:#fff;font-weight:800;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.feedback-pill{position:absolute;top:72px;right:22px;z-index:20;display:none;padding:10px 14px;border-radius:999px;background:#111827d6;color:#fff;font-size:14px;font-weight:700;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.feedback-pill.visible{display:block}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;z-index:999;background:#f3f4f6b8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.loading-overlay.visible{display:flex}.loader-card{min-width:260px;max-width:360px;padding:24px;border-radius:24px;background:#fffffff0;box-shadow:0 24px 90px #0f172a2e;text-align:center;border:1px solid rgba(229,231,235,.9)}.loader-card strong{display:block;margin-top:14px;font-size:16px;color:#111827}.loader-card span{display:block;margin-top:6px;color:#6b7280;font-size:14px;line-height:1.4}.spinner{width:42px;height:42px;margin:0 auto;border-radius:999px;border:4px solid #e5e7eb;border-top-color:#111827;animation:spin .8s linear infinite}button:disabled{opacity:.55;cursor:wait}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 980px){#app{grid-template-columns:1fr;grid-template-rows:auto 1fr}.panel{height:auto;max-height:48vh;border-right:none;border-bottom:1px solid #e5e7eb}.viewer-wrap{height:52vh}.hint{border-radius:18px}}.config-summary-hidden{display:none!important}