@johnmorrisdotca/kazu 1.1.0 → 1.2.0

package/dist/yajilinGenerate.js

@@ -0,0 +1,224 @@
+import { isKazuSeed, seededRandom } from "./random.js";
+import { checkYajilin, isYajilinBoard, yajilinNeighbors } from "./yajilinBoard.js";
+import { solveYajilin } from "./yajilinSolve.js";
+const layouts = [
+    {
+        loop: [6, 7, 8, 13, 18, 17, 16, 11],
+        shaded: [1, 22, 5, 9, 24, 12, 20],
+        clues: [
+            [0, "left", 0],
+            [2, "up", 0],
+            [3, "up", 0],
+            [4, "down", 2],
+            [10, "up", 1],
+            [14, "down", 1],
+            [15, "left", 0],
+            [19, "up", 1],
+            [21, "down", 0],
+            [23, "up", 0],
+        ],
+    },
+    {
+        loop: [6, 7, 8, 13, 18, 17, 16, 11],
+        shaded: [0, 21, 15, 2, 14, 4, 12],
+        clues: [
+            [1, "right", 2],
+            [3, "left", 2],
+            [5, "down", 1],
+            [9, "right", 0],
+            [10, "down", 1],
+            [19, "up", 2],
+            [20, "left", 0],
+            [22, "up", 2],
+            [23, "right", 0],
+            [24, "down", 0],
+        ],
+    },
+    {
+        loop: [6, 7, 8, 13, 18, 17, 16, 11],
+        shaded: [24, 12, 22, 4, 15, 0, 2],
+        clues: [
+            [1, "right", 2],
+            [3, "down", 0],
+            [5, "down", 1],
+            [9, "right", 0],
+            [10, "left", 0],
+            [14, "up", 1],
+            [19, "left", 1],
+            [20, "left", 0],
+            [21, "down", 0],
+            [23, "right", 1],
+        ],
+    },
+    {
+        loop: [6, 7, 8, 13, 18, 17, 16, 11],
+        shaded: [12, 9, 2, 21, 0, 19, 10],
+        clues: [
+            [1, "right", 1],
+            [3, "up", 0],
+            [4, "down", 2],
+            [5, "up", 1],
+            [14, "left", 2],
+            [15, "right", 1],
+            [20, "down", 0],
+            [22, "up", 2],
+            [23, "up", 0],
+            [24, "up", 2],
+        ],
+    },
+    {
+        loop: [6, 7, 8, 13, 18, 17, 16, 11],
+        shaded: [20, 3, 22, 14, 1, 12, 24],
+        clues: [
+            [0, "left", 0],
+            [2, "down", 2],
+            [4, "up", 0],
+            [5, "right", 0],
+            [9, "down", 2],
+            [10, "up", 0],
+            [15, "right", 0],
+            [19, "up", 1],
+            [21, "right", 2],
+            [23, "up", 1],
+        ],
+    },
+    {
+        loop: [6, 7, 8, 13, 18, 17, 16, 11],
+        shaded: [14, 3, 21, 15, 24, 0, 12],
+        clues: [
+            [1, "up", 0],
+            [2, "right", 1],
+            [4, "left", 2],
+            [5, "right", 0],
+            [9, "left", 0],
+            [10, "down", 1],
+            [19, "left", 1],
+            [20, "right", 2],
+            [22, "right", 1],
+            [23, "left", 1],
+        ],
+    },
+    {
+        loop: [6, 7, 8, 13, 18, 17, 16, 11],
+        shaded: [15, 24, 9, 21, 5, 3, 1],
+        clues: [
+            [0, "left", 0],
+            [2, "right", 1],
+            [4, "right", 0],
+            [10, "up", 1],
+            [12, "down", 0],
+            [14, "right", 0],
+            [19, "left", 1],
+            [20, "down", 0],
+            [22, "up", 0],
+            [23, "down", 0],
+        ],
+    },
+    {
+        loop: [6, 7, 8, 13, 18, 17, 16, 11],
+        shaded: [4, 2, 0, 10, 23, 21, 19],
+        clues: [
+            [1, "right", 2],
+            [3, "left", 2],
+            [5, "up", 1],
+            [9, "down", 1],
+            [12, "down", 0],
+            [14, "up", 1],
+            [15, "right", 1],
+            [20, "right", 2],
+            [22, "right", 1],
+            [24, "up", 2],
+        ],
+    },
+    {
+        loop: [6, 7, 8, 13, 18, 23, 22, 21, 16, 11],
+        shaded: [10, 4, 2, 17, 0, 24],
+        clues: [
+            [1, "right", 2],
+            [3, "up", 0],
+            [5, "down", 1],
+            [9, "down", 1],
+            [12, "down", 1],
+            [14, "up", 1],
+            [15, "right", 1],
+            [19, "left", 1],
+            [20, "down", 0],
+        ],
+    },
+    {
+        loop: [6, 7, 8, 13, 18, 23, 22, 21, 16, 11],
+        shaded: [3, 15, 19, 17, 1, 5],
+        clues: [
+            [0, "left", 0],
+            [2, "right", 1],
+            [4, "down", 1],
+            [9, "down", 1],
+            [10, "down", 1],
+            [12, "right", 0],
+            [14, "down", 1],
+            [20, "left", 0],
+            [24, "up", 1],
+        ],
+    },
+    {
+        loop: [6, 7, 8, 13, 18, 23, 22, 21, 16, 11],
+        shaded: [2, 17, 4, 0, 20, 10],
+        clues: [
+            [1, "left", 1],
+            [3, "right", 1],
+            [5, "up", 1],
+            [9, "left", 0],
+            [12, "up", 1],
+            [14, "down", 0],
+            [15, "up", 2],
+            [19, "right", 0],
+            [24, "down", 0],
+        ],
+    },
+];
+function transformCell(cell, turns, reflect) {
+    let x = cell % 5, y = Math.floor(cell / 5);
+    if (reflect)
+        x = 4 - x;
+    for (let turn = 0; turn < turns; turn += 1)
+        [x, y] = [4 - y, x];
+    return y * 5 + x;
+}
+function transformDirection(direction, turns, reflect) {
+    const vector = { up: [0, -1], right: [1, 0], down: [0, 1], left: [-1, 0] };
+    let [x, y] = vector[direction];
+    if (reflect)
+        x = -x;
+    for (let turn = 0; turn < turns; turn += 1)
+        [x, y] = [-y, x];
+    return (Object.entries(vector).find(([, value]) => value[0] === x && value[1] === y)?.[0] ?? "up");
+}
+function edgesFromLoop(board, loop) {
+    return loop.map((cell, index) => {
+        const next = loop[(index + 1) % loop.length];
+        return yajilinNeighbors(board, cell).find(item => item.cell === next).edge;
+    }).sort((a, b) => a - b);
+}
+/** Seeded original 5×5 families, accepted only after a completed uniqueness proof. */
+export function generateYajilin(size = 5, seed = 1) {
+    if (size !== 5 || !isKazuSeed(seed))
+        throw new RangeError("Invalid Yajilin settings");
+    const random = seededRandom(seed), layout = layouts[Math.floor(random() * layouts.length)];
+    const turns = Math.floor(random() * 4), reflect = random() < 0.5;
+    const clues = Array(25).fill(null);
+    for (const [cell, direction, count] of layout.clues) {
+        const transformed = transformCell(cell, turns, reflect);
+        clues[transformed] = { direction: transformDirection(direction, turns, reflect), count };
+    }
+    const board = { width: 5, height: 5, clues };
+    const shaded = Array(25).fill(false);
+    for (const cell of layout.shaded)
+        shaded[transformCell(cell, turns, reflect)] = true;
+    const expectedEdges = edgesFromLoop(board, layout.loop.map(cell => transformCell(cell, turns, reflect)));
+    if (!isYajilinBoard(board) || !checkYajilin(board, shaded, expectedEdges).ok)
+        throw new Error("Invalid Yajilin layout");
+    const proof = solveYajilin(board);
+    if (!proof.complete || proof.count !== 1 || !proof.solution)
+        throw new Error("No uniquely proved Yajilin found within the generation budget; try another seed");
+    return { ...board, seed, solution: proof.solution };
+}

