/* Shared interface primitives only; generated artwork keeps its own styling. */
.odsg-ui {
  --ui-ink: #161a17; --ui-muted: #5f6862; --ui-border: #dcdfd8;
  --ui-input-border: #87968a; --ui-green: #14772f; --ui-hover: #0e5622;
  --ui-forest: #0a3e19; --ui-sage: #dcede0; --ui-selected: #f0f7f1; --ui-orange: #b8481f;
  --ui-card-radius: 8px; --ui-input-radius: 6px; --ui-action-radius: 999px;
  --ui-control-height: 50px; --ui-control-gap: 8px; --ui-section-gap: 24px;
}
.odsg-ui .odsg-ui-eyebrow { margin: 0 0 12px; color: var(--ui-orange); font: 700 13px/1.5 "ODSG Public Sans",system-ui,sans-serif; letter-spacing: .1em; }
.odsg-ui .odsg-ui-intro { margin: 0 0 var(--ui-section-gap); max-width: 70ch; font-size: 16px; line-height: 1.6; }
.odsg-ui .odsg-ui-preview-title { margin: 0 0 16px; padding: 0; color: var(--ui-ink); font: 700 20px/1.3 "ODSG Archivo",sans-serif; letter-spacing: normal; text-transform: none; }
.odsg-ui .odsg-metadata { color: var(--ui-muted); font-size: 14px; line-height: 1.6; }
.odsg-ui .odsg-segmented { display: flex; min-width: 0; min-height: var(--ui-control-height); gap: 2px; padding: 3px; margin: 0; border: 0; border-radius: var(--ui-input-radius); background: var(--ui-sage); }
.odsg-ui .odsg-segmented label { position: relative; flex: 1; min-width: 0; margin: 0; cursor: pointer; }
.odsg-ui .odsg-segmented input,
.odsg-ui .sg-template > input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; }
.odsg-ui .odsg-segmented label > span { display: flex; align-items: center; justify-content: center; min-height: calc(var(--ui-control-height) - 6px); padding: 8px 4px; border: 1px solid transparent; border-radius: calc(var(--ui-input-radius) - 2px); color: var(--ui-forest); font: 600 14px/1.4 "ODSG Public Sans",system-ui,sans-serif; }
.odsg-ui .odsg-segmented input:checked + span { border-color: var(--ui-green); background: white; color: var(--ui-green); box-shadow: 0 1px 2px #0a3e1920; font-weight: 700; }
.odsg-ui .odsg-segmented label:hover > span { background: var(--ui-selected); }
.odsg-ui .odsg-segmented input:focus-visible + span { outline: 3px solid var(--ui-green); outline-offset: 2px; }
.odsg-ui :is(button,a,input,textarea,select,canvas):focus-visible { outline: 3px solid var(--ui-green); outline-offset: 3px; }
@media (forced-colors: active) {
  .odsg-ui .odsg-segmented input:checked + span { border: 2px solid Highlight; color: Highlight; }
  .odsg-ui :is(.sg-template,.odsg-option) input:checked + span { outline: 2px solid Highlight; }
}