:root{--bg-color: white;--dot-color: black;--line-color: black;--line-color-initial: black;--line-color-inverse: white;--cell-color: white;--cell-color-initial: white;--cell-color-inverse: black;--cell-highlight-color: rgb(194, 13, 13);--button-bg-color: rgba(0, 0, 0, 0.8);--button-text-color: white}body.dark{--bg-color: black;--dot-color: white;--line-color: white;--line-color-initial: white;--line-color-inverse: black;--cell-color: black;--cell-color-initial: black;--cell-color-inverse: white;--cell-highlight-color: white;--button-bg-color: rgba(255, 255, 255, 0.9);--button-text-color: black;--box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)}html,body{margin:0;padding:0;height:100%;width:100%;background-color:var(--bg-color);overflow:hidden;font-family:Roboto,Helvetica,Arial,sans-serif}.grid-wrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:center;transform-origin:center center;transition:transform .2s ease-in-out}.grid-container{display:grid}.grid-cell{position:relative;border:1px solid var(--line-color);box-sizing:border-box;width:100%;height:100%;background-color:var(--cell-color)}.grid-cell.colored{background-color:var(--cell-highlight-color)}.grid-cell:hover{background-color:color-mix(in srgb, var(--cell-highlight-color), #fff 10%)}.grid-cell.blink-animation{animation:blink 1s infinite}body.grid-y .grid-cell{border-top:0;border-bottom:0}body.grid-x .grid-cell{border-left:0;border-right:0}.grid-cell.has-note::after{content:"";position:absolute;width:3px;height:3px;background:var(--line-color);top:1px;right:1px;border-radius:50%}.grid-cell.has-note.colored::after,.grid-cell.has-note:hover::after{background:var(--button-text-color)}.grid-cell.has-note:hover .cell-note{opacity:1;pointer-events:all}.cell-note{position:absolute;font-size:10px;background-color:var(--button-bg-color);color:var(--button-text-color);border-radius:5px;border:1px solid var(--line-color);padding:1px 3px;border-radius:3px;width:50px;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);pointer-events:none;z-index:2;text-align:center;word-wrap:break-word}.cell-note::after{--height: 12px;position:absolute;content:"";width:3px;height:var(--height);background-color:var(--button-bg-color);bottom:calc(var(--height)*-1);left:50%;transform:translateX(-50%)}.cell-note:hover{opacity:1;pointer-events:all}.center-dot{position:relative;background-color:var(--dot-color) !important;border:none}.center-dot::after{content:"";position:absolute;width:30%;height:30%;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:50%;background:var(--bg-color)}#controls{position:fixed;top:0;right:0;z-index:1000;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;transition:opacity .4s ease;padding:10px}#controls.hidden{opacity:0;pointer-events:none}button{position:relative;padding:8px 10px;background-color:var(--button-bg-color);color:var(--button-text-color);border:none;border-radius:6px;font-size:14px;cursor:pointer;transition:background-color .3s;zoom:1;line-height:1;box-shadow:var(--box-shadow)}button:hover{background-color:color-mix(in srgb, var(--button-bg-color), var(--line-color) 5%)}button.active{background-color:color-mix(in srgb, var(--button-bg-color), var(--line-color) 20%)}button .label{position:absolute;background:color-mix(in srgb, var(--button-bg-color), #000 20%);display:none;font-size:60%;padding:3px 5px;border-radius:5px;top:100%;left:50%;transform:translateX(-50%);border:1px solid var(--line-color);opacity:0}button:hover span,button:focus span{opacity:1}button .dropdown{position:absolute;top:100%;right:0;background-color:var(--button-bg-color);color:var(--button-text-color);border-radius:5px;border:1px solid var(--cell-color-inverse);width:260px;list-style:none;padding:0;margin:0;text-align:left;display:block;overflow:hidden;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(15px);transition:all .3s ease;box-shadow:var(--box-shadow);max-height:calc(100vh - 80px)}button .dropdown li{margin-top:-1px;line-height:1.2}button .dropdown li>div,button .dropdown li>a{display:block;padding:8px 10px;color:inherit;text-decoration:none;border-top:1px solid rgba(0,0,0,0);border-bottom:1px solid rgba(0,0,0,0)}button .dropdown li>div:hover,button .dropdown li>div.active,.rain-mode button .dropdown li>div.rain-toggle,button .dropdown li>a:hover,button .dropdown li>a.active,.rain-mode button .dropdown li>a.rain-toggle{background-color:color-mix(in srgb, var(--button-bg-color), var(--button-text-color) 10%);border-color:color-mix(in srgb, var(--button-bg-color), var(--button-text-color) 25%)}button .dropdown li>div:active,button .dropdown li>a:active{background-color:color-mix(in srgb, var(--button-bg-color), var(--button-text-color) 5%) !important}button .dropdown li>div i,button .dropdown li>a i{margin-right:5px;text-decoration:none;font-style:normal}button .dropdown li>div span,button .dropdown li>a span{position:relative;font-family:monospace;font-size:.8em;opacity:.6;float:right;line-height:1;margin-top:.4em}button .dropdown li:first-child a{border-top:none}button .dropdown li:last-child a{border-bottom:none}button .dropdown li.spaced{margin-top:10px}button.active .dropdown{opacity:1;visibility:visible;transform:translateY(5px)}.color-row{display:inline-flex;float:right;gap:5px}.color-row span.color-box{--size: 13px;width:var(--size);height:var(--size);border:1px solid rgba(0,0,0,0);border-radius:50%;cursor:pointer;margin:0;opacity:1}.color-row span.color-box:hover{border-color:var(--text-color)}.rain-mode .rain-toggle{font-weight:bold}@keyframes blink{0%,100%{background-color:var(--cell-highlight-color)}50%{background-color:rgba(0,0,0,0)}}@media print{body.dark{--bg-color: white;--dot-color: black;--line-color: black;--line-color-inverse: white;--cell-color: white;--cell-color-inverse: ;--cell-highlight-color: black;--button-text-color: white}#controls{display:none}.grid-cell{border:.5px solid var(--line-color)}.center-dot,.grid-cell.colored{background:var(--line-color) !important;box-shadow:inset 0 0 0 1000px var(--line-color)}}/*# sourceMappingURL=style.css.map */