@keyframes rule-blink{90%{background-color:#d3d3d3}}html,body,#app{height:100%;margin:0;padding:0}.rules{flex-direction:column;align-items:start;gap:1rem;display:flex}.rules .rule{background-color:#d3d3d3;border-radius:.5rem;gap:1rem;padding:1rem;display:flex}.rules .rule.selected{background-color:#8fbc8f}.rules .rule.warning{background-color:salmon;animation:.5s ease-in-out infinite rule-blink}.rules .rule .controls{flex-direction:column;gap:.5rem;display:flex}.rules .rule .controls .up,.rules .rule .controls .down,.rules .rule .controls .delete{background:#fff;border-radius:1rem;width:1rem}:is(.rules .rule .controls .up,.rules .rule .controls .down,.rules .rule .controls .delete):hover{background-color:#f5f5f5}:is(.rules .rule .controls .up,.rules .rule .controls .down,.rules .rule .controls .delete):active{transform:scale(.95)}.rules .rule .controls .up,.rules .rule .controls .down,.rules .rule .controls .delete{place-items:center;display:grid;position:relative}:is(.rules .rule .controls .up,.rules .rule .controls .down,.rules .rule .controls .delete) svg{transform-origin:50%;color:#d3d3d3;position:absolute}.rules .rule .controls .down svg{transform:scale(3)translateY(5%)}.rules .rule .controls .up svg{transform:scale(3)translateY(-5%)}.rules .rule .controls .delete svg{transform:scale(3)}.rules .rule .controls .delete{flex-grow:1}.rules .rule .tile{aspect-ratio:1;cursor:pointer;background-color:#fff;width:2rem}.rules .rule .tile:hover,.rules .rule .tile.focused{transform:scale(1.05)}.rules .rule .tile:has(img){background:0 0}.rules .rule .left-grid,.rules .rule .right-grid{grid-template-rows:max-content;gap:.5rem;display:grid}.rules .rule:last-child .down,.rules .rule:first-child .up{background-color:#f5f5f5}:is(.rules .rule:last-child .down,.rules .rule:first-child .up) svg{visibility:hidden}.rules .rule:last-child .down,.rules .rule:first-child .up{pointer-events:none}.tile{aspect-ratio:1;border-radius:12%}.tile img{-webkit-user-select:none;user-select:none;display:block}.tile{transition:all .1s ease-in-out}.grid{background-color:#d3d3d3;border-radius:.5rem;gap:0;padding:1rem;display:grid}.grid .tile{padding:8%}.grid .tile:hover,.grid .tile.focused{transform:scale(1.1)}.level{box-sizing:border-box;grid-template:"grid rules"1fr"below rules"1fr/40rem min-content;gap:1rem;height:100%;padding:1rem;display:grid}.level .grid-wrapper{grid-area:grid}.level .below{grid-area:below;align-items:start;gap:1rem;width:100%;display:flex}.level .rules{grid-area:rules;padding-right:.5rem;overflow:auto}.level .rules .rule:first-child .up,.level .rules .rule:nth-last-child(2) .down,.level .rules .rule:last-child .up,.level .rules .rule:last-child .delete,.level .rules .rule:last-child .down,.level .rules.disabled .up,.level .rules.disabled .delete,.level .rules.disabled .down{background-color:#f5f5f5}:is(.level .rules .rule:first-child .up,.level .rules .rule:nth-last-child(2) .down,.level .rules .rule:last-child .up,.level .rules .rule:last-child .delete,.level .rules .rule:last-child .down,.level .rules.disabled .up,.level .rules.disabled .delete,.level .rules.disabled .down) svg{visibility:hidden}.level .rules .rule:first-child .up,.level .rules .rule:nth-last-child(2) .down,.level .rules .rule:last-child .up,.level .rules .rule:last-child .delete,.level .rules .rule:last-child .down,.level .rules.disabled .up,.level .rules.disabled .delete,.level .rules.disabled .down{pointer-events:none}.level button{cursor:pointer;background:#f5f5f5;border:none;border-radius:.5rem;padding:1rem;transition:all .1s ease-in-out}.level button:hover{background:#d3d3d3}.level button:active{transform:scale(.95)}