@import url('design-tokens.css');
@import url('components.css');
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid var(--brand);outline-offset:3px}button:disabled{opacity:.5;cursor:wait}.icon{width:23px;height:23px;flex-shrink:0;vertical-align:middle}#player{width:100%;max-width:var(--content-width);margin:auto;background:#fff;min-height:100svh}.quiz-header{height:50px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 15px;position:relative;border-bottom:1px solid #f0f1f5}.quiz-header button{border:0;background:none;color:#15161a}.header-home{padding:8px 0;width:40px;text-align:left}.wordmark{position:absolute;left:50%;transform:translateX(-50%);font-weight:850!important;letter-spacing:-1.4px;font-size:28px!important;line-height:1}.language{display:flex;gap:6px}.language button{font-size:12px;padding:8px 1px;color:#858990}.language button[aria-pressed=true]{color:var(--ink);font-weight:700}.detail{padding:25px 15px 28px}.detail-summary{display:grid;grid-template-columns:140px minmax(0,1fr);gap:15px;align-items:start}.detail-thumbnail{width:140px;height:196px;object-fit:cover;border-radius:4px}.detail-summary h1{font-size:24px;line-height:1.42;font-weight:750;letter-spacing:-.6px;margin:0 0 12px;word-break:keep-all}.detail-facts{display:grid;gap:8px;color:var(--muted);font-size:15px}.detail-facts>span{display:flex;gap:6px;align-items:center;line-height:1.4}.detail-facts .icon{opacity:.55;width:20px;height:20px}.detail-description{padding:10px 0 12px;font-size:15px;line-height:1.7;word-break:keep-all}.detail-description p{margin:22px 0 30px;white-space:pre-line}.detail-tags{display:flex;gap:7px;margin-bottom:24px;flex-wrap:wrap}.detail-tags span{padding:5px 12px;background:#f1f2f5;border-radius:20px;font-size:13px;color:#73767d}.primary,.secondary{width:100%;min-height:44px;border-radius:4px;padding:11px 15px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:600;border:0}.primary{background:var(--brand);color:white}.primary:hover{background:var(--brand-hover)}.primary .icon{filter:invert(1)}.secondary{background:#fff;border:1px solid var(--line);color:var(--ink)}.detail-note{margin:22px 0 0}small{display:block;font-size:12px;color:#85828c;line-height:1.65}.quiz-footer{font-size:12px;color:#8b8e96;padding:25px 15px;text-align:center;border-top:1px solid #f0f1f5}.cover{position:relative;background:var(--theme-bg);padding-bottom:24px;text-align:center}.cover-art{width:100%;height:auto;display:block}.cover-bottom{padding:0 25px;margin-top:-8px;position:relative}.theme-button{width:100%;min-height:64px;background:#fff;color:var(--theme-ink);border:2px solid #fff;border-radius:16px;font-size:22px;font-weight:700;box-shadow:0 4px 0 #c6b5e280}.cover-bottom p{font-size:13px;color:#7e6c98;margin:20px 0 0}.english-cover{position:absolute;left:0;right:0;top:0;padding:28px 20px 34px;background:linear-gradient(#c7b7ef 85%,#c7b7ef00);height:34%;color:#fff}.english-cover h1{font-size:36px;line-height:1.2;font-weight:850;margin:4px 0 10px;text-shadow:0 2px #927ac4}.english-cover p{font-size:14px;margin:0}.text-btn{border:0;background:none;text-decoration:underline;text-underline-offset:4px;color:#77618d;font-size:13px;padding:15px}.question{position:relative;isolation:isolate;min-height:calc(100svh - 50px);padding:18px 25px 35px;display:flex;flex-direction:column;background:var(--theme-bg)}.question:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#e9e3f820,#e9e3f830),var(--scene) center/cover}.question-top{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;color:var(--theme-ink)}.back{background:#ffffffb0;border:0;border-radius:50%;width:36px;height:36px;display:grid;place-items:center}.progress{height:5px;border-radius:10px;background:#fff9;margin:12px 0}.progress i{display:block;height:100%;background:#a88acb;border-radius:10px;transition:width .2s}.question-body{margin:auto 0;padding:35px 4px;text-align:center}.scene-label{display:inline-block;border:1px solid #ab95c7;border-radius:20px;background:#fbf9ffdd;color:#7b6396;padding:1px 16px;font-size:16px;margin-bottom:12px}.question h1{background:#fffffff5;border:1px solid #e4daec;border-radius:16px;padding:28px 21px;margin:0;font-size:22px;font-weight:600;line-height:1.6;letter-spacing:-.3px;white-space:pre-line;word-break:keep-all;box-shadow:0 3px 0 #ab95c720;outline:none}.options{display:grid;gap:12px;margin-top:20px}.option{width:100%;min-height:76px;background:#fff;border:2px solid transparent;border-radius:16px;padding:20px 22px;text-align:center;color:#25202e;font-size:16px;font-weight:500;line-height:1.6;word-break:keep-all;box-shadow:0 3px 0 #b39bc640}.option:hover,.option.selected{background:#f8f2ff;border-color:#ac8bd1}.result-view{padding:30px 0 100px;background:linear-gradient(#e9e3f850,#e9e3f8 75%),var(--scene) center top/500px auto repeat-y;color:#352941}.result-sheet{width:76%;margin:0 auto;border:1px solid var(--theme-line);border-radius:12px;background:#faf8ff;padding:0 17px 21px;text-align:center;box-shadow:0 4px 0 #c9badd55}.sheet-label{width:90%;margin:-1px auto 20px;padding:7px 3px;border:1px solid var(--theme-line);border-top:0;border-radius:0 0 5px 5px;color:#8d72a8;font-size:13px;font-weight:650;letter-spacing:.5px}.result-portrait{width:100%;aspect-ratio:1;border:1px solid var(--theme-line);border-radius:16px;overflow:hidden;background:#e9e3f8}.result-portrait img{width:100%;height:100%;object-fit:cover;display:block}.result-tagline{font-size:14px;line-height:1.6;margin:19px 0 7px;word-break:keep-all;color:#725c8b}.result-sheet h1{font-size:30px;line-height:1.35;letter-spacing:-.8px;font-weight:800;margin:0 0 22px;word-break:keep-all}.result-copy{background:white;border:1px solid #e4dbee;border-radius:12px;padding:19px 17px;text-align:left;font-size:15px;line-height:1.8;word-break:keep-all}.lead{margin:0}.insight{border-top:1px dashed #e0d5ed;margin-top:20px;padding-top:17px}.insight h2{font-size:14px;color:#9a7caf;line-height:1.5;margin:0 0 8px}.insight p{margin:0}.reminder{text-align:left;padding:18px 4px 0;font-size:13px;line-height:1.8;color:#8a749b}.reminder b{color:#77578f;font-weight:600}.reminder p{margin:6px 0 0}.result-extra{padding:28px 25px 0;display:grid;gap:12px}.result-extra small{text-align:center;margin-top:10px}.share-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:500px;background:#0c0c0f;padding:14px 18px;display:flex;gap:14px;z-index:10}.share-bar button{display:flex;justify-content:center;align-items:center;gap:10px;min-height:44px;border:1px solid #fff;border-radius:24px;color:white;background:none;flex:1;font-size:16px}.share-bar .icon{filter:invert(1)}.share-bar .restart{flex:0 0 44px}.all-results{padding:30px 20px;text-align:center}.all-results h1{font-size:24px;line-height:1.5}.all-results p{color:var(--muted)}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 15px;margin:28px 0}.mini-result{border:0;background:none;padding:0;color:#352941}.mini-result img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--theme-line)}.mini-result span{display:block;font-size:15px;margin:9px 0;font-weight:600}.quiz-toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#24212d;color:white;padding:15px 22px;border-radius:8px;z-index:100;font-size:14px;max-width:90vw;white-space:pre-line}@media(max-width:360px){.detail-summary{grid-template-columns:120px minmax(0,1fr);gap:12px}.detail-thumbnail{width:120px;height:168px}.detail-summary h1{font-size:22px}.detail-facts{font-size:13px}.question{padding:15px 18px 25px}.question h1{font-size:20px}.result-sheet{width:84%}.english-cover h1{font-size:30px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.detail-summary h1{font-weight:700}.english-cover{height:auto;aspect-ratio:2/1;padding-top:30px}.english-cover h1{color:#fff;text-shadow:0 2px 0 #80669e,0 0 2px #80669e}
/* Midnight romance theme */
.cover{background:var(--theme-bg)}.theme-button{background:#f7e5df;border-color:#f7e5df;color:#54223c;box-shadow:0 4px 0 #7f3d55}.cover-bottom p,.cover .text-btn{color:#c7a7b8}.english-cover{background:#241328;color:#f8dfd7}.question{background:#1e1425}.question:before{background:linear-gradient(#21142615,#21142635),var(--scene) center/cover}.question-top{color:#f2dcd8}.back{background:#f7e5df}.progress{background:#f5e4ea30}.progress i{background:#c6778e}.scene-label{background:#2b1b30ee;border-color:#a46a81;color:#eac5d3}.question h1{background:#2b1b30f2;border-color:#89546d;color:#f9e7e1;box-shadow:0 4px 0 #170e2060;font-weight:550}.option{background:#f7e7e1;color:#3a2637;box-shadow:0 3px 0 #743c55}.option:hover,.option.selected{background:#f4cfda;border-color:#c27490}.result-view{background:linear-gradient(#1e142540,#1e1425 78%),var(--scene) center top/500px auto repeat-y;color:#f5e2dd}.result-sheet{background:#2b1b30;border-color:#85536a;box-shadow:0 4px 0 #100a1880}.sheet-label{background:#4c2a40;border-color:#85536a;color:#e6c0cc}.result-portrait{background:#26152e;border-color:#9b617a}.result-tagline{background:#f7e7e1;color:#683d53;border-radius:8px;padding:12px 9px;margin:17px 0 14px;font-size:15px;font-weight:550}.result-sheet h1{color:#f7dfda;font-size:29px}.result-copy{background:#362139;border-color:#614157;color:#ead7e0}.insight{border-color:#6c455e}.insight h2{color:#db9cb4}.reminder{color:#c7a7b8}.reminder b{color:#e1afc0}.result-extra .primary{background:#a34462}.result-extra .secondary{background:#2b1b30;border-color:#89546d;color:#efd7e0}.result-extra small{color:#c1a9bb}.all-results{background:#1e1425;color:#f5e2dd}.all-results>p{color:#c7a7b8}.mini-result{color:#f1dce5}.all-results .secondary{background:#38233e;color:#f5e2dd;border-color:#76506b}.result-grid img{border-color:#76506b}

/* TESTPOP shared service shell; art direction stays per quiz. */
#player{background:var(--canvas)}.quiz-header{height:64px;background:var(--canvas);padding:0 var(--gutter);border-color:var(--line)}.quiz-header .wordmark{position:static;transform:none;font-size:25px!important;letter-spacing:-1.2px;padding:8px 0;min-height:44px}.language{gap:4px}.language button{min-width:40px;min-height:44px;padding:8px}.language button[aria-pressed=true]{color:var(--ink)}.detail{padding:28px var(--gutter)}.detail-thumbnail{border-radius:14px}.detail-summary{grid-template-columns:128px minmax(0,1fr);gap:16px}.detail-thumbnail{width:128px;height:180px}.detail-tags span{background:var(--brand-soft);color:var(--ink)}.primary,.secondary{min-height:var(--control-height);border-radius:var(--radius)}.quiz-footer{background:var(--canvas);border-color:var(--line);color:var(--muted)}.question{min-height:calc(100svh - 64px)}.back{width:44px;height:44px}.share-bar{max-width:460px;width:calc(100% - 32px);bottom:max(12px,env(safe-area-inset-bottom));border:1px solid #76506b;border-radius:20px;background:#2b1b30;padding:10px;gap:10px}.share-bar button{border-radius:12px}.share-bar button:first-child{background:#f7e5df;color:#54223c;border-color:#f7e5df}.share-bar button:first-child .icon{filter:none}.result-view{padding-bottom:110px}

.footer-home{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-underline-offset:4px}.footer-home:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.quiz-header,.quiz-footer,#player{background:white}.primary{color:var(--ink)}.primary .icon{filter:none}.quiz-header{height:50px}.question{min-height:calc(100svh - 50px)}.detail-thumbnail{border-radius:4px}.detail-tags span{background:#f5f5f5;color:var(--muted)}.result-extra .primary{background:var(--brand);color:var(--ink)}.language button[aria-pressed=true]{background:var(--brand);color:var(--ink);border-radius:4px}.quiz-header .wordmark{font-size:24px!important}
/* Shared yellow action states inside the illustrated quiz theme. */
.theme-button{background:var(--brand);border-color:var(--brand);color:var(--ink);border-radius:var(--radius);box-shadow:none}.theme-button:hover{background:var(--brand-hover);border-color:var(--brand-hover)}.option:hover,.option.selected{background:var(--brand);border-color:var(--brand);color:var(--ink)}.progress i{background:var(--brand)}.share-bar button:first-child{background:var(--brand);border-color:var(--brand);color:var(--ink)}
/* Light illustrated quiz theme. Shared yellow actions remain unchanged. */
body[data-quiz-style=paper] .cover{background:#FFF8DB}body[data-quiz-style=paper] .english-cover{background:#FFFCF3;height:30%;aspect-ratio:auto;padding:34px 20px 12px;color:#202020}body[data-quiz-style=paper] .english-cover h1{font-size:36px;color:#202020;text-shadow:none;line-height:1.25}body[data-quiz-style=paper] .english-cover p{font-size:15px;color:#555}body[data-quiz-style=paper] .cover-bottom p,body[data-quiz-style=paper] .cover .text-btn{color:#626262}body[data-quiz-style=paper] .question{background:#FFFCF3}body[data-quiz-style=paper] .question:before{background:linear-gradient(#fff8,#fff8),var(--scene) center/cover}body[data-quiz-style=paper] .question-top{color:#202020}body[data-quiz-style=paper] .back{background:white}body[data-quiz-style=paper] .progress{background:#e6e3d6}body[data-quiz-style=paper] .scene-label{background:#FFF8DB;color:#202020;border-color:#DCCB8C}body[data-quiz-style=paper] .question h1{background:#fffffff5;color:#202020;border-color:#DAD5C4;box-shadow:none}body[data-quiz-style=paper] .option{background:#fff;color:#202020;border:1px solid #DAD5C4;box-shadow:none}body[data-quiz-style=paper] .option:hover,body[data-quiz-style=paper] .option.selected{background:var(--brand);border-color:var(--brand-active)}body[data-quiz-style=paper] .result-view{background:#FFF8DB;color:#202020}body[data-quiz-style=paper] .result-sheet{background:#fff;border-color:#DAD5C4;box-shadow:none}body[data-quiz-style=paper] .sheet-label{background:var(--brand);border-color:#DCCB8C;color:#202020}body[data-quiz-style=paper] .result-portrait{background:#FFFCF3;border-color:#E2DDCD}body[data-quiz-style=paper] .result-tagline{background:#FFF8DB;color:#514C3C}body[data-quiz-style=paper] .result-sheet h1{color:#202020}body[data-quiz-style=paper] .result-copy{background:#FAFAF7;color:#303030;border-color:#E2DDCD}body[data-quiz-style=paper] .insight{border-color:#DAD5C4}body[data-quiz-style=paper] .insight h2,body[data-quiz-style=paper] .reminder b{color:#514C3C}body[data-quiz-style=paper] .reminder,body[data-quiz-style=paper] .result-extra small{color:#626262}body[data-quiz-style=paper] .result-extra .secondary,body[data-quiz-style=paper] .all-results .secondary{background:white;color:#202020;border-color:#DAD5C4}body[data-quiz-style=paper] .share-bar{background:white;border-color:#DAD5C4}body[data-quiz-style=paper] .share-bar .restart{border-color:#DAD5C4}body[data-quiz-style=paper] .share-bar .restart .icon{filter:none}body[data-quiz-style=paper] .all-results{background:#FFFCF3;color:#202020}body[data-quiz-style=paper] .all-results>p,body[data-quiz-style=paper] .mini-result{color:#444}body[data-quiz-style=paper] .result-grid img{border-color:#DAD5C4}
@media(max-width:400px){body[data-quiz-style=paper] .english-cover{padding-top:24px}body[data-quiz-style=paper] .english-cover h1{font-size:30px}}
/* Keep browsing connected from the test to the catalogue. */
.quiz-header a{color:var(--ink);text-decoration:none}.quiz-header .header-home{display:grid;place-items:center;min-width:36px;min-height:44px}.quiz-header .wordmark{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;white-space:nowrap}.quiz-header .language{margin-left:auto}.quiz-header a:focus-visible,.related-tests a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.related-tests{background:white;color:var(--ink);padding:26px 15px 100px;border-top:8px solid #f5f5f5}.related-tests h2{font-size:20px;letter-spacing:-.4px;margin:0 0 20px}.related-test{display:flex;gap:14px;align-items:center;color:inherit;text-decoration:none;margin-bottom:18px}.related-thumb{position:relative;display:block;flex:0 0 82px;aspect-ratio:5/7}.related-thumb img{width:100%;height:100%;object-fit:cover;border-radius:4px}.related-thumb strong{position:absolute;top:7%;left:4%;right:4%;font-size:9px;line-height:1.25;text-align:center}.related-test>div{flex:1}.related-test h3{font-size:16px;line-height:1.4;margin:0 0 7px}.related-test p{font-size:12px;color:var(--muted);margin:0 0 6px}.related-test>span:last-child{color:var(--muted);font-size:24px}.related-home{display:flex;justify-content:center;align-items:center;min-height:44px;background:var(--brand);color:var(--ink);border-radius:4px;text-decoration:none;font-size:14px}
@media(max-width:360px){.quiz-header .wordmark{font-size:22px!important}.quiz-header .language button{min-width:30px}}
/* Keep the illustrated cover title visible in compact cover previews. */
.detail-thumbnail,.related-thumb img{object-position:center top}