:root{--primary:var(--seal);--primary-dark:var(--seal-2);--primary-soft:var(--seal-soft);--primary-line:var(--seal-line);--bg:var(--paper);--bg-soft:var(--paper-2);--card:var(--surface);--text:var(--ink);--muted:var(--ink-3);--line-strong:var(--line-2);--shadow-card:var(--sh-1);--shadow-pop:var(--sh-3);--ring:0 0 0 3px var(--seal-soft)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}body,html{margin:0;padding:0}body{color:var(--text);overscroll-behavior-y:none;touch-action:manipulation;-webkit-text-size-adjust:100%}.container{max-width:1180px;margin:0 auto;padding:0 16px 48px}.practice-layout{max-width:640px;margin:0 auto}.practice-main{min-width:0}@media (min-width:960px){.container{padding:0 24px 80px}}.page h1{margin:0 0 12px;font-size:22px;line-height:1.35}.page h1,.page h2{font-family:var(--f-serif)}.page h2{margin:22px 0 8px;font-size:17px}.page li,.page p{font-size:15px;line-height:1.7}.page p,.page ul{margin:0 0 12px}.page ul{padding-left:20px}.page li{margin-bottom:6px}.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow-card);margin-bottom:16px}.input-row{display:flex;gap:10px}.input-row .charsearch{flex:1 1 auto;min-width:0}.input-row .charsearch__input{width:100%;font-size:17px;padding:13px 40px 13px 38px;border-width:1.5px;border-radius:14px}.input-row .charsearch__input::-moz-placeholder{text-overflow:ellipsis}.input-row .charsearch__input::placeholder{text-overflow:ellipsis}.input-row .wordtools__icon{left:14px}.input-row .wordtools__clear{right:10px}.card{background:var(--card);border-radius:16px;padding:16px;margin-bottom:16px;box-shadow:var(--shadow-card);border:1px solid var(--line)}#practice,.card{scroll-margin-top:70px}.card.complete{border-color:#cfe6d9;box-shadow:0 1px 2px rgba(43,138,86,.08),0 2px 8px rgba(43,138,86,.1)}.card-head{display:flex;align-items:center;gap:14px;margin-bottom:8px}.char-big{font-size:44px;line-height:1;font-weight:700;display:flex;align-items:flex-start;gap:2px}.char-meta{min-width:0}.word-chip{display:inline-block;margin-left:8px;padding:2px 10px;border:1px solid var(--primary);border-radius:999px;font-size:13px;font-weight:600;color:var(--primary);background:var(--primary-soft);vertical-align:middle}.word-chip .chip-speak{border:0;background:transparent;padding:0 0 0 6px;font-size:12px;line-height:1;cursor:pointer;opacity:.85}.word-chip .chip-speak:active{transform:scale(.8)}.word-card{display:flex;align-items:center;gap:12px;width:100%;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);text-align:left}.word-card-char{font-size:22px;font-weight:600;min-width:44px;flex-shrink:0;text-align:center}.word-card-meta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}.word-card-pinyin{font-size:12px}.word-card-en,.word-card-pinyin{color:var(--muted);line-height:1.3}.word-card-en{font-size:11.5px}.grid-box{position:relative;border:1px solid var(--primary-line);border-radius:12px;overflow:hidden;background:var(--surface)}.grid-box .writer svg{display:block;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}.grid-box .writer svg svg>path{filter:url(#hc-ink)}.grid-mi,.grid-tian{background-image:repeating-linear-gradient(90deg,rgba(180,52,42,.38) 0 5px,transparent 5px 10px),repeating-linear-gradient(180deg,rgba(180,52,42,.38) 0 5px,transparent 5px 10px);background-size:100% 1px,1px 100%}.grid-mi,.grid-mi:after,.grid-mi:before,.grid-tian{background-repeat:no-repeat;background-position:50%}.grid-mi:after,.grid-mi:before{content:"";position:absolute;inset:-50%;background-image:repeating-linear-gradient(90deg,rgba(180,52,42,.38) 0 6px,transparent 6px 14px);background-size:100% 1px;pointer-events:none}.grid-mi:before{transform:rotate(45deg)}.grid-mi:after{transform:rotate(-45deg)}.grid-none{background-image:none;border-color:var(--line-2)}.practice-writer{position:relative}.practice-ink-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.practice-grid{width:min(280px,100%);margin:0 auto;aspect-ratio:1/1}.practice-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:10px}.practice-btns .btn{flex:0 1 auto;padding:8px 14px;font-size:13px}.practice-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.card.no-data .char-big{opacity:.55}.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-size:14px;z-index:100;max-width:80vw;text-align:center;pointer-events:none}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}.card.shake{animation:shake .25s ease}.loading-spinner{width:16px;height:16px;border:2px solid var(--seal-line);border-top-color:var(--primary);border-radius:50%;animation:loading-spin .8s linear infinite;flex-shrink:0}@keyframes loading-spin{to{transform:rotate(1turn)}}.boot-error{margin:16px;padding:12px 16px;background:var(--seal-soft);border:1px solid var(--seal-line);border-radius:10px;color:var(--seal-2);font-size:14px;text-align:center}.practice-hero{padding:40px 0 4px}.practice-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--primary)}.practice-eyebrow:before{content:"";width:18px;height:2px;background:var(--primary);border-radius:2px}.practice-hero-title{margin:10px 0 8px;font-family:var(--f-serif);font-size:clamp(30px,4vw,44px);line-height:1.12;font-weight:600;letter-spacing:-.01em;color:var(--text)}.practice-hero-sub{margin:0;font-size:17px;line-height:1.65;color:var(--muted)}.sample-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 14px}.sample-chips-lead{display:inline-flex;align-items:center;gap:8px}.sample-chips-label{color:var(--muted);font-size:14px}.sample-chips-refresh{display:inline-flex;align-items:center;justify-content:center;width:35px;height:35px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease}.sample-chips-refresh svg{transition:transform .3s ease}.sample-chips-refresh:hover{border-color:var(--seal-line);color:var(--primary);background:var(--primary-soft);box-shadow:0 3px 8px rgba(180,52,42,.12)}.sample-chips-refresh:hover svg{transform:rotate(180deg)}.sample-chip{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;padding:7px 14px;font-size:15px;line-height:1.3;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease}.sample-chip:hover{border-color:var(--seal-line);color:var(--primary);background:var(--primary-soft);transform:translateY(-1px);box-shadow:0 3px 8px rgba(180,52,42,.12)}.sample-chip:active{transform:translateY(0);background:var(--seal-soft)}@media (max-width:639px){.practice-hero{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.sample-chips{flex-wrap:nowrap;gap:8px;margin:10px 0 12px;overflow-x:auto;scrollbar-width:none}.sample-chips::-webkit-scrollbar{display:none}.sample-chips-lead{flex:none;position:sticky;left:0;padding-right:2px;background:var(--paper)}.sample-chips-label{font-size:13px}.sample-chips-refresh{width:27px;height:27px}.sample-chip{flex:none;padding:4px 10px;font-size:13px;background:var(--paper-2);box-shadow:none}.practice-layout{padding-top:16px}}.practice-more{max-width:640px;margin:40px auto 8px}.practice-more h2{margin:0 0 10px;font-size:20px}.practice-more h2,.practice-more h3{font-family:var(--f-serif);font-weight:600;color:var(--text)}.practice-more h3{margin:20px 0 8px;font-size:17px}.practice-more p{margin:0 0 12px;font-size:15px;line-height:1.7}.practice-more a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}.practice-more figure{margin:16px 0;display:flex;flex-direction:column;align-items:center}.practice-more figure img{width:300px;height:auto;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 24px -14px rgba(27,25,22,.35)}.practice-more figcaption{margin-top:10px;font-size:13px;line-height:1.55;color:var(--muted);text-align:center;max-width:340px}.share-list{margin-bottom:8px}.share-list .share-list__textarea{min-height:84px;font-size:17px;line-height:1.9}.share-list .share-list__row{display:flex;align-items:center;gap:12px;margin-top:10px}.share-list .share-list__count{margin-left:auto;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted)}.share-list .share-list__note{margin:8px 0 0;font-size:13.5px}.share-list .share-list__note--error{color:var(--seal-2)}.share-list .share-list__note--ok{color:var(--ok)}.share-list .share-list__result{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.share-list .share-list__result .input{flex:1 1 200px;min-width:0;font-size:12.5px}.share-list .share-list__result .btn{flex:none}.share-list .share-list__hint{margin:8px 0 0;font-size:13.5px;color:var(--muted)}html[data-deeplink] [data-boot-card]{display:none}html[data-deeplink] [data-boot-skeleton]{display:block}.card-skeleton{pointer-events:none}.card-skeleton .skeleton-block,.card-skeleton .skeleton-line{border-radius:8px;background:linear-gradient(90deg,var(--line) 25%,var(--paper-2) 37%,var(--line) 63%);background-size:400% 100%;animation:skeleton-shimmer 1.4s ease infinite}.card-skeleton .skeleton-block{width:96px;height:96px;flex:none}.card-skeleton .skeleton-line{height:13px;margin:7px 0}.card-skeleton .grid-box{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;max-height:60vh}@keyframes skeleton-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media (prefers-reduced-motion:reduce){.card-skeleton .skeleton-block,.card-skeleton .skeleton-line{animation:none}}