:root{--brand:#3157a6;--brand-dark:#253f80;--ink:#202738;--muted:#6f7787;--surface:#fff;--bg:#f6f8fc;--soft:#eaf0ff;--ok:#2da56d;--warn:#e58a30;--radius:18px;--shadow:0 10px 30px rgba(24,45,90,.08)}
html{scroll-behavior:smooth} body{min-height:100vh} a{color:inherit}.mock-shell{min-height:100vh;display:flex;flex-direction:column}.mock-main{flex:1;width:min(1180px,92%);margin:0 auto;padding:36px 0 70px}.mock-nav{height:auto;min-height:80px;gap:18px;flex-wrap:wrap}.mock-nav .menu{gap:18px;flex-wrap:wrap}.mock-nav .menu a{padding:10px 4px;border-radius:10px}.mock-nav .menu a[aria-current="page"]{color:var(--brand);font-weight:700}.home-link{text-decoration:none}.nav-link-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:none;padding:12px 18px;border-radius:10px;cursor:pointer;min-height:44px;font:inherit}.nav-login{background:#3157a6;color:#fff}.nav-register{background:#fff;border:1px solid #ddd}.nav-search{background:transparent;border:1px solid #e3e7f0;padding-inline:14px}.page-hero{background:radial-gradient(circle at right top,#dbe7ff,transparent 48%),#fff;border-radius:28px;padding:38px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr);gap:28px;align-items:center}.page-hero h1{font-size:clamp(30px,5vw,48px);line-height:1.15}.page-hero p{margin-top:14px;color:var(--muted);font-size:17px;line-height:1.7}.hero-badge{justify-self:center;width:190px;height:190px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#eef3ff,#fff);font-size:82px;box-shadow:0 15px 50px rgba(49,87,166,.15)}.breadcrumb{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:18px}.breadcrumb a{color:var(--brand);text-decoration:none}.section{margin-top:36px}.section h2{margin-bottom:18px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card{background:#fff;border-radius:18px;padding:22px;box-shadow:0 5px 18px rgba(0,0,0,.06);border:1px solid #eef1f6}.card h3{margin:8px 0}.card p{color:var(--muted);line-height:1.65}.icon{font-size:38px}.card-link{display:block;text-decoration:none;transition:.18s transform,.18s box-shadow}.card-link:hover,.card-link:focus-visible{transform:translateY(-3px);box-shadow:0 12px 30px rgba(30,52,100,.12);outline:3px solid rgba(49,87,166,.18)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 18px;min-height:44px;background:var(--brand);color:#fff;text-decoration:none;cursor:pointer;font:inherit;font-weight:700}.btn.secondary{background:#fff;color:var(--brand);border:1px solid #cfd8ec}.btn.ok{background:var(--ok)}.btn.warn{background:var(--warn)}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.pill-row{display:flex;gap:10px;flex-wrap:wrap}.pill{display:inline-flex;padding:9px 14px;border-radius:999px;background:#fff;border:1px solid #dde4f3;text-decoration:none;font-size:13px}.form-card{max-width:620px;margin:0 auto;background:#fff;border-radius:22px;padding:30px;box-shadow:var(--shadow)}.field{display:grid;gap:7px;margin:16px 0}.field label{font-weight:700}.field input,.field select,.field textarea{width:100%;min-height:46px;border:1px solid #d6dce8;border-radius:12px;padding:12px 14px;font:inherit;background:#fff}.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid rgba(49,87,166,.16);border-color:var(--brand)}.notice{border-radius:14px;padding:14px 16px;background:#edf4ff;color:#27437d;margin:16px 0;line-height:1.55}.notice.success{background:#eaf8f1;color:#226f4d}.notice.error{background:#fff0ee;color:#9a372f}.result-list{display:grid;gap:12px;margin-top:22px}.result-item{background:#fff;border:1px solid #e9edf4;border-radius:15px;padding:18px;text-decoration:none}.result-item:hover{border-color:#9db2df}.tagline{font-size:13px;color:var(--muted)}.progress{height:12px;border-radius:999px;background:#e7ebf3;overflow:hidden}.progress>span{display:block;height:100%;background:var(--brand);width:0;transition:width .2s}.step-list{display:grid;gap:12px}.step{background:#fff;border:1px solid #e7ebf4;border-radius:14px;padding:16px}.step.done{border-color:#8dd5b2;background:#f4fbf7}.quiz-option{display:block;border:1px solid #dfe5ef;background:#fff;padding:13px 15px;border-radius:12px;margin:9px 0;cursor:pointer}.quiz-option:has(input:checked){border-color:var(--brand);background:#f1f5ff}.status-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid #e7ebf4;border-radius:15px;padding:14px 18px;margin-top:20px}.status-strip strong{color:var(--brand)}.mock-footer{background:#253f80;color:#fff;padding:34px 5%;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.mock-footer a{color:#fff}.table-wrap{overflow:auto;background:#fff;border-radius:16px;box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;padding:13px 14px;border-bottom:1px solid #eef1f6}th{background:#f7f9fd}.test-pass{color:#22764f;font-weight:700}.mini{font-size:12px;color:var(--muted)}
/* make original home components interactive without altering original style.css */
.mock-home .category,.mock-home .level-card,.mock-home .content-card{position:relative;transition:.18s transform,.18s box-shadow}.mock-home a.block-link{text-decoration:none;color:inherit;display:block}.mock-home .category:hover,.mock-home .level-card:hover,.mock-home .content-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,45,90,.12)}.mock-home .search-box button{cursor:pointer}.mock-home .more button,.mock-home .feature button{cursor:pointer}.mock-home .feature button a,.mock-home .more button a{color:inherit;text-decoration:none}.mock-home .category{border-radius:14px}.mock-home .levels a{flex:1;display:flex;text-decoration:none;color:inherit}.mock-home .levels a .level-card{width:100%}.mock-home .content-grid a{display:block;text-decoration:none;color:inherit}.mock-home .popular span a{text-decoration:none}.clickable-feature{color:inherit;text-decoration:none}.clickable-feature .feature{height:100%}
@media(max-width:900px){.mock-nav{padding:12px 5%}.mock-nav .nav-buttons{margin-left:auto}.page-hero{grid-template-columns:1fr}.hero-badge{width:140px;height:140px;font-size:64px}.grid{grid-template-columns:1fr 1fr}.mock-main{padding-top:22px}.page-hero{padding:28px}.mock-home .levels a{min-width:40%}}
@media(max-width:600px){.grid{grid-template-columns:1fr}.mock-nav .logo-sub{display:none}.mock-nav .nav-buttons{width:100%;justify-content:stretch}.mock-nav .nav-buttons a{flex:1}.mock-main{width:94%}.form-card{padding:22px}.mock-home .content-grid{grid-template-columns:1fr}.mock-home .levels a{min-width:100%}}

