:root{--ink: #17152f;--cream: #fff9e8;--pink: #ff4f79;--yellow: #ffda45;--blue: #50c9ff;--mint: #56e0b2;--red: #ef3156;--shadow: 7px 7px 0 var(--ink)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:DM Mono,monospace}button,input{font:inherit}button{color:inherit}.hero{min-height:100svh;position:relative;overflow:hidden;padding:44px max(6vw,24px) 72px;background-color:var(--pink);background-image:radial-gradient(var(--ink) 1px,transparent 1px);background-size:19px 19px;border-bottom:5px solid var(--ink)}.hero:before{content:"";position:absolute;width:42vw;height:42vw;right:-10vw;top:-10vw;border-radius:50%;background:var(--yellow);border:5px solid var(--ink)}.hero:after{content:"ORDER!";position:absolute;left:59%;top:44px;transform:rotate(8deg);background:var(--cream);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:8px 14px;font-weight:700}.eyebrow{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:2px solid var(--ink);background:var(--cream);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.06em}.eyebrow.dark{color:var(--cream);background:var(--ink)}.live-dot{width:10px;height:10px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}h1,h2,h3,h4{font-family:Shrikhand,serif;font-weight:400;margin:0;line-height:.96}h1{position:relative;z-index:2;max-width:850px;margin-top:28px;font-size:clamp(52px,min(8vw,12vh),112px);letter-spacing:-.035em;text-shadow:4px 4px 0 var(--cream)}h1 em{color:var(--yellow);font-style:normal;-webkit-text-stroke:2px var(--ink);text-shadow:5px 5px 0 var(--ink)}.intro{position:relative;z-index:2;max-width:610px;margin:30px 0 26px;font-size:clamp(15px,1.5vw,20px);line-height:1.6;font-weight:500}.birthday-card{position:relative;z-index:3;width:min(650px,100%);padding:20px;background:var(--blue);border:4px solid var(--ink);box-shadow:var(--shadow);transform:rotate(-1deg)}.birthday-card label{display:block;margin-bottom:10px;font-weight:700;text-transform:uppercase}.input-row{display:flex;gap:10px}input{min-width:0;flex:1;padding:16px;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:0;font-size:16px}button{cursor:pointer;border:3px solid var(--ink);background:var(--yellow);padding:14px 18px;font-weight:700;transition:transform .15s,box-shadow .15s}button:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}button:focus-visible,input:focus-visible{outline:4px solid white;outline-offset:3px}.form-note{margin:11px 0 0;font-size:11px}.error{margin:8px 0 0;color:#7c0020;font-weight:700}.door{position:absolute;z-index:1;right:8vw;bottom:-18px;width:230px;height:370px;color:#fff;background:#10101d;border:7px solid var(--cream);outline:5px solid var(--ink);box-shadow:18px 18px #17152f40}.door:before,.door:after{content:"";position:absolute;left:28px;right:28px;height:105px;border:3px solid #353342;box-shadow:inset 0 0 0 5px #0b0b15}.door:before{top:90px}.door:after{bottom:26px}.door-number{display:block;margin-top:13px;font-family:serif;font-size:54px;font-weight:700;text-align:center}.letter-slot{position:absolute;top:70px;left:78px;width:65px;height:12px;background:#ddd2a3;border:2px solid #766e51}.knob{position:absolute;z-index:3;top:220px;right:28px;width:22px;height:22px;border-radius:50%;background:var(--yellow);border:3px solid #8f7621}.door-caption{position:absolute;left:-40px;bottom:48px;width:205px;transform:rotate(-7deg);color:var(--ink);background:var(--mint);border:3px solid var(--ink);padding:9px;box-shadow:4px 4px 0 var(--ink);font-size:11px;font-weight:700}.confetti i{position:absolute;z-index:1;width:17px;height:52px;border:3px solid var(--ink);background:var(--mint);transform:rotate(35deg)}.confetti i:nth-child(1){left:3%;top:30%}.confetti i:nth-child(2){left:47%;top:15%;background:var(--blue);transform:rotate(-48deg)}.confetti i:nth-child(3){left:52%;bottom:8%;background:var(--yellow);transform:rotate(65deg)}.confetti i:nth-child(4){right:2%;top:36%;background:var(--cream);transform:rotate(-18deg)}.confetti i:nth-child(5){left:38%;bottom:3%;background:var(--cream);transform:rotate(22deg)}.confetti i:nth-child(6){left:72%;top:34%;background:var(--pink);transform:rotate(72deg)}.results{position:relative;padding:90px max(6vw,24px);background:var(--cream)}.results[hidden]{display:none}.result-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;max-width:1050px;margin:auto}h2{max-width:850px;margin-top:28px;font-size:clamp(48px,7vw,100px)}h2 span{display:inline-block;color:var(--pink);font-size:1.3em;-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--yellow)}.stamp{flex:none;margin-top:30px;padding:12px;color:var(--red);border:5px double var(--red);border-radius:50%;font-weight:700;text-align:center;transform:rotate(11deg)}.verdict{max-width:820px;margin:32px auto;padding:22px;font-size:clamp(17px,2vw,24px);line-height:1.55;background:var(--yellow);border:3px solid var(--ink);box-shadow:var(--shadow)}.stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:820px;margin:46px auto 100px;border:3px solid var(--ink);box-shadow:var(--shadow)}.stats div{display:flex;flex-direction:column;padding:22px;background:#fff;text-align:center}.stats div+div{border-left:3px solid var(--ink)}.stats strong{font-family:Shrikhand,serif;font-size:clamp(28px,4vw,48px);font-weight:400}.stats span{font-size:11px;text-transform:uppercase}.timeline-heading{display:flex;align-items:end;justify-content:space-between;max-width:850px;margin:auto auto 35px;padding-bottom:15px;border-bottom:4px solid var(--ink)}h3{font-size:clamp(38px,5vw,68px)}h3 span{color:var(--pink)}.timeline-heading p{max-width:180px;font-size:11px;text-align:right}.timeline{max-width:850px;margin:auto;padding:0;list-style:none}.term{position:relative;display:grid;grid-template-columns:90px 1fr;min-height:150px}.term:before{content:"";position:absolute;left:43px;top:0;bottom:0;width:4px;background:var(--ink)}.timeline-marker{position:relative;z-index:1;width:66px;height:66px;display:grid;place-items:center;margin:8px 0 0 12px;border:4px solid var(--ink);border-radius:50%;background:var(--blue);font-family:Shrikhand,serif;font-size:21px}.labour .timeline-marker{background:var(--pink)}.liberal .timeline-marker{background:var(--yellow)}.conservative .timeline-marker{background:var(--blue)}.term article{margin-bottom:28px;padding:20px 24px;background:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transition:transform .2s}.term article:hover{transform:rotate(.6deg) translate(4px)}.term-topline{display:flex;flex-wrap:wrap;gap:8px}.party,.encore,.current{padding:4px 7px;background:var(--ink);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em}.encore{color:var(--ink);background:var(--yellow)}.current{color:var(--ink);background:var(--mint)}h4{margin-top:12px;font-size:clamp(25px,4vw,38px)}.term article p{margin:9px 0 0;font-size:12px}.news-note{display:flex;gap:16px;max-width:850px;margin:50px auto 30px;padding:20px;background:var(--mint);border:3px solid var(--ink);box-shadow:var(--shadow);line-height:1.5;transform:rotate(-.5deg)}.news-note>span{font-size:34px}.again{display:block;margin:45px auto 0}footer{padding:24px;color:#fff;background:var(--ink);text-align:center;font-size:11px;line-height:1.6}.revealed .term{animation:arrive .45s both}.revealed .term:nth-child(2n){animation-delay:.06s}@keyframes pulse{50%{transform:scale(.65);opacity:.55}}@keyframes arrive{0%{opacity:0;transform:translateY(18px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}@media(max-width:850px){.door{opacity:.2;right:-70px}.hero:after{display:none}.birthday-card{transform:none}}@media(max-width:600px){.hero{padding-top:25px}.input-row{flex-direction:column}.input-row button{width:100%}.door{display:none}.result-heading{display:block}.stamp{display:none}.stats{grid-template-columns:1fr}.stats div+div{border-left:0;border-top:3px solid var(--ink)}.timeline-heading{display:block}.timeline-heading p{text-align:left}.term{grid-template-columns:64px 1fr}.term:before{left:28px}.timeline-marker{width:52px;height:52px;margin-left:3px;font-size:16px}.term article{padding:16px}}
