@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;800;900&display=swap');
:root{font-family:'Noto Sans JP',sans-serif;color:#f5f2e9;background:#191b26;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 35%,#3b2841 0,transparent 55%)}main{max-width:480px;margin:auto;padding:24px 22px max(22px,env(safe-area-inset-bottom));min-height:100svh}header{display:flex;align-items:center;gap:14px}header a{font-size:25px;font-weight:900;color:#f6f2e7;text-decoration:none}header a span{color:#e4f094}.tag{font-size:9px;letter-spacing:2px;color:#a7a9b5}.small{margin-left:auto;border:1px solid #656171;border-radius:20px;background:none;color:inherit;padding:8px}.intro{text-align:center}.eyebrow{color:#e4f094;font-size:11px;letter-spacing:2px;font-weight:600;margin:30px 0 14px}h1{font-size:clamp(30px,8vw,43px);font-weight:900;letter-spacing:-2px;margin:0;white-space:nowrap}h1>span:not(.bang){color:#e4f094}.bang{color:#d99dd9;display:inline-block;transform:rotate(10deg);margin-left:4px}.subtitle{font-size:14px;letter-spacing:2px;color:#b6b2c2;margin-top:10px}.mascot{height:130px;position:relative;width:190px;margin:0 auto 16px}.bowl{position:absolute;top:36px;left:34px;width:126px;height:76px;border-radius:12px 12px 70px 70px;background:#d99dd9;color:#38283d;font-size:60px;font-weight:bold;line-height:62px;box-shadow:inset 0 9px 0 #f0c6ec;transform:rotate(-8deg)}.bowl:before{content:'';position:absolute;width:90px;height:6px;background:#e4f094;top:-15px;left:54px;transform:rotate(-28deg);border-radius:3px}.bubble{position:absolute;left:8px;top:4px;color:#191b26;background:#e4f094;padding:5px 12px;border-radius:20px;font-weight:900;transform:rotate(-12deg)}.spark{position:absolute;color:#e4f094;font-size:24px}.s1{right:-2px;top:16px}.s2{left:0;bottom:15px;font-size:17px}.rule{background:#252734;border:1px solid #41404f;border-radius:18px;padding:15px 12px}.step{font-size:10px;letter-spacing:2px;color:#d99dd9}.rule p{font-size:12px;line-height:1.9;margin:8px 0}.example{font-size:20px;font-weight:800;margin:8px 0 10px}.example>span:not(.arrow){color:#e4f094}.example b{background:#e4f094;color:#191b26;border-radius:9px;padding:2px 12px}.arrow{color:#8e8c9c;margin:0 8px}.rule small{font-size:10px;color:#aaa7b6}fieldset{border:0;padding:0;margin:20px 0 16px;display:flex;gap:8px}legend{position:absolute;clip-path:inset(50%)}label{font-size:11px;flex:1;border:1px solid #56515f;border-radius:12px;padding:12px 3px}label:has(:checked){border-color:#e4f094;background:#e4f09412}input{accent-color:#e4f094;vertical-align:middle;margin-right:3px}button{font-family:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #d99dd9;outline-offset:4px}.primary{width:100%;background:#e4f094;color:#20232a;border:0;border-radius:14px;padding:17px 20px;font-size:16px;font-weight:900}.primary span{float:right;font-size:20px}.textbtn{background:none;border:0;color:#cdc7d6;padding:13px;font-size:12px}.note{font-size:10px;color:#9894a6;line-height:1.7;margin:0}.best{font-size:11px;letter-spacing:2px;color:#aaa5b4;margin:18px 0}.best b{color:#eee;font-size:18px;margin:0 6px}footer{text-align:center;color:#777281;font-size:9px;line-height:1.9;margin-top:26px}.stats{display:flex;justify-content:space-between;margin-top:36px;border-bottom:1px solid #3e3b4b;padding-bottom:20px}.stats small{display:block;font-size:9px;letter-spacing:2px;color:#9f9aad}.stats strong{display:block;font-size:30px;margin-top:4px}.stats #life{font-size:16px;color:#d99dd9;letter-spacing:3px;margin-top:15px}.stage{height:235px;text-align:center;padding-top:14px}#display{font-size:44px;font-weight:900;margin-top:20px;min-height:65px}#feedback{font-size:12px;color:#c1b8cb;min-height:35px;margin-top:16px}.waves{display:flex;height:30px;gap:5px;align-items:center;justify-content:center}.waves i{background:#d99dd9;width:5px;height:7px;border-radius:9px}.waves.active i{animation:bop .5s ease-in-out infinite alternate}.waves i:nth-child(2n){animation-delay:.2s}.waves i:nth-child(3n){animation-delay:.4s}@keyframes bop{to{height:27px}}.timer{height:5px;background:#393443;border-radius:5px;overflow:hidden}.timer div{height:100%;width:100%;background:#e4f094}.question{text-align:center;font-size:16px;font-weight:800;margin:25px 0 15px}.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.keys button{min-height:80px;border:1px solid #656071;background:#34303f;color:#fff;border-radius:17px;font-size:30px;font-weight:800;box-shadow:0 4px 0 #10121b}.keys button:disabled{opacity:.35}.keys button:not(:disabled):active{transform:translateY(3px);background:#e4f094;color:#191b26;box-shadow:none}.hint{text-align:center;font-size:10px;color:#8e879c}.result{text-align:center;padding:50px 0}.result h2{font-size:28px}.resultscore strong{font-size:90px;letter-spacing:-5px;color:#e4f094}.resultscore span{margin-left:12px}#resultDetail{color:#c1b8cb;margin-bottom:35px;font-size:13px}.overlay{position:fixed;inset:0;background:#171923ef;z-index:10;display:grid;place-items:center;padding:24px}.overlay>div{max-width:390px;text-align:center}.overlay p:not(.eyebrow){font-size:13px;line-height:1.8;margin-bottom:24px}[hidden]{display:none!important}@media(min-width:700px){main{margin:24px auto;border:1px solid #403648;border-radius:30px;padding:30px;background:#1c1d2add}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
/* Hand-painted picture-book theme */
:root{color:#57433e;background:#fff7ec}body{background:radial-gradient(ellipse at 5% 20%,#fbe0dd 0,transparent 55%),radial-gradient(ellipse at 95% 75%,#dfebe3 0,transparent 60%),#fff7ec}main{background:#fffaf1}header a{color:#695550}header a span{color:#bd667f}.tag{color:#857569}.small{border-color:#d6b7aa;color:#70564b;background:#fffaf1}.eyebrow{color:#97606e}.intro .eyebrow{margin:24px 0 10px}h1>span:not(.bang){color:#b56a80}.bang{color:#aa8abd}.subtitle{color:#877265;margin:9px 0 15px}.paint-hero{margin:0 -4px 18px;border-radius:22px;overflow:hidden;box-shadow:0 5px 0 #eacfc32e;border:5px solid #fffdf7;transform:rotate(-1deg)}.paint-hero img{width:100%;height:auto;display:block}.rule{background:#fffdf7;border:1px solid #ddc9b9;box-shadow:0 4px 0 #eadbcb40}.step{color:#a8647c}.example>span:not(.arrow){color:#ac5d78}.example b{background:#e9d6e7;color:#634c64}.arrow{color:#b29686}.rule small,.hint{color:#8d776c}label{border-color:#ddc8bc;background:#fffaf4;color:#705b50}label:has(:checked){border-color:#b8819c;background:#f3e6ee}input{accent-color:#b5758c}.primary{background:#b96f87;color:white;box-shadow:0 4px 0 #8c536b}.textbtn{color:#876579}.note{color:#8b7b70}.best{color:#8b7b70}.best b{color:#8d607a}footer{color:#96847a}.stats{margin-top:20px;padding-bottom:12px;border-color:#e4d3c6}.stats small{color:#927d70}.stats strong{font-size:26px}.stats #life{color:#ba778d}.paint-cast{margin:13px auto 0;height:150px;max-width:270px;overflow:hidden;border-radius:20px;border:3px solid #fffdf7}.paint-cast img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 24%}.stage{height:165px;padding-top:0}.stage .eyebrow{margin:12px 0 4px}#display{font-size:36px;min-height:48px;margin-top:6px}#feedback{color:#84675d;font-size:11px;min-height:25px;margin:8px 0}.waves{height:22px}.waves i{background:#bc8aaa}.timer{background:#eadccf}.timer div{background:#a0bb9b}.question{margin:17px 0 12px}.keys{gap:10px}.keys button{min-height:68px;background:#fffdf9;border:1px solid #d6bbab;color:#7a6054;box-shadow:0 4px 0 #dcc3b2}.keys button:not(:disabled):active{background:#e7cddd;color:#634357}.keys button:disabled{opacity:.5}.resultscore strong{color:#aa6c88}#resultDetail{color:#84675d}.overlay{background:#fff8efed}.result .eyebrow{color:#aa6c88}button:focus-visible{outline-color:#9f6caa}@media(min-width:700px){main{background:#fffaf1;border-color:#dfc9ba;box-shadow:0 15px 50px #715c4115}}@media(max-width:360px){main{padding-left:16px;padding-right:16px}.paint-cast{height:125px}.stage{height:155px}.keys button{min-height:60px}}
.difficulty-row{display:flex;align-items:center;gap:14px;margin:2px 0 8px}.difficulty-row label{flex:0 0 auto;border:0;padding:0;background:transparent;font-size:12px}.difficulty-row select{flex:1;border:1px solid #d6bbab;border-radius:12px;padding:12px;color:#705b50;background:#fffdf9;font:inherit;font-size:14px;min-height:44px}.mode-help{font-size:10px;color:#8b7b70;margin:10px 0 18px}.progress-row{display:flex;justify-content:space-between;font-size:10px;margin-top:10px;color:#9b647e;font-weight:800;letter-spacing:.5px}.paint-cast{height:130px;margin-top:9px}.stage{height:155px}.small{min-height:44px}.paint-hero{max-height:215px}.paint-hero img{height:100%;max-height:205px;object-fit:cover;object-position:center 30%}@media(max-width:360px){.paint-cast{height:110px}.stage{height:145px}}
.play-round{margin:0 0 15px;min-height:48px;padding:12px;font-size:14px}#switchVisual{display:block;margin:0 auto;min-height:44px}#display{overflow-wrap:anywhere}

/* Separate the main action from the listening controls. */
.sample-row{margin-top:24px}