*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#170c32;color:white}main{min-height:100svh;display:grid;place-items:center;overflow:hidden;position:relative;isolation:isolate;padding:32px} .wash{position:absolute;inset:-45%;z-index:-3;background:conic-gradient(from 30deg,#ee643e,#ad208a,#4928b9,#168c9d,#a2bf75,#ee643e);filter:blur(70px);animation:flow 24s ease-in-out infinite alternate}.shade{position:absolute;inset:0;background:linear-gradient(145deg,#10072c55,#10072c11,#10072c66);z-index:-2}.blob{position:absolute;width:clamp(100px,20vw,280px);aspect-ratio:1;border-radius:38% 62% 64% 36% / 41% 38% 62% 59%;background:linear-gradient(140deg,#ffffff50,#ffffff03);box-shadow:inset 1px 1px 0 #ffffff30;z-index:-1;animation:float 13s ease-in-out infinite alternate}.a{top:12%;left:-5%}.b{right:4%;bottom:8%;animation-delay:-7s;background:linear-gradient(140deg,#ffd48790,#ff4b6920)}.c{width:100px;top:15%;right:18%;animation-delay:-4s}.content{text-align:center;max-width:760px}.label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:32px;animation:reveal 1s both}h1{font-size:clamp(48px,9vw,94px);line-height:1;letter-spacing:-.055em;margin:0 0 26px;animation:reveal 1s .15s both}h1 span{display:block}p{font-size:clamp(17px,2.5vw,21px);line-height:1.6;max-width:490px;margin:0 auto 32px;animation:reveal 1s .3s both}button{border:1px solid #ffffff50;border-radius:99px;padding:18px 28px;font-size:16px;font-weight:bold;color:#23122b;background:#fff3df;cursor:pointer;box-shadow:0 8px 40px #20113430;transition:transform .2s,box-shadow .2s;animation:reveal 1s .45s both}button:hover{transform:translateY(-3px);box-shadow:0 12px 45px #20113455}button:focus-visible{outline:3px solid white;outline-offset:5px}.note{display:block;font-size:12px;margin-top:20px;opacity:.7}.dots{position:absolute;inset:0;pointer-events:none;z-index:-1}.dot{position:absolute;width:4px;height:4px;background:#fff9;border-radius:50%;animation:float 9s ease-in-out infinite alternate}.pause{position:absolute;bottom:18px;right:18px;background:#ffffff15;color:white;padding:9px 14px;font-size:12px}.paused *{animation-play-state:paused!important} .question{animation:reveal .7s both}textarea{display:block;width:100%;min-height:140px;border:1px solid #ffffff66;background:#ffffff18;color:white;border-radius:16px;padding:18px;font:inherit;margin:24px 0;resize:vertical}textarea::placeholder{color:#ffffffaa}input{max-width:100%;margin:0 0 24px} .question h1{font-size:clamp(36px,6vw,60px)}[hidden]{display:none!important}
@keyframes flow{0%{transform:rotate(-15deg) scale(1)}50%{transform:rotate(60deg) scale(1.15)}100%{transform:rotate(150deg) scale(1.05)}}@keyframes float{from{transform:translate(0,-15px) rotate(-15deg)}to{transform:translate(35px,35px) rotate(35deg)}}@keyframes reveal{from{opacity:0;transform:translateY(22px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


.content{width:100%;position:relative}.chapter-nav{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}.chapter-nav button{padding:13px 20px}.chapter-nav button:disabled{opacity:.5;cursor:wait}.morph-layer{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.morph-layer.travelling{z-index:20}.content{z-index:1}.blob{display:none}.chapter-count{font-size:12px;letter-spacing:.1em;opacity:.75;margin-bottom:20px}.pause{position:fixed;z-index:30}.question{padding:30px 0 75px}main{transition:background .7s}.wash{transition:filter 1s}.step-title:focus{outline:none}
h1{font-family:'Oi',serif;font-weight:400;letter-spacing:0;line-height:1.24;overflow-wrap:break-word;font-size:clamp(30px,6.3vw,68px)}.question h1{font-size:clamp(25px,4.5vw,46px)}body{font-family:'Dongle',Arial,sans-serif;font-weight:300;font-size:32px;line-height:1.05}p{font-size:clamp(30px,4vw,36px);line-height:1.05}button,input,textarea{font-family:'Dongle',Arial,sans-serif;font-weight:300;font-synthesis:none}button{font-size:30px;line-height:1;padding:15px 26px}.label{font-size:24px;line-height:1.1;letter-spacing:.08em}.chapter-count{font-size:24px;line-height:1.1;letter-spacing:.04em}.note{font-size:24px;line-height:1.05}.pause{font-size:24px;padding:8px 14px}.chapter-nav button{font-size:30px}textarea{font-size:32px;line-height:1.1}input{font-size:26px}input::file-selector-button{font-family:'Dongle',Arial,sans-serif;font-weight:300;font-size:26px}label{font-size:30px;line-height:1.1}
html,body{width:100%;max-width:100%;overflow-x:hidden}
main{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);align-content:center;gap:24px;padding:36px clamp(20px,5vw,40px);padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:max(28px,env(safe-area-inset-bottom))}
.content{grid-area:1/1;width:100%;max-width:760px;min-width:0;justify-self:center}.content>*{max-width:100%;min-width:0}.question{padding:8px 0 0}
h1{overflow-wrap:anywhere;hyphens:auto;text-wrap:balance}.note,p{overflow-wrap:anywhere}.note{opacity:.8}
textarea{width:100%;max-width:100%;min-width:0;margin:16px 0 26px}
button{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;border:1px solid #fff3df;border-radius:999px;padding:12px 24px;font-family:'Dongle',Arial,sans-serif;font-weight:300;font-size:30px;line-height:1.05;color:#23122b;background:#fff3df;box-shadow:none;white-space:normal;text-align:center;touch-action:manipulation;transition:background .2s,transform .2s}
button:hover{box-shadow:none;transform:translateY(-2px)}button:active{transform:translateY(0)}button:focus-visible{outline:3px solid white;outline-offset:4px}
button.secondary,.pause{background:#ffffff12;border-color:#ffffff80;color:white}
.chapter-nav{display:flex;gap:12px;width:100%;margin-top:28px}.chapter-nav button{min-width:0;padding:12px 20px;font-size:30px}
.pause{grid-area:2/1;justify-self:center;position:relative;inset:auto;z-index:2;min-height:48px;padding:12px 24px;font-size:26px;animation:none}
.file-upload{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;margin:12px 0 22px}.file-upload button{font-size:30px}.file-status{font-size:26px;line-height:1.1;overflow-wrap:anywhere;width:100%;text-align:center}
.file-input{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;clip:rect(0,0,0,0);clip-path:inset(50%);overflow:hidden}
@media(max-width:480px){.chapter-nav{flex-direction:column}.chapter-nav button{width:100%}.chapter-nav .secondary{order:2}.question h1{font-size:clamp(22px,6vw,28px);line-height:1.3}.label{letter-spacing:.04em}p{font-size:30px}textarea{padding:16px}}

@font-face{font-family:'Oi';font-weight:400;src:url('/static/Oi.ttf') format('truetype');font-display:swap}@font-face{font-family:'Dongle';font-weight:300;src:url('/static/Dongle.ttf') format('truetype');font-display:swap}