:root{--paper:#faf6ef;--card:#f3eee5;--ink-base:#33302a;--accent:#b8552f}html,body{height:100%;margin:0}body{background:var(--paper);-webkit-user-select:none;user-select:none;background-position:50%;background-size:cover;justify-content:center;align-items:center;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;display:flex;overflow:hidden}#dim{background:var(--paper);pointer-events:none;position:fixed;inset:0}#dim[hidden]{display:none}.crosshair #board{cursor:crosshair}#board.zoomed{cursor:grab}#board.zoomed.dragging{cursor:grabbing}.grid-lines{fill:none;stroke:var(--ink-base);stroke-width:1px;opacity:.14;pointer-events:none}.grid-off .grid-lines{display:none}.glass #stage svg{filter:drop-shadow(0 1px 3px #00000073)}#stage{aspect-ratio:1;touch-action:manipulation;width:min(100vw,100vh,500px);position:relative}#stage.full,#stage.expanded{aspect-ratio:auto;width:100vw;height:100vh}#stage.full #board{inset:50% auto auto 50%;transform:translate(-50%,-50%)}#stage svg{width:100%;height:100%;display:block;position:absolute;inset:0}#stage svg[hidden]{display:none}#title{--ink:var(--ink-base);cursor:pointer}#board{--ink:var(--ink-base);cursor:pointer;opacity:1;touch-action:none;transition:opacity .65s linear}#zoom-badge{bottom:calc(14px + env(safe-area-inset-bottom));left:calc(14px + env(safe-area-inset-left));background:var(--card);color:var(--ink-base);border:1.5px solid var(--ink-base);opacity:0;pointer-events:none;z-index:20;border-radius:6px;padding:4px 10px;font-size:13px;transition:opacity .25s;position:fixed}#zoom-badge.show{opacity:.85}#board.faded{opacity:0}#board .tubes{opacity:var(--tube-alpha,1);transition:opacity .4s ease-out}#board.solved .tubes,#board.hinting .tubes{opacity:1}#board.solved{--ink:var(--accent)}#menu{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));border:1.5px solid var(--ink-base);background:var(--card);width:40px;height:40px;color:var(--ink-base);cursor:pointer;opacity:.45;touch-action:manipulation;z-index:20;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:opacity .15s ease-out,box-shadow .15s ease-out;display:flex;position:fixed}#menu:hover,#menu:focus-visible{opacity:1}#menu.hold-on{box-shadow:0 0 0 2.5px var(--accent);opacity:.8}#hint{bottom:calc(10px + env(safe-area-inset-bottom));right:calc(10px + env(safe-area-inset-right));border:1.5px solid var(--ink-base);background:var(--card);width:40px;height:40px;color:var(--ink-base);font:inherit;cursor:pointer;opacity:.45;touch-action:manipulation;z-index:20;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:17px;transition:opacity .15s ease-out;display:flex;position:fixed}#hint:hover,#hint:focus-visible{opacity:1}#hint[hidden]{display:none}#hint.hint-on{box-shadow:0 0 0 2.5px var(--accent);opacity:.8}.hint-full{--ink:#f22}.hint-partial{--ink:#4f8dff}#settings{z-index:30;background:#00000040;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#settings[hidden]{display:none}#settings-card{background:var(--card);color:var(--ink-base);border:1.5px solid var(--ink-base);border-radius:12px;width:min(320px,88vw);max-height:min(80vh,560px);padding:8px 20px;font-size:15px;overflow-y:auto}.settings-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;min-height:46px;display:flex;position:relative}.row-label{align-items:center;gap:6px;display:flex}#settings button.help{border:1px solid var(--ink-base);width:16px;height:16px;color:var(--ink-base);font:inherit;cursor:pointer;opacity:.4;background:0 0;border-radius:50%;flex:none;padding:0;font-size:10px;line-height:1}#settings button.help:hover{opacity:.9}.tooltip{z-index:5;background:var(--card);border:1px solid var(--ink-base);text-align:left;pointer-events:none;border-radius:6px;padding:7px 10px;font-size:12.5px;line-height:1.45;display:none;position:absolute;top:calc(100% - 8px);left:0;right:0;box-shadow:0 2px 8px #0000002e}.help:hover .tooltip,.help.open .tooltip{display:block}:is(.settings-row:has(.help.open),.settings-row:has(.help:hover)){z-index:10}.settings-row[hidden]{display:none}.settings-controls{align-items:center;gap:10px;display:flex}#settings input{accent-color:var(--accent);width:18px;height:18px;margin:0}#settings input[type=range]{width:110px;height:auto}.track-name{text-overflow:ellipsis;white-space:nowrap;opacity:.75;max-width:96px;overflow:hidden}#settings label{align-items:center;gap:5px;display:flex}#settings label[hidden]{display:none}.swatch{cursor:pointer;border:1.5px solid;border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;padding:0;display:flex}.swatch span{border-radius:50%;width:10px;height:10px;display:block}.swatch.active{outline:2.5px solid var(--accent);outline-offset:2px}.swatch.custom{border-style:dashed}#settings input[type=color]{border:1px solid var(--ink-base);cursor:pointer;background:0 0;border-radius:6px;width:34px;height:26px;padding:0}#settings button.action{font:inherit;color:inherit;border:1.5px solid var(--ink-base);cursor:pointer;background:0 0;border-radius:6px;padding:6px 14px}#settings button.choice{padding:4px 10px;font-size:14px}#settings button.chosen{background:var(--accent);border-color:var(--accent);color:var(--card)}.stats-open .settings-row{display:none}#stats-view{padding:10px 0}#stats-view .stat-line{font-variant-numeric:tabular-nums;justify-content:space-between;align-items:center;gap:10px;min-height:30px;display:flex}#stats-view button{margin-bottom:8px}#board path,#board circle{transition:stroke .4s ease-out,fill .4s ease-out}.tile-rot{transition:transform .15s ease-out}#board.solved .photo-rot{transition-duration:.45s}.fx,.fx-halo{--ink:var(--fx,var(--accent));opacity:0;pointer-events:none;transition:opacity .5s;display:none}.fx-flow .fx,.fx-flow .fx-halo{display:inline}.fx{stroke-dasharray:7 9}.fx-halo{filter:blur(2px)}:root.fx-gold{--fx:#d9a441}:root.fx-multi .fx,:root.fx-multi .fx-halo{--ink:var(--fx-tile,var(--accent))}#board.solved .fx,#board.solved .fx-halo{--ink:var(--fx-solved,var(--ink-base))}.fx-flow .fx-on .fx{opacity:.85;animation:1.4s linear infinite fx-flow}.fx-flow .fx-on .fx-halo{opacity:.35}.fx-flow.fx-aurora .fx-on .fx{animation:1.4s linear infinite fx-flow,24s linear infinite fx-hue}.fx-aurora .fx-on .fx-halo{animation:24s linear infinite fx-hue-blur}.perf-lite .fx-halo{filter:none;animation:none}#board.fx-freeze .fx-on .fx{animation:none}@keyframes fx-flow{to{stroke-dashoffset:-16px}}@keyframes fx-hue{to{filter:hue-rotate(360deg)}}@keyframes fx-hue-blur{0%{filter:blur(2px)hue-rotate()}to{filter:blur(2px)hue-rotate(360deg)}}@media (prefers-reduced-motion:reduce){.fx,.fx-halo{animation:none!important}}