:root{font-family:"Segoe UI",Arial,sans-serif;color:#102d49;background:#edf3f8;font-size:16px;color-scheme:light}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,select,a{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #f58a24;outline-offset:3px}.demo-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 24px;background:#102d49;color:white}.demo-brand{display:flex;align-items:center;gap:12px;font-size:1.5rem;font-weight:850;letter-spacing:.02em;white-space:nowrap}.demo-brand span{font-size:.875rem;letter-spacing:0;font-weight:500;color:#c5e8eb}.demo-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.demo-actions button,.demo-actions a{min-height:44px;display:flex;align-items:center;padding:8px 14px;border:1px solid #53748b;border-radius:9px;background:transparent;color:#fff;font-size:.875rem}.demo-actions #demoGuide{background:#007f83;border-color:#00adaa;font-weight:700}.demo-controls{display:flex;align-items:center;gap:20px;padding:12px 24px;border-bottom:1px solid #cfdee9;background:white}.demo-controls label{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:.875rem;font-weight:700}.demo-controls select{min-height:44px;max-width:320px;min-width:200px;padding:8px 12px;border:1px solid #9fb7c9;border-radius:9px;color:#102d49;background:white}.demo-controls p{font-size:.875rem;line-height:1.5;margin:0;color:#496179;max-width:640px}.demo-safety{position:relative;margin-inline-start:auto;max-width:440px;font-size:.875rem;color:#006b70}.demo-safety summary{cursor:pointer;line-height:1.6;font-weight:650}.demo-safety[open]{z-index:5}.demo-safety[open] p{padding:12px;background:#eaf8f7;border:1px solid #a2d9d4}.demo-safety[open] p+p{border-top:0}.demo-controls:has(.demo-safety[open]){align-items:flex-start}#demoWorkspace{position:relative;flex:1;min-height:0;display:flex}#demoFrame{border:0;width:100%;height:100%;background:#f4f7fa;min-width:0}#demoStatus{position:absolute;z-index:4;inset:0;display:grid;place-content:center;gap:12px;text-align:center;background:#f1f6fa;font-size:1rem;padding:24px}#demoStatus[hidden]{display:none}#demoStatus button{min-height:44px;padding:10px 18px;border:1px solid #007f83;border-radius:10px;background:#007f83;color:white}#demoToast{position:fixed;bottom:20px;inset-inline:16px;max-width:570px;margin:auto;z-index:20;padding:14px 18px;background:#102d49;color:white;border:1px solid #28b8b1;border-radius:12px;box-shadow:0 8px 28px #122e4930;font-size:.875rem;line-height:1.6}#demoToast[hidden]{display:none}@media(max-width:760px){.demo-header{padding:8px 12px;gap:8px;flex-wrap:wrap}.demo-brand{font-size:1.2rem}.demo-brand span{font-size:.875rem}.demo-actions{gap:6px}.demo-actions button,.demo-actions a{padding:8px 10px}.demo-actions a{border:0}.demo-controls{padding:8px 12px;gap:8px;flex-wrap:wrap}.demo-controls label{width:100%;justify-content:space-between}.demo-controls select{flex:1;max-width:none;min-width:0}.demo-controls>p{display:none}.demo-safety{margin:0;max-width:none;width:100%;font-size:.875rem}.demo-safety[open]{max-height:32dvh;overflow:auto}.demo-actions #demoReset{font-size:0;min-width:44px}.demo-actions #demoReset:before{content:'↻';font-size:1.2rem}.demo-header .demo-actions{margin-inline-start:auto}}@media(max-width:390px){.demo-brand span{display:none}.demo-actions a{padding-inline:4px;font-size:.875rem}.demo-actions button{padding-inline:8px}.demo-header{padding-inline:8px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
:root [hidden]{display:none!important}