@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');
:root{color-scheme:light;--ink:#252722;--red:#d94732;--paper:#faf9f5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Space Grotesk',Arial,sans-serif}main{max-width:640px;min-height:100svh;margin:auto;padding:24px 28px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center}.top{display:flex;width:100%;align-items:center;justify-content:space-between;height:35px;flex:none}.top button{border:0;background:none;color:#77776d;font:27px Arial;cursor:pointer;padding:8px}.top button:hover{color:var(--red)}#step{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#8b8b7e}#cat{width:clamp(210px,34vh,310px);aspect-ratio:1;background-image:url('assets/cat-ink.png');background-size:300% 200%;mix-blend-mode:multiply;flex:none;margin:12px 0 24px}section{width:100%;text-align:center}h1{font-size:clamp(24px,3.5vw,34px);font-weight:600;line-height:1.22;letter-spacing:-1px;max-width:580px;margin:0 auto 28px;outline:none}#answers{display:grid;gap:12px;max-width:460px;margin:auto}#answers button{cursor:pointer;padding:17px 24px;border:2px solid var(--ink);border-radius:4px 8px 5px 7px;background:transparent;color:var(--ink);font:500 16px/1.4 'Space Grotesk',Arial,sans-serif;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s;text-align:center}#answers button:hover{background:#eeeade;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}#answers button:active{transform:translate(3px,3px);box-shadow:none}#answers button:first-child{background:var(--ink);color:var(--paper)}button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:5px}#source{font:10px Arial,sans-serif;color:#8b8b7e;text-decoration:none;margin-top:34px}#source:hover{text-decoration:underline}.landing .top,.landing #question,.landing #source{display:none}.landing #cat{width:clamp(270px,45vh,400px);margin:0 0 26px}.landing #answers{max-width:340px}.landing #answers button{font-weight:700;font-style:italic;font-size:clamp(35px,8vw,48px);padding:16px 30px;background:var(--red);border-color:var(--ink);transform:rotate(-3deg);box-shadow:5px 6px 0 var(--ink);color:white}.landing #answers button:hover{transform:rotate(-1deg) scale(1.025)}#burst{display:none;position:fixed;top:36%;left:-5%;width:110%;background:var(--red);color:white;text-align:center;font:italic 700 clamp(45px,13vw,140px) 'Space Grotesk',Arial,sans-serif;padding:15px 0;transform:rotate(-7deg);pointer-events:none;box-shadow:0 0 0 6px var(--paper)}#burst.play{display:block;animation:flash .55s both}@keyframes flash{0%{translate:-110%}20%,70%{translate:0}100%{translate:110%}}.enter{animation:enter .18s ease-out}@keyframes enter{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}@media(max-height:740px){main{padding:12px 24px 18px}#cat{width:210px;margin:8px 0 15px}h1{font-size:27px;margin-bottom:20px}#answers{gap:10px}#answers button{padding:13px 20px}#source{margin-top:24px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#burst.play{display:none}}
#languages{position:absolute;top:17px;right:24px;display:flex;gap:4px;z-index:2}#languages button{border:0;border-bottom:2px solid transparent;background:none;padding:7px 9px;font:500 12px/1.4 'Space Grotesk','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;color:#838277;cursor:pointer}#languages button[aria-pressed=true]{border-color:var(--red);color:var(--ink)}#languages button:hover{color:var(--red)}main{padding-top:65px}html[lang=ja] h1{font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;line-height:1.55;letter-spacing:0;font-size:clamp(23px,3vw,30px)}html[lang=ja] #answers button{font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;font-weight:600;font-size:15px}html[lang=ja] .landing #answers button{font-size:38px}#back[hidden]{display:none}.top:has(#back[hidden]){justify-content:flex-end}.top:has(#back[hidden]) #step{margin:auto}#burst{font-size:clamp(30px,9vw,105px)}@media(max-width:600px){#languages{top:12px;right:15px}main{padding-top:62px}#step{font-size:9px;letter-spacing:.7px}}@media(max-height:740px){#cat{width:190px}main{padding-top:57px}}

html[data-language=kyoto] .landing #answers button{font-size:clamp(24px,6vw,32px);white-space:nowrap}