:root{--paper:#f8f7f2;
    --navy:#182d42;
    --teal:#113c65;
    --red:#A22136;
    --lavender:#ebe6fa;
    --muted:#526274;
    --line:#d5dcd9}*{box-sizing:border-box}
body
{
    margin:0;
    background:var(--paper);
    color:var(--navy);
    font-family:system-ui,-apple-system,Segoe UI,sans-serif;
    line-height:1.6}
header{
    max-width:1120px;
    margin:auto;
    padding:25px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px}.brand{
                 font-size:29px;
                 font-weight:800;
                 text-decoration:none;
                 color:var(--navy);
                 letter-spacing:-1.5px}.brand span{
                                                        color:var(--teal)}.tag{
                                                                                      font-size:13px;
                                                                                      color:var(--muted)}
main{
    max-width:720px;
    min-height:520px;
    margin:30px auto;
    padding:0 24px}
main:focus{
    outline:none}
.card{
    background:#fff;
    border:1px solid #e4e5df;
    border-radius:28px;
    padding:42px;
    box-shadow:0 12px 45px #182d4206}
.eyebrow{
    text-transform:uppercase;
    font-size:12px;
    font-weight:750;
    letter-spacing:2px;
    color:var(--red)}
h1{font-size:clamp(30px,5vw,46px);
    line-height:1.17;
    letter-spacing:-1.4px;
    margin:18px 0}h2{font-size:27px;
                      line-height:1.35;
                      letter-spacing:-.5px}
p{
    color:var(--muted)}
.intro{
    font-size:18px}
.art{
    width:100px;
    height:100px;
    border-radius:32px;
    background:var(--lavender);
    display:grid;
    place-items:center;
    font-size:44px;
    margin-bottom:30px;
    color:var(--teal)}
.chips{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:25px 0}
.chip{
    background:var(--lavender);
    border-radius:25px;
    padding:5px 13px;
    font-size:12px}
.actions{display:flex;
    justify-content:space-between;
    gap:12px;margin-top:30px}
button{
    font:inherit;font-weight:650;min-height:50px;
    padding:12px 23px;border-radius:13px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}
button.primary{background:var(--teal);color:white;border-color:var(--teal)}
button:hover{filter:brightness(.94)}
button:disabled{opacity:.45;cursor:not-allowed}:focus-visible{outline:3px solid #7256ad;outline-offset:4px}.small{font-size:13px}
.progress-label{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:10px}
progress{width:100%;height:8px;accent-color:var(--red);display:block;margin-bottom:32px}
progress::-webkit-progress-bar{background:#e9ece8;border-radius:8px}
progress::-webkit-progress-value{background:var(--teal);border-radius:8px}
fieldset{border:0;padding:0;margin:0}
legend{font-size:28px;line-height:1.35;font-weight:700;margin-bottom:25px;letter-spacing:-.5px}
.option{display:flex;
    gap:13px;
    align-items:center;
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px;
    margin:12px 0;cursor:pointer;
    min-height:58px}
.option:has(input:checked){border:2px solid var(--teal);background:#eef7f4;padding:15px}
.option input{width:20px;height:20px;accent-color:var(--teal)}input[type=range]{width:100%;min-height:50px;accent-color:var(--teal)}
.range-labels{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
output{font-size:46px;font-weight:750;display:block;text-align:center;color:var(--teal)}
.note{padding:20px;background:var(--lavender);border-radius:17px;margin-top:25px}
.note p{margin:8px 0 0;color:var(--navy)}
.orb{width:100px;
    height:100px;
    margin:35px auto;
    background:var(--lavender);
    border-radius:50%;
    box-shadow:0 0 0 18px #f5f2fc;
    animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.16)}}@media(prefers-reduced-motion:reduce){.orb{animation:none}}
footer{
    max-width:720px;
    margin:30px auto;
    padding:0 24px 35px;
    font-size:13px;
    color:var(--muted)}details{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
summary{cursor:pointer;font-weight:650;color:var(--navy);padding:8px 0}li{margin:10px 0}
.reasons{padding-left:22px}.center{text-align:center}@media(max-width:520px){header{padding:20px}
    .tag{max-width:130px;text-align:right;font-size:11px}
    main{margin-top:12px;padding:0 16px;min-height:480px}.card{padding:27px 23px;border-radius:22px}
    legend{font-size:25px}.actions button{padding:12px 17px}
    footer{padding:0 20px 25px}}
progress {
  margin-top: 24px;
  margin-bottom: 0;
}
.option:hover {
  background-color: var(--lavender);
  border-color: var(--teal);
}
.art {
  font-weight: bold;
}