:root {
  --mw-ink: #162018;
  --mw-text: #2e3a32;
  --mw-muted: #657167;
  --mw-bg: #fbfaf5;
  --mw-band: #eef6ed;
  --mw-line: #d8e2d7;
  --mw-paper-line: #e7e2d5;
  --mw-green: #26724c;
  --mw-green-dark: #175236;
  --mw-blue: #245a9b;
  --mw-amber: #b96e22;
  --mw-highlight: #fff0a8;
  --mw-card: #ffffff;
  --mw-shadow: 0 18px 42px rgba(31, 45, 35, .08);
}

* { box-sizing: border-box; }
body.mw-page { margin: 0; background: var(--mw-bg); color: var(--mw-text); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; }
a { color: inherit; }
.mw-nav { position: sticky; top: 0; z-index: 70; height: 60px; display: flex; align-items: center; gap: 24px; padding: 0 clamp(18px, 4vw, 56px); background: rgba(251, 250, 245, .78); border-bottom: 1px solid rgba(231, 226, 213, .75); backdrop-filter: blur(18px) saturate(115%); box-shadow: 0 10px 28px rgba(31, 45, 35, .035); }
.mw-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--mw-ink); text-decoration: none; font-weight: 900; }
.mw-brand-mark { width: 32px; height: 32px; display: block; flex: 0 0 32px; border-radius: 9px; object-fit: cover; box-shadow: 0 3px 10px rgba(31, 45, 35, .13); }
.mw-brand-label { white-space: nowrap; }
.mw-nav-links { display: flex; align-items: center; gap: 18px; margin-left: 12px; flex: 1; }
.mw-nav-links a, .mw-link { color: #5f6b5f; text-decoration: none; font-size: 15px; font-weight: 560; }
.mw-nav-links a:hover, .mw-link:hover { color: var(--mw-green-dark); }
.mw-auth { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mw-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border-radius: 8px; border: 1px solid transparent; text-decoration: none; font-weight: 780; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.mw-button-primary { color: #fff; background: var(--mw-green); border-color: var(--mw-green); box-shadow: 0 12px 24px rgba(38, 114, 76, .16); }
.mw-button-primary:hover { color: #fff; background: var(--mw-green-dark); transform: translateY(-2px); box-shadow: 0 18px 34px rgba(38, 114, 76, .22); }
.mw-button-secondary { color: var(--mw-green-dark); background: #fff; border-color: var(--mw-line); }
.mw-button-secondary:hover { border-color: var(--mw-green); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31, 45, 35, .08); }
.mw-button-ghost { color: var(--mw-green-dark); background: rgba(38, 114, 76, .07); border-color: rgba(38, 114, 76, .16); box-shadow: none; }
.mw-menu-button { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid var(--mw-paper-line); border-radius: 8px; background: rgba(255, 253, 247, .72); }
.mw-menu-button span { display: block; width: 18px; height: 2px; margin: 2px 0; border-radius: 2px; background: #5f6b5f; }
.mw-mobile-panel { display: none; position: fixed; top: 60px; right: 12px; z-index: 68; width: clamp(210px, 66vw, 280px); max-height: calc(100vh - 76px); overflow-y: auto; overscroll-behavior: contain; padding: 10px; border: 1px solid var(--mw-paper-line); border-radius: 8px; background: rgba(255, 253, 247, .96); box-shadow: 0 18px 40px rgba(31, 45, 35, .10); backdrop-filter: blur(16px); }
.mw-mobile-panel.is-open { display: grid; gap: 4px; }
.mw-mobile-panel a { padding: 12px 10px; color: var(--mw-text); text-decoration: none; border-radius: 8px; font-weight: 750; }
.mw-mobile-panel a:hover { background: #f3f7ef; }
.mw-band { position: relative; overflow: hidden; }
.mw-hero { min-height: calc(100vh - 118px); display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(370px, .76fr); align-items: center; gap: clamp(28px, 5.5vw, 76px); padding: clamp(48px, 8vw, 92px) clamp(18px, 5vw, 74px) 58px; background: radial-gradient(circle at 22% 22%, rgba(255, 239, 191, .72), transparent 34%), radial-gradient(circle at 78% 30%, rgba(216, 234, 215, .78), transparent 36%), #fbf7ed; }
.mw-hero::before { content: 'The note said every kind heart would take the bait before midnight. The room answered with a quiet echo.'; position: absolute; left: clamp(18px, 5vw, 74px); right: clamp(18px, 5vw, 74px); bottom: 16px; color: rgba(38, 55, 42, .045); font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 5vw, 72px); line-height: 1; white-space: nowrap; pointer-events: none; }
.mw-hero-bg { position: absolute; inset: 0; pointer-events: none; opacity: .52; }
.mw-page-stack { position: absolute; width: 220px; height: 300px; border: 1px solid rgba(231, 226, 213, .9); border-radius: 8px; background: rgba(255, 253, 247, .48); box-shadow: 0 18px 70px rgba(22, 32, 24, .05); }
.stack-a { right: 12%; top: 12%; transform: rotate(-7deg); }
.stack-b { right: 24%; top: 36%; transform: rotate(6deg); }
.stack-c { left: 4%; bottom: -14%; transform: rotate(-10deg); }
.mw-hero-content, .mw-reading-demo { position: relative; z-index: 1; }
.mw-kicker { margin: 0 0 12px; color: var(--mw-amber); font-weight: 800; font-size: 14px; }
.mw-hero h1, .promo-hero h1 { margin: 0; color: var(--mw-ink); font-size: clamp(46px, 6vw, 78px); line-height: 1.04; font-weight: 930; letter-spacing: 0; }
.mw-hero h1 span { display: block; }
.mw-title-mark { width: fit-content; color: var(--mw-green-dark); position: relative; z-index: 0; }
.mw-title-mark::after { content: ''; position: absolute; left: -.08em; right: -.08em; bottom: .05em; z-index: -1; height: .34em; border-radius: 6px; background: rgba(255, 232, 126, .62); }
.mw-subtitle { max-width: 480px; margin: 24px 0 0; font-size: 18px; line-height: 1.8; color: var(--mw-text); }
.mw-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.mw-proof { margin-top: 12px; color: var(--mw-muted); font-size: 14px; }
.mw-trust-line { width: fit-content; display: inline-flex; align-items: center; margin-top: 12px; padding: 7px 10px; border: 1px solid rgba(231, 226, 213, .9); border-radius: 999px; background: rgba(255, 253, 247, .62); color: #59665a; font-size: 13px; font-weight: 750; }
.mw-reading-demo { border: 1px solid var(--mw-paper-line); background: #fffdf7; border-radius: 8px; padding: 22px; box-shadow: 0 22px 50px rgba(31, 45, 35, .09); animation: mwFloat 7s ease-in-out infinite; }
.mw-reading-demo > :not(.mw-demo-paper) { position: relative; z-index: 2; }
.mw-demo-paper { position: absolute; inset: 18px -10px auto auto; width: 92%; height: 86%; border: 1px solid rgba(231, 226, 213, .8); border-radius: 8px; background: rgba(255, 253, 247, .5); box-shadow: 0 16px 36px rgba(31, 45, 35, .055); pointer-events: none; }
.paper-one { transform: rotate(4deg) translate(12px, -12px); }
.paper-two { transform: rotate(-5deg) translate(-14px, 10px); opacity: .68; }
.mw-demo-top { display: flex; justify-content: space-between; gap: 16px; color: var(--mw-muted); font-size: 14px; }
.mw-demo-top strong { color: var(--mw-green-dark); }
.mw-demo-reader { margin: 26px 0 18px; padding: 18px 18px 16px; border-radius: 8px; background: #fffaf0; border: 1px solid rgba(231, 226, 213, .72); }
.mw-demo-reader p { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; color: var(--mw-ink); font-size: clamp(17px, 1.55vw, 21px); line-height: 1.65; }
.mw-demo-reader p:last-child { margin-bottom: 0; }
.mw-word-chip { border: 0; background: #eef5ff; color: #235989; border-radius: 6px; padding: 1px 5px; font: inherit; cursor: pointer; transition: background .16s ease, box-shadow .16s ease, transform .16s ease; }
.mw-word-chip.focus { background: #fff0b8; color: #6d5311; box-shadow: inset 0 -2px 0 rgba(185, 110, 34, .18); }
.mw-word-chip.soft { cursor: default; }
.mw-word-chip:hover, .mw-word-chip:focus-visible { background: #ffe99a; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(185, 110, 34, .12); outline: none; }
.mw-word-card { display: grid; gap: 5px; padding: 15px; border-radius: 8px; background: #f7fbf8; border: 1px solid var(--mw-line); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.mw-word-card.active { transform: translateY(-2px); border-color: rgba(38, 114, 76, .35); box-shadow: 0 14px 28px rgba(31, 45, 35, .08); }
.mw-word-card strong { color: var(--mw-green-dark); font-size: 22px; }
.mw-word-card small { color: var(--mw-muted); line-height: 1.5; }
.mw-word-card em { color: var(--mw-text); font-style: normal; line-height: 1.55; }
.mw-demo-next-hint { display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 0; color: var(--mw-muted); font-size: 13px; line-height: 1.55; }
.mw-demo-next-hint i { margin-top: 4px; color: var(--mw-green); font-size: 11px; }
.mw-mini-cta { margin-top: 16px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; background: var(--mw-green); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 780; box-shadow: 0 12px 24px rgba(38, 114, 76, .15); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.mw-mini-cta:hover { color: #fff; background: var(--mw-green-dark); transform: translateY(-2px); box-shadow: 0 18px 32px rgba(38, 114, 76, .2); }
.mw-section { padding: 84px clamp(18px, 5vw, 74px); max-width: 1240px; margin: 0 auto; }
.mw-band-soft { max-width: none; background: var(--mw-band); }
.mw-section-head { max-width: 760px; margin-bottom: 30px; }
.mw-section-head.compact { margin-left: auto; margin-right: auto; text-align: center; }
.mw-section h2, .mw-bottom-cta h2, .app-hero h1 { color: var(--mw-ink); font-size: clamp(30px, 4vw, 48px); line-height: 1.16; font-weight: 900; margin: 0; letter-spacing: 0; }
.mw-grid { display: grid; gap: 18px; }
.mw-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mw-card { background: var(--mw-card); border: 1px solid var(--mw-line); border-radius: 8px; padding: 22px; box-shadow: 0 12px 32px rgba(31, 45, 35, .06); }
.mw-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.mw-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(31, 45, 35, .09); border-color: var(--mw-paper-line); }
.mw-card h3 { margin: 0 0 10px; color: var(--mw-ink); font-size: 22px; font-weight: 850; }
.mw-card p { margin: 0; color: var(--mw-muted); line-height: 1.7; }
.mw-card a { display: inline-flex; margin-top: 18px; color: var(--mw-green-dark); font-weight: 800; text-decoration: none; }
.mw-card-label { width: fit-content; padding: 4px 9px; margin-bottom: 14px; border-radius: 999px; background: #fff4e6; color: #925315; font-size: 13px; font-weight: 800; }
.mw-turn { margin: 28px 0 0; color: var(--mw-green-dark); font-weight: 850; font-size: 20px; }
.mw-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; max-width: 1120px; margin: 34px auto 0; padding: 0; list-style: none; }
.mw-flow li { min-height: 86px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; border-radius: 8px; background: #fff; border: 1px solid var(--mw-line); font-weight: 800; color: var(--mw-green-dark); }
.mw-mechanism { padding-top: 70px; }
.mw-step-grid { margin-top: 28px; }
.mw-step-card { background: #fffdf7; border-color: var(--mw-paper-line); }
.mw-step-icon { width: 42px; height: 42px; position: relative; display: grid; place-items: center; margin-bottom: 16px; border-radius: 8px; border: 1px solid #dfe8dd; background: #f4f8f2; color: var(--mw-green-dark); }
.mw-step-icon::before, .mw-step-icon::after { content: ''; position: absolute; border-color: currentColor; }
.icon-book::before { width: 22px; height: 16px; border: 2px solid currentColor; border-radius: 3px; background: linear-gradient(90deg, transparent 48%, currentColor 48%, currentColor 52%, transparent 52%); opacity: .86; }
.icon-mark::before { width: 22px; height: 8px; border: 2px solid currentColor; border-radius: 5px; transform: rotate(-11deg); background: rgba(255, 232, 126, .5); }
.icon-mark::after { width: 18px; height: 3px; left: 12px; bottom: 10px; border-radius: 999px; background: rgba(185, 110, 34, .26); }
.icon-card::before { width: 24px; height: 18px; border: 2px solid currentColor; border-radius: 4px; background: #fffdf7; }
.icon-card::after { width: 12px; height: 2px; left: 15px; top: 23px; border-radius: 999px; background: currentColor; box-shadow: 0 5px 0 rgba(23, 82, 54, .42); }
.mw-sample-grid { align-items: stretch; }
.sample-card { background: #fffdf7; border-color: var(--mw-paper-line); min-height: 218px; display: flex; flex-direction: column; }
.sample-card p { flex: 1; }
.mw-sample-link { min-height: 40px; width: fit-content; align-items: center; padding: 0 12px; border: 1px solid var(--mw-line); border-radius: 8px; background: #fff; }
.mw-sample-link:hover { border-color: var(--mw-green); background: #f8fbf7; }
.mw-feature-list { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mw-feature-list div { display: grid; gap: 6px; padding: 18px; border: 1px solid rgba(216, 226, 215, .95); border-radius: 8px; background: rgba(255, 255, 255, .75); }
.mw-feature-list strong { color: var(--mw-ink); }
.mw-feature-list span { color: var(--mw-muted); }
.pricing-grid .plan-free { border-color: rgba(38, 114, 76, .28); background: #fcfffc; }
.pricing-grid .plan-free h3 { color: #176b3a; }
.pricing-grid .plan-vip { border-color: rgba(183, 121, 31, .42); background: #fffaf0; box-shadow: 0 18px 42px rgba(183, 121, 31, .12); }
.pricing-grid .plan-vip h3 { color: #9a5f12; }
.pricing-grid .plan-pro { border-color: rgba(37, 99, 235, .35); background: #f4f8ff; }
.pricing-grid .plan-pro h3 { color: #1d4ed8; }
.mw-plan-list { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--mw-muted); line-height: 1.55; }
.mw-plan-list li { position: relative; padding-left: 18px; }
.mw-plan-list li::before { content: ''; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--mw-green); }
.plan-vip .mw-plan-list li::before { background: #c47a1a; }
.plan-pro .mw-plan-list li::before { background: #2563eb; }
.mw-center-action { display: flex; justify-content: center; margin-top: 22px; }
.mw-faq { max-width: 900px; }
.mw-faq details { border-top: 1px solid var(--mw-line); padding: 18px 0; }
.mw-faq summary { cursor: pointer; color: var(--mw-ink); font-weight: 850; font-size: 18px; }
.mw-faq p { color: var(--mw-muted); line-height: 1.75; margin: 12px 0 0; }
.mw-bottom-cta { display: grid; place-items: center; gap: 20px; text-align: center; padding: 72px 18px 92px; background: #f4efe2; }
.mw-footer { display: flex; justify-content: space-between; gap: 18px; padding: 24px clamp(18px, 5vw, 74px); color: var(--mw-muted); border-top: 1px solid var(--mw-line); }
.mw-footer-links { display: flex; gap: 16px; }
.mw-footer a { color: var(--mw-muted); text-decoration: none; }

.promo-hero { min-height: calc(100vh - 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); align-items: center; gap: clamp(24px, 6vw, 76px); padding: clamp(48px, 9vw, 112px) clamp(18px, 5vw, 74px); background: #f4efe2; }
.promo-copy p:not(.mw-kicker) { max-width: 620px; margin: 22px 0 28px; font-size: 21px; line-height: 1.7; }
.promo-reader { border-radius: 8px; border: 1px solid var(--mw-line); background: rgba(255, 255, 255, .88); padding: 22px; box-shadow: var(--mw-shadow); }
.promo-reader p { font-family: Georgia, "Times New Roman", serif; color: var(--mw-ink); font-size: 28px; line-height: 1.45; }
.promo-reader span { color: var(--mw-blue); background: #eaf2ff; border-bottom: 2px solid var(--mw-blue); border-radius: 6px; padding: 0 4px; }
.promo-line { color: var(--mw-muted); font-size: 14px; }
.promo-word { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--mw-line); border-radius: 8px; background: #f7fbf8; }
.promo-word strong { color: var(--mw-green-dark); font-size: 22px; }
.promo-word small { color: var(--mw-muted); }
.promo-progress { height: 8px; margin-top: 16px; background: #e5ece4; border-radius: 999px; overflow: hidden; }
.promo-progress i { display: block; height: 100%; background: var(--mw-green); }
.promo-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--mw-line); border-top: 1px solid var(--mw-line); border-bottom: 1px solid var(--mw-line); }
.promo-strip span { min-height: 68px; display: grid; place-items: center; background: #fff; font-weight: 800; color: var(--mw-green-dark); text-align: center; padding: 10px; }
.promo-explain { max-width: 1120px; }

.landing-reader { min-height: calc(100vh - 64px); display: grid; grid-template-columns: minmax(0, 740px) minmax(280px, 360px); gap: clamp(18px, 4vw, 48px); align-items: start; padding: 38px clamp(18px, 5vw, 74px) 140px; }
.reader-shell { background: #fff; border: 1px solid var(--mw-line); border-radius: 8px; box-shadow: 0 14px 38px rgba(31, 45, 35, .07); overflow: hidden; }
.reader-head { display: flex; justify-content: space-between; gap: 18px; padding: 24px 24px 18px; border-bottom: 1px solid var(--mw-line); background: #fbfaf5; }
.reader-head h1 { margin: 0 0 6px; color: var(--mw-ink); font-size: clamp(25px, 3vw, 36px); font-weight: 900; }
.reader-head p { margin: 0; color: var(--mw-muted); }
.sample-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sample-switch a { min-height: 34px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--mw-line); border-radius: 8px; background: #fff; color: var(--mw-green-dark); text-decoration: none; font-weight: 800; font-size: 14px; }
.sample-switch a.active { background: #eaf6ef; border-color: var(--mw-green); color: var(--mw-green-dark); }
.reader-save { height: 38px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px; border: 1px solid var(--mw-line); color: var(--mw-green-dark); text-decoration: none; font-weight: 800; white-space: nowrap; }
.reader-article { padding: 28px 24px 36px; }
.reader-article p { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; color: #151a16; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.9; }
.reader-article .occ { color: var(--mw-blue); background: #eaf2ff; border-bottom: 2px solid var(--mw-blue); border-radius: 5px; padding: 0 3px; cursor: pointer; }
.reader-article .occ:hover, .reader-article .occ.active { background: #dbeaff; }
.word-panel { position: sticky; top: 86px; min-height: 260px; padding: 20px; border: 1px solid var(--mw-line); border-radius: 8px; background: #fff; box-shadow: 0 12px 32px rgba(31, 45, 35, .06); }
.word-panel-close { display: none; }
.word-panel-empty { color: var(--mw-muted); line-height: 1.7; }
.word-panel h2 { margin: 0 0 6px; color: var(--mw-green-dark); font-size: 30px; font-weight: 900; }
.word-panel .meaning { margin: 0 0 14px; color: var(--mw-text); font-weight: 700; }
.word-panel .origin { margin: 0 0 16px; color: var(--mw-muted); line-height: 1.7; }
.word-panel button { min-height: 40px; border: 1px solid var(--mw-line); border-radius: 8px; background: #f7fbf8; color: var(--mw-green-dark); font-weight: 800; padding: 0 12px; }
.reader-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; align-items: center; justify-content: center; gap: 18px; padding: 14px 18px env(safe-area-inset-bottom); background: rgba(255, 255, 255, .95); border-top: 1px solid var(--mw-line); box-shadow: 0 -12px 30px rgba(31, 45, 35, .10); }
.reader-cta.show { display: flex; }
.reader-cta-copy { display: grid; gap: 2px; }
.reader-cta-copy strong { color: var(--mw-ink); font-size: 16px; }
.reader-cta-copy strong b { color: var(--mw-green-dark); font-size: 1.18em; font-weight: 900; }
.reader-cta-actions { display: grid; gap: 7px; min-width: 210px; }
.reader-cta-actions .mw-button { width: 100%; }
.reader-memory-button { min-height: 38px; font-size: 14px; box-shadow: none; }

.mw-app-page { background: #f8f7f1; }
.app-home { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 42px 0 90px; }
.native-app-shell .app-home { width: min(100% - 28px, 720px); padding-top: max(22px, env(safe-area-inset-top)); padding-bottom: max(36px, env(safe-area-inset-bottom)); }
.app-hero { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 22px; }
.app-hero h1 { margin: 6px 0; color: var(--mw-ink); font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08; }
.app-hero > div:first-child > p:last-child { margin: 0; color: var(--mw-muted); line-height: 1.7; }
.app-today-time { flex: 0 0 auto; display: grid; gap: 2px; min-width: 142px; padding: 13px 16px; border: 1px solid #dce6dc; border-radius: 13px; background: rgba(255, 255, 255, .76); text-align: right; }
.app-today-time span { color: var(--mw-muted); font-size: 13px; }
.app-today-time strong { color: var(--mw-green-dark); font-size: 18px; }
.app-workbench { display: grid; grid-template-columns: minmax(0, 1.58fr) minmax(290px, .72fr); gap: 18px; align-items: stretch; }
.app-primary-card, .app-route-card { border: 1px solid #d6e2d7; border-radius: 20px; background: #fff; box-shadow: 0 18px 46px rgba(31, 69, 43, .075); }
.app-primary-card { min-height: 390px; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 4vw, 42px); background: radial-gradient(circle at 88% 14%, rgba(226, 241, 229, .9), transparent 37%), linear-gradient(140deg, #fff 0%, #f7fbf7 100%); }
.app-primary-topline { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-return-label, .app-reward-card > div > span { display: inline-flex; width: fit-content; padding: 5px 10px; border-radius: 999px; background: #e3f1e6; color: var(--mw-green-dark); font-size: 13px; font-weight: 850; }
.app-time-chip { color: var(--mw-muted); font-size: 13px; font-weight: 750; }
.app-primary-card h2 { max-width: 680px; margin: 18px 0 7px; color: var(--mw-ink); font-size: clamp(29px, 4vw, 43px); line-height: 1.16; font-weight: 900; }
.app-primary-subtitle { margin: 0; color: #4d6556; font-size: 16px; font-weight: 760; line-height: 1.55; }
.app-story-hook { max-width: 680px; margin: 20px 0 0; color: #4f5e53; font-size: 16px; line-height: 1.75; }
.app-primary-description { margin: 22px 0 0; color: var(--mw-muted); line-height: 1.65; }
.app-stage-progress { width: min(100%, 630px); margin-top: 24px; }
.app-progress-copy { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; color: var(--mw-muted); font-size: 14px; }
.app-progress-copy strong { color: var(--mw-green-dark); }
.app-progress-track, .app-task-progress > div { height: 8px; overflow: hidden; border-radius: 999px; background: #e8ece3; }
.app-progress-track i, .app-task-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #75a584, #3f7e58); }
.app-outcome { display: flex; gap: 8px; margin: 20px 0 0; color: #536b5b; line-height: 1.6; }
.app-outcome span { color: #b77a25; font-weight: 900; }
.app-primary-button { min-width: 176px; margin-top: auto; padding-inline: 24px; }
.app-route-card { display: flex; flex-direction: column; padding: 25px; background: rgba(255, 255, 255, .86); }
.app-route-heading > span, .app-section-kicker { color: #71907a; font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.app-route-heading h2 { margin: 5px 0 0; color: var(--mw-ink); font-size: 21px; }
.app-route-list { display: grid; gap: 0; margin: 25px 0 0; padding: 0; list-style: none; }
.app-route-list li { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 11px; min-height: 68px; }
.app-route-list li:not(:last-child)::after { position: absolute; top: 20px; bottom: 0; left: 7px; width: 1px; background: #dce5dc; content: ""; }
.app-route-dot { position: relative; z-index: 1; width: 15px; height: 15px; margin-top: 2px; border: 3px solid #fff; border-radius: 50%; background: #cbd7cd; box-shadow: 0 0 0 1px #cbd7cd; }
.app-route-list .is-current .app-route-dot { background: #4d8762; box-shadow: 0 0 0 1px #4d8762, 0 0 0 5px rgba(77, 135, 98, .12); }
.app-route-list .is-done .app-route-dot { background: #91ae99; box-shadow: 0 0 0 1px #91ae99; }
.app-route-list small { display: block; margin-bottom: 3px; color: #89928b; font-size: 12px; }
.app-route-list strong { display: block; color: #35443a; font-size: 15px; line-height: 1.45; }
.app-route-list .is-current strong { color: var(--mw-green-dark); }
.app-optional-action { margin-top: auto; padding-top: 18px; }
.app-optional-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; color: #89928b; font-size: 12px; }
.app-optional-divider::before, .app-optional-divider::after { height: 1px; background: #e3e8e1; content: ""; }
.app-optional-action a { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 12px 13px; border-radius: 10px; background: #f3f7f2; color: var(--mw-green-dark); text-decoration: none; }
.app-optional-action a strong { font-size: 14px; }
.app-optional-action a small { color: var(--mw-muted); font-size: 12px; }
.app-assets, .app-task-section { margin-top: 34px; }
.app-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.app-section-heading h2 { margin: 5px 0 0; color: var(--mw-ink); font-size: clamp(22px, 2.5vw, 28px); }
.app-section-heading > a { color: var(--mw-green-dark); font-size: 14px; font-weight: 800; text-decoration: none; }
.app-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.app-proof-card { min-height: 146px; display: flex; flex-direction: column; padding: 20px; border: 1px solid #dfe6de; border-radius: 15px; background: rgba(255, 255, 255, .82); color: inherit; text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.app-proof-card:hover { transform: translateY(-2px); border-color: #bfd2c1; box-shadow: 0 14px 30px rgba(31, 69, 43, .07); }
.app-proof-card > span { color: #688071; font-size: 13px; font-weight: 800; }
.app-proof-card > strong { margin-top: 8px; color: var(--mw-ink); font-size: 30px; line-height: 1; }
.app-proof-card > strong small { color: #617067; font-size: 14px; }
.app-proof-card p { margin: auto 0 0; color: var(--mw-muted); font-size: 13px; line-height: 1.5; }
.app-assets-empty { padding: 22px; border: 1px dashed #cfdace; border-radius: 14px; background: rgba(255, 255, 255, .6); color: var(--mw-muted); line-height: 1.6; }
.app-activity-note { display: flex; justify-content: space-between; gap: 16px; margin: 12px 2px 0; color: #52665a; font-size: 13px; }
.app-activity-note span { color: #89928b; }
.app-task-list { overflow: hidden; border: 1px solid #dde5dd; border-radius: 15px; background: rgba(255, 255, 255, .82); }
.app-task-row { display: grid; grid-template-columns: 88px minmax(180px, 1fr) minmax(180px, .8fr) auto; align-items: center; gap: 18px; padding: 18px 20px; }
.app-task-row + .app-task-row { border-top: 1px solid #e5eae4; }
.app-task-row.is-primary { background: #f4f9f4; }
.app-task-status span { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: #edf3ed; color: #5b7062; font-size: 12px; font-weight: 800; }
.app-task-row.is-primary .app-task-status span { background: #dfeee2; color: var(--mw-green-dark); }
.app-task-copy h3 { margin: 0; color: var(--mw-ink); font-size: 17px; }
.app-task-copy p { margin: 4px 0 0; color: var(--mw-muted); font-size: 13px; }
.app-task-progress > span { display: block; margin-bottom: 7px; color: var(--mw-muted); font-size: 12px; }
.app-task-progress > div { height: 6px; }
.app-task-row > a { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid #cad8cc; border-radius: 8px; background: #fff; color: var(--mw-green-dark); text-decoration: none; font-size: 13px; font-weight: 850; }
.app-task-row.is-primary > a { border-color: var(--mw-green); background: var(--mw-green); color: #fff; }
.app-reward-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding: 20px; border: 1px solid #ead9aa; border-radius: 14px; background: #fffaf0; }
.app-reward-card strong { display: block; margin-top: 9px; color: #65490f; }
.app-reward-card p { margin: 4px 0 0; color: #756540; font-size: 14px; line-height: 1.55; }
.app-reward-card a { flex: 0 0 auto; color: #735616; font-weight: 850; }
.app-shortcuts { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.app-shortcuts a { min-height: 42px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--mw-line); border-radius: 8px; background: #fff; color: var(--mw-green-dark); text-decoration: none; font-weight: 800; }

@keyframes mwFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .mw-reading-demo { animation: none; }
  .mw-button, .mw-mini-cta, .mw-card, .mw-word-chip { transition: none; }
}

@media (max-width: 860px) {
  .mw-nav { height: 58px; padding: 0 14px; }
  .mw-nav-links { display: none; }
  .mw-menu-button { display: inline-grid; }
  .hide-sm { display: none !important; }
  .mw-hero, .promo-hero, .landing-reader { grid-template-columns: 1fr; }
  .mw-hero { min-height: auto; padding-top: 42px; padding-bottom: 46px; }
  .mw-hero::before { white-space: normal; bottom: 6px; }
  .mw-reading-demo { order: 2; }
  .mw-subtitle { max-width: 100%; }
  .mw-grid.three, .mw-feature-list, .mw-flow, .promo-strip { grid-template-columns: 1fr; }
  .mw-section { padding: 58px 16px; }
  .mw-footer { flex-direction: column; }
  .landing-reader { padding: 18px 12px 210px; }
  .word-panel {
    position: fixed;
    top: auto;
    left: 50%;
    right: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 80;
    width: min(calc(100vw - 32px), 340px);
    min-height: 0;
    max-height: min(42vh, 320px);
    overflow: auto;
    padding: 16px;
    border-radius: 15px;
    box-shadow: 0 18px 52px rgba(22, 37, 27, .22);
    transform: translate(-50%, calc(100% + 36px));
    visibility: hidden;
    transition: transform .2s ease, visibility .2s ease;
  }
  .word-panel.is-open { transform: translate(-50%, 0); visibility: visible; }
  .word-panel-close {
    position: absolute;
    top: 9px;
    right: 9px;
    display: block;
    width: 30px;
    min-height: 30px;
    padding: 0;
    border: 1px solid #dbe6dc;
    border-radius: 999px;
    background: #f8fbf8;
    color: transparent;
    box-shadow: none;
  }
  .word-panel-close::before,
  .word-panel-close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    border-radius: 999px;
    background: #52705d;
    content: "";
  }
  .word-panel-close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .word-panel-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .word-panel-close:active { background: #eaf2eb; }
  .word-panel .word-panel-close { height: 30px; min-height: 30px; }
  .word-panel .word-panel-close:hover { border-color: #bfd1c2; background: #f0f6f1; }
  .word-panel h2 { margin-bottom: 3px; padding-right: 34px; font-size: 25px; }
  .word-panel .meaning { margin-bottom: 10px; font-size: 14px; line-height: 1.55; }
  .word-panel .origin { margin-bottom: 12px; font-size: 13px; line-height: 1.55; }
  .word-panel button:not(.word-panel-close) { min-height: 36px; padding: 0 11px; font-size: 13px; }
  .reader-head { flex-direction: column; }
  .reader-cta { align-items: stretch; flex-direction: column; }
  .reader-cta-copy { text-align: center; }
  .reader-cta-actions { width: 100%; min-width: 0; }
  .reader-cta .mw-button { width: 100%; }
  .app-home { width: min(100% - 24px, 720px); padding: 28px 0 64px; }
  .app-hero { align-items: center; margin-bottom: 18px; }
  .app-hero h1 { font-size: 39px; }
  .app-workbench { grid-template-columns: 1fr; }
  .app-primary-card { min-height: 0; padding: 28px; }
  .app-primary-button { margin-top: 26px; }
  .app-route-card { padding: 23px 25px; }
  .app-route-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
  .app-route-list li { grid-template-columns: 16px 1fr; min-height: 0; }
  .app-route-list li:not(:last-child)::after { top: 8px; bottom: auto; left: calc(100% - 1px); width: calc(100% - 20px); height: 1px; }
  .app-route-dot { width: 13px; height: 13px; }
  .app-proof-grid { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; scroll-snap-type: x proximity; }
  .app-proof-card { min-width: min(76vw, 240px); scroll-snap-align: start; }
  .app-activity-note { align-items: flex-start; flex-direction: column; gap: 3px; }
  .app-task-row { grid-template-columns: 1fr auto; gap: 12px 16px; }
  .app-task-status { grid-column: 1; grid-row: 1; }
  .app-task-row > a { grid-column: 2; grid-row: 1; }
  .app-task-copy, .app-task-progress { grid-column: 1 / -1; }
}

@media (max-width: 300px) {
  .mw-brand-label { display: none; }
}

@media (max-width: 480px) {
  .mw-auth { gap: 6px; }
  .mw-button { width: 100%; }
  .mw-actions { width: 100%; }
  .mw-hero h1, .promo-hero h1 { font-size: 42px; }
  .mw-demo-reader p, .promo-reader p { font-size: 18px; }
  .mw-reading-demo { padding: 16px; }
  .app-home { width: calc(100% - 20px); padding-top: 20px; }
  .native-app-shell .app-home { width: calc(100% - 20px); padding-top: max(16px, env(safe-area-inset-top)); }
  .app-hero { align-items: flex-start; flex-direction: column; gap: 11px; }
  .app-hero h1 { margin-top: 4px; font-size: 34px; }
  .app-hero > div:first-child > p:last-child { font-size: 14px; }
  .app-today-time { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; text-align: left; }
  .app-primary-card { padding: 22px; border-radius: 16px; }
  .app-primary-card h2 { margin-top: 15px; font-size: 29px; }
  .app-primary-subtitle, .app-story-hook { font-size: 14px; }
  .app-story-hook { margin-top: 15px; }
  .app-stage-progress { margin-top: 20px; }
  .app-outcome { margin-top: 16px; font-size: 14px; }
  .app-primary-button { width: 100%; margin-top: 22px; }
  .app-route-card { padding: 20px; border-radius: 16px; }
  .app-route-heading h2 { font-size: 19px; }
  .app-route-list { grid-template-columns: 1fr; gap: 0; }
  .app-route-list li { min-height: 58px; }
  .app-route-list li:not(:last-child)::after { top: 18px; bottom: 0; left: 6px; width: 1px; height: auto; }
  .app-assets, .app-task-section { margin-top: 28px; }
  .app-section-heading { align-items: flex-start; }
  .app-section-heading h2 { font-size: 21px; }
  .app-section-heading > a { padding-top: 4px; font-size: 12px; white-space: nowrap; }
  .app-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
  .app-proof-card { min-width: 0; min-height: 136px; padding: 16px; }
  .app-proof-card:nth-child(3):last-child { grid-column: 1 / -1; min-height: 124px; }
  .app-proof-card > strong { font-size: 27px; }
  .app-task-row { padding: 16px; }
  .app-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shortcuts a { justify-content: center; padding: 0 8px; font-size: 13px; text-align: center; }
  .app-reward-card { align-items: flex-start; flex-direction: column; }
  .mw-demo-reader { padding: 14px; }
  .mw-trust-line { width: 100%; justify-content: center; text-align: center; }
}