package/dist/yajilinMount.d.ts

@@ -0,0 +1,2 @@
+import type { YajilinMount, YajilinMountOptions } from "./yajilin.types.ts";
+export declare function mountYajilin(element: HTMLElement, initial: YajilinMountOptions): YajilinMount;

package/dist/yajilinMount.js

@@ -0,0 +1,162 @@
+import { checkYajilin, yajilinNeighbors } from "./yajilinBoard.js";
+import { decodeYajilin, encodeYajilin, hintYajilin, newYajilin, restartYajilin, toggleYajilinEdge, toggleYajilinShade, undoYajilin } from "./yajilinGame.js";
+import { drawYajilin } from "./yajilinDraw.js";
+import { YAJILIN_PLAY_STYLE } from "./yajilinStyle.js";
+import { YAJILIN_STRINGS } from "./yajilinStrings.js";
+export function mountYajilin(element, initial) {
+    const document = element.ownerDocument, style = document.createElement("style");
+    style.textContent = YAJILIN_PLAY_STYLE;
+    const root = document.createElement("section");
+    root.className = "kazu-yajilin";
+    const help = document.createElement("p"), board = document.createElement("div");
+    board.className = "ky-board";
+    const modes = document.createElement("div");
+    modes.className = "ky-tools ky-modes";
+    const tools = document.createElement("div");
+    tools.className = "ky-tools";
+    const status = document.createElement("p");
+    status.className = "ky-status";
+    status.setAttribute("aria-live", "polite");
+    root.append(help, modes, board, tools, status);
+    element.replaceChildren(style, root);
+    let options = { ...initial };
+    let game = initial.progress ? decodeYajilin(initial.progress) : null;
+    const sameBoard = game && game.board.width === initial.board.width && game.board.height === initial.board.height
+        && game.board.clues.every((clue, cell) => JSON.stringify(clue) === JSON.stringify(initial.board.clues[cell]));
+    if (!sameBoard)
+        game = newYajilin(initial.board);
+    let selected = 0, anchor = null, mode = "line";
+    let errors = [], message = "", dead = false;
+    const words = () => YAJILIN_STRINGS[options.language ?? "en"];
+    const copy = () => ({ ...game, board: { ...game.board, clues: game.board.clues.map(clue => clue ? { ...clue } : null) }, shaded: [...game.shaded], edges: [...game.edges], history: game.history.map(turn => ({ shaded: [...turn.shaded], edges: [...turn.edges] })) });
+    const changed = () => { options.onChange?.(copy()); if (checkYajilin(game.board, game.shaded, game.edges).ok)
+        options.onFinish?.(copy()); };
+    const toggleBetween = (first, second) => {
+        const edge = yajilinNeighbors(game.board, first).find(next => next.cell === second)?.edge;
+        if (edge === undefined)
+            return;
+        game = toggleYajilinEdge(game, edge);
+        anchor = second;
+        selected = second;
+        errors = [];
+        message = "";
+        render();
+        changed();
+    };
+    const render = () => {
+        if (dead)
+            return;
+        const w = words();
+        help.textContent = w.help;
+        board.innerHTML = drawYajilin(game.board, { ...options, shaded: game.shaded, edges: game.edges, selected, errors });
+        const controls = document.createElement("div");
+        controls.className = "ky-cells";
+        controls.style.gridTemplateColumns = `repeat(${game.board.width}, 1fr)`;
+        controls.style.gridTemplateRows = `repeat(${game.board.height}, 1fr)`;
+        game.board.clues.forEach((clue, cell) => {
+            const button = document.createElement("button");
+            button.type = "button";
+            button.className = "ky-cell";
+            button.dataset.cell = String(cell);
+            if (clue)
+                button.dataset.clue = "true";
+            button.textContent = clue ? `${clue.direction} ${clue.count}` : String(cell + 1);
+            button.setAttribute("aria-label", clue ? `${clue.direction} ${clue.count}` : `row ${Math.floor(cell / game.board.width) + 1}, column ${cell % game.board.width + 1}${game.shaded[cell] ? ", shaded" : ""}`);
+            button.setAttribute("aria-pressed", String(selected === cell));
+            button.tabIndex = selected === cell ? 0 : -1;
+            button.onclick = () => {
+                selected = cell;
+                if (mode === "shade") {
+                    game = toggleYajilinShade(game, cell);
+                    errors = [];
+                    changed();
+                }
+                else if (anchor === null)
+                    anchor = cell;
+                else if (anchor !== cell)
+                    toggleBetween(anchor, cell);
+                render();
+            };
+            button.onkeydown = event => {
+                const x = cell % game.board.width, y = Math.floor(cell / game.board.width);
+                const moves = { ArrowUp: [0, -1], ArrowDown: [0, 1], ArrowLeft: [-1, 0], ArrowRight: [1, 0] };
+                if (event.key in moves) {
+                    event.preventDefault();
+                    const [dx, dy] = moves[event.key], nextX = x + dx, nextY = y + dy;
+                    if (nextX >= 0 && nextX < game.board.width && nextY >= 0 && nextY < game.board.height) {
+                        selected = nextY * game.board.width + nextX;
+                        render();
+                        board.querySelectorAll(".ky-cell")[selected]?.focus();
+                    }
+                }
+                else if (event.key === "Enter") {
+                    event.preventDefault();
+                    if (mode === "shade") {
+                        game = toggleYajilinShade(game, cell);
+                        errors = [];
+                        changed();
+                    }
+                    else if (anchor === null)
+                        anchor = cell;
+                    else if (anchor !== cell)
+                        toggleBetween(anchor, cell);
+                    render();
+                    board.querySelectorAll(".ky-cell")[selected]?.focus();
+                }
+                else if (event.key === " ") {
+                    event.preventDefault();
+                    mode = "shade";
+                    game = toggleYajilinShade(game, cell);
+                    errors = [];
+                    changed();
+                    render();
+                    board.querySelectorAll(".ky-cell")[selected]?.focus();
+                }
+                else if (event.key.toLowerCase() === "l") {
+                    mode = "line";
+                    render();
+                    board.querySelectorAll(".ky-cell")[selected]?.focus();
+                }
+                else if (event.key.toLowerCase() === "s") {
+                    mode = "shade";
+                    render();
+                    board.querySelectorAll(".ky-cell")[selected]?.focus();
+                }
+            };
+            controls.append(button);
+        });
+        board.append(controls);
+        modes.replaceChildren();
+        tools.replaceChildren();
+        const add = (host, label, action, pressed) => {
+            const button = document.createElement("button");
+            button.type = "button";
+            button.textContent = label;
+            if (pressed !== undefined)
+                button.setAttribute("aria-pressed", String(pressed));
+            button.onclick = action;
+            host.append(button);
+        };
+        add(modes, w.line, () => { mode = "line"; render(); }, mode === "line");
+        add(modes, w.shade, () => { mode = "shade"; render(); }, mode === "shade");
+        add(tools, w.undo, () => { game = undoYajilin(game); errors = []; message = ""; render(); changed(); });
+        add(tools, w.hint, () => {
+            const hint = hintYajilin(game);
+            if (!hint)
+                message = w.bad;
+            else {
+                game = hint.type === "shade" ? toggleYajilinShade(game, hint.cell) : toggleYajilinEdge(game, hint.edge);
+                game = { ...game, helped: true };
+                selected = hint.type === "shade" ? hint.cell : selected;
+                message = w.good;
+                changed();
+            }
+            render();
+        });
+        add(tools, w.check, () => { errors = checkYajilin(game.board, game.shaded, game.edges).errors; message = errors.length ? w.bad : w.good; render(); });
+        add(tools, w.restart, () => { game = restartYajilin(game); anchor = null; errors = []; message = ""; render(); changed(); });
+        status.textContent = checkYajilin(game.board, game.shaded, game.edges).ok ? (game.helped ? w.helped : w.won) : message;
+    };
+    render();
+    return { game: copy, progress: () => encodeYajilin(game), set: next => { options = { ...options, ...next }; render(); }, restart: () => { game = restartYajilin(game); anchor = null; render(); changed(); }, destroy: () => { dead = true; element.replaceChildren(); } };
+}

