:root{color-scheme:light;--paper:#faf7ec;--ink:#24211f;--brown:#79502e;font-family:'Chalkboard SE','Comic Sans MS','Trebuchet MS',sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 40% 45%,#fffdf5 0,transparent 75%);min-width:280px}main{min-height:100svh;display:flex;flex-direction:column;overflow:hidden}header{text-align:center;padding:clamp(22px,4vh,48px) 16px 0;z-index:2}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(35px,7.4vw,112px);line-height:1.08;letter-spacing:-.055em;margin:0;font-weight:900}h1 span{white-space:nowrap}#stage{position:relative;flex:1;min-height:350px;height:65vh;max-height:800px;width:min(100%,1500px);margin:0 auto;touch-action:none;isolation:isolate;outline-offset:-5px;cursor:none}#stage:focus-visible{outline:2px dashed #79502e;border-radius:20px}canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}#character{position:absolute;bottom:2%;left:4%;height:82%;max-width:42%;object-fit:contain;object-position:bottom;z-index:2;user-select:none;pointer-events:none}#target{position:absolute;top:0;left:0;z-index:3;pointer-events:none;filter:drop-shadow(3px 4px 0 #24211f20);overflow:visible}#target path{fill:#fffdf5;stroke:var(--ink);stroke-width:3.5;stroke-linejoin:round}.annotation{position:absolute;right:7%;top:12%;font-size:clamp(18px,2.1vw,30px);line-height:1.25;transform:rotate(-9deg);text-align:center;pointer-events:none;transition:opacity .5s}.annotation svg{display:block;width:75px;height:65px;margin:0 auto;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.interacted .annotation{opacity:0}footer{text-align:center;padding:12px 16px 22px;z-index:4}footer p{margin:0}#hint{font-size:clamp(20px,2.4vw,32px);line-height:1.35}.touch-hint{font-size:14px;color:#6c645b;margin-top:4px}nav{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:13px;font-size:14px;color:#6c645b}a,button{color:inherit;text-underline-offset:4px}button{font:inherit;cursor:pointer;border:0;background:none;padding:5px;text-decoration:underline}a{padding:5px}a:hover,button:hover{color:var(--ink)}a:focus-visible,button:focus-visible{outline:2px solid var(--brown);outline-offset:3px;border-radius:3px}.legal{display:block;max-width:720px;margin:0 auto;padding:50px 24px;overflow:visible}.legal h1{font-size:clamp(36px,7vw,60px);margin:35px 0}.legal h2{font-size:23px;margin-top:30px}.legal p{font-size:18px;line-height:1.7}.legal a{padding:0}.legal .back{font-size:16px}@media(max-width:600px){header{padding-top:30px}h1{font-size:clamp(30px,8.7vw,52px);letter-spacing:-.06em}#stage{min-height:340px;max-height:none}#character{left:0;bottom:5%;height:auto;width:43%;max-width:none}.annotation{top:18%;right:8%;font-size:18px}#target{width:32px;height:40px}footer{padding-bottom:22px}#hint{font-size:22px}}@media(max-height:550px) and (min-width:601px){header{padding-top:10px}h1{font-size:55px}#stage{min-height:220px}#character{height:95%}footer{padding:3px 10px 8px}#hint{font-size:19px}.touch-hint{display:none}nav{margin-top:2px}.annotation{font-size:18px}}@media(prefers-reduced-motion:reduce){.annotation{transition:none}}

/* Display the approved illustration as a cropped sprite. */
#character{aspect-ratio:450/590;width:auto;max-width:none;background-image:url(assets/concept.png);background-size:341.333333% 173.559322%;background-position:2.762431% 64.516129%;mix-blend-mode:normal;clip-path:polygon(0 0,70% 0,70% 32%,83% 32%,95% 59%,83% 66%,83% 100%,0 100%)}
@media(max-width:600px){#character{height:auto;width:47%;}}