.hanziTransformPage{color:#3d3a57;background:radial-gradient(circle at 12% 10%,#ffe6b5 0,#0000 28%),radial-gradient(circle at 88% 8%,#cceee9 0,#0000 29%),linear-gradient(150deg,#fffaf0,#f1f7f4 54%,#f5effb);min-height:100dvh;padding:20px}.hanziTransformShell{width:min(900px,100%);margin:0 auto}.hanziTransformHeader{text-align:center;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:4px 0 20px;display:grid}.hanziTransformHeader>div>span,.hanziTransformEyebrow{color:#788675;letter-spacing:.08em;font-size:.95rem;font-weight:850}.hanziTransformHeader h1{color:#4f6580;margin:3px 0;font-size:clamp(1.8rem,5vw,2.5rem)}.hanziTransformBack{color:#536c77;justify-self:start;font-weight:850;text-decoration:none}.hanziTransformBadge{color:#537d70;background:#d8eee7;border-radius:18px;justify-self:end;place-items:center;width:54px;height:54px;font-size:1.8rem;font-weight:900;display:grid}.hanziTransformCard{text-align:center;background:#fffffbeb;border:2px solid #bfcdc0a6;border-radius:30px;align-content:center;justify-items:center;gap:12px;min-height:min(610px,100dvh - 125px);padding:clamp(22px,5vw,48px);display:grid;box-shadow:0 18px 55px #3f58551a}.hanziTransformCard h2{color:#455e6d;margin:0;font-size:clamp(1.45rem,4vw,2rem)}.hanziTransformEyebrow,.hanziTransformHint{margin:0}.hanziTransformHint{color:#707786;max-width:38em;font-size:1rem;font-weight:700;line-height:1.6}.hanziPreviewGrid{grid-template-columns:repeat(5,minmax(54px,1fr));gap:clamp(8px,2vw,16px);width:min(570px,100%);margin:18px 0 22px;display:grid}.hanziPreviewGrid span{aspect-ratio:1;color:#5c6e67;background:#fffdf2;border:2px solid #e6e5ce;border-radius:20px;place-items:center;font-size:clamp(2rem,7vw,3.3rem);font-weight:850;display:grid}.hanziPrimaryButton,.hanziSecondaryButton{min-height:54px;font:inherit;cursor:pointer;touch-action:manipulation;border:0;border-radius:16px;padding:10px 26px;font-size:1.08rem;font-weight:900}.hanziPrimaryButton{color:#fff;background:#5b8b7a;min-width:190px;box-shadow:0 5px #3f6c5c}.hanziPrimaryButton:active{transform:translateY(3px);box-shadow:0 2px #3f6c5c}.hanziQuestionMeta{color:#788675;font-weight:850}.hanziPieces{justify-content:center;align-items:center;gap:clamp(72px,17vw,176px);width:min(760px,100%);min-height:clamp(190px,36vh,310px);margin-inline:auto;display:flex}.hanziPiece{aspect-ratio:1;color:#4f6677;opacity:0;background:#fffdf2;border:3px solid #e5e5cf;border-radius:32px;place-items:center;width:clamp(112px,28vw,210px);font-size:clamp(5rem,18vw,10rem);font-weight:800;line-height:1;animation:.7s ease-out both hanziPieceFadeIn;display:grid}@keyframes hanziPieceFadeIn{0%{opacity:0}to{opacity:1}}.hanziNavigation{justify-content:space-between;align-items:center;gap:14px;width:min(520px,100%);margin-top:8px;display:flex}.hanziSecondaryButton{color:#53746a;background:#fff;border:2px solid #c6d5cb;min-width:132px}.hanziSecondaryButton:disabled{opacity:.42;cursor:not-allowed}.hanziCompleteIcon{font-size:4rem}.hanziReturnLink{color:#536c77;margin-top:6px;font-weight:850}.hanziPrimaryButton:focus-visible,.hanziSecondaryButton:focus-visible,.hanziTransformBack:focus-visible,.hanziReturnLink:focus-visible{outline-offset:4px;outline:4px solid #e3a654}@media (width<=520px){.hanziTransformPage{padding:12px}.hanziTransformHeader{text-align:left;grid-template-columns:1fr auto}.hanziTransformHeader>div{text-align:center;grid-area:1/1/auto/-1}.hanziTransformBack{grid-row:2}.hanziTransformBadge{grid-row:2;width:42px;height:42px}.hanziTransformCard{border-radius:23px;min-height:calc(100dvh - 125px);padding:22px 16px}.hanziPreviewGrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.hanziPreviewGrid span{border-radius:13px}.hanziPieces{gap:clamp(40px,12vw,78px);width:100%;min-height:220px}.hanziPiece{border-radius:23px;width:min(35vw,145px)}.hanziNavigation{gap:8px}.hanziPrimaryButton,.hanziSecondaryButton{min-width:0;padding-inline:16px}}@media (prefers-reduced-motion:reduce){.hanziPiece{animation-duration:1ms}}