.overlay-demo {
  --overlay-blue: var(--blue, #075de8);
  --overlay-danger: #c92a2a;
  --overlay-ink: var(--text, #0b1530);
  position: relative;
  width: min(100%, 560px);
  min-width: 0;
  color: var(--overlay-ink);
  font: 12px/1.35 "DM Sans", sans-serif;
}

.overlay-demo *, .overlay-demo *::before, .overlay-demo *::after { box-sizing: border-box; }
.overlay-demo button, .overlay-demo input, .overlay-demo select, .overlay-demo textarea { color: inherit; font: inherit; }
.overlay-demo button, .overlay-demo a { cursor: pointer; }
.overlay-demo button:disabled { cursor: default; opacity: .72; }
.overlay-demo [hidden] { display: none !important; }
.overlay-demo p { margin: 4px 0; color: var(--muted); }
.overlay-demo a { color: var(--overlay-blue); font-weight: 700; text-decoration: none; }
.overlay-demo input, .overlay-demo select, .overlay-demo textarea { width: 100%; min-width: 0; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); padding: 6px 7px; }
.overlay-demo textarea { min-height: 48px; resize: none; }
.overlay-demo label { display: grid; gap: 3px; font-weight: 700; }
.overlay-demo button { border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); padding: 6px 9px; font-weight: 700; }
.overlay-demo .overlay-primary { border-color: var(--overlay-blue); background: var(--overlay-blue); color: #fff; }
.overlay-demo .overlay-danger { border-color: var(--overlay-danger); background: var(--overlay-danger); color: #fff; }
.overlay-demo .overlay-link { border: 0; background: transparent; color: var(--overlay-blue); padding-inline: 0; text-align: left; }

.overlay-stage { position: relative; width: 100%; height: 150px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.overlay-scrim { position: absolute; inset: 0; background: rgba(12, 21, 42, .48); transition: background .18s ease; }
.overlay-scrim.soft { background: rgba(12, 21, 42, .2); }
.overlay-page-lines { display: grid; gap: 10px; padding: 18px; }
.overlay-page-lines i { display: block; height: 8px; border-radius: 99px; background: var(--surface-selected); }
.overlay-page-lines i:nth-child(2) { width: 73%; }.overlay-page-lines i:nth-child(3) { width: 88%; }.overlay-page-lines i:nth-child(4) { width: 58%; }
.overlay-surface { position: absolute; z-index: 2; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 12px 32px rgba(10, 24, 52, .22); }
.overlay-dialog { inset: 10px auto auto 50%; display: grid; width: min(88%, 310px); max-height: 130px; gap: 6px; overflow: auto; padding: 10px; transform: translateX(-50%); }
.overlay-dialog.compact { top: 17px; }
.overlay-dialog header, .overlay-fullscreen header, .overlay-floating header, .overlay-drawer header, .overlay-bottom-sheet header, .overlay-video header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.overlay-dialog footer { display: flex; justify-content: flex-end; gap: 6px; }
.overlay-dialog fieldset { display: grid; gap: 4px; margin: 0; border: 0; padding: 0; }.overlay-dialog legend { margin-bottom: 3px; font-weight: 700; }.overlay-dialog fieldset label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px; font-weight: 600; }.overlay-dialog fieldset label small { grid-column: 2; color: var(--muted); }.overlay-dialog fieldset input { width: auto; }
.overlay-close, .overlay-icon-button { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border: 0 !important; background: transparent !important; padding: 0 !important; font-size: 18px !important; }
.overlay-reopen { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.overlay-alert-icon, .overlay-danger-icon { float: left; display: grid; width: 25px; height: 25px; margin-right: 7px; place-items: center; border-radius: 50%; background: #fff3bf; color: #8a5c00; font-weight: 900; }.overlay-danger-icon { background: #ffe8e8; color: var(--overlay-danger); }

.overlay-steps { display: flex; align-items: center; justify-content: center; }.overlay-steps b { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); font-size: 9px; }.overlay-steps b.active { border-color: var(--overlay-blue); background: var(--overlay-blue); color: #fff; }.overlay-steps b.complete { border-color: #18864b; background: #18864b; color: #fff; }.overlay-steps i { width: 28px; height: 2px; background: var(--border); }
.overlay-fullscreen { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-rows: auto 1fr; background: var(--surface); }.overlay-fullscreen header { border-bottom: 1px solid var(--border); padding: 7px 9px; }.overlay-fullscreen > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; overflow: auto; padding: 9px; }
.overlay-modeless-stage { background: var(--surface-subtle); }.overlay-floating { position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; width: 70%; gap: 5px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); box-shadow: 0 10px 24px rgba(20, 34, 62, .16); padding: 8px; }.overlay-floating > div { display: flex; justify-content: flex-end; gap: 5px; }

.overlay-tip-stage { display: grid; justify-items: center; gap: 7px; padding: 18px; }.overlay-tip-stage > button { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 50%; font-size: 16px; }.overlay-tooltip { position: relative; border-radius: 5px; background: #1e2736; color: #fff; padding: 5px 8px; box-shadow: 0 6px 18px rgba(0,0,0,.2); white-space: nowrap; }.overlay-tooltip::after { position: absolute; bottom: -5px; left: 50%; border: 5px solid transparent; border-top-color: #1e2736; border-bottom: 0; content: ""; transform: translateX(-50%); }.overlay-tip-stage small { color: var(--muted); text-align: center; }
.overlay-definition { position: relative; margin: 0 !important; padding: 42px 12px 24px; text-align: center; }.overlay-definition > button { border: 0; border-bottom: 1px dotted currentColor; border-radius: 0; background: transparent; color: var(--overlay-blue); padding: 0; }.overlay-definition .overlay-tooltip { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); }
.overlay-tip-stage.toggletip { position: relative; display: flex; min-height: 140px; align-items: flex-start; justify-content: center; padding-top: 12px; }.overlay-tip-stage.toggletip > button { width: 28px; height: 28px; }.overlay-tip-stage.toggletip aside { position: absolute; top: 47px; display: grid; width: min(90%, 250px); gap: 2px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); box-shadow: 0 9px 24px rgba(20,34,62,.16); padding: 9px; }.overlay-tip-stage.toggletip aside::before { position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--surface); content: ""; transform: translateX(-50%) rotate(45deg); }

