*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,"Yu Gothic",sans-serif;background:#091724;color:#f2f7fb}header{display:flex;align-items:baseline;gap:22px;padding:16px 24px;border-bottom:1px solid #426078}h1{font-size:24px;margin:0}header span,aside p{color:#b8cad8}main{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;padding:20px;max-width:1450px;margin:auto}aside{display:flex;flex-direction:column;gap:12px}label{display:flex;justify-content:space-between;align-items:center;gap:8px}select,input,button{font:inherit;border:1px solid #54758c;border-radius:6px;background:#123044;color:#f6fbff;padding:8px;min-height:42px}input{width:115px}input[type=color]{padding:3px;width:60px}button{cursor:pointer}button:hover{background:#234a63}button:focus-visible,canvas:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffd16c;outline-offset:2px}.tools,.actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tools button[aria-pressed=true]{background:#65dfd0;color:#071b27;border-color:#65dfd0;font-weight:700}aside p{font-size:14px;margin:0}.board{min-width:0}canvas{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;background:#14394a;border:2px solid #7895a7;touch-action:none}#hint{min-height:48px;margin:0 0 8px}#status{color:#ffda85;min-height:24px}@media(max-width:760px){main{grid-template-columns:1fr;padding:12px}aside{display:grid;grid-template-columns:1fr 1fr}.tools,.actions{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}aside p{grid-column:1/-1}header span{display:none}canvas{max-height:none;width:100%}}