:root{color-scheme:light;--paper: #f3e6cc;--paper-2: #e7d4ae;--ink: #2a2218;--ink-soft: #5a4c3c;--amber: #b86a10;--amber-bright: #e4a02a;--amber-glow: #f3c56a;--teal: #1a6b66;--teal-deep: #0f4a47;--line: #3a3126;--danger: #8a3528;--ok: #2c6b3a;--focus: #1a6b66;--tile: #fbf3e1;--tile-ink: #2a2218;--shadow: color-mix(in oklab, var(--ink) 16%, transparent);--radius: .85rem;--font: ui-sans-serif, system-ui, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;--in-oklab: }@supports (background: linear-gradient(in oklab,white,black)){:root{--in-oklab: in oklab}}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--paper: #1b1713;--paper-2: #120f0c;--ink: #f4e7d2;--ink-soft: #c9b59a;--amber: #e39b2e;--amber-bright: #f3c56a;--amber-glow: #ffd98a;--teal: #4cb8b1;--teal-deep: #2f8b86;--line: #d9cbb6;--danger: #e07a6c;--ok: #8dcf97;--focus: #7ee0d8;--tile: #241e18;--tile-ink: #f4e7d2;--shadow: rgb(0 0 0 / .4)}}*,*:before,*:after{box-sizing:border-box}html{min-block-size:100dvb;background:var(--paper)}body{margin:0;min-block-size:100dvb;font-family:var(--font);font-size:1rem;line-height:1.5;color:var(--ink);background-color:var(--paper);background-image:radial-gradient(900px 480px at 50% -8%,color-mix(in oklab,var(--amber-bright) 22%,transparent),transparent 70%),repeating-linear-gradient(0deg,color-mix(in oklab,var(--ink) 4.5%,transparent) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,color-mix(in oklab,var(--ink) 3%,transparent) 0 1px,transparent 1px 4px);overflow-x:clip}.visually-hidden:where(:not(:focus-within,:active)){position:absolute!important;clip-path:inset(50%)!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;white-space:nowrap!important}.skip-link{position:fixed;inset-block-start:.6rem;inset-inline-start:.6rem;z-index:8;padding:.55rem .8rem;background:var(--tile);color:var(--ink);border:2px solid var(--ink);border-radius:999px;text-decoration:none;font-weight:650}.skip-link:not(:focus){position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}:where(a:any-link,button,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid var(--focus);outline-offset:3px}button,.chip{font:inherit;color:inherit;min-block-size:44px;min-inline-size:44px}button{cursor:pointer;background:var(--tile);border:1.5px solid color-mix(in oklab,var(--ink) 28%,var(--paper));border-radius:999px;padding:.45rem .9rem;color:var(--ink)}button:hover{border-color:var(--teal)}button.primary{background:var(--teal);color:#f7f3ea;border-color:var(--teal-deep)}button.danger{background:var(--danger);color:#fff8f4;border-color:color-mix(in oklab,var(--danger) 70%,black)}button:disabled{opacity:.45;cursor:not-allowed}.app{min-block-size:100dvb;display:grid;grid-template-rows:auto 1fr auto;max-inline-size:72rem;margin-inline:auto;padding-inline:max(.85rem,env(safe-area-inset-left)) max(.85rem,env(safe-area-inset-right));padding-block:.7rem max(1rem,env(safe-area-inset-bottom));gap:.7rem}.top{display:flex;flex-wrap:wrap;align-items:safe center;gap:.55rem .8rem}.brand{display:flex;flex-direction:column;min-inline-size:0}.brand h1{margin:0;font-size:clamp(1.35rem,1rem + 2.4cqi,2rem);letter-spacing:.08em;font-weight:720;line-height:1.15;text-wrap:balance}.brand p{margin:0;color:var(--ink-soft);font-size:.92rem}.top-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-inline-start:auto}.notice{display:flex;flex-wrap:wrap;gap:.5rem;align-items:safe center;padding:.7rem .85rem;background:color-mix(in oklab,var(--amber-bright) 22%,var(--tile));border:1.5px solid var(--amber);border-radius:var(--radius)}.notice[hidden]{display:none}main{min-inline-size:0}.picker{display:grid;gap:1.1rem}.continue-card{display:flex;flex-wrap:wrap}.continue-card .primary{min-inline-size:min(100%,16rem)}.daily-card,.band{background:color-mix(in oklab,var(--tile) 88%,transparent);border:1.5px solid color-mix(in oklab,var(--ink) 16%,var(--paper));border-radius:calc(var(--radius) + .2rem);padding:.9rem;box-shadow:0 10px 24px var(--shadow)}.daily-card{display:grid;gap:.55rem}.kicker{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:700}.daily-card h2,.band h2{margin:0;font-size:1.15rem}.daily-actions,.replay{display:flex;flex-wrap:wrap;gap:.4rem}.puzzle-grid{list-style:none;margin:.7rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(5.6rem,1fr));gap:.45rem}.puzzle-grid button{inline-size:100%;border-radius:.9rem;display:grid;justify-items:start;padding:.55rem .65rem;text-align:start;min-block-size:52px}.puzzle-grid .mark{font-size:.78rem;color:var(--ok);font-weight:700}.play{display:grid;gap:.75rem;justify-items:center}.play-meta{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:baseline;justify-content:center;text-align:center}.play-meta h2{margin:0;font-size:1.05rem}.status-text{margin:0;color:var(--ink-soft)}.board-wrap{inline-size:min(100%,28rem);container-type:inline-size}.board{--n: 4;--gap: .32rem;display:grid;grid-template-columns:repeat(var(--n),minmax(44px,1fr));gap:var(--gap);padding:.55rem;background:color-mix(in oklab,var(--paper-2) 70%,var(--tile));border:1.5px solid color-mix(in oklab,var(--ink) 20%,var(--paper));border-radius:1.1rem;box-shadow:inset 0 1px #ffffff59,0 12px 28px var(--shadow)}.tile{position:relative;aspect-ratio:1;min-inline-size:44px;min-block-size:44px;padding:0;border-radius:.55rem;background:var(--tile);border:1.5px solid color-mix(in oklab,var(--ink) 22%,var(--tile));box-shadow:inset 0 1px #ffffff47}.tile[data-type=blank]{background:color-mix(in oklab,var(--paper-2) 55%,var(--tile));cursor:default}.tile[data-type=source]{background:color-mix(in oklab,var(--amber-glow) 28%,var(--tile))}.tile.is-lit{border-color:color-mix(in oklab,var(--amber) 55%,var(--ink))}.tile.is-hint{box-shadow:0 0 0 3px var(--teal)}.tile:disabled{opacity:1;cursor:default}.glyph{display:block;width:86%;height:86%;margin:7%;transform:rotate(calc(var(--turn, 0) * 90deg));transform-origin:center}.pipe{fill:none;stroke:var(--tile-ink);stroke-width:9.5;stroke-linecap:round}.joint,.lamp-core{fill:var(--tile-ink)}.lamp-ring{fill:none;stroke:var(--tile-ink);stroke-width:5}.sun{fill:var(--amber-bright);stroke:var(--amber);stroke-width:3}.ray{stroke:var(--amber);stroke-width:3.5;stroke-linecap:round}.tile.is-lit .pipe{stroke:var(--amber);stroke-width:11}.tile.is-lit .joint,.tile.is-lit .lamp-core{fill:var(--amber)}.tile.is-lit .lamp-ring{fill:var(--amber-glow);stroke:var(--amber)}.tile[data-type=source] .glyph{transform:none}@media (prefers-reduced-motion: no-preference){.glyph{transition:transform .18s ease}}.toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;width:min(100%,28rem)}.win-banner{text-align:center;font-weight:730;letter-spacing:.04em;color:var(--teal-deep);min-block-size:1.4em}[data-action=next]{min-inline-size:8rem}@media (prefers-color-scheme: dark){.win-banner{color:var(--amber-bright)}button.primary{color:#10201f}}dialog{border:1.5px solid color-mix(in oklab,var(--ink) 22%,var(--paper));border-radius:1.1rem;padding:1.1rem 1.15rem 1.2rem;background:var(--tile);color:var(--ink);max-inline-size:min(28rem,calc(100vw - 2rem));width:min(28rem,calc(100vw - 2rem))}dialog::backdrop{background:#1c120a75;overflow:hidden;overscroll-behavior:contain}dialog:modal{overscroll-behavior:contain}dialog h2{margin:0 0 .5rem;font-size:1.2rem;text-wrap:balance}dialog p{margin:0 0 .8rem;max-width:40rem}.dialog-actions{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end}.setting-row{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-block:.55rem}.setting-row>span{min-inline-size:4.5rem}.muted{color:var(--ink-soft);font-size:.92rem}footer{color:var(--ink-soft);font-size:.82rem;display:flex;flex-wrap:wrap;gap:.4rem .9rem}@media (min-width: 900px){.app{padding-block-start:1.2rem}.play{grid-template-columns:minmax(16rem,22rem) minmax(18rem,1fr);align-items:start}.play-meta,.toolbar,.win-banner{justify-self:stretch}.board-wrap{grid-column:2;grid-row:1 / span 4;inline-size:min(100%,32rem)}}@media (forced-colors: active){:root{--ink: CanvasText;--paper: Canvas;--tile: Canvas;--teal: LinkText;--amber: Highlight;--focus: Highlight;--ok: LinkText;--danger: Mark}.tile,button,.daily-card,.band,.board{border:2px solid CanvasText;box-shadow:none;background:Canvas}.tile.is-lit{outline:3px solid Highlight}}@media (prefers-reduced-motion: reduce){.glyph{transition:none}}