.vocab{--grouped:#f2f2f7;--cell:#fff;--label:#000;--secondary:#3c3c4399;--separator:#3c3c4333;--tint:#007aff;--red:#ff3b30;--pressed:#00000014}:root[data-theme=dark] .vocab{--grouped:#000;--cell:#1c1c1e;--label:#fff;--secondary:#ebebf599;--separator:#54545899;--tint:#0a84ff;--red:#ff453a;--pressed:#ffffff1a}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .vocab{--grouped:#000;--cell:#1c1c1e;--label:#fff;--secondary:#ebebf599;--separator:#54545899;--tint:#0a84ff;--red:#ff453a;--pressed:#ffffff1a}}.vocab .layout{grid-template-areas:"intro""device""steps";gap:1.5rem;display:grid}.vocab .intro{grid-area:intro}.vocab .device{grid-area:device}.vocab .steps{flex-direction:column;grid-area:steps;justify-self:center;gap:3.25rem;padding-bottom:2.5rem;display:flex}@media (width>=768px){.vocab .steps{justify-self:start}.vocab .layout{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"device intro""device steps";align-content:center;column-gap:2rem}.vocab .device{margin-inline:0}.vocab .intro{align-self:end}.vocab .steps{align-self:start}}@media (width>=1024px){.vocab .layout{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"device steps intro";align-items:center}.vocab .intro,.vocab .steps{align-self:center}}.vocab .steps li{opacity:.45;align-items:center;gap:.75rem;font-size:1.05rem;transition:opacity .3s;display:flex}.vocab .steps li.on{opacity:1;font-weight:600}.vocab .steps .label{flex-direction:column;display:inline-flex}.vocab .steps li{position:relative}.vocab .speech{white-space:nowrap;color:var(--tint);opacity:0;margin-top:.15rem;font-size:1.15rem;font-style:italic;font-weight:500;transition:opacity .2s;position:absolute;top:100%;left:2.5rem}.vocab .speech.on{opacity:1}.vocab .steps .label:after{content:attr(data-text);visibility:hidden;height:0;font-weight:600;overflow:hidden}.vocab .num{background:#76768029;border-radius:999px;place-items:center;width:1.75rem;height:1.75rem;font-size:.875rem;font-weight:700;transition:background-color .3s,color .3s;display:inline-grid}.vocab .steps li.on .num{background:var(--tint);color:#fff}.vocab .device{background:var(--grouped);width:22rem;max-width:100%;height:38rem;color:var(--label);border-radius:2.25rem;margin-inline:auto;font-size:15px;position:relative;overflow:hidden;box-shadow:0 0 0 1px #76768033,0 12px 32px #0000001f}.vocab .screen{background:var(--grouped);padding:.5rem 1rem 1rem;transition:translate .38s cubic-bezier(.3,.7,.2,1),filter .38s;position:absolute;inset:0}.vocab .detail-screen{translate:100%;box-shadow:-6px 0 16px #00000014}.vocab .detail-screen.shown{translate:0}.vocab .list-screen.covered{filter:brightness(.92);translate:-30%}.vocab .nav{justify-content:center;align-items:center;height:2.75rem;margin-bottom:.25rem;display:flex;position:relative}.vocab .nav-title{font-size:1rem;font-weight:600}.vocab .back{background:var(--cell);width:2.25rem;height:2.25rem;color:var(--label);border-radius:999px;place-items:center;display:grid;position:absolute;left:0}.vocab .back svg{width:.6rem}.vocab .header{color:var(--secondary);margin:1rem .75rem .4rem;font-size:.95rem;font-weight:600}.vocab .footer{min-height:1.2em;color:var(--secondary);margin:.4rem .75rem 0;font-size:.8rem;line-height:1.35}.vocab .footer b{color:var(--label);font-weight:600}.vocab .group{background:var(--cell);border-radius:1.1rem;margin-top:.75rem;overflow:hidden}.vocab .group:empty{display:none}.vocab .header+.group{margin-top:0}.vocab .row{align-items:center;gap:.6rem;min-height:2.9rem;padding:.55rem 1rem;transition:background-color .2s;display:flex}.vocab .row+.row,.vocab .group>.row+.row{box-shadow:inset 0 1px 0 var(--separator)}.vocab .row.pressed{background:var(--pressed)}.vocab .row.button{color:var(--tint)}.vocab .row.button.recording{color:var(--red)}.vocab .row.button .icon{width:1.25rem;height:1.25rem}.vocab .row.button.recording .icon{animation:.9s ease-in-out infinite alternate vocab-listening}@keyframes vocab-listening{0%{opacity:1}to{opacity:.35}}.vocab .row.result{color:var(--secondary)}.vocab .row.result .icon{flex-shrink:0;width:1.1rem;height:1.1rem}.vocab .tint{color:var(--tint)}.vocab .field .placeholder{color:#76768099}.vocab .field .typed:empty{display:none}.vocab .plus{width:1.4rem;height:1.4rem;color:var(--tint);flex-shrink:0;margin-left:auto}.vocab .typed:after{content:"";vertical-align:-.15em;background:var(--tint);width:2px;height:1.05em;margin-left:1px;display:inline-block}.vocab .group .stack{flex-direction:column;gap:.1rem;min-width:0;display:flex}.vocab .group .sub{color:var(--secondary);font-size:.82rem}.vocab .group .sub b{font-weight:600}.vocab .group .chevron{color:#76768080;flex-shrink:0;width:.45rem;margin-left:auto;display:block}.vocab .group .quote{padding-left:1.25rem}.vocab .group .enter{animation:.35s ease-out both vocab-row-in}@keyframes vocab-row-in{0%{opacity:0;translate:0 -.5rem}}.vocab .group .flash{animation:1.9s ease-out vocab-flash}@keyframes vocab-flash{0%,60%{background:color-mix(in srgb, var(--tint) 25%, transparent)}to{background:0 0}}.vocab .tap{z-index:5;pointer-events:none;background:#ffffffd9;border-radius:999px;width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;animation:.25s ease-out forwards vocab-tap-down;position:absolute;box-shadow:0 0 0 1px #0000001f,0 2px 10px #00000040}.vocab .tap.up{animation:.15s ease-out forwards vocab-tap-up}@keyframes vocab-tap-down{0%{opacity:0;scale:1.1}25%{opacity:1}to{opacity:1;scale:.65}}@keyframes vocab-tap-up{0%{opacity:1;scale:.65}to{opacity:0;scale:1.25}}@media (prefers-reduced-motion:reduce){.vocab .screen,.vocab .steps li,.vocab .num{transition:none}}