:root { color-scheme: dark; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif !important; }
canvas { display: block; }
.hs-demo-panel, .hs-demo-panel * { box-sizing: border-box; }
.hs-demo-panel { position: fixed; top: 16px; left: 16px; z-index: 200; width: 360px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); color: #e9f0f5; background: #121b21ed; border: 1px solid #ffffff24; border-radius: 8px; box-shadow: 0 18px 48px #0006; backdrop-filter: blur(18px); overflow: hidden; font-size: 13px; line-height: 1.5; }
.hs-demo-panel span { width: auto; float: none; text-align: left; }
.hs-demo-panel button, .hs-demo-panel input, .hs-demo-panel select { font: inherit; }
.hs-demo-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px; border-bottom: 1px solid #ffffff1a; }
.hs-demo-header h1 { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 5px 0 0; }
.hs-demo-eyebrow { margin: 0; color: #8fd6c8; font-size: 9px; font-weight: 750; letter-spacing: .11em; }
.hs-demo-ghost, .hs-demo-tab, .hs-demo-button { cursor: pointer; color: #dbe8ef; background: #ffffff10; border: 1px solid #ffffff24; border-radius: 8px; min-height: 36px; padding: 7px 12px; }
.hs-demo-ghost { flex-shrink: 0; color: #b7c5cc; font-size: 12px !important; }
.hs-demo-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 12px; background: #ffffff06; }
.hs-demo-tab { font-weight: 700 !important; }
.hs-demo-tab[aria-selected=true] { color: #071015; background: #8fd6c8; border-color: #8fd6c8; }
.hs-demo-section { padding: 8px 16px 16px; max-height: calc(100dvh - 218px); overflow-y: auto; scrollbar-color: #ffffff50 transparent; }
.hs-demo-section[hidden], #hs-demo-content[hidden] { display: none; }
.hs-demo-fields { display: grid; gap: 15px; padding: 0; margin: 0; border: 0; min-width: 0; }
.hs-demo-fields:disabled { opacity: .45; }
.hs-demo-control { display: grid; gap: 6px; }
.hs-demo-control label, .hs-demo-toggle-row { color: #b7c5cc; font-size: 12px; font-weight: 650; }
.hs-demo-value { display: grid; grid-template-columns: minmax(0, 1fr) 82px; align-items: center; gap: 12px; }
.hs-demo-range { width: 100%; margin: 0; accent-color: #8fd6c8; cursor: pointer; min-height: 32px; }
.hs-demo-input { width: 100%; min-width: 0; min-height: 36px; padding: 5px 10px; border: 1px solid #ffffff26; border-radius: 8px; background: #03080c75; color: #f4f8fa; }
.hs-demo-number { text-align: right; padding-right: 5px; }
.hs-demo-button { width: 100%; font-weight: 700 !important; }
.hs-demo-primary { color: #071015; background: #f3c969; border-color: #f3c969; }
.hs-demo-button:hover, .hs-demo-ghost:hover { background: #ffffff24; }
.hs-demo-primary:hover { background: #ffe08a; }
.hs-demo-panel :focus-visible { outline: 2px solid #8fd6c8; outline-offset: 3px; }
.hs-demo-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; cursor: pointer; }
.hs-demo-toggle { appearance: none; position: relative; width: 46px; height: 26px; flex-shrink: 0; background: #ffffff1f; border: 1px solid #ffffff26; border-radius: 999px; cursor: pointer; margin: 0; }
.hs-demo-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #dfe8ed; transition: transform .16s; }
.hs-demo-toggle:checked { background: #8fd6c8; }
.hs-demo-toggle:checked::after { transform: translateX(20px); background: #071015; }
.hs-demo-color { width: 60px; height: 34px; padding: 3px; background: #03080c75; border: 1px solid #ffffff26; border-radius: 8px; cursor: pointer; }
.hs-demo-status { margin: 0 0 14px; color: #f3c969; font-size: 11px; }
.hs-demo-status.is-ready { color: #8fd6c8; }
.hs-demo-hint { font-size: 11px; color: #a8bac4; margin: 16px 0 0; }
.hs-demo-footer { margin: 0; padding: 10px 16px; border-top: 1px solid #ffffff1a; font-size: 10px; color: #a8bac4; }
.hs-demo-section h2 { margin: 12px 0 8px; font-size: 15px; }
.hs-demo-section p { line-height: 1.6; }
.hs-demo-notice { padding: 12px; background: #8fd6c80c; border: 1px solid #8fd6c830; border-radius: 8px; }
.hs-demo-link { display: block; margin: 12px 0; color: #8fd6c8; text-decoration: none; font-weight: 650; }
.hs-demo-link:hover { text-decoration: underline; }
.hs-demo-panel.is-collapsed { width: auto; }
.is-collapsed .hs-demo-eyebrow { display: none; }
.is-collapsed .hs-demo-header h1 { font-size: 14px; margin: 0; }
.is-collapsed .hs-demo-header { padding: 10px 12px; border: 0; }
.hs-viewer-hint { position: fixed; bottom: 12px; right: 20px; z-index: 50; padding: 8px 12px; color: #dbe8ef; background: #121b21c9; border: 1px solid #ffffff1a; border-radius: 8px; font-size: 11px; pointer-events: none; }
.hs-demo-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#info { pointer-events: none; font-family: inherit; }
@media (max-width: 720px) {
  .hs-demo-panel { top: 10px; left: 10px; width: calc(100vw - 20px); max-width: none; max-height: 72dvh; }
  .hs-demo-section { max-height: calc(72dvh - 188px); }
  .hs-demo-header { padding: 12px; }
  .hs-demo-header h1 { font-size: 17px; }
  .hs-demo-panel.is-collapsed { max-width: calc(100vw - 20px); }
  .hs-viewer-hint { bottom: 8px; right: 10px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .hs-demo-toggle::after { transition: none; } }