:root{--paper:#f6f1e9;--ink:#202820;--muted:#70756b;--green:#294536;--lime:#d4e488;--coral:#ed9e83;--line:#dcd8ce;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--mono:'DM Mono',monospace}*{box-sizing:border-box}html{min-height:100%;background:var(--paper);scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;background:radial-gradient(ellipse at 18% 8%,rgba(255,255,255,.72),transparent 40%),var(--paper)}button{font:inherit}.page-shell{width:min(1180px,calc(100% - 72px));min-height:100vh;margin:auto;display:flex;flex-direction:column}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(32,40,32,.13)}.wordmark{text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:-.04em;font-size:16px;display:flex;align-items:center;gap:8px}.wordmark-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--lime);font-size:16px;color:var(--green)}.top-note,.tiny-note,.intro-bottom,.site-footer,.progress-count,.art-caption span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.top-note{color:var(--muted);display:flex;align-items:center;gap:8px}.live-dot{width:7px;height:7px;border-radius:50%;background:#7d9a55;box-shadow:0 0 0 3px rgba(125,154,85,.15)}.main-content{flex:1;display:flex;align-items:center}.intro{width:100%;min-height:600px;display:grid;grid-template-columns:1fr .9fr;align-items:center;position:relative;padding:50px 0 80px}.intro-copy{position:relative;z-index:2;max-width:540px}.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.095em;text-transform:uppercase;color:#72776c;display:flex;align-items:center;gap:10px;margin:0 0 26px}.eyebrow-line{display:inline-block;width:24px;height:1px;background:#7d8e61}.intro h1,.quiz h2,.result h2{font-size:clamp(56px,7.5vw,92px);line-height:.99;letter-spacing:-.075em;font-weight:600;margin:0;font-family:var(--serif)}h1 em,h2 em{font-weight:600;color:#657d50}.mobile-break{display:none}.intro-text{font-size:15px;line-height:1.8;color:#62675d;max-width:410px;margin:25px 0 25px}.button{border:0;border-radius:4px;min-height:54px;padding:0 23px;display:inline-flex;align-items:center;justify-content:center;gap:32px;font-size:13px;font-weight:700;letter-spacing:.005em;cursor:pointer;transition:transform .2s ease,background .2s ease,opacity .2s ease}.button:hover:not(:disabled){transform:translateY(-2px)}.button:active:not(:disabled){transform:translateY(0) scale(.98)}.button:focus-visible,.text-button:focus-visible,.option:focus-visible{outline:3px solid #9fb766;outline-offset:3px}.button-dark{background:var(--green);color:#fff}.button-dark:hover:not(:disabled){background:#355b43}.button:disabled{opacity:.4;cursor:not-allowed}.tiny-note{font-size:9px;color:#898c82;margin-top:18px}.intro-art{height:470px;position:relative;overflow:hidden;background:#e9e5d8;border-radius:48% 48% 2px 2px / 40% 40% 2px 2px;margin-left:14px;align-self:center;animation:rise-in .8s .1s both}.sun-disc{position:absolute;width:195px;height:195px;background:#e5a17e;border-radius:50%;top:42px;right:66px;opacity:.88}.art-stamp{position:absolute;top:32px;left:30px;font-family:var(--mono);font-size:9px;line-height:1.5;letter-spacing:.08em;border:1px solid rgba(32,40,32,.5);border-radius:50%;width:58px;height:58px;display:grid;place-content:center;text-align:center;transform:rotate(-12deg);z-index:2}.sparkle{position:absolute;color:#768b5e;animation:twinkle 3s ease-in-out infinite}.sparkle-one{top:88px;left:116px;font-size:20px}.sparkle-two{top:179px;right:43px;font-size:15px;animation-delay:.7s}.sparkle-three{top:73px;right:39px;font-size:12px;animation-delay:1.3s}.tub{position:absolute;bottom:102px;left:50%;transform:translateX(-50%);width:72%;height:148px;z-index:3}.tub-rim{position:absolute;top:0;left:0;width:100%;height:23px;border:7px solid #fbf8ef;border-radius:50%;background:#8fa18a;z-index:2;box-shadow:0 3px 7px #43524430}.water{position:absolute;top:10px;left:10px;right:10px;z-index:3;display:flex;justify-content:space-around;color:#ecf3d6;font-family:var(--serif);font-size:32px;opacity:.8}.water span:nth-child(2){transform:translateY(5px)}.tub-front{position:absolute;top:12px;left:0;width:100%;height:108px;background:linear-gradient(180deg,#c7cbb0,#a9b39b);border-radius:10px 10px 44px 44px;box-shadow:inset 0 -8px 0 rgba(78,99,72,.14),0 14px 20px #44483c20}.tub-foot{position:absolute;width:14px;height:31px;background:#8c8a73;bottom:-18px;border-radius:0 0 4px 4px}.tub-foot.left{left:15%}.tub-foot.right{right:15%}.rubber-duck{position:absolute;z-index:4;top:-30px;right:17%;font-size:46px;transform:rotate(12deg);filter:drop-shadow(2px 5px 2px #3333);animation:float 3.2s ease-in-out infinite}.plant{position:absolute;bottom:99px;left:10%;width:55px;height:100px}.plant b{position:absolute;bottom:0;left:3px;width:48px;height:40px;background:#bd8168;border-radius:4px 4px 12px 12px}.plant i{position:absolute;bottom:31px;left:26px;width:15px;height:53px;background:#748765;border-radius:100% 0 100% 0;transform-origin:bottom;transform:rotate(-37deg)}.plant i:nth-child(2){transform:rotate(8deg);height:70px}.plant i:nth-child(3){transform:rotate(48deg);height:52px}.bubble{position:absolute;border:1px solid #fff9;border-radius:50%;animation:float 4s ease-in-out infinite}.bubble-a{width:16px;height:16px;top:176px;left:28%}.bubble-b{width:9px;height:9px;top:210px;left:22%;animation-delay:1s}.art-caption{position:absolute;bottom:28px;left:0;width:100%;text-align:center;font-family:var(--serif);font-style:italic;font-size:16px;color:#485344;line-height:1.6}.art-caption span{text-transform:none;letter-spacing:0;font-style:normal;font-size:9px;color:#828579}.intro-bottom{position:absolute;bottom:29px;left:0;right:0;display:flex;justify-content:space-between;color:#96968a;font-size:8px}.quiz{width:min(760px,100%);margin:58px auto 72px;animation:rise-in .5s ease both}.quiz-head{display:flex;align-items:flex-end;justify-content:space-between}.quiz .eyebrow{margin-bottom:18px}.quiz h2{font-size:clamp(36px,5vw,54px);letter-spacing:-.055em;line-height:1.1;max-width:620px}.quiz h2 em{font-style:italic}.progress-count{display:flex;gap:5px;align-items:center;padding-bottom:7px;color:#85877d;font-size:11px}.progress-count span:first-child{font-size:21px;color:var(--ink)}.progress-divider{color:#bbb8ae}.progress-track{height:2px;background:#dedbd1;margin:28px 0 33px}.progress-fill{height:100%;width:20%;background:#74865b;transition:width .45s cubic-bezier(.2,.7,.2,1)}.question-stage{min-height:240px}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.option{min-height:72px;border:1px solid #d9d7cd;border-radius:5px;padding:13px 17px;background:rgba(255,255,255,.34);display:flex;align-items:center;gap:13px;text-align:left;cursor:pointer;transition:border .2s ease,background .2s ease,transform .2s ease}.option:hover{transform:translateY(-2px);border-color:#8a9a70}.option.selected{background:#e8edd6;border-color:#758858;box-shadow:inset 0 0 0 1px #758858}.option-emoji{font-size:23px;width:32px;text-align:center}.option-copy{display:flex;flex-direction:column;gap:3px}.option-title{font-size:13px;font-weight:700}.option-sub{font-size:11px;color:#777b70;line-height:1.45}.option-check{width:18px;height:18px;margin-left:auto;border:1px solid #c2c3b9;border-radius:50%;display:grid;place-items:center;font-size:10px;color:transparent;transition:.2s}.selected .option-check{background:var(--green);border-color:var(--green);color:#fff}.slider-wrap{background:#eeece4;border-radius:6px;padding:22px 24px 20px}.slider-labels{display:flex;justify-content:space-between;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:9px;color:#777a70}.budget-value{text-align:center;font-family:var(--serif);font-size:48px;letter-spacing:-.05em;margin:13px 0 4px;color:#536c45}.budget-caption{text-align:center;font-size:12px;color:#777b70;margin-bottom:19px}.budget-range{appearance:none;width:100%;height:4px;border-radius:5px;background:linear-gradient(90deg,#849668 0%,#849668 var(--range-progress,50%),#d4d2c8 var(--range-progress,50%),#d4d2c8 100%);outline:none}.budget-range::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:var(--green);border:4px solid #f7f4eb;box-shadow:0 0 0 1px var(--green);cursor:grab}.budget-range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--green);border:4px solid #f7f4eb;box-shadow:0 0 0 1px var(--green);cursor:grab}.slider-ticks{display:flex;justify-content:space-between;padding:10px 1px 0;font-family:var(--mono);font-size:9px;color:#909085}.toggle-card{display:flex;align-items:center;gap:17px;max-width:490px;margin:14px auto 0;background:#eeeae0;border:1px solid #e1ddd2;border-radius:5px;padding:17px 19px}.toggle{position:relative;flex:0 0 48px;width:48px;height:27px;appearance:none;border-radius:99px;background:#c8c8bb;cursor:pointer;transition:background .25s}.toggle:checked{background:#718650}.toggle::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;background:white;border-radius:50%;box-shadow:0 1px 4px #2222;transition:transform .25s}.toggle:checked::after{transform:translateX(21px)}.toggle-copy strong{display:block;font-size:13px}.toggle-copy span{display:block;font-size:11px;color:#777b70;line-height:1.5;margin-top:3px}.consent{max-width:490px;margin:12px auto 0;color:#929187;font-size:10px;line-height:1.5;text-align:center}.quiz-footer{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.quiz-footer p{font-size:10px;color:#929187}.text-button{border:0;background:none;padding:10px 0;color:#68734f;font-size:12px;font-weight:600;cursor:pointer}.text-button:disabled{opacity:.35;cursor:default}.next-button{min-width:142px;min-height:48px}.result{width:min(890px,100%);margin:48px auto;display:grid;grid-template-columns:1fr 200px;gap:48px;align-items:center;animation:rise-in .55s ease both}.result-card{position:relative;padding:44px 48px;background:#f9f7f1;border:1px solid #e5e1d8;box-shadow:0 18px 45px #44421b0a}.result-card .eyebrow{margin-bottom:19px}.result h2{font-size:clamp(49px,6vw,70px);line-height:.98}.result h2 em{font-size:.83em}.result-lead{font-size:13px;color:#767a70;margin:19px 0 14px}.result-stamp{position:absolute;right:33px;top:33px;width:68px;height:68px;border:1px solid #db9881;color:#bd785f;border-radius:50%;display:grid;place-content:center;text-align:center;font-family:var(--mono);font-size:7px;line-height:1.6;letter-spacing:.07em;transform:rotate(12deg)}.result-summary{border-top:1px solid #e3dfd5}.summary-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;padding:12px 0;border-bottom:1px solid #e3dfd5}.summary-icon{font-size:16px}.summary-label{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#898b80}.summary-value{font-size:11px;font-weight:700;text-align:right}.result-note{display:flex;gap:10px;background:#edf0df;padding:12px 14px;margin-top:17px;color:#526046;border-radius:3px;font-size:11px;line-height:1.5}.result-note>span{font-size:14px}.result-note p{margin:0}.ask-line{font-size:14px;line-height:1.6;margin:18px 0 16px}.result-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.result-actions .button{min-height:49px;gap:20px;font-size:12px}.result-actions .text-button{font-size:10px}.share-status{min-height:15px;margin:10px 0 0;font-size:10px;color:#68734f}.result-aside{text-align:center;color:#70756b}.aside-illustration{font-size:88px;filter:grayscale(.2);animation:float 4s ease-in-out infinite}.result-aside p{font-family:var(--serif);font-size:18px;line-height:1.45;color:#485344}.result-aside p em{color:#708255}.result-aside>span{font-family:var(--mono);font-size:8px;line-height:1.6;text-transform:uppercase;letter-spacing:.04em}.site-footer{height:56px;flex:0 0 56px;border-top:1px solid rgba(32,40,32,.13);display:flex;align-items:center;justify-content:space-between;color:#929187;font-size:8px}.hidden{display:none!important}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,15px);opacity:0;pointer-events:none;padding:12px 18px;border-radius:4px;background:var(--green);color:#fff;font-size:12px;box-shadow:0 6px 20px #0002;transition:.25s;z-index:10}.toast.visible{opacity:1;transform:translate(-50%,0)}@keyframes rise-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(2deg)}}@keyframes twinkle{0%,100%{opacity:.65;transform:scale(.9) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}@media(max-width:760px){.page-shell{width:calc(100% - 40px)}.topbar{height:65px}.wordmark{font-size:14px}.top-note{font-size:8px}.intro{grid-template-columns:1fr;padding:52px 0 72px;gap:35px;min-height:auto}.intro-copy{max-width:500px}.intro h1{font-size:clamp(60px,13vw,84px)}.mobile-break{display:block}.intro-text{font-size:14px;max-width:390px;margin:20px 0}.intro-art{height:360px;width:min(100%,400px);justify-self:center;margin:0}.sun-disc{width:160px;height:160px;right:55px;top:32px}.tub{bottom:83px;height:125px}.tub-front{height:92px}.plant{transform:scale(.85);transform-origin:bottom left;left:8%;bottom:81px}.art-caption{bottom:20px;font-size:14px}.intro-bottom{bottom:20px;font-size:7px}.quiz{margin:42px auto 52px}.quiz-head{align-items:flex-end}.quiz h2{font-size:clamp(35px,8vw,48px)}.quiz .eyebrow{font-size:8px}.progress-count{font-size:9px}.question-stage{min-height:280px}.options{gap:9px}.option{min-height:83px;padding:10px;gap:8px}.option-emoji{font-size:20px;width:25px}.option-title{font-size:11px}.option-sub{font-size:9px}.quiz-footer{gap:10px}.quiz-footer p{display:none}.next-button{min-width:125px}.result{grid-template-columns:1fr;gap:8px;margin:30px auto}.result-card{padding:35px 25px}.result-stamp{width:56px;height:56px;right:20px;top:20px;font-size:6px}.result h2{font-size:58px}.result-aside{display:none}.site-footer{font-size:7px}.site-footer span:last-child{text-align:right}}@media(max-width:380px){.page-shell{width:calc(100% - 30px)}.top-note{font-size:7px}.intro h1{font-size:58px}.options{grid-template-columns:1fr}.question-stage{min-height:390px}.option{min-height:67px}.quiz{margin-top:28px}.result-card{padding:32px 19px}.result h2{font-size:51px}.result-actions{gap:8px}.result-actions .button{width:100%;justify-content:space-between}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:380px){.quiz h2{font-size:34px}}

/* Cartoon palette and chunky, friendly shapes */
:root{--paper:#fff6d8;--ink:#26324a;--muted:#58647a;--green:#285d70;--lime:#ffe06b;--coral:#ff806d;--line:#293852}
body{background-color:var(--paper);background-image:radial-gradient(#f6c95e 1.8px,transparent 2px),radial-gradient(ellipse at 80% 6%,#fff 0,transparent 36%);background-size:28px 28px,auto;background-position:0 0,0 0}
.topbar{border-bottom:3px solid var(--ink)}
.wordmark{letter-spacing:-.06em}.wordmark-icon{width:31px;height:31px;background:#ff806d;color:#fff;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);transform:rotate(-9deg)}
.top-note{background:#fff;border:2px solid var(--ink);padding:8px 12px;border-radius:99px;box-shadow:3px 3px 0 var(--ink);color:var(--ink)}
.live-dot{background:#ff806d;box-shadow:0 0 0 3px #ff806d44}
.eyebrow{color:#43506b;font-weight:500}.eyebrow-line{height:3px;background:var(--coral);border-radius:5px}
.intro h1,.quiz h2,.result h2{font-family:var(--sans);font-weight:800;letter-spacing:-.075em}.intro h1{transform:rotate(-1.5deg);text-shadow:3px 3px 0 #fff,5px 5px 0 #f4ca61}.intro h1 em,.quiz h2 em,.result h2 em{color:#ed675d;font-style:normal}
.intro-text{color:#44516a;font-weight:500}
.button{border:2px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);font-weight:800}.button:hover:not(:disabled){box-shadow:6px 6px 0 var(--ink)}.button:active:not(:disabled){box-shadow:1px 1px 0 var(--ink)}
.button-dark{background:#54c5bd;color:#19374a}.button-dark:hover:not(:disabled){background:#75d8ca}
.intro-art{background:#8de0d4;border:3px solid var(--ink);border-radius:46% 46% 24px 24px / 34% 34% 24px 24px;box-shadow:8px 8px 0 var(--ink);transform:rotate(1deg)}.sun-disc{background:#ffbd59;border:3px solid var(--ink)}.art-stamp{background:#fff8d8;border:2px solid var(--ink);font-weight:700;box-shadow:2px 2px 0 var(--ink)}
.tub-rim{background:#69c9cb;border:6px solid #fff;border-radius:50%;box-shadow:0 0 0 2px var(--ink)}.tub-front{background:linear-gradient(180deg,#ff9280,#f36d70);border:3px solid var(--ink);border-radius:10px 10px 46px 46px;box-shadow:inset 0 -8px 0 #dc5b64,4px 6px 0 #26324a}.tub-foot{background:#f4ba4b;border:2px solid var(--ink)}.water{color:#fff}.rubber-duck{font-size:54px;filter:drop-shadow(2px 3px 0 #26324a)}
.art-caption{font-family:var(--sans);font-weight:800;color:#26324a}.art-caption span{color:#43506b}
.progress-track{height:8px;border:2px solid var(--ink);border-radius:99px;background:#fff}.progress-fill{background:#ff806d;border-radius:99px}.progress-count span:first-child{font-weight:800;color:#ed675d}
.option{background:#fffdf2;border:2px solid var(--ink);border-radius:15px;box-shadow:3px 3px 0 var(--ink);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.option:hover{border-color:var(--ink);transform:translate(-1px,-2px) rotate(-.5deg);box-shadow:5px 5px 0 var(--ink)}.option.selected{background:#c8f0df;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink),3px 3px 0 var(--ink)}.option:nth-child(4n+2){background-color:#fff0e4}.option:nth-child(4n+3){background-color:#f2edff}.option:nth-child(4n){background-color:#e4f8f5}.option-check{border:2px solid var(--ink)}.selected .option-check{background:#ff806d;border-color:var(--ink)}
.slider-wrap,.toggle-card{background:#fffdf2;border:2px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink)}.budget-value{font-family:var(--sans);font-weight:800;color:#ed675d;text-shadow:2px 2px 0 #ffe06b}.budget-range{background:linear-gradient(90deg,#ff806d 0%,#ff806d var(--range-progress,50%),#d9e1df var(--range-progress,50%),#d9e1df 100%)}.budget-range::-webkit-slider-thumb{background:#ffe06b;border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}.budget-range::-moz-range-thumb{background:#ffe06b;border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.quiz-footer{border-top:2px dashed #78869a}.text-button{color:#285d70;font-weight:800}.result-card{background:#fffdf2;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink)}.result-stamp{background:#fff0ab;border:2px solid #ed675d;color:#ce514f;font-family:var(--sans);font-weight:800}.result-summary{border-top:2px solid var(--ink)}.summary-row{border-bottom:1px dashed #9aa4ac}.summary-label{color:#59667b}.result-note{background:#d8f5e9;border:2px solid var(--ink);border-radius:14px;color:#26324a}.result-aside p{font-family:var(--sans);font-weight:700;color:#26324a}.result-aside p em{color:#ed675d}.site-footer{border-top:3px solid var(--ink);color:#5f6c7d}
@media(max-width:760px){.top-note{box-shadow:2px 2px 0 var(--ink)}.intro-art{box-shadow:5px 5px 0 var(--ink)}.result-card{box-shadow:5px 5px 0 var(--ink)}}

/* Briques de construction : clin d'œil jouet, sans reprendre de logo */
:root{--paper:#fff8dc;--ink:#17243b;--green:#1767bd;--lime:#ffdf24;--coral:#ed302b;--line:#17243b}
body{background-color:#fff8dc;background-image:radial-gradient(#f3cc45 1.7px,transparent 2px),linear-gradient(135deg,#fffbee 25%,transparent 25%,transparent 75%,#fffbee 75%);background-size:24px 24px,48px 48px}
.topbar,.site-footer{border-color:#17243b}
.wordmark-icon{background:#ffd829;color:#17243b;border-radius:8px;transform:rotate(-5deg);box-shadow:2px 3px 0 #17243b}
.button{border-radius:9px;box-shadow:0 5px 0 #17243b,0 8px 0 #17243b22;position:relative}
.button-dark{background:#1767bd;color:#fff}
.button-dark:hover:not(:disabled){background:#287de0}
.button-dark::before,.button-dark::after{content:'';position:absolute;top:-6px;width:13px;height:7px;border:2px solid #17243b;border-bottom:0;background:inherit;border-radius:5px 5px 0 0}
.button-dark::before{left:20px}.button-dark::after{left:42px}
.intro h1{ text-shadow:3px 3px 0 #ffd829,6px 6px 0 #ed302b;transform:rotate(-1deg)}
.intro-art{background-color:#54c9e8;background-image:radial-gradient(#ffffffa8 2px,transparent 2.5px);background-size:22px 22px;border:4px solid #17243b;border-radius:28px;box-shadow:9px 10px 0 #17243b}
.sun-disc{background:#ffd829;border-color:#17243b;box-shadow:4px 5px 0 #17243b}
.tub-rim{background:#3c9cf0;box-shadow:0 0 0 2px #17243b}
.tub-front{background:linear-gradient(180deg,#ed302b,#d52029);border-color:#17243b;box-shadow:inset 0 -8px 0 #b71826,4px 6px 0 #17243b}
.tub-front::before,.tub-front::after{content:'';position:absolute;width:34px;height:14px;top:-18px;border:2px solid #17243b;border-bottom:0;border-radius:10px 10px 0 0;background:#ed302b}
.tub-front::before{left:22%}.tub-front::after{right:22%}
.tub-foot{background:#ffd829;border-color:#17243b}
.tub{isolation:isolate}
.rubber-duck{position:absolute;z-index:5;top:-48px;right:16%;width:78px;height:72px;overflow:visible;animation:float 3.2s ease-in-out infinite;filter:drop-shadow(2px 3px 0 #17243b)}
.duck-body{fill:#fff0f2;stroke:#17243b;stroke-width:3;stroke-linejoin:round}
.duck-wing{fill:#f8cbd5;stroke:#17243b;stroke-width:2.5;stroke-linejoin:round}
.duck-eye{fill:#17243b}
.option{position:relative;border:2px solid #17243b;border-radius:9px;box-shadow:0 4px 0 #17243b;background:#fffdf2}
.option::before{content:'';position:absolute;top:-6px;left:17px;width:17px;height:6px;border:2px solid #17243b;border-bottom:0;border-radius:6px 6px 0 0;background:inherit}
.option:hover{border-color:#17243b;box-shadow:0 6px 0 #17243b;transform:translateY(-2px)}
.option.selected{background:#c7f0d2;border-color:#17243b;box-shadow:inset 0 0 0 1px #17243b,0 4px 0 #17243b}
.option:nth-child(4n+2){background-color:#fff0a8}.option:nth-child(4n+3){background-color:#ffd6ce}.option:nth-child(4n){background-color:#cdefff}
.progress-track{border-radius:6px;background:#fff;border:2px solid #17243b;height:10px}.progress-fill{background:#ed302b}
.slider-wrap,.toggle-card{border:2px solid #17243b;border-radius:10px;box-shadow:0 5px 0 #17243b;background:#fffdf2}
.budget-value{color:#1767bd;text-shadow:2px 2px 0 #ffd829}
.result-card{background:#fffdf2;border:3px solid #17243b;border-radius:12px;box-shadow:0 7px 0 #17243b,0 11px 0 #17243b22}
.result-stamp{background:#ffd829;border:2px solid #17243b;color:#17243b;border-radius:9px;transform:rotate(5deg)}
.result-note{background:#c7f0d2;border:2px solid #17243b;border-radius:9px;display:block;text-align:center;padding:14px 18px}
.result-note>span{display:none}
.result-note p{margin:0;text-align:center}
@media(max-width:760px){.intro-art{box-shadow:6px 7px 0 #17243b}.result-card{box-shadow:0 5px 0 #17243b}.rubber-duck{width:69px;height:64px;top:-43px;right:13%}}

/* Simplified toy-block look: clean primary colors, no pretend studs */
.button-dark::before,.button-dark::after,.option::before,.tub-front::before,.tub-front::after{display:none}
.button{border-radius:12px;box-shadow:0 4px 0 #17243b}
.button:hover:not(:disabled){box-shadow:0 6px 0 #17243b}
.button:active:not(:disabled){box-shadow:0 1px 0 #17243b}
.intro-art{background-image:linear-gradient(145deg,#59d4eb 0 48%,#73d9c2 48% 100%);border-radius:24px;box-shadow:7px 7px 0 #17243b}
.sun-disc{box-shadow:3px 3px 0 #17243b}
.option{border-radius:12px;box-shadow:0 3px 0 #17243b}
.option:hover{box-shadow:0 5px 0 #17243b}
.option.selected{box-shadow:inset 0 0 0 1px #17243b,0 3px 0 #17243b}
.result-card{box-shadow:0 5px 0 #17243b}
.quiz{width:min(760px,100%);margin:38px auto 64px}
.quiz-head{display:block}.quiz h2{font-size:clamp(44px,7vw,72px)}.form-intro{margin:16px 0 28px}
.all-options{display:flex;flex-direction:column;gap:20px}
.form-group{padding:19px;background:#fffdf2;border:2px solid #17243b;border-radius:14px;box-shadow:0 4px 0 #17243b}
.group-heading{display:flex;align-items:flex-start;gap:12px;margin:0 0 15px}
.group-emoji{flex:0 0 38px;height:38px;display:grid;place-items:center;background:#ffd829;border:2px solid #17243b;border-radius:10px;font-size:21px}
.group-heading h3{margin:1px 0 3px;font-size:17px;line-height:1.2;font-weight:800;color:#17243b}
.group-heading p{margin:0;color:#59667b;font-size:11px;line-height:1.4}
.form-group .options{display:flex;flex-direction:column;gap:9px}
.toggle-option{position:relative;display:flex;align-items:center;gap:11px;min-height:59px;padding:9px 13px;background:#fff;border:2px solid #17243b;border-radius:10px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}
.toggle-option:nth-child(4n+2){background:#fff5c6}.toggle-option:nth-child(4n+3){background:#ffe2da}.toggle-option:nth-child(4n){background:#ddf5ff}
.toggle-option:hover{transform:translateX(2px);box-shadow:2px 2px 0 #17243b}
.toggle-option .option-emoji{flex:0 0 30px}.toggle-option .option-copy{flex:1}.toggle-option .option-title{font-size:12px}.toggle-option .option-sub{font-size:10px}
.choice-toggle{position:absolute;opacity:0;width:1px;height:1px}
.switch-ui{position:relative;flex:0 0 40px;width:40px;height:23px;border:2px solid #17243b;border-radius:99px;background:#cbd2db;transition:background .18s ease}
.switch-ui::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;border:1px solid #17243b;transition:transform .18s ease}
.choice-toggle:checked+.option-emoji~.switch-ui{background:#48c694}.choice-toggle:checked+.option-emoji~.switch-ui::after{transform:translateX(16px)}
.choice-toggle:focus-visible+.option-emoji{outline:3px solid #1767bd;outline-offset:3px}
.toggle-card{margin:0}.quiz-footer{position:sticky;bottom:8px;background:#fff8dc;border:2px solid #17243b;border-radius:13px;padding:10px 14px;margin-top:23px;box-shadow:0 4px 0 #17243b;z-index:5}
.quiz-footer p{margin:0;line-height:1.45;max-width:390px}
.intro-cta{display:flex;grid-column:2;justify-content:center;margin-top:-42px;z-index:2}
@media(max-width:760px){.intro-cta{display:flex;justify-content:center;grid-column:1;order:3;margin-top:-12px}.intro-art{order:2}.intro-copy{order:1}.intro-bottom{order:4}.intro-cta .button{min-width:220px;justify-content:space-between}}
.local-content-help{margin:14px 0;padding:12px 14px;background:#fff0a8;border:2px solid #17243b;border-radius:10px;font-size:12px;line-height:1.5}
.local-file-button{display:inline-flex;margin:0 8px;padding:6px 10px;background:#1767bd;color:white;border:2px solid #17243b;border-radius:8px;font-weight:800;cursor:pointer}
.local-file-button input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#local-content-status{display:block;margin-top:5px;font-size:10px}
.date-field{display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:700;color:#34425a}
.date-field input{width:100%;max-width:330px;min-height:46px;padding:9px 12px;background:#fff;border:2px solid #17243b;border-radius:9px;font:600 14px var(--sans);color:#17243b}
.temperature-control{padding:14px 16px;background:#fff;border:2px solid #17243b;border-radius:11px}
.temperature-readout{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.temperature-readout strong{font:800 31px var(--sans);color:#1767bd}
.temperature-readout span{font-size:11px;color:#59667b;text-align:right}
.temperature-range{appearance:none;width:100%;height:7px;border:1px solid #17243b;border-radius:99px;background:linear-gradient(90deg,#1767bd 0%,#ff765e var(--range-progress,64%),#d9e1df var(--range-progress,64%),#d9e1df 100%);outline:none}
.temperature-range::-webkit-slider-thumb{appearance:none;width:25px;height:25px;border:3px solid #17243b;border-radius:50%;background:#ffd829;box-shadow:0 2px 0 #17243b;cursor:grab}
.temperature-range::-moz-range-thumb{width:19px;height:19px;border:3px solid #17243b;border-radius:50%;background:#ffd829;box-shadow:0 2px 0 #17243b;cursor:grab}
.radio-option{position:relative;display:flex;align-items:center;gap:11px;min-height:59px;padding:9px 13px;background:#fff;border:2px solid #17243b;border-radius:10px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}
.question-stage .options{display:flex;flex-direction:column;gap:10px;padding-right:6px}
.question-stage .toggle-option,.question-stage .radio-option{width:100%}
.choice-control[type="checkbox"]{position:absolute;opacity:0;width:1px;height:1px}
.choice-control[type="checkbox"]:checked+.option-emoji~.switch-ui{background:#48c694}
.choice-control[type="checkbox"]:checked+.option-emoji~.switch-ui::after{transform:translateX(16px)}
.choice-control:focus-visible+.option-emoji{outline:3px solid #1767bd;outline-offset:3px}
.locked-option{cursor:not-allowed;opacity:.8;background:#c7f0d2!important}
.locked-option .switch-ui{background:#48c694}
.locked-option .switch-ui::after{transform:translateX(16px)}
.radio-option:nth-child(4n+2){background:#fff5c6}.radio-option:nth-child(4n+3){background:#ffe2da}.radio-option:nth-child(4n){background:#ddf5ff}
.radio-option:hover{transform:translateX(2px);box-shadow:2px 2px 0 #17243b}
.radio-option .option-emoji{flex:0 0 30px}.radio-option .option-copy{flex:1}.radio-option .option-title{font-size:12px}.radio-option .option-sub{font-size:10px}
.choice-control[type="radio"]{position:absolute;opacity:0;width:1px;height:1px}
.radio-ui{position:relative;flex:0 0 23px;width:23px;height:23px;border:2px solid #17243b;border-radius:50%;background:#fff}
.choice-control[type="radio"]:checked~.radio-ui::after{content:'';position:absolute;inset:4px;border-radius:50%;background:#1767bd}
.choice-control[type="radio"]:focus-visible~.radio-ui{outline:3px solid #1767bd;outline-offset:3px}
@media(max-width:760px){.quiz{margin:27px auto 48px}.form-group{padding:14px}.quiz-footer{gap:10px}.quiz-footer p{font-size:9px}.quiz-footer .button{min-height:46px;gap:10px;padding:0 14px}}

/* Landing page layout: copy beside the tub, invitation directly below it */
.intro{grid-template-columns:minmax(0,.94fr) minmax(360px,1.06fr);column-gap:clamp(28px,5vw,70px);row-gap:22px;align-content:center;min-height:640px;padding:42px 0 76px}
.intro-copy{max-width:520px;grid-column:1;grid-row:1}
.intro-art{grid-column:2;grid-row:1;width:100%;max-width:490px;height:450px;margin:0;justify-self:center}
.intro-cta{grid-column:2;grid-row:2;justify-content:center;margin:0;align-self:start}
.intro-cta .button{min-width:230px;justify-content:space-between}
.intro-bottom{bottom:22px}
@media(max-width:760px){
  .intro{grid-template-columns:minmax(0,1fr);gap:25px;padding:42px 0 76px;min-height:0}
  .intro-copy,.intro-art,.intro-cta{grid-column:1;justify-self:center}
  .intro-copy{grid-row:auto;width:100%;max-width:520px}
  .intro-art{grid-row:auto;width:min(100%,420px);height:350px;margin:0}
  .intro-cta{grid-row:auto;margin:0;align-self:auto}
  .intro-bottom{bottom:20px}
}
/* Intro reading order: headline, illustration, invitation, button */
.intro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:0;padding:44px 0 78px}
.intro-copy{width:100%;max-width:720px;text-align:left}
.intro-copy .eyebrow{justify-content:flex-start;margin-bottom:15px}
.intro h1{font-size:clamp(54px,8vw,78px);line-height:.95}
.intro-art{width:min(100%,500px);height:340px;margin:0;flex:0 0 auto}
.intro-details{width:min(100%,620px);display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:10px}
.intro-text{max-width:590px;margin:0 0 4px}
.intro-cta{display:flex;justify-content:flex-start;margin:0}
.intro-cta .button{min-width:230px;justify-content:space-between}
.intro-details .tiny-note{margin:2px 0 0}
@media(max-width:760px){
  .intro{gap:17px;padding:34px 0 76px}
  .intro-copy{order:1}
  .intro-art{order:2;width:min(100%,400px);height:300px}
  .intro-details{order:3}
  .intro h1{font-size:clamp(48px,12vw,68px)}
  .intro-text{font-size:13px;line-height:1.65}
}
/* Keep the title, illustration, copy and CTA on one shared left edge. */
.intro{width:min(760px,100%);align-items:stretch;gap:18px;margin-inline:auto}
.intro-copy,.intro-details{width:100%;max-width:none}
.intro-copy{width:calc(100% + 8px);margin-right:-8px}
.intro-art{width:100%;max-width:none;height:clamp(290px,42vw,370px);align-self:stretch}
.intro-details{align-items:flex-start;text-align:left;gap:12px}
.intro-cta{justify-content:flex-start}
.intro-bottom{left:0;right:0}
@media(max-width:760px){.intro{width:100%;gap:16px}.intro-art{width:100%;height:clamp(250px,76vw,330px)}}
.intro h1{font-size:clamp(68px,10vw,104px);line-height:.91}
.intro-details{gap:22px}
.intro-details .intro-text{font-size:clamp(17px,2.1vw,20px);line-height:1.75;margin:12px 0 10px;max-width:650px}
.intro-details .tiny-note{margin-top:2px}
@media(max-width:760px){.intro h1{font-size:clamp(58px,14vw,82px)}.intro-details{gap:20px}.intro-details .intro-text{font-size:17px;line-height:1.7;margin:10px 0 12px}}
.intro h1{width:max-content;max-width:calc(100vw - 40px);letter-spacing:-.06em}
@media(max-width:760px){.intro-copy{width:100%;margin-right:0}.intro h1{max-width:100%;font-size:clamp(58px,15vw,88px)}}
.intro h1{font-size:clamp(76px,11vw,116px);letter-spacing:-.065em;transform:rotate(-1deg) scaleX(1.08);transform-origin:left center}
.faucet-icon{width:36px;height:36px;object-fit:contain;flex:none;filter:drop-shadow(1px 2px 0 #17243b33)}
@media(max-width:760px){.intro h1{font-size:clamp(64px,17vw,96px);transform:rotate(-1deg) scaleX(1.04)}}

/* The slide area has one height; long option lists scroll inside it. */
.question-stage{height:420px;min-height:420px;overflow-y:auto;overscroll-behavior:contain}
.quiz-footer{min-height:68px}
.quiz-footer p{min-height:2.8em;max-height:2.8em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
@media(max-width:760px){.question-stage{height:clamp(280px,calc(100svh - 310px),520px);min-height:clamp(280px,calc(100svh - 310px),520px)}.quiz-footer{min-height:64px}}
@media(max-width:760px){
  .quiz-footer{position:fixed;left:20px;right:20px;bottom:0;z-index:20;margin:0;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .question-stage .options{padding-bottom:84px}
}


/* Make the intro invitation easier to find and tap. */
.intro-cta{width:100%;justify-content:center}
.intro-cta .button{position:relative;min-width:min(340px,100%);min-height:66px;padding:0 25px;font-size:16px;justify-content:center;gap:8px}
.intro-cta .faucet-icon{position:static;width:44px;height:44px;filter:grayscale(1)}


/* iPhone layouts: fit the full quiz between the safe areas and enlarge the verdict. */
@media(max-width:600px){
  .page-shell{width:calc(100% - 32px);min-height:100vh;min-height:100svh;min-height:100dvh}
  .topbar{height:58px;flex:0 0 58px;gap:10px}
  .wordmark{font-size:12px;gap:6px;min-width:0}
  .wordmark-icon{width:23px;height:23px;flex:0 0 23px}
  .top-note{font-size:7px;text-align:right;line-height:1.3}
  .quiz{width:100%;margin:20px auto calc(78px + env(safe-area-inset-bottom));animation:none}
  .quiz-head{display:flex;align-items:flex-start;gap:8px}
  .quiz-head>div:first-child{min-width:0}
  .quiz .eyebrow{font-size:7px;letter-spacing:.06em;margin-bottom:9px}
  .quiz h2{font-size:clamp(29px,8vw,40px);line-height:1.04;overflow-wrap:anywhere}
  .progress-count{flex:0 0 auto;padding:0 2px 0 0}
  .progress-count span:first-child{font-size:18px}
  .progress-track{margin:17px 0 18px}
  .question-stage{height:clamp(210px,calc(100dvh - 274px - env(safe-area-inset-bottom)),470px);min-height:210px;overflow-y:auto;scrollbar-width:thin}
  .question-stage .options{gap:8px;padding:0 4px 84px 0}
  .question-stage .radio-option,.question-stage .toggle-option{min-height:58px;padding:8px 10px;gap:9px}
  .question-stage .option-emoji{flex-basis:27px;width:27px;font-size:19px}
  .question-stage .option-title{font-size:12px;line-height:1.25}
  .question-stage .option-sub{font-size:10px;line-height:1.3}
  .form-group{padding:11px}
  .group-heading h3{font-size:15px}
  .group-heading p{font-size:10px}
  .slider-wrap{padding:18px 16px}
  .slider-labels{gap:8px;font-size:8px}
  .slider-labels span:last-child{text-align:right}
  .budget-value{font-size:42px}
  .budget-caption{font-size:11px;line-height:1.4}
  .temperature-control{padding:12px}
  .temperature-readout strong{font-size:28px}
  .temperature-readout span{font-size:10px}
  .quiz-footer{left:16px;right:16px;min-height:60px;gap:12px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-radius:13px 13px 0 0}
  .quiz-footer .text-button{min-height:42px;font-size:12px}
  .quiz-footer .button{min-height:44px;padding:0 14px;font-size:12px}
  .result{display:block;width:100%;margin:22px auto}
  .result-card{padding:clamp(25px,7vw,36px) clamp(18px,5vw,26px);border-width:2px;border-radius:14px;box-shadow:0 4px 0 #17243b}
  .result-card .eyebrow{font-size:8px;margin:0 66px 14px 0}
  .result h2{font-size:clamp(39px,11vw,58px);line-height:.98;overflow-wrap:anywhere}
  .result-lead{font-size:13px;margin:13px 0}
  .result-stamp{width:53px;height:53px;right:14px;top:14px;font-size:5px}
  .result-summary{display:none}
  .result-note{margin-top:16px;padding:13px;font-size:12px;line-height:1.45}
  .ask-line{font-size:13px;line-height:1.5;margin:15px 0 8px}
  .result-actions .text-button{font-size:11px}
  .site-footer{height:auto;min-height:48px;flex-basis:auto;gap:10px;padding:8px 0 calc(8px + env(safe-area-inset-bottom));line-height:1.4}
}
@media(max-width:390px){
  .page-shell{width:calc(100% - 26px)}
  .quiz{margin-top:14px}
  .quiz h2{font-size:clamp(27px,7.8vw,33px)}
  .question-stage{height:clamp(190px,calc(100dvh - 255px - env(safe-area-inset-bottom)),420px);min-height:190px}
  .question-stage .radio-option,.question-stage .toggle-option{min-height:54px}
  .quiz-footer{left:13px;right:13px}
  .result h2{font-size:clamp(36px,10.5vw,48px)}
}
@media(max-height:700px) and (max-width:600px){
  .quiz{margin-top:10px}
  .quiz .eyebrow{margin-bottom:6px}
  .progress-track{margin:12px 0}
  .question-stage{height:clamp(170px,calc(100dvh - 244px - env(safe-area-inset-bottom)),360px);min-height:170px}
  .question-stage .radio-option,.question-stage .toggle-option{min-height:50px}
}

/* Phone pages stay scrollable; the quiz alone uses the available screen height. */
@media(max-width:760px){
  html,body{min-height:100%;overflow-x:clip}
  .page-shell{--phone-header-height:clamp(76px,10svh,88px);min-height:100vh;min-height:100svh;height:auto;padding-top:env(safe-area-inset-top)}
  .topbar{height:var(--phone-header-height);flex:0 0 var(--phone-header-height);min-height:var(--phone-header-height);gap:10px}
  .wordmark{flex:1 1 0;font-size:14px;line-height:1.2}
  .top-note{flex:0 1 46%;min-width:0;font-size:12px;line-height:1.25;overflow-wrap:anywhere}
  .main-content{display:block;flex:1 0 auto;min-height:0;overflow:visible}
  .intro{height:auto;min-height:calc(100svh - var(--phone-header-height) - env(safe-area-inset-top));justify-content:space-evenly;gap:clamp(16px,2.5svh,24px);padding:20px 0 calc(24px + env(safe-area-inset-bottom))}
  .intro-copy{flex:0 0 auto}
  .intro-copy .eyebrow{margin-bottom:8px;font-size:12px}
  .intro h1{width:auto;max-width:100%;font-size:clamp(46px,13vw,62px);line-height:.96;transform:none}
  .intro-art{height:clamp(250px,34svh,340px);min-height:0;flex:0 0 auto}
  .intro-details{flex:0 0 auto;gap:14px}
  .intro-details .intro-text{font-size:17px;line-height:1.55;margin:0}
  .intro-cta{margin:0;padding:0}
  .intro-cta .button{min-height:58px;font-size:17px}
  .art-caption span{font-size:12px}
  .art-stamp{font-size:11px}
  .intro-bottom{display:none}
  .quiz{display:flex;flex-direction:column;height:calc(100vh - var(--phone-header-height) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:calc(100svh - var(--phone-header-height) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:360px;margin:8px auto calc(8px + env(safe-area-inset-bottom));animation:none}
  .quiz-head{flex:0 0 auto}
  .quiz .eyebrow{font-size:12px;margin-bottom:6px}
  .quiz h2{font-size:clamp(32px,8.8vw,42px);line-height:1.04}
  .progress-count{font-size:12px}
  .progress-count span:first-child{font-size:22px}
  .progress-track{flex:0 0 auto;margin:10px 0 12px}
  .question-stage{flex:1 1 auto;height:auto;min-height:0;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .question-stage .slide{min-height:100%;display:flex;flex-direction:column;justify-content:center}
  .question-stage .options{gap:12px;padding:0 4px 10px 0}
  .question-stage .radio-option,.question-stage .toggle-option{min-height:78px;padding:12px}
  .question-stage .option-copy{min-width:0}
  .question-stage .option-title{font-size:16px;line-height:1.3}
  .question-stage .option-sub{font-size:14px;line-height:1.4}
  .slider-labels,.slider-ticks{font-size:12px;line-height:1.4}
  .budget-caption{font-size:14px;line-height:1.45}
  .temperature-readout span{font-size:13px;line-height:1.4}
  .toggle-copy strong{font-size:16px}
  .toggle-copy span{font-size:14px}
  .quiz-footer{position:static;flex:0 0 auto;left:auto;right:auto;bottom:auto;min-height:60px;margin:8px 0 0;padding:8px 12px;border-radius:13px}
  .quiz-footer .text-button,.quiz-footer .button{font-size:15px}
  .result{display:block;width:100%;max-height:none;overflow:visible;margin:14px auto 24px;padding:0 2px;animation:none}
  .result-card{padding:clamp(17px,4vw,24px) clamp(15px,4vw,20px)}
  .result-card .eyebrow{font-size:12px;line-height:1.4;margin-bottom:9px}
  .result-stamp{font-size:7px}
  .result-lead{font-size:15px;margin:8px 0}
  .result-summary{display:block}
  .summary-row{grid-template-columns:24px minmax(0,1fr) minmax(0,1.4fr);gap:6px;padding:9px 0}
  .summary-label{font-size:12px;line-height:1.35}
  .summary-value{font-size:14px;line-height:1.35;overflow-wrap:anywhere}
  .result-note{font-size:14px;margin-top:10px;padding:10px}
  .ask-line{font-size:16px;margin:10px 0 5px}
  .result-actions{margin-top:4px}
  .result-actions .text-button{font-size:14px}
}
@media(max-width:390px){
  .quiz-footer{left:auto;right:auto}
}
@media(max-width:360px){
  .top-note{display:block;text-align:center}
  .top-note .live-dot{display:none}
  .quiz-head{display:block;position:relative}
  .quiz .eyebrow{padding-right:64px}
  .progress-count{position:absolute;top:0;right:0}
  .quiz h2{max-width:none}
}
@media(max-width:760px) and (max-height:700px){
  .intro{justify-content:flex-start}
  .intro h1{font-size:clamp(44px,12vw,52px)}
  .intro-art{height:280px}
  .intro-details .intro-text{font-size:16px}
  .intro-cta .button{min-height:54px}
}

@media(max-width:1200px) and (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  html,body{overflow-x:clip}
  .page-shell{width:100%;min-height:100svh;height:auto;padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(20px,env(safe-area-inset-left))}
  .topbar{height:72px;flex:0 0 72px;min-height:72px}
  .wordmark{font-size:14px}
  .top-note{font-size:12px}
  .main-content{display:block;flex:1 0 auto;overflow:visible}
  .intro{height:auto;min-height:0;justify-content:flex-start;gap:12px;padding:14px 0 22px}
  .intro-copy{width:100%}
  .intro h1{width:auto;max-width:100%;font-size:clamp(42px,7vw,58px);line-height:.98;transform:none}
  .intro-art{height:220px;max-width:500px;align-self:center}
  .intro-details{gap:10px}
  .intro-details .intro-text{font-size:16px;line-height:1.5;margin:0}
  .intro-cta{margin:0}
  .intro-cta .button{min-height:50px}
  .quiz{display:flex;flex-direction:column;height:calc(100svh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:280px;margin:8px auto 0;animation:none}
  .quiz h2{font-size:clamp(26px,4vw,36px);line-height:1.05}
  .quiz .eyebrow{font-size:12px;margin-bottom:5px}
  .progress-track{flex:0 0 auto;margin:6px 0 8px}
  .question-stage{flex:1 1 auto;height:auto;min-height:0;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .question-stage .options{padding-bottom:10px}
  .question-stage .option-copy{min-width:0}
  .question-stage .option-title{font-size:16px;line-height:1.3}
  .question-stage .option-sub{font-size:14px;line-height:1.4}
  .slider-labels,.slider-ticks{font-size:12px}
  .budget-caption,.temperature-readout span{font-size:14px}
  .quiz-footer{position:static;flex:0 0 auto;left:auto;right:auto;bottom:auto;min-height:56px;margin:8px 0 0;padding:6px 12px}
  .quiz-footer .text-button,.quiz-footer .button{font-size:15px}
  .result{display:block;max-height:none;overflow:visible;margin:14px auto 24px;animation:none}
  .result-summary{display:block}
  .summary-label{font-size:12px}
  .summary-value{font-size:14px;overflow-wrap:anywhere}
}

/* Readable type scales with the device width and the user's base font size. */
@media(max-width:760px), (max-width:1200px) and (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  html{font-size:clamp(112.5%,4.5vw,137.5%)}
  .wordmark{font-size:.85rem}
  .top-note{font-size:.7rem}
  .intro-copy .eyebrow,.result-card .eyebrow{font-size:.75rem;line-height:1.4}
  .quiz .eyebrow{font-size:.65rem;line-height:1.35;letter-spacing:.03em}
  .intro h1{font-size:clamp(2.6rem,13vw,3.5rem)}
  .intro-details .intro-text{font-size:1rem;line-height:1.5}
  .intro-cta .button{font-size:1rem;min-height:3.1rem}
  .art-caption span{font-size:.7rem}
  .art-stamp{font-size:.65rem}
  .progress-count{font-size:.7rem}
  .progress-count span:first-child{font-size:1.2rem}
  .quiz h2{font-size:clamp(1.9rem,8.8vw,2.3rem)}
  .question-stage .options{gap:.7rem}
  .question-stage .radio-option,.question-stage .toggle-option{min-height:5.25rem;padding:.7rem;gap:.55rem}
  .question-stage .option-emoji{flex-basis:1.5rem;width:1.5rem;font-size:1.25rem}
  .question-stage .option-title{font-size:1.1rem;line-height:1.25}
  .question-stage .option-sub{font-size:.9rem;line-height:1.4}
  .slider-labels,.slider-ticks{font-size:.75rem;line-height:1.4}
  .budget-value{font-size:2.5rem}
  .budget-caption,.temperature-readout span{font-size:.9rem;line-height:1.45}
  .temperature-readout strong{font-size:1.75rem}
  .toggle-copy strong{font-size:1.1rem}
  .toggle-copy span{font-size:.9rem}
  .quiz-footer{min-height:3.5rem;padding:.45rem .65rem}
  .quiz-footer .text-button,.quiz-footer .button{font-size:1rem}
  .quiz-footer .button{min-height:2.75rem}
  .result-card .eyebrow{font-size:.75rem}
  .result h2{font-size:clamp(2.3rem,11vw,3rem)}
  .result-stamp{font-size:.45rem}
  .result-lead{font-size:.9rem}
  .summary-row{padding:.6rem 0}
  .summary-label{font-size:.75rem;line-height:1.35}
  .summary-value{font-size:1rem;line-height:1.35}
  .result-note{font-size:.9rem;line-height:1.5}
  .ask-line{font-size:1rem;line-height:1.5}
  .result-actions .text-button{font-size:.9rem}
}
@media(max-width:480px){
  .summary-row{grid-template-columns:1.5rem minmax(0,1fr)}
  .summary-icon{grid-row:1 / span 2}
  .summary-label,.summary-value{grid-column:2;text-align:left}
}
@media(max-width:1200px) and (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  .intro h1{font-size:clamp(2.2rem,7vw,2.8rem)}
  .quiz h2{font-size:clamp(1.6rem,4vw,2rem)}
}

/* A calm background keeps the invitation and long answers easy to read. */
body{background:#fff8dc}
html{scroll-behavior:auto}
.intro-details .intro-text{color:#17243b;font-weight:800}

/* The page is the only scroller; keep the current question and navigation visible. */
@media(max-width:760px), (max-width:1200px) and (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  .quiz{height:auto;min-height:calc(100svh - var(--phone-header-height,72px) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin-bottom:calc(8px + env(safe-area-inset-bottom))}
  .quiz-top{position:sticky;top:0;z-index:20;background:#fff8dc;padding-top:6px}
  .question-stage{flex:1 0 auto;height:auto;min-height:0;max-height:none;overflow:visible;padding-bottom:16px}
  .question-stage .slide{min-height:0;justify-content:flex-start}
  .question-stage .options{padding:0 4px 0 0}
  .quiz-footer{position:sticky;bottom:env(safe-area-inset-bottom);z-index:20;flex:0 0 auto;min-height:3.5rem;margin:8px 0 0;background:#fff8dc}
  .result{margin-bottom:calc(110px + env(safe-area-inset-bottom))}
  .result-card{padding-bottom:clamp(24px,6vw,36px)}
  .ask-line{margin-top:18px;margin-bottom:12px}
  .result-actions{margin-top:12px}
  .result-actions .text-button{min-height:44px;padding:8px 12px;border:2px solid #17243b;border-radius:9px;background:#fff8dc}
}

@media(max-width:760px){
  .intro{justify-content:space-between;gap:clamp(12px,1.6svh,17px);padding:10px 0 calc(14px + env(safe-area-inset-bottom))}
  .intro-art{height:clamp(250px,33svh,330px)}
  .intro-art .rubber-duck{top:-28px}
}
@media(max-width:760px) and (max-height:700px){
  .intro{justify-content:flex-start}
}
@media(max-width:1200px) and (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  .quiz-top .eyebrow{display:none}
  .quiz h2{font-size:clamp(1.4rem,4vw,1.8rem)}
  .quiz-top .progress-track{margin:5px 0 7px}
  .quiz-footer{min-height:50px;padding:4px 8px}
  .quiz-footer .button{min-height:40px}
}

/* Give the bathtub room above it and keep its feet clear of the frame. */
.intro-art .tub{bottom:clamp(36px,12%,64px)}
.intro-art .plant{bottom:clamp(42px,14%,70px)}
.intro-art .art-caption{top:6px;right:12px;bottom:auto;left:auto;width:auto;z-index:6;padding:4px 8px;border:2px solid #17243b;border-radius:8px;background:#fff8dc;box-shadow:2px 2px 0 #17243b;line-height:1.2;text-align:right}
.intro-art .art-caption span{color:#17243b;font-size:clamp(11px,3vw,13px);font-weight:800}