:root{color-scheme:light;--text-primary:#172337;--text-secondary:#495a70;--text-muted:#65758a;--bg-primary:#f2f5f9;--bg-secondary:#eaf0f6;--bg-card:#fff;--bg-elevated:#fff;--border-medium:#d9e1eb;--border:#d9e1eb;--amber:#bf651a;--amber-light:#e9902820;--amber-border:#e9902860;--green:#20a764;--green-light:#20a76420;--green-border:#20a76460;--red:#df4444;--red-light:#df444420;--red-border:#df444460;--blue:#3687d4;--blue-light:#3687d420;--purple:#8b5cf6;--overlay-scrim:#0008}html[data-theme=dark]{color-scheme:dark;--text-primary:#edf1f8;--text-secondary:#bcc7d5;--text-muted:#97a6bb;--bg-primary:#111823;--bg-secondary:#182130;--bg-card:#1c2635;--bg-elevated:#253348;--border-medium:#364458;--border:#364458;--amber:#f3ad50}*{box-sizing:border-box}body{margin:0;padding:18px;background:var(--bg-primary);color:var(--text-primary);font:14px/1.5 system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ed875d;outline-offset:3px}input:not([type=checkbox]):not([type=color]):not([type=range]),select,textarea{width:100%;min-height:40px;padding:8px 10px;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border);border-radius:7px}input[type=range]{width:100%;accent-color:var(--amber)}input[type=checkbox]{width:18px;height:18px;accent-color:var(--amber)}.demo-controls{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:16px}.demo-controls>span{font-size:11px;letter-spacing:.08em;font-weight:700}.demo-controls>div{display:flex;flex-wrap:wrap;gap:6px}.demo-controls button,.sdk-pills button{border:1px solid var(--border);border-radius:6px;padding:8px 10px;background:var(--bg-card);color:var(--text-primary);font-size:12px}.demo-controls button[aria-pressed=true],.sdk-pills button[aria-pressed=true]{border-color:var(--amber);background:var(--amber-light)}.demo-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);gap:24px;align-items:start}.card-column{position:sticky;top:14px;min-width:0}.card-stage{max-width:100%;margin:auto;min-width:0}.card-stage.phone{max-width:320px}.caption{color:var(--text-muted);font-size:12px;margin-top:18px}.settings-pane{min-width:0;border-left:1px solid var(--border);padding-left:22px}.settings-pane>h2{font-size:18px;margin:0 0 4px}.settings-pane>p{font-size:12px;color:var(--text-muted);margin:0 0 22px}.sdk-section{padding:12px 0;border-top:1px solid var(--border)}.sdk-section summary{font-size:14px;font-weight:700;cursor:pointer;min-height:36px}.sdk-section>p{font-size:12px;color:var(--text-secondary)}.sdk-field{margin:12px 0}.sdk-field>label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}.sdk-field small{display:block;font-size:12px;line-height:1.55;margin-top:5px;color:var(--text-secondary)}.sdk-pills,.sdk-colors{display:flex;gap:6px;flex-wrap:wrap}.sdk-colors button{width:24px;height:24px;border-radius:50%;border:2px solid var(--bg-card)}.sdk-colors input{width:28px;height:26px;padding:0;border:0;background:transparent}.sdk-modal{position:fixed;inset:0;z-index:9999;background:#0008;padding:28px;overflow:auto}.sdk-modal>div{max-width:500px;margin:auto;padding:20px;border-radius:12px;background:var(--bg-card)}.sdk-modal button{display:block;margin:8px 0;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-primary);color:var(--text-primary);width:100%;text-align:left}.sdk-notice,.notice{font-size:12px;color:var(--text-secondary);border-left:2px solid var(--amber);padding:10px}.notice button{color:var(--text-primary);border:0;background:none;text-decoration:underline}iframe{max-width:100%}@media (max-width:750px){.demo-grid{grid-template-columns:1fr}.card-column{position:static}.settings-pane{padding:22px 0 0;border-left:0;border-top:1px solid var(--border)}.demo-controls{align-items:flex-start}.demo-controls>div{justify-content:flex-end}.demo-controls>span{max-width:75px}.card-stage{max-width:550px}body{padding:14px}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.settings-pane{max-height:680px;overflow:auto;padding-right:10px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.example-presets{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-2px 0 22px}.example-presets span{font-size:12px;color:var(--text-muted);margin-right:4px}.example-presets button{background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);border-radius:7px;padding:8px 12px;font-size:12px}@media (max-width:750px){.settings-pane{max-height:460px}}