.hidden{display:none!important}

/* ---------- header ---------- */

.topbar{
  min-height:78px;
  display:grid;
  grid-template-columns:1fr minmax(260px,420px) 1fr;
  align-items:center;
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(248,246,239,.94);
  border-bottom:1px solid rgba(53,84,109,.12);
}

.exit-link{
  justify-self:end;
  color:var(--ink-soft);
  font-size:10px;
}

.progress-shell{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink-soft);
  font-size:9px;
}

.progress-shell i{
  flex:1;
  height:6px;
  border-radius:999px;
  overflow:hidden;
  background:#e3e9eb;
  box-shadow:inset 0 1px 2px rgba(35,56,75,.05);
}

.progress-shell b{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#718ea2,#92a99c);
  transition:width .3s ease;
}

/* ---------- diagnostic intro ---------- */

.intro-screen{
  min-height:calc(100vh - 78px);
  display:grid;
  grid-template-columns:1.06fr .94fr;
  background:#f8f4ec;
}

.intro-art{
  position:relative;
  min-height:640px;
  overflow:hidden;
  background:#d9e4e9;
}

.art-image{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(40,66,87,.03),rgba(40,66,87,.18)),
    url("images/hero-inference.png") center/cover no-repeat;
  filter:saturate(.72) contrast(.94) brightness(1.07);
}

.art-paper-wash{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%,rgba(250,244,228,.34),transparent 25%),
    radial-gradient(circle at 82% 16%,rgba(124,153,172,.18),transparent 26%),
    linear-gradient(0deg,rgba(43,68,87,.22),rgba(255,255,255,.02) 56%);
}

.art-paper-wash::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.23;
  background:
    repeating-linear-gradient(7deg,rgba(255,255,255,.15) 0 1px,transparent 1px 5px);
  mix-blend-mode:soft-light;
}

.art-copy{
  position:absolute;
  left:clamp(28px,5vw,68px);
  right:50px;
  bottom:62px;
  z-index:2;
  color:#f9f4e8;
}

.art-copy>span{
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}

.art-copy blockquote{
  max-width:620px;
  margin:15px 0 12px;
  font:500 clamp(31px,3.7vw,49px)/1.12 Georgia,serif;
  letter-spacing:-.04em;
}

.art-copy p{
  margin:0;
  color:#e8dcc5;
  font:italic 17px/1.55 Georgia,serif;
}

.intro-content{
  position:relative;
  padding:clamp(60px,7vw,105px) clamp(38px,6vw,90px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 82% 15%,rgba(167,190,205,.16),transparent 22%),
    radial-gradient(circle at 18% 86%,rgba(145,167,153,.10),transparent 24%),
    linear-gradient(180deg,#fbf8f1 0%,#f7f3eb 100%);
}

.intro-content::after{
  content:"";
  position:absolute;
  right:7%;
  bottom:8%;
  width:160px;
  height:90px;
  opacity:.24;
  background:
    linear-gradient(12deg,transparent 46%,rgba(86,113,132,.34) 47% 49%,transparent 50%),
    linear-gradient(-18deg,transparent 46%,rgba(86,113,132,.22) 47% 49%,transparent 50%);
  transform:rotate(-8deg);
  pointer-events:none;
}

.intro-content h1,
.results-screen h1{
  margin:8px 0 18px;
  color:var(--navy-deep);
  font:500 clamp(48px,5.8vw,74px)/.98 Georgia,serif;
  letter-spacing:-.055em;
}

.lead{
  max-width:680px;
  color:var(--ink-soft);
  font:15px/1.82 Georgia,serif;
}

.gentle-note{
  max-width:590px;
  margin:26px 0 4px;
  padding:14px 16px;
  display:flex;
  gap:11px;
  align-items:flex-start;
  border-left:3px solid rgba(111,143,167,.45);
  background:rgba(232,238,237,.62);
  border-radius:0 12px 12px 0;
}

.gentle-note p{
  margin:0;
  color:#617381;
  font:13px/1.6 Georgia,serif;
}

.pencil-star{
  color:#819aa9;
  font-size:16px;
  transform:rotate(-8deg);
}

.intro-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:26px 0;
}

