*{box-sizing:border-box}body{margin:0;background:#f7f1eb;color:#302828;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.wrap{max-width:980px;margin:0 auto;padding:20px 20px 72px}.top{display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:14px;color:#746968}.top-tools{display:flex;align-items:center;gap:14px}.lang-switch{display:flex;gap:4px;padding:4px;border:1px solid #ddcfc7;border-radius:999px;background:#fffaf6}.lang-switch button{border:0;background:transparent;border-radius:999px;padding:7px 10px;cursor:pointer}.lang-switch button.on{background:#8f5961;color:#fff}.back,.back-games{color:#5d4d4e;text-decoration:none}.hero{padding:64px 0 36px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:700;color:#9a5e66}.hero h1,.game h2,.game-card h2{font-family:Georgia,serif;font-weight:500}.hero h1{font-size:clamp(42px,8vw,72px);line-height:.95;margin:10px 0 18px}.hero p{max-width:650px;font-size:19px;line-height:1.55;color:#665b5a}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.game-card{appearance:none;border:1px solid #dfd2c8;background:#fffaf6;border-radius:24px;text-align:left;padding:28px;cursor:pointer;color:inherit;min-height:260px;box-shadow:0 8px 28px rgba(67,49,46,.06)}.game-card .icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#ead9d8;color:#8b525c;font-size:30px}.game-card h2{font-size:30px;margin:28px 0 10px}.game-card p{color:#776a67;line-height:1.5;min-height:50px}.go{font-weight:700;color:#8b525c}.hidden{display:none!important}.game{margin-top:28px;background:#fffaf6;border:1px solid #dfd2c8;border-radius:28px;padding:28px;box-shadow:0 8px 28px rgba(67,49,46,.06)}.back-games{background:none;border:0;padding:0;cursor:pointer}.game-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-top:30px}.game-head h2{font-size:40px;margin:8px 0}.score{text-align:right}.score span,.score small{display:block;color:#8b7a76;font-size:12px}.score strong{font-size:34px}.level-row{display:flex;align-items:center;gap:8px;margin:20px 0}.level{width:38px;height:38px;border-radius:50%;border:1px solid #d7c9c0;background:#fff}.level.on{background:#8f5961;color:#fff}.play-zone{text-align:center;padding:44px 10px 28px}.listen{width:150px;height:150px;border-radius:50%;border:0;background:#8f5961;color:#fff;font-size:36px;box-shadow:0 12px 30px rgba(143,89,97,.24)}.listen span{display:block;font-size:14px;margin-top:8px}.answers{display:grid;gap:12px}.answers.three{grid-template-columns:repeat(3,1fr)}.answers button{border:1px solid #ddcfc7;background:#fff;border-radius:18px;padding:20px 14px;font-size:18px}.answers.three button{font-size:36px}.answers button span{display:block;font-size:14px}.composers{grid-template-columns:repeat(2,1fr)}.composer-card img{width:100%;height:205px;object-fit:cover}.feedback{text-align:center;min-height:48px;padding:16px;font-size:17px}.primary{display:block;margin:0 auto;border:0;border-radius:999px;background:#302828;color:#fff;padding:14px 24px;font-weight:700}.muted{color:#776a67}.student-chip{border:1px solid #ddcfc7;background:#fffaf6;border-radius:999px;padding:6px 11px}.hero-friends{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.friend{background:#fffaf6;border:1px solid #dfd2c8;border-radius:18px;padding:12px 16px}.friend .face{font-size:38px}.friend small{display:block;color:#8b7a76}.profile-modal{position:fixed;inset:0;background:rgba(48,40,40,.42);display:none;place-items:center;padding:18px;z-index:100}.profile-modal.show{display:grid}.profile-card{position:relative;width:min(520px,100%);background:#fffaf6;border-radius:28px;padding:28px}.profile-close{position:absolute;right:16px;top:12px;border:0;background:none;font-size:30px}.profile-title{font:600 30px Georgia,serif}.profile-card input{width:100%;padding:13px;border:1px solid #d7c9c0;border-radius:14px}.hero-choice,.avatar-choice{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}.hero-choice button,.avatar-choice button{border:1px solid #ddcfc7;background:#fff;border-radius:16px;padding:12px}.tap-pad{display:block;margin:8px auto 20px;width:min(320px,82vw);height:190px;border:2px solid #d7b9be;border-radius:40px;background:linear-gradient(145deg,#f8e3df,#ead9ee);font-size:38px;font-weight:800;color:#704752;touch-action:manipulation;box-shadow:0 10px 0 #d5bdc1}.tap-pad:active{transform:translateY(6px);box-shadow:0 4px 0 #d5bdc1}.tap-pad small{font-size:14px;font-weight:500}.tap-dots{min-height:42px;text-align:center}.tap-dots i{display:inline-block;width:14px;height:14px;border-radius:50%;background:#8f5961;margin:5px}.creative-prompt{max-width:520px;margin:0 auto 20px;padding:20px;border-radius:20px;background:#f3e9e2;text-align:center;line-height:1.6}.creative-done{margin-top:14px}.creative-card:nth-last-child(3) .icon{background:#f4dfc9}.creative-card:nth-last-child(2) .icon{background:#dce9df}.creative-card:nth-last-child(1) .icon{background:#e5def1}@media(max-width:700px){.wrap{padding:16px 14px 54px}.hero{padding-top:42px}.cards{grid-template-columns:1fr}.game-card{min-height:210px}.game{padding:20px 15px}.game-head h2{font-size:31px}.listen{width:130px;height:130px}.top-tools>span{display:none}.hero-friends{display:grid;grid-template-columns:1fr 1fr}.friend small{display:none}.tap-pad{height:170px}}
/* Volume control for the composer quiz, including touch screens. */
#quizGame .quiz-volume{display:flex;align-items:center;justify-content:center;gap:12px;width:min(320px,100%);margin:16px auto 0;font-size:14px;color:#5d4d4e}
#quizGame .quiz-volume input{flex:1;min-width:100px;accent-color:#8f5961;cursor:pointer;touch-action:auto}
#quizGame .quiz-volume output{min-width:40px;text-align:right;font-variant-numeric:tabular-nums}