:root{--yellow:#ffc610;--teal:#05b298;--purple:#9d55fa;--mint:#d9fff4;--black:#000}*{box-sizing:border-box}body{margin:0;background:var(--yellow);color:var(--black);font-family:'Instrument Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}button:focus-visible,a:focus-visible{outline:4px dashed #000;outline-offset:8px}[hidden]{display:none!important}.intro{min-height:100svh;background:linear-gradient(to bottom,var(--teal) 0 50%,var(--yellow) 50%);padding:clamp(90px,23vh,240px) 24px 60px}.title-wrap{max-width:1020px;margin:0 auto 72px}h1{position:relative;display:flex;align-items:center;justify-content:center;margin:0;font-family:'Londrina Solid',cursive;font-weight:900;font-size:clamp(52px,7.5vw,110px)}.title-dog,.title-boyfriend{display:flex;align-items:center;justify-content:center;min-height:180px;width:50%;border:15px solid;border-radius:30px;box-shadow:24px 26px 0 #000}.title-dog{color:var(--purple);background:#e6d5ff;transform:rotate(-6deg)}.title-boyfriend{color:var(--teal);background:var(--mint);border-color:#007764;transform:rotate(14deg)}.title-or{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);background:red;color:white;border-radius:50%;width:100px;height:106px;display:grid;place-items:center;font-size:56px}.intro-copy{max-width:820px;margin:auto;text-align:center}.intro-copy>p:first-child{font-size:clamp(21px,2.4vw,30px);line-height:1.4}.small-button{padding:14px 25px;border:3px solid #000;border-radius:12px;background:white;box-shadow:5px 6px 0 #000;font-family:'Londrina Solid',cursive;font-size:26px;color:#000}.small-button:hover{background:var(--mint)}.small-button:active{transform:translate(3px,3px);box-shadow:2px 3px 0 #000}.fine-print{font-size:15px;margin-top:23px}.quiz{width:min(100% - 64px,620px);margin:0 auto;padding:50px 0 45px}.progress{font-size:19px;margin:0 0 26px}.quote-card{background:white;border:16px solid #000;border-radius:30px;box-shadow:30px 25px 0 #000;padding:38px 48px 50px;min-height:440px;display:flex;flex-direction:column;justify-content:center}.quote-mark{font-family:Arial,sans-serif;font-size:120px;font-weight:bold;color:#ccc;height:95px;line-height:1}#quote{font-size:clamp(28px,3.4vw,44px);font-weight:400;line-height:1.24;margin:0;outline:none}#quote.short{font-size:clamp(44px,5.6vw,76px)}#quote.long{font-size:clamp(23px,2.5vw,32px)}.answers{display:grid;gap:12px;margin-top:28px}.answer{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:112px;border:16px solid #888;border-radius:30px;box-shadow:30px 25px 0 #000;background:#eaeaea;color:#626262;padding:16px 24px;text-align:left;font-family:'Londrina Solid',cursive;font-size:32px}.answer:hover:enabled{background:#f7f2ff;border-color:var(--purple);color:#7941c8}.answer:active:enabled{transform:translate(3px,3px)}.answer.correct{background:var(--mint);border-color:var(--teal);color:#007e6b}.answer.wrong{background:#ffbcbc;border-color:red;color:#d80000}.answer:disabled{cursor:default}.mark{font-family:'Instrument Sans',sans-serif;font-size:44px;line-height:1}.feedback-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:38px;min-height:65px}#feedback{font-size:18px;line-height:1.3}.results{background:var(--teal);min-height:100svh;text-align:center;padding:65px 24px 35px}.results h2{font-size:28px;font-weight:400;margin:0}.score{font-size:clamp(55px,11vw,130px);line-height:1.1;color:white;margin:36px 0 0}.ball-and-chain{display:block;width:min(500px,90%);height:auto;margin:0 auto 12px}.home-link{display:block;width:fit-content;margin:25px auto 0;color:#002e27}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.noscript{text-align:center;padding:24px}@media(max-width:600px){.intro{padding-top:120px;background:linear-gradient(to bottom,var(--teal) 0 265px,var(--yellow) 265px)}.title-wrap{margin-bottom:65px}.title-dog,.title-boyfriend{min-height:115px;border-width:8px;border-radius:18px;box-shadow:12px 15px 0 #000}.title-boyfriend{font-size:clamp(35px,8.6vw,52px)}.title-or{width:55px;height:60px;font-size:32px}.intro-copy>p:first-child{font-size:22px}.quiz{width:calc(100% - 48px);padding-top:28px;padding-right:10px}.quote-card{padding:25px 23px 32px;min-height:350px;border-width:9px;border-radius:22px;box-shadow:15px 17px 0 #000}.quote-mark{height:70px;font-size:95px}.answer{border-width:9px;border-radius:22px;box-shadow:15px 17px 0 #000;min-height:88px;padding:12px 18px;font-size:28px}.answers{margin-top:25px;gap:13px}.feedback-row{margin-top:27px;align-items:flex-start;flex-direction:column;gap:0}.small-button{font-size:24px}.results{padding-top:65px}}
.title-wrap{width:90%}
@media(max-width:600px){.title-wrap{width:94%}}

.intro-copy>p:first-child{font-family:"Londrina Solid",cursive}
/* Keep the color boundary tied to the title, independent of page height. */
.intro{
  --title-height:180px;
  --title-top:clamp(120px,23svh,240px);
  --color-boundary:calc(var(--title-top) + var(--title-height)/2);
  background:linear-gradient(to bottom,var(--teal) 0 var(--color-boundary),var(--yellow) var(--color-boundary) 100%);
  padding-top:var(--title-top);
}
.title-wrap{margin-bottom:100px}
.title-wrap h1{height:var(--title-height)}
.title-dog,.title-boyfriend{height:100%;min-height:0}
.intro-copy>p:first-child{margin-top:0}
@media(max-width:600px){
  .intro{--title-height:115px;--title-top:120px}
  .title-wrap{margin-bottom:65px}
}

.intro-copy>p:first-child{font-weight:300}