.overlay-anchor { position: relative; display: flex; min-height: 142px; align-items: flex-start; justify-content: center; padding: 9px; }.overlay-trigger { min-width: 92px; }.overlay-menu { position: absolute; z-index: 3; top: 43px; left: 50%; display: grid; width: min(85%, 170px); overflow: visible; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); box-shadow: 0 10px 25px rgba(20,34,62,.18); padding: 4px; transform: translateX(-50%); }.overlay-menu > button { border: 0; background: transparent; padding: 6px 7px; text-align: left; }.overlay-menu > button:hover, .overlay-menu > button.selected { background: var(--blue-soft); color: var(--overlay-blue); }.overlay-anchor.overflow .overlay-trigger { min-width: 34px; font-size: 15px; letter-spacing: 1px; }
.profile-popover { justify-content: flex-start; padding-left: 25%; }.overlay-avatar { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50% !important; background: var(--blue-soft) !important; color: var(--overlay-blue) !important; font-weight: 800; }.profile-popover article, .hover-card-demo article { position: absolute; z-index: 2; top: 50px; left: 50%; width: min(92%, 245px); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 25px rgba(20,34,62,.18); padding: 9px; transform: translateX(-50%); }.profile-popover article header, .hover-card-demo article header { display: flex; align-items: center; gap: 7px; }.profile-popover article header > span, .hover-card-demo article header > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--overlay-blue); font-weight: 800; }.profile-popover article header div, .hover-card-demo article header div { display: grid; }.profile-popover article small, .hover-card-demo article small { color: var(--muted); }.profile-popover article > div { display: flex; gap: 5px; }.profile-popover article button { padding: 4px 6px; }
.hover-card-demo { justify-content: flex-start; padding-left: 18%; }.hover-card-demo > a { margin-top: 6px; }.hover-card-demo article { top: 38px; }
.overlay-context-stage { position: relative; min-height: 142px; padding: 10px; }.overlay-file { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 6px; padding: 7px; }.overlay-file > span { display: grid; height: 28px; place-items: center; border-radius: 4px; background: var(--blue-soft); color: var(--overlay-blue); font-size: 9px; font-weight: 800; }.overlay-file button { padding: 4px 6px; }.overlay-context-stage .overlay-menu { top: 56px; right: 8px; left: auto; width: 145px; transform: none; }
.submenu-demo .overlay-menu { left: 43%; }.overlay-submenu { top: 33px; left: calc(100% + 72px); width: 118px; }.submenu-demo [data-overlay-action="submenu"] { display: flex; justify-content: space-between; }