package/dist/yajilinPlay.types.d.ts

@@ -0,0 +1 @@
+export type { YajilinDrawOptions as YajilinDrawOptions, YajilinMount as YajilinMount, YajilinMountOptions as YajilinMountOptions } from "./yajilin.types.ts";

package/dist/yajilinPlay.types.js

@@ -0,0 +1 @@
+export {};

package/dist/yajilinSolve.d.ts

@@ -0,0 +1,6 @@
+import type { YajilinBoard, YajilinSolve } from "./yajilin.types.ts";
+/** Counts public shade patterns whose remaining cells form the single required loop. */
+export declare function solveYajilin(board: YajilinBoard, options?: {
+    limit?: number;
+    nodes?: number;
+}): YajilinSolve;

package/dist/yajilinSolve.js

@@ -0,0 +1,82 @@
+import { YAJILIN_NODE_BUDGET } from "./yajilin.constants.js";
+import { checkYajilin, isYajilinBoard, yajilinNeighbors, yajilinRay } from "./yajilinBoard.js";
+/** Counts public shade patterns whose remaining cells form the single required loop. */
+export function solveYajilin(board, options = {}) {
+    if (!isYajilinBoard(board))
+        throw new RangeError("Invalid Yajilin board");
+    const limit = options.limit ?? 2, budget = options.nodes ?? YAJILIN_NODE_BUDGET;
+    if (!Number.isInteger(limit) || limit < 1 || !Number.isInteger(budget) || budget < 1)
+        throw new RangeError("Invalid search bounds");
+    const total = board.width * board.height, state = Array(total).fill(-1), shadeable = [];
+    const rays = board.clues.flatMap((clue, cell) => clue ? [{ cell, clue, cells: yajilinRay(board, cell, clue.direction) }] : []);
+    board.clues.forEach((clue, cell) => { if (clue)
+        state[cell] = 2;
+    else
+        shadeable.push(cell); });
+    let count = 0, nodes = 0, complete = true, solution = null;
+    const candidateEdges = (shaded) => {
+        const edges = [];
+        for (let cell = 0; cell < total; cell += 1) {
+            if (board.clues[cell] || shaded[cell])
+                continue;
+            for (const next of yajilinNeighbors(board, cell))
+                if (cell < next.cell && !board.clues[next.cell] && !shaded[next.cell])
+                    edges.push(next.edge);
+        }
+        return edges;
+    };
+    const raysPossible = () => rays.every(({ clue, cells }) => {
+        const shaded = cells.filter(cell => state[cell] === 1).length;
+        const unknown = cells.filter(cell => state[cell] === -1).length;
+        return shaded <= clue.count && shaded + unknown >= clue.count;
+    });
+    const visit = (depth) => {
+        if (++nodes > budget) {
+            complete = false;
+            return;
+        }
+        if (!raysPossible())
+            return;
+        if (depth === shadeable.length) {
+            const shaded = state.map(value => value === 1), edges = candidateEdges(shaded);
+            if (!checkYajilin(board, shaded, edges).ok)
+                return;
+            count += 1;
+            solution ?? (solution = { shaded, edges });
+            if (count >= limit)
+                complete = false;
+            return;
+        }
+        let chosen = -1, bestScore = -1;
+        for (const cell of shadeable) {
+            if (state[cell] !== -1)
+                continue;
+            let score = 0;
+            for (const clue of rays)
+                if (clue.cells.includes(cell))
+                    score += 1;
+            if (score > bestScore) {
+                chosen = cell;
+                bestScore = score;
+            }
+        }
+        if (chosen < 0)
+            return;
+        state[chosen] = 0;
+        visit(depth + 1);
+        if (!complete) {
+            state[chosen] = -1;
+            return;
+        }
+        const x = chosen % board.width, y = Math.floor(chosen / board.width);
+        const touchesShade = (x > 0 && state[chosen - 1] === 1) || (x + 1 < board.width && state[chosen + 1] === 1)
+            || (y > 0 && state[chosen - board.width] === 1) || (y + 1 < board.height && state[chosen + board.width] === 1);
+        if (!touchesShade) {
+            state[chosen] = 1;
+            visit(depth + 1);
+        }
+        state[chosen] = -1;
+    };
+    visit(0);
+    return { count, solution, complete, nodes };
+}

