:root{color-scheme:dark;font:14px system-ui,sans-serif;background:#111416;color:#d4dcdf}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 70% 0,#20282b88,transparent 65%)}main{max-width:1200px;margin:auto;padding:26px 32px}header{display:flex;align-items:center;gap:30px;border-bottom:1px solid #ffffff0c;padding-bottom:22px;margin-bottom:22px}.mark{font-size:38px;line-height:1;color:#a4b7be}#palette{display:flex;gap:16px}.color{appearance:none;width:25px;height:25px;border:2px solid var(--c);border-radius:7px;background:transparent;cursor:pointer;position:relative;margin:0;transition:background .15s}.color:checked{background:var(--c)}.color:checked:after{content:'✓';position:absolute;inset:0;text-align:center;font-weight:900;line-height:21px;color:#15191a}.color:focus-visible,button:focus-visible{outline:2px solid white;outline-offset:5px}button{color:inherit;border:1px solid #ffffff15;background:#252c30;border-radius:10px;cursor:pointer;font:inherit;transition:background .15s,transform .15s}button:hover{background:#354148}button:active{transform:scale(.96)}button:disabled{opacity:.3;cursor:default}.actions{margin-left:auto;display:flex;gap:6px}.actions button{height:36px;width:36px;font-size:23px;background:transparent;border-color:transparent}.workspace{display:flex;align-items:flex-start;gap:20px}.board-wrap{position:relative;padding-top:38px;padding-left:38px;flex:1;min-width:0}#board{display:block;width:100%;touch-action:none;cursor:crosshair}.axis{position:absolute;display:flex;gap:10px;align-items:center;color:#b9c7cd;font-variant-numeric:tabular-nums}.axis button{height:28px;width:28px;border:0;font-size:19px;background:#ffffff08}.axis output{min-width:18px;text-align:center}.horizontal{top:0;left:42px}.vertical{top:80px;left:0;flex-direction:column}aside{width:150px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;padding-top:38px}aside:empty{display:block}.variant{padding:9px;background:#1b2124;border:1px solid #ffffff12;border-radius:14px}.variant.selected{border-color:#b7d7c0;background:#25322c;box-shadow:0 0 0 2px #b7d7c00c}.variant canvas{display:block;width:100%}footer{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:24px}#solve{background:#c1e2ce;color:#14251b;border:0;padding:15px 27px;font-weight:650;min-width:190px;box-shadow:0 4px 30px #a0ffc00a}#solve:hover{background:#d4efdf}#solve span{margin-left:22px;font-size:18px}#cancel{width:44px;height:44px}#status{font-size:23px;color:#bdd7c8;min-width:24px}#status.busy{width:19px;height:19px;min-width:19px;border:2px solid #40514a;border-top-color:#c1e2ce;border-radius:100%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}@media(max-width:750px){aside:empty{display:none}main{padding:15px 10px}header{gap:12px;margin-bottom:14px}#palette{gap:10px}.color{width:22px;height:22px}.actions{gap:0}.actions button{width:29px}.mark{font-size:28px}.workspace{flex-direction:column;gap:8px}.board-wrap{width:100%;padding-left:32px}aside{width:100%;flex-direction:row;padding:0 0 0 32px}.variant{width:calc(33.33% - 10px);max-width:150px}footer{margin-top:18px}}