.vocab-root{--pipi-edge: #f5f1e4;max-width:1200px;margin:0 auto}.vocab-main{padding:clamp(16px,2.4vw,32px)}.vocab-hero{text-align:center;margin-bottom:clamp(16px,2vw,24px)}.vocab-brand{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:var(--radius-lg);background:color-mix(in oklab,var(--brand-words-primary) 12%,var(--bg-card));border:1px solid color-mix(in oklab,var(--brand-words-primary) 34%,transparent);margin-bottom:14px}.vocab-brand-mark{width:44px;height:44px;object-fit:cover;border-radius:22%;box-shadow:0 2px 8px var(--brand-words-glow)}.vocab-brand-text{display:flex;flex-direction:column;text-align:left;line-height:1.2}.vocab-brand-name{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary)}.vocab-brand-tag{font-family:var(--font-code);font-size:10px;letter-spacing:.04em;color:var(--text-muted)}.vocab-web-badge{font-family:var(--font-code);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-words-accent);padding:3px 8px;border-radius:var(--radius-pill);background:color-mix(in oklab,var(--brand-words-accent) 14%,transparent)}.vocab-h1{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,4.2vw,46px);line-height:1.2;margin-top:6px}.vocab-lede{margin-top:10px;font-size:calc(15px * var(--type-scale, 1));line-height:1.6;color:var(--text-secondary);max-width:520px;margin-left:auto;margin-right:auto}.vocab-slogan{margin-top:10px;font-family:var(--font-display);font-size:calc(13px * var(--type-scale, 1));letter-spacing:.01em;color:var(--text-muted)}.vocab-diff{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px auto 0;padding:0;list-style:none;max-width:520px}.vocab-diff li{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:calc(13px * var(--type-scale, 1));font-weight:500;color:var(--text-secondary);padding:6px 14px;border-radius:var(--radius-pill);background:color-mix(in oklab,var(--brand-words-primary) 10%,var(--bg-card));border:1px solid color-mix(in oklab,var(--brand-words-primary) 26%,transparent)}.vocab-diff li:before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:var(--brand-words-accent);flex:0 0 auto}.vocab-diff-vs{margin:10px auto 0;max-width:480px;font-size:calc(12px * var(--type-scale, 1));line-height:1.5;color:var(--text-muted)}.vocab-hero .app-cta{margin:18px auto 4px;max-width:540px;text-align:left}.vocab-taste{margin:12px auto 0;max-width:520px;font-size:calc(13px * var(--type-scale, 1));line-height:1.6;color:var(--text-muted)}.vocab-taste strong{color:var(--brand-words-accent);font-weight:600}.vocab-stage{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,22px);padding:clamp(20px,2.8vw,32px);max-width:540px;margin:0 auto;border-color:color-mix(in oklab,var(--brand-words-primary) 24%,var(--border-default));background-color:color-mix(in oklab,var(--bg-card) 56%,transparent);background-image:radial-gradient(120% 90% at 50% -12%,color-mix(in oklab,var(--brand-words-primary) 18%,transparent),transparent 55%),radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--text-primary) 6%,transparent) 1px,transparent 0);background-size:auto,22px 22px;background-position:center top,center;background-repeat:no-repeat,repeat;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 60px -42px var(--brand-words-glow);transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}.vocab-stage:hover{transform:translateY(-3px);box-shadow:0 30px 72px -42px var(--brand-words-glow);border-color:color-mix(in oklab,var(--brand-words-primary) 36%,var(--border-default))}.vocab-setup{display:flex;flex-direction:column;gap:8px;width:100%;max-width:380px}.vocab-setup-row{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:14px}.vocab-setup-label{font-family:var(--font-display);font-size:calc(14px * var(--type-scale, 1));font-weight:500;color:var(--text-secondary);text-align:left}.vocab-dir-seg,.vocab-level-seg{display:flex;width:100%}.vocab-dir-seg button,.vocab-level-seg button{flex:1;min-height:44px}.vocab-seg{display:flex;width:100%;max-width:380px}.vocab-seg button{flex:1;min-height:44px}.vocab-flash-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}.vocab-pipi{object-fit:contain;filter:drop-shadow(0 0 1.5px var(--pipi-edge)) drop-shadow(0 0 1.5px var(--pipi-edge)) drop-shadow(0 0 4px color-mix(in srgb,var(--pipi-edge) 55%,transparent)) drop-shadow(0 8px 16px color-mix(in srgb,var(--bg-base) 55%,transparent)) drop-shadow(0 0 16px var(--brand-words-glow))}.vocab-pipi-sm{width:84px;height:84px}.vocab-progress{font-family:var(--font-code);font-size:calc(13px * var(--type-scale, 1));letter-spacing:.04em;color:var(--brand-words-accent);padding:4px 12px;border-radius:var(--radius-pill);background:color-mix(in oklab,var(--brand-words-accent) 12%,transparent)}.vocab-flash{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}.vocab-card-3d{width:100%;height:clamp(240px,56vw,300px);perspective:1200px;cursor:pointer}.vocab-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s var(--ease)}.vocab-card-inner.is-flipped{transform:rotateY(180deg)}.vocab-card-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:clamp(20px,4vw,32px);border-radius:var(--radius-lg);border:1px solid color-mix(in oklab,var(--brand-words-primary) 30%,transparent);background:color-mix(in oklab,var(--brand-words-primary) 8%,var(--bg-raised));overflow:hidden}.vocab-card-back{transform:rotateY(180deg);border-color:color-mix(in oklab,var(--brand-words-accent) 38%,transparent);background:color-mix(in oklab,var(--brand-words-accent) 10%,var(--bg-raised))}.vocab-card-3d:focus-visible .vocab-card-inner{outline:3px solid color-mix(in oklab,var(--brand-words-primary) 50%,transparent);outline-offset:2px;border-radius:var(--radius-lg)}.vocab-word{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,9vw,56px);line-height:1.1;color:var(--text-primary)}.vocab-reading{font-family:var(--font-code);font-size:clamp(15px,3vw,18px);color:var(--brand-words-accent)}.vocab-hint{margin-top:8px;font-size:calc(12px * var(--type-scale, 1));color:var(--text-muted)}.vocab-meaning{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,6vw,38px);color:var(--text-primary)}.vocab-ex{margin-top:10px;font-size:calc(15px * var(--type-scale, 1));color:var(--text-secondary)}.vocab-ex-tr{font-size:calc(13px * var(--type-scale, 1));color:var(--text-muted)}.vocab-eval{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.vocab-eval.is-hidden{visibility:hidden}.vocab-eval-btn{--ev: var(--text-muted);padding:10px 6px;border-radius:var(--radius-md);font-family:var(--font-display);font-size:calc(14px * var(--type-scale, 1));font-weight:600;color:var(--text-primary);background:color-mix(in oklab,var(--ev) 14%,var(--bg-raised));border:1px solid color-mix(in oklab,var(--ev) 44%,transparent);cursor:pointer;transition:background var(--dur-fast) var(--ease)}.vocab-eval-btn:hover{background:color-mix(in oklab,var(--ev) 24%,var(--bg-raised))}.vocab-hard{--ev: var(--accent-warm)}.vocab-good{--ev: var(--brand-words-accent)}.vocab-easy{--ev: var(--status-success)}.vocab-quiz{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}.vocab-q{text-align:center}.vocab-q-prompt{font-size:calc(13px * var(--type-scale, 1));color:var(--text-muted);margin-bottom:6px}.vocab-q-word{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,8vw,48px);color:var(--text-primary)}.vocab-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.vocab-choice{padding:14px 12px;border-radius:var(--radius-md);font-family:var(--font-body);font-size:calc(15px * var(--type-scale, 1));color:var(--text-primary);background:var(--bg-raised);border:1px solid var(--border-default);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}.vocab-choice:hover:not([disabled]){border-color:color-mix(in oklab,var(--brand-words-primary) 50%,transparent)}.vocab-choice[disabled]{cursor:default}.vocab-choice.is-correct{border-color:var(--status-success);background:color-mix(in oklab,var(--status-success) 18%,var(--bg-raised))}.vocab-choice.is-wrong{border-color:var(--status-error);background:color-mix(in oklab,var(--status-error) 18%,var(--bg-raised))}.vocab-feedback{width:100%;display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:var(--radius-md);background:var(--bg-raised);border:1px solid var(--border-default);animation:vocab-fade var(--dur-base) var(--ease-out);font-size:calc(14px * var(--type-scale, 1));color:var(--text-secondary)}.vocab-feedback strong{color:var(--text-primary)}.vocab-feedback.is-correct strong{color:var(--status-success)}.vocab-feedback.is-wrong strong{color:var(--status-error)}.vocab-feedback-ex{color:var(--text-muted);font-size:calc(13px * var(--type-scale, 1))}.vocab-next{align-self:flex-end;margin-top:4px}.vocab-done{display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(12px,3vw,24px) 0;text-align:center}.vocab-done strong{font-family:var(--font-display);font-size:clamp(18px,3vw,22px);color:var(--text-primary)}.vocab-score{font-family:var(--font-code);font-size:calc(15px * var(--type-scale, 1));color:var(--brand-words-accent)}.vocab-done-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.vocab-done-cta{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:380px;margin-top:4px;padding-top:16px;border-top:1px solid color-mix(in oklab,var(--brand-words-primary) 20%,var(--border-subtle))}.vocab-done-cta-text{margin:0;font-size:calc(13px * var(--type-scale, 1));line-height:1.55;color:var(--text-secondary);text-align:center}.vocab-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:var(--radius-md);font-family:var(--font-display);font-size:calc(15px * var(--type-scale, 1));font-weight:600;cursor:pointer;border:1px solid transparent;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}.vocab-btn--primary{min-width:140px;color:var(--text-primary);background-image:linear-gradient(135deg,var(--brand-words-primary) 0%,var(--neon-indigo) 100%);border-color:transparent;box-shadow:0 8px 22px -7px var(--brand-words-glow)}.vocab-btn--primary:hover{filter:brightness(1.06);box-shadow:0 12px 28px -7px var(--brand-words-glow)}.vocab-btn--ghost{min-width:140px;color:var(--text-secondary);background:color-mix(in oklab,var(--brand-words-primary) 8%,var(--bg-raised));border-color:color-mix(in oklab,var(--brand-words-primary) 26%,transparent)}.vocab-btn--ghost:hover{color:var(--text-primary);border-color:color-mix(in oklab,var(--brand-words-primary) 50%,transparent)}.vocab-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in oklab,var(--brand-words-primary) 40%,transparent)}@keyframes vocab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.vocab-card-face,.vocab-feedback{animation:none}}@media(max-width:460px){.vocab-choices{grid-template-columns:1fr}}