package/dist/yajilinStrings.d.ts

@@ -0,0 +1,32 @@
+export declare const YAJILIN_STRINGS: {
+    readonly en: {
+        readonly title: "Yajilin";
+        readonly help: "Shade the number of cells each arrow points to. Shaded cells cannot touch. Every other empty cell is part of one loop.";
+        readonly line: "Line";
+        readonly shade: "Shade";
+        readonly undo: "Undo";
+        readonly hint: "Hint";
+        readonly check: "Check";
+        readonly restart: "Restart";
+        readonly won: "Solved!";
+        readonly helped: "Solved with help.";
+        readonly good: "Keep going; the loop is not complete yet.";
+        readonly bad: "Check the marked cells, arrows, and line.";
+        readonly cell: "cell";
+    };
+    readonly ja: {
+        readonly title: "やじりん";
+        readonly help: "矢印の先にある黒マスの数を合わせます。黒マスは辺で隣り合えません。残りの空きマスを一つの輪にします。";
+        readonly line: "線";
+        readonly shade: "黒マス";
+        readonly undo: "戻す";
+        readonly hint: "ヒント";
+        readonly check: "確認";
+        readonly restart: "やり直す";
+        readonly won: "完成！";
+        readonly helped: "ヒントを使って完成。";
+        readonly good: "輪はまだ完成していません。続けましょう。";
+        readonly bad: "印のついたマス、矢印、線を確認してください。";
+        readonly cell: "マス";
+    };
+};

