.uth { --uth-bg: #0c1330; --uth-line: #2b3766; --uth-code-bg: #070b18; --uth-code: #cfd6f3; --uth-muted: #7d89b6; --uth-accent: #ff8a5c; --uth-accent-ink: #1a0c05;
	background: var(--uth-bg); border: 1px solid var(--uth-line); border-radius: 12px; padding: 16px; font-size: 12.5px; position: sticky; top: 24px; }
.uth summary { font-weight: 600; font-size: 14px; cursor: pointer; }
.uth__sub, .uth__source { color: var(--uth-muted); margin: 6px 0 12px; }
.uth__req { margin: 0 0 8px; font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace); font-size: 11.5px; line-height: 1.55;
	white-space: pre-wrap; word-break: break-word; color: var(--uth-code); background: var(--uth-code-bg); border-radius: 8px; padding: 12px; }
.uth__req .k { color: #8ab4ff; } .uth__req .s { color: #ffc28a; } .uth__req .n { color: #9be29b; } .uth__req .m { color: #8ab4ff; font-weight: 600; }
.uth__cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.uth__tile { border-radius: 8px; padding: 8px 10px; background: var(--uth-code-bg); }
.uth__tile b { display: block; font-size: 16px; }
.uth__toggle { display: flex; margin-top: 12px; border: 1px solid var(--uth-line); border-radius: 8px; overflow: hidden; }
.uth__toggle a { flex: 1; text-align: center; padding: 6px; text-decoration: none; color: inherit; }
.uth__toggle a[aria-current="page"] { background: var(--uth-accent); color: var(--uth-accent-ink); font-weight: 600; }

/* Try chips */
.demo-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 22px; font-size: 12.5px; }
.demo-chips ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.demo-chips a { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px dashed color-mix(in srgb, currentColor 40%, transparent); color: inherit; text-decoration: none; }
.demo-chips a:hover, .demo-chips a:focus-visible { border-style: solid; }