:root{color-scheme:light;--paper:#f3f5ee;--ink:#314c43;--muted:#85928a;--green:#397c64;--line:#e4eae0;--surface:#fffefb}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 12% 8%,#e4eddf 0,transparent 45%),radial-gradient(ellipse at 90% 90%,#f5eddf 0,transparent 42%),var(--paper);color:var(--ink);font:15px system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}
button,a{-webkit-tap-highlight-color:transparent;font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default;opacity:.38}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #479e89;outline-offset:3px}
a{color:var(--green);text-decoration:none}
header{max-width:1050px;height:76px;margin:auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;font-size:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--ink);letter-spacing:.02em}
.brand-mark{display:grid;grid-template-columns:repeat(2,10px);gap:3px;transform:rotate(-9deg);margin-right:3px}
.brand-mark i{height:10px;border-radius:3px;background:#70a590;box-shadow:inset 0 1px 1px #fff8}
.brand-mark i:nth-child(2){background:#edbd73}.brand-mark i:nth-child(3){background:#e89baf}.brand-mark i:nth-child(4){background:#92b8d6}
.brand-caption{border-left:1px solid #d7dfd2;padding-left:14px;margin-left:8px;color:var(--muted);font-size:11px;letter-spacing:.08em;font-weight:400}
.header-actions{display:flex;align-items:center;gap:18px}
.header-actions a{color:#77867d}.header-actions button,.library-heading button{border:0;background:none;color:var(--green);cursor:pointer}
#library-toggle,#close-library{display:none}
main{max-width:1050px;padding:0 24px 18px;margin:auto}.intro{display:none}
.layout{display:grid;grid-template-columns:minmax(0,550px) 300px;gap:22px;justify-content:center;align-items:start}
.card{border:1px solid #ffffff;background:var(--surface);border-radius:26px;box-shadow:0 12px 36px #324c3810,0 0 0 1px #dce4d65c}
.play{height:calc(100dvh - 94px);min-height:440px;max-height:980px;padding:20px;position:relative;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.level-heading{display:flex;align-items:center;gap:12px;min-width:0}
.level-heading>div:last-child{min-width:0}.top h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-controls{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.shape-control{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}
.shape-control select{font:inherit;font-size:11px;color:var(--green);background:#f5f8ef;border:1px solid #dfe7d8;border-radius:8px;padding:5px 3px;max-width:115px;cursor:pointer;min-height:28px}
.shape-control select:focus-visible{outline:3px solid #479e89;outline-offset:2px}
.target-preview{width:47px;height:47px;flex:none;padding:7px;border:1px solid #e9e9dc;background:#f5f3e9;border-radius:13px;display:grid;place-items:center}
.target-preview svg{width:100%;height:100%;filter:drop-shadow(0 2px 1px #483d2a15)}
.kicker{font-size:9px;letter-spacing:.1em;color:var(--muted);font-weight:600}
.top h2{font-size:19px;margin:4px 0 0;letter-spacing:.02em}
.badge{font-size:11px;color:var(--green);font-weight:600;white-space:nowrap;padding:7px 10px;border-radius:20px;background:#edf4ed;font-variant-numeric:tabular-nums}
.progress-track{height:5px;flex:none;background:#edf0e7;border-radius:9px;margin:14px 0 12px;overflow:hidden}
#progress-bar{height:100%;background:linear-gradient(90deg,#a6c7ab,#6caa8e);border-radius:9px;transition:width .3s}
.tutorial-tip{flex:none;margin:0 0 10px;padding:9px;border:1px solid #e2ebd8;border-radius:10px;background:#f0f5e8;color:#5e7853;text-align:center;font-size:11px;line-height:1.5}
.tutorial-tip[hidden]{display:none}
.board-stage{display:flex;justify-content:center;align-items:center;flex:1;min-height:0;overflow:visible;padding:10px 7px;background:radial-gradient(circle,#d8dfd180 .8px,transparent 1px) center/14px 14px;border-radius:18px}
.board{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));grid-auto-rows:var(--cell-size,auto);gap:0;flex:none;width:100%;max-width:100%;aspect-ratio:auto;align-content:start;padding:10px;border:1px solid #e0e4d8;background:#edf0e6;border-radius:17px;box-shadow:0 4px 0 #d4dbcc,0 10px 22px #4c604314,inset 0 2px 0 #ffffff}
.cell{appearance:none;border:0;border-radius:0;position:relative;display:grid;place-items:center;aspect-ratio:1;align-self:start;padding:0;background:transparent;box-shadow:none;min-width:0;min-height:0}
.board .cell{height:100%;aspect-ratio:auto;align-self:stretch}
.cell.blank{background:none;box-shadow:none;pointer-events:none}
/* Each target color fills its cell; a matching recessed socket sits above it. */
.board .cell:not(.blank){background:var(--goal)}
.socket,.bead,.flying{width:100%;height:100%;border-radius:0;background:transparent;display:grid;place-items:center;position:absolute;inset:0;pointer-events:none;box-shadow:none}
.socket{color:color-mix(in srgb,var(--goal) 65%,#66716b 35%)}
.bead,.flying{color:var(--bead)}
.socket svg,.bead svg,.flying svg{display:block;width:96%;height:96%;overflow:visible;pointer-events:none}
.square-facets{display:none}
body[data-bead-shape=square] .gem-facets{display:none}
body[data-bead-shape=square] .square-facets{display:inline}
body[data-bead-shape=square] .socket svg,body[data-bead-shape=square] .bead svg,body[data-bead-shape=square] .flying svg{width:100%;height:100%}
.cell.selected{z-index:2}
.has-selection .cell:not(.selected) .bead{filter:saturate(.82) brightness(.92)}
.cell.selected .bead{transform:translateY(-5px);filter:brightness(1.10) saturate(1.06) drop-shadow(0 5px 3px #30213d35);animation:selection-lift 140ms cubic-bezier(.2,.8,.3,1) both}
.selection-boundary{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3;transform:translateY(-5px);animation:selection-lift 140ms cubic-bezier(.2,.8,.3,1) both}
.cell.available{outline:2px solid #4c9e85;outline-offset:-2px}
.symbol{position:absolute;font-size:10px;font-weight:900;line-height:1;right:1px;bottom:1px;background:#fffffff0;color:#574e46;border-radius:3px;padding:2px;pointer-events:none}
.selection-status{flex:none;min-height:18px;text-align:center;color:#638471;font-size:11px;margin:12px 0;white-space:nowrap}
.selection-status::before{content:"";display:inline-block;width:5px;height:5px;background:#8cb59b;border-radius:50%;margin:0 7px 2px 0}
.shelf-section{flex:none;position:relative;background:linear-gradient(155deg,#fffdf8,#f1f0e7);border:1px solid #e0e2d5;border-radius:21px;padding:12px;box-shadow:0 4px 0 #d9ddce,0 7px 15px #46563d0b,inset 0 1px 0 #fff}
.shelf-section::before{content:"";position:absolute;top:4px;left:calc(50% - 15px);width:30px;height:3px;background:#dce1d3;border-radius:4px;box-shadow:0 1px 0 #fff}
.shelf-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;color:#687d65;font-size:10px;font-variant-numeric:tabular-nums}
.tray-label{display:flex;align-items:center;gap:8px;min-width:0}.tray-mark{display:grid;place-items:center;width:30px;height:30px;flex:none;border:1px solid #dee6d7;border-radius:10px;background:#edf3e8;color:#7d9978}.tray-mark svg{width:21px;height:21px}
.shelf-heading h3{font-size:12px;margin:0;font-weight:600;letter-spacing:.04em}.tray-caption{font-size:9px;letter-spacing:.02em;line-height:1.3;color:#9ca58f;margin:3px 0 0}
.tray-capacity{display:flex;align-items:center;gap:6px;flex:none;background:#f8faf3;border:1px solid #e2e7d9;border-radius:20px;padding:6px 8px;color:#819273;font-size:10px;white-space:nowrap}
.tray-meter{display:block;width:25px;height:4px;border-radius:5px;background:#e1e8d8;overflow:hidden}.tray-meter i{display:block;height:100%;border-radius:5px;background:#97b389;transition:width .2s}
.shelf{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:5px;padding:9px;border:1px solid #dee2d5;border-radius:13px;background:#e7e9df;box-shadow:inset 0 2px 3px #55654812,0 1px 0 #fff}
.shelf .cell{--goal:#dbe3cf;border:1px solid #d7ddcf;border-radius:6px;background:#f4f5ed;box-shadow:inset 0 1px 2px #64735c15,0 1px 0 #ffffff80}
.shelf .bead{width:82%;height:82%;inset:9%}
.shelf .cell.hollow::before{content:none}
.shelf .cell.hollow::after{content:"";position:absolute;width:3px;height:3px;left:calc(50% - 1.5px);top:calc(50% - 1.5px);border-radius:50%;background:#b6c0ac;opacity:.5}
.shelf .cell.available{outline:1px solid #a2bb98;outline-offset:-1px;background:#f2f8ed}
.shelf .cell.selected{background:#dfeada;border-color:#9eb790;box-shadow:inset 0 0 0 1px #b0c5a7}
.shelf .selection-boundary{display:none}
.shelf .symbol{font-size:7px;right:0;bottom:0;padding:1px}
.shelf-section.full{border-color:#dbc9a3}.shelf-section.full .tray-capacity{background:#f6edda;border-color:#e9d9b7;color:#a58a55}.shelf-section.full .tray-meter i{background:#cfb178}
.message{color:var(--muted);font-size:11px;min-height:18px;margin:10px 0 8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.6}
.control-footer{flex:none;height:76px;display:flex;flex-direction:column;justify-content:flex-end}
.play.gallery-level .control-footer{height:110px}
.gallery-level .completion{flex-direction:column;align-items:stretch;gap:9px;padding:10px 12px;min-height:100px}
.gallery-level .completion>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.gallery-level .completion p{font-size:10px}
.completion-actions,.completion-actions #pattern-actions{display:flex;gap:7px;align-items:center}
.completion-actions #pattern-actions[hidden]{display:none}
.completion-actions #pattern-actions{flex:1}
.completion-actions a{display:block;flex:1;text-align:center;white-space:nowrap;font-size:11px;padding:10px 7px;border:1px solid #d2dfc8;border-radius:9px;background:#fafcf6}
.completion-actions .primary{font-size:12px;padding:11px}
.browse-gallery{display:block;font-size:11px;margin:-7px 0 17px;color:#62816c}
#legacy-levels{margin-top:14px}
.gallery-level .symbol{font-size:7px;padding:1px}
.actions{display:flex;gap:6px;justify-content:center;flex:none;min-height:40px}
.actions button{flex:1;min-height:40px;background:#f7f8f2;border:1px solid #e8ece1;border-radius:12px;padding:9px 4px;color:#728071;font-size:12px;white-space:nowrap;transition:background .16s,box-shadow .16s,transform .16s}
.actions button[aria-pressed=true]{background:#e5f0e7;border-color:#d3e5d7;color:var(--green)}
#hint{background:#f5eddb;border-color:#eee1c5;color:#9b7c42}
#sound[aria-pressed=false]{color:#899186}
.actions button:active:not(:disabled){transform:translateY(1px)}
.side{max-height:calc(100dvh - 94px);overflow:auto;padding:22px;scrollbar-width:thin;scrollbar-color:#dce3d5 transparent}
.library-heading{display:flex;align-items:center;justify-content:space-between}
.eyebrow{font-size:9px;font-weight:700;letter-spacing:.15em;color:#88a18c}
.side h2{font-size:19px;margin:9px 0 7px;letter-spacing:.02em;display:flex;justify-content:space-between;align-items:center}
.side h2>span{color:#deb777;font-size:24px;font-weight:400}
.library-subtitle{font-size:11px;color:var(--muted);margin:0 0 19px;line-height:1.6}
.levels{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.levels button{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;border:1px solid #e8eade;border-radius:15px;padding:10px 5px;background:#fafaf5;color:#627364;transition:background .16s,border-color .16s,box-shadow .16s}
.level-art{display:grid;place-items:center;width:56px;height:52px;padding:4px;margin-bottom:3px}
.level-art svg{height:100%;width:100%;filter:drop-shadow(0 3px 1px #44503310)}
.levels button strong{font-size:11px;font-weight:600}.levels button .level-meta{font-size:9px;color:#99a08f}
.levels .active{background:#edf5e9;border-color:#89b395;box-shadow:inset 0 0 0 1px #89b39530;color:#387450}
.levels .active::after{content:"";position:absolute;top:9px;right:9px;width:5px;height:5px;border-radius:50%;background:#699b76}
.side details{margin-top:20px;border-top:1px solid var(--line);padding-top:17px}
.side summary{font-size:12px;font-weight:600;cursor:pointer;color:#687b66}
.side ol{padding-left:19px;margin:12px 0 8px}.side li{font-size:11px;line-height:1.8;margin:8px 0;color:#8a9584}.side li strong{color:#5c7258}
.help-note{color:#99a18f;font-size:10px;line-height:1.8;margin-bottom:0}
.completion{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;min-height:64px;background:#edf4e7;border:1px solid #d5e2cd;border-radius:14px;padding:12px 14px;text-align:left;color:#48764f;animation:finish-in 280ms ease-out}
.completion[hidden]{display:none}.completion strong{font-size:14px}.completion p{font-size:11px;margin:4px 0 0}
.primary{border:0;background:var(--green);color:white;border-radius:11px;padding:11px 16px;font-size:14px;white-space:nowrap;box-shadow:0 3px 0 #28634e}
.play.is-complete .actions,.play.is-complete .message{display:none}.play.is-complete .board{animation:finished-glow 600ms ease-out}
.flying{position:fixed;inset:auto;z-index:10;pointer-events:none;background:transparent}
.cell.arriving .bead,.cell.arriving .symbol{visibility:hidden}
.cell.queued{outline:2px solid #8aaf9f;outline-offset:-2px}
.cell.rejected,.shelf-section.rejected{animation:reject-nudge 150ms ease-out}
.cell.landed svg{animation:land-pop 120ms ease-out}
dialog{border:0;padding:0;background:transparent;width:calc(100% - 24px);max-width:480px;max-height:calc(100dvh - 32px);overflow:auto;border-radius:25px}
dialog::backdrop{background:#243d315e;backdrop-filter:blur(5px)}dialog .side{max-height:none;box-shadow:none}.library-heading button{font-size:12px}
.board,.shelf,.cell{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.drag-cursor{position:fixed;left:0;top:0;z-index:50;pointer-events:none;filter:drop-shadow(0 6px 5px #30213d38);will-change:transform}
.drag-cursor .bead{background:transparent}.drag-cursor .bead:first-child{transform:translate(-4px,4px);opacity:.6}
.drag-count{position:absolute;right:-7px;top:-8px;min-width:21px;height:21px;padding:0 5px;border-radius:12px;background:#347b66;color:#fff;box-shadow:0 1px 4px #0002;border:1px solid #fff;display:grid;place-items:center;font-size:11px;font-weight:700;pointer-events:none}
.cell.dragging-source .bead,.cell.dragging-source .symbol{visibility:hidden}.cell.drop-target{outline:3px solid #398c72;outline-offset:-3px;z-index:4}
@keyframes selection-lift{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@keyframes land-pop{0%{transform:scale(.95)}65%{transform:scale(1.018)}100%{transform:scale(1)}}
@keyframes reject-nudge{0%,100%{translate:0}35%{translate:-2px}70%{translate:2px}}
@keyframes finish-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes finished-glow{0%{filter:brightness(1)}45%{filter:brightness(1.08)}100%{filter:brightness(1)}}
@media(hover:hover){.actions button:hover:not(:disabled){background:#eaf0e4}.levels button:hover{border-color:#a9c2a2;background:#f0f5e9}.header-actions a:hover{color:var(--green)}}
@media(max-width:900px) and (min-width:721px){.layout{grid-template-columns:minmax(0,1fr) 250px;gap:16px}main,header{padding-left:18px;padding-right:18px}.side{padding:18px}.brand-caption{display:none}.play{padding:16px}.badge{padding:6px}.top h2{font-size:16px}.level-heading{gap:8px}.target-preview{width:40px;height:40px}}
@media(max-width:720px){
 .shape-control>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.shape-control select{font-size:10px;max-width:106px;min-height:28px;padding:4px}.top-controls{gap:3px}
 header{height:60px;padding:10px 18px}.brand{font-size:18px;gap:8px}.brand-caption{display:none}.brand-mark{grid-template-columns:repeat(2,9px);gap:2px}.brand-mark i{height:9px}
 .header-actions{gap:12px}.header-actions a{display:none}.header-actions .game-info-link{display:inline;font-size:11px}#library-toggle,#close-library{display:block}#library-toggle{font-size:12px;background:#fffaf0;border:1px solid #e6e9dc;border-radius:20px;padding:7px 11px}#library-toggle span{margin-left:4px}
 main{padding:0 10px 12px}.layout{display:block}.play{height:calc(100dvh - 72px);min-height:440px;border-radius:23px;padding:14px 12px 12px}
 .level-heading{gap:10px}.target-preview{width:40px;height:40px;border-radius:11px;padding:6px}.top h2{font-size:17px}.kicker{font-size:8px}.badge{font-size:10px;padding:6px 9px}
 .progress-track{margin:11px 0 10px;height:4px}.board-stage{padding:6px 4px}.board{padding:7px;border-radius:13px}.symbol{font-size:8px}
 .tutorial-tip{margin:0 0 8px;padding:7px;font-size:10px}.selection-status{font-size:10px;margin:10px 0;min-height:16px}
 .shelf-section{padding:10px;border-radius:18px}.shelf-heading{margin-bottom:8px}.shelf-heading h3{font-size:11px}.tray-mark{width:27px;height:27px;border-radius:9px}.tray-mark svg{width:18px;height:18px}.tray-label{gap:6px}.tray-caption{font-size:8px}.tray-capacity{font-size:9px;padding:5px 7px;gap:5px}.tray-meter{width:19px}.shelf{gap:4px;padding:7px;border-radius:11px}.shelf .cell{border-radius:5px}
 .message{margin:8px 0 7px;font-size:10px;min-height:16px}.actions{gap:5px}.actions button{padding:9px 2px;font-size:11px;border-radius:11px}
 .control-footer{height:72px}.completion{padding:10px;gap:8px;min-height:60px}.completion strong{font-size:13px}.completion .primary{font-size:12px;padding:10px 12px}
 .side{padding:22px}.level-art{width:64px;height:60px}.levels button{padding:13px 6px}.levels button strong{font-size:12px}.levels button .level-meta{font-size:10px}
}
@media(max-height:640px) and (max-width:720px){header{height:50px}.play{height:calc(100dvh - 62px);padding-top:10px}.target-preview{width:32px;height:32px;padding:4px;border-radius:9px}.top h2{font-size:15px;margin-top:2px}.progress-track{margin:8px 0}.selection-status{margin:7px 0}.tutorial-tip{padding:5px;margin-bottom:5px}.board-stage{padding-top:3px;padding-bottom:3px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.flying{display:none}}

.header-actions .language-link{display:inline-flex!important;align-items:center;white-space:nowrap;font-size:11px;color:var(--green)}
@media(max-width:380px){.header-actions{gap:10px}.header-actions .game-info-link{display:none!important}.brand{font-size:17px}}
html[lang="en"] .kicker{letter-spacing:.03em}html[lang="en"] .tray-caption{font-size:9px}html[lang="en"] .selection-status{font-size:10px}