@font-face{font-family:Liberation;src:url('../assets/LiberationSans-Regular.ttf') format('truetype');font-display:swap}@font-face{font-family:Liberation;src:url('../assets/LiberationSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:light;--paper:#fffefa;--ink:#173744;--muted:#546c73;--blue:#195c79;--teal:#237b66;--line:#dce5df;--soft:#f3f6f3;--rose:#a33551;--rose-soft:#fbe9ec;--green-soft:#eaf4ee;--gold:#fff4cd}
*{box-sizing:border-box}body{margin:0;background:#f5f6f2;color:var(--ink);font:16px/1.5 Liberation,Arial,sans-serif}button,input,select{font:inherit}button,select,summary{cursor:pointer}button:disabled{cursor:default;opacity:.45}a{color:var(--blue)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #20799b;outline-offset:3px}.shell{max-width:1220px;margin:24px auto;padding:0 24px}.game{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px}.game-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:14px}.brand-symbol{width:48px;height:48px;background:var(--green-soft);color:var(--teal);border-radius:14px;display:grid;place-items:center;font-size:30px}.kicker{font-size:11px;letter-spacing:1.2px;color:var(--muted)}h1{margin:2px 0;font-size:32px;line-height:1.15;letter-spacing:-.7px;font-weight:400}.head-link{font-size:13px}.selectors{display:flex;align-items:end;gap:14px;flex-wrap:wrap;margin:24px 0 18px}.selectors label{display:grid;gap:5px;font-size:13px;color:var(--muted)}select{max-width:100%;min-height:42px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:8px 12px}.challenge-info{margin-left:auto;text-align:right}h2{font-size:20px;margin:0;font-weight:400}.challenge-info p{margin:3px 0 0;font-size:12px;color:var(--muted)}.board-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}.zoom-tools{display:flex;align-items:center;gap:7px}.zoom-tools button,.quiet{min-height:38px;border:1px solid var(--line);color:var(--blue);background:var(--paper);padding:7px 12px;border-radius:9px}.zoom-tools button{min-width:38px}.zoom-tools output{font-size:12px;color:var(--muted);min-width:45px;text-align:center}.progress{font-size:13px;color:var(--muted)}.viewport{position:relative;overflow:auto;height:650px;min-height:400px;max-height:78vh;background:var(--paper);margin-top:12px;border:1px solid var(--line);border-radius:13px;overscroll-behavior:contain;cursor:grab;scrollbar-gutter:stable}.viewport.dragging{cursor:grabbing;user-select:none}.canvas{position:relative;min-width:0;margin:16px auto;--unit:1}.canvas>svg{display:block;width:100%;height:100%;overflow:visible}.connector{stroke:#6c9298;stroke-width:3;fill:none}.result-connector{stroke:var(--ink);stroke-width:4}.junction-dot{fill:var(--ink)}.number-circle{stroke:var(--teal);stroke-width:2.5;fill:var(--paper)}.number-circle.given{fill:var(--gold)}.number-text{fill:var(--ink);font-family:Liberation,Arial,sans-serif;font-weight:700;pointer-events:none}.node-label{font-size:12px;fill:#617b86;pointer-events:none}.operator-box{fill:#ecf4fa;stroke:#709caf;stroke-width:1.6}.equals-box{fill:#ffe7b4;stroke:#b57b24;stroke-width:1.6}.relation-label{font-size:10px;fill:var(--ink);pointer-events:none}.operator-text{font-size:18px;fill:var(--ink);font-weight:700;pointer-events:none}.relation-box{cursor:pointer}.selected-relation.connector{stroke:#20799b;stroke-width:5}.selected-relation.relation-box rect{stroke:#20799b;stroke-width:3.5}.selected-relation.junction-dot{fill:#20799b}.circle-input{position:absolute;transform:translate(-50%,-50%);padding:0 1px;border:0;border-radius:30px;background:transparent;color:var(--ink);text-align:center;font-size:calc(27px * var(--unit));font-weight:700;line-height:1;cursor:text;z-index:2}.circle-input:focus-visible{outline:calc(2px * var(--unit)) solid #20799b;outline-offset:calc(2px * var(--unit));background:#ecf4fa}.circle-input[data-check=invalid]{color:var(--rose);background:var(--rose-soft)}.path-guide{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:15px 0}.path-guide label{font-size:13px;display:flex;align-items:center;gap:9px}.path-guide select{max-width:420px}.expression{font-size:14px;margin:0;color:var(--muted);flex:1 1 320px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}.primary{border:1px solid var(--blue);background:var(--blue);color:#fff;border-radius:10px;min-height:43px;padding:9px 17px}.quiet{min-height:43px}.actions .correction{margin-left:auto}.feedback{margin:14px 0 4px;min-height:24px;font-size:14px;color:var(--teal)}.feedback.error{color:var(--rose)}.save-state{margin:0;font-size:12px;color:var(--muted)}.results{display:flex;flex-wrap:wrap;gap:5px 13px;list-style:none;padding:0;margin:13px 0}.relation-result{border:0;background:transparent;color:var(--muted);font-size:12px;padding:3px;text-decoration:underline;text-underline-offset:3px}.results .correct button{color:var(--teal)}.results .wrong button,.results .invalid button{color:var(--rose)}.rules{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}.rules summary{color:var(--blue);font-size:15px}.rules-content{max-width:850px}.rules p,.rules li{font-size:14px}.rules h3{font-size:17px;font-weight:400;margin-bottom:6px}.legend{display:flex;flex-wrap:wrap;gap:15px;font-size:12px;color:var(--muted);margin:12px 0 0}.legend span{display:flex;align-items:center;gap:7px}.legend-circle{width:15px;height:15px;border:1.5px solid var(--teal);border-radius:50%;background:var(--gold)}.legend-circle.blank{background:var(--paper)}.legend-result{width:23px;height:4px;background:var(--ink);display:inline-block}.legend-pair{font-size:17px;letter-spacing:2px;color:var(--ink)}.downloads{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;margin:22px 0 3px}.footer{font-size:12px;color:var(--muted);padding:14px 3px}dialog{color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px;max-width:min(430px,calc(100vw - 28px))}dialog::backdrop{background:#17374455}dialog h2{font-size:22px}dialog p{font-size:15px}.dialog-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.identity{display:flex;align-items:end;gap:14px;flex-wrap:wrap;margin-top:22px}.identity label{display:grid;gap:5px;font-size:14px;flex:0 1 240px}.identity label span{font-size:12px;color:var(--muted)}.identity input{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:9px 11px;min-height:43px;width:100%}.identity .quiet{margin-left:auto}.save-tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.operator-text{font-size:20px}.relation-label{font-size:11px}.rules p,.rules li{font-size:16px}.rules summary{font-size:16px}.selectors label{font-size:14px}.expression{font-size:16px}.circle-input{font-size:calc(29px * var(--unit))}
@media(max-width:720px){.shell{margin:12px auto;padding:0 12px}.game{padding:18px 14px;border-radius:16px}.game-head{gap:10px}h1{font-size:28px}.head-link{font-size:12px}.brand-symbol{width:38px;height:42px;font-size:25px}.kicker{font-size:10px;max-width:190px}.selectors{gap:10px;margin-top:20px}.selectors label:first-child{flex:1 1 210px}.challenge-info{margin:0;text-align:left;width:100%}.viewport{height:560px;max-height:72vh}.path-guide label{width:100%;flex-wrap:wrap}.path-guide select{width:100%;max-width:none}.expression{font-size:15px}.actions .correction{margin-left:0}.primary,.quiet{min-height:44px}.legend{gap:8px 14px}.downloads{display:grid;gap:9px}.footer{font-size:11px}.identity{gap:10px}.identity label{flex:1 1 180px}.identity .quiet{margin-left:0}}
@media print{body{background:white}.shell{margin:0;padding:0}.game{border:0;padding:0}.selectors,.board-tools,.path-guide,.actions,.feedback,.save-state,.results,.downloads,.footer,.rules{display:none}.viewport{height:auto;max-height:none;overflow:visible;border:0}.canvas{width:100%!important;margin:0}.circle-input{font-size:calc(27px * var(--unit))}.game-head{margin-bottom:12px}.legend{margin-bottom:10px}}