.ok-practice-overlay{z-index:1000;background:radial-gradient(circle at 16% 0%, #8e7ee821, transparent 28%), linear-gradient(180deg, var(--sand-surface), var(--sand-bg));width:100%;height:100lvh;color:var(--ink);font-family:var(--font-body);place-items:stretch stretch;display:grid;position:fixed;inset:0 0 auto;overflow:hidden}.ok-practice-shell{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;flex-direction:column;height:100%;min-height:0;padding:24px;display:flex;overflow:hidden auto}.ok-practice-topbar{grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:16px;width:min(1040px,100%);margin:0 auto;display:grid}.ok-practice-close{border:1px solid var(--line);border-radius:var(--r-full);width:42px;height:42px;color:var(--ink-soft);cursor:pointer;box-shadow:var(--sh-xs);transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);background:#ffffffb8;justify-content:center;align-items:center;display:inline-flex}.ok-practice-close:hover{background:var(--card);color:var(--color-brand-deep);box-shadow:var(--sh-sm);transform:translateY(-1px)}.ok-practice-close svg{width:20px;height:20px}.ok-practice-progress,.ok-practice-segment{border-radius:var(--r-full);background:var(--sand-line);height:10px;overflow:hidden}.ok-practice-progress-fill,.ok-practice-segment-fill{border-radius:inherit;background:linear-gradient(90deg, var(--lilac-500), var(--lilac-700));height:100%;transition:width var(--dur-slow) var(--ease-emphasized);display:block}.ok-practice-segments{gap:8px;min-width:0;display:flex}.ok-practice-segment{flex:1}.ok-practice-segment.is-done .ok-practice-segment-fill{background:linear-gradient(90deg, var(--mint-500), var(--mint-700));width:100%!important}.ok-practice-segment.is-upcoming .ok-practice-segment-fill{background:0 0}.ok-practice-meta{justify-content:flex-end;align-items:center;gap:8px;min-width:84px;display:inline-flex}.ok-practice-combo,.ok-practice-count{border-radius:var(--r-full);min-height:30px;font-size:var(--text-small-size);font-weight:var(--fw-bold);white-space:nowrap;justify-content:center;align-items:center;padding:0 12px;display:inline-flex}.ok-practice-combo{background:var(--color-brand-soft);color:var(--color-brand-deep)}.ok-practice-combo.is-fire{background:linear-gradient(135deg, var(--peach-500), var(--lilac-500));color:var(--ink-0);animation:1.2s ease-in-out infinite ok-practice-combo-pulse;box-shadow:0 10px 24px #8e7ee83d}.ok-practice-count{border:1px solid var(--line);color:var(--ink-soft);background:#ffffffb3}.ok-practice-body{flex-direction:column;gap:18px;width:min(960px,100%);margin:34px auto 0;display:flex}.ok-practice-prompt{text-align:center;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-sm);background:#ffffffdb;padding:36px 28px}.ok-practice-eyebrow{font-size:var(--text-small-size);font-weight:var(--fw-bold);color:var(--color-brand-deep);margin:0 0 10px}.ok-practice-primary{letter-spacing:0;color:var(--ink);font-size:clamp(44px,9vw,92px);line-height:1.04;font-family:var(--font-jp-sans);font-weight:var(--fw-extrabold);margin:0}.ok-practice-primary.is-kanji{font-family:var(--font-jp)}.ok-practice-primary.is-sentence{font-size:clamp(24px,4vw,42px);line-height:1.45;font-family:var(--font-jp-sans);font-weight:var(--fw-bold)}.ok-practice-secondary{color:var(--ink-soft);font-size:var(--text-body-size);margin:12px 0 0;line-height:1.55}.ok-practice-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.ok-practice-choice{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);min-height:64px;color:var(--ink);box-shadow:var(--sh-xs);cursor:pointer;text-align:left;transition:transform var(--dur-instant) var(--ease-standard), background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);align-items:center;gap:14px;padding:14px 18px;display:flex}@media (hover:hover) and (pointer:fine){.ok-practice-choice:hover:not(:disabled){border-color:var(--color-brand);box-shadow:var(--sh-sm);transform:translateY(-1px)}}.ok-practice-choice:disabled{cursor:default}.ok-practice-choice-key{border-radius:var(--r-full);background:var(--sand-line);width:30px;height:30px;color:var(--ink-soft);font-weight:var(--fw-bold);font-size:var(--text-small-size);flex:none;justify-content:center;align-items:center;display:inline-flex}.ok-practice-choice-content{min-width:0;font-size:var(--text-body-lg-size);font-weight:var(--fw-semibold);flex-direction:column;flex:1;gap:2px;line-height:1.35;display:flex}.ok-practice-choice-sub{font-size:var(--text-small-size);color:var(--ink-soft);font-weight:var(--fw-medium)}.ok-practice-choice.is-selected{background:var(--color-brand-soft);border-color:var(--color-brand)}.ok-practice-choice.is-selected .ok-practice-choice-key{background:var(--color-brand-deep);color:var(--ink-0)}.ok-practice-choice.is-correct{background:var(--color-success-soft);border-color:var(--color-success-deep);animation:ok-practice-correct-pulse .52s var(--ease-spring)}.ok-practice-choice.is-correct .ok-practice-choice-key{background:var(--color-success-deep);color:var(--ink-0)}.ok-practice-choice.is-wrong{background:var(--color-warm-soft);border-color:var(--color-warm-deep);animation:ok-practice-wrong-shake .42s var(--ease-standard)}.ok-practice-choice.is-wrong .ok-practice-choice-key{background:var(--color-warm-deep);color:var(--ink-0)}.ok-practice-actionbar,.ok-practice-feedback{border:1px solid var(--line);border-radius:var(--r-lg);min-height:72px;box-shadow:var(--sh-xs);background:#ffffffdb;justify-content:flex-end;align-items:center;gap:14px;padding:14px 16px;display:flex}.ok-practice-feedback{opacity:0;transition:opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);justify-content:space-between;scroll-margin-block:16px;transform:translateY(6px)}.ok-practice-feedback.is-visible{opacity:1;transform:translateY(0)}.ok-practice-feedback.is-correct{background:var(--color-success-soft);border-color:#5ba8a357}.ok-practice-feedback.is-wrong{background:var(--color-warm-soft);border-color:#e0776257}.ok-practice-feedback-msg{min-width:0;color:var(--ink);align-items:flex-start;gap:12px;display:flex}.ok-practice-feedback-copy{min-width:0}.ok-practice-feedback-msg strong,.ok-practice-feedback-msg small{display:block}.ok-practice-feedback-detail{color:var(--ink-soft);font-size:var(--text-small-size);grid-template-columns:max-content minmax(0,1fr);gap:6px 10px;margin-top:9px;line-height:1.5;display:grid}.ok-practice-feedback-detail b{color:var(--ink);font-weight:700}.ok-practice-feedback-steps{flex-wrap:wrap;align-items:center;gap:5px;margin-top:10px;display:flex}.ok-practice-feedback-steps>span{align-items:center;gap:5px;display:inline-flex}.ok-practice-feedback-steps i{color:var(--ink-mute);font-style:normal}.ok-practice-feedback-steps em{border-radius:var(--r-sm);color:var(--ink);background:#ffffff94;border:1px solid #e0776240;padding:4px 7px;font-style:normal;font-weight:650}.ok-practice-feedback-msg small{color:var(--ink-soft);font-size:var(--text-small-size);margin-top:3px;line-height:1.4}.ok-practice-feedback-icon{border-radius:var(--r-full);background:var(--color-success-deep);width:34px;height:34px;color:var(--ink-0);flex:none;justify-content:center;align-items:center;display:inline-flex}.ok-practice-feedback.is-wrong .ok-practice-feedback-icon{background:var(--color-warm-deep)}.ok-practice-feedback-icon svg{width:20px;height:20px}.ok-practice-stage-strip{flex:none;align-items:center;gap:8px;width:min(1040px,100%);margin:14px auto 0;padding-bottom:2px;display:flex;overflow:auto}.ok-practice-stage{border-radius:var(--r-full);border:1px solid var(--line);min-height:30px;color:var(--ink-soft);font-size:var(--text-caption-size);font-weight:var(--fw-bold);white-space:nowrap;background:#ffffffad;flex:none;align-items:center;padding:0 12px;display:inline-flex}.ok-practice-stage.is-current{background:var(--color-brand-soft);border-color:var(--color-brand);color:var(--color-brand-deep)}.ok-practice-stage.is-done{background:var(--color-success-soft);color:var(--color-success-deep);border-color:#5ba8a357}.ok-practice-input-wrap,.ok-practice-token-panel{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-xs);background:#ffffffdb;padding:20px}.ok-practice-input-label{color:var(--ink-soft);font-size:var(--text-small-size);font-weight:var(--fw-bold);margin:0 0 8px;display:block}.ok-practice-input,.ok-practice-textarea{border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--card);width:100%;color:var(--ink);font-size:20px;font-family:var(--font-jp-sans);font-weight:var(--fw-semibold);transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);outline:none;padding:14px 16px}.ok-practice-textarea{resize:vertical;min-height:116px;line-height:1.6}.ok-practice-input:focus,.ok-practice-textarea:focus{border-color:var(--color-brand);box-shadow:var(--sh-focus)}.ok-practice-input.is-correct,.ok-practice-textarea.is-correct{border-color:var(--color-success-deep);background:var(--color-success-soft)}.ok-practice-input.is-wrong,.ok-practice-textarea.is-wrong{border-color:var(--color-warm-deep);background:var(--color-warm-soft)}.ok-practice-audio-row{justify-content:center;align-items:center;gap:12px;margin-top:18px;display:inline-flex}.ok-practice-audio-btn{border:1px solid var(--line);border-radius:var(--r-full);background:var(--card);min-height:44px;color:var(--color-brand-deep);font-weight:var(--fw-bold);cursor:pointer;box-shadow:var(--sh-xs);justify-content:center;align-items:center;gap:8px;padding:0 16px;display:inline-flex}.ok-practice-audio-btn.is-primary{width:72px;height:72px;color:var(--ink-0);background:linear-gradient(135deg, var(--lilac-500), var(--lilac-700));border-color:var(--lilac-700);box-shadow:var(--sh-brand);padding:0}.ok-practice-audio-btn svg{width:20px;height:20px}.ok-practice-audio-btn.is-primary svg{width:32px;height:32px}.ok-practice-token-area{flex-direction:column;gap:16px;display:flex}.ok-practice-answer-zone{border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--sand-surface);flex-wrap:wrap;align-items:center;gap:10px;min-height:86px;padding:16px;display:flex}.ok-practice-answer-placeholder{color:var(--ink-mute);font-size:var(--text-body-size)}.ok-practice-token-bank{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.ok-practice-token{border:1px solid var(--line-strong);border-radius:var(--r-full);background:var(--card);min-height:44px;color:var(--ink);font-size:var(--text-body-lg-size);font-family:var(--font-jp-sans);font-weight:var(--fw-semibold);cursor:pointer;box-shadow:var(--sh-xs);transition:transform var(--dur-instant) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);padding:0 16px}.ok-practice-token:hover:not(:disabled){border-color:var(--color-brand);box-shadow:var(--sh-sm);transform:translateY(-1px)}.ok-practice-token.is-selected{background:var(--color-brand-soft);border-color:var(--color-brand);color:var(--color-brand-deep)}.ok-practice-token:disabled{cursor:default;opacity:.72}.ok-practice-results{border-radius:var(--r-xl);background:var(--card);border:1px solid var(--line);width:min(720px,100%);box-shadow:var(--sh-lg);text-align:center;align-self:center;margin:auto;padding:44px}.ok-practice-results-icon{border-radius:var(--r-xl);background:linear-gradient(135deg, var(--lilac-500), var(--lilac-700));width:72px;height:72px;color:var(--ink-0);box-shadow:var(--sh-brand);justify-content:center;align-items:center;margin:0 auto 18px;display:inline-flex}.ok-practice-results-icon svg{width:34px;height:34px}.ok-practice-results h2{font-size:var(--text-display-size);margin:0}.ok-practice-results-subtitle{color:var(--ink-soft);margin:8px 0 22px}.ok-practice-results-meter{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;margin:0 0 24px;display:grid}.ok-practice-results-track{border-radius:var(--r-full);background:var(--sand-line);height:10px;overflow:hidden}.ok-practice-results-fill{background:linear-gradient(90deg, var(--lilac-500), var(--lilac-700));height:100%;display:block}.ok-practice-results-list{gap:8px;margin:0 0 24px;display:grid}.ok-practice-boost-card{border-radius:var(--r-lg);border:1px solid color-mix(in srgb, var(--lilac-500) 28%, var(--line));background:linear-gradient(135deg, color-mix(in srgb, var(--lilac-100) 56%, var(--card)), var(--card));text-align:left;margin:0 0 20px;padding:16px 18px}.ok-practice-boost-card h3{font-size:var(--text-lg-size);font-weight:var(--fw-bold);color:var(--ink);margin:0 0 6px}.ok-practice-boost-card p{color:var(--ink-soft);margin:0;line-height:1.6}.ok-practice-results-item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--sand-surface);justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:0 14px;display:flex}.ok-practice-results-item-title{min-width:0;color:var(--ink);font-weight:var(--fw-semibold);align-items:center;gap:8px;display:inline-flex}.ok-practice-results-item-title svg{width:18px;height:18px;color:var(--color-brand-deep)}.ok-practice-results-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}@keyframes ok-practice-combo-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes ok-practice-correct-pulse{0%{transform:scale(1)}42%{transform:scale(1.025)}to{transform:scale(1)}}@keyframes ok-practice-wrong-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@media (max-width:720px){.ok-practice-shell{padding:16px}.ok-practice-topbar{grid-template-columns:40px minmax(0,1fr) auto;gap:10px}.ok-practice-meta{min-width:0}.ok-practice-count{display:none}.ok-practice-body{margin-top:22px}.ok-practice-prompt{padding:28px 18px}.ok-practice-choices{grid-template-columns:1fr}.ok-practice-feedback{flex-direction:column;align-items:stretch}.ok-practice-feedback .ok-btn{width:100%}}