.hux-wave-b { color: var(--hux-fg, #dbe8ee); display: grid; gap: 1rem; min-width: 0; } .hux-wave-b__heading { border-bottom: 1px solid color-mix(in srgb, var(--hux-accent, #21d4c2) 34%, transparent); display: grid; gap: 0.3rem; padding-bottom: 0.7rem; } .hux-wave-b__heading h3, .hux-wave-b__heading p, .hux-wave-b__card h4, .hux-wave-b__card h5 { margin: 0; } .hux-wave-b__card, .hux-wave-b__lineage, .hux-wave-b__notebook { background: color-mix(in srgb, var(--hux-panel, #111b28) 92%, transparent); border: 1px solid color-mix(in srgb, var(--hux-accent, #21d4c2) 18%, transparent); border-radius: 0.8rem; display: grid; gap: 0.65rem; padding: 0.9rem; } .hux-wave-b__card:focus-within, .hux-wave-b__lineage:focus-within, .hux-wave-b__notebook:focus-within { border-color: color-mix(in srgb, var(--hux-accent, #21d4c2) 62%, transparent); } .hux-wave-b__current { color: var(--hux-accent, #21d4c2); font-size: 0.75em; letter-spacing: 0.08em; text-transform: uppercase; } .hux-wave-b__tags, .hux-wave-b__choices, .hux-wave-b__actions { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; } .hux-wave-b__tags li { background: color-mix(in srgb, var(--hux-accent, #21d4c2) 13%, transparent); border-radius: 999px; font-size: 0.78rem; padding: 0.18rem 0.5rem; } .hux-wave-b button, .hux-wave-b a { color: var(--hux-accent, #5be4d5); } .hux-wave-b button { background: color-mix(in srgb, var(--hux-accent, #21d4c2) 10%, var(--hux-panel, #111b28)); border: 1px solid color-mix(in srgb, var(--hux-accent, #21d4c2) 42%, transparent); border-radius: 0.5rem; cursor: pointer; padding: 0.5rem 0.7rem; } .hux-wave-b button:focus-visible, .hux-wave-b a:focus-visible, .hux-wave-b input:focus-visible, .hux-wave-b textarea:focus-visible, .hux-wave-b summary:focus-visible, .hux-wave-b pre:focus-visible { outline: 3px solid color-mix(in srgb, var(--hux-accent, #21d4c2) 70%, white); outline-offset: 2px; } .hux-wave-b button[disabled] { cursor: not-allowed; opacity: 0.55; } .hux-wave-b__choices button { display: grid; gap: 0.2rem; min-width: min(12rem, 100%); text-align: left; } .hux-wave-b__choices button[aria-checked="true"] { background: color-mix(in srgb, var(--hux-accent, #21d4c2) 24%, var(--hux-panel, #111b28)); border-color: var(--hux-accent, #21d4c2); } .hux-wave-b__choices span, .hux-wave-b__gap { color: var(--hux-muted, #91a3af); font-size: 0.82rem; } .hux-wave-b__form, .hux-wave-b__form label { display: grid; gap: 0.45rem; } .hux-wave-b input, .hux-wave-b textarea { background: var(--hux-input, #0b1420); border: 1px solid color-mix(in srgb, var(--hux-accent, #21d4c2) 30%, transparent); border-radius: 0.5rem; color: inherit; font: inherit; max-width: 100%; padding: 0.55rem; } .hux-wave-b__preview { background: #07101a; border-radius: 0.5rem; max-height: 24rem; overflow: auto; padding: 0.75rem; white-space: pre-wrap; word-break: break-word; } .hux-wave-b blockquote { border-left: 3px solid color-mix(in srgb, var(--hux-accent, #21d4c2) 45%, transparent); margin: 0.45rem 0 0; padding-left: 0.75rem; } .hux-wave-b summary { cursor: pointer; font-weight: 650; } @media (prefers-reduced-motion: reduce) { .hux-wave-b *, .hux-wave-b *::before, .hux-wave-b *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }