:root{--navy:#5a67a8;--navy-dark:#2d3270;--navy-mid:#6e7bbf;--accent:#f7b524;--ink:#202238;--muted:#626783;--line:#dfe2f1;--surface:#fff;--background:#f7f8fc;--success:#16845b;--danger:#c83b4d;--shadow:0 18px 55px rgba(45,50,112,.13);--radius:22px;--font:'Inter',system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 85% 5%,#eef0ff 0,transparent 28%),var(--background);color:var(--ink);font-family:var(--font);line-height:1.55}button,input,textarea{font:inherit}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:10;background:var(--navy-dark);color:#fff;padding:.75rem 1rem;border-radius:10px}.skip-link:focus{top:1rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar{height:76px;padding:0 clamp(1rem,4vw,4rem);display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}.brand img{display:block;width:auto;height:40px;max-width:145px;object-fit:contain}.topbar-label{font-weight:700;color:var(--navy-dark);border-left:1px solid var(--line);padding-left:1rem}.exit-link{margin-left:auto;border:0;background:transparent;color:var(--muted);font-weight:700;padding:.65rem;cursor:pointer}.exit-link:hover{color:var(--navy-dark)}
.progress-shell{max-width:980px;margin:1.25rem auto 0;padding:0 1.25rem}.progress-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.84rem;font-weight:700;margin-bottom:.5rem}.progress-track{height:7px;background:#e5e7f3;border-radius:99px;overflow:hidden}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--navy),#888fe2);border-radius:inherit;transition:width .35s ease}
#app{max-width:980px;margin:0 auto;padding:clamp(1.5rem,4vw,3.5rem) 1.25rem 5rem}.screen{animation:enter .28s ease}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:center;min-height:610px}.eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--navy-dark);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem}.eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(2.45rem,6vw,4.5rem);line-height:1.03;letter-spacing:-.055em;margin:.9rem 0 1.25rem;color:var(--navy-dark)}h2{font-size:clamp(1.7rem,4vw,2.55rem);line-height:1.15;letter-spacing:-.035em;color:var(--navy-dark)}.lead{font-size:clamp(1.03rem,2vw,1.2rem);color:var(--muted);max-width:650px}.feature-row{display:flex;flex-wrap:wrap;gap:.65rem;margin:1.5rem 0}.feature{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);border-radius:99px;padding:.55rem .8rem;font-size:.86rem;font-weight:700;color:var(--navy-dark)}.legal{font-size:.8rem;color:var(--muted);border-left:3px solid var(--accent);padding-left:.8rem;max-width:690px;margin:1.5rem 0}
.hero-art{background:linear-gradient(145deg,var(--navy-dark),var(--navy));border-radius:32px;min-height:420px;padding:2rem;position:relative;overflow:hidden;box-shadow:var(--shadow);color:#fff}.hero-art::before,.hero-art::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.22)}.hero-art::before{width:330px;height:330px;right:-90px;top:-90px}.hero-art::after{width:210px;height:210px;left:-80px;bottom:-80px}.art-card{position:relative;z-index:1;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.23);border-radius:20px;padding:1.25rem;margin-top:1rem;backdrop-filter:blur(8px)}.art-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.3rem}.skill-tile{position:relative;z-index:1;background:#fff;color:var(--navy-dark);border-radius:16px;padding:1rem;font-weight:800}.skill-tile span{display:block;color:var(--muted);font-weight:500;font-size:.78rem;margin-top:.2rem}
.button{border:0;border-radius:12px;min-height:48px;padding:.75rem 1.15rem;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.button:hover{transform:translateY(-1px)}.button:focus-visible,.choice:focus-visible,.fragment:focus-visible,input:focus-visible,textarea:focus-visible,.exit-link:focus-visible{outline:3px solid rgba(90,103,168,.28);outline-offset:3px}.button-primary{background:linear-gradient(135deg,var(--navy-dark),var(--navy));color:#fff;box-shadow:0 9px 24px rgba(45,50,112,.22)}.button-secondary{background:#eef0fa;color:var(--navy-dark)}.button-quiet{background:#fff;color:var(--muted);border:1px solid var(--line)}.button:disabled{opacity:.5;cursor:not-allowed;transform:none}.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.card{background:var(--surface);border:1px solid rgba(223,226,241,.9);border-radius:var(--radius);padding:clamp(1.25rem,4vw,2.4rem);box-shadow:var(--shadow)}.screen-head{max-width:700px;margin-bottom:1.5rem}.step-tag{color:var(--navy);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.11em}.question-context{background:#f5f6fb;border-radius:16px;padding:1.25rem;margin:1.2rem 0;font-size:1.05rem}.campus-notice{border:1px solid #cad0e7;border-top:7px solid var(--navy);background:#fff;padding:1.25rem;border-radius:8px}.campus-notice strong{display:block;color:var(--navy-dark);letter-spacing:.12em;font-size:.74rem;margin-bottom:.65rem}.choices{display:grid;gap:.7rem;margin-top:1rem}.choice{width:100%;display:flex;gap:.8rem;text-align:left;align-items:flex-start;background:#fff;border:2px solid var(--line);border-radius:14px;padding:1rem;cursor:pointer;color:var(--ink)}.choice:hover{border-color:#aeb4dc}.choice.selected{border-color:var(--navy);background:#f3f4fc}.choice-marker{width:23px;height:23px;border:2px solid #aab0c8;border-radius:50%;display:grid;place-items:center;flex:none}.selected .choice-marker{border-color:var(--navy);box-shadow:inset 0 0 0 5px #fff;background:var(--navy)}.text-input,textarea{width:100%;border:2px solid var(--line);border-radius:12px;padding:.85rem 1rem;color:var(--ink);background:#fff}textarea{min-height:180px;resize:vertical}.word-count{font-size:.8rem;color:var(--muted);text-align:right;margin-top:.4rem}.fragment-bank,.sentence-build{display:flex;flex-wrap:wrap;gap:.65rem;min-height:64px;padding:1rem;border-radius:14px}.fragment-bank{background:#f1f2f9}.sentence-build{border:2px dashed #cbd0e4;margin-bottom:1rem}.fragment{border:1px solid #cdd1e5;background:#fff;border-radius:10px;padding:.6rem .8rem;font-weight:700;cursor:pointer}.fragment.chosen{background:var(--navy);color:#fff;border-color:var(--navy)}
.audio-panel{display:flex;align-items:center;gap:1rem;background:#f1f2fa;border-radius:16px;padding:1rem;margin:1rem 0}.audio-status{font-size:.86rem;color:var(--muted);margin:0}.prep-grid,.results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.prep-item,.result-tile{border:1px solid var(--line);border-radius:16px;padding:1.1rem}.prep-item strong,.result-tile strong{display:block;color:var(--navy-dark);font-size:1.05rem}.prep-item span,.result-tile span{color:var(--muted);font-size:.85rem}.self-check{background:#f5f6fb;border-radius:16px;padding:1.1rem;margin-top:1rem}.self-check label{display:flex;gap:.65rem;align-items:flex-start;margin:.65rem 0}.model-answer{white-space:pre-line;background:#f5f6fb;border-radius:14px;padding:1rem;font-size:.9rem}.recording-indicator{display:inline-flex;align-items:center;gap:.5rem;color:var(--danger);font-weight:800}.recording-indicator::before{content:'';width:10px;height:10px;border-radius:50%;background:currentColor;animation:pulse 1s infinite}
.score-hero{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;margin:1.5rem 0}.score-ring{--score:0;width:150px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--navy) calc(var(--score)*1%),#e7e9f3 0);position:relative}.score-ring::after{content:'';position:absolute;inset:13px;border-radius:50%;background:#fff}.score-ring strong{position:relative;z-index:1;color:var(--navy-dark);font-size:2rem}.result-bar{height:8px;background:#e7e9f3;border-radius:99px;overflow:hidden;margin-top:.65rem}.result-bar span{display:block;height:100%;background:var(--navy)}.result-note{background:#fff8e4;border:1px solid #f4dda0;border-radius:14px;padding:1rem;font-size:.83rem;color:#6e5922;margin-top:1.3rem}dialog{border:0;border-radius:20px;padding:1.6rem;max-width:480px;box-shadow:var(--shadow)}dialog::backdrop{background:rgba(25,28,60,.55)}.dialog-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.error-box{color:var(--danger);font-weight:600;background:#fff0f2;border-radius:12px;padding:.8rem;margin-top:.8rem}.success-box{color:#0f6f4b;background:#ecfaf4;border-radius:12px;padding:.8rem;margin-top:.8rem}.hidden{display:none!important}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes pulse{50%{opacity:.35}}@media(max-width:720px){.topbar{height:66px}.brand img{height:32px}.topbar-label{display:none}.hero-grid{grid-template-columns:1fr;min-height:auto}.hero-art{min-height:330px}.prep-grid,.results-grid{grid-template-columns:1fr}.score-hero{grid-template-columns:1fr;text-align:center}.score-ring{margin:auto}.actions{display:grid}.button{width:100%}.audio-panel{align-items:flex-start;flex-direction:column}#app{padding-top:1.5rem}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media print{.topbar,.progress-shell,.actions{display:none!important}body{background:#fff}.card{box-shadow:none;border:0;padding:0}#app{max-width:none;padding:0}.result-note{border:1px solid #aaa}}

/* Quintill editorial visual system */
body{background:radial-gradient(circle at 88% 4%,rgba(124,134,212,.16),transparent 27%),linear-gradient(90deg,rgba(90,103,168,.055) 1px,transparent 1px),linear-gradient(180deg,rgba(90,103,168,.045) 1px,transparent 1px),var(--background);background-size:auto,78px 78px,78px 78px,auto;min-height:100vh}
.topbar{height:88px;gap:1.25rem}.brand{display:flex;align-items:center}.brand img{height:62px;max-width:220px}.topbar-label{padding-left:1.15rem}
.hero-grid{grid-template-columns:minmax(0,.88fr) minmax(440px,1.12fr);gap:clamp(2rem,4vw,4rem);min-height:590px}.hero-copy{position:relative;z-index:2}.hero-grid h1{font-size:clamp(2.45rem,5vw,4.15rem)}.feature{box-shadow:0 3px 12px rgba(45,50,112,.06)}
.hero-visual{margin:0;position:relative;border-radius:30px;overflow:hidden;box-shadow:0 28px 70px rgba(45,50,112,.2);border:1px solid rgba(90,103,168,.2);background:#fff}.hero-visual img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}.hero-visual figcaption{position:absolute;left:1rem;right:1rem;bottom:1rem;background:rgba(26,26,53,.86);backdrop-filter:blur(12px);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:.9rem 1rem;display:flex;justify-content:space-between;gap:1rem}.hero-visual figcaption strong{font-size:.92rem}.hero-visual figcaption span{font-size:.78rem;color:#dfe3ff}
.skill-strip{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;margin-top:-.7rem;position:relative;z-index:2}.skill-strip>div{display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;padding:1.1rem;border-right:1px solid var(--line)}.skill-strip>div:last-child{border-right:0}.skill-strip b{grid-row:1/3;color:var(--navy);font-size:.75rem}.skill-strip strong{color:var(--navy-dark)}.skill-strip span{font-size:.75rem;color:var(--muted)}
.audio-panel{background:linear-gradient(135deg,#f1f2fa,#f7f8ff);border:1px solid #e1e4f3}.question-layout.with-visual{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.2rem;align-items:start}.exercise-visual{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:sticky;top:125px}.exercise-visual img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}.exercise-visual figcaption{display:flex;justify-content:center;gap:.55rem;padding:.8rem}.speaker{font-size:.72rem;font-weight:800;border-radius:99px;padding:.35rem .6rem}.speaker-woman{background:#f0e9ff;color:#6e3cb5}.speaker-man{background:#e8edff;color:#34499a}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-visual{max-width:680px}.question-layout.with-visual{grid-template-columns:1fr}.exercise-visual{position:static;display:grid;grid-template-columns:180px 1fr;align-items:center}.exercise-visual img{aspect-ratio:1}.skill-strip{grid-template-columns:repeat(2,1fr)}.skill-strip>div:nth-child(2){border-right:0}.skill-strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:720px){.topbar{height:74px}.brand img{height:48px;max-width:165px}.hero-visual figcaption{position:static;background:var(--navy-dark);border-radius:0}.skill-strip{grid-template-columns:1fr}.skill-strip>div{border-right:0!important;border-bottom:1px solid var(--line)}.exercise-visual{display:block}.exercise-visual img{aspect-ratio:3/2}}

/* Section color ladder, shared with the main Quintill score language */
:root{--reading-accent:#2f67ff;--listening-accent:#6c38ed;--writing-accent:#cf178d;--speaking-accent:#f06416}
.progress-track span{background:linear-gradient(90deg,#2f67ff 0%,#6740ef 38%,#c4199a 68%,#f06416 100%)}
.section-heading{position:relative;padding:.9rem 1.1rem .9rem 1.35rem;border-radius:0 16px 16px 0;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.32));overflow:hidden}.section-heading::before,.question-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--section-accent)}
.section-reading{--section-accent:var(--reading-accent)}.section-listening{--section-accent:var(--listening-accent)}.section-writing{--section-accent:var(--writing-accent)}.section-speaking{--section-accent:var(--speaking-accent)}
.question-card{position:relative;overflow:hidden;border-left-color:transparent}.section-reading .step-tag{color:#2459df}.section-listening .step-tag{color:#5c2bd1}.section-writing .step-tag{color:#b31278}.section-speaking .step-tag{color:#c84d0b}
.section-reading .button-primary{background:linear-gradient(135deg,#2459df,#526fd7)}.section-listening .button-primary{background:linear-gradient(135deg,#5831c7,#754de6)}.section-writing .button-primary{background:linear-gradient(135deg,#a91475,#d12696)}.section-speaking .button-primary{background:linear-gradient(135deg,#d14d0b,#f27a28)}
.results-grid .result-tile{position:relative;overflow:hidden;padding-left:1.35rem}.results-grid .result-tile::before{content:"";position:absolute;inset:0 auto 0 0;width:5px}.results-grid .result-tile:nth-child(1)::before{background:var(--reading-accent)}.results-grid .result-tile:nth-child(2)::before{background:var(--listening-accent)}.results-grid .result-tile:nth-child(3)::before{background:var(--writing-accent)}.results-grid .result-tile:nth-child(4)::before{background:var(--speaking-accent)}
.results-grid .result-tile:nth-child(1) .result-bar span{background:var(--reading-accent)}.results-grid .result-tile:nth-child(2) .result-bar span{background:var(--listening-accent)}.results-grid .result-tile:nth-child(3) .result-bar span{background:var(--writing-accent)}.results-grid .result-tile:nth-child(4) .result-bar span{background:var(--speaking-accent)}