/*! The Loom */
.dwx-app .dwx-loom-group { margin-top: 24px; }
.dwx-app .dwx-loom-group legend { display: flex; align-items: center; gap: 10px; font-family: var(--dwx-serif); font-size: 1.4rem; color: var(--dwx-cream); margin-bottom: 12px; }
.dwx-app .dwx-loom-group legend span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--dwx-gold); color: var(--dwx-gold); font-family: var(--dwx-sans); font-size: 14px; font-weight: 700; }
.dwx-app .dwx-loom-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.dwx-app .dwx-loom-opt { position: relative; display: flex; cursor: pointer; margin: 0; }
.dwx-app .dwx-loom-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dwx-app .dwx-loom-opt span { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--dwx-line); background: var(--dwx-surface); transition: border-color .15s, background-color .15s; }
.dwx-app .dwx-loom-opt strong { font-family: var(--dwx-serif); font-size: 1.3rem; font-weight: 600; color: var(--dwx-cream); line-height: 1.2; }
.dwx-app .dwx-loom-opt em { font-style: normal; font-size: 14px; color: var(--dwx-muted); line-height: 1.45; }
.dwx-app .dwx-loom-opt:hover span { border-color: var(--dwx-line-strong); }
.dwx-app .dwx-loom-opt input:checked + span { border-color: var(--dwx-gold); background: var(--dwx-soft); box-shadow: inset 0 0 0 1px var(--dwx-gold); }
.dwx-app .dwx-loom-opt input:focus-visible + span { outline: 2px solid var(--dwx-gold); outline-offset: 2px; }
.dwx-app .dwx-loom-bg { opacity: .35; }
.dwx-app .dwx-loom-bg.is-bright { opacity: .7; }
.dwx-app .dwx-loom-play .dwx-narr { min-height: 500px; }
.dwx-app .dwx-loom-play .dwx-line { text-shadow: 0 0 6px #010F2A, 0 0 18px #010F2A, 0 0 32px #010F2A; }
.dwx-app .dwx-loom-sleep { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dwx-app .dwx-loom-sleep .dwx-lead { font-family: var(--dwx-serif); font-style: italic; font-size: 1.8rem; color: var(--dwx-cream); }