@font-face{font-family:Academy;src:url(art/arabic.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Academy;src:url(art/arabic-bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:AcademyTitle;src:url(art/title.woff) format("woff");font-weight:700;font-display:swap}
:root{color-scheme:dark;--ink:#291d32;--cream:#fff8ed;--gold:#f4cf94;--soft:#d9c2de;--muted:#bba7c8;--line:#d5ad773c;--title:AcademyTitle,Georgia,serif;--sans:Academy,Tahoma,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 13% 20%,#493052 0,transparent 40%),radial-gradient(ellipse at 85% 90%,#32223e 0,transparent 52%),#1e122b;color:var(--cream);font:400 16px/1.65 var(--sans)}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b487de;outline-offset:3px}
button,input,textarea{-webkit-tap-highlight-color:transparent}
button{min-height:46px}
img{display:block;max-width:100%}
h1,h2,h3,p,figure{margin:0}
.shell{width:min(1224px,calc(100% - 72px));margin-inline:auto}
.site-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:84px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}
.brand strong,.brand span{display:block;line-height:1.55}
.brand strong{font-size:15px}
.brand span{color:var(--soft);font-size:11px}
.edition,.eyebrow,.cover-caption,.site-foot{font-size:12px;letter-spacing:.02em}
.edition{color:var(--gold);border:1px solid var(--line);padding:7px 13px;border-radius:999px;white-space:nowrap}
#view{flex:1;padding-block:34px 38px}
.site-foot{padding-block:16px 19px;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);color:var(--muted)}
.hero{position:relative;isolation:isolate;display:grid;align-items:center;justify-items:start;aspect-ratio:3/2;overflow:hidden;border:1px solid #bd926c68;border-radius:25px;background:#35213f;box-shadow:0 22px 72px #10081865}
.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;width:min(100%,405px);padding:clamp(24px,3.5vw,50px)}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--gold);font-weight:700}
.diamond{display:inline-block;width:7px;height:7px;transform:rotate(45deg);background:var(--gold);flex:none}
h1,h2,h3{font-family:var(--title);font-weight:700;line-height:1.25}
.hero h1{font-size:clamp(43px,4.4vw,64px);margin-top:11px}
.hero-subtitle{font-family:var(--title);font-weight:700;color:var(--gold);font-size:clamp(21px,2.1vw,28px);margin-top:3px;line-height:1.3}
.hero-intro{color:var(--soft);font-size:14px;margin-top:15px;line-height:1.95;max-width:355px}
#start-form{display:grid;gap:9px;margin-top:24px;max-width:355px}
#start-form label{color:var(--cream);font-size:13px}
input,textarea{width:100%;padding:9px 13px;border:1px solid #8e7599;border-radius:10px;background:#1c1328;color:var(--cream);min-height:46px}
input::placeholder,textarea::placeholder{color:#b8a5c3}
.primary,.secondary,.subtle{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:10px;padding:8px 19px;font-weight:700;font-size:14px;border:1px solid transparent;line-height:1.55}
.primary{background:linear-gradient(110deg,#f8d8a6,#eaba80);color:#2a1733;box-shadow:0 4px 15px #10091b22}
.primary:hover:not(:disabled){background:#ffe0ab}
.primary:disabled{opacity:.5;box-shadow:none}
.secondary,.subtle{color:var(--cream);background:#392749;border-color:#9b7d9d70}
.secondary:hover,.subtle:hover{background:#503459}
.subtle{background:transparent}
.cover-caption{margin-top:20px;display:flex;align-items:center;gap:9px;color:var(--muted)}
.cover-caption span{width:4px;height:4px;border-radius:50%;background:#c49468}
.hero-art{position:absolute;inset:0;overflow:hidden}
.hero-art>img{width:100%;height:100%;object-fit:cover}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,#1f1329f7 0%,#1f1329e8 20%,#1f132998 32%,#1f13291a 45%,transparent 57%);pointer-events:none}
.hero-art figcaption{display:flex;align-items:center;gap:9px;position:absolute;z-index:1;bottom:13px;left:13px;border:1px solid #e6c4a564;background:#28192ce6;border-radius:999px;padding:5px 12px;color:var(--cream);font-size:11px}
.crown{display:flex;align-items:center;gap:9px;color:var(--gold);font-size:12px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap}
.crown svg{width:19px;height:19px;display:block}
.stars{display:flex;gap:3px;direction:rtl}
.stars svg{width:15px;height:15px;fill:none;stroke:#b9a0b5;stroke-width:1.35}
.stars .earned{fill:var(--gold);stroke:var(--gold);filter:drop-shadow(0 0 5px #ffba7b85)}
.map-head{text-align:center;max-width:660px;margin:0 auto 25px}
.map-head .eyebrow{justify-content:center}
.map-head h1,.finish-head h1{font-size:clamp(40px,5.8vw,69px);margin-top:7px}
.map-head p,.finish-head p{color:var(--soft);font-size:14px;margin-top:5px}
.map-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:24px}
.station-card{display:flex;flex-direction:column;overflow:hidden;border-radius:16px;border:1px solid #9e7d927c;background:#2d2039;min-width:0}
.station-card.current{border-color:#e1af7b;box-shadow:0 0 0 1px #e1af7b55}
.station-art{height:auto;aspect-ratio:1.65;position:relative;overflow:hidden}
.station-art img{width:100%;height:100%;object-fit:cover}
.station-art::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,#210f2f73)}
.station-number{position:absolute;z-index:1;bottom:9px;right:10px;border-radius:50%;width:32px;aspect-ratio:1;display:grid;place-items:center;border:1px solid #eed5a17b;background:#2e1e37;color:var(--gold);font-size:12px}
.station-copy{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:13px;flex:1}
.station-copy h2{font-size:clamp(21px,2.25vw,32px)}
.station-copy p{font-size:12px;color:var(--soft);margin-bottom:8px}
.station-copy button{margin-top:auto;width:100%;padding-inline:6px}
.station-copy button:disabled{background:#30253c;color:#c2afcb;border-color:#b9a0b544}
.map-actions,.finish-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.trail{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-bottom:13px}
.trail .subtle{padding-inline:12px}
.trail>span{font-size:12px;color:var(--soft)}
.challenge-layout{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(235px,.47fr);gap:17px;align-items:start;min-height:490px;padding:17px;overflow:hidden;border:1px solid #bd926c68;border-radius:24px;background:#35213f}
.challenge-backdrop{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover}
.challenge-layout::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#23142b0d 22%,#23142b8a 100%);pointer-events:none}
.challenge-graduates{position:absolute;z-index:-1;bottom:105px;left:2%;width:29%;height:calc(100% - 128px);object-fit:contain;object-position:center bottom;filter:drop-shadow(0 4px 12px #221526ad)}
.scene{align-self:end;padding:14px 17px;border:1px solid #d2a68080;border-radius:15px;background:#271931e8}
.scene h2{font-size:30px;margin:5px 0}
.scene p{color:var(--soft);font-size:13px}
.quiz{position:relative;isolation:isolate;background:#fff8edf5;color:var(--ink);border-radius:19px;padding:clamp(16px,3vw,33px);min-width:0;box-shadow:0 12px 45px #160e2470;color-scheme:light}
.quiz::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:url(art/graduates.webp) left 16px bottom 8px / min(68%,340px) auto no-repeat;opacity:.13}
.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#62456c;font-size:12px;font-weight:700}
.step-list{display:flex;gap:4px}
.step-list i{display:block;width:16px;height:5px;border-radius:8px;background:#e1d0e4}
.step-list .active{background:#78528f}
.step-list .done{background:#ac6b29}
.quiz h2{font-size:clamp(24px,3.1vw,36px);margin:13px 0 10px;line-height:1.35}
.formula{display:grid;place-items:center;text-align:center;min-height:68px;border:1px solid #dfcbe4;background:#f2e9f4ce;border-radius:12px;padding:9px 4px;margin:12px 0}
.math{unicode-bidi:isolate;display:inline-block;white-space:nowrap;direction:ltr;font:500 clamp(16px,2.1vw,23px)/1.25 Georgia,"Times New Roman",serif;vertical-align:middle}
.formula>.math{font-size:clamp(18px,2.8vw,30px)}
.math sup{font-size:.65em}
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;align-items:stretch;text-align:center;line-height:1.1;margin-inline:.19em;vertical-align:middle}
.frac>span{padding:.12em .25em}
.frac>span:first-child{border-bottom:1.25px solid currentColor}
.radical{display:inline-flex;align-items:stretch;margin-left:.14em;vertical-align:middle}
.radical>span:first-child{align-self:end;font-size:1.92em;line-height:.9;margin-right:-.07em}
.radical>span:last-child{border-top:1.25px solid currentColor;padding:.02em .12em}
.blank{color:#674480;font-family:var(--sans);border:1px dashed #8768a1;padding:0 .36em;border-radius:5px;margin-inline:.2em}
.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.option,.slot{min-width:0;min-height:58px;border:1px solid #d9c8dc;background:#fffdfad4;color:#302137;border-radius:10px;padding:8px;display:flex;justify-content:center;align-items:center;gap:8px;font-size:14px;line-height:1.5;text-align:center}
.option>.math+.math{display:block}
.option:has(.math+.math){flex-direction:column;gap:3px}
.option:hover:not(:disabled),.slot:hover:not(:disabled){border-color:#82519c;background:#f3e9f6}
.option[aria-pressed=true],.option.selected,.slot.selected{background:#eaddf2;border-color:#754d8f;box-shadow:inset 0 0 0 1px #754d8f}
.option.right,.slot.right{background:#e3f0e5;border-color:#48805b;box-shadow:inset 0 0 0 1px #48805b;color:#234b32}
.option.wrong,.slot.wrong{background:#fbe5e4;border-color:#a24f57;box-shadow:inset 0 0 0 1px #a24f57;color:#68232e}
.option:disabled:not(.right):not(.wrong){opacity:.79}
.option:disabled.used{opacity:.5}
.quiz-note{font-size:12px;color:#644b70;margin:8px 0}
.placements{display:grid;gap:7px}
.match-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px;align-items:center;border-bottom:1px solid #e9dce9;padding-bottom:7px}
.row-label{font-size:12px;font-weight:700;text-align:center;color:#594464}
.slot{min-height:49px;color:#6c5576;border-style:dashed;padding:6px}
.slot.filled{border-style:solid}
.quiz-actions{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:14px}
.quiz-actions .primary{background:#65427d;color:white;box-shadow:none}
.quiz-actions .primary:hover:not(:disabled){background:#4f3167}
.quiz-actions .subtle{border-color:#c5accb;color:#543b61;padding-inline:12px}
.quiz-actions .subtle:hover{background:#eee1f0}
.feedback{margin-top:12px;border-radius:9px;padding:9px 12px;font-size:13px;background:#f8e9e6;color:#632631;border:1px solid #eac2bc}
.feedback.success{background:#e8f1e5;border-color:#b8d4bd;color:#254d35}
.feedback strong{display:block}
.reward{max-width:680px;margin:auto;text-align:center;border-radius:23px;border:1px solid #d6a77578;overflow:hidden;background:#332341}
.reward img{width:100%;height:clamp(180px,33vw,295px);object-fit:cover;object-position:center 35%}
.reward-body{padding:24px 16px 30px}
.reward h1{font-size:clamp(39px,6vw,64px);margin-bottom:5px}
.reward p{color:var(--soft);margin:7px 0 15px}
.reward .eyebrow{justify-content:center;margin-bottom:8px}
.finish-head{text-align:center;margin-bottom:19px}
.finish-head .eyebrow{justify-content:center}
.certificate{width:min(920px,100%);aspect-ratio:1.58;margin:0 auto 15px;position:relative;container-type:inline-size;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 55% 23%,#694579,#3d2453 65%,#291736);color:#fff4e7;display:grid;place-items:start center;text-align:center}
.certificate::before,.certificate::after{content:"";position:absolute;inset:3%;border:2px solid #d4ab73;pointer-events:none}
.certificate::after{inset:4%;border:1px solid #d4ab73a8}
.cert-art{position:absolute;bottom:4.2%;left:4.2%;width:23%;height:38%;object-fit:contain;object-position:left bottom;z-index:-1}
.cert-copy{padding-top:8.5%;width:88%;font-weight:700}
.cert-school{font-size:clamp(12px,2.7cqw,26px);color:#f6cf98}
.cert-stars{justify-content:center;margin:1.4% 0}
.cert-stars svg{width:2.6cqw;height:2.6cqw}
.cert-title{font-size:5.6cqw;margin:2.1% 0 1.7%;color:#fff2df}
.cert-issue{font-weight:400;color:#eed6e8;font-size:2.45cqw}
.cert-name{font:700 6.9cqw/1.13 var(--title);color:#ffdfab;max-width:49%;min-height:13.5cqw;margin:1.9% auto .6%;overflow-wrap:anywhere;display:grid;place-items:center;white-space:pre-wrap}
.cert-description{font-size:2.18cqw;line-height:1.65;max-width:49%;margin:auto;color:#f5e6f3}
.cert-credit{position:absolute;bottom:10%;right:9%;font-size:2.05cqw;color:#f6cf98}
.finish-actions{margin-top:13px}
#export-status{color:var(--soft);font-size:12px;text-align:center;margin-top:7px}
.message-card{width:min(700px,100%);margin:22px auto 0;padding:17px;border:1px solid var(--line);background:#34243f;border-radius:14px}
.message-card h2{font-size:28px;margin-bottom:5px}
.message-card label{display:block;color:var(--soft);font-size:13px;margin-bottom:7px}
.message-card textarea{min-height:100px;resize:vertical}
.message-row{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.message-row [role=status]{font-size:12px;color:var(--gold)}
@media(max-width:920px){
  .shell{width:calc(100% - 42px)}
  .map-track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .challenge-layout{grid-template-columns:minmax(0,1fr) minmax(200px,.4fr)}
}
@media(max-width:760px){
  .hero{display:block;aspect-ratio:auto;border-radius:18px}
  .hero-copy{width:100%;padding:calc((100vw - 26px) * .59) 19px 23px}
  .hero-art::before{content:"";position:absolute;inset:-12px;background:url(art/cover.webp) center/cover;filter:blur(10px)}
  .hero-art>img{position:relative;height:auto;aspect-ratio:3/2}
  .hero-art::after{background:linear-gradient(180deg,transparent calc((100vw - 26px) * .45),#251631e8 calc((100vw - 26px) * .70),#251631f5)}
  .hero-art figcaption{display:none}
}
@media(max-width:650px){
  .shell{width:calc(100% - 26px)}
  .site-head{min-height:67px}
  #view{padding-block:15px 23px}
  .hero h1{font-size:clamp(40px,11vw,63px);margin-top:7px;white-space:normal}
  .hero-subtitle{font-size:25px}
  .hero-intro{margin-top:8px}
  #start-form{margin-top:16px;max-width:none}
  .cover-caption{margin-top:12px}
  .map-track{gap:8px}
  .station-copy{padding:9px}
  .station-copy h2{font-size:clamp(19px,5.2vw,26px)}
  .station-copy p{font-size:11px}
  .station-copy button{font-size:12px}
  .challenge-layout{grid-template-columns:minmax(0,1fr);gap:9px;min-height:0;padding:8px;border-radius:18px}
  .challenge-graduates{inset:5px auto auto 8px;width:35%;height:94px}
  .scene{order:-1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-height:91px;padding:6px 9px;background:linear-gradient(270deg,#271931ee 0%,#271931d2 53%,transparent 75%);border:none}
  .scene h2{font-size:24px;margin:2px 0;max-width:64%}
  .scene p{display:none}
  .quiz::before{background-position:center bottom;background-size:min(88%,295px) auto}
  .scene .eyebrow{font-size:10px}
  .options{gap:6px}
  .option,.slot{padding-inline:3px}
  .site-foot{padding-top:11px}
  input,textarea{font-size:16px}
}
@media(max-width:355px){
  .math{font-size:14px}
  .formula>.math{font-size:17px}
  .quiz{padding:12px}
  .crown{gap:5px;padding-inline:6px}
  .crown svg{width:15px}
}
@page{size:A4 landscape;margin:9mm}
@media print{
  body{background:white;min-height:0}
  .site-head,.site-foot,.finish-head,.finish-actions,.message-card,#export-status{display:none!important}
  #view{padding:0;width:100%}
  .certificate{width:min(100%,272mm);margin:auto;break-inside:avoid;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

#student-name:placeholder-shown{text-align:right}