:root{--bg:#f7f7f4;--white:#fff;--ink:#17213a;--muted:#607087;--gold:#c59442;--deep:#172642;--border:#e3e6ec;--soft:#f0f3f7;--good:#1c8c69;--bad:#af4b4b;--radius:18px;--shadow:0 18px 45px rgba(27,34,56,.06)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5;color:var(--ink);background:var(--bg)}body{margin:0}.app-shell{max-width:1120px;min-height:100vh;margin:auto;background:var(--white);box-shadow:0 0 70px rgba(45,52,66,.06);display:flex;flex-direction:column}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #e6bd71;outline-offset:2px}.topbar{background:var(--deep);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px clamp(18px,4vw,44px)}.brand{display:flex;align-items:center;gap:10px;cursor:pointer;color:inherit;background:none;border:0;padding:0}.brand-symbol{font-family:Georgia,serif;display:flex;align-items:baseline;justify-content:center;font-size:18px;border:1px solid #a37c46;width:43px;height:43px;border-radius:12px;line-height:43px}.brand-text{font-size:17px;font-weight:750;letter-spacing:.085em}.gold{color:#eec676}.topbar-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.pill{border-radius:80px;padding:6px 10px;font-size:10px;line-height:1.2;font-weight:800;letter-spacing:.07em;border:1px solid #53617b;color:#dae2ee;white-space:nowrap}.pill-preview{color:#f3daac;border-color:#7b694d}.status-dot{background:#64caab;display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}.tabs{display:flex;gap:4px;align-items:center;justify-content:center;padding:13px 18px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:thin}.tab{background:none;color:#647288;border:0;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:700;white-space:nowrap}.tab.active,.tab:hover{background:#eff2f6;color:var(--deep)}.content{width:100%;max-width:960px;margin:0 auto;padding:clamp(22px,4vw,44px) clamp(18px,4vw,38px);flex:1}.footer{padding:16px clamp(18px,4vw,44px);border-top:1px solid var(--border);font-size:11px;color:#8793a5;display:flex;gap:12px;justify-content:space-between}.hero{max-width:780px;margin:auto}.eyebrow{color:#aa7c39;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}.hero h1{font-size:clamp(28px,4.5vw,45px);font-weight:790;line-height:1.16;letter-spacing:-.038em;max-width:750px;margin:0 0 16px}.hero .lead{font-size:clamp(17px,2.6vw,21px);color:var(--muted);line-height:1.55;margin:0 0 26px}.hero p:not(.eyebrow):not(.lead){font-size:16px;line-height:1.7;color:#44536b}.emphasis{color:var(--ink);font-weight:760}.brand-duo{display:flex;align-items:flex-end;gap:32px;justify-content:center;background:linear-gradient(160deg,#f6f2e9,#f4f7fb);border:1px solid #ebe9e3;border-radius:20px;padding:13px 10px 9px;margin:20px auto 24px;max-width:580px}.brand-duo figure{margin:0;text-align:center;width:42%;max-width:205px}.brand-duo img{display:block;margin:auto;width:clamp(112px,19vw,175px);height:clamp(112px,19vw,175px);object-fit:contain}.brand-duo figcaption{font-weight:750;font-size:17px;letter-spacing:.045em;color:#34435d;margin-top:-3px}.buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.btn{background:#243956;border:1px solid #243956;color:white;border-radius:12px;font-size:15px;font-weight:730;min-height:47px;padding:11px 22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,background .15s}.btn:hover{background:#314f77;transform:translateY(-1px)}.btn:disabled{opacity:.46;cursor:not-allowed;transform:none}.btn.ghost{background:white;color:#33415a;border-color:#cbd4e0}.btn.ghost:hover{background:#f5f7fa}.btn.gold-btn{background:#b88337;border-color:#b88337}.btn.gold-btn:hover{background:#a3722d}.card{border-radius:var(--radius);border:1px solid var(--border);background:white;box-shadow:var(--shadow);padding:clamp(16px,2.6vw,26px)}.soft-card{background:#f7f8fa;border:1px solid #e8eaef;border-radius:14px;padding:17px}.section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:22px}.section-title{font-size:clamp(25px,3.2vw,33px);line-height:1.22;letter-spacing:-.025em;margin:0 0 7px}.section-desc{font-size:14px;color:#68768b;margin:0}.stepper{display:flex;gap:8px;align-items:center;justify-content:center;margin:2px 0 22px}.step{height:6px;width:50px;border-radius:20px;background:#e7eaf1}.step.filled{background:#bf944f}.hero-number{font-size:clamp(42px,8vw,72px);letter-spacing:.07em;font-variant-numeric:tabular-nums;font-weight:800;text-align:center;line-height:1.17;margin:12px 0}.triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:21px 0}.memage-card{border:1px solid #e4e8ee;border-radius:16px;background:linear-gradient(165deg,#fff,#f7f9fb);padding:14px 10px 16px;text-align:center;min-width:0}.memage-code{font-size:31px;line-height:1.2;color:#1a3558;font-weight:800;font-variant-numeric:tabular-nums}.memage-card img{height:clamp(125px,22vw,195px);width:100%;object-fit:contain;display:block;margin:auto}.memage-name{font-size:14px;font-weight:800}.small-label{font-size:12px;color:#778398}.helper{color:#667488;font-size:13px}.center{text-align:center}.story-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(210px,.85fr);align-items:center;gap:26px}.story-img{width:100%;max-width:530px;max-height:530px;object-fit:contain;display:block;margin:auto}.story-text{font-size:17px;color:#4a5a70;line-height:1.7}.story-text strong{color:#1d314b}.story-focus{font-weight:780;font-size:18px}.stat-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}.stat-strip span{font-size:12px;font-weight:700;color:#748198;border:1px solid #e4e9f0;background:#fafbfc;border-radius:50px;padding:6px 10px}.quiz-form{max-width:580px;margin:20px auto}.answer-input{font-size:30px;line-height:1.2;letter-spacing:.2em;text-align:center;width:100%;border:2px solid #c8d2de;padding:14px;border-radius:14px;color:#1e314d;outline:none}.answer-input:focus{border-color:#b28b51}.quiz-feedback{margin-top:15px;padding:13px 16px;border-radius:12px;font-weight:640;font-size:14px}.quiz-feedback.success{background:#e8f8f1;color:#147550}.quiz-feedback.fail{background:#fff0ef;color:#9c3333}.scene-on-quiz{max-width:450px;width:100%;max-height:390px;object-fit:contain;display:block;margin:auto}.success-badge{font-size:40px;text-align:center;margin:15px 0 7px}.row-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.menu-card{border:1px solid #e4e9ef;padding:20px;border-radius:15px;background:white;transition:background .15s;cursor:pointer}.menu-card:hover{background:#f6f8fa}.menu-card h3{margin:0 0 5px;font-size:19px}.menu-card p{margin:0;color:#6a7b90;font-size:13px}.feature-no{font-size:11px;font-weight:800;color:#b48b49;letter-spacing:.1em;margin-bottom:8px}.catalog-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:15px}.search{background:#fff;border:1px solid #cdd6e0;border-radius:11px;padding:11px 13px;min-width:210px;flex:1;outline:none}.search:focus{border-color:#b48b49}.switcher{display:flex;background:#eff2f6;padding:4px;border-radius:11px;gap:4px}.switcher button{background:none;border:none;border-radius:8px;color:#69768a;font-size:12px;font-weight:750;padding:8px 12px}.switcher button.on{background:#fff;color:#1d3251;box-shadow:0 1px 4px #ccd3df}.catalog-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.catalog-item{padding:12px;border:1px solid #e4e8ef;border-radius:12px;display:flex;gap:10px;align-items:center;min-width:0;background:#fff}.catalog-item img{width:67px;height:67px;object-fit:contain;flex:none}.catalog-item .placeholder{border-radius:10px;background:#f2f4f7;color:#a3adbb;height:55px;width:55px;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}.catalog-code{font-size:17px;font-weight:800;color:#243b59}.catalog-word{font-size:13px;font-weight:650;max-width:135px;overflow-wrap:anywhere}.catalog-meta{font-size:10px;color:#8490a0}.digit-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.digit-tile{padding:15px 9px;background:linear-gradient(140deg,#fff,#f3f6f9);text-align:center;border:1px solid var(--border);border-radius:14px}.digit-tile .d{font-size:28px;font-weight:850}.digit-tile .letter{font-size:25px;color:#af8348;font-weight:750}.digit-tile .hint{font-size:11px;color:#667588;margin-top:3px;line-height:1.3}.digit-play{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:18px 0}.digit-play button{min-width:63px;min-height:54px;font-size:22px}.quiz-panel{max-width:730px;margin:auto}.quiz-target{min-height:260px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#faf9f5,#f2f6fc);border-radius:20px;border:1px solid var(--border);padding:15px}.quiz-target img{height:260px;max-width:100%;object-fit:contain}.quiz-target .letter-question{font-size:96px;color:#1e3758;font-weight:850}.recall-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.recall-choices .btn{font-size:20px;min-height:64px}.learn-panel{border-radius:14px;background:#f4f7fa;padding:18px;margin-top:16px;border-left:4px solid #c2914b}.learn-panel h3{margin:0 0 10px}.word-coding{font-size:21px;letter-spacing:.12em;font-weight:750}.word-coding mark{color:#9b5f22;background:#f9eacb;padding:0 2px;border-radius:2px}.glossary dt{font-weight:800;margin-top:13px}.glossary dd{margin:5px 0 11px;color:#56677e}.note{font-size:12px;color:#8390a2;padding:14px;background:#f8f9fb;border-radius:11px}.thermometer{height:9px;width:100%;background:#e8edf3;border-radius:9px;overflow:hidden;margin-top:4px}.thermometer div{height:100%;background:linear-gradient(90deg,#d6b572,#669ca4);border-radius:9px}.chip{display:inline-block;padding:3px 7px;background:#eef2f7;border-radius:7px;font-size:11px;font-weight:750;color:#59687b}.account-value{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;overflow-wrap:anywhere}.spacer-sm{height:8px}.spacer{height:18px}.hidden{display:none!important}@media(max-width:760px){.topbar{padding:13px 16px}.tabs{justify-content:flex-start;padding:8px 10px}.tab{padding:8px 11px}.content{padding:23px 16px}.brand-text{font-size:15px}.pill-preview{display:none}.story-grid{grid-template-columns:1fr;gap:4px}.story-img{max-height:380px}.story-text{font-size:15px}.catalog-list{grid-template-columns:repeat(2,minmax(0,1fr))}.digit-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.digit-tile{padding:11px 2px}.digit-tile .d{font-size:23px}.digit-tile .letter{font-size:22px}.digit-tile .hint{display:none}.footer{flex-wrap:wrap}.brand-duo{gap:15px}.memage-card{padding:6px}.memage-code{font-size:24px}.memage-card img{height:clamp(105px,27vw,160px)}.memage-name{font-size:12px}}@media(max-width:445px){.catalog-list,.row-cards{grid-template-columns:1fr}.topbar-right{gap:4px}.guest{padding:5px 8px}.triptych{gap:5px}.memage-card img{height:105px}.memage-name{font-size:11px}.hero h1{font-size:29px}.hero .lead{font-size:16px}.btn{width:100%}.buttons{flex-direction:column}.recall-choices .btn{width:auto}.brand-duo img{width:120px;height:120px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

.thermometer{margin-top:7px;height:9px;background:#e9edf1;border-radius:20px;overflow:hidden;width:100%;max-width:220px}.thermometer span{height:100%;display:block;background:linear-gradient(90deg,#eab97a,#4fba8a);border-radius:20px;transition:width .2s}

.catalog-button{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;transition:background .15s,border-color .15s}
.catalog-button:hover{background:#f6f8fb;border-color:#bdc8d7}
.detail-layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:28px;align-items:center;margin-top:20px}
.detail-image{width:100%;max-width:300px;height:auto;display:block;object-fit:contain;background:#f8f9fb;border-radius:18px}
.missing-image{background:#f6f7f9;border:1px dashed #c2c9d2;border-radius:18px;min-height:260px;display:grid;place-items:center;padding:20px;color:#748199;text-align:center}
@media(max-width:620px){.tabs{flex-wrap:wrap;overflow:visible;justify-content:center;padding:7px 10px;gap:2px}.tab{flex:1 1 30%;font-size:12px;padding:8px 7px}.detail-layout{grid-template-columns:1fr}.detail-image{margin:auto;max-width:250px}}

/* Onboarding v02: no introductory menu or start buttons, lesson follows text. */
.intro-compact h1{font-size:clamp(21px,2.5vw,26px);line-height:1.25;letter-spacing:-.018em;max-width:760px;margin-bottom:12px}
.intro-compact .lead{font-size:16px;line-height:1.55;margin-bottom:15px}
.intro-compact p:not(.eyebrow):not(.lead){font-size:15px;line-height:1.6;margin-bottom:14px}
.intro-compact .brand-duo{margin:12px auto 15px;max-width:515px}
.intro-compact .brand-duo img{width:clamp(110px,17vw,145px);height:clamp(110px,17vw,145px)}
.intro-images{max-width:780px;margin:12px auto 0;padding-top:14px;border-top:1px solid #e8ebf0}
.intro-images .section-title{font-size:clamp(19px,2.5vw,25px)}
.intro-images .triptych{margin:12px 0}
.intro-images .hero-number{font-size:clamp(26px,4vw,41px);margin:4px 0}
.intro-images .next-step{margin-top:18px}
@media(max-width:445px){.intro-compact h1{font-size:21px}.intro-compact .lead{font-size:15px}.intro-compact .brand-duo img{width:112px;height:112px}}

/* First lesson emphasis and the approved Anubis 28 thumbnail in the header. */
.brand-logo{display:block;width:52px;height:52px;object-fit:contain;flex:none}
/* V13: Slightly larger header Anubis logo on PCs only. */
@media (min-width:761px){.brand-logo{width:62px;height:62px}}
.intro-compact .lead.secret-copy{color:var(--color-text-subtle,#775D41);font-weight:650}

/* Keep the two three-digit groups visually close, without middle dots. */
.hero-number.grouped-number{letter-spacing:0;white-space:nowrap}
.digit-group-gap{display:inline-block;width:.13em}
/* Units sit with the speed-of-light number, not in the hint below. */
.speed-unit{display:inline-block;font-size:.42em;font-weight:700;letter-spacing:0;white-space:nowrap;margin-left:.22em;vertical-align:baseline}

/* The approved mnemonic scene is visible directly above the speed-of-light number. */
.intro-scene{display:block;width:100%;max-width:470px;height:auto;max-height:430px;object-fit:contain;margin:0 auto 6px}
@media(max-width:445px){.intro-scene{max-height:350px}}

/* Short visual memory hints for the three approved first-lesson Memages. */
.memage-hint{font-size:12px;line-height:1.25;font-weight:700;color:var(--color-orange,#C27427);margin-top:5px;min-height:30px;display:flex;align-items:center;justify-content:center;text-wrap:balance}
@media(max-width:445px){.memage-hint{font-size:11px;min-height:32px}}

/* V10: Explanation immediately above the lesson confirmation action. */
.recall-promise {color:var(--color-text-subtle,#775D41);text-align:center;font-size:15px;line-height:1.55;max-width:650px;margin:22px auto 10px;padding:0 10px;text-wrap:pretty}
@media(max-width:445px){.recall-promise{font-size:14px;margin-top:18px}}

/* V12: Retrieval exercise and memory advice on the same story screen. */
.memory-principle {
  max-width: 820px;
  margin: 24px auto 20px;
  padding: 17px 20px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-orange);
  border-radius: 12px;
  background: var(--color-paper);
  color: var(--color-text);
}
.memory-principle h3 {
  margin: 0 0 8px;
  color: var(--color-heading);
  font-size: 19px;
  line-height: 1.35;
}
.memory-principle p { margin: 8px 0; font-size: 14px; line-height: 1.6; }
.memory-principle p:last-child { margin-bottom: 0; }
.story-recall { max-width: 620px; margin: 24px auto 4px; }
.story-recall h3 { text-align: center; color: var(--color-heading); font-size: 21px; margin: 0 0 7px; }
.story-recall .quiz-form { margin: 15px auto 0; }
.story-recall .answer-input { letter-spacing: .14em; }
@media(max-width:445px) {
  .memory-principle { padding: 15px 16px; margin-top: 16px; }
  .memory-principle h3 { font-size: 17px; }
  .memory-principle p { font-size: 13px; }
  .story-recall h3 { font-size: 20px; }
}


/* V15: optional visual-detail recall, on the completed lesson screen. */
.detail-quiz {
  margin: 26px auto 0;
  max-width: 680px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-paper);
  text-align: center;
}
.detail-quiz .eyebrow {margin: 0 0 5px}
.detail-quiz h2 {font-size:clamp(19px, 2.4vw, 23px);margin:0 0 8px;color:var(--color-heading);line-height:1.3}
.detail-quiz .detail-quiz-description {font-size:14px!important;line-height:1.5!important;color:var(--color-text-subtle)!important;margin:0 0 18px}
.detail-quiz .detail-progress {font-size:11px!important;letter-spacing:.12em;font-weight:800;color:var(--color-orange)!important;margin:0 0 6px;line-height:1.4!important}
.detail-quiz h3 {font-size:clamp(17px, 2.2vw, 21px);color:var(--color-heading);margin:0 0 14px;line-height:1.35}
.detail-quiz h3:focus{outline:none}
.detail-choices {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
.detail-choice.btn {min-width:0;min-height:55px;white-space:normal;line-height:1.35;padding:11px 12px;font-size:14px}
.detail-choices:has(.detail-choice:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.detail-quiz .detail-feedback{font-size:13px!important;font-weight:700;line-height:1.4!important;border-radius:9px;padding:8px 11px;margin:0 auto 14px;max-width:500px}
.detail-feedback.right {color:var(--color-success)!important;background:var(--color-card)}
.detail-feedback.wrong {color:var(--color-danger)!important;background:var(--color-card)}
.detail-quiz-finish {padding:10px 0 2px}
.detail-quiz-finish h3{margin-bottom:7px}
.detail-quiz-finish p{font-size:14px!important;line-height:1.55!important;color:var(--color-text-subtle)!important;margin:0}
@media(max-width:445px){
  .detail-quiz{padding:17px 12px;margin-top:22px}
  .detail-choices{gap:7px}
  .detail-choice.btn{padding:10px 6px;font-size:13px;min-height:55px;width:auto}
  .detail-quiz .detail-quiz-description{font-size:13px!important}
}