.status-indicator{align-items:center;gap:var(--cc-space-2);border:1px solid var(--cc-line);background:var(--cc-surface-soft);min-height:28px;color:var(--cc-muted);white-space:nowrap;border-radius:999px;padding:4px 9px;font-size:.72rem;font-weight:700;line-height:1;display:inline-flex}.status-indicator__mark{width:16px;height:16px;font-family:var(--cc-font-mono);border:1px solid;border-radius:50%;flex:none;place-items:center;font-size:.58rem;font-weight:800;display:inline-grid}.status-indicator>.status-indicator__mark{background:0 0;border-radius:50%;width:16px;height:16px}.status-indicator>.status-indicator__label,.status-indicator>.status-indicator__state,.status-indicator>.status-indicator__detail{background:0 0;border-radius:0;width:auto;height:auto}.status-indicator__label{color:var(--cc-ink)}.status-indicator__detail:before{content:"·";margin-right:var(--cc-space-2);color:var(--cc-quiet)}.status-indicator[data-state=connected]{border-color:color-mix(in srgb, var(--cc-display) 34%, var(--cc-line));color:var(--cc-display)}.status-indicator[data-state=connecting]{border-color:color-mix(in srgb, var(--cc-accent) 32%, var(--cc-line));color:var(--cc-accent)}.status-indicator[data-state=warning]{border-color:color-mix(in srgb, var(--cc-warning) 38%, var(--cc-line));background:var(--cc-warning-soft);color:var(--cc-warning)}.status-indicator[data-state=error]{border-color:color-mix(in srgb, var(--cc-danger) 38%, var(--cc-line));background:var(--cc-danger-soft);color:var(--cc-danger)}.status-indicator[data-state=demo]{color:var(--cc-accent);border-style:dashed}.status-indicator[data-state=connecting] .status-indicator__mark{animation:status-indicator-pulse var(--cc-motion-standard) var(--cc-ease) 2}@keyframes status-indicator-pulse{50%{opacity:.45}}@media (width<=600px){.status-indicator{min-height:26px;padding-inline:7px;font-size:.68rem}}.style-editor{background:0 0;border:0;grid-template-columns:minmax(0,1fr);min-width:0;padding:0;display:grid;overflow:visible}.style-editor__section{border-bottom:1px solid var(--cc-line);min-width:0;max-width:100%}.style-editor__section>summary{cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;min-height:52px;list-style:none;display:flex}.style-editor__section>summary::-webkit-details-marker{display:none}.style-editor__section>summary>span:first-child{gap:.15rem;display:grid}.style-editor__section>summary strong{color:var(--cc-ink);font-size:.82rem}.style-editor__section>summary small{color:var(--cc-quiet);font-size:.67rem}.style-editor__chevron{border-right:1.5px solid var(--cc-quiet);border-bottom:1.5px solid var(--cc-quiet);width:8px;height:8px;transition:transform var(--cc-motion-fast) var(--cc-ease);flex:none;transform:rotate(45deg)}.style-editor__section[open] .style-editor__chevron{transform:rotate(225deg)}.style-editor__section-body{gap:1rem;min-width:0;padding:.25rem 0 1.2rem;display:grid}.style-position-field{grid-template-columns:minmax(90px,.4fr) minmax(0,.6fr);align-items:center;gap:1rem;display:grid}.style-position-field>span,.style-select>span{color:var(--cc-muted);font-size:.72rem;font-weight:750}.style-position-picker{width:min(100%,170px);background:var(--cc-surface-soft);border:0;border-radius:9px;grid-template-columns:repeat(3,1fr);justify-self:end;gap:3px;min-inline-size:0;margin:0;padding:5px;display:grid}.style-position-picker button{cursor:pointer;background:0 0;border:0;border-radius:5px;place-items:center;min-height:30px;display:grid}.style-position-picker button:hover:not(:disabled){background:var(--cc-surface)}.style-position-picker button[data-selected=true]{background:var(--cc-accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cc-accent) 28%, transparent)}.style-position-picker button>span{background:var(--cc-line-strong);border-radius:50%;width:5px;height:5px}.style-position-picker button[data-selected=true]>span{background:var(--cc-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cc-accent) 16%, transparent)}.style-editor__range-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.4rem;display:grid}.style-range{gap:.45rem;min-width:0;display:grid}.style-range__header{min-width:0;color:var(--cc-muted);justify-content:space-between;align-items:center;gap:.7rem;font-size:.7rem;font-weight:700;display:flex}.style-range__value{color:var(--cc-quiet);flex:none;align-items:baseline;gap:.2rem;font-size:.64rem;display:inline-flex}.style-range__value input{border:1px solid var(--cc-line);border-radius:var(--cc-radius-sm);background:var(--cc-surface-soft);width:58px;color:var(--cc-ink);font-family:var(--cc-font-mono);text-align:right;padding:.25rem .3rem;font-size:.68rem}.style-range>input[type=range]{width:100%;accent-color:var(--cc-accent)}.style-editor__select-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.style-select{grid-template-columns:minmax(100px,.45fr) minmax(150px,.55fr);align-items:center;gap:1rem;display:grid}.style-select select{border:1px solid var(--cc-line);background:var(--cc-surface-soft);width:100%;min-height:38px;color:var(--cc-ink);border-radius:7px;padding:.45rem .6rem;font-size:.72rem}.style-editor__color-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;display:grid}.color-field{gap:.4rem;min-width:0;display:grid}.color-field>span{color:var(--cc-muted);font-size:.68rem;font-weight:700}.color-field__control{grid-template-columns:36px minmax(0,1fr);gap:.4rem;min-width:0;display:grid}.color-field__swatch{border:1px solid var(--cc-line);background:var(--cc-surface-soft);cursor:pointer;border-radius:7px;place-items:center;min-height:36px;padding:4px;display:grid}.color-field__swatch>span{background:var(--swatch-color);border-radius:4px;width:100%;height:100%}.color-field__hex{border:1px solid var(--cc-line);background:var(--cc-surface-soft);width:100%;min-width:0;color:var(--cc-ink);font-family:var(--cc-font-mono);text-transform:uppercase;border-radius:7px;padding:.4rem .5rem;font-size:.68rem}.color-picker-popover{border:1px solid var(--cc-line);background:var(--cc-surface);width:min(360px,100vw - 32px);color:var(--cc-ink);border-radius:12px;padding:0;box-shadow:0 24px 80px #00000047}.color-picker-popover::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#050a0c7a}.color-picker-popover__surface{gap:1rem;padding:1rem;display:grid}.color-picker-popover__header{justify-content:space-between;align-items:center;gap:1rem;display:flex}.color-picker-popover__header span{color:var(--cc-quiet);font-family:var(--cc-font-mono);font-size:.7rem}.color-picker-popover__input{border-radius:var(--cc-radius-md);background:0 0;border:0;width:100%;height:120px;padding:0}.color-picker-popover__hex{gap:.35rem;display:grid}.color-picker-popover__hex span{color:var(--cc-quiet);font-size:.66rem;font-weight:800}.color-picker-popover__hex input{border:1px solid var(--cc-line);background:var(--cc-surface-soft);width:100%;color:var(--cc-ink);font-family:var(--cc-font-mono);border-radius:7px;padding:.65rem}.color-picker-popover__actions{justify-content:flex-end;gap:.55rem;display:flex}.style-editor__toggles{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;display:grid}.style-toggle{border:1px solid var(--cc-line);cursor:pointer;border-radius:9px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.7rem;min-width:0;padding:.7rem;display:grid}.style-toggle>span:first-child{gap:.15rem;display:grid}.style-toggle strong{color:var(--cc-ink);font-size:.72rem}.style-toggle small{color:var(--cc-quiet);font-size:.62rem}.style-toggle input{opacity:0;pointer-events:none;position:absolute}.style-toggle__track{background:var(--cc-line-strong);width:38px;height:22px;transition:background-color var(--cc-motion-fast) var(--cc-ease);border-radius:999px;display:block;position:relative}.style-toggle__track>span{width:16px;height:16px;transition:transform var(--cc-motion-fast) var(--cc-ease);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 4px #00000038}.style-toggle input:checked+.style-toggle__track{background:var(--cc-accent)}.style-toggle input:checked+.style-toggle__track>span{transform:translate(16px)}.style-toggle:has(input:focus-visible){outline:3px solid var(--cc-focus);outline-offset:2px}.style-editor__reset{justify-self:start;margin-top:.85rem}@media (width<=1250px){.style-editor__range-grid{grid-template-columns:1fr}.style-editor__color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=600px){.style-position-field,.style-select{grid-template-columns:1fr;gap:.5rem}.style-position-picker{justify-self:stretch;width:100%;max-width:none}.style-editor__color-grid,.style-editor__toggles,.style-editor__select-grid{grid-template-columns:1fr}.color-picker-popover__actions{flex-direction:column-reverse}.color-picker-popover__actions .button{width:100%}}