:root{--paper:#f7f5ef;--ink:#171714;--muted:#6b6a62;--line:#d8d5ca;--accent:#d84832;--blue:#2c6d86;--cell:clamp(43px,10.7vw,70px);font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--paper)}button{font:inherit;color:inherit}.topbar{height:64px;border-bottom:1px solid var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,4vw)}.wordmark{border:0;background:none;font-family:Georgia,"Noto Serif SC",serif;font-weight:700;font-size:21px;cursor:pointer}.wordmark span{background:var(--ink);color:var(--paper);padding:5px 7px;margin-right:5px}.header-actions{display:flex;gap:8px}.icon-button{width:36px;height:36px;border:1px solid var(--ink);border-radius:50%;background:transparent;cursor:pointer;font-weight:700}.icon-button:hover{background:var(--ink);color:var(--paper)}main{max-width:1120px;margin:auto;padding:clamp(30px,6vw,72px) 24px 60px}.hidden{display:none!important}.hero{max-width:700px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:800;color:var(--accent);margin:0 0 14px}.hero h1,.solution h1{font-family:Georgia,"Noto Serif SC",serif;font-size:clamp(42px,7vw,76px);line-height:1.03;letter-spacing:-.04em;margin:0}.intro{font-family:Georgia,"Noto Serif SC",serif;font-size:18px;line-height:1.75;color:#44433d;max-width:620px}.level-switch{border-bottom:1px solid var(--line);margin-top:48px;display:flex;gap:28px}.level-switch button{border:0;border-bottom:3px solid transparent;background:none;padding:12px 2px;font-weight:700;cursor:pointer;color:var(--muted)}.level-switch button.active{border-color:var(--ink);color:var(--ink)}.puzzle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin-top:22px}.puzzle-card{min-height:150px;text-align:left;border:1px solid var(--line);background:#fffdf8;padding:18px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;transition:.18s}.puzzle-card:hover{transform:translateY(-2px);border-color:var(--ink)}.puzzle-card .number{font-family:Georgia,serif;font-size:34px}.puzzle-card small{color:var(--muted)}.puzzle-card.done{background:#e6efe6}.puzzle-card.done small{color:#36613b}.game-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}.game-heading h1{font-family:Georgia,"Noto Serif SC",serif;font-size:clamp(32px,5vw,52px);margin:0}.timer{font-variant-numeric:tabular-nums;color:var(--muted);font-size:18px}.game-layout{display:grid;grid-template-columns:auto minmax(260px,1fr);gap:clamp(30px,6vw,80px);align-items:start}.board{--gap:2px;width:calc(var(--cell)*6 + var(--gap)*5 + 10px);height:calc(var(--cell)*6 + var(--gap)*5 + 10px);display:grid;grid-template-columns:repeat(6,var(--cell));grid-template-rows:repeat(6,var(--cell));gap:var(--gap);padding:4px;background:#fff url('/static/assets/bg.png') center/100% 100% no-repeat;border:1px solid var(--ink);position:relative;overflow:hidden}.cell{border:0;background:transparent;position:relative;cursor:pointer;padding:0;z-index:2}.cell:hover{outline:3px solid var(--accent);z-index:3}.cell::after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.13);border-radius:7px}.cell[data-piece]:not(.fixed){box-shadow:inset 0 0 0 2px rgba(216,72,50,.24)}.piece-visual{position:absolute;left:calc(4px + var(--x)*(var(--cell) + var(--gap)));top:calc(4px + var(--y)*(var(--cell) + var(--gap)));width:calc(var(--cols)*var(--cell) + (var(--cols) - 1)*var(--gap));height:calc(var(--rows)*var(--cell) + (var(--rows) - 1)*var(--gap));z-index:1;pointer-events:none}.piece-visual img{position:absolute;left:50%;top:50%;width:calc(var(--base-cols)*var(--cell) + (var(--base-cols) - 1)*var(--gap));height:calc(var(--base-rows)*var(--cell) + (var(--base-rows) - 1)*var(--gap));transform:translate(-50%,-50%) rotate(calc(var(--turn)*-90deg));object-fit:fill}.status{min-height:24px;text-align:center;font-size:14px;color:var(--muted)}.status.error{color:var(--accent)}.status.success{color:#39733e;font-weight:700}.piece-panel{border-top:2px solid var(--ink)}.panel-title{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px;font-weight:800}.piece-tray{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:18px 0}.piece-button{min-height:100px;border:1px solid var(--line);background:#fffdf8;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.piece-button:hover,.piece-button.selected{border:2px solid var(--accent)}.piece-button.placed{opacity:.32;pointer-events:none}.piece-thumb{width:78px;height:78px;display:flex;align-items:center;justify-content:center}.piece-thumb img{display:block;max-width:72px;max-height:72px;object-fit:contain;transition:transform .18s}.controls{display:grid;grid-template-columns:1fr 1fr;gap:9px}.controls button,.standalone{min-height:46px;border:1px solid var(--ink);cursor:pointer;font-weight:800}.secondary{background:transparent}.primary{background:var(--ink);color:white}.controls .primary{grid-column:1/-1}.solution-link{width:100%;border:0;background:none;text-decoration:underline;margin-top:18px;cursor:pointer;color:var(--muted)}dialog{max-width:540px;width:calc(100% - 36px);border:1px solid var(--ink);padding:36px;background:var(--paper);box-shadow:8px 8px 0 rgba(0,0,0,.18)}dialog::backdrop{background:rgba(20,20,18,.55)}dialog h2{font:700 34px Georgia,"Noto Serif SC",serif;margin:0 0 24px}.dialog-close{position:absolute;right:14px;top:12px;border:0;background:none;font-size:28px;cursor:pointer}dialog ol{padding:0;list-style:none}dialog li{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line)}dialog li span,.tip{color:var(--muted);line-height:1.55}.qr-frame{background:white;padding:16px;margin:auto;max-width:280px}.qr-frame img{display:block;width:100%}.solution{max-width:760px;margin:auto}.solution-board{margin:32px 0}.standalone{padding:0 28px}.solution-board .cell{cursor:default}.solution-board .cell:hover{outline:0}@media(max-width:780px){main{padding-left:16px;padding-right:16px}.game-layout{grid-template-columns:1fr}.board-column{margin:auto}.piece-panel{width:min(100%,500px);margin:auto}.game-heading{align-items:start}.timer{font-size:14px}.piece-tray{grid-template-columns:repeat(3,1fr)}}