:root { color-scheme: light; --ink:#24332f; --muted:#6f7b74; --cream:#f6f3ed; --card:#fffdf9; --line:#dfe4dc; --sage:#b9cbbd; --deep:#355947; --accent:#e79a65; --shadow:0 24px 60px rgba(38,55,45,.10); }
* { box-sizing:border-box; }
html { min-height:100%; }
body { min-height:100vh; margin:0; background:radial-gradient(circle at 12% 4%, #e7eee6 0, transparent 30%), var(--cream); color:var(--ink); font-family:"DM Sans", sans-serif; -webkit-font-smoothing:antialiased; }
body::before, body::after { position:fixed; z-index:-1; width:170px; height:170px; border:1px solid rgba(53,89,71,.12); border-radius:50%; content:""; }
body::before { top:-90px; right:-60px; }
body::after { bottom:-100px; left:-60px; }
.shell { width:min(100% - 40px, 760px); min-height:100vh; margin:auto; display:flex; flex-direction:column; padding:34px 0 24px; }
.brand-mark { display:flex; align-items:center; gap:9px; color:var(--deep); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.brand-mark__sun { display:grid; place-items:center; width:28px; height:28px; border-radius:10px; background:var(--deep); color:#f9d9a8; font-size:17px; }
.screen { flex:1; display:flex; flex-direction:column; justify-content:flex-start; padding:45px 0 47px; animation:rise .45s ease-out; }
.screen--welcome, .screen--thanks { max-width:620px; }
.eyebrow { margin-bottom:18px; color:#d1774c; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
h1, h2 { margin:0; color:var(--ink); font-family:Fraunces, serif; font-weight:700; letter-spacing:-.035em; text-wrap:balance; }
h1 { max-width:620px; font-size:clamp(42px, 7vw, 70px); line-height:1.02; }
h2 { font-size:clamp(28px, 4vw, 42px); line-height:1.12; }
.intro { max-width:570px; margin:27px 0 0; color:var(--muted); font-size:17px; line-height:1.7; text-wrap:pretty; }
.welcome-meta { display:flex; flex-wrap:wrap; gap:22px; margin:33px 0 40px; color:#617167; font-size:13px; }
.welcome-meta div { display:flex; align-items:center; gap:8px; }
.meta-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#e1ebe1; color:var(--deep); font-size:15px; }
.button { min-height:48px; padding:0 21px; border:0; border-radius:15px; font:600 14px "DM Sans", sans-serif; cursor:pointer; transition:transform .15s ease, background-color .2s ease, color .2s ease, opacity .2s ease, box-shadow .2s ease; }
.button:active { transform:scale(.96); }
.button:focus-visible, .choice:focus-within { outline:3px solid rgba(231,154,101,.45); outline-offset:3px; }
.button--primary { background:var(--deep); color:white; box-shadow:0 9px 20px rgba(53,89,71,.16); }
.button--primary:hover { background:#294c39; box-shadow:0 12px 25px rgba(53,89,71,.23); }
.button--primary:disabled { background:#cbd4cb; box-shadow:none; cursor:not-allowed; opacity:.85; }
.button--large { min-height:58px; padding:0 25px; font-size:15px; }
.button--ghost { background:transparent; color:#68756d; }
.button--ghost:hover { background:#e9eee8; color:var(--deep); }
.survey-topline { display:flex; justify-content:space-between; margin-bottom:12px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.progress-track { height:6px; overflow:hidden; border-radius:8px; background:#e1e7df; }
.progress-bar { width:11%; height:100%; border-radius:inherit; background:var(--accent); transition:width .35s ease-out; }
.question-card { margin-top:36px; padding:38px; border:1px solid rgba(160,177,163,.43); border-radius:28px; background:rgba(255,253,249,.88); box-shadow:var(--shadow); }
.question-number { margin-bottom:30px; color:var(--accent); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.question-hint { margin:12px 0 24px; color:var(--muted); font-size:14px; }
#question-form { display:grid; gap:11px; }
.choice { position:relative; display:flex; align-items:flex-start; gap:13px; min-height:54px; padding:15px 17px; border:1px solid var(--line); border-radius:15px; background:#fff; cursor:pointer; transition:border-color .18s ease, background-color .18s ease, transform .15s ease; }
.choice:hover { border-color:#9bb2a0; background:#fbfcf9; }
.choice:has(input:checked) { border-color:var(--deep); background:#edf4ed; }
.choice input { position:absolute; width:1px; height:1px; opacity:0; }
.choice__indicator { flex:0 0 auto; display:grid; place-items:center; width:22px; height:22px; margin-top:0; border:1.5px solid #bdc9bd; border-radius:50%; color:transparent; font-size:13px; font-weight:700; transition:background-color .18s ease, border-color .18s ease, color .18s ease; }
.choice:has(input[type="checkbox"]) .choice__indicator { border-radius:7px; }
.choice:has(input:checked) .choice__indicator { border-color:var(--deep); background:var(--deep); color:white; }
.choice__label { padding-top:1px; color:#42534a; font-size:15px; line-height:1.4; }
.choice__other { display:none; width:100%; margin-top:8px; padding:8px 0 4px; border:0; border-bottom:1px solid #b8c8ba; outline:0; background:transparent; color:var(--ink); font:14px "DM Sans", sans-serif; }
.choice:has(input:checked) .choice__other { display:block !important; }
.choice__other:focus { border-color:var(--deep); }
.choice--below { margin-top:2px; }
.text-answer:disabled { cursor:not-allowed; background:#f0f2ee; opacity:.72; }
.text-answer { width:100%; min-height:150px; resize:vertical; padding:16px; border:1px solid var(--line); border-radius:15px; outline:0; color:var(--ink); background:white; font:15px/1.55 "DM Sans", sans-serif; }
.text-answer:focus { border-color:var(--deep); box-shadow:0 0 0 3px rgba(53,89,71,.1); }
.text-counter { margin-top:8px; color:var(--muted); font-size:12px; text-align:right; }
.survey-actions { display:flex; justify-content:space-between; align-items:center; margin-top:22px; }
.survey-actions .button--primary { min-width:120px; }
.thanks-icon { display:grid; place-items:center; width:72px; height:72px; margin-bottom:28px; border-radius:24px; background:var(--deep); color:#f8d8a6; font-size:36px; box-shadow:0 12px 30px rgba(53,89,71,.18); }
.save-status { margin:28px 0 20px; padding:13px 16px; border-radius:12px; background:#e8f0e8; color:#4d6555; font-size:13px; }
.save-status.is-error { background:#fae8df; color:#a25c3f; }
footer { color:#97a39a; font-size:12px; text-align:center; } footer span { margin:0 6px; color:#d2a582; }
.is-hidden { display:none !important; }
@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:600px) { .shell { width:min(100% - 28px, 760px); padding-top:22px; } .screen { padding:38px 0 44px; } h1 { font-size:42px; } .question-card { margin-top:25px; padding:25px 18px 22px; border-radius:22px; } .question-number { margin-bottom:23px; } .survey-actions { margin-top:14px; } .welcome-meta { gap:12px; margin-bottom:30px; } .button--large { width:100%; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }