.demo-scene { --demo-bg: #f6f7f8; --demo-paper: #fff; --demo-ink: #283336; --demo-muted: #606d73; --demo-line: #e1e6e7; --demo-accent: #526eae; --demo-tint: #eef1fa; --demo-shadow: 0 12px 30px #24314512; position: relative; width: 100%; height: 100%; min-height: 176px; padding: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; overflow: hidden; background: var(--demo-bg); color: var(--demo-ink); font-family: var(--font, Inter, ui-sans-serif, system-ui, sans-serif); font-size: 11px; line-height: 1.45; text-align: left; isolation: isolate; box-sizing: border-box; }
[data-theme="dark"] .demo-scene { --demo-bg: #222a2d; --demo-paper: #30393d; --demo-ink: #e1e8ea; --demo-muted: #99aaaf; --demo-line: #455157; --demo-accent: #95ade6; --demo-tint: #35425b; --demo-shadow: 0 12px 30px #0003; }
.demo-scene *, .demo-scene *::before, .demo-scene *::after { box-sizing: border-box; }
.demo-scene [hidden] { display: none !important; }
.demo-scene[data-interactive="false"] { pointer-events: none; user-select: none; }
.demo-scene button, .demo-scene input, .demo-scene select { font: inherit; }
.demo-scene button { cursor: pointer; }
.demo-scene button:disabled { opacity: .55; cursor: default; }
.demo-scene button:focus-visible, .demo-scene input:focus-visible, .demo-scene select:focus-visible, .demo-scene summary:focus-visible, .demo-scene [tabindex]:focus-visible, .demo-scene [contenteditable]:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: 3px; }
.demo-scene input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]), .demo-scene select { width: 100%; min-width: 0; border: 1px solid var(--demo-line); border-radius: 6px; padding: 7px 9px; color: var(--demo-ink); background: var(--demo-paper); outline-offset: 2px; }
.demo-scene input::placeholder { color: var(--demo-muted); opacity: 1; }
.demo-scene input[type="checkbox"], .demo-scene input[type="radio"], .demo-scene input[type="range"] { accent-color: var(--demo-accent); }
.demo-scene input[type="range"] { cursor: pointer; width: 100%; height: 15px; margin: 0; }
.demo-scene strong, .demo-scene b { font-weight: 650; }
.demo-scene small { font-size: 9px; color: var(--demo-muted); }
.demo-scene p { margin: 0; }
.demo-icon { width: 16px; height: 16px; flex: 0 0 16px; display: inline-block; vertical-align: middle; }
.demo-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 28px; padding: 5px 10px; border: 1px solid var(--demo-line); border-radius: 6px; color: var(--demo-ink); background: var(--demo-paper); line-height: 1.3; white-space: nowrap; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.demo-button:hover { background: var(--demo-tint); }
.demo-button:active { transform: translateY(1px); }
.demo-button--primary { color: #fff; background: #526eae; border-color: #526eae; box-shadow: 0 2px 4px #24314514; }
.demo-button--primary:hover { background: #415d98; }
.demo-button--subtle { background: transparent; border-color: transparent; color: var(--demo-accent); }
.demo-caption { font-size: 10px; color: var(--demo-muted); font-weight: 500; }
.demo-footnote { display: block; font-size: 9px; color: var(--demo-muted); text-align: center; }
.demo-feedback { display: block; min-height: 14px; font-size: 10px; color: var(--demo-accent); text-align: center; }
.demo-scene kbd { background: var(--demo-bg); border: 1px solid var(--demo-line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 4px; font: 9px ui-monospace, monospace; color: var(--demo-muted); white-space: nowrap; }
.demo-detail .demo-scene { min-height: 320px; padding: 36px; font-size: 13px; gap: 18px; }
.demo-detail .demo-scene small, .demo-detail .demo-footnote { font-size: 11px; }
.demo-detail .demo-button { min-height: 34px; padding: 7px 13px; }
.demo-detail .demo-caption { font-size: 12px; }
.demo-detail .demo-feedback { min-height: 18px; font-size: 12px; }
.demo-window { width: min(100%, 270px); border: 1px solid var(--demo-line); border-radius: 9px; overflow: hidden; background: var(--demo-paper); box-shadow: var(--demo-shadow); }
.demo-window-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 27px; padding: 0 9px; background: linear-gradient(var(--demo-paper), var(--demo-bg)); border-bottom: 1px solid var(--demo-line); font-size: 9px; font-weight: 600; color: var(--demo-muted); }
.demo-window-tool { width: 36px; text-align: right; }
.demo-window-tool .demo-icon { width: 12px; height: 12px; }
.demo-traffic { display: flex; gap: 4px; width: 36px; flex-shrink: 0; }
.demo-traffic i { width: 8px; height: 8px; border-radius: 50%; background: #fa665c; border: 1px solid #e5514c; }
.demo-traffic i:nth-child(2) { background: #f3bf4f; border-color: #dda438; }
.demo-traffic i:nth-child(3) { background: #59c45a; border-color: #38a744; }
.demo-window-body { position: relative; min-height: 83px; }
.demo-detail .demo-window { width: min(100%, 380px); }
.demo-detail .demo-window-bar { height: 34px; font-size: 11px; }
.demo-detail .demo-traffic i { width: 10px; height: 10px; }
.demo-detail .demo-traffic { width: 44px; gap: 5px; }
.demo-window-content { display: flex; align-items: center; flex-direction: column; gap: 7px; padding: 20px; }
.demo-window-content > .demo-icon { color: var(--demo-accent); width: 25px; height: 25px; }
.demo-window-content span { color: var(--demo-muted); font-size: 9px; }
.demo-art { position: relative; min-height: 72px; width: 100%; overflow: hidden; border-radius: 7px; background: linear-gradient(145deg, #d8d2f7, #a095d9); isolation: isolate; }
.demo-art--blue { background: linear-gradient(145deg, #d1e5ed, #9bbfd5); }
.demo-art--green { background: linear-gradient(145deg, #dce6c8, #a1bea5); }
.demo-art--sunset { background: linear-gradient(145deg, #f6d5ba, #dba2bb); }
.demo-art-orb { position: absolute; width: 38px; height: 38px; background: #ffffff9e; border-radius: 50%; top: 16%; right: 21%; }
.demo-art-hill { position: absolute; width: 130%; height: 80%; background: #44476c33; transform: rotate(-15deg); border-radius: 50%; left: -10%; top: 60%; }
.demo-art--green .demo-art-hill { background: #4b745b40; }
.demo-art-caption { position: absolute; color: #fff; left: 14px; bottom: 11px; text-shadow: 0 1px 6px #0004; font-weight: 600; font-size: 13px; }
.demo-avatar { position: relative; display: inline-flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 9px; font-weight: 650; color: #625686; background: #e7def8; }
.demo-avatar--b { background: #d7e8df; color: #4c7460; }
.demo-avatar--c { background: #f4dfca; color: #9a7757; }
.demo-avatar--more { background: var(--demo-paper); color: var(--demo-muted); }
.demo-detail .demo-avatar { width: 40px; height: 40px; font-size: 11px; }
.demo-menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 8; min-width: 177px; padding: 5px; background: var(--demo-paper); color: var(--demo-ink); border: 1px solid var(--demo-line); border-radius: 7px; box-shadow: 0 10px 20px #16272b25; }
.demo-menu button { display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px; background: transparent; border: 0; border-radius: 4px; color: inherit; text-align: left; font-size: 10px; }
.demo-menu button:hover, .demo-menu button:focus-visible { background: var(--demo-tint); }
.demo-menu button span { margin-left: auto; font-size: 9px; color: var(--demo-muted); }
.demo-menu hr { height: 1px; background: var(--demo-line); border: 0; margin: 3px 0; }
.demo-scene--three-dots .demo-menu, .demo-scene--combo-button .demo-menu { top: 35px; }
.demo-detail .demo-menu { min-width: 215px; padding: 7px; }
.demo-detail .demo-menu button { font-size: 12px; padding: 8px; }
.demo-editor { width: 100%; max-width: 250px; padding: 14px; background: var(--demo-paper); border: 1px solid var(--demo-line); border-radius: 8px; box-shadow: var(--demo-shadow); }
.demo-editor-top { display: flex; justify-content: space-between; font-size: 9px; color: var(--demo-muted); padding-bottom: 10px; border-bottom: 1px solid var(--demo-line); }
.demo-editable { display: flex; align-items: center; min-height: 36px; padding: 8px 0; font-size: 15px; outline-offset: 4px; caret-color: var(--demo-accent); }
.demo-caret { width: 1.5px; height: 20px; margin-left: 2px; background: var(--demo-accent); animation: demo-caret 1s steps(1) infinite; }
.demo-editable:focus .demo-caret { display: none; }
.demo-pointer-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px 20px; max-width: 250px; text-align: center; }
.demo-pointer-sample { display: flex; align-items: center; flex-direction: column; gap: 8px; }
.demo-pointer-sample .demo-icon { width: 28px; height: 28px; fill: var(--demo-ink); stroke: var(--demo-paper); filter: drop-shadow(1px 2px 1px #0003); }
.demo-pointer-sample b { font: 27px Georgia, serif; line-height: 28px; }
.demo-pointer-hand b { font-size: 34px; transform: rotate(-20deg); }
.demo-pointer-target { grid-column: 1 / -1; color: var(--demo-muted); border: 1px dashed var(--demo-line); border-radius: 5px; padding: 8px; cursor: crosshair; }
.demo-pointer-text { cursor: text; }
.demo-pointer-hand { cursor: pointer; }
.demo-alert-dialog { display: flex; align-items: center; flex-direction: column; gap: 7px; padding: 12px 15px; text-align: center; }
.demo-alert-emblem { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: #f4e0bd; color: #9a753f; font: bold 20px Georgia, serif; }
.demo-alert-dialog p { font-size: 9px; color: var(--demo-muted); }
.demo-alert-dialog > div { display: flex; gap: 6px; }
.demo-scene--alert { padding: 10px 24px; }
.demo-scene--alert .demo-feedback:empty { display: none; }
.demo-range-label { display: flex; justify-content: space-between; align-items: center; width: min(100%, 240px); }
.demo-range-label span { display: flex; align-items: center; gap: 6px; }
.demo-range-label output { color: var(--demo-muted); font-variant-numeric: tabular-nums; }
.demo-scene--slider > input { max-width: 240px; }
.demo-brightness { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; background: var(--demo-paper); border-radius: 8px; border: 1px solid var(--demo-line); width: min(100%, 240px); color: var(--demo-accent); }
.demo-color-preview { width: min(100%, 190px); min-height: 73px; border-radius: 9px; background: #7c66dc; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 2px; color: white; box-shadow: var(--demo-shadow); }
.demo-color-preview > span { font-size: 29px; letter-spacing: -1px; }
.demo-color-preview small { color: #ffffffb3; }
.demo-color-controls { display: flex; align-items: center; gap: 10px; }
.demo-color-controls code { font: 9px ui-monospace, monospace; }
.demo-color-well { display: flex; padding: 3px; background: var(--demo-paper); border: 1px solid var(--demo-line); border-radius: 6px; }
.demo-color-well input { width: 24px; height: 21px; padding: 0; border: 0; background: none; cursor: pointer; }
.demo-color-dot { width: 19px; height: 19px; display: inline-block; border: 0; border-radius: 50%; background: #7c66dc; flex-shrink: 0; padding: 0; min-height: 0; }
.demo-color-dot--blue { background: #679dce; }
.demo-color-dot--orange { background: #df9e66; }
.demo-color-dot--green { background: #83af87; }
.demo-color-dot.is-selected { outline: 2px solid var(--demo-ink); outline-offset: 3px; }
.demo-split-frame { --demo-sidebar-width: 38%; }
.demo-split { display: grid; grid-template-columns: var(--demo-sidebar-width) 8px minmax(0,1fr); min-height: 100px; }
.demo-split-sidebar { grid-column: 1; padding: 7px; background: var(--demo-bg); min-width: 0; overflow: hidden; }
.demo-split-sidebar > span { display: flex; align-items: center; gap: 5px; padding: 5px; border-radius: 4px; font-size: 9px; white-space: nowrap; }
.demo-split .is-selected { background: var(--demo-tint); color: var(--demo-accent); }
.demo-split-divider { grid-column: 2; position: relative; padding: 0; background: linear-gradient(90deg,transparent 3px,var(--demo-line) 3px,var(--demo-line) 4px,transparent 4px); cursor: col-resize; touch-action: none; }
.demo-split-divider > i { position: absolute; left: 2px; top: 40%; width: 3px; height: 20%; min-height: 12px; border-radius: 3px; background: var(--demo-muted); opacity: .55; }
.demo-split-divider:hover,.demo-split-divider:focus-visible { background: var(--demo-tint); }
.demo-split > section { grid-column: 3; padding: 9px; min-width: 0; }
.demo-split-toolbar { position: relative; }
.demo-split-toolbar::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--demo-sidebar-width); width: 1px; background: var(--demo-line); pointer-events: none; }
.demo-split-toolbar .demo-split-toggle { padding: 2px 4px; min-height: 20px; background: transparent; border-color: transparent; }
.demo-split-toolbar .demo-split-toggle .demo-icon { width: 13px; height: 13px; }
.demo-detail .demo-split { min-height: 190px; }
.demo-detail .demo-split-sidebar > span { font-size: 11px; min-height: 34px; }
.demo-detail .demo-split-divider { outline-offset: 0; }
.demo-detail .demo-split .demo-art { min-height: 105px; }
.demo-split .demo-art { min-height: 45px; margin-bottom: 5px; }
.demo-split small { display: block; }
.demo-scroll-box { overflow-y: auto; max-height: 102px; scrollbar-width: thin; scrollbar-color: #a6afb4 transparent; }
.demo-scroll-box > div { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--demo-line); }
.demo-file-number { color: var(--demo-muted); font: 9px ui-monospace, monospace; }
.demo-scroll-box .demo-icon { margin-left: auto; width: 11px; height: 11px; }
.demo-detail .demo-scroll-box { max-height: 180px; }
.demo-search-wrap { width: min(100%, 250px); }
.demo-search { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid var(--demo-line); border-radius: 7px; background: var(--demo-paper); color: var(--demo-muted); box-shadow: 0 2px 4px #24314505; }
.demo-scene .demo-search input { padding: 3px 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; }
.demo-search-results { display: flex; flex-direction: column; margin-top: 6px; }
.demo-search-results > span:not(.demo-feedback) { padding: 5px 9px; color: var(--demo-muted); border-bottom: 1px solid var(--demo-line); }
.demo-save { padding: 9px 13px; display: grid; gap: 6px; }
.demo-save > label { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 8px; font-size: 9px; }
.demo-save label input, .demo-save label select { padding: 4px 7px !important; }
.demo-save-folder { display: flex; align-items: center; gap: 6px; border: 1px solid var(--demo-line); border-radius: 5px; padding: 7px; color: var(--demo-muted); }
.demo-save-folder span { margin-left: auto; }
.demo-save-actions { display: flex; justify-content: flex-end; gap: 6px; }
.demo-save .demo-feedback:empty { display: none; }
.demo-token-wrap { width: min(100%, 270px); }
.demo-token-field { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px; border: 1px solid var(--demo-line); border-radius: 7px; background: var(--demo-paper); margin: 6px 0 9px; }
.demo-token { display: inline-flex; align-items: center; background: var(--demo-tint); border: 1px solid #526eae22; padding-left: 7px; border-radius: 5px; color: var(--demo-accent); }
.demo-token .demo-button { min-height: 21px; padding: 2px 5px; border: 0; background: none; color: inherit; }
.demo-scene .demo-token-field input { width: 80px !important; flex: 1; min-width: 80px !important; background: none !important; padding: 2px 4px !important; border: 0 !important; }
.demo-combo-wrap { position: relative; display: flex; align-items: center; flex-direction: column; gap: 10px; }
.demo-combo { display: flex; position: relative; }
.demo-combo button:first-child { border-radius: 6px 0 0 6px; }
.demo-combo button:last-child { border-radius: 0 6px 6px 0; border-left: 1px solid #ffffff4d; padding: 5px 8px; }
.demo-scene--combo-button .demo-menu { top: 50px; }
.demo-level { width: min(100%, 230px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.demo-level-bars { display: flex; gap: 4px; width: 100%; }
.demo-level-bars i { height: 24px; flex: 1; background: var(--demo-line); border-radius: 3px; box-shadow: inset 0 1px 2px #0001; }
.demo-level-bars .is-lit { background: #87b196; box-shadow: inset 0 1px 2px #fff5; }
.demo-level output { color: var(--demo-muted); font-variant-numeric: tabular-nums; }
.demo-columns { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 102px; }
.demo-columns > div { border-right: 1px solid var(--demo-line); padding: 6px 4px; }
.demo-columns b { display: block; padding: 5px; font-size: 9px; color: var(--demo-muted); }
.demo-columns span { display: flex; align-items: center; justify-content: space-between; padding: 4px 5px; border-radius: 3px; font-size: 9px; white-space: nowrap; }
.demo-columns .is-selected { color: var(--demo-accent); background: var(--demo-tint); }
.demo-columns .demo-icon { height: 10px; width: 10px; flex-basis: 10px; }
.demo-outline, .demo-disclosure { width: min(100%, 240px); border: 1px solid var(--demo-line); border-radius: 7px; background: var(--demo-paper); padding: 9px 12px; box-shadow: var(--demo-shadow); }
.demo-outline summary, .demo-disclosure summary { position: relative; display: flex; align-items: center; gap: 6px; padding: 5px 0 5px 12px; cursor: pointer; list-style: none; }
.demo-outline summary::before, .demo-disclosure summary::before { content: '▸'; position: absolute; left: 0; color: var(--demo-muted); font-size: 10px; }
.demo-outline details[open] > summary::before, .demo-disclosure details[open] > summary::before { content: '▾'; }
.demo-outline details details { margin-left: 14px; border-left: 1px solid var(--demo-line); padding-left: 8px; }
.demo-outline details > span, .demo-disclosure details > span { display: flex; align-items: center; gap: 7px; padding: 4px 0 4px 19px; color: var(--demo-muted); }
.demo-outline summary small, .demo-disclosure summary small { margin-left: auto; }
.demo-desktop { position: relative; width: 100%; min-height: 135px; background: linear-gradient(135deg, #c8d5e1, #cabbd6 60%, #e3c2b5); border-radius: 8px; overflow: hidden; }
.demo-menubar { display: flex; align-items: center; gap: 9px; padding: 0 9px; height: 25px; background: #ffffff9e; color: #333847; font-size: 9px; border-bottom: 1px solid #ffffffb3; }
.demo-menubar > span:last-child { margin-left: auto; }
.demo-menubar .demo-button { border: 0; background: transparent; min-height: 20px; padding: 2px; border-radius: 2px; font-size: 9px; color: inherit; }
.demo-menubar-drop { position: absolute; top: 22px; left: 48px; }
.demo-menubar-drop .demo-menu { top: 0; left: 0; right: auto; }
.demo-desktop-label { text-align: center; color: #fff; text-shadow: 0 1px 3px #0002; padding-top: 37px; font-size: 11px; }
.demo-context-target { position: relative; display: flex; align-items: center; flex-direction: column; gap: 6px; background: var(--demo-paper); padding: 15px 25px; border: 1px dashed var(--demo-line); border-radius: 8px; cursor: context-menu; }
.demo-context-target > .demo-icon { width: 31px; height: 31px; color: #79a2c2; }
.demo-context-target .demo-menu { top: 28px; left: 65%; right: auto; }
.demo-disclosure details > span .demo-icon { width: 12px; height: 12px; color: var(--demo-accent); }
.demo-dock { position: relative; display: flex; gap: 12px; padding: 10px 15px 14px; border: 1px solid var(--demo-line); border-radius: 13px; background: linear-gradient(var(--demo-paper), var(--demo-bg)); box-shadow: var(--demo-shadow); }
.demo-dock-icon { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(#76b1dc, #4673b2); color: #fff; box-shadow: inset 0 1px 0 #fff6, 0 2px 4px #0002; }
.demo-dock-icon .demo-icon { width: 25px; height: 25px; }
.demo-dock-icon--notes { background: linear-gradient(#f7dd9b, #e2b958); font-size: 27px; }
.demo-dock-icon--studio { background: linear-gradient(#bcabdf, #8b71bd); }
.demo-dock-icon > span { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 10px; padding: 0 4px; font-size: 10px; color: #fff; background: #d85e5e; border: 2px solid var(--demo-paper); box-sizing: content-box; }
.demo-dock-active { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--demo-muted); bottom: 5px; left: 33px; }
.demo-focus-layout, .demo-web-focus { width: min(100%, 245px); display: flex; flex-direction: column; align-items: stretch; gap: 11px; text-align: center; }
.demo-focus-layout > div { display: flex; justify-content: center; gap: 8px; }
.demo-focus-example { box-shadow: 0 0 0 3px #799ddf55; border-color: #799ddf !important; }
.demo-web-focus > button { box-shadow: 0 0 0 3px var(--demo-bg), 0 0 0 5px var(--demo-accent); margin: 3px; }
.demo-detail .demo-web-focus > button { box-shadow: none; }
.demo-detail .demo-web-focus > button:focus-visible { box-shadow: 0 0 0 3px var(--demo-bg), 0 0 0 5px var(--demo-accent); }
.demo-inspector { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.demo-inspector-title { display: flex; align-items: center; gap: 5px; border-bottom: 1px solid var(--demo-line); padding-bottom: 6px; font-weight: 600; }
.demo-inspector-title > span { margin-left: auto; }
.demo-inspector > label { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 9px; font-size: 9px; }
.demo-inspector input[type="number"] { padding: 3px 5px !important; }
.demo-inspector > div:last-child { display: flex; align-items: center; gap: 7px; color: var(--demo-muted); font-size: 9px; }
.demo-inspector > div:last-child > span:last-child { margin-left: auto; }
.demo-hud { width: 190px; margin: 19px auto; padding: 10px; border: 1px solid #fff3; border-radius: 9px; background: #27313ad6; color: #f3f5f8; backdrop-filter: blur(10px); box-shadow: 0 10px 20px #1722363b; }
.demo-hud-title { display: flex; align-items: center; gap: 12px; font-size: 9px; color: #c9d3dc; }
.demo-hud-icons { display: flex; gap: 6px; margin: 12px 0 9px; }
.demo-hud-icons .demo-button { flex: 1; background: #ffffff0d; color: #eef1f5; border-color: #fff1; min-width: 0; padding: 5px; }
.demo-hud-icons .is-selected { background: #ffffff29; border-color: #ffffff4a; }
.demo-hud-divider { height: 1px; background: #ffffff26; margin-bottom: 7px; }
.demo-hud > span { font-size: 9px; color: #c9d3dc; }
.demo-popover-demo { position: relative; align-self: stretch; display: flex; align-items: center; flex-direction: column; padding-bottom: 80px; }
.demo-popover { position: absolute; top: 39px; width: 180px; padding: 12px; background: var(--demo-paper); border: 1px solid var(--demo-line); border-radius: 8px; box-shadow: var(--demo-shadow); }
.demo-popover::before { content: ''; position: absolute; top: -5px; left: calc(50% - 5px); width: 10px; height: 10px; transform: rotate(45deg); border-left: 1px solid var(--demo-line); border-top: 1px solid var(--demo-line); background: var(--demo-paper); }
.demo-popover > b { display: block; margin-bottom: 8px; }
.demo-color-options { display: flex; gap: 11px; margin-bottom: 9px; }
.demo-color-options .demo-button:hover { filter: brightness(1.15); }
.demo-three-controls { width: min(100%, 210px); display: flex; flex-direction: column; gap: 7px; }
.demo-three-controls > label { display: grid; grid-template-columns: 86px 1fr; gap: 6px; align-items: center; font-size: 9px; }
.demo-three-controls select, .demo-three-controls input { padding: 4px 6px !important; }
.demo-dropdown-wrap { position: relative; }
.demo-segments { display: inline-flex; padding: 3px; border: 1px solid var(--demo-line); border-radius: 7px; background: var(--demo-line); gap: 2px; box-shadow: inset 0 1px 2px #0001; }
.demo-segments .demo-button { min-width: 58px; border: 0; background: transparent; box-shadow: none; color: var(--demo-muted); }
.demo-segments .is-selected { background: var(--demo-paper); color: var(--demo-ink); box-shadow: 0 1px 3px #0002; }
.demo-segment-result { color: var(--demo-muted); font-size: 10px; }
.demo-attached-sheet { position: relative; width: 83%; margin: 0 auto; padding: 10px 12px; border-radius: 0 0 7px 7px; background: var(--demo-paper); border: 1px solid var(--demo-line); border-top: 0; z-index: 2; box-shadow: 0 5px 15px #0002; display: flex; flex-direction: column; gap: 6px; }
.demo-attached-sheet input { padding: 4px 6px !important; }
.demo-attached-sheet > div { display: flex; justify-content: flex-end; gap: 5px; }
.demo-attached-sheet.is-closed { opacity: .3; transform: translateY(-8px); }
.demo-sheet-background { position: absolute; inset: 0; padding: 14px; background: var(--demo-bg); }
.demo-sheet-background span { display: block; width: 65%; height: 5px; margin-bottom: 6px; background: var(--demo-line); border-radius: 3px; }
.demo-scene--sheet .demo-feedback:empty { display: none; }
.demo-sidebar-layout { display: grid; grid-template-columns: 42% 1fr; min-height: 106px; }
.demo-sidebar { padding: 7px; background: var(--demo-bg); border-right: 1px solid var(--demo-line); display: flex; flex-direction: column; gap: 3px; }
.demo-sidebar small { font-size: 8px; padding: 2px 5px; }
.demo-sidebar button { width: 100%; justify-content: flex-start; background: none; border: 0; font-size: 9px; padding: 4px 5px; min-height: 21px; }
.demo-sidebar .is-selected { color: var(--demo-accent); background: var(--demo-tint); }
.demo-sidebar-person { display: flex; align-items: center; gap: 5px; padding: 2px 5px; font-size: 9px; }
.demo-sidebar-person .demo-avatar { width: 16px; height: 16px; font-size: 6px; }
.demo-sidebar-main { padding: 12px; }
.demo-sidebar-main strong { display: block; margin-bottom: 7px; text-align: left; }
.demo-sidebar-main .demo-art { min-height: 64px; }
.demo-stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--demo-line); border-radius: 7px; overflow: hidden; background: var(--demo-paper); box-shadow: 0 2px 4px #00000008; }
.demo-stepper button { min-height: 35px; width: 36px; border: 0; border-radius: 0; font-size: 17px; }
.demo-stepper output { width: 57px; text-align: center; font-size: 17px; font-variant-numeric: tabular-nums; border-left: 1px solid var(--demo-line); border-right: 1px solid var(--demo-line); }
.demo-toolbar { display: flex; align-items: center; gap: 3px; padding: 5px 8px; border-bottom: 1px solid var(--demo-line); background: var(--demo-bg); }
.demo-toolbar > button { padding: 3px 5px; min-height: 23px; background: none; border: 0; }
.demo-toolbar > button.is-selected { background: var(--demo-paper); box-shadow: 0 1px 3px #0001; }
.demo-toolbar > span { flex: 1; }
.demo-toolbar-search { display: flex; align-items: center; gap: 3px; width: 76px; }
.demo-toolbar-search .demo-icon { width: 12px; height: 12px; flex-basis: 12px; }
.demo-toolbar-search input { padding: 2px 3px !important; border: 0 !important; background: none !important; font-size: 9px !important; }
.demo-toolbar-body { padding: 9px 12px; }
.demo-toolbar-body .demo-art { min-height: 48px; }
.demo-toolbar-body > span { font-size: 9px; color: var(--demo-muted); display: block; margin-top: 4px; }
.demo-traffic-demo { width: min(100%, 250px); position: relative; }
.demo-controlled-window { margin-inline: auto; transition: width .25s ease; }
.demo-controlled-window .demo-traffic { width: auto; }
.demo-controlled-window.is-zoomed { width: 100%; }
.demo-window-unsaved { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #77211d; }
.demo-window-controls:hover .demo-window-unsaved { opacity: 0; }
.demo-traffic-demo > .demo-window-reopen { display: grid; place-items: center; min-height: 100px; }
.demo-detail .demo-traffic-demo { width: min(100%,470px); }
.demo-detail .demo-controlled-window { width: min(100%,320px); }
.demo-detail .demo-controlled-window.is-zoomed { width: 100%; }
.demo-detail .demo-controlled-window .demo-window-bar { height: 46px; }
.demo-detail .demo-controlled-window .demo-window-control { position: relative; width: 20px; height: 20px; min-height: 20px; font-size: 15px; }
.demo-detail .demo-traffic-content { min-height: 130px; }
.demo-detail .demo-controlled-window.is-zoomed .demo-traffic-content { min-height: 180px; }
.demo-detail .demo-traffic-labels { font-size: 11px; }
.demo-traffic-content { min-height: 60px; display: grid; place-items: center; color: var(--demo-muted); }
.demo-traffic-labels { display: flex; gap: 15px; margin-top: 9px; justify-content: center; font-size: 9px; color: var(--demo-muted); }
.demo-traffic-labels > span::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #fa665c; }
.demo-traffic-labels > span:nth-child(2)::before { background: #f3bf4f; }
.demo-traffic-labels > span:nth-child(3)::before { background: #59c45a; }
.demo-vibrancy-scene { position: relative; width: 100%; max-width: 270px; height: 132px; border-radius: 8px; overflow: hidden; box-shadow: var(--demo-shadow); }
.demo-vibrancy-scene > .demo-art { height: 100%; border-radius: 0; }
.demo-vibrancy-scene .demo-art-orb { width: 80px; height: 80px; top: -12%; right: 15%; }
.demo-vibrancy-panel { position: absolute; inset: 0 auto 0 0; width: 49%; display: flex; flex-direction: column; gap: 6px; padding: 13px; background: #ffffff80; color: #555367; backdrop-filter: blur(12px) saturate(1.2); border-right: 1px solid #fff5; }
.demo-vibrancy-panel > span { display: flex; align-items: center; gap: 6px; font-size: 9px; }
.demo-vibrancy-panel > strong { margin-bottom: 4px; }
.demo-material-caption { position: absolute; right: 8px; bottom: 8px; width: 43%; font-size: 9px; text-align: right; color: #fff; text-shadow: 0 1px 4px #0002; }
.demo-menubar--extra > span:nth-child(3) { flex: 1; }
.demo-status-popover { position: absolute; top: 31px; right: 8px; display: flex; flex-direction: column; gap: 5px; width: 160px; padding: 12px; border: 1px solid #fff5; background: #ffffffcc; color: #414c57; border-radius: 8px; box-shadow: 0 7px 15px #1722362b; backdrop-filter: blur(12px); }
.demo-status-popover > span { color: #82909b; font-size: 9px; }
.demo-status-meter { height: 4px; width: 100%; background: #8c9dba22; border-radius: 3px; margin: 3px 0; overflow: hidden; }
.demo-status-meter i { display: block; width: 62%; height: 100%; background: #7b92b3; }
.demo-status-meter.is-paused i { background: #a9b1ba; }
.demo-status-popover .demo-button { font-size: 9px; min-height: 22px; align-self: flex-end; color: #587395; padding: 2px; }
.demo-table-wrap { width: 100%; max-width: 310px; border: 1px solid var(--demo-line); border-radius: 8px; overflow: hidden; background: var(--demo-paper); box-shadow: var(--demo-shadow); }
.demo-table { border-collapse: collapse; width: 100%; text-align: left; font-size: 9px; }
.demo-table th { padding: 3px 7px; font-weight: 500; background: var(--demo-bg); color: var(--demo-muted); border-bottom: 1px solid var(--demo-line); white-space: nowrap; }
.demo-table th button { border: 0; background: none; color: inherit; min-height: 22px; padding: 2px 0; font-size: inherit; }
.demo-table td { padding: 9px 7px; border-bottom: 1px solid var(--demo-line); white-space: nowrap; }
.demo-table tr:last-child td { border: 0; }
.demo-table-tag { background: var(--demo-tint); color: var(--demo-accent); padding: 2px 5px; border-radius: 4px; font-size: 8px; }
.demo-detail .demo-table-wrap { max-width: 450px; }
.demo-detail .demo-table { font-size: 12px; }
.demo-detail .demo-table td { padding: 14px 12px; }
.demo-detail .demo-table-tag { font-size: 10px; }
.demo-phone { width: 220px; border: 1px solid var(--demo-line); border-radius: 11px; background: var(--demo-paper); overflow: hidden; box-shadow: var(--demo-shadow); }
.demo-phone-content { padding: 10px 12px; }
.demo-phone-content .demo-art { min-height: 48px; margin-top: 6px; }
.demo-bottom-nav { display: flex; justify-content: space-around; padding: 6px 4px; border-top: 1px solid var(--demo-line); }
.demo-bottom-nav button { display: flex; flex-direction: column; gap: 3px; border: 0; background: none; color: var(--demo-muted); padding: 2px 8px; min-height: 30px; }
.demo-bottom-nav .is-selected { color: var(--demo-accent); }
.demo-bottom-nav .is-selected small { color: inherit; }
.demo-timeline { width: min(100%, 235px); display: flex; flex-direction: column; gap: 0; }
.demo-timeline > div { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 0 0 17px 19px; }
.demo-timeline > div::before { content: ''; position: absolute; top: 8px; bottom: 0; left: 4px; width: 1px; background: var(--demo-line); }
.demo-timeline > div:last-child { padding-bottom: 0; }
.demo-timeline > div:last-child::before { display: none; }
.demo-timeline i { position: absolute; left: 0; top: 3px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--demo-accent); background: var(--demo-bg); }
.demo-timeline i.is-current { background: var(--demo-accent); box-shadow: 0 0 0 4px var(--demo-tint); }
.demo-timeline > div > small { width: 33px; padding-top: 1px; font-variant-numeric: tabular-nums; }
.demo-timeline section { display: flex; flex-direction: column; }
.demo-timeline section > span { color: var(--demo-muted); font-size: 9px; }
.demo-presence { display: flex; flex-direction: column; gap: 10px; width: 175px; }
.demo-presence > div { display: flex; align-items: center; gap: 11px; }
.demo-presence > div > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.demo-status-dot { position: absolute; right: -1px; bottom: 0; width: 9px; height: 9px; border: 2px solid var(--demo-bg); border-radius: 50%; background: #76a887; }
.demo-status-dot--orange { background: #d7ad6a; }
.demo-status-dot--gray { background: #a3adb1; }
.demo-chat { width: min(100%, 260px); display: flex; flex-direction: column; gap: 9px; }
.demo-chat > div { display: flex; align-items: flex-end; gap: 7px; }
.demo-chat-avatar { width: 21px; height: 21px; border-radius: 50%; background: #ddd4eb; color: #796697; display: grid; place-items: center; font-size: 7px; flex-shrink: 0; }
.demo-chat p { background: var(--demo-paper); border: 1px solid var(--demo-line); border-radius: 9px 9px 9px 2px; padding: 7px 10px; font-size: 10px; }
.demo-chat .demo-chat-own { justify-content: flex-end; }
.demo-chat-own p { background: var(--demo-accent); color: var(--demo-paper); border-color: var(--demo-accent); border-radius: 9px 9px 2px 9px; }
.demo-chat p small { display: block; color: inherit; opacity: .65; text-align: right; margin-top: 3px; font-size: 7px; }
.demo-chat-typing { display: flex; gap: 3px; }
.demo-chat-typing i { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--demo-muted); animation: demo-typing 1.2s ease infinite; }
.demo-chat-typing i:nth-child(2) { animation-delay: .15s; }
.demo-chat-typing i:nth-child(3) { animation-delay: .3s; }
.demo-steps { width: min(100%, 270px); display: flex; flex-direction: column; align-items: center; gap: 9px; }
.demo-step-nodes { display: flex; align-items: center; width: 90%; }
.demo-step-nodes > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; border: 1px solid var(--demo-line); background: var(--demo-paper); color: var(--demo-muted); font-size: 10px; }
.demo-step-nodes > span.is-complete { border-color: var(--demo-accent); background: var(--demo-accent); color: #fff; }
.demo-step-nodes > span.is-current { border-color: var(--demo-accent); color: var(--demo-accent); box-shadow: 0 0 0 3px var(--demo-tint); }
.demo-step-nodes > i { height: 1px; background: var(--demo-line); flex: 1; }
.demo-step-labels { display: flex; justify-content: space-between; width: 100%; font-size: 9px; color: var(--demo-muted); }
.demo-step-labels strong { color: var(--demo-accent); }
.demo-step-description { font-size: 9px; color: var(--demo-muted); }
.demo-avatar-group-wrap { text-align: center; display: flex; align-items: center; flex-direction: column; gap: 4px; }
.demo-avatar-group { display: flex; padding-left: 11px; margin-bottom: 10px; }
.demo-avatar-group .demo-avatar { border: 3px solid var(--demo-bg); margin-left: -11px; width: 41px; height: 41px; font-size: 10px; }
.demo-multi-select { width: min(100%, 240px); }
.demo-multi-options { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 10px; }
.demo-multi-options .demo-button { border-radius: 20px; font-size: 10px; padding: 5px 10px; }
.demo-multi-options .demo-icon { width: 12px; height: 12px; flex-basis: 12px; }
.demo-multi-options .is-selected { color: var(--demo-accent); border-color: #526eae44; background: var(--demo-tint); }
.demo-multi-select > output { display: block; font-size: 9px; color: var(--demo-muted); }
.demo-scrollspy { display: flex; width: min(100%, 290px); height: 135px; background: var(--demo-paper); border: 1px solid var(--demo-line); border-radius: 8px; overflow: hidden; box-shadow: var(--demo-shadow); }
.demo-scrollspy nav { width: 82px; padding: 10px 7px; background: var(--demo-bg); border-right: 1px solid var(--demo-line); flex-shrink: 0; }
.demo-scrollspy nav button { display: block; width: 100%; text-align: left; padding: 5px; font-size: 9px; border: 0; background: none; color: var(--demo-muted); min-height: 23px; }
.demo-scrollspy nav .is-selected { color: var(--demo-accent); background: var(--demo-tint); }
.demo-scrollspy-body { position: relative; flex: 1; overflow: auto; padding: 0 12px; scrollbar-width: thin; }
.demo-scrollspy-body section { min-height: 112px; padding: 12px 0 8px; }
.demo-scrollspy-body p { height: 5px; width: 100%; background: var(--demo-line); margin-top: 9px; border-radius: 3px; }
.demo-scrollspy-body p:last-child { width: 70%; }
.demo-detail .demo-scrollspy { height: 220px; max-width: 420px; }
.demo-detail .demo-scrollspy-body section { min-height: 180px; }
.demo-message-types { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 280px; }
.demo-banner { display: flex; align-items: center; gap: 6px; background: var(--demo-tint); color: var(--demo-accent); font-size: 9px; padding: 6px 9px; border-radius: 5px; }
.demo-banner > span { margin-left: auto; }
.demo-callout { display: flex; gap: 8px; padding: 9px; border-left: 3px solid #ccac6d; background: #f4eddf; border-radius: 4px; color: #89754f; }
.demo-callout > b { font: bold 14px Georgia, serif; width: 16px; text-align: center; }
.demo-callout > span { display: flex; flex-direction: column; font-size: 9px; }
.demo-callout strong { font-size: 10px; }
.demo-inline-alert { display: flex; align-items: center; gap: 6px; color: #76a080; font-size: 9px; }
.demo-form { width: min(100%, 250px); display: flex; flex-direction: column; gap: 6px; }
.demo-form > strong { font-size: 14px; }
.demo-form > small { font-size: 8px; margin-top: -3px; }
.demo-form label { display: flex; flex-direction: column; gap: 3px; font-size: 9px; }
.demo-form input { padding: 4px 7px !important; font-size: 10px !important; }
.demo-scene--sign-in-form { padding: 11px 25px; }
.demo-form .demo-feedback:empty { display: none; }
.demo-detail .demo-form { gap: 10px; }
.demo-detail .demo-form > strong { font-size: 22px; }
.demo-detail .demo-form input { padding: 9px !important; font-size: 12px !important; }
.demo-detail .demo-form label { font-size: 12px; }
.demo-pagination-wrap { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.demo-pagination { display: flex; gap: 4px; }
.demo-pagination button { width: 27px; min-height: 27px; padding: 4px; border-color: transparent; background: none; font-size: 10px; }
.demo-pagination .is-selected { background: var(--demo-paper); border-color: var(--demo-line); color: var(--demo-accent); box-shadow: 0 1px 3px #0001; }
.demo-calendar { width: min(100%, 215px); background: var(--demo-paper); border: 1px solid var(--demo-line); border-radius: 8px; padding: 9px; box-shadow: var(--demo-shadow); }
.demo-calendar > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 9px; margin-bottom: 5px; }
.demo-calendar-header strong { text-align: center; flex: 1; }
.demo-calendar-header .demo-button { min-height: 20px; padding: 1px 6px; }
.demo-calendar > div:first-child > span { color: var(--demo-muted); }
.demo-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 2px 0; }
.demo-calendar-week { display: contents; }
.demo-calendar-cell { min-width: 0; display: flex; align-items: center; justify-content: center; }
.demo-calendar-cell.is-in-range { background: var(--demo-tint); }
.demo-calendar-cell.is-range-start { border-radius: 6px 0 0 6px; }
.demo-calendar-cell.is-range-end { border-radius: 0 6px 6px 0; }
.demo-calendar-grid small { text-align: center; font-size: 7px; padding: 3px 0; }
.demo-calendar-grid button { width: 100%; min-height: 17px; padding: 1px; border: 0; background: none; font-size: 8px; border-radius: 4px; }
.demo-calendar-grid .is-range-start button,.demo-calendar-grid .is-range-end button { background: var(--demo-accent); color: var(--demo-paper); }
.demo-calendar-grid .is-today { box-shadow: inset 0 0 0 1px var(--demo-accent); }
.demo-calendar-grid .is-outside { color: var(--demo-muted); opacity: .65; }
.demo-calendar-grid button:hover { background: var(--demo-tint); color: var(--demo-ink); }
.demo-calendar-footer { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 7px; }
.demo-calendar-footer .demo-button { min-height: 25px; padding: 3px 5px; font-size: 9px; }
.demo-calendar > output { font-size: 8px; margin-top: 4px; }
.demo-scene--date-picker { padding: 9px 20px; }
.demo-detail .demo-calendar { width: min(100%,340px); padding: 12px; }
.demo-detail .demo-calendar-header { font-size: 13px; }
.demo-detail .demo-calendar-header .demo-button { min-height: 38px; min-width: 35px; padding: 5px; font-size: 20px; }
.demo-detail .demo-calendar-grid button { min-height: 34px; font-size: 12px; }
.demo-detail .demo-calendar-grid small { font-size: 10px; }
.demo-detail .demo-calendar-footer .demo-button { min-height: 34px; font-size: 11px; padding: 6px; }
.demo-detail .demo-calendar-output { min-height: 18px; overflow-wrap: anywhere; }
.demo-calendar-header > .demo-anatomy-marker--generic { right: 1px; top: -5px; transform: none; }
.demo-calendar-cell > .demo-anatomy-marker--generic { right: -5px; top: -5px; transform: none; width: 16px; height: 16px; font-size: 9px; }
.demo-scene[data-interactive=false].demo-scene--date-picker { padding: 8px; }
.demo-scene[data-interactive=false] .demo-calendar { padding: 6px; }
.demo-scene[data-interactive=false] .demo-calendar-grid button { min-height: 13px; }
.demo-scene[data-interactive=false] .demo-calendar-footer,.demo-scene[data-interactive=false] .demo-calendar-output { display: none; }
.demo-parallax { position: relative; width: 100%; max-width: 290px; height: 132px; overflow: auto; border-radius: 8px; background: #d5e1e5; scrollbar-width: none; isolation: isolate; }
.demo-parallax-sky { position: absolute; inset: 0; background: linear-gradient(#c9dde6, #eedcce); }
.demo-parallax-mountain { position: absolute; top: 38%; left: -8%; width: 100%; height: 120px; background: #8aaab5; clip-path: polygon(0 100%, 16% 49%, 33% 66%, 61% 9%, 100% 100%); transition: transform .2s ease-out; }
.demo-parallax-front { position: absolute; top: 64%; width: 100%; height: 120px; background: #557787; clip-path: polygon(0 60%, 22% 5%, 48% 48%, 80% 20%, 100% 45%, 100% 100%, 0 100%); transition: transform .16s ease-out; }
.demo-parallax > span { position: absolute; top: 24%; width: 100%; text-align: center; color: #fff; font-size: 22px; font-weight: 600; letter-spacing: -1px; text-shadow: 0 2px 4px #62829133; }
.demo-parallax > small { position: absolute; top: 57%; width: 100%; text-align: center; color: #fff; font-size: 8px; }
.demo-parallax-space { height: 190px; position: relative; }
.demo-detail .demo-parallax { height: 230px; max-width: 420px; }
.demo-detail .demo-parallax-space { height: 340px; }
.demo-detail .demo-parallax-mountain, .demo-detail .demo-parallax-front { height: 220px; }
.demo-carousel { width: 100%; max-width: 250px; }
.demo-carousel-slides { position: relative; height: 100px; border-radius: 8px; overflow: hidden; box-shadow: var(--demo-shadow); }
.demo-carousel-slide { position: absolute; inset: 0; transform: translateX(110%); opacity: 0; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease; }
.demo-carousel-slide.is-current { transform: translateX(0); opacity: 1; }
.demo-carousel-slide > .demo-art { height: 100%; }
.demo-carousel-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; }
.demo-carousel-controls button { width: 26px; min-height: 23px; padding: 2px; }
.demo-carousel-controls > span { font-size: 9px; color: var(--demo-muted); font-variant-numeric: tabular-nums; }
.demo-detail .demo-carousel { max-width: 360px; }
.demo-detail .demo-carousel-slides { height: 195px; }
.demo-site-frame { width: 100%; max-width: 300px; border: 1px solid var(--demo-line); border-radius: 8px; background: var(--demo-paper); overflow: hidden; box-shadow: var(--demo-shadow); }
.demo-site-header { display: flex; align-items: center; gap: 7px; padding: 11px; }
.demo-site-header > b { font-size: 14px; letter-spacing: -.6px; }
.demo-site-header b span { color: var(--demo-accent); }
.demo-site-header > small { flex: 1; font-size: 7px; }
.demo-site-header button { min-height: 22px; font-size: 8px; padding: 4px 7px; }
.demo-site-nav { display: flex; gap: 3px; padding: 4px 7px; background: var(--demo-bg); border-top: 1px solid var(--demo-line); border-bottom: 1px solid var(--demo-line); }
.demo-site-nav button { border: 0; background: transparent; min-height: 22px; font-size: 9px; padding: 4px 7px; }
.demo-site-nav .is-selected { background: var(--demo-paper); color: var(--demo-accent); }
.demo-site-content { padding: 12px; }
.demo-site-content span { display: block; height: 6px; width: 75%; background: var(--demo-line); margin-bottom: 5px; border-radius: 3px; }
.demo-site-content span:last-child { width: 48%; }
.demo-content-card { width: 220px; background: var(--demo-paper); border: 1px solid var(--demo-line); border-radius: 9px; overflow: hidden; box-shadow: var(--demo-shadow); }
.demo-content-card > .demo-art { min-height: 55px; border-radius: 0; }
.demo-content-card > div:last-child { padding: 9px 11px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.demo-content-card small { font-size: 6px; letter-spacing: 1px; grid-column: 1 / -1; }
.demo-content-card strong { font-size: 11px; }
.demo-content-card > div > span { font-size: 8px; color: var(--demo-muted); grid-column: 1; }
.demo-content-card button { grid-column: 2; grid-row: 2 / 4; padding: 3px 6px; font-size: 9px; min-height: 22px; }
.demo-content-card button .demo-icon { width: 11px; height: 11px; flex-basis: 11px; }
.demo-content-card button.is-selected { color: #b77b87; background: #b77b8714; border-color: #b77b8744; }
.demo-detail .demo-content-card { width: 300px; }
.demo-detail .demo-content-card > .demo-art { min-height: 110px; }
.demo-detail .demo-content-card strong { font-size: 16px; }
.demo-detail .demo-content-card small { font-size: 9px; }
.demo-detail .demo-content-card > div > span { font-size: 11px; }
.demo-resize-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.demo-resizable { position: relative; width: 190px; min-width: 120px; max-width: 100%; height: 73px; padding: 13px; overflow: auto; resize: both; border: 1px solid var(--demo-line); border-radius: 7px; background: var(--demo-paper); box-shadow: var(--demo-shadow); display: flex; flex-direction: column; gap: 3px; }
.demo-resizable span { font-size: 9px; color: var(--demo-muted); }
.demo-resize-grip { position: absolute; bottom: 3px; right: 3px; width: 9px; height: 9px; background: repeating-linear-gradient(135deg, transparent 0 2px, var(--demo-muted) 2px 3px); clip-path: polygon(100% 0, 100% 100%, 0 100%); pointer-events: none; }
.demo-resize-wrap > input { max-width: 230px; }
.demo-nav-drawer { width: min(100%, 270px); border: 1px solid var(--demo-line); border-radius: 8px; overflow: hidden; background: var(--demo-paper); box-shadow: var(--demo-shadow); }
.demo-drawer-header { display: flex; gap: 8px; padding: 7px 9px; align-items: center; border-bottom: 1px solid var(--demo-line); }
.demo-drawer-header button { border: 0; background: none; padding: 2px; min-height: 21px; }
.demo-drawer-content { display: flex; min-height: 85px; }
.demo-drawer-content nav { width: 46%; background: var(--demo-bg); border-right: 1px solid var(--demo-line); padding: 7px 5px; flex-shrink: 0; }
.demo-drawer-content nav button { display: flex; justify-content: flex-start; width: 100%; background: none; border: 0; min-height: 23px; padding: 4px 6px; font-size: 9px; }
.demo-drawer-content nav .is-selected { color: var(--demo-accent); background: var(--demo-tint); }
.demo-drawer-content nav .demo-icon { width: 12px; height: 12px; flex-basis: 12px; }
.demo-drawer-content > div { flex: 1; padding: 10px; }
.demo-drawer-content .demo-art { min-height: 67px; }
.demo-bento { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 58px 40px 24px; gap: 5px; width: min(100%, 260px); }
.demo-bento > div { border-radius: 6px; padding: 9px; }
.demo-bento-hero { position: relative; grid-row: 1 / 3; overflow: hidden; background: #dee4da; color: #4c604a; }
.demo-bento-hero > span { font-size: 9px; }
.demo-bento-hero > strong { display: block; font-size: 16px; line-height: 1.16; letter-spacing: -.5px; margin-top: 8px; }
.demo-bento-hero i { position: absolute; right: -8px; bottom: -17px; font-size: 66px; color: #b2c0a9; font-style: normal; }
.demo-bento-number { display: flex; flex-direction: column; background: #e8e2d4; color: #786c53; }
.demo-bento-number small { font-size: 6px; letter-spacing: .6px; color: inherit; }
.demo-bento-number b { font-size: 26px; line-height: 1; margin-top: 3px; }
.demo-bento-color { display: grid; place-items: center; color: #746887; background: #ded7eb; }
.demo-bento-color span { font-size: 29px; line-height: 1; }
.demo-bento-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; background: var(--demo-paper); border: 1px solid var(--demo-line); font-size: 8px; padding: 5px 9px !important; }
.demo-masonry { columns: 3; column-gap: 6px; width: 100%; max-width: 280px; }
.demo-masonry-item { break-inside: avoid; background: var(--demo-paper); border-radius: 5px; overflow: hidden; margin-bottom: 6px; border: 1px solid var(--demo-line); }
.demo-masonry .demo-art { min-height: 45px; border-radius: 0; }
.demo-masonry-item--1 .demo-art { min-height: 62px; }
.demo-masonry-item--2 .demo-art { min-height: 31px; }
.demo-masonry-item small { display: block; font-size: 7px; padding: 3px 5px; }
.demo-masonry .demo-art-orb { width: 18px; height: 18px; }
.demo-motion { --demo-ball-size: 10px; --demo-spring-size: 43px; width: min(100%, 250px); display: flex; align-items: center; flex-direction: column; gap: 10px; }
.demo-track { position: relative; width: 100%; height: 19px; border-bottom: 1px solid var(--demo-line); }
.demo-track > span { font-size: 8px; color: var(--demo-muted); position: absolute; left: 0; top: 2px; }
.demo-ball { position: absolute; left: 32%; bottom: 4px; width: var(--demo-ball-size); height: var(--demo-ball-size); border-radius: 50%; background: #7693c1; }
.demo-ball--ease { background: #ab94c1; }
.demo-ball--smooth { background: #90b1a0; }
.demo-scene[data-interactive="false"] .demo-motion--easing .demo-ball { animation: demo-ease 3s infinite; }
.demo-scene.is-playing .demo-motion--easing .demo-ball { animation: demo-ease-once 1.8s 1 both; }
.demo-scene .demo-ball--linear { animation-timing-function: linear !important; }
.demo-scene .demo-ball--ease { animation-timing-function: ease !important; }
.demo-scene .demo-ball--smooth { animation-timing-function: ease-in-out !important; }
.demo-spring-track { position: relative; width: 100%; height: 58px; display: flex; align-items: center; }
.demo-spring-line { height: 1px; width: 100%; background: var(--demo-line); }
.demo-spring-line::before, .demo-spring-line::after { content: ''; display: block; width: 1px; height: 14px; position: absolute; left: 20px; top: 22px; background: var(--demo-line); }
.demo-spring-line::after { left: auto; right: 20px; }
.demo-spring-object { position: absolute; left: 10px; top: calc(50% - var(--demo-spring-size) / 2); width: var(--demo-spring-size); height: var(--demo-spring-size); border-radius: 11px; background: #b6a5d7; color: #f4effb; display: grid; place-items: center; font-size: 30px; box-shadow: 0 3px 9px #77639922; }
.demo-spring-label { width: 100%; display: flex; justify-content: space-between; font-size: 8px; color: var(--demo-muted); }
.demo-motion > button { font-size: 9px; min-height: 24px; }
.demo-motion-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; }
.demo-motion-setting { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--demo-muted); }
.demo-scene .demo-motion-setting select { width: auto; min-width: 90px; padding: 8px 11px; }
.demo-motion-presets { display: flex; align-items: center; justify-content: center; gap: 6px; }
.demo-motion-presets .is-selected { background: var(--demo-tint); color: var(--demo-accent); border-color: var(--demo-accent); }
.demo-scene[data-interactive="false"] .demo-motion-setting, .demo-scene[data-interactive="false"] .demo-motion-presets { display: none; }
.demo-scene[data-interactive="false"] .demo-motion-controls { justify-content: center; }
.demo-detail .demo-motion { --demo-ball-size: 18px; --demo-spring-size: 64px; width: min(100%, 480px); gap: 18px; }
.demo-detail .demo-track { height: 34px; }
.demo-detail .demo-track > span { font-size: 12px; top: 5px; }
.demo-detail .demo-ball { bottom: 6px; }
.demo-detail .demo-spring-track { height: 88px; }
.demo-detail .demo-spring-object { font-size: 42px; border-radius: 16px; }
.demo-detail .demo-spring-line::before, .demo-detail .demo-spring-line::after { top: 36px; height: 17px; }
.demo-detail .demo-spring-label { font-size: 12px; }
.demo-detail .demo-motion button, .demo-detail .demo-scramble button { font-size: 13px; min-height: 44px; padding: 9px 17px; }
.demo-detail .demo-motion--spring > button { color: var(--demo-accent); background: var(--demo-paper); border: 1px solid var(--demo-line); }
.demo-detail .demo-scramble { max-width: 480px; }
.demo-detail .demo-scramble > small { font-size: 11px; letter-spacing: 2.2px; margin-bottom: 16px; }
.demo-detail .demo-scramble-line { margin: 20px auto 12px; width: 45px; }
.demo-detail .demo-marquee { width: calc(100% + 72px); }
.demo-detail .demo-marquee > small { font-size: 11px; margin-bottom: 23px; }
.demo-detail .demo-marquee > div > span { font-size: clamp(30px, 5vw, 50px); padding: 8px 0; }
.demo-scramble { width: 100%; text-align: center; }
.demo-scramble > small { display: block; font-size: 7px; letter-spacing: 2px; margin-bottom: 8px; }
.demo-scramble > strong { font: 24px ui-monospace, monospace; letter-spacing: 1px; color: var(--demo-ink); }
.demo-scramble-line { width: 29px; height: 2px; background: var(--demo-accent); margin: 12px auto 6px; }
.demo-scramble button { font-size: 9px; }
.demo-scene[data-interactive="false"] .demo-scramble > strong { font-size: 0; }
.demo-scene[data-interactive="false"] .demo-scramble > strong::after { content: 'KHÁM PHÁ'; font-size: 24px; animation: demo-scramble-preview 3.2s steps(1) infinite; }
.demo-detail .demo-scramble > strong { font-size: clamp(22px, 5vw, 37px); }
.demo-lightbox-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; width: 100%; max-width: 260px; }
.demo-lightbox-thumb { padding: 0; border: 0; min-height: 60px; overflow: hidden; border-radius: 7px; }
.demo-lightbox-thumb:first-child { grid-row: 1 / 3; }
.demo-lightbox-thumb .demo-art { width: 100%; height: 100%; min-height: 52px; }
.demo-lightbox-grid .demo-art-orb { width: 28px; height: 28px; }
.demo-local-overlay { position: absolute; inset: 0; z-index: 12; background: #15222b70; backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.demo-lightbox-expanded { position: relative; width: 100%; max-width: 380px; text-align: center; color: #fff; }
.demo-lightbox-expanded .demo-art { height: 200px; }
.demo-lightbox-expanded > span { display: block; font-size: 11px; margin-top: 9px; }
.demo-overlay-close { position: absolute; right: 5px; top: 5px; z-index: 2; width: 27px; height: 27px; min-height: 27px; padding: 0; border-radius: 50%; color: #fff; background: #15222b66; border-color: #fff4; font-size: 18px; }
.demo-marquee { width: calc(100% + 40px); overflow: hidden; }
.demo-marquee > small { display: block; text-align: center; font-size: 7px; letter-spacing: 1.3px; margin-bottom: 13px; }
.demo-marquee > div { display: flex; width: max-content; animation: demo-marquee 13s linear infinite; }
.demo-marquee > div > span { padding: 4px 0; white-space: nowrap; font-size: 23px; line-height: 1.2; font-weight: 700; color: var(--demo-ink); letter-spacing: -1px; }
.demo-marquee > .demo-marquee-reverse { animation-direction: reverse; }
.demo-marquee .demo-marquee-reverse > span { color: transparent; -webkit-text-stroke: 1px var(--demo-muted); }
.demo-field-demo { width: min(100%, 250px); }
.demo-field-demo label { display: flex; flex-direction: column; gap: 6px; font-size: 10px; font-weight: 600; }
.demo-field-help { display: block; font-size: 8px; color: var(--demo-muted); margin-top: 7px; }
.demo-field-error { display: block; font-size: 9px; color: #bb6f70; margin-top: 6px; }
.demo-field-demo input[aria-invalid="true"] { border-color: #bb6f70 !important; box-shadow: 0 0 0 2px #bb6f7014; }
.demo-truncation { width: min(100%, 235px); display: flex; flex-direction: column; gap: 5px; }
.demo-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--demo-line); }
.demo-line-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--demo-muted); font-size: 10px; }
.demo-line-clamp.is-expanded { display: block; }
.demo-truncation button { align-self: flex-start; padding: 0; min-height: 20px; font-size: 9px; }
.demo-drag-list { width: min(100%, 250px); display: flex; flex-direction: column; gap: 7px; }
.demo-drag-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--demo-paper); border: 1px solid var(--demo-line); border-radius: 6px; box-shadow: 0 2px 4px #00000005; cursor: grab; }
.demo-drag-item strong { flex: 1; font-size: 10px; }
.demo-drag-handle { color: var(--demo-muted); font-size: 15px; }
.demo-drag-item button { min-height: 20px; padding: 1px 4px; border: 0; background: none; color: var(--demo-muted); }
.demo-drag-item.is-dragging { opacity: .45; border-color: var(--demo-accent); }
.demo-divider-demo { width: min(100%, 240px); display: flex; flex-direction: column; gap: 9px; }
.demo-divider-demo > div:first-child { display: flex; justify-content: space-between; }
.demo-divider-demo > hr { margin: 0; border: 0; background: var(--demo-line); height: 1px; width: 100%; }
.demo-divider-row { display: flex; justify-content: center; gap: 15px; font-size: 9px; color: var(--demo-muted); }
.demo-divider-row i { width: 1px; background: var(--demo-line); }
.demo-divider-label { display: flex; align-items: center; gap: 10px; }
.demo-divider-label i { height: 1px; background: var(--demo-line); flex: 1; }
.demo-divider-label small { font-size: 7px; letter-spacing: .5px; }
.demo-divider-demo > button { min-height: 24px; font-size: 9px; }
.demo-progress-demo { width: min(100%, 230px); display: flex; align-items: center; flex-direction: column; gap: 14px; }
.demo-progress-demo > div:first-child { display: flex; align-items: center; justify-content: center; gap: 40px; }
.demo-progress-ring { width: 51px; height: 51px; border-radius: 50%; background: conic-gradient(var(--demo-accent) 0 68%, var(--demo-line) 68% 100%); position: relative; display: grid; place-items: center; }
.demo-progress-ring::before { content: ''; position: absolute; inset: 5px; background: var(--demo-bg); border-radius: 50%; }
.demo-progress-ring b { position: relative; font-size: 10px; }
.demo-spinner { display: inline-block; width: 24px; height: 24px; border: 2px solid var(--demo-line); border-top-color: var(--demo-accent); border-radius: 50%; animation: demo-spin 1s linear infinite; }
.demo-progress-bar { width: 100%; height: 5px; border-radius: 5px; background: var(--demo-line); overflow: hidden; }
.demo-progress-bar i { display: block; height: 100%; width: 68%; background: var(--demo-accent); border-radius: inherit; }
.demo-progress-demo .demo-footnote { font-size: 8px; }
.demo-overflow-row { position: relative; display: flex; align-items: center; gap: 11px; width: min(100%, 260px); padding: 12px; border: 1px solid var(--demo-line); border-radius: 8px; background: var(--demo-paper); box-shadow: var(--demo-shadow); }
.demo-file-icon { display: grid; place-items: center; width: 31px; height: 34px; border-radius: 6px; background: var(--demo-tint); color: var(--demo-accent); }
.demo-overflow-row > div { flex: 1; display: flex; flex-direction: column; }
.demo-overflow-button { border: 0; background: none; padding: 4px; font-size: 13px; }
.demo-toast-demo { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.demo-toast { display: flex; align-items: center; gap: 8px; padding: 9px 11px; color: #edf1f3; background: #39454d; border: 1px solid #ffffff17; border-radius: 7px; box-shadow: 0 6px 13px #1a272b24; width: min(100%, 290px); font-size: 9px; }
.demo-toast > span { display: flex; align-items: center; gap: 6px; flex: 1; }
.demo-toast > span .demo-icon { color: #a0c4a5; width: 13px; height: 13px; flex-basis: 13px; }
.demo-toast button { color: #bed0de; padding: 2px; font-size: 9px; min-height: 20px; }
.demo-toast.is-entering { animation: demo-toast-in .25s cubic-bezier(.2,.8,.2,1) both; }
.demo-toast-demo .demo-feedback:empty { display: none; }
.demo-overlay-demo { width: 100%; }
.demo-overlay-options { display: flex; justify-content: center; gap: 7px; margin-bottom: 84px; }
.demo-modal { width: 210px; max-width: 100%; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--demo-paper); color: var(--demo-ink); border: 1px solid var(--demo-line); border-radius: 9px; box-shadow: 0 8px 24px #0003; animation: demo-modal-in .2s ease both; }
.demo-modal p { font-size: 9px; color: var(--demo-muted); }
.demo-modal > button { align-self: flex-end; min-height: 23px; padding: 5px 8px; font-size: 9px; }
.demo-local-overlay:has(.demo-modal--drawer) { justify-content: flex-end; padding: 0; }
.demo-modal--drawer { align-self: stretch; border-radius: 0; width: 65%; justify-content: center; }
.demo-local-overlay:has(.demo-modal--sheet) { align-items: flex-end; padding: 0; }
.demo-modal--sheet { width: 100%; border-radius: 10px 10px 0 0; }
.demo-detail .demo-modal { width: 290px; padding: 22px; gap: 13px; }
.demo-detail .demo-modal p { font-size: 12px; }
.demo-detail .demo-modal > button { min-height: 32px; font-size: 12px; }
.demo-popover-examples { display: flex; align-items: center; gap: 14px; position: relative; padding-bottom: 70px; width: 100%; max-width: 250px; justify-content: center; }
.demo-tooltip-target { position: relative; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--demo-line); border-radius: 6px; background: var(--demo-paper); }
.demo-tooltip { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); width: max-content; padding: 4px 7px; color: var(--demo-bg); background: var(--demo-ink); border-radius: 4px; font-size: 8px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.demo-tooltip-target:hover .demo-tooltip, .demo-tooltip-target:focus .demo-tooltip { opacity: 1; }
.demo-scene[data-interactive="false"] .demo-tooltip { opacity: 1; }
.demo-popover-mini { position: absolute; top: 47px; width: 177px; border: 1px solid var(--demo-line); background: var(--demo-paper); border-radius: 7px; padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--demo-shadow); }
.demo-popover-mini button { min-height: 18px; align-self: flex-start; padding: 0; font-size: 9px; }
.demo-scrim-demo { position: relative; width: 100%; max-width: 270px; height: 133px; border-radius: 8px; overflow: hidden; }
.demo-scrim-demo > .demo-art { height: 100%; }
.demo-scrim-layer { position: absolute; inset: 0; display: grid; place-items: center; background: #1a293666; transition: background .2s ease; }
.demo-scrim-layer > div { display: flex; align-items: center; flex-direction: column; gap: 5px; padding: 12px; background: var(--demo-paper); border: 1px solid var(--demo-line); border-radius: 7px; box-shadow: var(--demo-shadow); }
.demo-scrim-layer > div > span { font-size: 8px; color: var(--demo-muted); }
.demo-scrim-layer button { font-size: 8px; min-height: 23px; margin-top: 3px; }
.demo-scrim-layer.is-clear { background: transparent; }
.demo-skeleton-demo { display: flex; flex-direction: column; align-items: center; gap: 15px; width: min(100%, 255px); }
.demo-skeleton-card { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px; border: 1px solid var(--demo-line); border-radius: 8px; background: var(--demo-paper); }
.demo-skeleton-card i { display: block; height: 6px; background: linear-gradient(90deg, var(--demo-line), var(--demo-bg), var(--demo-line)); background-size: 200% 100%; border-radius: 3px; animation: demo-skeleton 2s linear infinite; }
.demo-skeleton-card > i { height: 42px; width: 42px; border-radius: 6px; flex-shrink: 0; }
.demo-skeleton-card > div { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.demo-skeleton-card > div > i:last-child { width: 65%; }
.demo-skeleton-loading { display: flex; align-items: center; gap: 9px; }
.demo-skeleton-loading .demo-spinner { width: 15px; height: 15px; }
.demo-autocomplete { width: min(100%, 225px); }
.demo-autocomplete-list { margin-top: 5px; border: 1px solid var(--demo-line); border-radius: 6px; padding: 4px; background: var(--demo-paper); box-shadow: var(--demo-shadow); }
.demo-autocomplete-list button { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 0; padding: 4px 7px; color: var(--demo-ink); border-radius: 4px; text-align: left; font-size: 10px; }
.demo-autocomplete-list button:hover { background: var(--demo-tint); }
.demo-autocomplete-list .demo-color-dot { width: 12px; height: 12px; }
.demo-autocomplete .demo-feedback:empty { display: none; }
.demo-command { width: min(100%, 270px); padding: 6px; border: 1px solid var(--demo-line); border-radius: 8px; background: var(--demo-paper); box-shadow: var(--demo-shadow); }
.demo-command > label { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--demo-line); padding: 4px 6px 8px; }
.demo-command input { border: 0 !important; padding: 3px !important; }
.demo-command > small { display: block; font-size: 6px; letter-spacing: .8px; padding: 7px 7px 4px; }
.demo-command > button { display: flex; justify-content: flex-start; width: 100%; border: 0; background: transparent; min-height: 23px; font-size: 9px; padding: 4px 7px; }
.demo-command > button:first-of-type { background: var(--demo-tint); color: var(--demo-accent); }
.demo-command button kbd { margin-left: auto; font-size: 7px; }
.demo-command > .demo-feedback:empty { display: none; }
.demo-accordion { width: min(100%, 260px); border: 1px solid var(--demo-line); border-radius: 7px; background: var(--demo-paper); overflow: hidden; box-shadow: var(--demo-shadow); }
.demo-accordion details { border-bottom: 1px solid var(--demo-line); }
.demo-accordion details:last-child { border-bottom: 0; }
.demo-accordion summary { display: flex; justify-content: space-between; align-items: center; padding: 9px 11px; list-style: none; cursor: pointer; font-size: 10px; font-weight: 550; }
.demo-accordion summary span { color: var(--demo-muted); font-size: 13px; }
.demo-accordion details[open] summary span { transform: rotate(45deg); }
.demo-accordion p { padding: 0 11px 10px; color: var(--demo-muted); font-size: 9px; line-height: 1.5; }
.demo-tabs { display: flex; width: min(100%, 270px); border-bottom: 1px solid var(--demo-line); gap: 5px; }
.demo-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--demo-muted); min-height: 29px; padding: 7px 8px; font-size: 10px; }
.demo-tabs button[aria-selected="true"] { border-bottom-color: var(--demo-accent); color: var(--demo-accent); }
.demo-tab-panel { min-height: 74px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: min(100%, 270px); padding: 5px 8px; }
.demo-tab-panel > span { font-size: 9px; color: var(--demo-muted); }
.demo-tiny-bars { display: flex; align-items: flex-end; gap: 8px; width: 100%; height: 28px; margin-top: 4px; }
.demo-tiny-bars i { flex: 1; height: 50%; background: #809ab94d; border-radius: 3px 3px 0 0; }
.demo-tiny-bars i:nth-child(2) { height: 80%; }
.demo-tiny-bars i:nth-child(3) { height: 60%; }
.demo-tiny-bars i:nth-child(4) { height: 100%; background: #809ab982; }
.demo-tiny-bars i:nth-child(5) { height: 74%; }
.demo-badge-types { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 20px; align-items: center; width: min(100%, 230px); }
.demo-badge-types > div { display: flex; align-items: center; gap: 8px; }
.demo-badge-types .demo-caption { font-size: 9px; width: 32px; }
.demo-count-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 2px 4px; background: #bf787c; color: white; border-radius: 50%; font-size: 8px; }
.demo-chip { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--demo-line); border-radius: 5px; background: var(--demo-paper); padding: 3px 0 3px 5px; font-size: 8px; white-space: nowrap; }
.demo-chip .demo-icon { width: 10px; height: 10px; flex-basis: 10px; }
.demo-chip button { padding: 0 3px; min-height: 14px; border: 0; background: none; }
.demo-pill { display: inline-flex; align-items: center; padding: 3px 7px; background: #87b19524; color: #72997e; border-radius: 20px; font-size: 7px; white-space: nowrap; }
.demo-tag { background: var(--demo-tint); color: var(--demo-accent); padding: 3px 6px; border-radius: 3px; font-size: 8px; }
.demo-breadcrumbs-wrap { width: 100%; max-width: 280px; }
.demo-breadcrumbs { display: flex; align-items: center; gap: 4px; padding: 7px 0; border-bottom: 1px solid var(--demo-line); white-space: nowrap; font-size: 9px; }
.demo-breadcrumbs button { min-height: 20px; padding: 2px 3px; border: 0; background: transparent; color: var(--demo-muted); font-size: inherit; }
.demo-breadcrumbs > .demo-icon { width: 10px; height: 10px; flex-basis: 10px; color: var(--demo-muted); }
.demo-breadcrumbs > span { font-weight: 600; }
.demo-breadcrumb-page { display: flex; align-items: center; flex-direction: column; gap: 4px; padding-top: 13px; }
.demo-breadcrumb-page > .demo-icon { width: 28px; height: 28px; color: #83a5c0; margin-bottom: 3px; }
.demo-breadcrumb-page > small { font-size: 8px; }
.demo-position-demo { position: relative; width: min(100%, 250px); }
.demo-position-scroll { height: 116px; overflow: auto; border: 1px solid var(--demo-line); border-radius: 7px; background: var(--demo-paper); scrollbar-width: thin; }
.demo-position-scroll header { position: sticky; top: 0; z-index: 3; background: var(--demo-accent); color: white; font-size: 9px; padding: 6px 10px; }
.demo-position-intro { padding: 11px 10px; color: var(--demo-muted); font-size: 9px; }
.demo-position-sticky { position: sticky; top: 25px; z-index: 2; padding: 4px 10px; background: var(--demo-tint); color: var(--demo-accent); font-size: 9px; }
.demo-position-scroll p { height: 7px; margin: 10px 10px; border-radius: 3px; width: 70%; background: var(--demo-line); }
.demo-position-fixed { position: absolute; bottom: 27px; right: 13px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--demo-accent); color: white; box-shadow: 0 2px 5px #0002; }
.demo-position-demo > small { display: block; margin-top: 7px; font-size: 8px; text-align: center; }
.demo-detail .demo-position-scroll { height: 215px; }
.demo-empty { text-align: center; display: flex; align-items: center; flex-direction: column; gap: 6px; }
.demo-empty-illustration { position: relative; display: grid; place-items: center; width: 53px; height: 40px; margin-bottom: 5px; background: var(--demo-tint); border-radius: 50%; }
.demo-empty-illustration .demo-icon { width: 28px; height: 28px; color: #91a6c3; }
.demo-empty-illustration > i { position: absolute; top: -3px; right: -3px; color: #c6ae7e; font-size: 18px; font-style: normal; }
.demo-empty > p { color: var(--demo-muted); font-size: 9px; }
.demo-empty > .demo-button { font-size: 9px; margin-top: 3px; }
.demo-empty > .demo-feedback:empty { display: none; }
.demo-hover-demo { position: relative; display: flex; align-items: center; gap: 9px; width: min(100%, 220px); padding-bottom: 75px; }
.demo-hover-demo > span:nth-child(2) { display: flex; flex-direction: column; }
.demo-hover-demo > span:first-child { cursor: help; }
.demo-hover-card { position: absolute; top: 48px; width: 100%; padding: 10px 12px; border: 1px solid var(--demo-line); border-radius: 8px; background: var(--demo-paper); box-shadow: var(--demo-shadow); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .18s, transform .18s; }
.demo-hover-card > div { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.demo-hover-card .demo-avatar { width: 16px; height: 16px; font-size: 5px; margin-right: -8px; border: 1px solid var(--demo-paper); }
.demo-hover-card b { margin-left: 11px; font-size: 10px; }
.demo-hover-card p { font-size: 8px; color: var(--demo-muted); margin-bottom: 4px; }
.demo-hover-card > span { font-size: 7px; color: var(--demo-accent); }
.demo-hover-demo:hover .demo-hover-card, .demo-hover-demo:focus-within .demo-hover-card, .demo-scene[data-interactive="false"] .demo-hover-card { opacity: 1; transform: translateY(0); }
.demo-choice-set { width: 190px; display: flex; flex-direction: column; gap: 14px; }
.demo-switch { position: relative; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.demo-switch input { position: absolute; width: 31px; height: 18px; margin: 0; opacity: 0; cursor: pointer; }
.demo-switch > span { display: inline-block; width: 31px; height: 18px; border-radius: 12px; background: var(--demo-line); transition: background .15s; }
.demo-switch > span::before { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; margin: 2px; box-shadow: 0 1px 3px #0002; transition: transform .15s; }
.demo-switch input:checked + span { background: var(--demo-accent); }
.demo-switch input:checked + span::before { transform: translateX(13px); }
.demo-switch input:focus-visible + span { outline: 2px solid var(--demo-accent); outline-offset: 3px; }
.demo-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.demo-check input { margin: 0; width: 13px; height: 13px; }
.demo-radio-row { display: flex; align-items: center; gap: 22px; }
.demo-radio-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.demo-radio-row input { margin: 0; width: 13px; height: 13px; }
.demo-scene--style { padding: 16px; color-scheme: light; }
.demo-scene--style > div { width: min(100%, 270px); min-height: 140px; }
.demo-detail .demo-scene--style > div { width: min(100%, 390px); min-height: 245px; }
.demo-style-skeuo { padding: 12px 17px; border-radius: 9px; background: linear-gradient(#58463b, #34271f); border: 2px solid #5d4b3f; box-shadow: inset 0 1px 1px #ae8b67, 0 9px 15px #0002; color: #c8b49b; position: relative; }
.demo-speaker { display: flex; align-items: center; justify-content: center; gap: 3px; margin-bottom: 8px; }
.demo-speaker i { height: 3px; width: 10px; background: #251a14; border-radius: 3px; box-shadow: 0 1px 0 #8b6b5366; }
.demo-skeuo-display { padding: 8px 11px; border: 2px solid #211c15; background: linear-gradient(#a4ad80, #c0c8a4); box-shadow: inset 0 2px 5px #2226; border-radius: 3px; color: #485443; display: flex; flex-direction: column; gap: 2px; }
.demo-skeuo-display small { color: #59634b; font: 6px ui-monospace, monospace; letter-spacing: 1.2px; }
.demo-skeuo-display strong { font: 13px ui-monospace, monospace; }
.demo-skeuo-display > span { font: 8px ui-monospace, monospace; letter-spacing: 1px; }
.demo-skeuo-controls { display: flex; align-items: center; justify-content: center; gap: 25px; margin-top: 8px; font-size: 10px; }
.demo-skeuo-controls button { background: linear-gradient(#dbcab2, #a58d72); border: 2px solid #372a20; border-radius: 50%; width: 29px; height: 29px; min-height: 29px; padding: 0; box-shadow: inset 0 1px 0 #fff8, 0 2px 3px #0005; color: #5b4938; }
.demo-style-neu { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; background: #e2e8ed; border-radius: 12px; padding: 16px; color: #70869a; box-shadow: 7px 7px 15px #bdc7d3, -7px -7px 15px #ffffff; }
.demo-neu-dial { width: 69px; height: 69px; padding: 10px; border-radius: 50%; box-shadow: inset 5px 5px 9px #becbd5, inset -5px -5px 9px #f7fdff; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; }
.demo-neu-dial b { font-size: 19px; font-weight: 500; }
.demo-style-neu > span { font-size: 8px; }
.demo-style-neu > div { display: flex; gap: 19px; }
.demo-style-neu button { width: 26px; height: 26px; min-height: 26px; padding: 0; border: 0; background: #e2e8ed; color: #70869a; border-radius: 50%; box-shadow: 3px 3px 6px #c1ccd6, -3px -3px 6px #fff; }
.demo-style-glass { position: relative; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: #7775a9; }
.demo-glass-orb { position: absolute; width: 110px; height: 110px; border-radius: 50%; background: linear-gradient(#cab5d8, #c387ab); filter: blur(2px); }
.demo-glass-orb--one { left: -15px; bottom: -47px; }
.demo-glass-orb--two { background: linear-gradient(#a8d4cc, #898bd1); right: -14px; top: -50px; }
.demo-glass-card { position: relative; width: 83%; padding: 14px; color: #fff; background: #ffffff24; border: 1px solid #ffffff50; border-radius: 9px; backdrop-filter: blur(9px); box-shadow: 0 8px 16px #25264112, inset 0 1px 0 #ffffff26; }
.demo-glass-card > span { font-size: 6px; letter-spacing: 2px; color: #ffffffa3; }
.demo-glass-card strong { display: block; font-size: 16px; font-weight: 500; margin: 9px 0 4px; }
.demo-glass-card small { color: #ffffff9e; font-size: 7px; }
.demo-glass-card > div { display: flex; align-items: center; margin-top: 13px; }
.demo-glass-card .demo-avatar { width: 17px; height: 17px; margin-right: -5px; border: 1px solid #ffffff61; font-size: 5px; }
.demo-glass-card > div > span:last-child { margin-left: auto; font-size: 17px; color: #ffffffc7; }
.demo-style-liquid { position: relative; border-radius: 10px; overflow: hidden; }
.demo-style-liquid > .demo-art { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.demo-style-liquid .demo-art-orb { width: 85px; height: 85px; top: -8px; right: 20px; }
.demo-liquid-pill { display: flex; gap: 6px; position: absolute; top: 39%; left: 50%; transform: translateX(-50%); padding: 8px 12px; border-radius: 35px; border: 1px solid #fff8; background: linear-gradient(140deg, #ffffff61, #ffffff0d 50%, #ffffff47); backdrop-filter: blur(6px) saturate(1.8); box-shadow: inset 0 2px 2px #ffffffbd, inset 0 -2px 2px #fff7, 0 4px 15px #5b4b7526; }
.demo-liquid-pill button { background: transparent; color: #6a547c; border: 0; border-radius: 50%; padding: 5px; min-height: 25px; }
.demo-liquid-pill .is-selected { background: #ffffff57; box-shadow: inset 0 1px 0 #fff7; }
.demo-style-liquid > span { position: absolute; bottom: 9px; width: 100%; text-align: center; font-size: 7px; color: #674e6d; }
.demo-style-brutal { color: #181818; background: #ededdb; border: 2px solid #181818; padding: 8px 11px; font-family: ui-monospace, monospace; position: relative; }
.demo-style-brutal > div { border-bottom: 2px solid #181818; font-size: 6px; padding-bottom: 4px; }
.demo-style-brutal strong { display: block; font-size: 24px; line-height: .95; letter-spacing: -1px; margin: 8px 0 7px; font-weight: 800; }
.demo-style-brutal p { position: absolute; right: 8px; top: 44px; width: 78px; font-size: 8px; border: 1px solid #181818; padding: 6px; transform: rotate(4deg); }
.demo-style-brutal button { border: 1px solid #181818; border-radius: 0; padding: 4px 7px; min-height: 20px; background: #181818; color: #f1f1dd; font-size: 7px; }
.demo-style-neo { position: relative; background: #f5d36c; color: #28262a; border: 2px solid #28262a; border-radius: 2px; box-shadow: 5px 5px 0 #28262a; padding: 15px; overflow: hidden; }
.demo-neo-sticker { position: absolute; top: 14px; right: 12px; background: #ecc4da; border: 2px solid #28262a; transform: rotate(9deg); padding: 3px 6px; font-size: 8px; font-weight: 800; }
.demo-style-neo > strong { display: block; font-size: 23px; line-height: 1; letter-spacing: -.8px; margin-bottom: 7px; font-weight: 800; }
.demo-style-neo > p { font-size: 7px; margin-bottom: 10px; }
.demo-style-neo > button { background: #b4cda7; border: 2px solid #28262a; border-radius: 2px; box-shadow: 3px 3px 0 #28262a; color: #28262a; min-height: 22px; font-size: 8px; font-weight: 750; padding: 4px 8px; }
.demo-style-neo > i { position: absolute; font-size: 50px; bottom: -10px; right: 11px; color: #8b83bf; -webkit-text-stroke: 2px #28262a; font-style: normal; }
.demo-style-y2k { position: relative; background: radial-gradient(ellipse at 80% 110%, #727baa, #c4c8e1 55%, #e8eafa); border: 1px solid #959aba; border-radius: 10px; overflow: hidden; color: #454568; padding: 12px 15px; }
.demo-style-y2k > div { display: flex; justify-content: space-between; font: 6px ui-monospace, monospace; letter-spacing: 1px; border-bottom: 1px solid #9ea1bc; padding-bottom: 5px; }
.demo-style-y2k strong { display: block; position: relative; z-index: 2; font: italic 900 28px/1 Arial, sans-serif; letter-spacing: -1.5px; color: #6e729a; text-shadow: 0 1px 0 #fff, 0 -1px 0 #505778; margin: 12px 0 10px; }
.demo-style-y2k button { position: relative; z-index: 2; border: 1px solid #7a7da0; border-radius: 15px; background: linear-gradient(#fbfcff, #b3b7d3 60%, #e5e8f5); color: #4c5078; box-shadow: inset 0 1px 0 #fff, 0 2px 5px #50577833; min-height: 20px; font: 7px ui-monospace, monospace; padding: 3px 9px; }
.demo-y2k-orbit { position: absolute; right: -17px; top: 51px; width: 145px; height: 35px; border: 5px solid #ffffff70; transform: rotate(-35deg); border-radius: 50%; box-shadow: 0 1px 1px #626c9c66, inset 0 1px 1px #626c9c66; }
.demo-style-frutiger { position: relative; overflow: hidden; border-radius: 9px; background: linear-gradient(#63b9e4 0 55%, #a4d871 55%, #6dae58); border: 1px solid #64a9c6; color: #fff; box-shadow: inset 0 1px 2px #ffffff70; }
.demo-style-frutiger::before { content: ''; position: absolute; width: 150%; height: 80px; border-radius: 50%; bottom: -46px; background: #75b563; left: -33%; box-shadow: 0 -5px 12px #4c994733; }
.demo-style-frutiger > div { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 11px; gap: 4px; }
.demo-frutiger-earth { font-size: 28px; filter: drop-shadow(0 2px 4px #265d8055); line-height: 1.1; }
.demo-style-frutiger strong { font: 500 17px 'Trebuchet MS', sans-serif; text-shadow: 0 1px 4px #398898; }
.demo-style-frutiger small { color: #efffe1; font-size: 7px; text-shadow: 0 1px 2px #3b876b; }
.demo-style-frutiger button { border: 1px solid #3f8e33; border-radius: 15px; color: #2b6e29; background: linear-gradient(#effcd6, #a7d985 48%, #7ebd62 52%, #b0dc94); box-shadow: inset 0 1px 2px #fff8, 0 1px 3px #317f5040; font-size: 8px; min-height: 22px; padding: 4px 12px; margin-top: 4px; }
.demo-aero-bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 25% 20%, #ffffffc9, #ffffff08 40%, #ffffff2b 75%, #ffffff82); border: 1px solid #ffffff7a; box-shadow: inset 0 -2px 4px #3f88b044; }
.demo-aero-bubble--one { width: 27px; height: 27px; left: 17px; top: 23px; }
.demo-aero-bubble--two { width: 42px; height: 42px; right: 13px; top: 55px; }
.demo-style-flat { background: #dce8e7; color: #315d61; padding: 12px 15px; position: relative; overflow: hidden; }
.demo-style-flat > div { display: flex; align-items: center; justify-content: space-between; font-size: 9px; }
.demo-style-flat > strong { display: block; font-size: 22px; line-height: 1.04; margin: 15px 0 11px; letter-spacing: -.5px; }
.demo-flat-sun { position: absolute; right: 20px; top: 50px; width: 39px; height: 39px; border-radius: 50%; background: #deaf79; }
.demo-style-flat button { color: #fff; background: #4e8387; border: 0; border-radius: 0; min-height: 21px; font-size: 7px; padding: 4px 9px; position: relative; }
.demo-style-minimal { background: #f5f3ed; color: #333735; padding: 15px 18px; border: 1px solid #e9e6df; }
.demo-style-minimal > div { display: flex; align-items: center; justify-content: space-between; font-size: 6px; letter-spacing: 1px; padding-bottom: 7px; border-bottom: 1px solid #d9d8d0; }
.demo-style-minimal > strong { display: block; font: 43px/1.1 Georgia, serif; letter-spacing: -2px; margin: 10px 0 4px; }
.demo-style-minimal > p { font-size: 8px; color: #8c8e85; line-height: 1.5; }
.demo-style-minimal button { background: none; border: 0; border-bottom: 1px solid #858a7e; border-radius: 0; font-size: 7px; min-height: 19px; padding: 3px 0; color: #51594d; margin-top: 7px; }
.demo-style-clay { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 4px; border-radius: 12px; padding: 12px; color: #877399; background: #e8def0; box-shadow: inset 3px 3px 10px #ffffff94, inset -5px -5px 10px #c9bbd77a, 0 8px 14px #9d86b033; }
.demo-clay-shape { position: relative; width: 57px; height: 57px; margin-bottom: 3px; border-radius: 16px; background: #c4b4d8; box-shadow: inset 5px 5px 9px #f9ebff, inset -6px -6px 9px #a994c3, 6px 8px 10px #b0a0c040; transform: rotate(-9deg); }
.demo-clay-shape i { width: 24px; height: 24px; background: #eadba8; border-radius: 50%; position: absolute; right: -10px; top: -3px; box-shadow: inset 3px 3px 5px #fff7de, inset -4px -4px 5px #cbbb8a, 2px 3px 5px #9a8fa033; }
.demo-clay-shape > span { display: grid; place-items: center; width: 100%; height: 100%; font-size: 29px; color: #f2e9fa; text-shadow: 0 1px 1px #9d85b4; }
.demo-style-clay > strong { font-size: 12px; font-weight: 600; }
.demo-style-clay > small { font-size: 7px; color: #9c8ba8; }
.demo-style-clay button { background: #d6c6e7; color: #89709e; border: 0; border-radius: 12px; box-shadow: inset 2px 2px 4px #f7ebff, inset -3px -3px 4px #bba6cf, 3px 4px 7px #b39acb38; min-height: 22px; font-size: 8px; padding: 4px 15px; margin-top: 6px; }
.demo-style-vernacular { text-align: center; border: 3px ridge #9284bd; background: #efeaf8; color: #41257b; padding: 10px; font-family: 'Times New Roman', serif; background-image: radial-gradient(#b1a0d6 1px, transparent 1px); background-size: 12px 12px; }
.demo-style-vernacular > div:first-child { font: 7px ui-monospace, monospace; color: #584380; border: 1px dashed #9284bd; background: #efeaf8; padding: 4px; }
.demo-style-vernacular > strong { display: block; color: #76599e; font: bold italic 19px Georgia, serif; text-shadow: 1px 1px #fff; margin: 10px 0 5px; }
.demo-style-vernacular > p { font-size: 12px; color: #7f6534; }
.demo-vernacular-links { margin: 9px 0 8px; color: #403ba4; font-size: 10px; }
.demo-style-vernacular > span { font: 6px ui-monospace, monospace; letter-spacing: .5px; }
.demo-style-vernacular > span > b { background: #332c48; color: #d2e9b5; padding: 3px 5px; font: 8px ui-monospace, monospace; letter-spacing: 1px; }
.demo-style-aqua { background: repeating-linear-gradient(#f8f9fc 0 2px, #e6e9f0 2px 4px); border: 1px solid #9aa4b9; border-radius: 9px; box-shadow: 0 7px 15px #27335024, inset 0 1px 0 #fff; text-align: center; color: #506181; overflow: hidden; }
.demo-style-aqua > div:first-child { display: flex; align-items: center; gap: 7px; height: 25px; padding: 0 9px; border-bottom: 1px solid #adb4c5; background: linear-gradient(#fafbfe, #d6dce7); font-size: 8px; text-shadow: 0 1px white; }
.demo-style-aqua > div:first-child strong { flex: 1; margin-right: 35px; }
.demo-aqua-sphere { display: inline-grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; font: 24px Georgia, serif; color: white; background: radial-gradient(ellipse at 50% 18%, #eff7ff 0, #9bd0fa 22%, #669bd5 45%, #2865ad 70%, #8bc2ef 96%); box-shadow: inset 0 1px 2px #fff, 0 3px 4px #233d5e26; margin: 9px 0 3px; }
.demo-style-aqua > p { font-size: 8px; color: #6c7d96; }
.demo-style-aqua button { min-height: 20px; font-size: 8px; padding: 2px 16px; border-radius: 20px; border: 1px solid #658eb4; color: #305a89; background: linear-gradient(#eef7fe 0, #a6d1f3 48%, #71a9d7 51%, #beddf6); box-shadow: inset 0 1px 0 #fff, 0 1px 3px #7e94b144; margin: 7px 0; text-shadow: 0 1px #d7ebfa; }
.demo-aqua-progress { height: 4px; margin: 0 20px 10px; border: 1px solid #a4aec0; border-radius: 3px; background: #d3dbea; overflow: hidden; }
.demo-aqua-progress > i { display: block; height: 100%; width: 60%; background: repeating-linear-gradient(110deg, #6d9ed0 0 5px, #b3d2ee 5px 10px); }
.demo-style-win-aero { border: 5px solid #b1d3e77d; border-radius: 7px; box-shadow: inset 0 0 0 1px #ffffffa6, 0 6px 12px #31405b33; background: linear-gradient(125deg, #dff1fb, #b8d7ea 50%, #d5e6f2); color: #425c77; overflow: hidden; }
.demo-win-title { display: flex; align-items: center; gap: 6px; padding: 3px 5px 6px; font-size: 9px; text-shadow: 0 0 5px white; }
.demo-win-title .demo-icon { width: 13px; height: 13px; }
.demo-win-title span { margin-left: auto; background: #b1c8db66; padding: 0 4px; border: 1px solid #8da8c1; border-radius: 0 0 3px 3px; color: #566b82; }
.demo-win-toolbar { display: flex; gap: 16px; padding: 4px 9px; border-top: 1px solid #9fb7c9; border-bottom: 1px solid #b8cbd9; background: linear-gradient(#f8fcff, #dfebf4); font-size: 8px; }
.demo-win-content { display: flex; background: #f7fafe; gap: 10px; padding: 9px; }
.demo-win-content aside { width: 61px; font-size: 8px; line-height: 2.3; }
.demo-win-content .demo-art { min-height: 53px; flex: 1; border: 3px solid white; box-shadow: 0 1px 4px #48658626; }
.demo-win-footer { padding: 4px 9px; font-size: 7px; background: #edf5fb; border-top: 1px solid #cadbe9; }
.demo-scene--style .is-activated { filter: brightness(.95); transform: translateY(1px); }
.demo-detail .demo-style-skeuo { padding: 24px 30px; }
.demo-detail .demo-skeuo-display { padding: 16px; gap: 8px; }
.demo-detail .demo-skeuo-display strong { font-size: 22px; }
.demo-detail .demo-skeuo-display small, .demo-detail .demo-skeuo-display > span { font-size: 10px; }
.demo-detail .demo-skeuo-controls { margin-top: 19px; }
.demo-detail .demo-skeuo-controls button { width: 40px; height: 40px; }
.demo-detail .demo-neu-dial { width: 110px; height: 110px; }
.demo-detail .demo-neu-dial b { font-size: 30px; }
.demo-detail .demo-style-neu { gap: 15px; }
.demo-detail .demo-style-neu button { width: 37px; height: 37px; }
.demo-detail .demo-glass-card { padding: 25px; }
.demo-detail .demo-glass-card strong { font-size: 25px; }
.demo-detail .demo-glass-card > div { margin-top: 25px; }
.demo-detail .demo-glass-card small { font-size: 11px; }
.demo-detail .demo-style-brutal strong { font-size: 43px; margin: 16px 0; }
.demo-detail .demo-style-brutal { padding: 15px 22px; }
.demo-detail .demo-style-brutal p { width: 118px; top: 85px; font-size: 12px; }
.demo-detail .demo-style-neo { padding: 27px; }
.demo-detail .demo-style-neo > strong { font-size: 37px; }
.demo-detail .demo-style-neo > p { font-size: 11px; margin: 10px 0 18px; }
.demo-detail .demo-style-neo > i { font-size: 94px; }
.demo-detail .demo-neo-sticker { font-size: 12px; right: 22px; top: 27px; }
.demo-detail .demo-style-y2k { padding: 20px 25px; }
.demo-detail .demo-style-y2k strong { font-size: 49px; margin: 24px 0; }
.demo-detail .demo-y2k-orbit { width: 220px; height: 50px; top: 90px; right: -20px; }
.demo-detail .demo-frutiger-earth { font-size: 50px; }
.demo-detail .demo-style-frutiger > div { padding-top: 30px; gap: 9px; }
.demo-detail .demo-style-frutiger strong { font-size: 28px; }
.demo-detail .demo-style-frutiger small { font-size: 11px; }
.demo-detail .demo-style-flat { padding: 23px 27px; }
.demo-detail .demo-style-flat > strong { font-size: 39px; margin: 27px 0; }
.demo-detail .demo-flat-sun { width: 63px; height: 63px; top: 87px; right: 28px; }
.demo-detail .demo-style-minimal { padding: 25px 29px; }
.demo-detail .demo-style-minimal > strong { font-size: 76px; margin: 20px 0 8px; }
.demo-detail .demo-style-minimal > p { font-size: 12px; }
.demo-detail .demo-style-clay { gap: 8px; }
.demo-detail .demo-clay-shape { width: 96px; height: 96px; border-radius: 25px; margin-bottom: 11px; }
.demo-detail .demo-clay-shape > span { font-size: 50px; }
.demo-detail .demo-clay-shape i { width: 39px; height: 39px; right: -16px; }
.demo-detail .demo-style-clay > strong { font-size: 19px; }
.demo-detail .demo-style-clay > small { font-size: 11px; }
.demo-detail .demo-style-vernacular { padding: 20px; }
.demo-detail .demo-style-vernacular > strong { font-size: 30px; margin: 20px 0 12px; }
.demo-detail .demo-style-vernacular > p { font-size: 18px; }
.demo-detail .demo-vernacular-links { font-size: 14px; margin: 17px 0; }
.demo-detail .demo-aqua-sphere { width: 70px; height: 70px; font-size: 42px; margin: 20px 0 8px; }
.demo-detail .demo-style-aqua > p { font-size: 12px; }
.demo-detail .demo-style-aqua button { min-height: 28px; margin: 15px; font-size: 12px; padding: 3px 25px; }
.demo-detail .demo-aqua-progress { margin: 0 32px 20px; height: 6px; }
.demo-detail .demo-win-title { padding: 8px; font-size: 13px; }
.demo-detail .demo-win-toolbar { padding: 8px 15px; font-size: 11px; }
.demo-detail .demo-win-content { padding: 16px; gap: 17px; }
.demo-detail .demo-win-content aside { width: 85px; font-size: 11px; }
.demo-detail .demo-win-content .demo-art { min-height: 135px; }
.demo-detail .demo-win-footer { padding: 8px 15px; font-size: 10px; }
.demo-detail .demo-style-liquid > span { bottom: 20px; font-size: 11px; }
.demo-detail .demo-liquid-pill { padding: 12px 16px; gap: 12px; }
.demo-detail .demo-liquid-pill button { width: 37px; height: 37px; }
@keyframes demo-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes demo-typing { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-3px); opacity: 1; } }
@keyframes demo-ease { 0%, 14% { left: 32%; } 68%, 82% { left: calc(100% - var(--demo-ball-size)); } 100% { left: 32%; } }
@keyframes demo-ease-once { from { left: 32%; } to { left: calc(100% - var(--demo-ball-size)); } }
@keyframes demo-spring { 0%, 8% { left: 10px; transform: rotate(-9deg) scale(.9); } 43% { left: calc(100% - var(--demo-spring-size) + var(--demo-spring-overshoot, 4px)); transform: rotate(8deg) scale(1.06); } 54% { left: calc(100% - var(--demo-spring-size) - 27px); transform: rotate(-4deg) scale(.97); } 64% { left: calc(100% - var(--demo-spring-size) - 12px); transform: rotate(2deg); } 72%, 92% { left: calc(100% - var(--demo-spring-size) - 20px); transform: rotate(0); } 100% { left: 10px; transform: rotate(-9deg) scale(.9); } }
@keyframes demo-spring-once { 0%, 8% { left: 10px; transform: rotate(-9deg) scale(.9); } 43% { left: calc(100% - var(--demo-spring-size) + var(--demo-spring-overshoot, 4px)); transform: rotate(8deg) scale(1.06); } 54% { left: calc(100% - var(--demo-spring-size) - 27px); transform: rotate(-4deg) scale(.97); } 64% { left: calc(100% - var(--demo-spring-size) - 12px); transform: rotate(2deg); } 72%, 100% { left: calc(100% - var(--demo-spring-size) - 20px); transform: rotate(0); } }
@keyframes demo-scramble-preview { 0%, 15% { content: '01#%+<>_'; } 23% { content: 'K#01+%_A'; } 31% { content: 'KHÁ# 1#Á'; } 39% { content: 'KHÁM P#Á'; } 48%, 100% { content: 'KHÁM PHÁ'; } }
@keyframes demo-marquee { to { transform: translateX(-50%); } }
@keyframes demo-spin { to { transform: rotate(360deg); } }
@keyframes demo-skeleton { to { background-position: -200% 0; } }
@keyframes demo-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes demo-modal-in { from { transform: translateY(5px) scale(.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.demo-stage.is-paused .demo-scene *, .demo-stage.is-paused .demo-scene *::before, .demo-stage.is-paused .demo-scene *::after { animation-play-state: paused !important; }
@media (max-width: 480px) { .demo-detail .demo-motion { gap: 14px; } .demo-detail .demo-motion-controls { flex-wrap: wrap; gap: 10px; justify-content: center; } .demo-detail .demo-motion-presets button { padding: 8px 11px; font-size: 12px; } .demo-detail .demo-spring-label { gap: 12px; font-size: 11px; } .demo-detail .demo-spring-label strong { text-align: right; } }
@media (max-width: 480px) { .demo-detail .demo-scene { padding: 24px; font-size: 12px; } .demo-detail .demo-scene--style { padding: 20px; } .demo-detail .demo-window { max-width: 330px; } .demo-detail .demo-table { font-size: 10px; } .demo-detail .demo-table td { padding: 11px 8px; } .demo-detail .demo-style-brutal strong { font-size: 36px; } .demo-detail .demo-style-brutal p { width: 90px; font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .demo-scene *, .demo-scene *::before, .demo-scene *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .demo-caret { opacity: 1; } .demo-scene .demo-ball { left: 70%; } .demo-spring-object { left: calc(100% - var(--demo-spring-size) - 20px); transform: none; } .demo-spinner { border-right-color: var(--demo-accent); } }

.demo-scene [data-demo-part] { transition: outline-color .15s, box-shadow .15s; }
.demo-scene [data-demo-part].is-anatomy-active { outline: 2px solid var(--demo-accent); outline-offset: 5px; box-shadow: 0 0 0 7px color-mix(in srgb, var(--demo-accent) 12%, transparent); border-radius: 5px; z-index: 4; }
.demo-scene--style .demo-style-signal-target { all: unset; display: block; box-sizing: border-box; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 5; }
.demo-scene--style .demo-style-signal-target[data-signal-region=top-edge] { inset: 0 4px auto; height: 8px; }
.demo-scene--style .demo-style-signal-target[data-signal-region=bottom-edge] { inset: auto 8px 1px; height: 8px; }
.demo-scene--style .demo-style-signal-target[data-signal-region=side-surface] { inset: 9px auto 9px 5px; width: 12px; }
.demo-scene--style .demo-style-signal-target[data-signal-region=swatch] { inset: auto auto 8px 8px; width: 22px; height: 22px; }
.demo-scene--style .demo-style-signal-target[data-signal-region=landscape-band] { inset: 30% auto 12% 5px; width: 12px; }
.demo-scene--style .demo-style-signal-target[data-signal-region=right-space] { inset: 35% 7px 18% auto; width: 12px; }
.demo-scene--style .demo-style-signal-target[data-signal-region=frame-edge] { inset: 12px auto 12px -4px; width: 5px; }
.demo-scene--style .demo-style-signal-target.is-anatomy-active { outline: 2px solid var(--demo-accent); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--demo-accent) 15%, transparent); }
.demo-flat-icon { display: inline-flex; }
.demo-anatomy-marker { position: absolute; display: none; align-items: center; justify-content: center; width: 22px; height: 22px; font: 600 11px/1 ui-sans-serif,system-ui,sans-serif; border-radius: 50%; color: var(--demo-accent); background: var(--demo-bg); border: 1px solid var(--demo-accent); box-shadow: 0 2px 5px #0001; cursor: pointer; top: -12px; right: -8px; z-index: 10; user-select: none; }
.demo-detail .demo-anatomy-marker { display: inline-flex; }
.demo-anatomy-marker--generic { top: 0; right: -24px; transform: translateY(-50%); }
.demo-anatomy-marker:hover,.demo-anatomy-marker:focus-visible,.is-anatomy-active > .demo-anatomy-marker { background: var(--demo-accent); color: var(--demo-bg); outline: 2px solid var(--demo-bg); outline-offset: 1px; }
.demo-motion-heading { align-self: flex-start; font-size: 8px; color: var(--demo-muted); font-weight: 600; letter-spacing: .09em; }
.demo-detail .demo-motion-heading { font-size: 10px; }
.demo-curve-rows { width: 100%; display: flex; flex-direction: column; gap: 9px; }
.demo-curve-row { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; }
.demo-curve-visual { position: relative; }
.demo-curve-visual > .demo-anatomy-marker { top: -3px; right: -6px; }
.demo-curve-graph { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--demo-accent); stroke-width: 2; }
.demo-curve-graph .demo-curve-axis { stroke: var(--demo-line); stroke-width: 1; }
.demo-curve-graph circle { fill: var(--demo-accent); stroke: var(--demo-bg); stroke-width: 2; }
.demo-curve-lane > span { font-size: 8px; color: var(--demo-muted); }
.demo-curve-rail { position: relative; height: 18px; border-bottom: 1px solid var(--demo-line); }
.demo-curve-rail > span { height: 8px; border-right: 1px dashed var(--demo-muted); position: absolute; right: 6px; bottom: 0; }
.demo-curve-rail .demo-ball { background: var(--demo-accent); left: 0; bottom: 3px; }
.demo-curve-row:nth-child(1) .demo-ball { background: #89949b; }
.demo-curve-row:nth-child(2) .demo-ball { background: #4d94c4; }
.demo-motion-editor { width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--demo-line); background: var(--demo-paper); display: flex; flex-direction: column; gap: 15px; }
.demo-easing-preset { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--demo-muted); font-size: 12px; }
.demo-scene .demo-easing-preset select { width: auto; max-width: 70%; }
.demo-bezier-controls { position: relative; display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.demo-bezier-controls > .demo-anatomy-marker { top: -12px; right: -4px; }
.demo-motion-setting { position: relative; }
.demo-motion-setting > .demo-anatomy-marker { top: -8px; right: -7px; }
.demo-bezier-controls label { display: grid; grid-template-columns: 20px 1fr 30px; align-items: center; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.demo-bezier-controls input,.demo-physics-settings input { width: 100%; min-width: 0; accent-color: var(--demo-accent); cursor: pointer; }
.demo-motion-editor > code { font-size: 12px; color: var(--demo-accent); overflow-wrap: anywhere; }
.demo-detail .demo-motion--easing { width: min(100%,580px); }
.demo-detail .demo-curve-row { grid-template-columns: 58px 1fr; gap: 20px; }
.demo-detail .demo-curve-lane > span { font-size: 12px; }
.demo-detail .demo-curve-rail { height: 32px; }
.demo-detail .demo-curve-rail > span { height: 14px; }
.demo-detail .demo-curve-rows { gap: 16px; }
.demo-scene.has-physics .demo-ball,.demo-scene.has-physics .demo-spring-object { animation: none !important; transition: none !important; }
.demo-spring-comparison { width: 100%; display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; }
.demo-physics-label { color: var(--demo-muted); font-size: 8px; }
.demo-physics-rail { position: relative; height: 28px; background: linear-gradient(var(--demo-line),var(--demo-line)) center/100% 1px no-repeat; }
.demo-physics-target { position: absolute; top: 0; bottom: 0; border-right: 1px dashed var(--demo-muted); opacity: .55; }
.demo-physics-target--left { left: 22%; }.demo-physics-target--right { left: 78%; }
.demo-physics-rail .demo-spring-object,.demo-spring-ease { position: absolute; top: 4px; width: 20px; height: 20px; border-radius: 5px; background: var(--demo-accent); color: var(--demo-bg); font-size: 15px; box-shadow: 0 3px 7px #0002; z-index: 2; }
.demo-spring-ease { background: #86949b; }
.demo-physics-readout { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.demo-physics-readout code { font-size: 11px; color: var(--demo-muted); font-variant-numeric: tabular-nums; }
.demo-energy-meter { width: 90px; height: 4px; overflow: hidden; border-radius: 10px; background: var(--demo-line); }
.demo-energy-meter i { display: block; height: 100%; background: var(--demo-accent); }
.demo-physics-settings { width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.demo-physics-settings label { display: flex; flex-direction: column; align-items: stretch; gap: 7px; font-size: 12px; }
.demo-physics-settings label > span { display: block; font-weight: 500; position: relative; padding-right: 16px; }
.demo-physics-settings output { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--demo-muted); }
.demo-physics-settings .demo-anatomy-marker { top: -8px; right: -6px; }
.demo-spring-actions { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.demo-spring-actions [aria-pressed=true] { color: var(--demo-accent); border-color: var(--demo-accent); background: var(--demo-tint); }
.demo-physics-note { color: var(--demo-muted); font-size: 11px; text-align: center; }
.demo-detail .demo-motion--spring { width: min(100%,580px); gap: 22px; }
.demo-detail .demo-spring-comparison { grid-template-columns: 62px 1fr; gap: 12px; }
.demo-detail .demo-physics-label { font-size: 12px; }
.demo-detail .demo-physics-rail { height: 56px; }
.demo-detail .demo-physics-rail .demo-spring-object,.demo-detail .demo-spring-ease { width: 36px; height: 36px; border-radius: 10px; top: 10px; font-size: 25px; }
.demo-detail .demo-physics-rail .demo-anatomy-marker { top: -9px; right: 18%; }
.demo-detail .demo-physics-settings input { min-height: 28px; }
.demo-detail .demo-scene--spring,.demo-detail .demo-scene--easing { min-height: 490px; }
.demo-scene[data-interactive=false] .demo-motion-editor,.demo-scene[data-interactive=false] .demo-physics-readout,.demo-scene[data-interactive=false] .demo-physics-settings,.demo-scene[data-interactive=false] .demo-spring-actions,.demo-scene[data-interactive=false] .demo-physics-note,.demo-scene[data-interactive=false] .demo-motion-controls { display: none; }
.demo-scene[data-interactive=false] .demo-motion { gap: 14px; }
.demo-mac-workspace { width: min(100%,600px); min-height: 255px; position: relative; display: grid; place-items: center; padding: 24px; border-radius: 15px; background: radial-gradient(ellipse at 20% 20%,#a2c2ce99,transparent 65%),linear-gradient(135deg,#49667a99,#6b518199); }
.demo-rich-window { width: min(100%,470px); height: 265px; display: flex; flex-direction: column; border: 1px solid #ffffffe0; outline: 1px solid #0002; border-radius: 10px; background: var(--demo-paper); box-shadow: 0 18px 38px #0003,0 4px 10px #0002; position: relative; overflow: visible; }
.demo-rich-titlebar { display: flex; align-items: center; gap: 12px; height: 53px; padding: 10px 12px; flex-shrink: 0; border-radius: 9px 9px 0 0; background: linear-gradient(180deg,var(--demo-paper),var(--demo-bg)); }
.demo-window-controls { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.demo-scene .demo-window-control { display: grid; place-items: center; width: 12px; height: 12px; min-height: 12px; border-radius: 50%; padding: 0; font-size: 10px; color: #0000; border: 1px solid #0001; }
.demo-window-controls:hover .demo-window-control,.demo-window-control:focus-visible { color: #0009; }
.demo-scene .demo-window-control--close { background:#ff615b; }.demo-scene .demo-window-control--minimize { background:#ffbd2e; }.demo-scene .demo-window-control--zoom { background:#28ca42; }
.demo-window-drag { display: flex; align-items: center; flex: 1; height: 100%; min-width: 50px; cursor: grab; touch-action: none; user-select: none; position: relative; }
.demo-window-drag strong { position: relative; font-size: 12px; font-weight: 600; }.demo-rich-window.is-moving .demo-window-drag { cursor: grabbing; }
.demo-window-unified { display: flex; align-items: center; gap: 10px; position: relative; }
.demo-window-unified > .demo-button { background: none; border: none; padding: 5px; min-height: 28px; }.demo-window-unified .demo-icon { width: 17px; height: 17px; }
.demo-scene .demo-window-accessory select { font-size: 10px; padding: 5px 7px; width: 78px; }
.demo-window-accessory { position: relative; }
.demo-window-separator { height: 1px; flex-shrink: 0; background: var(--demo-line); position: relative; }
.demo-window-document-tabs { position: relative; display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--demo-line); padding: 0 8px; height: 33px; flex-shrink: 0; background: var(--demo-bg); }
.demo-scene .demo-window-document-tabs button { border-radius: 0; background: none; border: none; min-height: 31px; font-size: 11px; flex: 1; }
.demo-window-document-tabs .is-selected { background: var(--demo-paper) !important; border-bottom: 2px solid var(--demo-accent) !important; }
.demo-window-document { min-height: 0; display: flex; flex: 1; overflow: hidden; border-radius: 0 0 9px 9px; }
.demo-window-document aside { width: 105px; border-right: 1px solid var(--demo-line); padding: 18px 9px; display: flex; flex-direction: column; gap: 15px; background: var(--demo-bg); color: var(--demo-muted); font-size: 11px; }
.demo-window-document aside > span { display: flex; gap: 5px; align-items: center; }.demo-window-document aside .demo-icon { width: 12px; height: 12px; }
.demo-window-document section { padding: 25px 17px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.demo-window-document section > strong { font-size: 14px; }.demo-window-document section > span { font-size: 10px; color: var(--demo-muted); }.demo-window-document section > i { width: 90%; height: 5px; background: var(--demo-line); border-radius: 5px; }.demo-window-document section > i:last-child { width: 60%; }
.demo-window-resize { position: absolute; right: 1px; bottom: 1px; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; }
.demo-window-resize::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg,transparent 0 3px,var(--demo-muted) 3px 4px,transparent 4px 6px); clip-path: polygon(100% 0,100% 100%,0 100%); }
.demo-window-resize .demo-anatomy-marker { right: 1px; top: -4px; clip-path: none; }
.demo-window-hint { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; color: #fff; font-size: 10px !important; text-shadow: 0 1px 2px #0007; }
.demo-rich-window.is-zoomed { width: 100% !important; height: 310px !important; }
.demo-rich-titlebar > .demo-anatomy-marker { left: 70px; top: -11px; right: auto; }
.demo-window-drag > .demo-anatomy-marker { right: 2px; top: 21px; }
.demo-window-unified > .demo-anatomy-marker:nth-of-type(1) { right: 15px; top: -21px; }.demo-window-unified > .demo-anatomy-marker:nth-of-type(2) { left: 3px; top: -15px; }
.demo-window-accessory > .demo-anatomy-marker { top: 20px; right: -11px; }
.demo-window-document-tabs > .demo-anatomy-marker { top: 21px; right: 30px; }
.demo-window-separator > .demo-anatomy-marker { left: 2px; right: auto; top: -10px; }
.demo-rich-menubar { width: min(100%,650px); height: 310px; overflow: visible; border-radius: 14px; background: radial-gradient(ellipse at 65% 60%,#b9b5e066,transparent 45%),linear-gradient(140deg,#8fbaca,#626993); }
.demo-rich-menubar .demo-menubar { position: relative; height: 35px; padding: 0 11px; background: #eff4f5c9; color: #29383d; border-radius: 14px 14px 0 0; font-size: 11px; backdrop-filter: blur(20px); overflow: visible; gap: 12px; }
.demo-rich-menubar .demo-menubar .demo-button { color: inherit; font-size: 11px; min-height: 26px; padding: 3px 7px; border: none; background: transparent; border-radius: 5px; }
.demo-rich-menubar .demo-menubar .is-selected { background: #ffffffad; box-shadow: 0 1px 4px #0001; }
.demo-app-menus { display: flex; align-items: center; position: relative; gap: 1px; }.demo-menu-flex { flex: 1; }.demo-status-item { display: flex; align-items: center; position: relative; }.demo-status-item .demo-icon { width: 16px; height: 16px; }.demo-status-highlight { position: relative; display: inline-flex; }
.demo-rich-menubar .demo-menubar-drop { position: absolute; top: 42px; right: 22px; left: auto; }
.demo-rich-menubar .demo-menu { position: relative; min-width: 225px; background: color-mix(in srgb,var(--demo-paper) 86%,transparent); border: 1px solid #ffffffb3; box-shadow: 0 12px 35px #0003,0 3px 8px #0002; backdrop-filter: blur(20px); border-radius: 8px; }
.demo-rich-menubar .demo-menu > button { min-height: 28px; position: relative; font-size: 11px; }.demo-rich-menubar .demo-menu > button:hover,.demo-rich-menubar .demo-menu > button:focus-visible { background: #327ad4; color: #fff; outline: none; }.demo-rich-menubar .demo-menu > button:focus-visible span { color: inherit; }
.demo-menu-wallpaper { position: absolute; bottom: 35px; left: 30px; display: flex; flex-direction: column; color: #ffffffe0; gap: 8px; }.demo-menu-wallpaper > span:first-child { font-size: 38px; }.demo-menu-wallpaper > span:last-child { font-size: 13px; font-weight: 500; }
.demo-menubar-feedback { position: absolute; left: 18px; right: 18px; bottom: 8px; color: #fff; font-size: 10px; min-height: 12px; text-shadow: 0 1px 2px #0005; }
.demo-rich-menubar .demo-menu > .demo-anatomy-marker:first-child { top: 63px; right: -11px; }.demo-rich-menubar .demo-menu > .demo-anatomy-marker:nth-of-type(2) { left: -11px; top: 67px; right: auto; }
.demo-rich-menubar .demo-menu [data-demo-part="6"] > .demo-anatomy-marker { top: 3px; right: auto; left: -18px; }.demo-rich-menubar .demo-menu [data-demo-part="8"] > .demo-anatomy-marker { right: -20px; top: -3px; }
.demo-rich-menubar .demo-status-item > .demo-anatomy-marker { right: -7px; top: 26px; }.demo-rich-menubar .demo-status-highlight > .demo-anatomy-marker { right: 24px; top: -11px; }.demo-rich-menubar [data-demo-part="3"] > .demo-anatomy-marker { right: -20px; top: -15px; }
.demo-scene[data-interactive=false] .demo-mac-workspace { min-height: 130px; padding: 5px; }.demo-scene[data-interactive=false] .demo-rich-window { height: 125px; width: 230px; }.demo-scene[data-interactive=false] .demo-rich-titlebar { height: 24px; padding: 5px; gap: 5px; }.demo-scene[data-interactive=false] .demo-window-drag strong { font-size: 8px; }.demo-scene[data-interactive=false] .demo-window-control { width: 7px; height: 7px; min-height: 7px; }.demo-scene[data-interactive=false] .demo-window-unified { gap: 3px; }.demo-scene[data-interactive=false] .demo-window-accessory select { width: 45px; font-size: 7px; padding: 2px; }.demo-scene[data-interactive=false] .demo-window-document-tabs { height: 19px; }.demo-scene[data-interactive=false] .demo-window-document-tabs button { font-size: 7px; min-height: 18px; }.demo-scene[data-interactive=false] .demo-window-document aside { width: 54px; padding: 10px 4px; font-size: 7px; gap: 7px; }.demo-scene[data-interactive=false] .demo-window-document section { padding: 11px 7px; gap: 6px; }.demo-scene[data-interactive=false] .demo-window-document section > strong { font-size: 8px; }.demo-scene[data-interactive=false] .demo-window-document section > span { font-size: 6px; }.demo-scene[data-interactive=false] .demo-window-document section > i { height: 3px; }.demo-scene[data-interactive=false] .demo-window-hint { display: none; }
.demo-scene[data-interactive=false] .demo-rich-menubar { width: 255px; height: 133px; }.demo-scene[data-interactive=false] .demo-rich-menubar .demo-menubar { height: 21px; padding: 0 5px; gap: 4px; font-size: 7px; }.demo-scene[data-interactive=false] .demo-rich-menubar .demo-menubar .demo-button { font-size: 7px; min-height: 18px; padding: 2px 3px; }.demo-scene[data-interactive=false] .demo-rich-menubar .demo-menubar-drop { top: 25px; right: 10px; }.demo-scene[data-interactive=false] .demo-rich-menubar .demo-menu { min-width: 133px; padding: 3px; }.demo-scene[data-interactive=false] .demo-rich-menubar .demo-menu > button { font-size: 7px; min-height: 18px; padding: 4px; }.demo-scene[data-interactive=false] .demo-menu-wallpaper { left: 12px; bottom: 15px; }.demo-scene[data-interactive=false] .demo-menu-wallpaper > span:first-child { font-size: 24px; }.demo-scene[data-interactive=false] .demo-menu-wallpaper > span:last-child { font-size: 8px; }
.demo-timeline i.is-current { animation: demo-status-pulse 2.4s ease-in-out infinite; }.demo-scene[data-interactive=false] .demo-timeline > div { animation: demo-timeline-arrive 5s infinite both; }.demo-scene[data-interactive=false] .demo-timeline > div:nth-child(2) { animation-delay: .55s; }.demo-scene[data-interactive=false] .demo-timeline > div:nth-child(3) { animation-delay: 1.1s; }
.demo-status-dot--green,.demo-status-dot.is-online { animation: demo-status-pulse 2.4s ease-in-out infinite; }
.demo-scene[data-interactive=false] .demo-parallax-mountain { animation: demo-parallax-depth 7s ease-in-out infinite; }.demo-scene[data-interactive=false] .demo-parallax-front { animation: demo-parallax-depth 7s ease-in-out infinite reverse; }.demo-scene[data-interactive=false] .demo-progress-bar i { animation: demo-progress-fill 4s ease-in-out infinite; }
.demo-timeline-controls { display: flex; flex-direction: column; align-items: center; gap: 6px; }.demo-timeline .is-complete i { background: var(--demo-accent); }.demo-scene[data-interactive=false] .demo-timeline-controls { display: none; }
@keyframes demo-parallax-depth { 0%,100% { transform: translate(0,0); } 50% { transform: translate(8px,12px); } }
@keyframes demo-progress-fill { 0%,8% { width: 3%; } 75%,95% { width: 95%; } 100% { width: 3%; } }
.demo-style-glass .demo-glass-orb--one,.demo-style-liquid .demo-art-orb,.demo-style-clay .demo-clay-shape { animation: demo-material-float 5s ease-in-out infinite; }.demo-style-glass .demo-glass-orb--two { animation: demo-material-float 6s ease-in-out infinite reverse; }
.demo-scene[data-interactive=false] .demo-rich-menubar .demo-menu > button:first-of-type { animation: demo-menu-preview 5s infinite; }.demo-scene[data-interactive=false] .demo-skeleton-card { animation: demo-content-pulse 3s infinite; }
.demo-drag-item { will-change: transform; }.demo-drag-item.is-dragging { box-shadow: 0 10px 20px #0002; transform: scale(1.03); }.demo-accordion details { overflow: hidden; }.demo-button,.demo-tabs button,.demo-segments button { transition: color .18s,background-color .18s,border-color .18s,box-shadow .18s; }
.demo-carousel-dots { display: flex; gap: 6px; }.demo-scene .demo-carousel-dots .demo-button { min-height: 9px; height: 9px; width: 9px; padding: 0; border-radius: 50%; background: var(--demo-line); border: none; }.demo-carousel-dots [aria-pressed=true] { background: var(--demo-accent) !important; }.demo-detail .demo-carousel-dots .demo-button { min-height: 11px; width: 11px; height: 11px; }
.demo-marquee > div { mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }.demo-marquee.is-paused > div span { animation-play-state: paused !important; }.demo-marquee > .demo-button { margin: 8px auto 0; display: block; }.demo-scene[data-interactive=false] .demo-marquee > .demo-button { display: none; }
.demo-table input[type=checkbox] { width: 12px; height: 12px; accent-color: var(--demo-accent); padding: 0; }.demo-table th { position: relative; }.demo-table th:first-child,.demo-table td:first-child { width: 24px; padding: 6px 4px; }.demo-table th:nth-child(2),.demo-table td:nth-child(2) { width: var(--demo-name-width,110px); max-width: var(--demo-name-width,110px); }.demo-table tr:nth-child(even) { background: color-mix(in srgb,var(--demo-line) 18%,transparent); }.demo-table tr.is-selected { background: var(--demo-tint); }.demo-scene .demo-table-resize { position: absolute; right: 0; top: 4px; bottom: 4px; width: 8px; min-height: 15px; padding: 0; border: none; background: none; color: var(--demo-muted); cursor: col-resize; touch-action: none; font-size: 12px; }.demo-table-resize:focus-visible { outline: 2px solid var(--demo-accent); }
.demo-provider-button { width: 100%; }.demo-provider-divider { display: flex; gap: 8px; align-items: center; }.demo-provider-divider > i { flex: 1; height: 1px; background: var(--demo-line); }.demo-provider-divider small { font-size: 8px; color: var(--demo-muted); }.demo-password-wrap { display: flex; align-items: stretch; position: relative; }.demo-password-wrap input { flex: 1; min-width: 0; padding-right: 30px !important; }.demo-scene .demo-password-toggle { position: absolute; right: 4px; top: 3px; bottom: 3px; min-height: 18px; padding: 2px 5px; border: none; background: none; color: var(--demo-muted); }.demo-detail .demo-scene--sign-in-form { min-height: 470px; }.demo-scene[data-interactive=false] .demo-form { gap: 4px; }.demo-scene[data-interactive=false] .demo-provider-button { min-height: 18px; padding: 2px; font-size: 7px; }.demo-scene[data-interactive=false] .demo-form > small { font-size: 6px; }
@keyframes demo-status-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--demo-accent) 30%,transparent); } 60% { box-shadow: 0 0 0 6px transparent; } }
@keyframes demo-timeline-arrive { 0%,7% { opacity: .3; transform: translateY(5px); } 18%,92% { opacity: 1; transform: translateY(0); } 100% { opacity: .3; } }
@keyframes demo-material-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes demo-menu-preview { 0%,35%,100% { background: transparent; } 48%,78% { background: #327ad4; color: #fff; } }
@keyframes demo-content-pulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
.demo-scene { --demo-font:"DucDZ Demo Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --demo-mono:"DucDZ Demo Mono",ui-monospace,SFMono-Regular,Consolas,monospace; --demo-shadow:0 1px 2px #1724380d,0 3px 10px #1724380a; --demo-accent:#087aff; --demo-tint:#e9f2ff; --demo-ink:#17212f; --demo-muted:#677180; font-family:var(--demo-font); background-image:radial-gradient(#c4ccd533 .7px,transparent .7px); background-size:16px 16px; }
[data-theme=dark] .demo-scene { --demo-paper:#232428; --demo-bg:#191b20; --demo-line:#ffffff1c; --demo-accent:#58a3ff; --demo-tint:#1e3557; --demo-ink:#f2f4f7; --demo-muted:#a0a4af; --demo-shadow:0 1px 2px #0002,0 3px 10px #0001; background-image:radial-gradient(#ffffff0e .7px,transparent .7px); }
.demo-scene :is(strong,b) { font-weight:650; letter-spacing:-.015em; }
.demo-scene :is(code,kbd) { font-family:var(--demo-mono); }
.demo-anatomy-marker { color:#fff; background:#7c3aed; border-color:#ffffff80; box-shadow:0 0 0 1px #7c3aed,0 1px 2px #0002; }
.demo-anatomy-marker:hover,.demo-anatomy-marker:focus-visible { background:#6d28d9; color:#fff; }
.demo-detail .demo-scene:is(.demo-scene--data-table,.demo-scene--bottom-navigation,.demo-scene--timeline,.demo-scene--status-dot,.demo-scene--chat-bubble,.demo-scene--steps,.demo-scene--avatar-group,.demo-scene--multi-select,.demo-scene--scrollspy) { padding:28px 24px; min-height:360px; }

.demo-table-wrap { max-width:292px; border-radius:10px; overflow:visible; }.demo-table { table-layout:fixed; font-size:10px; }.demo-table th { height:24px; padding:0 7px; font-size:9px; background:transparent; }.demo-table td { height:23px; padding:4px 7px; overflow:hidden; text-overflow:ellipsis; }.demo-table th:nth-child(2),.demo-table td:nth-child(2) { width:var(--demo-name-width,95px); max-width:var(--demo-name-width,95px); }.demo-table th:nth-child(3),.demo-table td:nth-child(3) { width:78px; }.demo-table th:nth-child(4),.demo-table td:nth-child(4) { text-align:right; font-variant-numeric:tabular-nums; }.demo-table th button { width:100%; font-size:inherit; gap:4px; justify-content:flex-start; font-weight:550; }.demo-table th:nth-child(4) button { justify-content:flex-end; }.demo-table th button>span { opacity:.6; }.demo-table th[aria-sort] button>span { opacity:1; }.demo-table th .demo-table-resize { width:8px; }
.demo-table-tag { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; border-radius:10px; line-height:1.2; font-size:8px; font-weight:600; padding:2px 5px; }.demo-table-tag--paid { background:#e5f7ed; color:#177747; }.demo-table-tag--overdue { background:#fff0f2; color:#bb3654; }.demo-table-tag--pending { background:#fff6d9; color:#986700; }[data-theme=dark] .demo-table-tag--paid { background:#1b4233; color:#7ae3b2; }[data-theme=dark] .demo-table-tag--overdue { background:#482a34; color:#ff97b0; }[data-theme=dark] .demo-table-tag--pending { background:#493c20; color:#f9d45d; }
.demo-table-total { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border-top:1px solid var(--demo-line); font-size:11px; background:color-mix(in srgb,var(--demo-bg) 55%,transparent); }.demo-table-total strong { font-variant-numeric:tabular-nums; }.demo-table-footer { display:flex; align-items:center; justify-content:space-between; gap:5px; padding:5px 7px; font-size:8px; color:var(--demo-muted); border-top:1px solid var(--demo-line); border-radius:0 0 10px 10px; }.demo-table-footer>div { display:flex; align-items:center; gap:4px; white-space:nowrap; }.demo-table-footer .demo-button { width:17px; min-height:17px; height:17px; padding:0; font-size:12px; }.demo-table-footer [data-table-page-label] { margin-right:3px; }.demo-scene[data-interactive=false].demo-scene--data-table { padding:10px 16px; }.demo-scene[data-interactive=false] .demo-table-total { display:none; }
.demo-detail .demo-table-wrap { max-width:440px; }.demo-detail .demo-table { font-size:12px; }.demo-detail .demo-table th { height:28px; font-size:11px; }.demo-detail .demo-table td { height:24px; padding:4px 9px; }.demo-detail .demo-table th:nth-child(3),.demo-detail .demo-table td:nth-child(3) { width:106px; }.demo-detail .demo-table-tag { font-size:10px; padding:4px 7px; }.demo-detail .demo-table-footer { padding:5px 10px; font-size:10px; }.demo-detail .demo-table-footer .demo-button { width:26px; height:26px; min-height:26px; font-size:17px; }.demo-detail .demo-table-total { padding:6px 12px; font-size:11px; }

.demo-phone { position:relative; flex-shrink:0; width:236px; height:318px; background:linear-gradient(155deg,#ffb478 0%,#ff72a4 37%,#8355f4 70%,#264fd3 100%); border:5px solid #27323e; border-radius:36px; overflow:hidden; box-shadow:0 1px 2px #0002,0 7px 14px #213a4d17; }[data-theme=dark] .demo-phone { border-color:#3b3c42; }.demo-phone-island { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:72px; height:17px; border-radius:20px; background:#15202b; }.demo-phone-content { padding:43px 14px 100px; }.demo-phone-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; color:#301d44; }.demo-phone-heading>strong { font-size:20px; font-weight:750; }.demo-phone-heading>.demo-icon { width:20px; height:20px; }.demo-phone-note { display:flex; align-items:center; gap:9px; background:#ffffff32; box-shadow:inset 0 1px #fff6; border-radius:13px; padding:12px 11px; margin-top:9px; color:#40213b; backdrop-filter:blur(16px); font-size:12px; font-weight:550; }
.demo-bottom-nav { position:absolute; inset:auto 13px 22px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:7px 2px 6px; border:1px solid #ffffff2e; border-radius:26px; background:#39294968; backdrop-filter:blur(26px) saturate(160%); box-shadow:inset 0 1px #fff3,0 4px 12px #17193c28; }.demo-bottom-nav .demo-button { min-width:0; min-height:39px; padding:2px 0; gap:3px; color:#ffffffb5; border-radius:18px; }.demo-bottom-icon { position:relative; display:inline-flex; }.demo-bottom-nav .demo-icon { width:18px; height:18px; stroke-width:1.9; }.demo-bottom-nav small { font-size:7px; line-height:1.1; color:inherit; white-space:nowrap; letter-spacing:-.03em; }.demo-bottom-nav .is-selected { color:#75b9ff; }.demo-bottom-nav button:hover { background:#ffffff13; }.demo-bottom-badge { position:absolute; top:-4px; right:-6px; display:grid; place-items:center; font-size:7px; width:12px; height:12px; border-radius:50%; background:#ff3863; color:#fff; border:1px solid #ffffff55; }.demo-phone-home { position:absolute; width:84px; height:4px; border-radius:5px; background:#fff9; bottom:7px; left:50%; transform:translateX(-50%); }.demo-scene[data-interactive=false] .demo-phone { position:absolute; bottom:9px; }.demo-detail .demo-phone { width:248px; height:326px; }.demo-detail .demo-bottom-nav .demo-button { min-height:43px; padding:3px 0; }.demo-detail .demo-bottom-nav small { font-size:8px; }

.demo-timeline-card { width:min(100%,260px); border:1px solid var(--demo-line); border-radius:12px; background:var(--demo-paper); box-shadow:var(--demo-shadow); }.demo-timeline-card>header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 13px; border-bottom:1px solid var(--demo-line); font-size:11px; }.demo-timeline-card>header>span { color:var(--demo-muted); font-size:9px; }.demo-timeline { width:100%; padding:14px 14px 12px; }.demo-timeline>div { padding:0 0 13px 67px; gap:0; min-height:37px; }.demo-timeline>div::before { left:51px; top:13px; width:2px; background:color-mix(in srgb,var(--demo-accent) 45%,transparent); }.demo-timeline>div>i { left:46px; top:2px; width:12px; height:12px; border-width:1.5px; background:var(--demo-paper); display:grid; place-items:center; }.demo-timeline>div>i>svg { width:9px; height:9px; color:#fff; stroke-width:2; }.demo-timeline>div.is-complete>i { background:var(--demo-accent); }.demo-timeline i.is-current { background:var(--demo-paper); box-shadow:none; }.demo-timeline>div>small { position:absolute; left:0; top:1px; width:37px; text-align:right; font-size:8px; font-weight:500; color:var(--demo-muted); }.demo-timeline section>strong { font-size:10px; line-height:1.3; }.demo-timeline section>span { font-size:8px; margin-top:1px; line-height:1.3; }.demo-timeline-controls { padding:0 12px 12px; }
.demo-detail .demo-timeline-card { width:min(100%,340px); }.demo-detail .demo-timeline-card>header { padding:12px 17px; font-size:13px; }.demo-detail .demo-timeline { padding:20px 18px 14px; }.demo-detail .demo-timeline>div { min-height:49px; padding-bottom:17px; padding-left:78px; }.demo-detail .demo-timeline>div::before { left:59px; }.demo-detail .demo-timeline>div>i { left:53px; width:14px; height:14px; }.demo-detail .demo-timeline>div>small { width:44px; font-size:10px; }.demo-detail .demo-timeline section>strong { font-size:12px; }.demo-detail .demo-timeline section>span { font-size:10px; }.demo-scene[data-interactive=false] .demo-timeline-card { width:min(100%,238px); }.demo-scene[data-interactive=false] .demo-timeline-card>header { display:none; }.demo-scene[data-interactive=false] .demo-timeline { padding:13px 13px 12px; }.demo-scene[data-interactive=false] .demo-timeline>div { padding-bottom:9px; min-height:33px; animation:none; }

.demo-presence-card { width:min(100%,292px); border:1px solid var(--demo-line); border-radius:12px; background:var(--demo-paper); box-shadow:var(--demo-shadow); }.demo-presence-card>header { display:flex; align-items:center; gap:8px; padding:12px 15px; border-bottom:1px solid var(--demo-line); font-size:11px; }.demo-presence-card>header>.demo-status-dot { position:relative; right:auto; bottom:auto; border:none; }.demo-presence-card>header>span { margin-left:auto; font-size:10px; color:var(--demo-muted); }.demo-presence { width:100%; padding:22px 18px; }.demo-presence>div { gap:16px; }.demo-presence .demo-avatar--coral { background:linear-gradient(135deg,#ff855b,#f04b83); color:#fff; width:68px; height:68px; font-size:24px; font-weight:650; }.demo-presence .demo-status-dot { width:17px; height:17px; border:3px solid var(--demo-paper); bottom:0; right:0; }.demo-status-dot--green { background:#00b985; }.demo-status-dot--orange { background:#f2ac25; }.demo-status-dot--red { background:#f14f6c; }.demo-status-dot--gray { background:#97a0b0; }.demo-presence strong { font-size:14px; }.demo-presence small { font-size:11px; margin-top:3px; }.demo-presence-options { display:flex; justify-content:space-between; gap:2px; flex-wrap:wrap; border-top:1px solid var(--demo-line); padding:10px; }.demo-presence-options .demo-button { min-height:29px; padding:4px 6px; font-size:9px; border:none; background:none; }.demo-presence-options .demo-button .demo-status-dot { position:static; width:7px; height:7px; border:none; flex-shrink:0; }.demo-presence-options .is-selected { background:var(--demo-bg); color:var(--demo-ink); }
.demo-scene[data-interactive=false] .demo-presence-card { border:none; background:none; box-shadow:none; width:226px; }.demo-scene[data-interactive=false] .demo-presence-card>header,.demo-scene[data-interactive=false] .demo-presence-options { display:none; }.demo-scene[data-interactive=false] .demo-presence { padding:0; }.demo-detail .demo-presence strong { font-size:16px; }.demo-detail .demo-presence .demo-avatar--coral { width:78px; height:78px; font-size:27px; }

.demo-chat-card { width:min(100%,310px); border:1px solid var(--demo-line); border-radius:12px; background:var(--demo-paper); box-shadow:var(--demo-shadow); }.demo-chat-card>header { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--demo-line); font-size:12px; }.demo-chat-card>header>.demo-icon { margin-left:auto; color:var(--demo-accent); }.demo-chat-avatar { width:26px; height:26px; background:linear-gradient(135deg,#ff855b,#f04b83); color:#fff; font-size:9px; font-weight:650; }.demo-chat { width:100%; padding:16px 15px; gap:8px; }.demo-chat p { position:relative; background:#eff1f5; border:none; border-radius:16px; font-size:11px; line-height:1.4; padding:7px 11px; max-width:88%; font-weight:500; }.demo-chat-bubble::before { content:''; position:absolute; bottom:0; left:-5px; width:12px; height:12px; border-radius:0 0 10px 0; background:inherit; z-index:-1; }.demo-chat .demo-chat-own p { background:#1684ff; color:#fff; border-radius:16px; }.demo-chat-own .demo-chat-bubble::before { left:auto; right:-5px; border-radius:0 0 0 10px; }.demo-chat-receipt { align-self:flex-end; display:inline-flex; align-items:center; gap:3px; font-size:8px!important; color:var(--demo-muted); margin-top:-4px; }.demo-chat-receipt .demo-icon { width:10px; height:10px; color:var(--demo-accent); }.demo-chat-typing { width:34px; min-height:23px; align-items:center; justify-content:center; }.demo-chat-typing i { width:4px; height:4px; background:#9299a4; }[data-theme=dark] .demo-chat p:not(.demo-chat-own p) { background:#35373d; }.demo-scene[data-interactive=false] .demo-chat-card { border:none; background:none; box-shadow:none; }.demo-scene[data-interactive=false] .demo-chat-card>header { display:none; }.demo-scene[data-interactive=false] .demo-chat { padding:0; }.demo-detail .demo-chat p { font-size:13px; padding:9px 13px; }.demo-detail .demo-chat-receipt { font-size:10px!important; }

.demo-steps { width:min(100%,310px); background:var(--demo-paper); border:1px solid var(--demo-line); border-radius:13px; box-shadow:var(--demo-shadow); padding:20px 16px 15px; gap:12px; }.demo-step-nodes { width:100%; padding:0 10px; }.demo-step-nodes>span { flex-shrink:0; width:25px; height:25px; border-radius:50%; background:var(--demo-paper); border:1px solid var(--demo-line); box-shadow:none; position:relative; }.demo-step-nodes>span>button { width:100%; height:100%; min-height:0; padding:0; border:none; background:transparent; color:inherit; border-radius:inherit; font-size:11px; }.demo-step-nodes>span .demo-icon { width:13px; height:13px; }.demo-step-nodes>span.is-complete { border-color:var(--demo-accent); background:var(--demo-paper); color:var(--demo-accent); }.demo-step-nodes>span.is-current { background:var(--demo-accent); border-color:var(--demo-accent); color:#fff; box-shadow:0 0 0 4px var(--demo-tint); }.demo-step-nodes>i { margin:0 5px; height:1px; background:var(--demo-accent); }.demo-step-labels { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); text-align:center; gap:3px; font-size:9px; }.demo-step-labels .is-current { color:var(--demo-ink); font-weight:650; }.demo-scene[data-interactive=false] .demo-step-description,.demo-scene[data-interactive=false] .demo-steps>button { display:none; }.demo-scene[data-interactive=false] .demo-steps { padding:17px 11px; }.demo-detail .demo-steps { width:min(100%,380px); padding:26px 18px 20px; gap:16px; }.demo-detail .demo-step-nodes>span { width:32px; height:32px; }.demo-detail .demo-step-nodes>span>button { min-height:0; font-size:13px; }.demo-detail .demo-step-labels { font-size:11px; }

.demo-avatar-group-wrap { width:min(100%,286px); border:1px solid var(--demo-line); border-radius:12px; background:var(--demo-paper); box-shadow:var(--demo-shadow); gap:0; text-align:left; align-items:stretch; }.demo-avatar-group { padding:17px 13px 17px 22px; margin:0; min-height:75px; align-items:center; flex-wrap:nowrap; }.demo-avatar-group .demo-avatar { width:43px; height:43px; flex-shrink:0; border:2px solid var(--demo-paper); margin-left:-10px; color:#fff; font-size:12px; font-weight:650; }.demo-avatar-group .demo-team-avatar { transition:margin .3s,transform .3s; }.demo-team-avatar--0 { background:linear-gradient(135deg,#ff875d,#f04b83); }.demo-team-avatar--1 { background:linear-gradient(135deg,#4b9eff,#476add); }.demo-team-avatar--2 { background:linear-gradient(135deg,#bc77f2,#7850d8); }.demo-team-avatar--3 { background:linear-gradient(135deg,#f4ad46,#ea7a46); }.demo-team-avatar--4 { background:linear-gradient(135deg,#3bbb96,#178c71); }.demo-team-avatar--5 { background:linear-gradient(135deg,#69aac5,#366e9f); }.demo-team-avatar--6 { background:linear-gradient(135deg,#f48bac,#bd598b); }.demo-team-avatar--7 { background:linear-gradient(135deg,#7e92b5,#52678f); }.demo-avatar-group .demo-avatar--more { background:#e7e8ef; color:#62687d; padding:0; min-height:43px; box-shadow:none; font-size:12px; }.demo-avatar-caption { display:flex; flex-direction:column; gap:3px; padding:12px 15px; border-top:1px solid var(--demo-line); }.demo-avatar-caption>strong { font-size:13px; }.demo-avatar-caption>small { font-size:10px; }.demo-avatar-group.is-expanded { flex-wrap:wrap; gap:7px; padding:14px; }.demo-avatar-group.is-expanded .demo-avatar { margin:0; width:39px; height:39px; min-height:39px; }
.demo-detail .demo-avatar-group-wrap { width:min(100%,350px); }.demo-detail .demo-avatar-group { padding:24px 20px 24px 32px; }.demo-detail .demo-avatar-group .demo-avatar { width:51px; height:51px; font-size:14px; min-height:51px; margin-left:-12px; }.demo-detail .demo-avatar-group.is-expanded { padding:20px; gap:9px; }.demo-detail .demo-avatar-group.is-expanded .demo-avatar { margin:0; }.demo-scene[data-interactive=false] .demo-avatar-group-wrap { border:none; background:none; box-shadow:none; }.demo-scene[data-interactive=false] .demo-avatar-caption { display:none; }

.demo-multi-select { width:min(100%,310px); display:flex; justify-content:center; flex-wrap:wrap; align-items:flex-start; gap:10px; }.demo-multi-variant { width:154px; background:var(--demo-paper); border:1px solid var(--demo-line); border-radius:10px; padding:11px; box-shadow:var(--demo-shadow); }.demo-multi-variant>.demo-caption { display:block; margin-bottom:7px; font-size:9px; font-weight:600; }.demo-multi-summary { display:flex; justify-content:space-between; width:100%; border-radius:6px; min-height:25px; font-size:9px; padding:4px 7px; }.demo-multi-options { display:flex; flex-direction:column; gap:0; padding:4px; margin:6px 0 0; border:1px solid var(--demo-line); border-radius:6px; box-shadow:0 2px 5px #00000008; }.demo-multi-options .demo-button { padding:4px 3px; width:100%; min-height:23px; border:none; border-radius:4px; justify-content:flex-start; background:transparent; font-size:10px; }.demo-multi-options .is-selected { color:var(--demo-ink); }.demo-multi-check { display:grid; place-items:center; width:12px; height:12px; border:1px solid #aab1bb; border-radius:3px; color:transparent; background:var(--demo-paper); }.demo-multi-check>.demo-icon { width:10px; height:10px; flex-basis:10px; }.demo-multi-options [aria-pressed=true] .demo-multi-check { background:var(--demo-accent); color:#fff; border-color:var(--demo-accent); }
.demo-multi-token-field { display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:8px 6px; border:1px solid var(--demo-line); border-radius:6px; font-size:9px; color:var(--demo-muted); }.demo-multi-token-field>.demo-icon { width:11px; height:11px; }.demo-multi-chips { display:flex; gap:4px; width:100%; flex-wrap:wrap; border-top:1px solid var(--demo-line); padding-top:6px; margin-top:3px; min-height:20px; }.demo-multi-chips>.demo-button { min-height:21px; padding:3px 5px; font-size:8px; background:var(--demo-tint); border-color:transparent; color:var(--demo-accent); }.demo-multi-transfer-variant { width:100%; }.demo-multi-transfer { display:flex; align-items:stretch; gap:6px; }.demo-multi-transfer>section { flex:1; min-width:0; border:1px solid var(--demo-line); border-radius:6px; }.demo-multi-transfer>span { display:grid; place-items:center; color:var(--demo-accent); font-size:16px; }.demo-multi-transfer>section>b { display:block; padding:5px 7px; border-bottom:1px solid var(--demo-line); font-size:9px; color:var(--demo-muted); }.demo-multi-transfer .demo-button { display:flex; width:100%; justify-content:flex-start; padding:4px 6px; border:none; background:transparent; min-height:23px; font-size:9px; }.demo-multi-transfer .demo-icon { width:11px; height:11px; }.demo-scene[data-interactive=false] .demo-multi-token-variant,.demo-scene[data-interactive=false] .demo-multi-transfer-variant { display:none; }.demo-scene[data-interactive=false] .demo-multi-variant { width:164px; padding:9px; }.demo-detail .demo-multi-select { width:min(100%,420px); gap:12px; }.demo-detail .demo-multi-variant:not(.demo-multi-transfer-variant) { flex:1; width:auto; min-width:145px; }.demo-detail .demo-multi-summary { min-height:32px; font-size:11px; }.demo-detail .demo-multi-options .demo-button { min-height:30px; font-size:12px; }.demo-detail .demo-multi-variant>.demo-caption { font-size:10px; }.demo-detail .demo-multi-transfer .demo-button { min-height:28px; font-size:10px; }

.demo-scrollspy { width:min(100%,310px); height:145px; flex-direction:row-reverse; gap:13px; border-radius:12px; padding:13px; }.demo-scrollspy nav { width:96px; padding:0; border:none; background:transparent; }.demo-scrollspy nav>strong { display:block; color:var(--demo-muted); text-transform:uppercase; font-size:7px; letter-spacing:.035em; margin-bottom:7px; }.demo-scrollspy nav .demo-button { border-radius:0; border-left:1px solid var(--demo-line); padding:6px 0 6px 9px; font-size:9px; font-weight:450; min-height:25px; }.demo-scrollspy nav .is-selected { border-left:2px solid var(--demo-accent); background:none; color:var(--demo-ink); font-weight:650; }.demo-scrollspy-body { padding:0 9px 0 0; }.demo-scrollspy-body section { min-height:128px; padding:0 0 12px; }.demo-scrollspy-body b { display:block; font-size:11px; margin-bottom:9px; }.demo-scrollspy-body .demo-scrollspy-lines { height:5px; border-radius:5px; margin:7px 0; background:var(--demo-line); }.demo-scrollspy-body .demo-scrollspy-lines:nth-of-type(2) { width:88%; }.demo-scrollspy-body .demo-scrollspy-lines:nth-of-type(3) { width:72%; }.demo-scrollspy-mini-card { position:relative; margin-top:12px; padding:8px 8px 8px 35px; height:36px; border:1px solid var(--demo-line); border-radius:6px; }.demo-scrollspy-mini-card>i { position:absolute; width:20px; height:20px; top:7px; left:7px; background:var(--demo-tint); border-radius:4px; }.demo-scrollspy-mini-card>span { display:block; height:4px; border-radius:3px; background:var(--demo-line); margin:4px 0; }.demo-scrollspy-mini-card>span:last-child { width:60%; }.demo-scrollspy-body code { display:block; margin-top:10px; background:var(--demo-bg); padding:7px 6px; border:1px solid var(--demo-line); border-radius:5px; font-size:8px; white-space:nowrap; }
.demo-detail .demo-scrollspy { width:min(100%,390px); height:244px; padding:17px; }.demo-detail .demo-scrollspy nav { width:111px; }.demo-detail .demo-scrollspy nav>strong { font-size:9px; }.demo-detail .demo-scrollspy nav .demo-button { font-size:11px; padding-block:9px; }.demo-detail .demo-scrollspy-body section { min-height:225px; padding-bottom:24px; }.demo-detail .demo-scrollspy-body b { font-size:13px; margin-bottom:16px; }.demo-detail .demo-scrollspy-body .demo-scrollspy-lines { height:6px; margin:10px 0; }.demo-detail .demo-scrollspy-mini-card { height:48px; margin-top:21px; }.demo-detail .demo-scrollspy-body code { font-size:10px; }

@media(max-width:480px) { .demo-detail .demo-scene:is(.demo-scene--data-table,.demo-scene--bottom-navigation,.demo-scene--timeline,.demo-scene--status-dot,.demo-scene--chat-bubble,.demo-scene--steps,.demo-scene--avatar-group,.demo-scene--multi-select,.demo-scene--scrollspy) { padding:24px 14px; }.demo-detail .demo-table { font-size:10px; }.demo-detail .demo-table th { font-size:9px; padding:0 4px; }.demo-detail .demo-table td { padding:4px; }.demo-detail .demo-table th:nth-child(2),.demo-detail .demo-table td:nth-child(2) { width:var(--demo-name-width,75px); max-width:var(--demo-name-width,75px); }.demo-detail .demo-table th:nth-child(3),.demo-detail .demo-table td:nth-child(3) { width:68px; }.demo-detail .demo-table-tag { font-size:8px; padding:3px 4px; }.demo-detail .demo-table-footer { flex-wrap:wrap; padding:7px; gap:5px; }.demo-detail .demo-table-footer>div { margin-left:auto; }.demo-detail .demo-phone { width:min(100%,248px); }.demo-detail .demo-presence .demo-avatar--coral { width:64px; height:64px; font-size:23px; }.demo-detail .demo-presence { padding:20px 13px; }.demo-detail .demo-presence strong { font-size:14px; }.demo-detail .demo-avatar-group { padding:22px 14px 22px 26px; }.demo-detail .demo-avatar-group .demo-avatar { width:44px; height:44px; min-height:44px; font-size:12px; }.demo-detail .demo-avatar-group.is-expanded { padding:14px; }.demo-detail .demo-multi-variant:not(.demo-multi-transfer-variant) { min-width:135px; }.demo-detail .demo-scrollspy { padding:12px; gap:10px; }.demo-detail .demo-scrollspy nav { width:92px; }.demo-detail .demo-scrollspy nav .demo-button { font-size:10px; }.demo-detail .demo-timeline>div { padding-left:67px; }.demo-detail .demo-timeline>div>i { left:45px; }.demo-detail .demo-timeline>div::before { left:51px; }.demo-detail .demo-timeline>div>small { width:36px; font-size:9px; }.demo-detail .demo-timeline section>strong { font-size:11px; } }
@media(max-width:600px) { .demo-detail .demo-scene--spring,.demo-detail .demo-scene--easing { padding: 26px 20px; }.demo-detail .demo-motion--spring { gap: 18px; }.demo-physics-settings { gap: 12px; }.demo-physics-settings label { font-size: 10px; }.demo-physics-settings output { font-size: 11px; }.demo-detail .demo-spring-actions .demo-button { min-height: 44px; padding: 7px 10px; font-size: 11px; }.demo-detail .demo-spring-comparison { grid-template-columns: 48px 1fr; }.demo-detail .demo-physics-label { font-size: 10px; }.demo-bezier-controls { gap: 12px; }.demo-bezier-controls label { grid-template-columns: 16px 1fr 25px; gap: 5px; font-size: 11px; }.demo-easing-preset { font-size: 10px; }.demo-detail .demo-curve-row { grid-template-columns: 44px 1fr; gap: 14px; }.demo-detail .demo-curve-lane > span { font-size: 10px; }.demo-mac-workspace { padding: 26px 8px; min-height: 290px; }.demo-rich-window { height: 230px; min-width: 260px; }.demo-rich-titlebar { gap: 7px; padding: 8px; }.demo-window-drag strong { font-size: 10px; }.demo-window-unified { gap: 2px; }.demo-window-unified .demo-icon { width: 14px; }.demo-scene .demo-window-accessory select { width: 60px; font-size: 9px; }.demo-window-document aside { width: 76px; font-size: 9px; }.demo-window-document section { padding: 17px 12px; }.demo-window-document section > strong { font-size: 12px; }.demo-window-document section > span { font-size: 9px; }.demo-rich-menubar { height: 300px; }.demo-rich-menubar .demo-menubar { gap: 5px; padding: 0 7px; font-size: 9px; }.demo-rich-menubar .demo-menubar .demo-button { font-size: 9px; padding: 3px 4px; }.demo-rich-menubar .demo-menubar-drop { right: 15px; }.demo-rich-menubar .demo-menu { min-width: 210px; }.demo-anatomy-marker { width: 20px; height: 20px; font-size: 10px; } }
@media(prefers-reduced-motion:reduce) { .demo-scene *, .demo-scene *::before, .demo-scene *::after { animation: none !important; transition: none !important; }.demo-scene.has-physics .demo-ball,.demo-scene.has-physics .demo-spring-object { left: 0; } }

.demo-pointer-board { max-width:310px; gap:16px 22px; }.demo-pointer-image { display:grid; place-items:center; width:42px; height:43px; }.demo-pointer-image img { object-fit:contain; max-width:100%; }.demo-pointer-sample small { font-size:9px; white-space:nowrap; }.demo-detail .demo-pointer-board { gap:22px 32px; }.demo-detail .demo-pointer-sample small { font-size:11px; }.demo-scene[data-interactive=false] .demo-pointer-board { gap:8px 20px; }.demo-scene[data-interactive=false] .demo-pointer-target { display:none; }

.demo-scene[data-interactive=false] .demo-table td { height:20px; padding:3px 6px; line-height:12px; }.demo-scene[data-interactive=false] .demo-table td:first-child { padding:3px 4px; }.demo-table input[type=checkbox] { margin:0; vertical-align:middle; }.demo-scene[data-interactive=false] .demo-table th { height:20px; }.demo-scene[data-interactive=false] .demo-table th button { min-height:18px; }.demo-scene[data-interactive=false] .demo-table th:nth-child(3),.demo-scene[data-interactive=false] .demo-table td:nth-child(3) { width:88px; }.demo-scene[data-interactive=false] .demo-table th:nth-child(2),.demo-scene[data-interactive=false] .demo-table td:nth-child(2) { width:90px; }.demo-scene[data-interactive=false] .demo-table-footer { height:22px; padding:3px 7px; }.demo-bottom-nav > .demo-anatomy-marker--generic { right:2px; top:-10px; transform:none; }.demo-phone-home > .demo-anatomy-marker--generic { top:-25px; right:0; transform:none; }
.demo-pointer-catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; width:min(100%,410px); max-height:250px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:10px; border:1px solid var(--demo-line); border-radius:10px; background:var(--demo-paper); }.demo-pointer-catalog figure { display:flex; gap:9px; align-items:center; min-width:0; margin:0; padding:8px 4px; }.demo-pointer-catalog .demo-pointer-image { flex-shrink:0; width:34px; }.demo-pointer-catalog code { font-size:8px; overflow-wrap:anywhere; }.demo-pointer-catalog small { display:block; font-size:8px; color:var(--demo-muted); margin-top:3px; }.demo-scene[data-interactive=false] .demo-pointer-catalog { display:none; }.demo-detail .demo-scene--pointer { min-height:520px; }.demo-scene { background-image:radial-gradient(#c3cbd988 .7px,transparent .7px); }[data-theme=dark] .demo-scene { background-image:radial-gradient(#ffffff17 .7px,transparent .7px); }

.demo-scene { background-image:radial-gradient(circle,#b6c2d17a 1px,transparent 1px); background-size:16px 16px; }[data-theme=dark] .demo-scene { background-image:radial-gradient(circle,#ffffff1c 1px,transparent 1px); }.demo-bottom-nav { background:#ffffff4a; border-color:#ffffff66; box-shadow:inset 0 1px #ffffff66,0 4px 12px #17193c20; }.demo-bottom-nav .demo-button { color:#4b3977; }.demo-bottom-nav .is-selected { color:#0868d8; }[data-theme=dark] .demo-bottom-nav { background:#35294c68; border-color:#ffffff2e; }[data-theme=dark] .demo-bottom-nav .demo-button { color:#ffffffb5; }[data-theme=dark] .demo-bottom-nav .is-selected { color:#75b9ff; }

.demo-table-header-marker { top:-24px; right:auto; width:16px; height:16px; font-size:9px; transform:none; }.demo-table-header-marker--1 { left:calc(50% - 8px); }.demo-table-header-marker--2 { right:-8px; }.demo-table-header-marker--3 { right:auto; }

.demo-detail .demo-scene:is(.demo-scene--slider,.demo-scene--split-view) { min-height:310px; height:310px; }
.demo-detail .demo-scene:is(.demo-scene--data-table,.demo-scene--bottom-navigation) { min-height:310px; height:310px; padding:0; }
.demo-detail .demo-table-wrap { width:64%; min-width:272px; max-width:372px; border-radius:7px; transform:translateY(-4px); box-shadow:0 1px 2px #00000008; }
.demo-detail .demo-table { font-size:11px; line-height:1.2; }
.demo-detail .demo-table th { height:26px; padding:0 8px; font-size:10.5px; font-weight:500; border-bottom:1px solid var(--demo-line); }
.demo-detail .demo-table td { height:26px; padding:0 8px; border:0; font-weight:450; }
.demo-detail .demo-table td:nth-child(2) { font-weight:500; }
.demo-detail .demo-table th:first-child,.demo-detail .demo-table td:first-child { width:30px; padding:0 8px; }
.demo-detail .demo-table th:nth-child(2),.demo-detail .demo-table td:nth-child(2) { width:var(--demo-name-width,auto); max-width:none; }
.demo-detail .demo-table th:nth-child(3),.demo-detail .demo-table td:nth-child(3),.demo-detail .demo-table th:nth-child(4),.demo-detail .demo-table td:nth-child(4) { width:var(--demo-other-width,84px); }
.demo-detail .demo-table th button:not(.demo-table-resize) { min-height:24px; padding:0; font-weight:500; gap:4px; }
.demo-table-sort-indicator { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.demo-table-sort-indicator .demo-icon { width:10px; height:10px; flex-basis:10px; }
.demo-detail .demo-table th button>.demo-table-sort-indicator { opacity:0; }
.demo-detail .demo-table th:hover button>.demo-table-sort-indicator,.demo-detail .demo-table th:focus-within button>.demo-table-sort-indicator,.demo-detail .demo-table th[aria-sort] button>.demo-table-sort-indicator { opacity:1; }
.demo-table th[aria-sort=ascending] .demo-table-sort-indicator .demo-icon { transform:rotate(180deg); }
.demo-detail .demo-table .demo-table-resize { width:9px; min-height:26px; top:0; right:-5px; bottom:auto; padding:0; color:var(--demo-muted); touch-action:none; z-index:5; }
.demo-table-resize>i { display:block; width:1px; height:15px; background:var(--demo-line); }
.demo-table-resize:hover>i,.demo-table-resize:focus-visible>i { background:var(--demo-accent); }
.demo-detail .demo-table-tag { font-size:9.5px; padding:2px 6px; line-height:1.2; font-weight:500; }
.demo-detail .demo-table input[type=checkbox] { width:12px; height:12px; }
.demo-detail .demo-table-footer { height:30px; min-height:30px; padding:0 10px; font-size:10px; gap:4px; flex-wrap:nowrap; border-radius:0 0 7px 7px; }
.demo-detail .demo-table-footer>div { gap:4px; margin-left:0; }
.demo-detail .demo-table-footer .demo-button { width:18px; height:18px; min-height:18px; padding:0; font-size:12px; border-radius:4px; }
.demo-detail .demo-table-footer .demo-button:disabled { opacity:.35; }
.demo-detail .demo-table [data-demo-part="4"]>td:first-child,.demo-detail .demo-table [data-demo-part="5"]>td:last-child { overflow:visible; }
.demo-detail .demo-table [data-demo-part="4"]>td:first-child>.demo-anatomy-marker { top:50%; left:-25px; right:auto; transform:translateY(-50%); width:16px; height:16px; font-size:9px; }
.demo-detail .demo-table [data-demo-part="5"]>td:last-child>.demo-anatomy-marker { top:50%; right:-25px; left:auto; transform:translateY(-50%); width:16px; height:16px; font-size:9px; }
.demo-detail .demo-phone { position:absolute; top:-22px; left:50%; bottom:auto; transform:translateX(-50%); width:236px; height:318px; border-radius:34px; background:linear-gradient(160deg,#ffb36b 0%,#ff6f91 38%,#7a5cff 72%,#2b3a8f 100%); }
.demo-detail .demo-phone-content { padding:43px 14px 100px; }
.demo-detail .demo-phone-heading { margin-bottom:12px; }
.demo-detail .demo-phone-heading>strong { font-size:15px; font-weight:600; }
.demo-detail .demo-phone-note { gap:8px; margin-top:8px; padding:9px 10px; font-size:10px; border-radius:10px; }
.demo-detail .demo-phone-note>.demo-icon { width:20px; height:20px; flex-basis:20px; }
.demo-detail .demo-bottom-nav { left:26px; right:26px; bottom:22px; height:50px; padding:5px 1px 4px; border:1px solid #ffffffb3; border-radius:25px; background:#ffffffa6; box-shadow:0 6px 20px #0000002e; backdrop-filter:blur(16px) saturate(160%); }
.demo-detail .demo-bottom-nav .demo-button { min-height:38px; padding:1px 0; gap:3px; color:#4c465e; }
.demo-detail .demo-bottom-nav small { font-size:8px; letter-spacing:-.035em; }
.demo-detail .demo-bottom-nav .is-selected { color:#2563eb; }
.demo-detail .demo-bottom-badge { width:13px; height:13px; font-size:8px; }
.demo-detail .demo-phone-home { width:84px; height:4px; bottom:7px; background:#000c; }
[data-theme=dark] .demo-detail .demo-bottom-nav { background:#26272c99; border-color:#ffffff33; }
[data-theme=dark] .demo-detail .demo-bottom-nav .demo-button { color:#ffffffb5; }
[data-theme=dark] .demo-detail .demo-bottom-nav .is-selected { color:#75b9ff; }
[data-theme=dark] .demo-detail .demo-phone-home { background:#ffffffd9; }
.demo-detail .demo-split-frame { width:min(100%,400px); }
.demo-detail .demo-split-toolbar { height:36px; }
.demo-detail .demo-split-toolbar .demo-traffic { width:50px; gap:6px; }
.demo-detail .demo-split-toolbar .demo-traffic i { width:12px; height:12px; }
.demo-detail .demo-split { min-height:160px; height:160px; grid-template-columns:var(--demo-sidebar-width) 9px minmax(0,1fr); }
.demo-detail .demo-split-sidebar { padding:7px; }
.demo-detail .demo-split-sidebar>span { min-height:28px; font-size:11px; padding:5px; }
.demo-detail .demo-split>section { padding:14px; }
.demo-detail .demo-split .demo-art { min-height:77px; margin-bottom:8px; }
.demo-detail .demo-split>section>strong { font-size:12px; }
.demo-detail .demo-split small { font-size:10px; }
.demo-split-document { display:flex; flex-direction:column; gap:7px; padding:6px 0; }
.demo-split-document>i { display:block; height:4px; border-radius:2px; width:100%; background:var(--demo-line); }
.demo-split-document>i:first-child { width:46%; height:7px; margin-bottom:7px; background:color-mix(in srgb,var(--demo-muted) 28%,var(--demo-paper)); }
.demo-split-document>i:nth-child(3),.demo-split-document>i:last-child { width:68%; }
.demo-split-document>div { display:flex; flex-direction:column; gap:5px; margin:5px 0; padding:8px 10px; border:1px solid var(--demo-line); border-radius:4px; }
.demo-split-document>div>i { width:100%; height:3px; border-radius:2px; background:var(--demo-line); }
.demo-split-document>div>i:first-child { width:56%; }
.demo-native-sliders { width:min(100%,332px); display:flex; flex-direction:column; gap:32px; }
.demo-native-slider-row { display:grid; grid-template-columns:70px minmax(0,1fr); align-items:center; gap:16px; }
.demo-native-label { font-size:12.5px; text-align:right; line-height:1.25; font-weight:500; }
.demo-native-range { position:relative; height:28px; --demo-slider-fill:#287cf2; }
.demo-native-track { position:absolute; top:12px; left:0; right:0; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--demo-slider-fill) var(--demo-slider-value),#d0d2d5 var(--demo-slider-value)); }
.demo-native-thumb { position:absolute; top:14px; left:var(--demo-slider-value); width:20px; height:20px; transform:translate(-50%,-50%); border:1px solid #c9cbd0; border-radius:50%; background:#fff; box-shadow:0 1px 2px #00000026; pointer-events:none; }
.demo-scene .demo-native-range input[type=range] { position:absolute; inset:0; width:100%; height:28px; margin:0; opacity:0; z-index:2; }
.demo-native-range:focus-within .demo-native-thumb { outline:3px solid #2684ff66; outline-offset:2px; }
.demo-native-ticks { position:absolute; top:21px; left:0; right:0; height:5px; }
.demo-native-ticks>i { position:absolute; width:1px; height:5px; background:var(--demo-muted); }
.demo-native-range:has([data-native-slider=repeat]) .demo-native-track { background:#d0d2d5; }
.demo-native-sliders [data-demo-part]>.demo-anatomy-marker { width:16px; height:16px; font-size:9px; z-index:3; }
.demo-native-thumb>.demo-anatomy-marker { top:-22px; left:1px; right:auto; transform:none; pointer-events:auto; }
.demo-native-track>.demo-anatomy-marker { top:-25px; right:30%; transform:none; }
.demo-native-label>.demo-anatomy-marker { top:-22px; right:0; transform:none; }
.demo-native-ticks>.demo-anatomy-marker { top:15px; left:calc(50% - 8px); right:auto; transform:none; }
[data-theme=dark] .demo-native-track,[data-theme=dark] .demo-native-range:has([data-native-slider=repeat]) .demo-native-track { background-color:#606269; }
@media(max-width:600px) { .demo-detail .demo-table-wrap { width:calc(100% - 48px); min-width:0; max-width:372px; }.demo-detail .demo-table th:first-child,.demo-detail .demo-table td:first-child { width:26px; padding:0 6px; }.demo-detail .demo-table th:nth-child(3),.demo-detail .demo-table td:nth-child(3) { width:var(--demo-other-width,64px); }.demo-detail .demo-table th:nth-child(4),.demo-detail .demo-table td:nth-child(4) { width:var(--demo-other-width,76px); }.demo-detail .demo-table th,.demo-detail .demo-table td { padding-inline:6px; }.demo-detail .demo-table-footer { padding-inline:7px; font-size:9px; }.demo-detail .demo-table-footer [data-table-page-label] { margin-right:0; }.demo-detail .demo-split-frame { width:min(100%,300px); }.demo-native-sliders { width:min(100%,310px); }.demo-native-slider-row { grid-template-columns:62px minmax(0,1fr); gap:14px; }.demo-native-label { font-size:12px; } }