.ring-view{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:16px;align-items:start}.ring-view>.area + .area{margin-top:0}.ring-wrap{container-type:inline-size;min-width:0;padding:8px 0 4px}.ring-wrap:has(.ring-node.is-outside){padding-bottom:40px}.ring-stage{--stage-w:min(660px, 100cqw, max(420px, calc(100vh - var(--top-offset) - 200px)));--ring-f:.35;--ring-r:calc(var(--ring-f) * 100%);--pitch:calc(var(--stage-w) * var(--ring-f) * var(--chord, .4));--node-max:58px;--node:min(var(--node-max), calc(var(--pitch) - 12px));position:relative;width:var(--stage-w);aspect-ratio:1;margin:0 auto}.ring-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.ring-lines *{vector-effect:non-scaling-stroke}.ring-track{fill:none;stroke:var(--wire);stroke-width:1.6;opacity:.7}.ring-out-path{fill:none;stroke:var(--wire);stroke-width:1.4;stroke-dasharray:5 6;opacity:.8}.ring-needle{transform-box:view-box;transform-origin:50% 50%;transform:rotate(var(--needle, -90deg));transition:transform var(--dur-move) var(--ease)}.ring-needle line{stroke:var(--accent);stroke-width:2;stroke-linecap:round}.ring-needle path{fill:var(--accent)}.ring-needle[data-out="0"] .ring-needle-out,.ring-needle[data-out="1"] .ring-needle-in{display:none}.ring-node{--size:var(--node);position:absolute;left:calc(50% + var(--lx) * var(--ring-r));top:calc(50% + var(--ly) * var(--ring-r));width:var(--size);height:var(--size);transform:translate(-50%,-50%);z-index:1;border-radius:50%;text-decoration:none;transition:opacity var(--dur-hover)}.ring-node.is-big{--size:calc(var(--node) * 1.18)}.ring-node.ton{--race-color:var(--group-color)}.ring-face{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--node-bg);color:var(--race-color, var(--ink));box-shadow:0 6px 16px var(--shade-sm), inset 0 1px 0 var(--wash-sm);transition:background var(--dur-hover), box-shadow var(--dur-hover)}.ring-face svg{width:56%;height:56%;display:block}.ring-node:hover .ring-face{background:var(--node-bg-hover)}.ring-node.is-outside{border-style:dashed}.ring-node.is-outside:hover,.ring-node.is-outside.is-current{border-style:solid}.ring-node:focus-visible{outline:none}.ring-node:focus-visible .ring-face{outline:2px solid var(--accent);outline-offset:3px}.ring-node.is-muted{opacity:.28}.ring-label{position:absolute;left:calc(50% + var(--lx) * (var(--size) / 2 + 10px));top:calc(50% + var(--ly) * (var(--size) / 2 + 8px));transform:translate(var(--tx), var(--ty));font-size:var(--fs-name);font-weight:500;line-height:var(--lh-tight);color:var(--ink-dim);white-space:nowrap;transition:color var(--dur-hover)}.ring-node:hover .ring-label,.ring-node.is-current .ring-label{color:var(--ink)}.ring-group{position:absolute;left:calc(50% + var(--lx) * var(--ring-r));top:calc(50% + var(--ly) * var(--ring-r));transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;margin:0;padding:4px 10px;border-radius:999px;background:var(--area-bg);font-size:var(--fs-ui);font-weight:600;color:var(--ink-dim);white-space:nowrap}.ring-group i,.ring-out-label i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--group-color, var(--wire-dot))}.ring-out-label{position:absolute;left:calc(50% + var(--lx) * var(--ring-r));top:calc(50% + var(--ly) * var(--ring-r) + var(--node) / 2 + 30px);transform:translate(-50%,0);display:flex;align-items:center;gap:6px;font-size:var(--fs-hint);color:var(--ink-muted);white-space:nowrap}.ring-center{position:absolute;left:50%;top:50%;width:38%;transform:translate(-50%,-50%)}.ring-center-item:not([hidden]){animation:rb-in var(--dur-open) var(--ease) both}.ring-center-title{margin:0 0 8px;text-align:center;font-family:var(--heading);font-size:var(--fs-group);font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--ink)}.ring-fx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft)}.ring-fx-list .ring-fx{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 2px;border-bottom:1px solid var(--line-soft)}.ring-fx-name{min-width:0;display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:var(--fs-ui);line-height:var(--lh-snug);color:var(--ink-dim)}.ring-fx-name::first-letter{text-transform:uppercase}.ring-fx-val{flex:none;font-family:var(--heading);font-size:var(--fs-plate);color:var(--ink)}.ring-fx[data-tint] .ring-fx-val{color:var(--element)}.ring-fx.is-minus .ring-fx-val{color:var(--stat-health)}.ring-detail:not([hidden]){animation:rb-in var(--dur-open) var(--ease) both}.ring-detail-head{display:flex;align-items:center;gap:16px;padding:4px 0 16px;border-bottom:1px solid var(--line-accent)}.ring-detail-head .ring-face{flex:none;width:56px;height:56px}.ring-detail-head .ring-face svg{width:32px;height:32px}.ring-detail-head h4{margin:0;min-width:0;font-family:var(--heading);font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-tight);color:var(--ink)}@media (max-width:1280px){.ring-view{grid-template-columns:minmax(0,1fr) 360px}}@media (max-width:1100px){.ring-view{grid-template-columns:minmax(0,1fr)}}@container (max-width:560px){.ring-stage{--node-max:40px;--ring-f:.41}.ring-track{transform-box:view-box;transform-origin:50% 50%;transform:scale(1.1714)}.ring-label,.ring-group,.ring-needle,.ring-out-path,.ring-out-label{display:none}.ring-center{width:54%}.ring-center-title{margin-bottom:4px;font-size:var(--fs-hint)}.ring-fx-list .ring-fx{padding:4px 0}.ring-fx-name{font-size:var(--fs-hint);-webkit-line-clamp:1}.ring-fx-val{font-size:var(--fs-hint)}}@media (pointer:coarse){.ring-node::before{content:'';position:absolute;left:50%;top:50%;width:max(100%, min(44px, var(--pitch)));height:max(100%, min(44px, var(--pitch)));transform:translate(-50%,-50%);border-radius:50%;clip-path:circle(50%)}}.ring-fx-when{padding:8px 2px 2px;font-size:var(--fs-hint);line-height:var(--lh-snug);color:var(--ink-muted)}.ring-node.ton .ring-face{background:color-mix(in srgb, var(--race-color) 10%, var(--node-bg))}.ring-node.ton:hover .ring-face{background:color-mix(in srgb, var(--race-color) 18%, var(--node-bg-hover))}.ring-detail-head .ring-face{border:1px solid color-mix(in srgb, var(--race-color) 55%, transparent);background:color-mix(in srgb, var(--race-color) 10%, var(--node-bg))}.ring-fx:not([data-tint],.is-minus) .ring-fx-val{color:var(--race-color, var(--ink))}:root[data-theme="light"] .ring-fx:not(.is-minus) .ring-fx-val{color:color-mix(in srgb, var(--element, var(--race-color, var(--ink))) 78%, var(--ink))}.ring-view>.ring-detail-area.area{position:sticky;top:calc(var(--top-offset) + var(--bar-now, 0px) + 16px);max-height:calc(100vh - var(--top-offset) - var(--bar-now, 0px) - 32px);overflow-y:auto;scrollbar-width:thin}@media (max-width:1100px){.ring-view>.ring-detail-area.area{position:relative;top:auto;max-height:none;overflow:visible}}.ring-view>.ring-area{align-self:stretch}@media (max-width:1100px){.ring-view>.ring-area{align-self:start}}.ring-stage[data-corner] .ring-node.is-outside{left:calc(100% - var(--size) / 2 - 4px);top:calc(var(--size) / 2 + 4px)}.ring-stage[data-corner] .ring-node.is-outside .ring-label{left:50%;top:calc(100% + 6px);transform:translate(-50%,0)}.ring-wrap:has(>.ring-stage[data-corner]){padding-bottom:4px}.ring-stage[data-corner] .ring-needle[data-out="1"] .ring-needle-in{display:inline}.ring-stage[data-corner] .ring-needle[data-out="1"] .ring-needle-out{display:none}