:root { --ui-scale: 1; }
[hidden] { display: none !important; }
.screen {
  height: 100dvh;
  padding: 0 14px env(safe-area-inset-bottom);
}
#study header { height: 52px; }
.question-nav,.header-actions { display: flex; align-items: center; gap: 3px; }
.question-nav button { display: grid; place-items: center; width: 28px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--green); font-size: 18px; }
.question-nav button[hidden] { display: block !important; visibility: hidden; }
.question-nav .counter { min-width: 43px; text-align: center; }
.header-actions .icon { width: 36px; height: 36px; }
.menu-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--green);
  color: white;
  font-size: 19px;
}
.menu-button:has(img) { padding:0; overflow:hidden; border:0; background:transparent; }
.menu-button img { display:block; width:100%; height:100%; border-radius:22%; object-fit:cover; }
.landing-brand img { display:block; width:38px; height:38px; border-radius:22%; object-fit:cover; box-shadow:0 4px 12px rgba(8,10,9,.16); }
.app-brand { display:flex; align-items:center; gap:10px; }
.app-brand img { width:38px; height:38px; border-radius:22%; object-fit:cover; box-shadow:0 4px 12px rgba(8,10,9,.16); }
.icon.active { background: var(--green); color: white; border-color: var(--green); }
.progress { margin: 0 2px; }
.card {
  padding: calc(11px * var(--ui-scale)) 0 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.card::-webkit-scrollbar { display: none; }
h1 {
  font-size: clamp(17px, calc(2.75vh * var(--ui-scale)), 25px);
  margin-bottom: calc(9px * var(--ui-scale));
}
#picture {
  max-height: min(21vh, 190px);
  margin-bottom: calc(7px * var(--ui-scale));
}
.options {
  gap: calc(6px * var(--ui-scale));
  margin-top: calc(7px * var(--ui-scale));
}
.option {
  min-height: calc(48px * var(--ui-scale));
  padding: calc(7px * var(--ui-scale)) calc(10px * var(--ui-scale));
  gap: calc(8px * var(--ui-scale));
  border-radius: 13px;
  font-size: calc(14px * var(--ui-scale));
}
.option > b {
  width: calc(29px * var(--ui-scale));
  height: calc(29px * var(--ui-scale));
  font-size: calc(13px * var(--ui-scale));
}
.translation-block { margin-top: calc(5px * var(--ui-scale)); }
.interlinear { gap: calc(3px * var(--ui-scale)); margin-bottom: calc(6px * var(--ui-scale)); }
.word-token { padding: calc(3px * var(--ui-scale)) calc(5px * var(--ui-scale)) !important; }
.word-token span { font-size: calc(10px * var(--ui-scale)); }
.word-token small { font-size: calc(8px * var(--ui-scale)); }
.phrase-translation { padding-top: calc(5px * var(--ui-scale)); font-size: calc(11px * var(--ui-scale)); }
.card.show-translation { padding-top: 8px; }
.card.show-translation #picture { max-height: min(15vh, 135px); }
.card.show-translation .options { margin-top: 7px; }
.app-menu { margin: 58px auto auto 12px; width: min(88vw, 340px); border-radius: 18px; }
.app-menu::backdrop { background: rgba(10,25,19,.32); }
.app-menu form { padding: 14px; gap: 7px; }
.app-menu form > button { text-align: left; background: #edf1ec; color: var(--ink); }
.menu-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.menu-title button { border: 0; background: transparent; font-size: 25px; }
.text-size { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.text-size div { display: flex; align-items: center; gap: 7px; }
.text-size button { display: grid; place-items: center; width: 34px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: var(--green); color: white; font-size: 20px; line-height: 1; }
.text-size output { min-width: 42px; text-align: center; font-size: 11px; }
.word-list { flex: 1; }
.question-grid-dialog { width: min(92vw, 410px); max-height: 90dvh; border-radius: 18px; }
.question-grid-dialog::backdrop { background: rgba(10,25,19,.32); }
.question-grid-dialog form { display: flex; flex-direction: column; max-height: calc(90dvh - 32px); padding: 16px; }
.grid-legend { display: flex; gap: 12px; margin-bottom: 13px; color: var(--muted); font-size: 10px; }
.grid-legend span { display: flex; align-items: center; gap: 4px; }
.grid-legend i { width: 9px; height: 9px; border-radius: 3px; background: #edf1ec; }
.grid-legend i.correct { background: #54a878; }
.grid-legend i.wrong { background: #e36e5b; }
.question-grid-items { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; overflow-y: auto; }
.question-grid-items button { aspect-ratio: 1; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #edf1ec; color: var(--ink); font-weight: 750; }
.question-grid-items button.correct { background: #dff3e7; border-color: #54a878; color: #17603a; }
.question-grid-items button.wrong { background: #fde6e1; border-color: #e36e5b; color: #9d3022; }
.question-grid-items button.current { box-shadow: 0 0 0 2px var(--green); }
.question-grid-items button:disabled { opacity: .45; }
.topics-dialog { width: min(94vw, 520px); max-height: 88dvh; border-radius: 18px; }
.topics-dialog::backdrop { background: rgba(10,25,19,.32); }
.topics-dialog form { padding: 16px; }
.topics-list { display: grid; gap: 8px; max-height: 72dvh; overflow-y: auto; }
.topics-list > button { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--ink); text-align: left; }
.topics-list > button span { color: var(--muted); font-size: 10px; }
.topics-list > button i { grid-column: 1/-1; height: 4px; overflow: hidden; border-radius: 4px; background: #edf1ec; }
.topics-list > button i b { display: block; height: 100%; background: #54a878; }
.account-summary { padding:8px 4px 10px; color:var(--muted); font-size:12px; }
.account-summary strong { display:block; color:var(--ink); font-size:14px; }
.locked { opacity:.55; }
.auth-dialog { width:calc(100vw - 32px); max-width:390px; margin:auto; }
.auth-dialog::backdrop { background:#11221c; }
.auth-dialog > div { display:grid; gap:13px; padding:26px; }
.auth-dialog h2,.auth-dialog p { margin:0; }
.auth-dialog p { color:var(--muted); font-size:13px; }
.auth-dialog button { border:0; border-radius:9px; padding:12px; font-weight:700; }
.auth-dialog button:disabled { opacity:.45; }
.auth-title { display:flex; align-items:center; justify-content:space-between; }
.auth-title button { padding:0; width:34px; height:34px; background:#edf1ec; color:var(--ink); font-size:22px; }
.apple-button { background:#000; color:#fff; }
.face-button { background:var(--green); color:#fff; }
.email-login,.email-login>div { display:grid; gap:9px; }
.email-login label { color:var(--ink); font-size:12px; font-weight:750; }
.email-login input { width:100%; box-sizing:border-box; padding:12px 13px; border:1px solid var(--line); border-radius:9px; background:white; color:var(--ink); font:inherit; }
.email-login input:focus { outline:2px solid rgba(20,159,211,.3); border-color:var(--accent); }
.email-login button[type="submit"] { background:var(--accent); color:white; }
.email-login .text-button { padding:5px; background:transparent; color:var(--muted); font-size:12px; }
.email-login p { overflow-wrap:anywhere; }
.auth-divider { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; }
.auth-divider:before,.auth-divider:after { content:""; flex:1; height:1px; background:var(--line); }
.error { color:#b44331 !important; min-height:18px; }
.auth-unavailable { padding:10px; border-radius:9px; background:#edf1ec; color:var(--ink) !important; }
.subscription-dialog p { margin:0 0 8px; color:var(--muted); }
.plans { display:grid; gap:9px; }
.plans button { display:flex; justify-content:space-between; background:white; color:var(--ink); border:1px solid var(--line); }
.plans button strong { color:var(--green); }
.toast { position:fixed; z-index:20; left:50%; bottom:22px; transform:translateX(-50%); padding:11px 15px; border-radius:10px; background:var(--ink); color:white; font-size:13px; max-width:90vw; }
@media (max-height: 700px) {
  #study header { height: 46px; }
  .card { padding-top: 7px; }
  #picture { max-height: 17vh; }
}
.landing { height: 100dvh; min-height: 0; }
.landing-nav > .landing-brand { display:flex; }
.tier-pricing { background:#f7f7f5; }
.pricing-header { max-width:720px; margin:0 auto 58px; text-align:center; }
.pricing-header > span { color:#547166; font-size:11px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.pricing-header h2 { margin:16px 0 12px; font:500 clamp(34px,4.5vw,56px)/1.05 Georgia,serif; letter-spacing:-.045em; }
.pricing-header p { margin:0; color:#6d7d76; font-size:16px; }
.tier-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:16px; max-width:1220px; margin:0 auto; }
.tier-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:28px; border:1px solid #e2e4e1; border-radius:16px; background:white; color:#1f2925; box-shadow:0 12px 30px rgba(16,36,29,.07); }
.tier-card.featured { z-index:1; border-color:#050505; background:#080a09; color:white; box-shadow:0 20px 50px rgba(5,8,7,.26),0 0 0 4px rgba(239,103,70,.28); transform:translateY(-8px); }
.tier-badge { position:absolute; top:14px; right:14px; padding:5px 9px; border-radius:99px; background:#ef6746; color:white; font-size:9px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.tier-card h3 { margin:0; text-align:center; font-size:22px; }
.tier-price { display:flex; align-items:baseline; justify-content:center; margin-top:18px; white-space:nowrap; }
.tier-price strong { font-size:clamp(36px,3vw,48px); line-height:1; font-weight:900; letter-spacing:-.05em; }
.tier-price span { margin-left:5px; color:inherit; font-size:13px; font-weight:600; opacity:.7; }
.tier-card > p { min-height:58px; margin:18px 0 0; text-align:center; color:inherit; font-size:13px; line-height:1.5; opacity:.7; }
.tier-card ul { display:grid; gap:13px; margin:27px 0 0; padding:0; list-style:none; font-size:13px; }
.tier-card li { display:flex; align-items:flex-start; gap:9px; }
.tier-card li i { display:grid; place-items:center; flex:0 0 19px; width:19px; height:19px; border-radius:50%; background:#173f31; color:white; font-size:11px; font-style:normal; font-weight:900; }
.tier-card.featured li i { background:white; color:#080a09; }
.tier-card > button { width:100%; margin-top:auto; padding:13px 15px; border:0; border-radius:10px; background:#080a09; color:white; box-shadow:0 8px 18px rgba(10,15,13,.15); font-weight:800; transition:transform .18s ease,box-shadow .18s ease; }
.tier-card.featured > button { background:white; color:#080a09; }
.tier-card > button:hover { transform:scale(1.025); box-shadow:0 12px 25px rgba(10,15,13,.2); }
.tier-card ul + button { margin-top:30px; }
@media (max-width:1050px) { .tier-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; } .tier-card.featured { transform:none; } }
@media (max-width:600px) { .tier-grid { grid-template-columns:1fr; } .tier-card { padding:26px; } .tier-card > p { min-height:0; } }

/* Unified landing visual language: matches the clean black/white pricing tiers. */
.landing { --land-ink:#151918; --land-green:#080a09; --land-cream:#f7f7f5; background:#f7f7f5; color:#1f2925; }
.landing-nav { position:fixed; top:14px; height:64px; padding:0 18px; border:1px solid #e2e4e1; border-radius:16px; background:rgba(255,255,255,.92); box-shadow:0 10px 30px rgba(16,24,20,.07); backdrop-filter:blur(16px); }
.landing-brand span { background:#080a09; border-radius:10px; }
.landing-nav button,.landing footer button { border:0; background:#080a09; color:white; box-shadow:0 7px 16px rgba(8,10,9,.15); }
.hero { min-height:780px; padding-top:150px; background:radial-gradient(circle at 78% 40%,rgba(239,103,70,.11),transparent 26%),#f7f7f5; }
.hero:after { border-color:rgba(8,10,9,.08); box-shadow:0 0 0 80px rgba(8,10,9,.018),0 0 0 160px rgba(8,10,9,.012); }
.eyebrow,.section-intro>span { color:#68726e; }
.hero h1 em { color:#ef6746; }
.primary-cta,.final-cta button { background:#080a09; box-shadow:0 10px 24px rgba(8,10,9,.18); }
.demo-glow { background:rgba(239,103,70,.16); }
.demo-phone { border-color:#080a09; border-radius:28px; background:white; box-shadow:0 28px 70px rgba(8,10,9,.2); }
.demo-head i { background:#080a09; }
.demo-answer.active { border-color:#ef6746; background:#fff1ed; }
.demo-note { background:#080a09; }
.demo-note>span { background:#ef6746; }
.floating-card { border:1px solid #e2e4e1; border-radius:12px; box-shadow:0 12px 30px rgba(8,10,9,.1); }
.pain-section { background:white; }
.pain-grid { gap:16px; border:0; background:transparent; }
.pain-grid article { min-height:270px; padding:30px; border:1px solid #e2e4e1; border-radius:16px; box-shadow:0 12px 30px rgba(16,36,29,.06); }
.pain-grid article>b { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#080a09; color:white; font:800 12px system-ui,sans-serif; }
.feature-section { background:#f7f7f5; color:#1f2925; }
.section-intro.light>span { color:#68726e; }
.feature-grid { gap:16px; }
.feature-grid article { min-height:260px; padding:30px; border:1px solid #e2e4e1; border-radius:16px; background:white; color:#1f2925; box-shadow:0 12px 30px rgba(16,36,29,.06); }
.feature-grid .feature-large { border-color:#080a09; background:#080a09; color:white; box-shadow:0 20px 48px rgba(8,10,9,.22),0 0 0 4px rgba(239,103,70,.2); }
.feature-grid p,.feature-large p { color:#6c7772; }
.feature-grid .feature-large p { color:#b8bfbc; }
.feature-icon { margin-bottom:40px; border-radius:12px; background:#080a09; color:white; }
.feature-large .feature-icon { background:white; color:#080a09; }
.translation-sample { border:1px solid #303332; border-radius:14px; background:#171918; color:white; box-shadow:none; }
.translation-sample p { color:white; }
.translation-sample div { border-color:#444746; color:#b9c0bd; }
.tier-pricing { border-top:1px solid #e2e4e1; }
.final-cta { background:#080a09; color:white; }
.final-cta>span,.final-cta p { color:#aeb7b3; }
.final-cta button { background:white; color:#080a09; }
.landing footer { border-top:1px solid #292c2b; background:#080a09; }
.landing footer .landing-brand span { background:white; color:#080a09; }
@media(max-width:760px){.landing-nav{top:8px;height:58px}.hero{padding-top:112px}.pain-grid{gap:12px}.feature-grid{gap:12px}}

button:not(:disabled),a[href],[role="button"] { cursor:pointer; }
.landing-nav button { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; min-width:80px; height:42px; box-sizing:border-box; padding:0 20px; overflow:visible; white-space:nowrap; line-height:1; text-align:center; }
.eyebrow span { background:#149fd3; }
.hero h1 em { color:#149fd3; }
.demo-glow { background:rgba(20,159,211,.16); }
.demo-progress i { background:#149fd3; }
.demo-answer.active { border-color:#149fd3; background:#edfaff; }
.demo-note>span { background:#149fd3; }
.feature-grid .feature-large { box-shadow:0 20px 48px rgba(8,10,9,.22),0 0 0 4px rgba(20,159,211,.2); }
.tier-card.featured { box-shadow:0 20px 50px rgba(5,8,7,.26),0 0 0 4px rgba(20,159,211,.3); }
.tier-badge { background:#149fd3; }
.translation-sample i { color:#149fd3; }
:root { --accent:#149fd3; }
.tier-grid { grid-auto-rows:1fr; align-items:stretch; }
.tier-card { height:100%; min-height:470px; }
.tier-card.featured { transform:none; }
.tier-card ul { margin-bottom:30px; }
.tier-card ul + button { margin-top:auto; }
@media(max-width:600px){.tier-card{min-height:460px}}
.translation-sample .landing-interlinear { display:flex; flex-wrap:wrap; align-items:start; justify-content:center; gap:12px; padding:0; border:0; }
.translation-sample .landing-interlinear .word-pair { display:grid; justify-items:center; gap:9px; padding:0; border:0; color:inherit; font-size:inherit; }
.landing-interlinear .word-pair>span { color:#fff; font:600 21px/1.2 Georgia,serif; white-space:nowrap; }
.landing-interlinear button { min-width:100%; padding:8px 12px; border:1px solid #149fd3; border-radius:9px; background:#e7f7fd; color:#096e96; box-shadow:none; cursor:pointer; font:750 12px/1 system-ui,sans-serif; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.landing-interlinear button:hover,.landing-interlinear button.active { border-color:#149fd3; background:#123847; transform:translateY(-2px); }
.translation-sample .landing-phrase { margin:22px 0 0; padding-top:18px; border-top:1px dashed #444746; color:#fff; font:500 20px/1.35 Georgia,serif; text-align:center; }
.footer-meta { display:grid; justify-items:center; gap:7px; }
.footer-meta p { margin:0; }
.legal-links { display:flex; flex-wrap:wrap; justify-content:center; gap:7px 14px; }
.legal-links a { color:#aeb7b3; font-size:11px; text-decoration:none; }
.legal-links a:hover { color:#55c8f3; }
.auth-legal,.subscription-legal { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.45; text-align:center; }
.auth-legal a,.subscription-legal a { color:#087ba5; }
.app-menu .menu-legal { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 12px; padding-top:4px; }
.app-menu .menu-legal a { color:var(--muted); font-size:10px; text-decoration:none; }
.app-menu #delete-account { border-color:#f1c9c3; background:#fff3f1; color:#9d3022; }
@media(max-width:760px){.footer-meta{justify-items:start}.legal-links{justify-content:flex-start}}