:root{
  --bg:#F7F2E8; --ink:#0F3D3E; --ink-2:#2E5C5D; --orange:#D4521E; --muted:#6B6F6A; --line:#E3DCCD; --white:#FFFFFF;
  --maxw:720px; --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.55}
a{color:inherit}
img,video{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
header.top{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo .mark{width:36px;height:36px}
.logo .word{font-weight:600;letter-spacing:.22em;font-size:15px}
.logo .word b{color:var(--orange);font-weight:600}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
h1{font-size:clamp(32px,6vw,52px);line-height:1.08;letter-spacing:-.02em;margin:.3em 0 .4em;font-weight:600}
h2{font-size:clamp(24px,4vw,32px);line-height:1.15;letter-spacing:-.01em;margin:1.4em 0 .5em;font-weight:600}
p.lead{font-size:20px;color:var(--ink-2);max-width:34ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:var(--white);border:0;border-radius:999px;padding:16px 28px;font-size:17px;font-weight:600;text-decoration:none;cursor:pointer;min-height:52px}
.btn:hover{background:var(--ink-2)}
.btn.orange{background:var(--orange)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn[disabled]{opacity:.5;cursor:default}
.small{font-size:14px;color:var(--muted)}
.rules{display:grid;gap:14px;margin:24px 0}
.rule{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.rule .n{flex:0 0 36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600}
.rule b{display:block;font-size:18px}
.rule span{color:var(--muted)}
.film{position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:9/16;max-width:360px;margin:0 auto}
.film video{width:100%;height:100%;object-fit:cover}
.grid2{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media(min-width:760px){.grid2{grid-template-columns:1.1fr .9fr}}
footer{margin-top:64px;padding:28px 0 48px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
footer p{margin:6px 0}
/* quiz */
.progress{height:4px;background:var(--line);border-radius:4px;overflow:hidden;margin:8px 0 28px}
.progress i{display:block;height:100%;background:var(--orange);width:0;transition:width .3s}
.q{font-size:clamp(24px,4.5vw,34px);line-height:1.15;font-weight:600;letter-spacing:-.01em;margin:0 0 22px}
.opts{display:grid;gap:12px}
.opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);padding:16px 18px;font:inherit;font-size:17px;color:var(--ink);cursor:pointer;min-height:56px}
.opt:hover{border-color:var(--ink)}
.opt.sel{border-color:var(--ink);background:#EEF4F3}
.opt .k{flex:0 0 26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:12px;font-weight:600}
.nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px}
.linkbtn{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;padding:8px 0}
.field{display:grid;gap:6px;margin:14px 0}
.field label{font-size:14px;font-weight:600}
.field input{font:inherit;font-size:17px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink)}
.field input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.err{color:#A3321B;font-size:14px;min-height:20px}
.hide{display:none!important}
.fade{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* result */
.score{display:flex;align-items:center;gap:22px;margin:18px 0 8px}
.ring{width:110px;height:110px;flex:0 0 110px}
.score .big{font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1}
.score .seg{color:var(--orange);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px}
.card + .card{margin-top:14px}
ul.clean{padding-left:20px;margin:8px 0}
ul.clean li{margin:6px 0}