.px-top{background:linear-gradient(135deg,#A03266,#E0607E)}
.px-sub{color:#FFE3EC;font-size:16px}
.px-top .lvb.cur{box-shadow:0 0 0 3px #A03266,0 0 0 5px #fff}
.px-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start}
.board-wrap{background:#FBF4F7;border-radius:18px;padding:14px;overflow:auto}
.board{width:max-content;margin:0 auto;display:grid;gap:2px;touch-action:none;user-select:none;-webkit-user-select:none}
.pc{width:var(--cs);height:var(--cs);background:#fff;border:1px solid #E6D3DC;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#5C5766;cursor:pointer;font-size:calc(var(--cs) * .38);line-height:1;transition:background .12s}
.pc.math{font-size:calc(var(--cs) * .27);letter-spacing:-.5px}
.pc.hex{font-size:calc(var(--cs) * .2);font-family:Menlo,Consolas,monospace;font-weight:600}
.pc.painted{color:rgba(0,0,0,.35)}
.pc.dark{color:rgba(255,255,255,.55)}
.pc.wrong{outline:3px solid #E0475B;outline-offset:-3px;animation:blink .5s 2}
@keyframes blink{50%{outline-color:transparent}}
.hdr{display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:600;font-size:13px;color:#A03266}
.rowclue{display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:13.5px;white-space:nowrap;color:#3B3646;font-weight:600}
.rowclue.bin{font-family:Menlo,Consolas,monospace;letter-spacing:2px;font-size:15px}
.px-pal{display:flex;flex-wrap:wrap;gap:8px}
.sw{display:flex;align-items:center;gap:8px;border:2px solid var(--line);background:#fff;border-radius:12px;padding:6px 12px 6px 6px;cursor:pointer;font:inherit;font-weight:600}
.sw i{width:30px;height:30px;border-radius:8px;border:1px solid rgba(0,0,0,.15);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;color:#221F29}
.sw[aria-pressed="true"]{border-color:#221F29;box-shadow:0 0 0 3px #FFE066}
.sw small{font-family:Menlo,Consolas,monospace;font-weight:500;color:var(--muted)}
.clue-list{display:grid;gap:8px}
.clue-list div{display:flex;gap:8px;align-items:flex-start;font-size:15.5px}
.clue-list i{flex:0 0 auto;width:18px;height:18px;border-radius:5px;border:1px solid rgba(0,0,0,.2);margin-top:3px}
.clue-list span{line-height:1.6}
.q-box{display:grid;gap:8px}
.q-box .field{max-width:220px}
.px-preview{display:grid;gap:0;margin:8px auto;width:max-content;border-radius:6px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.px-preview i{width:14px;height:14px;display:block}
@media (max-width:900px){.px-grid{grid-template-columns:minmax(0,1fr)}}