:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--font-body:"Segoe UI", system-ui, sans-serif;--font-heading:Georgia, serif;--font-mono:Consolas, "Courier New", monospace;--radius-button:2px;--well:color-mix(in srgb, var(--bg) 60%, #000);--cell:color-mix(in srgb, var(--panel2) 80%, #000);--bevel-hi:#ffffff47;--bevel-lo:#00000059;--ink:#000}*,:before,:after{box-sizing:border-box;border-radius:0}body{background:var(--bg);color:var(--text);font:14px/1.45 var(--font-body);margin:0}h1,h2,h3,.serif{font-family:var(--font-heading);font-weight:400}.c-common{color:var(--r-common)}.c-uncommon{color:var(--r-uncommon)}.c-rare{color:var(--r-rare)}.c-vrare{color:var(--r-vrare)}.c-epic{color:var(--r-epic)}.c-legend{color:var(--r-legend)}.c-gold{color:var(--gold)}.panel{background:var(--panel);border:1px solid var(--line2);box-shadow:inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--line);padding:10px 12px}.panel-title{letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line);justify-content:space-between;margin:0 0 8px;padding-bottom:6px;font-size:11px;font-weight:600;display:flex}.btn{background:var(--panel2);border:1px solid var(--line2);border-bottom-color:var(--ink);border-right-color:var(--ink);color:var(--text);border-radius:var(--radius-button);padding:4px 10px;font-size:12px;display:inline-block}.btn.go{background:color-mix(in srgb, var(--accent) 30%, var(--panel));border-color:var(--accent)}.btn.off,.btn:disabled{opacity:.4}.bar-seg{background:var(--well);gap:2px;margin:3px 1px 7px;padding:2px;display:flex}.bar-seg .bar-cell{background:var(--cell);border:1px solid color-mix(in srgb, var(--line2) 80%, #000);flex:1;height:11px;position:relative;overflow:hidden}.bar-seg .bar-cell>i{background:var(--c);box-shadow:inset 0 2px 0 var(--bevel-hi), inset 0 -2px 0 var(--bevel-lo);position:absolute;top:0;bottom:0;left:0}.bar-seg.slant{padding:2px 6px}.bar-seg.slant .bar-cell{transform:skew(-24deg)}.bar-seg.thin .bar-cell{height:7px}.bar-stripe{background:var(--well);height:12px;margin:3px 1px 7px;position:relative;overflow:hidden}.bar-stripe>i{background:repeating-linear-gradient(-55deg, var(--c) 0 7px, color-mix(in srgb, var(--c) 70%, #000) 7px 10px);clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);position:absolute;top:0;bottom:0;left:0;box-shadow:inset 0 2px #ffffff40}.bar-stripe:after{content:"";pointer-events:none;background:repeating-linear-gradient(90deg,#0000 0 calc(10% - 1px),#000c calc(10% - 1px) 10%);position:absolute;inset:0}.bar-stripe.tall{height:18px}.bar-label{justify-content:space-between;font-size:12px;display:flex}[data-bar-frame=black] :is(.bar-seg,.bar-stripe){border:2px solid var(--ink);outline:1px solid var(--line2)}[data-bar-frame=line] :is(.bar-seg,.bar-stripe){border:1px solid var(--line2)}[data-bar-frame=metal] :is(.bar-seg,.bar-stripe){border:2px solid var(--frame);border-top-color:color-mix(in srgb, var(--frame), #fff 35%);border-left-color:color-mix(in srgb, var(--frame), #fff 20%);border-bottom-color:color-mix(in srgb, var(--frame), #000 50%);border-right-color:color-mix(in srgb, var(--frame), #000 35%);outline:1px solid var(--ink)}[data-bar-frame=tint] :is(.bar-seg,.bar-stripe){border:2px solid color-mix(in srgb, var(--c), #000 45%);outline:1px solid color-mix(in srgb, var(--c), #000 75%)}[data-bar-frame=accent] :is(.bar-seg,.bar-stripe){border:2px solid var(--bg);outline:1px solid var(--accent)}