.app--sudoku{grid-template-rows:auto 1fr auto auto}.board{place-items:center;min-height:0;padding:4px 10px 6px;display:grid}.sudoku-grid{isolation:isolate;grid-template:repeat(9, var(--cell)) / repeat(9, var(--cell));background:var(--surface);box-shadow:0 6px 18px var(--shadow);touch-action:manipulation;border-radius:10px;padding:3px;display:grid;position:relative}.sudoku-grid[data-empty]{visibility:hidden}.sq{width:var(--cell);height:var(--cell);color:var(--accent);font-size:calc(var(--cell) * .56);font-variant-numeric:tabular-nums;box-shadow:inset -1px -1px 0 color-mix(in srgb, var(--text-dim) 22%, transparent);border-radius:3px;place-items:center;padding:0;font-weight:600;line-height:1;transition:background .12s;display:grid;position:relative}.sq:nth-child(9n){box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--text-dim) 22%, transparent)}.sq:nth-child(n+73){box-shadow:inset -1px 0 0 color-mix(in srgb, var(--text-dim) 22%, transparent)}.sq:nth-child(9n):nth-child(n+73){box-shadow:none}.sq.edge-left{border-left:2px solid color-mix(in srgb, var(--text-dim) 55%, transparent)}.sq.edge-top{border-top:2px solid color-mix(in srgb, var(--text-dim) 55%, transparent)}.sq.is-given{color:var(--text);font-weight:700}.sq-digit{pointer-events:none}.sq.is-peer{background:color-mix(in srgb, var(--accent) 18%, transparent)}.sq.is-same{background:color-mix(in srgb, var(--accent) 36%, transparent)}.sq.is-selected{background:color-mix(in srgb, var(--accent) 55%, transparent);box-shadow:inset 0 0 0 2px var(--accent)}.sq.is-conflict,.sq.is-conflict.is-given{color:var(--danger)}.sq.is-because{background:color-mix(in srgb, var(--accent) 26%, transparent)}.sq.is-hinted{background:color-mix(in srgb, var(--accent) 45%, transparent);box-shadow:inset 0 0 0 2px var(--accent)}.sq.is-mistake{background:color-mix(in srgb, var(--danger) 34%, transparent);box-shadow:inset 0 0 0 2px var(--danger)}.sq-ghost{color:var(--accent);opacity:.55;pointer-events:none;place-items:center;font-weight:700;display:grid;position:absolute;inset:0}.sq-notes{pointer-events:none;grid-template:repeat(3,1fr)/repeat(3,1fr);display:grid;position:absolute;inset:1px}.sq-notes i{font-size:calc(var(--cell) * .25);color:var(--text-dim);place-items:center;font-style:normal;font-weight:600;line-height:1;display:grid}.pad{padding:2px 12px 0}.keypad{grid-template-columns:repeat(6,1fr);gap:6px;width:min(420px,100%);margin:0 auto;display:grid}.key{background:var(--surface);color:var(--text);font-variant-numeric:tabular-nums;box-shadow:0 2px 0 var(--shadow);border-radius:12px;place-items:center;padding:9px 0 7px;font-size:1.25rem;font-weight:700;transition:transform .1s,opacity .15s,background .15s;display:grid;position:relative}.key:active:not(:disabled){box-shadow:none;transform:translateY(2px)}.key:disabled{opacity:.38;cursor:default}.key-left{color:var(--text-dim);font-size:.58rem;font-weight:600;line-height:1;position:absolute;top:3px;right:6px}.key.is-done{opacity:.4}.key--mode{flex-direction:row;grid-column:span 3;justify-content:center;align-items:center;gap:6px;padding:10px 0;font-size:.8rem;font-weight:600;display:flex}.key--mode svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:17px;height:17px}.key--mode.is-on{background:var(--accent);color:#fff}.key:nth-child(-n+9){grid-column:span 2}@media (max-height:680px){.key{padding:6px 0 5px;font-size:1.1rem}.key--mode{padding:7px 0}}