:root{--text-color: black}*,*:before,*:after{box-sizing:border-box}h1{margin-bottom:0}h1,h2,h3{font-family:sans-serif}h2,h3{margin-bottom:0;font-weight:600}h2{font-size:1.25rem}h3{font-size:1rem}p{margin:.5rem 0}ul{padding-left:1rem}button{background:white;border:1.25px solid lightgrey;box-shadow:0 1px 4px 1px #0000001a;transition:background .15s;cursor:pointer}button:hover{background:hsl(0deg 0% 90%)}.DiagramPage{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:30rem 1fr}.Sidebar{height:100%;overflow-y:scroll;padding:1rem}.Sidebar .tag{margin-bottom:2rem}.Sidebar .tag a{font-family:monospace}.Operations .grid{display:grid;grid-template-columns:2rem 2rem 1fr;gap:1rem .5rem;margin:1rem 0;align-items:center}.Operations .gridRow{display:contents}.Operations .applyBtn{font-family:serif;font-size:1.125rem;text-align:center;vertical-align:middle;width:32px;aspect-ratio:1 / 1;border-width:1.5px;border-radius:9999px;border-color:var(--operation-color);white-space:nowrap}.Operations .applyBtn:hover{background:var(--operation-bg)}.Operations .applyBtn sup{font-size:.65em}.Operations .permutation{display:flex;flex-wrap:wrap}.Operations .cycle{cursor:default;padding:2px 4px;border-radius:9999px;transition:background-color .15s}.Operations .cycle:hover{background-color:var(--operation-bg)}.Operations .toolbar{display:flex;gap:1rem}.Operations .toolbar button{padding:.5rem 1rem}.SampleGroups .list{display:flex;gap:.5rem}.SampleGroups .groupLink{background:white;border:1.25px solid lightgrey;box-shadow:0 1px 4px 1px #0000001a;transition:background .15s;cursor:pointer;text-decoration:none;color:var(--text-color);padding:.125rem .25rem;border-radius:8px}.SampleGroups .groupLink:hover{background:hsl(0deg 0% 90%)}.Diagram{justify-self:center;align-self:center}.Diagram g.cycle{color:var(--operation-color);transition:all .15s}.Diagram g.cycle[data-selected=true]{color:var(--operation-hl)}.Diagram[data-has-selection=true] .cycle[data-selected=false]{opacity:.5}.Diagram .cycle .path{stroke-width:2;transition:all .15s}.Diagram .cycle[data-selected=true] .path{stroke-width:4;filter:drop-shadow(0 0 1px hsl(0 0% 75}%))}.Diagram .cycle[data-selected=true] .arrow{scale:1.5}.Diagram .cycle[data-inverse=true] .arrow{rotate:180deg}.Diagram .slot{fill:#d3d3d3;transition:all .15s}.Diagram .slot[data-selected=true]{scale:1.125;fill:var(--selected-color);filter:drop-shadow(0 0 2px var(--selected-color))}.Diagram .hoverZone{cursor:pointer}.Diagram .point{transition:transform .75s linear}