:root{--color-ink: #16388f;--color-locked: #9b9bc9;--color-confirmed: #2f9e58;--color-surface: #ffffff;--color-bg: #ffffff;--color-text-muted: #5b5b78;--color-border: #e2e6f0;--color-icon-bg: #edf0f7}*{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-ink);font-family:Hiragino Sans,Yu Gothic,system-ui,-apple-system,sans-serif}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;border-bottom:1px solid var(--color-border);background:var(--color-surface)}.app-header__back{display:inline-flex;align-items:center;gap:8px;padding:4px;border:none;background:none;color:var(--color-ink);font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer}.app-header__back--hidden{visibility:hidden}.app-header__brand{display:inline-flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:800;color:var(--color-ink)}.app-header__progress{font-size:1.1rem;font-weight:700;color:var(--color-text-muted)}.app-header__record{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--color-ink)}.app-main{flex:1;display:flex;align-items:center;justify-content:center;width:100%;padding:24px}.app-main--menu{align-items:flex-start}.loading-panel{text-align:center;color:var(--color-text-muted)}.menu{width:100%;max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:12px;padding:16px 4px 32px}.menu-title{margin:8px 0 0;text-align:center;font-size:2.2rem;font-weight:800;color:var(--color-ink)}.menu-subtitle{margin:0 0 16px;text-align:center;color:var(--color-text-muted)}.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}@media (max-width: 980px){.menu-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 520px){.menu-grid{grid-template-columns:1fr}}.menu-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px 20px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;font-family:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.menu-card:hover{border-color:var(--color-ink);box-shadow:0 6px 18px #16388f1a;transform:translateY(-2px)}.menu-card__icon{width:56px;height:56px;border-radius:50%;background:var(--color-icon-bg);color:var(--color-ink);display:flex;align-items:center;justify-content:center}.menu-card__icon-text{font-size:1.4rem;font-weight:800}.menu-card__name{font-size:1.25rem;font-weight:800;color:var(--color-ink)}.menu-card__desc{color:var(--color-ink);font-size:.95rem;line-height:1.6;white-space:pre-line;min-height:3em}.menu-card__arrow{align-self:flex-end;margin-top:auto;color:var(--color-ink)}.menu-tip{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;padding:14px 20px;border-radius:8px;background:var(--color-icon-bg);color:var(--color-ink);font-weight:600}.exercise-card{display:flex;flex-direction:column;gap:32px;width:100%;max-width:720px;margin:0 auto}.next-slot{display:flex;align-items:center;justify-content:center;height:52px}.next-button{height:52px;padding:0 40px;border-radius:999px;border:2px solid var(--color-ink);background:var(--color-ink);color:#fff;font-family:inherit;font-size:1.05rem;font-weight:800;cursor:pointer}.next-button:hover{background:var(--color-surface);color:var(--color-ink)}.exercise-instruction-top,.exercise-instruction-bottom{margin:0;text-align:center;font-weight:700;font-size:1.4rem;color:var(--color-ink);line-height:1.6}.slot-bar{display:flex;width:100%;max-width:720px;margin:0 auto}.slot-bar__item{flex:1;border:1px solid var(--color-locked);padding:36px 10px;font-size:1.6rem;font-weight:800;font-family:inherit;cursor:pointer;transition:background-color .15s ease,color .15s ease}.slot-bar__item:not(.slot-bar__item--show)+.slot-bar__item:not(.slot-bar__item--show){margin-left:-1px}.slot-bar__item--locked{background:var(--color-locked);color:#fff;border-color:#ffffff80}.slot-bar__item--current{background:var(--color-ink);color:#fff;border-color:#ffffff80}.slot-bar__item--revealed{background:var(--color-surface);color:var(--color-confirmed);cursor:default}.slot-bar__hint-blank{display:inline-block;width:1.3em;height:.14em;margin-left:.4em;background:currentColor;vertical-align:text-bottom;border-radius:1px}.slot-bar__item:disabled{cursor:default}.slot-bar__item--show{background:transparent;border:none}.slot-bar__item--show-locked{color:var(--color-locked)}.slot-bar__item--show-current{color:var(--color-ink)}.slot-bar__item--show-revealed{color:var(--color-confirmed)}.slot-bar__item--conj{position:relative}.slot-bar__conj-word{text-decoration:underline;text-underline-offset:5px}.slot-bar__conj-sub{position:absolute;left:0;right:0;top:50%;margin-top:1.7em;font-size:.85rem;font-weight:700;color:var(--color-ink);text-align:center}.branch-choice{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;min-height:72px}.branch-button{display:flex;align-items:center;gap:14px;min-width:200px;padding:14px 22px;border:none;border-radius:14px;background:#c9cdeb;color:var(--color-ink);font-family:inherit;text-align:left;cursor:pointer}.branch-button__plus{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}.branch-button__text{display:flex;flex-direction:column;gap:2px}.branch-button__name{font-size:1.05rem;font-weight:800}.branch-button__conjunction{font-size:.9rem;font-weight:700;opacity:.65}.mic-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}.mic-button{width:72px;height:72px;border-radius:50%;border:2px solid transparent;background:var(--color-ink);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.mic-button--active,.mic-button--retry{background:var(--color-surface);color:var(--color-ink);border-color:var(--color-ink)}.mic-button--active{animation:mic-pulse 1.5s ease-out infinite}@keyframes mic-pulse{0%{box-shadow:0 0 #16388f40}70%{box-shadow:0 0 0 18px #16388f00}to{box-shadow:0 0 #16388f00}}.mic-unsupported{margin:0;color:var(--color-text-muted);font-size:.95rem;text-align:center}.confirm-wrap{display:flex;justify-content:center;min-height:72px;align-items:center}.confirm-button{height:52px;padding:0 40px;border-radius:999px;border:2px solid var(--color-ink);background:var(--color-ink);color:#fff;font-family:inherit;font-size:1.05rem;font-weight:800;cursor:pointer}.dev-toggle{position:fixed;left:12px;bottom:12px;z-index:1000;padding:6px 10px;font-family:Consolas,SFMono-Regular,monospace;font-size:.7rem;font-weight:700;letter-spacing:.02em;color:#b45309;background:#fff7ed;border:1px dashed #f59e0b;border-radius:4px;cursor:pointer;opacity:.85}.dev-toggle:hover{opacity:1}.dev-toggle--on{background:#fef3c7;color:#92400e}.dev-transcript{margin:0;font-family:Consolas,SFMono-Regular,monospace;font-size:.85rem;color:#92400e;background:#fff7ed;border:1px dashed #f59e0b;border-radius:4px;padding:6px 10px;text-align:center}.review-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:var(--color-bg);overflow-y:auto;display:flex;justify-content:center;padding:24px}.review-close{position:fixed;top:20px;left:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--color-locked);background:var(--color-surface);color:var(--color-ink);display:flex;align-items:center;justify-content:center;cursor:pointer}.review-body{width:100%;max-width:900px;margin:auto;display:flex;flex-direction:column;gap:28px}.review-head{text-align:center}.review-title{margin:0 0 8px;font-size:1.9rem;font-weight:800;color:var(--color-ink)}.review-subtitle{margin:0;font-weight:800;color:var(--color-text-muted)}.review-subtitle strong{color:var(--color-ink)}.review-compare{display:flex;align-items:center;justify-content:center;gap:12px}.review-col{flex:1;min-width:0;background:#f6f7fb;border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:stretch}.review-col__head{text-align:center;font-weight:800;color:var(--color-ink);margin-bottom:12px}.review-item{display:flex;align-items:center;gap:12px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;padding:16px;font-size:1.15rem;color:var(--color-text-muted)}.review-item__text{font-weight:800}.review-item--en{font-weight:800;color:var(--color-ink)}.review-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--color-ink);color:#fff;font-size:.9rem;font-weight:800;display:flex;align-items:center;justify-content:center}.review-connector{position:relative;height:56px;display:flex;align-items:center;justify-content:center}.review-connector:before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);border-left:3px dotted var(--color-locked)}.review-connector__badge{position:relative;display:flex;align-items:center;justify-content:center}.review-connector__badge--plus{width:34px;height:34px;border-radius:50%;border:1px solid var(--color-locked);background:var(--color-surface);color:var(--color-ink)}.review-connector__badge--conj{padding:8px 20px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-ink);font-weight:800}.review-arrow{flex-shrink:0;color:var(--color-locked)}.review-result{background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;padding:24px;text-align:center}.review-result__label{display:inline-flex;align-items:center;gap:8px;color:var(--color-confirmed);font-weight:800;margin-bottom:12px}.review-result__sentence{margin:0;font-size:1.8rem;font-weight:800;color:var(--color-ink)}.review-result__conj{color:var(--color-confirmed)}.review-play{flex-shrink:0;width:64px;height:64px;border-radius:50%;border:none;background:var(--color-ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.review-actions{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.review-btn{min-width:220px;padding:16px 28px;border-radius:999px;font-family:inherit;font-size:1.05rem;font-weight:800;cursor:pointer}.review-btn--ghost{border:1px solid var(--color-ink);background:var(--color-surface);color:var(--color-ink)}.review-btn--primary{border:1px solid var(--color-ink);background:var(--color-ink);color:#fff}@media (max-width: 640px){.review-compare{flex-direction:column;align-items:stretch}.review-arrow{transform:rotate(90deg);align-self:center}}