/* R3.5 top-down page completeness patch */
.skip-link{position:fixed;left:12px;top:12px;z-index:9999;padding:10px 14px;border-radius:10px;background:#fff;color:var(--brand);box-shadow:var(--shadow);transform:translateY(-150%);transition:transform .18s}.skip-link:focus{transform:translateY(0)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.eyebrow{margin:0 0 5px;color:var(--brand);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.section-lead{max-width:760px;margin:7px 0 0;color:var(--muted);line-height:1.65}.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.summary-item{display:grid;gap:7px;background:#fff;border:1px solid #e5eaf4;border-radius:16px;padding:18px;box-shadow:0 4px 15px rgba(25,45,88,.04)}.summary-item span{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.summary-item strong{font-size:15px;line-height:1.55;color:var(--ink)}
.journey-cards,.guide-grid,.next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.journey-card,.next-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e5eaf4;border-radius:18px;padding:20px;text-decoration:none;box-shadow:0 5px 18px rgba(25,45,88,.04);transition:.18s transform,.18s box-shadow,.18s border-color}.journey-card:hover,.journey-card:focus-visible,.next-card:hover,.next-card:focus-visible{transform:translateY(-2px);box-shadow:0 12px 28px rgba(25,45,88,.10);border-color:#aebfe6;outline:none}.journey-no,.guide-step>span,.plan-step>span{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--brand);font-weight:800}.journey-card h3,.plan-step h3{margin:0 0 6px}.journey-card p,.plan-step p,.next-card span,.guide-step p{margin:0;color:var(--muted);line-height:1.6}.next-card{position:relative;display:grid;grid-template-columns:1fr auto}.next-card strong{font-size:16px}.next-card span{grid-column:1/2}.next-card b{grid-column:2/3;grid-row:1/3;align-self:center;color:var(--brand);font-size:22px}
.guide-step{display:flex;gap:12px;align-items:flex-start;background:#f9fbff;border:1px solid #e6ebf5;border-radius:16px;padding:18px}.plan-list{display:grid;gap:12px}.plan-step{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e6ebf5;border-radius:16px;padding:18px}.article-outline .outline-card{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);gap:24px;background:#f7f9fd;border:1px solid #e2e8f3;border-radius:18px;padding:22px}.outline-card ol{margin:0;padding-left:22px;display:grid;gap:10px;color:var(--muted);line-height:1.65}.article-body{max-width:860px;margin-left:auto;margin-right:auto}.article-body>p{font-size:16px;line-height:1.85}.article-extra{margin-top:26px;padding-top:22px;border-top:1px solid #edf0f5}.check-list{display:grid;gap:10px;padding-left:20px;color:var(--muted);line-height:1.7}.quick-search{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0}.quick-search span{font-size:13px;color:var(--muted);font-weight:700}.quick-search button{border:1px solid #d9e1ef;background:#fff;color:var(--brand);border-radius:999px;padding:8px 12px;min-height:38px;cursor:pointer;font:inherit}.quick-search button:hover,.quick-search button:focus-visible{border-color:#9cb0da;outline:3px solid rgba(49,87,166,.12)}
@media(max-width:900px){.summary-grid,.journey-cards,.guide-grid,.next-grid{grid-template-columns:1fr 1fr}.article-outline .outline-card{grid-template-columns:1fr}}
@media(max-width:600px){.summary-grid,.journey-cards,.guide-grid,.next-grid{grid-template-columns:1fr}.summary-item,.journey-card,.guide-step,.next-card,.plan-step{padding:16px}.section-head{align-items:flex-start}.article-body{padding:18px}}

[hidden]{display:none!important}
@media(max-width:900px){.mock-nav .menu{display:flex;width:100%;order:3;overflow-x:auto;flex-wrap:nowrap;gap:8px;padding:2px 0 6px;scrollbar-width:none}.mock-nav .menu::-webkit-scrollbar{display:none}.mock-nav .menu a{flex:0 0 auto;white-space:nowrap;padding:9px 12px;background:#f7f9fd;border:1px solid #e7ebf4}.mock-nav .menu a[aria-current="page"]{background:#edf3ff;border-color:#c7d5f3}}

/* R3.5.2 iOS Safari / iPad portrait-landscape compatibility */
html{
  min-height:-webkit-fill-available;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color:rgba(49,87,166,.12);
}
body{
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
}
.mock-shell{min-height:100vh;min-height:100dvh}
a,button,input,select,textarea,label{touch-action:manipulation}
button,input,select,textarea{font-size:16px}
.search-box input,.field input,.field select,.field textarea{font-size:16px}
.btn,.nav-link-button,.mock-nav .menu a,.quick-search button,.pill{min-height:44px}
.quiz-option{min-height:44px;display:flex;align-items:center;gap:8px}
.mock-nav{
  padding-top:env(safe-area-inset-top);
  padding-left:max(5%,env(safe-area-inset-left));
  padding-right:max(5%,env(safe-area-inset-right));
}
.mock-main{
  max-width:calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
}
.mock-footer{
  padding-left:max(5%,env(safe-area-inset-left));
  padding-right:max(5%,env(safe-area-inset-right));
  padding-bottom:calc(34px + env(safe-area-inset-bottom));
}
.mock-home .hero,
.mock-home .categories,
.mock-home .level-section,
.mock-home .popular-content,
.mock-home .features,
.mock-home .why{
  max-width:calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
}
.section.form-card{margin:36px auto 0}
.quiz-actions{align-items:center;row-gap:12px}
#quizScore{color:var(--ink);font-weight:800;min-width:92px}
.quiz-feedback{
  margin-top:16px;
  padding:14px 16px;
  border:1px solid #d7e3f7;
  border-radius:14px;
  font-weight:700;
  line-height:1.55;
}
.quiz-feedback.success{background:#edf8f2;border-color:#cfe8d8;color:#1f6d4a}
.quiz-feedback.info{background:#eef4ff;border-color:#d6e2fa;color:#274b8e}

/* iPad portrait + landscape: avoid squeezed seven-column/menu layouts. */
@media (min-width:901px) and (max-width:1180px){
  .mock-nav{gap:10px}
  .mock-nav .menu{display:flex;width:100%;order:3;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:8px;padding:2px 0 6px;scrollbar-width:none}
  .mock-nav .menu::-webkit-scrollbar{display:none}
  .mock-nav .menu a{flex:0 0 auto;white-space:nowrap;padding:9px 12px;background:#f7f9fd;border:1px solid #e7ebf4}
  .mock-nav .menu a[aria-current="page"]{background:#edf3ff;border-color:#c7d5f3}
  .mock-home .categories{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mock-home .content-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mock-home .why-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .mock-home .hero{padding-left:6%;padding-right:6%}
  .mock-home .hero-image{width:min(340px,36vw)}
}

/* iPhone/iPad narrow portrait: keep controls usable and avoid viewport overflow. */
@media (max-width:600px){
  .mock-main{width:auto;margin-left:max(3%,env(safe-area-inset-left));margin-right:max(3%,env(safe-area-inset-right))}
  .mock-nav .nav-buttons{gap:8px}
  .mock-nav .nav-buttons a{padding-left:10px;padding-right:10px}
  .page-hero{padding:22px}
  .hero-badge{width:112px;height:112px;font-size:52px}
  .actions.quiz-actions{display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .actions.quiz-actions #quizScore{grid-column:1/-1;grid-row:1;text-align:left}
  .actions.quiz-actions .btn{width:100%}
  .quiz-feedback{margin-top:12px}
}

/* Landscape phones: reduce tall decorative areas and preserve content height. */
@media (orientation:landscape) and (max-height:600px){
  .mock-home .hero{min-height:auto;padding-top:28px;padding-bottom:28px}
  .mock-home .hero-image{height:210px}
  .mock-home .students{font-size:78px}
  .page-hero{padding-top:22px;padding-bottom:22px}
  .hero-badge{width:108px;height:108px;font-size:50px}
}

/* 320px Safari flex min-content guard */
.mock-home .hero-text{min-width:0;width:100%}
.mock-home .search-box{max-width:100%}
.mock-home .search-box input{min-width:0;width:0}

/* R3.5.3 desktop header polish + deterministic cache release */
@media (min-width:1181px){
  .mock-nav{
    min-height:76px;
    flex-wrap:nowrap;
    align-items:center;
    gap:12px;
    padding-top:8px;
    padding-bottom:8px;
  }
  .mock-nav .logo{
    flex:0 0 auto;
    min-width:0;
  }
  .mock-nav .menu{
    flex:1 1 auto;
    min-width:0;
    justify-content:center;
    gap:clamp(4px,.65vw,10px);
    flex-wrap:nowrap;
  }
  .mock-nav .menu a{
    flex:0 0 auto;
    white-space:nowrap;
    padding:9px clamp(4px,.45vw,7px);
    font-size:clamp(13px,.98vw,14px);
  }
  .mock-nav .nav-buttons{
    flex:0 0 auto;
    margin-left:0;
    gap:8px;
  }
  .mock-nav .nav-link-button{
    padding:10px 14px;
  }
  .mock-nav .nav-search{
    min-width:52px;
    padding-inline:12px;
  }
}

/* R3.5.3 robust skip-link visibility: hidden until keyboard focus */
.skip-link{
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
  transform:none;
  transition:none;
}
.skip-link:focus{
  width:auto;
  height:auto;
  padding:10px 14px;
  margin:0;
  overflow:visible;
  clip:auto;
  clip-path:none;
  white-space:normal;
}