:root {
  --ink: #17231c;
  --muted: #6e786f;
  --paper: #f5f2e9;
  --card: #fffdf8;
  --line: #deddd2;
  --green: #184d36;
  --green-2: #246a4b;
  --lime: #c8ef72;
  --lime-soft: #ecf8cd;
  --orange: #f3a54b;
  --shadow: 0 18px 50px rgba(31, 45, 34, .08);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(36, 106, 75, .25); outline-offset: 2px; }
.hidden { display: none !important; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; z-index: 20; display: flex; flex-direction: column; padding: 30px 20px 22px; border-right: 1px solid var(--line); background: rgba(250, 248, 241, .9); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 12px; margin: 0 8px 40px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--green); color: var(--lime); font-family: Georgia, serif; font-size: 22px; font-style: italic; transform: rotate(-4deg); }
.brand strong, .brand span { display: block; }
.brand strong { font-family: Georgia, serif; font-size: 21px; letter-spacing: -.4px; }
.brand span { margin-top: 2px; color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.nav { display: grid; gap: 8px; }
.nav-item { width: 100%; border: 0; padding: 12px 13px; display: flex; align-items: center; gap: 12px; border-radius: 12px; background: transparent; color: #697269; cursor: pointer; text-align: left; font-size: 14px; font-weight: 650; }
.nav-item:hover { background: #eeece3; color: var(--ink); }
.nav-item.active { background: var(--green); color: white; box-shadow: 0 8px 20px rgba(24, 77, 54, .15); }
.nav-icon { width: 22px; font-size: 17px; text-align: center; }
.nav-count { margin-left: auto; min-width: 22px; padding: 2px 6px; border-radius: 20px; background: #e5e3da; color: #697269; font-size: 10px; text-align: center; }
.nav-item.active .nav-count { background: rgba(255,255,255,.16); color: white; }
.nav-count.accent { background: var(--lime); color: var(--green); }
.sidebar-spacer { flex: 1; }
.daily-card { margin: 0 2px 12px; padding: 16px; border: 1px solid #d6ddc6; border-radius: 16px; background: #f2f6e8; }
.daily-head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.progress-track { height: 5px; margin: 11px 0; border-radius: 8px; background: #d8ddce; overflow: hidden; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--green-2); transition: width .4s ease; }
.daily-card p { margin: 0; color: var(--muted); font: italic 12px/1.45 Georgia, serif; }
.nav-item.subtle { margin-top: 2px; }

.main { min-width: 0; }
.topbar { height: 74px; padding: 0 38px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(245,242,233,.76); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 15; }
.immersion-pill { display: flex; gap: 8px; align-items: center; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.immersion-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(200, 239, 114, .22); }
.top-actions { display: flex; align-items: center; gap: 24px; }
.lookup-button { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 8px 11px; color: var(--muted); cursor: pointer; font-size: 12px; }
.lookup-button span { margin-right: 5px; font-size: 17px; }
kbd { margin-left: 16px; padding: 2px 5px; border: 1px solid var(--line); border-radius: 5px; background: #f4f2eb; font-size: 9px; }
.streak { display: grid; grid-template-columns: auto auto; column-gap: 7px; line-height: 1; }
.streak-flame { grid-row: 1 / 3; align-self: center; color: var(--orange); }
.streak strong { font-size: 14px; }
.streak span:last-child { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.mobile-menu { display: none; }

.page { display: none; padding: 54px 48px 80px; max-width: 1320px; margin: 0 auto; animation: pageIn .28s ease; }
.page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } }
.page-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; }
.eyebrow, .card-label { color: var(--green-2); font-size: 10px; line-height: 1; letter-spacing: .16em; font-weight: 850; }
.page-heading h1, .section-heading h1 { margin: 11px 0 13px; max-width: 760px; font: 500 clamp(40px, 5.2vw, 64px)/.98 Georgia, serif; letter-spacing: -2.4px; }
.page-heading h1 em { color: var(--green-2); font-weight: 400; }
.lead, .section-heading p { max-width: 620px; margin: 0; color: var(--muted); font: 15px/1.6 Georgia, serif; }
.mini-orbit { width: 152px; height: 152px; position: relative; display: grid; place-items: center; border: 1px solid #d5d7cb; border-radius: 50%; animation: float 5s ease-in-out infinite; }
.mini-orbit::before { content: ""; position: absolute; inset: 18px; border: 1px dashed #cdd3c2; border-radius: 50%; }
.mini-orbit i { width: 55px; height: 55px; display: grid; place-items: center; z-index: 1; border-radius: 50%; background: var(--green); color: var(--lime); font: italic 17px Georgia, serif; }
.mini-orbit span { position: absolute; padding: 3px 7px; border-radius: 10px; background: var(--lime-soft); color: var(--green); font-size: 9px; }
.mini-orbit span:nth-child(1) { top: 8px; left: 27px; }.mini-orbit span:nth-child(2) { right: -7px; top: 62px; }.mini-orbit span:nth-child(3) { bottom: 4px; left: 42px; }
@keyframes float { 50% { transform: translateY(-6px) rotate(2deg); } }

.practice-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; align-items: start; }
.practice-main { min-width: 0; display: grid; gap: 22px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.setup-card, .attempt-card { padding: 31px; }
.card-label { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; }
.card-label span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--lime-soft); color: var(--green); font-size: 9px; letter-spacing: 0; }
.setup-card > label, .attempt-label { display: block; margin-bottom: 10px; font: 18px Georgia, serif; }
.target-row { display: grid; grid-template-columns: 1fr 52px; gap: 9px; }
input, textarea { width: 100%; border: 1px solid #d4d6cc; border-radius: 13px; background: #fbfaf5; color: var(--ink); transition: border .2s, box-shadow .2s; }
input:focus, textarea:focus { outline: 0; border-color: var(--green-2); box-shadow: 0 0 0 4px rgba(36,106,75,.08); }
.target-row input { padding: 15px 17px; font: 18px Georgia, serif; }
.icon-button { border: 1px solid #d4d6cc; border-radius: 13px; background: #f6f5ef; cursor: pointer; color: var(--green); }
.kind-row { display: flex; gap: 8px; margin: 15px 0 20px; }
.kind-chip { padding: 7px 13px; border: 1px solid #d7d8d0; border-radius: 20px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.kind-chip.active { border-color: var(--green); background: var(--green); color: white; }
.context-details { border-top: 1px solid #e7e5dc; padding-top: 18px; }
.context-details summary { cursor: pointer; color: var(--green-2); font-size: 12px; font-weight: 700; list-style: none; }
.context-details summary span { color: #9a9f98; font-weight: 400; margin-left: 6px; }
.context-details textarea { margin-top: 12px; padding: 13px; resize: vertical; }
.primary-button, .secondary-button { border-radius: 12px; padding: 13px 18px; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.primary-button { border: 1px solid var(--green); background: var(--green); color: white; box-shadow: 0 8px 18px rgba(24,77,54,.15); }
.primary-button:hover { background: #103d2a; transform: translateY(-1px); }
.primary-button:disabled { opacity: .55; cursor: wait; transform: none; }
.primary-button span { margin-left: 20px; color: var(--lime); font-size: 16px; }
.setup-card > .primary-button { margin-top: 24px; width: 100%; }
.demo-link { display: block; margin: 12px auto 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; text-decoration: underline; cursor: pointer; }
.secondary-button { border: 1px solid var(--line); background: var(--card); }

.coach-rail { display: grid; gap: 17px; }
.coach-note { padding: 0 4px; display: flex; align-items: center; gap: 10px; }
.coach-avatar { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50% 50% 44% 56%; background: var(--green); color: var(--lime); font: italic 17px Georgia, serif; }
.coach-note strong, .coach-note span { display: block; }
.coach-note strong { font-size: 12px; }.coach-note div span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.online-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #6bbf67; }
.hint-card { padding: 24px; box-shadow: none; }
.hint-card .card-label { margin-bottom: 20px; }
.hint-card h3 { margin: 0 0 7px; font: 21px Georgia, serif; }
.hint-card > p { margin: 0 0 17px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.hint-ladder { display: grid; gap: 7px; }
.hint-ladder button { min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #e1e2da; border-radius: 12px; background: #faf9f4; cursor: pointer; text-align: left; }
.hint-ladder button:hover { border-color: #aebba9; background: #f5f8ec; }
.hint-ladder button.revealed { border-color: #b9d482; background: var(--lime-soft); }
.hint-ladder button > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #e6e7df; color: var(--muted); font-size: 10px; }
.hint-ladder button strong, .hint-ladder button small { display: block; }
.hint-ladder button strong { font-size: 11px; }.hint-ladder button small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.hint-ladder button b { margin-left: auto; color: var(--green); font-size: 16px; }
.hint-result { margin-top: 12px; padding: 13px; border-left: 3px solid var(--lime); background: #f6f8ef; color: #3c4d41; font: 13px/1.55 Georgia, serif; }
.bridge-card { width: 100%; display: flex; align-items: center; gap: 10px; padding: 15px; border: 1px solid #b9c9af; border-radius: 16px; background: #edf3e5; cursor: pointer; text-align: left; }
.bridge-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--green); color: var(--lime); font-size: 20px; }
.bridge-card strong, .bridge-card small { display: block; }.bridge-card strong { font-size: 11px; }.bridge-card small { margin-top: 3px; color: var(--muted); font-size: 9px; }.bridge-card b { margin-left: auto; }

.attempt-top { display: flex; align-items: flex-start; justify-content: space-between; }
.attempt-card .card-label { margin-bottom: 10px; }
.attempt-card h2 { margin: 0; font: 38px Georgia, serif; }
.text-button { border: 0; background: transparent; color: var(--green-2); text-decoration: underline; cursor: pointer; font-size: 11px; }
.prompt-strip { margin: 24px 0; padding: 14px 16px; border-radius: 13px; background: #eff4e7; }
.prompt-strip span { color: var(--green-2); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.prompt-strip p { margin: 5px 0 0; font: italic 14px/1.5 Georgia, serif; }
.attempt-card textarea { padding: 16px; resize: vertical; font: 16px/1.65 Georgia, serif; }
.attempt-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; }
.attempt-footer > div { display: flex; align-items: center; gap: 10px; }
.round-button { width: 34px; height: 34px; border: 1px solid #d4d6cc; border-radius: 50%; background: #f5f4ed; color: var(--green); cursor: pointer; }
.round-button.listening { color: #b44535; animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(180,69,53,.1); } }
.word-count { color: var(--muted); font-size: 10px; }.primary-button.compact { padding: 11px 15px; }

.feedback-card { padding: 30px; border-radius: var(--radius); background: var(--green); color: white; box-shadow: 0 22px 50px rgba(24,77,54,.2); }
.feedback-head { display: flex; gap: 20px; justify-content: space-between; align-items: flex-start; }
.feedback-head .eyebrow { color: var(--lime); }.feedback-head h2 { margin: 8px 0; font: 26px/1.2 Georgia, serif; }.feedback-head p { margin: 0; color: #d7e4da; font-size: 12px; }
.score-ring { min-width: 74px; height: 74px; display: grid; place-items: center; border: 5px solid var(--lime); border-radius: 50%; font: 22px Georgia, serif; }
.score-ring small { font-size: 10px; }
.score-bars { margin: 25px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.score-bars div { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.08); }
.score-bars span { display: block; color: #bdd0c1; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.score-bars strong { display: block; margin-top: 4px; font: 20px Georgia, serif; }
.recast { padding: 18px; border-radius: 14px; background: white; color: var(--ink); }.recast span { color: var(--green-2); font-size: 9px; font-weight: 850; letter-spacing: .12em; }.recast p { margin: 8px 0 0; font: 16px/1.55 Georgia, serif; }
.feedback-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 21px 0; }.feedback-columns h3 { color: var(--lime); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }.feedback-columns ul { margin: 0; padding-left: 18px; color: #e1ebe3; font-size: 12px; line-height: 1.65; }
.feedback-actions { display: flex; gap: 10px; }.feedback-actions .primary-button { background: var(--lime); color: var(--green); border-color: var(--lime); }.feedback-actions .primary-button span { color: var(--green); }.feedback-actions .secondary-button { border-color: rgba(255,255,255,.25); background: transparent; color: white; }

.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 34px; }.section-heading h1 { font-size: clamp(39px, 4.5vw, 58px); }.library-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }.library-tools input { width: 230px; padding: 11px 13px; }.text-export { border: 0; background: transparent; color: var(--green-2); font-size: 10px; font-weight: 750; text-decoration: underline; cursor: pointer; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }.stats-row article { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }.stats-row span, .stats-row small { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }.stats-row strong { display: block; margin: 8px 0 4px; font: 29px Georgia, serif; }
.memory-list { display: grid; gap: 10px; }.memory-item { display: grid; grid-template-columns: minmax(150px, .65fr) 1.4fr 100px 66px 36px; align-items: center; gap: 16px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.memory-item:hover, .memory-item:focus-visible { border-color: #aab8a6; box-shadow: 0 10px 28px rgba(31,45,34,.07); transform: translateY(-1px); outline: 0; }.memory-target strong { display: block; font: 20px Georgia, serif; }.memory-target span { color: var(--green-2); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }.memory-definition { color: var(--muted); font: 13px/1.45 Georgia, serif; }.mastery { font-size: 10px; color: var(--muted); }.mastery-track { height: 5px; margin-top: 6px; border-radius: 5px; background: #e5e4dc; overflow: hidden; }.mastery-track span { display: block; height: 100%; background: var(--green-2); }.view-item { border: 0; background: transparent; color: var(--green-2); cursor: pointer; font-size: 10px; font-weight: 800; }.delete-item { border: 0; background: transparent; color: #a4a59f; cursor: pointer; font-size: 19px; }.empty-state { padding: 70px 20px; text-align: center; border: 1px dashed #cdd0c5; border-radius: 20px; color: var(--muted); }.empty-state strong { display: block; color: var(--ink); font: 24px Georgia, serif; margin-bottom: 7px; }

.review-heading { margin-bottom: 38px; }.review-stage { max-width: 730px; margin: 0 auto; }.review-card { min-height: 390px; padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--line); border-radius: 26px; background: var(--card); box-shadow: var(--shadow); }.review-card .kind-badge { padding: 5px 9px; border-radius: 12px; background: var(--lime-soft); color: var(--green); font-size: 9px; font-weight: 800; text-transform: uppercase; }.review-card h2 { margin: 22px 0 8px; font: 47px Georgia, serif; }.review-card .review-prompt { max-width: 500px; color: var(--muted); font: italic 15px/1.6 Georgia, serif; }.review-card textarea { max-width: 560px; margin: 16px 0; padding: 15px; font: 15px/1.5 Georgia, serif; }.review-answer { max-width: 560px; margin: 16px 0; padding: 18px; border-radius: 14px; background: #eff4e7; text-align: left; font: 15px/1.55 Georgia, serif; }.review-ratings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; width: 100%; max-width: 560px; }.review-ratings button { padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: white; cursor: pointer; font-size: 11px; }.review-ratings button:hover { border-color: var(--green); }.review-progress { margin-top: 17px; color: var(--muted); font-size: 10px; }

.overlay { position: fixed; inset: 0; z-index: 40; background: rgba(19,32,24,.35); backdrop-filter: blur(2px); }.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(470px, 94vw); padding: 35px; overflow-y: auto; background: #fbfaf5; box-shadow: -18px 0 50px rgba(23,35,28,.17); transform: translateX(105%); transition: transform .3s ease; }.drawer.open { transform: translateX(0); }.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; }.drawer-head h2 { margin: 8px 0 0; font: 35px Georgia, serif; }.close-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; font-size: 22px; }.drawer-intro { margin: 18px 0 22px; color: var(--muted); font: 14px/1.6 Georgia, serif; }.drawer-search { display: grid; grid-template-columns: 1fr 44px; gap: 8px; }.drawer-search input, .bridge-drawer textarea { padding: 13px; }.drawer-search button { border: 0; border-radius: 11px; background: var(--green); color: var(--lime); cursor: pointer; font-size: 20px; }.drawer-body { margin-top: 24px; }.empty-illustration { margin: 70px auto; max-width: 260px; text-align: center; color: var(--muted); }.empty-illustration span { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 18px; border: 1px dashed #acb4aa; border-radius: 50%; color: var(--green); font: italic 20px Georgia, serif; }.empty-illustration p { font: 13px/1.5 Georgia, serif; }
.lookup-content .lookup-pos { color: var(--green-2); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }.lookup-content h3 { margin: 5px 0 11px; font: 32px Georgia, serif; }.lookup-content .plain-definition { padding: 16px; border-left: 3px solid var(--lime); background: var(--lime-soft); font: 16px/1.55 Georgia, serif; }.lookup-content h4, .bridge-content h4 { margin: 22px 0 9px; color: var(--green-2); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }.lookup-content ul, .bridge-content ul { margin: 0; padding-left: 18px; color: #4f5a51; font-size: 13px; line-height: 1.65; }.lookup-content .challenge { padding: 14px; border-radius: 12px; background: var(--green); color: white; font: italic 14px/1.5 Georgia, serif; }.drawer .primary-button { width: 100%; margin-top: 15px; }
.memory-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 22px; }.memory-meta span { padding: 5px 9px; border-radius: 20px; background: var(--lime-soft); color: var(--green); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }.detail-mastery { margin-bottom: 24px; padding: 15px; border-radius: 13px; background: #f1f4ea; }.detail-mastery-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }.detail-mastery-head strong { color: var(--green); font: 20px Georgia, serif; }.detail-section { padding: 18px 0; border-top: 1px solid var(--line); }.detail-section h4 { margin: 0 0 9px; color: var(--green-2); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }.detail-section p { margin: 0; color: #3f4d43; font: 15px/1.6 Georgia, serif; white-space: pre-wrap; }.detail-section.highlight { margin: 0 -14px; padding: 18px 14px; border-top: 0; border-radius: 13px; background: var(--lime-soft); }.detail-section ul { margin: 0; padding-left: 19px; color: #4f5a51; font-size: 13px; line-height: 1.7; }.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }.detail-actions .primary-button, .detail-actions .secondary-button { width: 100%; margin: 0; }.detail-date { margin-top: 18px; color: var(--muted); font-size: 9px; line-height: 1.7; text-align: center; }
.loading { display: grid; place-items: center; gap: 12px; min-height: 180px; color: var(--muted); font: italic 14px Georgia, serif; }.loading::before { content: ""; width: 30px; height: 30px; border: 3px solid #d9ddd4; border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }

dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 23px; background: #fbfaf5; box-shadow: 0 30px 90px rgba(23,35,28,.25); } dialog::backdrop { background: rgba(19,32,24,.4); backdrop-filter: blur(3px); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; padding: 11px 17px; border-radius: 12px; background: #16271d; color: white; box-shadow: 0 10px 35px rgba(0,0,0,.2); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: .25s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1000px) { .app-shell { grid-template-columns: 1fr; }.sidebar { position: fixed; transform: translateX(-105%); transition: transform .25s; width: 244px; box-shadow: 10px 0 40px rgba(0,0,0,.12); }.sidebar.open { transform: translateX(0); }.mobile-menu { display: block; border: 0; background: transparent; font-size: 20px; cursor: pointer; }.practice-grid { grid-template-columns: 1fr; }.coach-rail { grid-template-columns: 1fr 1fr; }.coach-note { display: none; }.mini-orbit { display: none; }.topbar { padding: 0 24px; }.page { padding: 40px 28px 70px; } }
@media (max-width: 680px) { .top-actions .streak, kbd, .immersion-pill { display: none; }.topbar { justify-content: space-between; }.page { padding: 32px 16px 60px; }.page-heading h1, .section-heading h1 { font-size: 40px; letter-spacing: -1.5px; }.coach-rail { grid-template-columns: 1fr; }.setup-card, .attempt-card { padding: 22px; }.kind-row { flex-wrap: wrap; }.section-heading { display: block; }.library-tools { margin-top: 20px; }.library-tools input { width: 100%; }.stats-row { grid-template-columns: 1fr; }.memory-item { grid-template-columns: 1fr 56px 36px; }.memory-definition, .mastery { grid-column: 1 / 4; }.view-item { grid-column: 2; grid-row: 1; }.delete-item { grid-column: 3; grid-row: 1; }.score-bars { grid-template-columns: 1fr; }.feedback-columns { grid-template-columns: 1fr; }.feedback-actions { flex-direction: column; }.attempt-footer { align-items: flex-end; }.review-ratings { grid-template-columns: 1fr; }.drawer { padding: 27px 20px; } }
.top-actions { gap: 10px; }
.immersion-pill b, .lookup-button b, .utility-button b { font: inherit; }
.lookup-button { display: inline-flex; align-items: center; white-space: nowrap; }

.utility-button,
.language-switch {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 253, 248, .78);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}

.utility-button { gap: 7px; padding: 8px 11px; }
.utility-button span { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: var(--lime-soft); color: var(--green); font: 800 11px/1 Georgia, serif; }
.language-switch { min-width: 45px; padding: 8px 10px; border-color: rgba(24, 77, 54, .24); color: var(--green); letter-spacing: .05em; }
.utility-button:hover, .language-switch:hover { transform: translateY(-1px); border-color: rgba(24, 77, 54, .35); color: var(--green); background: var(--card); }

.welcome-dialog { width: min(760px, calc(100vw - 28px)); max-height: min(88vh, 820px); overflow: auto; }
.welcome-guide { padding: 34px; }
.guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.guide-head h2 { max-width: 620px; margin: 8px 0 0; font: 38px/1.12 Georgia, "Noto Serif SC", serif; letter-spacing: -.8px; }
.guide-intro { max-width: 650px; margin: 18px 0 24px; color: var(--muted); font: 14px/1.75 Georgia, "Noto Serif SC", serif; }
.guide-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guide-steps article { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 253, 248, .8); }
.guide-steps article > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--green); color: var(--lime); font: 800 10px/1 ui-monospace, monospace; }
.guide-steps strong { display: block; margin: 1px 0 5px; font-size: 13px; }
.guide-steps p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.guide-principle { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 15px 17px; border-radius: 15px; background: var(--lime-soft); color: var(--green); }
.guide-principle > span { font-size: 22px; }
.guide-principle p { display: grid; gap: 3px; margin: 0; }
.guide-principle strong { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.guide-principle b { font: 700 14px/1.4 Georgia, "Noto Serif SC", serif; }
.guide-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.guide-actions .primary-button { display: inline-flex; align-items: center; gap: 18px; }

body[data-language="zh"] .page-heading h1,
body[data-language="zh"] .section-heading h1 { letter-spacing: -.05em; }

@media (max-width: 760px) {
  .top-actions { gap: 7px; }
  .welcome-guide { padding: 24px 20px; }
  .guide-head h2 { font-size: 31px; }
  .guide-steps { grid-template-columns: 1fr; }
  .guide-actions { align-items: stretch; flex-direction: column-reverse; }
  .guide-actions button { justify-content: center; width: 100%; }
}

@media (max-width: 460px) {
  .topbar { padding: 0 14px; }
  .utility-button b, .lookup-button b { display: none; }
  .utility-button, .lookup-button, .language-switch { min-width: 38px; padding: 7px 9px; }
  .lookup-button span { margin: 0; }
}