.vocab-layout{--gm-card:var(--ds-surface-card);--gm-sunken:var(--ds-surface-sunken);--gm-line:#e5e5e5;--gm-line-strong:#d4d4d8;--gm-text:var(--ds-text-primary);--gm-muted:var(--ds-text-tertiary);--gm-red:#dc2626;--gm-red-edge:#a51b1b;--gm-red-soft:#fef2f2;--gm-streak:#ff9600;--gm-streak-edge:#d97f00;--gm-streak-soft:#fff4e5;--gm-gold:#ffc800;--gm-gold-edge:#e0a800;--gm-gold-ink:#6b4a00;--gm-gold-soft:#fff8db;--gm-green:#58cc02;--gm-green-edge:#46a302;--gm-green-soft:#ecfbe0;--gm-violet:#a855f7;--gm-violet-edge:#7e22ce;--gm-reading-edge:#11813a;--gm-listening-edge:#1d4ed8;--gm-writing-edge:#b45309;--gm-speaking-edge:#5b21b6;--gm-radius:20px;--gm-radius-sm:14px}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .vocab-layout{--gm-line:#2c2c31;--gm-line-strong:#3f3f46;--gm-red:#ef4444;--gm-red-edge:#b91c1c;--gm-red-soft:#3a1f1c;--gm-streak-soft:#33230d;--gm-gold-soft:#2f2808;--gm-gold-ink:#ffe27a;--gm-green-soft:#16260c}}:root[data-theme=dark] .vocab-layout{--gm-line:#2c2c31;--gm-line-strong:#3f3f46;--gm-red:#ef4444;--gm-red-edge:#b91c1c;--gm-red-soft:#3a1f1c;--gm-streak-soft:#33230d;--gm-gold-soft:#2f2808;--gm-gold-ink:#ffe27a;--gm-green-soft:#16260c}.vocab-layout.practice-page{padding-top:92px}.vocab-layout__shell{grid-template-columns:248px minmax(0,1fr);align-items:start;gap:28px;width:min(100%,1320px);margin:0 auto;display:grid;position:relative}.vocab-layout__main{min-width:0}@media (max-width:1023px){.vocab-layout.practice-page{padding-top:76px}.vocab-layout__shell{grid-template-columns:minmax(0,1fr);gap:0}}:is(html:has(.vocab-layout),body:has(.vocab-layout)){overflow-x:clip}@media (max-width:1023px){body:has(.vocab-tabbar){padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}}.vocab-sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.vocab-nav__item,.vocab-tabbar__item,.vocab-tabbar__game{--mode:#ff4b4b;--mode-edge:#d33131;--mode-soft:color-mix(in srgb, var(--mode) 16%, var(--gm-card));--mode-ink:color-mix(in srgb, var(--mode-edge) 72%, var(--gm-text))}.vocab-nav__item[data-mode=roadmap],.vocab-tabbar__item[data-mode=roadmap],.vocab-tabbar__game[data-mode=roadmap]{--mode:#58cc02;--mode-edge:#46a302;--mode-soft:color-mix(in srgb, var(--mode) 16%, var(--gm-card));--mode-ink:color-mix(in srgb, var(--mode-edge) 72%, var(--gm-text))}.vocab-nav__item[data-mode=cards],.vocab-tabbar__item[data-mode=cards],.vocab-tabbar__game[data-mode=cards]{--mode:#ff4b4b;--mode-edge:#d33131;--mode-soft:color-mix(in srgb, var(--mode) 16%, var(--gm-card));--mode-ink:color-mix(in srgb, var(--mode-edge) 72%, var(--gm-text))}.vocab-nav__item[data-mode=flashcards],.vocab-tabbar__item[data-mode=flashcards],.vocab-tabbar__game[data-mode=flashcards]{--mode:#1cb0f6;--mode-edge:#1899d6;--mode-soft:color-mix(in srgb, var(--mode) 16%, var(--gm-card));--mode-ink:color-mix(in srgb, var(--mode-edge) 72%, var(--gm-text))}.vocab-nav__item[data-mode=adventure],.vocab-tabbar__item[data-mode=adventure],.vocab-tabbar__game[data-mode=adventure]{--mode:#ce82ff;--mode-edge:#a568cc;--mode-soft:color-mix(in srgb, var(--mode) 16%, var(--gm-card));--mode-ink:color-mix(in srgb, var(--mode-edge) 72%, var(--gm-text))}.vocab-nav__item[data-mode=memory],.vocab-tabbar__item[data-mode=memory],.vocab-tabbar__game[data-mode=memory]{--mode:#00c2a8;--mode-edge:#009883;--mode-soft:color-mix(in srgb, var(--mode) 16%, var(--gm-card));--mode-ink:color-mix(in srgb, var(--mode-edge) 72%, var(--gm-text))}.vocab-nav__item[data-mode=matching],.vocab-tabbar__item[data-mode=matching],.vocab-tabbar__game[data-mode=matching]{--mode:#ff9600;--mode-edge:#d97f00;--mode-soft:color-mix(in srgb, var(--mode) 16%, var(--gm-card));--mode-ink:color-mix(in srgb, var(--mode-edge) 72%, var(--gm-text))}.vocab-nav__item[data-mode=my-words],.vocab-tabbar__item[data-mode=my-words],.vocab-tabbar__game[data-mode=my-words]{--mode:#6c63ff;--mode-edge:#4f46d6;--mode-soft:color-mix(in srgb, var(--mode) 16%, var(--gm-card));--mode-ink:color-mix(in srgb, var(--mode-edge) 72%, var(--gm-text))}.vocab-streak{background:var(--gm-sunken);color:var(--gm-muted);font-family:var(--ds-font-display);border-radius:12px;flex-shrink:0;align-items:center;gap:5px;padding:6px 10px;font-size:15px;font-weight:800;line-height:1;display:inline-flex}.vocab-streak svg{width:18px;height:18px;color:var(--gm-line-strong)}.vocab-streak.is-lit{background:var(--gm-streak-soft);color:var(--gm-streak)}.vocab-streak.is-lit svg{color:var(--gm-streak);transform-origin:50% 90%;animation:1.8s ease-in-out infinite vocab-nav-flicker}.vocab-nav{border:2px solid var(--gm-line);border-radius:var(--gm-radius);background:var(--gm-card);max-height:calc(100vh - 100px);box-shadow:0 4px 0 var(--gm-line);scrollbar-width:thin;flex-direction:column;gap:6px;padding:14px 12px 16px;display:flex;position:sticky;top:84px;overflow-y:auto}@media (max-width:1023px){.vocab-nav{display:none}}.vocab-nav__head{border-bottom:2px solid var(--gm-line);justify-content:space-between;align-items:center;gap:8px;padding:0 4px 10px;display:flex}.vocab-nav__brand{min-width:0;color:var(--gm-text);font-family:var(--ds-font-display);letter-spacing:-.01em;align-items:center;gap:10px;font-size:17px;font-weight:800;display:inline-flex}.vocab-nav__brand-level{background:var(--gm-red);width:38px;height:38px;box-shadow:0 3px 0 var(--gm-red-edge);color:#fff;border-radius:12px;flex-shrink:0;place-items:center;font-size:15px;display:grid}.vocab-nav__section{color:var(--gm-muted);font-family:var(--ds-font-display);letter-spacing:.12em;text-transform:uppercase;margin:12px 10px 4px;font-size:11px;font-weight:800}.vocab-nav__menu{flex-direction:column;gap:4px;display:flex}.vocab-nav__item{width:100%;color:var(--gm-muted);font-family:var(--ds-font-display);letter-spacing:.06em;text-align:left;text-transform:uppercase;cursor:pointer;background:0 0;border:2px solid #0000;border-radius:16px;align-items:center;gap:12px;padding:6px 10px;font-size:14px;font-weight:800;text-decoration:none;transition:background-color .15s,color .15s;display:flex;position:relative}.vocab-nav__item:hover{background:var(--gm-sunken);color:var(--gm-text)}.vocab-nav__item:hover .vocab-nav__icon{transform:translateY(-2px)rotate(-8deg)scale(1.06)}.vocab-nav__item:active .vocab-nav__icon{transform:scale(.9)}.vocab-nav__item.is-active{color:var(--mode-ink);background:0 0}.vocab-nav__item.is-active .vocab-nav__icon{animation:.45s cubic-bezier(.34,1.56,.64,1) vocab-nav-pop}.vocab-nav__item:focus-visible{outline:3px solid var(--ds-focus-ring,var(--mode));outline-offset:2px}.vocab-nav__highlight{border:2px solid color-mix(in srgb, var(--mode) 55%, var(--gm-line));background:var(--mode-soft);box-shadow:0 3px 0 color-mix(in srgb, var(--mode) 40%, var(--gm-line));border-radius:16px;position:absolute;inset:-2px}.vocab-nav__label{z-index:1;text-overflow:ellipsis;white-space:nowrap;min-width:0;position:relative;overflow:hidden}.vocab-nav__settings{border-top:2px solid var(--gm-line);margin-top:6px;padding-top:4px}.vocab-nav__levels,.vocab-nav__langs{gap:6px;padding:2px 4px 4px;display:grid}.vocab-nav__levels{grid-template-columns:repeat(3,minmax(0,1fr))}.vocab-nav__levels button{border:2px solid var(--gm-line);background:var(--gm-card);box-shadow:0 3px 0 var(--gm-line);color:var(--gm-muted);font-family:var(--ds-font-display);cursor:pointer;border-radius:12px;padding:8px 0;font-size:14px;font-weight:800;transition:transform 80ms,box-shadow 80ms,color .15s,border-color .15s}.vocab-nav__levels button:hover:not(.is-active){border-color:var(--gm-line-strong);color:var(--gm-text)}.vocab-nav__levels button:active{box-shadow:0 0 0 var(--gm-line);transform:translateY(3px)}.vocab-nav__levels button.is-active{border-color:var(--gm-red);background:var(--gm-red);color:#fff;box-shadow:0 3px 0 var(--gm-red-edge)}.vocab-nav__levels button:focus-visible{outline:3px solid var(--ds-focus-ring,var(--gm-red));outline-offset:2px}.vocab-nav__langs{grid-template-columns:repeat(2,minmax(0,1fr))}.vocab-nav__langs button{border:2px solid var(--gm-line);background:var(--gm-card);box-shadow:0 3px 0 var(--gm-line);color:var(--gm-muted);font-family:var(--ds-font-display);cursor:pointer;border-radius:12px;padding:8px 0;font-size:13px;font-weight:800;transition:transform 80ms,box-shadow 80ms,color .15s,border-color .15s}.vocab-nav__langs button:hover:not(.is-active){border-color:var(--gm-line-strong);color:var(--gm-text)}.vocab-nav__langs button:active{box-shadow:0 0 0 var(--gm-line);transform:translateY(3px)}.vocab-nav__langs button.is-active{color:#fff;background:#1cb0f6;border-color:#1cb0f6;box-shadow:0 3px #1899d6}.vocab-nav__langs button:focus-visible{outline:3px solid var(--ds-focus-ring,#1cb0f6);outline-offset:2px}.vocab-nav__icon{z-index:1;background:var(--mode);width:36px;height:36px;box-shadow:0 3px 0 var(--mode-edge);color:#fff;border-radius:12px;flex-shrink:0;place-items:center;font-size:19px;transition:transform .25s cubic-bezier(.34,1.56,.64,1);display:grid;position:relative}.vocab-nav__icon svg{filter:drop-shadow(0 1px #00000026)}.vocab-topbar{border:2px solid var(--gm-line);background:var(--gm-card);box-shadow:0 3px 0 var(--gm-line);border-radius:18px;align-items:center;gap:8px;margin-bottom:18px;padding:8px;display:none}@media (max-width:1023px){.vocab-topbar{display:flex}}.vocab-topbar__levels{scrollbar-width:none;flex:1;gap:6px;min-width:0;padding:2px 2px 5px;display:flex;overflow-x:auto}.vocab-topbar__levels::-webkit-scrollbar{display:none}.vocab-topbar__levels button{border:2px solid var(--gm-line);background:var(--gm-card);min-width:42px;box-shadow:0 3px 0 var(--gm-line);color:var(--gm-muted);font-family:var(--ds-font-display);cursor:pointer;border-radius:10px;flex:none;padding:6px 8px;font-size:13px;font-weight:800;transition:transform 80ms,box-shadow 80ms,color .15s,border-color .15s}.vocab-topbar__levels button:hover:not(.is-active){border-color:var(--gm-line-strong);color:var(--gm-text)}.vocab-topbar__levels button:active{box-shadow:0 0 0 var(--gm-line);transform:translateY(3px)}.vocab-topbar__levels button.is-active{border-color:var(--gm-red);background:var(--gm-red);color:#fff;box-shadow:0 3px 0 var(--gm-red-edge)}.vocab-topbar__levels button:focus-visible{outline:3px solid var(--ds-focus-ring,var(--gm-red));outline-offset:2px}.vocab-topbar__langs{background:var(--gm-sunken);border-radius:12px;flex-shrink:0;gap:2px;padding:3px;display:flex}.vocab-topbar__langs button{min-width:34px;color:var(--gm-muted);font-family:var(--ds-font-display);cursor:pointer;background:0 0;border:0;border-radius:9px;padding:5px 6px;font-size:12px;font-weight:800}.vocab-topbar__langs button.is-active{color:#fff;background:#1cb0f6;box-shadow:0 2px #1899d6}.vocab-tabbar{z-index:150;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--gm-line);background:var(--gm-card);gap:2px;display:none;position:fixed;bottom:0;left:0;right:0}@media (max-width:1023px){.vocab-tabbar{display:flex}}.vocab-tabbar__item{min-width:0;min-height:58px;color:var(--gm-muted);font-family:var(--ds-font-display);cursor:pointer;-webkit-tap-highlight-color:#0000;background:0 0;border:0;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:3px;padding:6px 2px 4px;font-size:11px;font-weight:800;text-decoration:none;display:flex;position:relative}.vocab-tabbar__item.is-active{color:var(--mode-ink)}.vocab-tabbar__item.is-active .vocab-tabbar__icon{animation:.45s cubic-bezier(.34,1.56,.64,1) vocab-nav-pop}.vocab-tabbar__item:active .vocab-tabbar__icon{transform:scale(.85)}.vocab-tabbar__item:focus-visible{outline:3px solid var(--ds-focus-ring,var(--mode));outline-offset:-3px;border-radius:14px}.vocab-tabbar__highlight{border:2px solid color-mix(in srgb, var(--mode) 55%, var(--gm-line));background:var(--mode-soft);border-radius:14px;position:absolute;inset:1px 2px}.vocab-tabbar__icon{z-index:1;background:var(--mode);width:30px;height:30px;box-shadow:0 2px 0 var(--mode-edge);color:#fff;border-radius:10px;place-items:center;font-size:17px;transition:transform .2s cubic-bezier(.34,1.56,.64,1);display:grid;position:relative}.vocab-tabbar__label{z-index:1;text-overflow:ellipsis;white-space:nowrap;max-width:100%;position:relative;overflow:hidden}.vocab-tabbar__sheet{border:2px solid var(--gm-line);background:var(--gm-card);box-shadow:0 4px 0 var(--gm-line),0 18px 40px #0f172a2e;transform-origin:70% 100%;border-radius:20px;gap:8px;padding:10px;display:grid;position:absolute;bottom:calc(100% + 10px);left:12px;right:12px}.vocab-tabbar__game{border:2px solid var(--gm-line);background:var(--gm-card);box-shadow:0 3px 0 var(--gm-line);color:var(--gm-text);font-family:var(--ds-font-display);letter-spacing:.04em;text-align:left;text-transform:uppercase;cursor:pointer;border-radius:16px;align-items:center;gap:12px;padding:8px 12px;font-size:15px;font-weight:800;transition:transform 80ms,box-shadow 80ms;display:flex}.vocab-tabbar__game:active{box-shadow:0 0 0 var(--gm-line);transform:translateY(3px)}.vocab-tabbar__game.is-active{border-color:var(--mode);background:var(--mode-soft);box-shadow:0 3px 0 var(--mode-edge);color:var(--mode-ink)}@keyframes vocab-nav-pop{0%{transform:scale(.8)}60%{transform:scale(1.18)rotate(-6deg)}to{transform:scale(1)rotate(0)}}@keyframes vocab-nav-flicker{0%,to{transform:scale(1)rotate(0)}33%{transform:scale(1.1,.94)rotate(-4deg)}66%{transform:scale(.95,1.06)rotate(3deg)}}@media (prefers-reduced-motion:reduce){.vocab-nav *,.vocab-topbar *,.vocab-tabbar *{transition:none!important;animation:none!important}}