:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--error:#d64545;--sans:system-ui, "Segoe UI", Roboto, sans-serif;font:18px/145% var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--error:#ff8a8a}}body{margin:0}.ip-shell{box-sizing:border-box;flex-direction:column;align-items:center;gap:16px;max-width:720px;margin:0 auto;padding:32px 20px 48px;display:flex}.ip-title{font-family:var(--sans);color:var(--text-h);margin:0;font-size:32px;font-weight:500}.ip-select-button{background:var(--accent-bg);color:var(--accent);cursor:pointer;border:2px solid #0000;border-radius:6px;padding:10px 20px;transition:border-color .3s;display:inline-block}.ip-select-button:hover{border-color:var(--accent-border)}.ip-select-button:focus-within{outline:2px solid var(--accent);outline-offset:2px}.ip-visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ip-status{min-height:1.45em;margin:0}.ip-status.is-error{color:var(--error)}.ip-preview-container{border:1px dashed var(--border);box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;width:100%;min-height:120px;padding:12px;display:flex}.ip-preview-image{border-radius:4px;max-width:100%;max-height:60vh;display:block}.ip-difficulty{border:1px solid var(--border);box-sizing:border-box;border-radius:8px;flex-direction:column;align-items:center;gap:12px;width:100%;margin:0;padding:16px;display:flex}.ip-difficulty[hidden]{display:none}.ip-difficulty-title{color:var(--text-h);padding:0 8px;font-size:18px}.ip-difficulty-options{gap:12px;display:flex}.ip-difficulty-option{border:2px solid var(--border);cursor:pointer;color:var(--text);border-radius:6px;align-items:center;gap:8px;padding:10px 18px;transition:border-color .2s,background-color .2s;display:inline-flex}.ip-difficulty-option:hover{border-color:var(--accent-border)}.ip-difficulty-option:has(input:checked){border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}.ip-difficulty-option input{accent-color:var(--accent);margin:0}.ip-board-section{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.ip-board-section[hidden]{display:none}.ip-board-title{color:var(--text-h);margin:0;font-size:20px;font-weight:500}.ip-puzzle-play{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.ip-puzzle-play:fullscreen{background:var(--bg);justify-content:center;padding:16px;overflow:auto}.ip-play-toolbar{flex-direction:column;align-items:center;gap:6px;display:flex}.ip-fullscreen-button{background:var(--accent-bg);color:var(--accent);font:inherit;cursor:pointer;border:2px solid #0000;border-radius:6px;padding:8px 16px;font-size:16px;transition:border-color .2s}.ip-fullscreen-button:hover{border-color:var(--accent-border)}.ip-fullscreen-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ip-fullscreen-feedback{min-height:1.4em;color:var(--error);margin:0;font-size:15px}.ip-fullscreen-feedback[hidden]{display:none}.ip-puzzle-stage{justify-content:center;align-items:center;width:100%;display:flex}.ip-puzzle-play:fullscreen .ip-puzzle-stage{flex:auto;min-width:0;min-height:0}.ip-puzzle-play:fullscreen .ip-board-frame{max-width:none}.ip-board-frame{width:100%}.ip-puzzle-board{--board-size:3;aspect-ratio:1;grid-template-columns:repeat(var(--board-size), 1fr);grid-template-rows:repeat(var(--board-size), 1fr);border:1px solid var(--border);box-sizing:border-box;width:100%;display:grid;overflow:hidden}.ip-tile{cursor:grab;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px #ffffff47}.ip-tile.is-dragging{opacity:.6}.ip-tile.is-correct{box-shadow:inset 0 0 0 1px #ffffff47,inset 0 0 0 2px #4ade808c}.ip-tile.is-touch-selected{box-shadow:inset 0 0 0 1px #ffffff47, inset 0 0 0 2px var(--accent)}.ip-tile.is-drop-target{box-shadow:inset 0 0 0 1px #ffffff47, inset 0 0 0 2px var(--accent-border)}.ip-completion{background:#4ade801f;border:1px solid #4ade808c;border-radius:8px;flex-direction:column;align-items:center;gap:12px;margin:0;padding:16px;display:flex}.ip-completion[hidden]{display:none}.ip-completion-text{color:var(--text-h);margin:0;font-weight:600}.ip-new-puzzle-button{background:var(--accent-bg);color:var(--accent);font:inherit;cursor:pointer;border:2px solid #0000;border-radius:6px;padding:10px 20px;transition:border-color .2s}.ip-new-puzzle-button:hover{border-color:var(--accent-border)}.ip-new-puzzle-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}