.intro-meta span{
  padding:8px 11px;
  border:1px solid rgba(53,84,109,.12);
  border-radius:999px;
  background:rgba(255,253,249,.62);
  color:#617483;
  font-size:9px;
}

.start-button{
  align-self:flex-start;
  min-width:190px;
  justify-content:space-between;
}

/* ---------- questions ---------- */

.question-screen{
  min-height:calc(100vh - 78px);
  display:grid;
  grid-template-columns:1fr 1fr;
}

.passage-panel{
  position:relative;
  overflow:hidden;
  padding:58px clamp(28px,5vw,72px);
  border-right:1px solid rgba(53,84,109,.12);
  background:
    radial-gradient(circle at 9% 12%,rgba(151,179,198,.23),transparent 25%),
    radial-gradient(circle at 90% 82%,rgba(148,168,153,.15),transparent 23%),
    #eaf0f1;
}

.passage-panel::before{
  content:"";
  position:absolute;
  width:280px;
  height:180px;
  right:-90px;
  bottom:-40px;
  border-radius:50%;
  background:rgba(122,151,169,.08);
  transform:rotate(-14deg);
}

.panel-kicker{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:19px;
}

.tiny-note{
  color:#7a8994;
  font:italic 10px Georgia,serif;
}

.paper-sheet{
  position:relative;
  padding:clamp(28px,4vw,46px);
  border:1px solid rgba(53,84,109,.11);
  border-radius:14px 12px 16px 13px;
  background:
    radial-gradient(circle at 16% 12%,rgba(230,222,205,.25),transparent 20%),
    rgba(255,252,245,.96);
  box-shadow:
    0 16px 38px rgba(59,82,101,.07),
    3px 5px 0 rgba(107,134,151,.035);
  transform:rotate(-.18deg);
}

.paper-sheet::after{
  content:"";
  position:absolute;
  inset:8px;
  pointer-events:none;
  border:1px solid rgba(96,121,138,.04);
  border-radius:11px;
}

.passage-content{
  color:#2c4052;
  font:17px/1.95 Georgia,serif;
}

.passage-content p{margin:0 0 18px}

.margin-note{
  max-width:360px;
  margin:18px 0 0 10px;
  display:flex;
  gap:10px;
  color:#71828e;
}

.margin-note p{
  margin:0;
  font:italic 11px/1.5 Georgia,serif;
}

.scribble{
  color:#758f9f;
  transform:rotate(-9deg);
}

.question-panel{
  position:relative;
  padding:58px clamp(28px,5vw,72px);
  background:
    radial-gradient(circle at 88% 12%,rgba(175,197,210,.13),transparent 22%),
    radial-gradient(circle at 18% 90%,rgba(220,201,186,.11),transparent 20%),
    #fbf8f1;
}

.question-inner{
  max-width:650px;
  margin:0 auto;
}

.question-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#81909a;
  font-size:9px;
}

.skill-label{
  color:var(--blue-dust);
  font-weight:800;
  letter-spacing:.09em;
}

.question-panel h2{
  margin:14px 0 28px;
  color:var(--navy-deep);
  font:500 clamp(27px,3.2vw,36px)/1.25 Georgia,serif;
  letter-spacing:-.02em;
}

.options{
  display:grid;
  gap:11px;
}

.option-button{
  position:relative;
  padding:15px 16px 15px 18px;
  border:1px solid rgba(53,84,109,.13);
  border-radius:12px;
  background:
    radial-gradient(circle at 8% 25%,rgba(216,228,234,.18),transparent 18%),
    rgba(255,253,249,.96);
  text-align:left;
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}

.option-button:hover{
  transform:translateY(-1px);
  border-color:rgba(111,143,167,.42);
}

