/* Both polygons use the same note centers; all diagram outlines are 1 CSS px. */
:root{--ring-comet:#d6263f}
:root[data-creator-palette=ocean]{--ring-comet:#ba3425}
:root[data-creator-palette=sand]{--ring-comet:#b82350}
:root[data-creator-color-scheme=dark]{--ring-comet:#ff6b7a}
:root[data-creator-color-scheme=dark][data-creator-palette=ocean]{--ring-comet:#ff806a}
:root[data-creator-color-scheme=dark][data-creator-palette=sand]{--ring-comet:#ff6f93}
.ring-lines{display:block}
.ring-lines .outer-dodecagon{fill:none;stroke:var(--site-muted);stroke-width:1;stroke-dasharray:1 2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ring-lines .inner-scale{fill:var(--site-accent);fill-opacity:.18;stroke:var(--site-accent);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ring-note{isolation:isolate}
.ring-note,.ring-note:not(.member),.ring-note.member,.ring-note.tonic,.ring-note.feature,.ring-note.playing{border-width:1px}
.ring-note:not(.member){background:var(--site-raised);border-color:var(--site-muted);color:var(--site-muted);font-weight:550;opacity:1}
.ring-note.tonic{border-style:solid}
.ring-note.playing{outline:1px solid var(--site-accent);outline-offset:2px;box-shadow:none}
.ring-note.playing::after{content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;background:conic-gradient(var(--site-accent) calc(var(--ring-phase,0)*1turn),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 0)}
.ring-playhead{display:block}
.ring-journey-trail{fill:none;stroke:var(--ring-comet);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ring-journey-active{fill:none;stroke:var(--ring-comet);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ring-comet-haze{stroke:var(--ring-comet);stroke-width:8;stroke-linecap:round;opacity:.14;vector-effect:non-scaling-stroke}
.ring-comet-tail{stroke:var(--ring-comet);stroke-width:4;stroke-linecap:round;opacity:.36;vector-effect:non-scaling-stroke}
.ring-comet-halo{fill:var(--ring-comet);opacity:.18}
.ring-journey-cursor{fill:var(--ring-comet);stroke:var(--site-raised);stroke-width:1;vector-effect:non-scaling-stroke}
.ring-foreground{fill:none;stroke:var(--site-accent);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ring-title{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.ring-title small{display:block;max-width:min(37vw,300px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--site-muted);font-weight:500;margin-top:3px}
@media(max-width:760px){
 .ring-note,.ring-note:not(.member),.ring-note.member,.ring-note.tonic,.ring-note.feature,.ring-note.playing{background:transparent!important;border-color:transparent!important;outline:0!important;box-shadow:none!important}
 .ring-note::before{content:"";position:absolute;inset:4px;z-index:-1;border:1px solid var(--site-muted);border-radius:50%;background:var(--site-raised)}
 .ring-note.member::before{border-color:var(--site-ink);background:var(--site-surface)}
 .ring-note.tonic::before{border:1px solid var(--site-ink);background:var(--site-ink)}
 .ring-note.feature::before{border:1px dashed var(--site-accent);background:var(--site-soft)}
 .ring-note.playing::before{border-color:var(--site-accent);box-shadow:0 0 0 1px var(--site-accent),0 0 8px var(--site-accent)}
 .ring-note.playing::after{inset:-2px}
 .ring-note:not(.member){font-size:10px}
}
@media(prefers-reduced-motion:reduce){.ring-note.playing::after{display:none}}