/* Beautiful UI workbench, themed with Hypatia Blackhole Chroma tokens. */
.hy-wb { --hy-wb-tint: var(--hy-cyan); width:100%; min-width:0; margin:16px 0; overflow:hidden; border:1px solid var(--hy-line); border-radius:18px; background:var(--hy-glass); box-shadow:inset 0 1px 0 color-mix(in oklch,var(--hy-text) 7%,transparent),0 8px 30px color-mix(in oklch,var(--hy-glow) 40%,transparent); font-size:13px; line-height:1.55; color:var(--hy-text); }
.hy-wb *, .hy-wb *::before, .hy-wb *::after { box-sizing:border-box; }
.hy-wb h3, .hy-wb h4, .hy-wb p { margin:0; }
.hy-wb-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:14px 16px; border-bottom:1px solid var(--hy-line); background:linear-gradient(110deg,color-mix(in oklch,var(--hy-violet) 7%,transparent),transparent 45%,color-mix(in oklch,var(--hy-cyan) 5%,transparent)); }
.hy-wb-title { font-size:14px; font-weight:650; letter-spacing:-.015em; overflow-wrap:anywhere; }
.hy-wb-counter, .hy-wb-muted { color:var(--hy-muted); font-size:12px; }
.hy-wb-counter { font-family:var(--hy-mono); font-variant-numeric:tabular-nums; }
.hy-wb-caption, .hy-wb-empty { padding:14px 16px; color:var(--hy-muted); }
.hy-wb-toolbar, .hy-wb-footer { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:12px 16px; }
.hy-wb-toolbar > .hy-wb-input { flex:1 1 160px; }
.hy-wb-footer { justify-content:space-between; border-top:1px solid var(--hy-line); background:color-mix(in oklch,var(--hy-panel) 75%,transparent); }
.hy-wb-button { display:inline-flex; justify-content:center; align-items:center; min-height:44px; min-width:44px; gap:6px; padding:9px 12px; border:1px solid var(--hy-line); border-radius:10px; background:var(--hy-panel-strong); color:var(--hy-text); font-size:12px; line-height:1.35; text-align:center; overflow-wrap:anywhere; }
.hy-wb-button:hover:not(:disabled) { background:var(--hy-hover); border-color:color-mix(in oklch,var(--hy-cyan) 50%,var(--hy-line)); box-shadow:0 0 16px var(--hy-glow); }
.hy-wb-primary { border-color:color-mix(in oklch,var(--hy-cyan) 60%,var(--hy-line)); color:var(--hy-cyan); background:linear-gradient(110deg,color-mix(in oklch,var(--hy-cyan) 8%,var(--hy-panel)),color-mix(in oklch,var(--hy-violet) 8%,var(--hy-panel))); }
.hy-wb-input { min-width:0; width:100%; min-height:44px; max-width:100%; padding:9px 10px; border:1px solid var(--hy-line); border-radius:10px; background:var(--hy-panel); color:var(--hy-text); font-size:16px; }
.hy-wb-input:invalid:not(:placeholder-shown) { border-color:var(--hy-red); }
.hy-wb-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.hy-wb-field-label { color:var(--hy-muted); font-size:12px; }
.hy-wb-check { display:flex; gap:8px; align-items:center; min-height:44px; min-width:44px; cursor:pointer; }
.hy-wb-check input { flex:none; width:18px; height:18px; margin:0; accent-color:var(--hy-cyan); }
.hy-wb-scroll { min-width:0; max-width:100%; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.hy-wb-table { width:100%; border-collapse:collapse; font-size:12px; line-height:1.5; }
.hy-wb-table th, .hy-wb-table td { padding:10px 12px; min-width:120px; max-width:300px; text-align:left; border-bottom:1px solid var(--hy-line); overflow-wrap:anywhere; vertical-align:middle; }
.hy-wb-table th { font-size:11px; font-weight:600; color:var(--hy-muted); background:color-mix(in oklch,var(--hy-panel-strong) 85%,var(--hy-bg)); }
.hy-wb-table td:first-child, .hy-wb-table th:first-child { min-width:78px; }
.hy-wb-table tr:last-child td { border-bottom:0; }
.hy-wb-table tr:hover td, .hy-wb-table tr[data-selected="true"] td { background:color-mix(in oklch,var(--hy-cyan) 5%,transparent); }
.hy-wb-column-head { display:flex; gap:4px; align-items:center; }
.hy-wb-column-head .hy-wb-button { flex:none; background:transparent; padding:6px 8px; border-color:transparent; }
.hy-wb-diff-row[data-included="true"][data-change="removed"] { background:color-mix(in oklch,var(--hy-red) 9%,transparent); }
.hy-wb-diff-row[data-included="true"][data-change="added"] { background:color-mix(in oklch,var(--hy-green) 8%,transparent); }
.hy-wb-diff-row[data-included="true"][data-change="changed"] { background:color-mix(in oklch,var(--hy-amber) 5%,transparent); }
.hy-wb-diff-row[data-included="false"] del, .hy-wb-diff-row[data-included="false"] ins { opacity:.65; }
.hy-wb del { color:var(--hy-red); text-decoration-thickness:1px; }
.hy-wb ins { color:var(--hy-green); text-decoration:none; border-bottom:1px solid color-mix(in oklch,var(--hy-green) 45%,transparent); }
.hy-wb-change-arrow { color:var(--hy-muted); }
.hy-wb-proposed { color:var(--hy-amber); font-size:11px; font-family:var(--hy-mono); }
.hy-wb-property-editor { padding:16px; border-block:1px solid var(--hy-line); background:var(--hy-panel); }
.hy-wb-form { display:grid; gap:14px; }
.hy-wb-form h4 { font-size:14px; color:var(--hy-cyan); }
.hy-wb-inputs { display:flex; flex-wrap:wrap; gap:4px 16px; border:1px solid var(--hy-line); border-radius:12px; padding:8px 12px; }
.hy-wb-inputs legend { padding:0 5px; color:var(--hy-muted); font-size:12px; }
.hy-wb-status { padding:10px 16px; color:var(--hy-amber); font-size:12px; border-top:1px solid var(--hy-line); }
.hy-wb-flow-viewport { max-height:640px; }
.hy-wb-canvas { position:relative; width:100%; min-height:300px; isolation:isolate; background:radial-gradient(circle at 1px 1px,var(--hy-line) 1px,transparent 1.5px) 8px 8px/22px 22px; }
.hy-wb-wires { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.hy-wb-wire { fill:none; stroke:var(--hy-cyan); stroke-width:1.5; stroke-opacity:.7; }
.hy-wb-wire-label { fill:var(--hy-muted); font:11px var(--hy-mono); paint-order:stroke; stroke:var(--hy-bg); stroke-width:6px; stroke-linejoin:round; }
.hy-wb-node { position:absolute; top:0; left:0; z-index:1; padding:6px; width:calc(100% - 32px); border:1px solid var(--hy-line); border-radius:15px; background:var(--hy-glass); box-shadow:0 6px 24px color-mix(in oklch,var(--hy-glow) 45%,transparent); }
.hy-wb-node[data-dragging="true"], .hy-wb-node:focus-within { z-index:2; border-color:var(--hy-cyan); box-shadow:0 0 20px var(--hy-glow); }
.hy-wb-node[data-status="running"] { border-color:var(--hy-violet); }
.hy-wb-node[data-status="complete"] .hy-wb-node-status { color:var(--hy-green); }
.hy-wb-node[data-status="error"] .hy-wb-node-status { color:var(--hy-red); }
.hy-wb-node-handle { width:100%; text-align:left; justify-content:flex-start; border:0; background:transparent; touch-action:none; cursor:grab; font-size:13px; font-weight:600; }
.hy-wb-node-handle:active { cursor:grabbing; transform:none; }
.hy-wb-node-detail { padding:0 12px 10px; font-size:12px; color:var(--hy-muted); overflow-wrap:anywhere; }
.hy-wb-node-status { display:block; padding:0 12px 8px; font-family:var(--hy-mono); font-size:11px; }
.hy-wb-condition { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px; }
.hy-wb-condition .hy-wb-field:last-child { grid-column:1 / -1; }
.hy-wb-details { border-top:1px solid var(--hy-line); padding:8px 12px; }
.hy-wb-details summary { display:list-item; min-height:44px; padding:12px 4px; cursor:pointer; color:var(--hy-muted); font-size:12px; }
.hy-wb-details ul { margin:8px 0; padding-left:22px; color:var(--hy-muted); }
.hy-wb-pager { display:flex; gap:8px; align-items:center; }
.hy-wb-pager .hy-wb-button { font-size:24px; padding:3px; }
.hy-wb-insight-body { padding:16px; animation:hy-wb-enter .22s var(--hy-ease); }
.hy-wb-insight-body h4 { color:var(--hy-muted); font-size:13px; }
.hy-wb-insight-value { margin:8px 0; font-size:clamp(24px,4vw,38px); font-weight:650; letter-spacing:-.04em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.hy-wb-insight-body[data-tone="good"] .hy-wb-insight-value { color:var(--hy-green); }
.hy-wb-insight-body[data-tone="warning"] .hy-wb-insight-value { color:var(--hy-amber); }
.hy-wb-insight-body[data-tone="error"] .hy-wb-insight-value { color:var(--hy-red); }
.hy-wb-insight-prose { margin-top:8px !important; line-height:1.65; }
.hy-wb-chart { min-width:0; margin-top:16px; }
.hy-wb-chart > svg { display:block; width:100%; height:auto; max-height:220px; }
.hy-wb-axis { fill:none; stroke:var(--hy-line); }
.hy-wb-axis-label { fill:var(--hy-muted); font:10px var(--hy-mono); }
.hy-wb [data-tone="0"] { --hy-wb-tint:var(--hy-cyan); }
.hy-wb [data-tone="1"] { --hy-wb-tint:var(--hy-violet); }
.hy-wb [data-tone="2"] { --hy-wb-tint:var(--hy-amber); }
.hy-wb [data-tone="3"] { --hy-wb-tint:var(--hy-green); }
.hy-wb [data-tone="4"] { --hy-wb-tint:var(--hy-pink); }
.hy-wb [data-tone="5"] { --hy-wb-tint:var(--hy-blue); }
.hy-wb-chart-line { fill:none; stroke:var(--hy-wb-tint); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.hy-wb-chart-point, .hy-wb-chart-bar { fill:var(--hy-wb-tint); }
.hy-wb-legend { display:flex; gap:8px 16px; flex-wrap:wrap; padding:10px 0; margin:0; list-style:none; font-size:12px; }
.hy-wb-legend li { display:flex; align-items:center; gap:7px; min-width:0; overflow-wrap:anywhere; }
.hy-wb-legend strong { font-family:var(--hy-mono); font-size:11px; font-weight:500; color:var(--hy-muted); }
.hy-wb-dot { display:inline-block; flex:none; width:7px; height:7px; border-radius:50%; background:var(--hy-wb-tint); }
.hy-wb-allocation { display:flex; gap:3px; height:32px; border:1px solid var(--hy-line); border-radius:9px; overflow:hidden; }
.hy-wb-allocation-segment { flex-basis:0; background:var(--hy-wb-tint); }
.hy-wb-source { margin:10px 0; font-size:12px; }
.hy-wb-tuning-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:16px; }
.hy-wb-numeric { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.hy-wb-numeric .hy-wb-input { grid-column:1; font-family:var(--hy-mono); font-variant-numeric:tabular-nums; }
.hy-wb-scrub { display:flex; align-items:center; min-height:44px; grid-column:1 / -1; color:var(--hy-muted); font-size:12px; cursor:ew-resize; touch-action:none; user-select:none; border-radius:8px; padding:0 4px; }
.hy-wb-tune-toggle { align-self:end; }
.hy-wb-selection { margin:16px; padding:12px 14px; border-left:2px solid var(--hy-violet); border-radius:0 10px 10px 0; background:color-mix(in oklch,var(--hy-violet) 8%,transparent); color:var(--hy-text); overflow-wrap:anywhere; max-height:260px; overflow:auto; white-space:pre-wrap; }
.hy-wb-selection-form { display:flex; align-items:flex-end; gap:8px; padding:0 16px 16px; }
.hy-wb-selection-form .hy-wb-field { flex:1; }
@keyframes hy-wb-enter { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:480px) { .hy-wb-head, .hy-wb-toolbar, .hy-wb-footer { padding:12px; } .hy-wb-tuning-grid { padding:12px; gap:10px; } .hy-wb-footer .hy-wb-primary { flex:1 1 100%; } .hy-wb-insight-body { padding:12px; } .hy-wb-selection-form { flex-wrap:wrap; padding:0 12px 12px; } .hy-wb-selection-form .hy-wb-field { flex-basis:100%; } .hy-wb-selection-form > .hy-wb-button { width:100%; } }
@media(prefers-reduced-motion:reduce) { .hy-wb *, .hy-wb *::before, .hy-wb *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
:root[data-page-hidden="true"] .hy-wb * { animation-play-state:paused !important; }