:root { --bg:#090908; --panel:#0c0c0b; --panel-alt:#151310; --gold:#c89549; --gold-light:#e0b567; --line:#4b3b21; --text:#f8f6f2; --muted:#bca678; --dim:#827657; --input:#f5f3ef; --ink:#12100c; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-width:320px; background:radial-gradient(circle at 50% 0, #15130e 0, var(--bg) 43rem); color:var(--text); font-family:Inter,Arial,sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.shell { width:min(100% - 2rem, 950px); margin:2rem auto; min-height:calc(100vh - 4rem); border:1px solid var(--line); border-radius:8px; background:rgba(8,8,7,.92); display:flex; flex-direction:column; overflow:hidden; }
.brand { height:101px; display:flex; align-items:center; padding:1.45rem 3.1rem; border-bottom:1px solid var(--gold); }
.brand picture { display:block; width:min(330px,74vw); height:76px; overflow:hidden; }.brand-logo { display:block; width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.content { flex:1; padding:2.5rem 3.1rem 2.7rem; animation:contentEnter .32s ease both; }.footer { border-top:1px solid #302716; padding:1.1rem 1.5rem; text-align:center; color:#8e7547; font-size:11px; }.footer span + span::before { content:' / '; } @keyframes contentEnter { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.eyebrow,.domain-label { color:var(--gold); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }.hero { max-width:790px; padding:1rem 0 1rem; }.hero h1,.lead h1,.results-title { margin:.85rem 0 1rem; font:600 clamp(2rem,4vw,3.4rem)/1.2 Poppins,sans-serif; letter-spacing:-1.6px; }.accent { color:var(--gold-light); }.hero p { max-width:770px; color:var(--muted); font-size:17px; line-height:1.65; }.benefits { display:flex; gap:2.2rem; flex-wrap:wrap; padding:1.5rem 0 1.7rem; color:#a78d59; font-size:14px; }.benefits span::before { content:'\2022'; color:var(--gold); font-size:20px; padding-right:10px; vertical-align:-1px; }
.button { border:1px solid var(--gold); min-height:58px; padding:0 2rem; background:var(--gold); color:#0e0d0b; font-weight:700; text-transform:uppercase; border-radius:5px; box-shadow:0 6px 20px rgba(0,0,0,.14); transition:background .2s,transform .2s,box-shadow .2s; }.button:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 10px 26px rgba(200,149,73,.16); }.button:active { transform:translateY(0); }.button:disabled { cursor:wait; opacity:.75; transform:none; box-shadow:none; }.button.is-loading::after { content:''; display:inline-block; width:.75em; height:.75em; margin-left:.65em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-.08em; animation:spin .7s linear infinite; }.button.secondary { background:transparent; color:var(--muted); border-color:var(--line); box-shadow:none; }.button.secondary:hover { color:var(--gold-light); border-color:var(--gold); background:#17130c; }.button:focus-visible,.answer:focus-visible,input:focus-visible,.text-button:focus-visible { outline:3px solid #f4d28f; outline-offset:3px; } @keyframes spin { to { transform:rotate(360deg); } }
.lead { max-width:670px; margin:2rem auto; text-align:center; }.lead p { color:var(--muted); font-size:17px; line-height:1.6; }.list { text-align:left; margin:2rem auto; max-width:455px; color:var(--muted); line-height:1.8; }.list strong { color:var(--text); }.navigation { display:flex; align-items:center; justify-content:space-between; margin-top:2.4rem; gap:1rem; }.info-panel { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:2rem auto; background:var(--line); border:1px solid var(--line); max-width:670px; text-align:left; }.info-panel div { min-height:102px; padding:1.1rem .9rem; background:#12100c; }.info-panel strong { display:block; color:var(--gold-light); font:600 25px/1 Poppins,sans-serif; }.info-panel span { color:var(--muted); display:block; font-size:11px; line-height:1.45; margin-top:8px; }
.progress-wrap { margin-bottom:3.2rem; }.progress { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }.progress span { height:4px; border-radius:5px; background:#332b1b; overflow:hidden; }.progress span.complete,.progress span.active { background:var(--gold); }.progress span.active { animation:progressReveal .55s cubic-bezier(.2,.8,.2,1); transform-origin:left; }.progress-text { color:#8c774d; font-size:12px; letter-spacing:1.4px; font-weight:700; text-transform:uppercase; margin-top:12px; }.domain-intro { margin-bottom:2.3rem; }.domain-intro h1 { font:600 30px/1.2 Poppins,sans-serif; margin:.7rem 0 .25rem; }.domain-intro p { color:var(--gold-light); font:italic 16px 'Playfair Display',serif; margin:0; } @keyframes progressReveal { from { transform:scaleX(.15); opacity:.35; } to { transform:scaleX(1); opacity:1; } }
.question { margin:0 0 2.25rem; }.question legend { color:var(--text); font-size:17px; font-weight:600; margin-bottom:1rem; padding:0; }.answers { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }.answer { min-height:47px; border:1px solid #41331d; background:var(--panel-alt); border-radius:5px; color:var(--muted); padding:9px 6px; font-size:13px; font-weight:600; text-align:center; transition:border-color .18s,background .18s,color .18s,transform .18s; }.answer:hover { border-color:#9b7436; color:#ecd3a2; background:#1b1710; transform:translateY(-1px); }.answer[aria-pressed="true"] { background:var(--gold); border-color:var(--gold); color:#0c0b08; box-shadow:0 5px 14px rgba(200,149,73,.13); animation:selectionConfirm .22s ease both; } @keyframes selectionConfirm { 50% { transform:scale(.985); } }
.capture { max-width:500px; margin:1.3rem auto; }.capture label { display:block; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:1.3px; margin:1.15rem 0 .55rem; }.capture label span { font-weight:400; letter-spacing:0; }.capture input { width:100%; min-height:52px; border:1px solid transparent; border-radius:5px; padding:0 15px; color:var(--ink); background:var(--input); font-size:16px; transition:border .2s,box-shadow .2s; }.capture input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,149,73,.22); outline:0; }.form-note { color:#897244; text-align:center; font-size:12px; margin-top:1.3rem; }.form-error { color:#ffd6a8; background:#352617; border-left:3px solid var(--gold); padding:.7rem .9rem; font-size:13px; line-height:1.4; }
.results { max-width:760px; margin:0 auto; }.results-head { text-align:center; }.results-head h1 { margin:.55rem 0; }.prepared { color:var(--muted); font-size:14px; }.health-gauge { --gauge-color:var(--gold); width:196px; aspect-ratio:1; margin:1.6rem auto .85rem; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--gauge-color) calc(var(--score) * 1%),#2d2518 0); position:relative; box-shadow:0 0 0 1px #5d4827,0 12px 30px rgba(0,0,0,.2); animation:gaugeEnter .65s cubic-bezier(.2,.8,.2,1) both; }.health-gauge::before { content:""; position:absolute; inset:12px; border-radius:50%; background:#0e0d0a; }.health-gauge div { position:relative; display:grid; }.health-gauge strong { color:var(--gold-light); font:600 60px/.92 Poppins,sans-serif; letter-spacing:-4px; }.health-gauge span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:1px; margin-top:8px; }.classification { color:var(--gold-light); font:600 19px Poppins,sans-serif; }.score-scale { max-width:440px; display:flex; justify-content:space-between; margin:1rem auto 2rem; color:#a98e59; font-size:10px; text-transform:uppercase; letter-spacing:.55px; }.domain-summary { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1rem 0; margin:1.4rem 0 2rem; }.domain-card { padding:.75rem 0; }.domain-card + .domain-card { border-top:1px solid rgba(75,59,33,.55); }.domain-row { display:grid; grid-template-columns:115px 1fr 47px; gap:12px; align-items:center; font-size:14px; }.meter { height:7px; background:#2b2316; border-radius:10px; overflow:hidden; }.meter span { display:block; height:100%; background:var(--gold); border-radius:inherit; transition:width .6s ease; }.domain-row strong { text-align:right; color:var(--gold-light); }.domain-card p { color:#aa966d; font-size:12px; margin:.55rem 0 0 127px; line-height:1.5; }.domain-card small { color:var(--gold-light); white-space:nowrap; }.diagnosis { border-left:3px solid var(--gold); padding:1.35rem 1.45rem; background:#12100c; color:#e5d7bd; font:500 17px/1.7 'Playfair Display',serif; }.diagnosis span { display:block; color:var(--gold); font:700 10px Inter,sans-serif; letter-spacing:1.6px; margin-bottom:.65rem; }.result-section { margin-top:1.8rem; }.result-section h2,.methodology strong { color:var(--gold); font:700 12px Inter,sans-serif; letter-spacing:1.8px; }.result-section p,.methodology p { color:var(--muted); line-height:1.7; }.action-card { background:#12100c; border:1px solid #3b2f1b; padding:1.2rem 1.35rem; }.methodology { margin-top:2rem; padding:1.45rem; text-align:center; background:linear-gradient(110deg,#17120a,#0f0e0b); border-top:1px solid var(--gold); }.methodology strong { display:block; font-size:15px; }.methodology strong + strong { color:var(--text); margin-top:.35rem; }.methodology p { margin:1rem 0 0; font-size:14px; }.audit { margin-top:2rem; border:1px solid var(--line); padding:1.6rem; background:linear-gradient(120deg,#12100c,#1c1710); display:flex; align-items:end; gap:1.5rem; justify-content:space-between; }.audit h2 { margin:.5rem 0; font:600 22px Poppins,sans-serif; }.audit p { color:var(--muted); line-height:1.6; max-width:500px; }.audit-actions { min-width:205px; display:grid; gap:.8rem; }.text-button { background:transparent; border:0; color:var(--gold-light); text-decoration:underline; font-size:12px; padding:.4rem; } @keyframes gaugeEnter { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
@media (max-width:650px) { .shell { width:100%; margin:0; border-radius:0; min-height:100vh; border-left:0; border-right:0; }.brand { height:86px; padding:1.25rem 1.3rem; }.brand picture { width:min(270px,76vw); height:60px; }.content { padding:2rem 1.25rem; }.footer { font-size:10px; padding:1rem; }.hero h1,.lead h1,.results-title { letter-spacing:-1px; }.hero p,.lead p { font-size:15px; }.benefits { gap:.4rem 1.5rem; }.info-panel { grid-template-columns:repeat(2,1fr); }.info-panel div { min-height:88px; }.progress-wrap { margin-bottom:2.5rem; }.answers { grid-template-columns:repeat(2,1fr); }.answer:last-child { grid-column:span 2; }.question legend { font-size:16px; }.navigation .button { padding:0 1rem; min-height:52px; }.domain-row { grid-template-columns:90px 1fr 43px; font-size:12px; }.domain-card p { margin-left:102px; }.health-gauge { width:172px; }.health-gauge strong { font-size:53px; }.audit { padding:1.25rem; display:block; }.audit-actions { margin-top:1.2rem; }.audit-actions .button { width:100%; }.capture .navigation { align-items:stretch; }.capture .navigation .button { flex:1; } }
@media (min-width:651px) and (max-width:900px) { .shell { width:min(100% - 3rem,820px); }.content { padding:2.35rem 2.5rem; }.brand { padding-inline:2.5rem; }.answers { gap:7px; }.answer { font-size:12px; }.question { margin-bottom:2rem; }.audit { align-items:center; }.audit-actions { min-width:185px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
@media print { @page { margin:15mm 15mm 25mm; } body { background:#fff; color:#151515; } .shell { width:100%; min-height:0; margin:0; border:0; background:#fff; color:#151515; overflow:visible; } .brand { padding:0 0 8mm; border-bottom:1px solid #b88940; } .brand picture { width:220px; height:auto; overflow:visible; } .brand-logo { width:220px; height:auto; object-fit:contain; } .content { padding:9mm 0; animation:none; } .footer { position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:space-between; padding:5mm 15mm; color:#66512e; background:#fff; border-top:1px solid #c5aa78; text-align:left; } .footer span + span::before { content:''; } .footer::after { content:'Page ' counter(page); margin-left:auto; } .button,.text-button { display:none; } .results-head h1,.results h2,.classification,.diagnosis,.methodology strong { color:#6e4c18; } .prepared,.score-scale,.result-section p,.methodology p,.audit p,.domain-card p { color:#444; } .health-gauge::before { background:#fff; } .health-gauge { box-shadow:none; animation:none; } .domain-summary,.domain-card + .domain-card { border-color:#d5c3a4; } .domain-card,.diagnosis,.action-card,.methodology,.audit { background:#faf8f3; border-color:#d5c3a4; break-inside:avoid; page-break-inside:avoid; } .audit { display:block; } }
@media print { @page { margin:12mm 14mm 20mm; } .brand { padding-bottom:5mm; }.brand picture,.brand-logo { width:185px; }.content { padding:5mm 0 4mm; }.results-head h1 { margin:.2rem 0; font-size:27pt; }.prepared { margin:.25rem 0; }.health-gauge { width:142px; margin:.65rem auto .35rem; }.health-gauge strong { font-size:46px; }.score-scale { margin:.5rem auto .85rem; }.domain-summary { margin:.7rem 0 1rem; padding:.45rem 0; }.domain-card { padding:.38rem 0; }.domain-card p { margin-top:.25rem; font-size:10.5px; }.diagnosis { padding:.75rem .95rem; font-size:13px; line-height:1.5; }.result-section { margin-top:.85rem; }.result-section p { margin:.35rem 0; font-size:11.5px; line-height:1.5; }.action-card,.methodology { margin-top:.85rem; padding:.8rem .95rem; }.methodology p { margin:.55rem 0 0; font-size:11px; line-height:1.45; }.audit { margin-top:.85rem; padding:.85rem .95rem; break-inside:auto; page-break-inside:auto; }.audit h2 { font-size:17px; }.audit p { margin:.35rem 0 0; font-size:11.5px; line-height:1.5; }.footer { padding:3mm 14mm; font-size:8.5px; }.footer span:nth-child(2) { margin-left:10mm; }.domain-card,.diagnosis,.action-card,.methodology { break-inside:avoid; page-break-inside:avoid; }.audit h2,.result-section h2 { break-after:avoid; page-break-after:avoid; } }