.overlay-drawer-stage, .overlay-sheet-stage, .overlay-filter-stage { background: var(--surface-subtle); }.overlay-drawer { position: absolute; z-index: 2; inset-block: 0; display: grid; width: min(76%, 250px); align-content: start; gap: 8px; overflow: auto; border-left: 1px solid var(--border); background: var(--surface); box-shadow: -10px 0 25px rgba(20,34,62,.14); padding: 10px; }.overlay-drawer.right { right: 0; }.overlay-drawer.left { left: 0; border-right: 1px solid var(--border); border-left: 0; box-shadow: 10px 0 25px rgba(20,34,62,.14); }.overlay-drawer p { font-size: .9em; }.overlay-drawer nav { display: grid; }.overlay-drawer > a { border-radius: 5px; color: var(--muted); padding: 7px; }.overlay-drawer > a.active { background: var(--blue-soft); color: var(--overlay-blue); }.overlay-drawer dl { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin: 0; }.overlay-drawer dt { color: var(--muted); }.overlay-drawer dd { margin: 0; font-weight: 700; }.overlay-filter-stage .overlay-drawer footer { display: flex; gap: 5px; }.overlay-filter-stage .overlay-drawer header span { border-radius: 99px; background: var(--blue-soft); color: var(--overlay-blue); padding: 2px 5px; font-size: 9px; }
.overlay-bottom-stage, .overlay-share-stage { background: linear-gradient(145deg, #dbe8ff, #f1f5ff); }.overlay-bottom-sheet, .overlay-action-sheet { position: absolute; z-index: 2; inset: auto 0 0; display: grid; max-height: 132px; gap: 5px; overflow: auto; border-radius: 12px 12px 0 0; background: var(--surface); box-shadow: 0 -8px 24px rgba(20,34,62,.16); padding: 8px 10px 10px; }.overlay-handle { justify-self: center; width: 34px; height: 3px; border-radius: 99px; background: var(--border-strong); }.overlay-bottom-sheet > button { text-align: left; }.overlay-action-sheet { background: transparent; box-shadow: none; }.overlay-action-sheet > div { display: grid; overflow: hidden; border-radius: 8px; background: var(--surface); }.overlay-action-sheet > div button { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }.overlay-action-sheet > div button.danger { color: var(--overlay-danger); }.overlay-action-sheet > button { border: 0; background: var(--surface); color: var(--overlay-blue); }
.overlay-share-people, .overlay-share-actions { display: flex; gap: 8px; overflow-x: auto; }.overlay-share-people button, .overlay-share-actions button { display: grid; min-width: 45px; justify-items: center; gap: 2px; border: 0; background: transparent; padding: 0; }.overlay-share-people button { width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--overlay-blue); }.overlay-share-people button span, .overlay-share-actions button span { color: var(--muted); font-size: 9px; }.overlay-share-actions button { border-radius: 6px; background: var(--surface-subtle); padding: 5px; font-size: 16px; }
.overlay-inspector { display: grid; grid-template-columns: 1fr minmax(115px, 42%); height: 150px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }.overlay-canvas { display: grid; place-items: center; background: radial-gradient(circle, var(--border) 1px, transparent 1px); background-size: 10px 10px; }.overlay-canvas span { border: 2px solid var(--overlay-blue); border-radius: 4px; background: var(--overlay-blue); color: #fff; padding: 6px 12px; }.overlay-inspector aside { overflow: auto; border-left: 1px solid var(--border); padding: 7px; }.overlay-inspector aside header { display: grid; margin-bottom: 6px; }.overlay-inspector small { color: var(--muted); }.overlay-inspector details { border-top: 1px solid var(--border); padding-block: 5px; }.overlay-inspector summary { font-weight: 700; }.overlay-inspector details > div { display: flex; gap: 4px; }.overlay-inspector label { font-size: 9px; }.overlay-inspector input { padding: 3px; }

.overlay-lightbox figure, .overlay-gallery figure { position: absolute; z-index: 2; inset: 8px; display: grid; grid-template-columns: 1fr; margin: 0; }.overlay-lightbox figure > button { position: absolute; z-index: 2; top: 2px; right: 2px; display: grid; width: 25px; height: 25px; place-items: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; padding: 0; font-size: 18px; }.overlay-lightbox figure > div, .overlay-gallery figure > div { display: grid; min-height: 98px; place-items: center; border-radius: 6px; background: linear-gradient(135deg, #2375ed, #58c4ef 48%, #f4a261); color: rgba(255,255,255,.86); font: 700 36px "DM Serif Display", serif; }.overlay-lightbox figcaption, .overlay-gallery figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; gap: 6px; border-radius: 0 0 6px 6px; background: linear-gradient(transparent, rgba(0,0,0,.78)); color: white; padding: 18px 7px 6px; }.overlay-lightbox figcaption span, .overlay-gallery figcaption span { font-size: 10px; }
.overlay-gallery figure { grid-template-columns: 28px 1fr 28px; align-items: center; }.overlay-gallery figure > div { grid-column: 1 / -1; grid-row: 1; background: linear-gradient(135deg, #172554, #2563eb 52%, #93c5fd); }.overlay-gallery figure > button { z-index: 2; grid-row: 1; border: 0; background: transparent; color: #fff; padding: 0; font-size: 27px; }.overlay-gallery figure > button:first-child { grid-column: 1; }.overlay-gallery figure > button:nth-of-type(2) { grid-column: 3; }.overlay-gallery figcaption { grid-column: 1 / -1; }
.overlay-video section { position: absolute; z-index: 2; inset: 8px; display: grid; gap: 5px; border-radius: 7px; background: #111827; color: #fff; padding: 8px; }.overlay-video-frame { position: relative; display: grid; min-height: 79px; place-items: center; background: linear-gradient(135deg, #1d4ed8, #0f172a); }.overlay-video-frame button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #111827; padding: 0 0 0 2px; }.overlay-video-frame span { position: absolute; right: 6px; bottom: 4px; font-size: 9px; }.overlay-video-frame i { position: absolute; right: 6px; bottom: 2px; left: 6px; height: 2px; background: rgba(255,255,255,.3); }.overlay-video > section > small { color: #cbd5e1; }
.overlay-command, .overlay-search { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 28px rgba(20,34,62,.14); }.overlay-command header, .overlay-search header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; border-bottom: 1px solid var(--border); padding: 8px; }.overlay-command input, .overlay-search input { border: 0; padding: 2px; outline: 0; }.overlay-command kbd, .overlay-search kbd { border: 1px solid var(--border); border-radius: 4px; background: var(--surface-subtle); color: var(--muted); padding: 2px 4px; font-size: 8px; }.overlay-command > small, .overlay-search [data-overlay-results] > small { display: block; color: var(--muted); padding: 6px 8px 2px; font-size: 8px; font-weight: 800; }.overlay-command [data-overlay-results], .overlay-search [data-overlay-results] { display: grid; padding: 3px 5px 6px; }.overlay-command [data-overlay-results] button, .overlay-search [data-overlay-results] button { display: flex; align-items: center; gap: 7px; border: 0; background: transparent; padding: 5px; text-align: left; }.overlay-command [data-overlay-results] button:first-child { background: var(--blue-soft); color: var(--overlay-blue); }.overlay-command [data-overlay-results] button kbd, .overlay-search [data-overlay-results] button span { margin-left: auto; }
.overlay-search [data-overlay-results] button span { color: var(--muted); font-size: 9px; }
.overlay-spotlight-page, .overlay-tour-page { position: absolute; inset: 0; background: var(--surface); }.overlay-spotlight-page header, .overlay-tour-page header { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); padding: 9px; font-weight: 700; }.overlay-spotlight-page .target { position: relative; z-index: 3; border-color: var(--overlay-blue); background: var(--overlay-blue); color: #fff; }.overlay-spotlight-page > i { display: block; width: 60%; height: 8px; margin: 12px; border-radius: 99px; background: var(--surface-selected); }.overlay-spotlight-mask { position: absolute; z-index: 2; inset: 0; background: rgba(11,21,48,.58); clip-path: polygon(0 0, calc(100% - 82px) 0, calc(100% - 82px) 41px, 100% 41px, 100% 100%, 0 100%); }.overlay-spotlight aside, .overlay-tour aside { position: absolute; z-index: 4; right: 10px; bottom: 8px; display: grid; width: min(86%, 260px); gap: 3px; border-radius: 7px; background: var(--surface); box-shadow: 0 10px 28px rgba(0,0,0,.24); padding: 8px; }.overlay-spotlight aside small, .overlay-tour aside small { color: var(--overlay-blue); font-size: 8px; font-weight: 800; }.overlay-spotlight aside footer, .overlay-tour aside footer { display: flex; justify-content: flex-end; gap: 5px; }
.overlay-tour-page { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: 39px 1fr; }.overlay-tour-page nav { grid-row: 1 / -1; background: #17243b; color: #fff; padding: 10px; }.overlay-tour-page header { grid-column: 2; }.overlay-tour-page main { grid-column: 2; display: grid; gap: 8px; align-content: start; padding: 12px; }.overlay-tour-page main i { height: 22px; border-radius: 5px; background: var(--surface-selected); }.overlay-tour aside { left: 43px; right: auto; bottom: 6px; width: min(78%, 250px); }
.overlay-takeover { display: grid; min-height: 150px; place-items: center; align-content: center; gap: 4px; border-radius: 8px; background: linear-gradient(145deg, #0d2552, #075de8); color: white; padding: 13px; text-align: center; }.overlay-takeover > span { font-size: 22px; }.overlay-takeover > small { color: #bcd5ff; font-weight: 800; }.overlay-takeover p { max-width: 350px; color: #e4edff; }.overlay-takeover > div { display: flex; gap: 6px; }.overlay-takeover > div button:not(.overlay-primary) { border-color: rgba(255,255,255,.45); background: transparent; color: #fff; }.overlay-takeover .overlay-primary { border-color: #fff; background: #fff; color: #075de8; }
.overlay-scrim-demo section { position: absolute; z-index: 2; inset: 50% auto auto 50%; width: min(82%, 280px); border-radius: 7px; background: var(--surface); box-shadow: 0 10px 28px rgba(0,0,0,.2); padding: 10px; transform: translate(-50%, -50%); }

.concept-card-preview .overlay-demo { width: 100%; height: 100%; overflow: hidden; font-size: 9px; }
.concept-card-preview .overlay-stage { height: 146px; }
.concept-card-preview .overlay-dialog { inset-block-start: 6px; width: 94%; max-height: none; gap: 3px; overflow: hidden; padding: 7px; }
.concept-card-preview .overlay-dialog input, .concept-card-preview .overlay-dialog select { padding: 4px 5px; }
.concept-card-preview .overlay-demo button { padding: 4px 6px; }
.concept-card-preview .overlay-dialog p { line-height: 1.25; }
.concept-card-preview .overlay-dialog footer { gap: 3px; }
.concept-card-preview .overlay-fullscreen > div { grid-template-columns: 1fr; }
.concept-card-preview .overlay-fullscreen textarea { display: none; }
.concept-card-preview .overlay-floating { width: 82%; }
.concept-card-preview .profile-popover article, .concept-card-preview .hover-card-demo article { width: 95%; }
.concept-card-preview .overlay-submenu { left: auto; right: -55px; width: 90px; transform: none; }
.concept-card-preview .overlay-drawer { width: 84%; }
.concept-card-preview .overlay-inspector { grid-template-columns: 1fr 105px; height: 146px; }
.concept-card-preview .overlay-lightbox figcaption, .concept-card-preview .overlay-gallery figcaption { display: grid; gap: 0; line-height: 1.15; }
.concept-card-preview .overlay-lightbox figcaption span, .concept-card-preview .overlay-gallery figcaption span { overflow-wrap: anywhere; }
.concept-card-preview .overlay-spotlight aside, .concept-card-preview .overlay-tour aside { width: 90%; }
.concept-card-preview .overlay-takeover { min-height: 146px; }

@media (max-width: 480px) {
  .overlay-demo { font-size: 11px; }
  .overlay-dialog { width: 92%; }
  .overlay-drawer { width: 84%; }
  .overlay-submenu { right: -48px; left: auto; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .overlay-demo *, .overlay-demo *::before, .overlay-demo *::after { scroll-behavior: auto !important; transition: none !important; }
}