package/dist/yajilinStrings.js

@@ -0,0 +1,4 @@
+export const YAJILIN_STRINGS = {
+    en: { title: "Yajilin", help: "Shade the number of cells each arrow points to. Shaded cells cannot touch. Every other empty cell is part of one loop.", line: "Line", shade: "Shade", undo: "Undo", hint: "Hint", check: "Check", restart: "Restart", won: "Solved!", helped: "Solved with help.", good: "Keep going; the loop is not complete yet.", bad: "Check the marked cells, arrows, and line.", cell: "cell" },
+    ja: { title: "やじりん", help: "矢印の先にある黒マスの数を合わせます。黒マスは辺で隣り合えません。残りの空きマスを一つの輪にします。", line: "線", shade: "黒マス", undo: "戻す", hint: "ヒント", check: "確認", restart: "やり直す", won: "完成！", helped: "ヒントを使って完成。", good: "輪はまだ完成していません。続けましょう。", bad: "印のついたマス、矢印、線を確認してください。", cell: "マス" },
+};

package/dist/yajilinStyle.d.ts

@@ -0,0 +1 @@
+export declare const YAJILIN_PLAY_STYLE = "\n.kazu-yajilin { color:var(--kz-ink,#1f2320); font:16px/1.4 system-ui,sans-serif; }\n.kazu-yajilin .ky-board { position:relative; max-width:440px; margin:auto; }\n.kazu-yajilin svg { border:1px solid var(--kz-frame,#a98954); border-radius:4px; }\n.kazu-yajilin .ky-cells { position:absolute; inset:6%; display:grid; }\n.kazu-yajilin .ky-cell { border:0; background:transparent; color:transparent; cursor:pointer; }\n.kazu-yajilin .ky-cell:focus-visible { outline:3px solid var(--kz-focus,#c57d2d); outline-offset:-5px; }\n.kazu-yajilin .ky-tools { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:.8rem 0; }\n.kazu-yajilin button { font:inherit; padding:.45rem .8rem; }\n.kazu-yajilin .ky-status { min-height:1.5em; text-align:center; }\n.kazu-yajilin .ky-modes [aria-pressed=\"true\"] { outline:2px solid var(--kz-frame,#a98954); }\n";

package/dist/yajilinStyle.js

@@ -0,0 +1,12 @@
+export const YAJILIN_PLAY_STYLE = `
+.kazu-yajilin { color:var(--kz-ink,#1f2320); font:16px/1.4 system-ui,sans-serif; }
+.kazu-yajilin .ky-board { position:relative; max-width:440px; margin:auto; }
+.kazu-yajilin svg { border:1px solid var(--kz-frame,#a98954); border-radius:4px; }
+.kazu-yajilin .ky-cells { position:absolute; inset:6%; display:grid; }
+.kazu-yajilin .ky-cell { border:0; background:transparent; color:transparent; cursor:pointer; }
+.kazu-yajilin .ky-cell:focus-visible { outline:3px solid var(--kz-focus,#c57d2d); outline-offset:-5px; }
+.kazu-yajilin .ky-tools { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:.8rem 0; }
+.kazu-yajilin button { font:inherit; padding:.45rem .8rem; }
+.kazu-yajilin .ky-status { min-height:1.5em; text-align:center; }
+.kazu-yajilin .ky-modes [aria-pressed="true"] { outline:2px solid var(--kz-frame,#a98954); }
+`;