:root{--ink:#382d28;--muted:#746458;--wine:#7c373c;--paper:#f7f0e5;--line:#d8c8b5}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper) url('assets/parchment.jpg') center top/cover fixed;font-family:Georgia,'Times New Roman',serif;min-height:100svh}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible+span{outline:3px solid var(--wine);outline-offset:4px}header{height:76px;max-width:1280px;margin:auto;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #baa58b55;gap:12px}.brand{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:10px;font-size:22px}.brand span,.edition,.eyebrow,.meta,.progress-meta,.small-label{font-family:Arial,sans-serif;font-size:10px;letter-spacing:2px}.edition{color:var(--muted);letter-spacing:1.5px}main{max-width:1120px;margin:auto;min-height:calc(100svh - 170px)}.home{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:690px}.art{height:650px;position:relative;overflow:hidden}.art img{width:100%;height:100%;object-fit:cover;object-position:center top;mix-blend-mode:multiply}.art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--paper),transparent 20%)}.intro{padding:45px 30px 50px 50px}.eyebrow{color:var(--wine);line-height:1.8;margin:0 0 22px}h1{font-size:64px;font-weight:400;line-height:1.04;letter-spacing:-2px;margin:0 0 24px}h1 em{color:var(--wine);font-weight:400}p{line-height:1.65}.intro .lead{color:var(--muted);font-size:18px;max-width:360px}.rule{width:52px;height:1px;background:#a58a69;margin:28px 0}.meta{font-size:10px;letter-spacing:1px;display:flex;gap:22px;color:var(--muted);margin:24px 0}.primary,.secondary{min-height:52px;padding:14px 26px;border:1px solid var(--wine);border-radius:5px;transition:background .15s}.primary{background:var(--wine);color:#fff8ee;display:inline-flex;align-items:center;justify-content:center;gap:28px}.primary:hover{background:#622a30}.primary:disabled{opacity:.4;cursor:not-allowed}.secondary{color:var(--wine);background:transparent}.note{font:12px/1.7 Arial,sans-serif;color:var(--muted);margin-top:16px}.quiz{max-width:760px;margin:48px auto 64px;padding:0 26px}.progress-meta{display:flex;justify-content:space-between;color:var(--muted);letter-spacing:1px}.track{height:3px;background:#dfd1bf;margin:15px 0 38px}.track>i{display:block;height:100%;background:var(--wine);transition:width .2s}.quiz h1{font-size:30px;line-height:1.35;letter-spacing:-.5px;margin:15px 0 25px}.question-hint{color:var(--muted);font-size:14px;font-style:italic;margin-bottom:18px}.options{border:0;padding:0;margin:0;display:grid;gap:12px}.option{position:relative;cursor:pointer}.option input{position:absolute;opacity:0;width:1px;height:1px}.option>span{display:flex;align-items:center;gap:16px;background:#fffaf0aa;border:1px solid #cdbca4;border-radius:6px;padding:18px;line-height:1.5;font-size:16px;min-height:72px}.letter{font:12px Arial,sans-serif;border:1px solid #cdbca4;border-radius:50%;width:29px;height:29px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--muted)}.option input:checked+span{border-color:var(--wine);background:#f0e1d7;box-shadow:inset 3px 0 var(--wine)}.option input:checked+span .letter{background:var(--wine);color:white;border-color:var(--wine)}.navigation{display:flex;justify-content:space-between;gap:16px;margin-top:24px}.back{background:none;border:0;color:var(--muted);padding:14px 5px;min-height:48px}.navigation .primary{min-width:180px}.results{max-width:780px;margin:45px auto 65px;padding:0 24px}.result-intro{text-align:center}.result-intro h1{font-size:48px;margin-bottom:16px}.result-intro .lead{max-width:560px;margin:0 auto 28px;color:var(--muted)}.ornament{color:#a58a69;letter-spacing:10px;margin:22px 0}.winner{padding:28px;background:#7c373c;color:#fff5e7;border-radius:8px;margin:18px 0;text-align:left;position:relative}.winner h2{font-size:34px;font-weight:400;margin:8px 0 4px}.winner .score{float:right;font-size:42px;margin-left:18px}.winner p{margin:12px 0 0;color:#f3e2d9;font-size:16px}.small-label{font-size:9px;letter-spacing:1.8px}.section-title{display:flex;align-items:center;justify-content:space-between;margin:36px 0 20px}.section-title h2{font-size:24px;font-weight:400;margin:0}.section-title span{font:11px Arial,sans-serif;color:var(--muted)}.ranking{display:grid;gap:18px}.rank-title{display:flex;justify-content:space-between;font-size:18px;margin-bottom:8px}.rank-title small{font:11px Arial,sans-serif;color:var(--muted);margin-left:8px}.bar{height:6px;border-radius:5px;background:#dfd1bf;overflow:hidden}.bar i{display:block;height:100%;background:#99715d;border-radius:5px}.rank:first-child .bar i{background:var(--wine)}details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:30px 0;color:var(--muted);font-size:14px;line-height:1.65}summary{cursor:pointer;color:var(--ink);min-height:24px}.actions{display:flex;gap:12px;flex-wrap:wrap}.actions button{flex:1}footer{padding:20px 20px 26px;text-align:center;color:var(--muted);font:11px/1.8 Arial,sans-serif}footer span{opacity:.75}#music{border:1px solid var(--line);background:transparent;padding:10px;color:var(--wine)}[hidden]{display:none!important}@media(min-width:900px){.intro{order:0}.art{order:1}}@media(max-width:899px){header{height:62px;padding:0 22px}.brand span{font-size:9px;letter-spacing:1.6px}.edition{display:none}.home{display:flex;flex-direction:column;min-height:0}.art{order:-1;height:285px;width:100%;max-width:560px}.art img{object-position:center 17%;object-fit:cover}.intro{padding:0 26px 34px;width:100%;max-width:560px;text-align:center;margin-top:-14px;position:relative}.intro .eyebrow{font-size:9px;margin:0 0 13px}.intro h1{font-size:45px;letter-spacing:-1.5px;margin-bottom:16px}.intro .lead{font-size:16px;margin:0 auto;max-width:340px}.rule{margin:20px auto}.meta{justify-content:center;margin:20px 0}.intro .primary{width:100%;max-width:360px}.quiz{margin:28px auto 35px;padding:0 20px}.track{margin:12px 0 26px}.quiz h1{font-size:24px;line-height:1.4}.option>span{padding:15px 14px;gap:12px;font-size:15px;min-height:68px}.navigation .primary{min-width:160px}.results{margin-top:30px;padding:0 20px}.result-intro h1{font-size:37px}.winner{padding:22px}.winner h2{font-size:29px}.winner .score{font-size:36px}.section-title h2{font-size:22px}footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}}@media(max-width:380px){.art{height:275px}.intro h1{font-size:40px}.quiz h1{font-size:22px}.rank-title small{display:none}.navigation .primary{min-width:140px;padding:14px 18px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Compact phone quiz layout; keep the original question wording. */
@media(max-width:899px){
 body:has(.quiz) header{height:44px}
 body:has(.quiz) footer{display:none}
 .quiz{margin:16px auto 0;padding:0 16px 12px}
 .progress-meta{font-size:9px;letter-spacing:1px}
 .track{margin:9px 0 16px}
 .quiz h1{font-size:19px;line-height:1.35;letter-spacing:0;margin:0 0 12px}
 .question-hint{font-size:12px;line-height:1.4;margin:0 0 12px}
 .options{gap:8px}
 .option>span{font-size:15px;line-height:1.4;padding:11px 12px;gap:10px;min-height:56px;background:#fffaf0e6}
 .letter{width:25px;height:25px;font-size:11px}
 .navigation{position:sticky;bottom:0;z-index:2;margin:12px -16px 0;padding:10px 16px max(10px,env(safe-area-inset-bottom));background:#f7f0e5f5;border-top:1px solid #d8c8b580;align-items:center;gap:12px}
 .navigation .primary{min-height:46px;min-width:156px;padding:11px 20px;font-size:15px}
 .navigation .back{min-height:46px;font-size:14px}
 .quiz>.note{display:none}
}
@media(max-width:360px){.quiz h1{font-size:18px}.option>span{font-size:14px;padding:10px;gap:8px}.navigation .primary{min-width:140px}}

#music{min-height:44px;flex-shrink:0;font:12px Arial,sans-serif;border-radius:5px}
