.wg-page,.wg-tutorial{--wg-ink:#34364e;--wg-purple:#6960a8;--wg-green:#4f805b;--wg-yellow:#e3bb51;--wg-gray:#6c747e;color:var(--wg-ink);background:#faf9f5;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.45}.wg-page{max-width:560px;margin:16px auto 32px;padding:16px;border-radius:24px;position:relative;isolation:isolate}.wg-page *{box-sizing:border-box}.wg-page [hidden]{display:none!important}.wg-page button,.wg-page a,.wg-tutorial button{font:inherit;cursor:pointer;touch-action:manipulation}.wg-page button,.wg-tutorial button{border:1px solid #dedbe8;border-radius:12px;background:#fff;color:var(--wg-purple);min-height:44px;padding:8px 14px}.wg-page button:disabled,.wg-tutorial button:disabled{cursor:default;opacity:.5}.wg-page :focus-visible,.wg-tutorial :focus-visible{outline:3px solid #6960a8;outline-offset:3px}.wg-header{display:flex;gap:8px;align-items:center;margin-bottom:18px}.wg-header h1{font-size:20px;font-weight:800;margin:0;flex:1}.wg-header button,.wg-header a{min-width:44px;text-align:center;text-decoration:none;color:var(--wg-purple)}.wg-header a{font-size:32px}.wg-page .wg-primary,.wg-tutorial .wg-primary{background:var(--wg-purple);color:#fff;border-color:var(--wg-purple);font-weight:750;min-height:50px;width:100%}.wg-center{text-align:center}.wg-hero{padding:22px 10px 12px}.wg-hero h2,.wg-result h2{font-size:24px;font-weight:800}.wg-subtle{color:#666478;font-size:14px}.wg-progress{margin:14px 0;color:var(--wg-purple);text-align:center}.wg-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.wg-levels button{height:55px;font-weight:750;font-size:18px}.wg-levels .is-done{color:#fff;background:var(--wg-green);border-color:var(--wg-green)}.wg-pack{margin-top:24px}.wg-pack h2{font-size:15px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}.wg-meta{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:12px}.wg-meta b{color:var(--wg-purple)}.wg-clue{background:#edeaf7;padding:13px 16px;border-radius:15px;font-weight:600;margin-bottom:14px;display:flex;gap:10px}.wg-clue span:first-child{flex-shrink:0}.wg-board{display:grid;gap:5px;justify-content:center}.wg-row{display:flex;justify-content:center;gap:5px}.wg-tile{width:var(--wg-size,54px);height:var(--wg-size,54px);display:inline-flex;align-items:center;justify-content:center;background:#fff;border:2px solid #dcdde2;border-radius:7px;font-size:calc(var(--wg-size,54px) * .47);font-weight:800;flex-shrink:0}.wg-tile.is-active{border-color:var(--wg-purple)}.wg-tile.correct,.wg-page .wg-key.correct{background:var(--wg-green);border-color:var(--wg-green);color:#fff}.wg-tile.present,.wg-page .wg-key.present{background:var(--wg-yellow);border-color:var(--wg-yellow);color:var(--wg-ink)}.wg-tile.absent,.wg-page .wg-key.absent{background:var(--wg-gray);border-color:var(--wg-gray);color:#fff}.wg-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:12px;margin-top:12px}.wg-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px}.wg-legend .correct{background:var(--wg-green)}.wg-legend .present{background:var(--wg-yellow)}.wg-legend .absent{background:var(--wg-gray)}.wg-row-rule,.wg-message{text-align:center;font-size:13px;margin:8px 0}.wg-message{min-height:20px}.wg-hint{text-align:center}.wg-page .wg-hint button{background:transparent;border:0}.wg-picture{font-size:64px;margin:10px}.wg-keyboard{position:sticky;bottom:0;background:#faf9f5;padding:12px 0 max(8px,env(safe-area-inset-bottom));z-index:1;margin-top:8px}.wg-keyrow{display:flex;gap:4px;justify-content:center;margin-top:5px}.wg-page .wg-key{flex:1;min-width:0;max-width:50px;padding:4px 0;min-height:46px;border:0;background:#e9e6ee;color:var(--wg-ink);font-weight:800;border-radius:7px}.wg-page .wg-key.wide{flex:1.7;max-width:78px;font-size:13px}.wg-page .wg-key.submit{background:var(--wg-purple);color:#fff}.wg-result{text-align:center;padding:30px 4px}.wg-result .wg-primary{margin:16px 0 10px}.wg-result h3{font-size:24px}.wg-result .wg-picture{font-size:80px}#wg-fireworks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}#wg-storage{font-size:13px;color:#7f5221;background:#fff2d6;border-radius:10px;padding:10px}.wg-tutorial{box-sizing:border-box;border:0;border-radius:22px;width:min(520px,calc(100vw - 24px));height:min(800px,calc(100dvh - 24px));max-width:none;max-height:none;margin:auto;padding:0;overflow:hidden}.wg-tutorial[open]{display:flex;flex-direction:column}.wg-tutorial::backdrop{background:#28223780}.wg-tutorial-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 8px;color:var(--wg-purple)}.wg-tutorial-head button{border:0;background:transparent}.wg-tutorial progress{appearance:none;width:calc(100% - 48px);margin:0 24px;height:5px;border:none;border-radius:5px;background:#edeaf7;color:var(--wg-purple);flex-shrink:0}.wg-tutorial progress::-webkit-progress-bar{background:#edeaf7;border-radius:5px}.wg-tutorial progress::-webkit-progress-value{background:var(--wg-purple);border-radius:5px}.wg-tutorial progress::-moz-progress-bar{background:var(--wg-purple)}#wg-tutorial-body{overflow:auto;flex:1;padding:22px 24px}.wg-tutorial h2{text-align:center;font-size:24px;font-weight:800;line-height:1.3;margin:0 0 20px}.wg-tutorial p{line-height:1.5}.wg-tutorial .wg-row{margin:20px 0}.wg-tutorial .wg-picture{text-align:center}.wg-tutorial footer{padding:10px 24px 18px;flex-shrink:0}.wg-tutorial small{display:block;text-align:center;color:#666478;font-size:12px;margin-top:8px}.wg-practice-keys{display:flex;gap:8px;margin:22px 0}.wg-practice-keys button{flex:1;min-width:0;height:56px;font-size:24px;font-weight:800}.wg-practice-keys .expected{border:3px solid var(--wg-purple);background:#edeaf7}.wg-explain{display:flex;align-items:flex-start;gap:12px;margin-top:18px}.wg-explain .wg-tile{--wg-size:40px}.wg-explain p{margin:0}.wg-instruction{text-align:center;color:var(--wg-purple);min-height:24px}.wg-tutorial ul{padding-left:22px}.wg-tutorial li{margin:14px 0}@media(max-width:600px){.wg-page{margin:0 auto 20px;border-radius:0;padding:12px}.wg-page .wg-board{--wg-size:clamp(32px,5dvh,54px)}.wg-tutorial{width:100vw;height:100dvh;border-radius:0}.wg-tutorial-head{padding-top:max(12px,env(safe-area-inset-top))}.wg-tutorial footer{padding-bottom:max(18px,env(safe-area-inset-bottom))}.wg-keyboard{bottom:calc(58px + env(safe-area-inset-bottom));padding-bottom:8px}}@media(prefers-reduced-motion:reduce){.wg-page *,.wg-tutorial *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}