.option-button.selected{
  border-color:#7e99aa;
  background:
    radial-gradient(circle at 8% 25%,rgba(190,211,222,.28),transparent 20%),
    #eef4f6;
}

.option-button.disabled{
  pointer-events:none;
  opacity:.78;
}

.feedback{
  margin-top:18px;
  padding:15px 16px;
  border-radius:12px;
  font-size:11px;
  line-height:1.65;
  border:1px solid rgba(53,84,109,.08);
}

.feedback.good{
  background:#e7eee8;
  color:#526b5b;
}

.feedback.try{
  background:#f3e9df;
  color:#745f46;
}

.question-actions{
  display:flex;
  gap:8px;
  margin-top:20px;
}

/* ---------- results ---------- */

.results-screen{
  min-height:calc(100vh - 78px);
  padding:82px max(24px,calc((100% - 1050px)/2));
  background:
    radial-gradient(circle at 12% 10%,rgba(168,190,207,.18),transparent 24%),
    radial-gradient(circle at 86% 75%,rgba(147,168,154,.11),transparent 24%),
    #f8f4ec;
}

.results-heading{
  max-width:780px;
}

.results-layout{
  margin-top:38px;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:24px;
  align-items:start;
}

.skill-results{
  padding:8px 24px 18px;
  border:1px solid rgba(53,84,109,.11);
  border-radius:16px;
  background:rgba(255,253,249,.82);
  box-shadow:0 14px 34px rgba(54,78,101,.05);
}

.result-row{
  padding:17px 0;
  border-bottom:1px solid rgba(53,84,109,.09);
}

.result-row:last-child{border-bottom:0}

.result-row>div{
  display:flex;
  justify-content:space-between;
  gap:20px;
}

.result-row strong{
  font:500 15px Georgia,serif;
}

.result-row span{
  color:#7a8994;
  font-size:9px;
}

.result-row i{
  display:block;
  height:6px;
  margin-top:8px;
  border-radius:999px;
  overflow:hidden;
  background:#e4eaec;
}

.result-row b{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#708fa4,#95aa9d);
}

.recommendation-card{
  position:relative;
  overflow:hidden;
  padding:27px;
  border:1px solid rgba(53,84,109,.11);
  border-radius:17px;
  background:
    radial-gradient(circle at 15% 10%,rgba(166,190,204,.22),transparent 24%),
    radial-gradient(circle at 90% 90%,rgba(220,201,185,.15),transparent 22%),
    #eaf0ed;
  box-shadow:0 16px 36px rgba(54,78,101,.06);
}

.recommendation-card::after{
  content:"";
  position:absolute;
  width:130px;
  height:80px;
  right:-20px;
  bottom:-15px;
  opacity:.2;
  background:
    linear-gradient(15deg,transparent 45%,rgba(90,116,133,.35) 46% 48%,transparent 49%),
    linear-gradient(-20deg,transparent 45%,rgba(90,116,133,.22) 46% 48%,transparent 49%);
}

.recommendation-card>span{
  font-size:8px;
  color:#6f8277;
  font-weight:850;
  letter-spacing:.1em;
}

.recommendation-card h2{
  margin:8px 0;
  color:var(--navy-deep);
  font:500 30px/1.15 Georgia,serif;
}

.recommendation-card p{
  margin:0 0 20px;
  color:#667780;
  font-size:11px;
  line-height:1.7;
}

/* ---------- mobile ---------- */

@media(max-width:900px){
  .intro-screen{grid-template-columns:1fr}
  .intro-art{min-height:480px}
  .question-screen{grid-template-columns:1fr}
  .passage-panel{border-right:0;border-bottom:1px solid rgba(53,84,109,.12)}
  .results-layout{grid-template-columns:1fr}
}

@media(max-width:700px){
  .topbar{grid-template-columns:1fr auto}
  .progress-shell{display:none}
  .intro-content{padding:56px 26px 70px}
  .passage-panel,.question-panel{padding:40px 22px}
  .results-screen{padding:60px 22px}
}