:root{color-scheme:light;--kp-bg: #f7fbff;--kp-surface: #ffffff;--kp-surface-soft: #f0f7ff;--kp-ink: #162036;--kp-ink-soft: #41506c;--kp-muted: #6b7890;--kp-line: #dbe5f3;--kp-blue: #2f80ff;--kp-blue-dark: #1f5fbd;--kp-mint: #23b894;--kp-peach: #ff8fb3;--kp-gold: #f5bf42;--kp-cream: #fff8e6;--kp-danger: #d94b63;--kp-radius: 8px;--kp-shadow: 0 18px 44px rgba(22, 32, 54, .12);--kp-shadow-soft: 0 10px 28px rgba(22, 32, 54, .08);--kp-shell: min(100% - 32px, 1160px);--kp-font: "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif}*{box-sizing:border-box}html{min-height:100%;background:#f6fbff}body{margin:0;min-height:100%;color:var(--kp-ink);background:linear-gradient(120deg,rgba(47,128,255,.1),transparent 28rem),linear-gradient(240deg,rgba(35,184,148,.12),transparent 24rem),linear-gradient(180deg,#fff 0%,#f6fbff 54%,#fff9ed 100%);font-family:var(--kp-font);line-height:1.6}button{font:inherit}img{max-width:100%}#root,.app-frame{min-height:100vh}.site-header{position:sticky;z-index:50;top:0;border-bottom:1px solid rgba(219,229,243,.82);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.site-header__inner{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:24px;width:var(--kp-shell);min-height:74px;margin:0 auto}.site-brand{display:inline-flex;align-items:center;gap:10px;color:var(--kp-ink);text-decoration:none;font-size:18px;font-weight:950}.site-brand img{width:42px;height:42px;border-radius:12px;box-shadow:0 8px 18px #1620361a}.site-nav{display:flex;justify-content:flex-end;gap:6px}.site-nav a{border-radius:999px;padding:10px 12px;color:var(--kp-ink-soft);text-decoration:none;font-size:14px;font-weight:900}.site-nav a:hover,.site-nav a:focus-visible,.site-nav a.is-active{background:var(--kp-surface-soft);color:var(--kp-blue-dark);outline:none}.app-home,.game-shell{width:min(100% - 28px,1120px);margin:0 auto;padding:26px 0 40px}.app-hero,.game-header,.play-panel,.keyboard-panel,.switcher{border:1px solid rgba(219,229,243,.86);border-radius:var(--kp-radius);background:rgba(255,255,255,.88);box-shadow:var(--kp-shadow-soft)}.app-hero{display:grid;min-height:320px;align-content:center;justify-items:start;overflow:hidden;position:relative;padding:clamp(30px,6vw,64px)}.app-hero:before{content:"";position:absolute;inset:auto -40px -72px auto;width:min(40vw,300px);aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,rgba(245,191,66,.28),rgba(255,143,179,.22))}.app-hero img{width:74px;height:74px;border-radius:18px;box-shadow:0 14px 34px #16203624}.eyebrow{margin:18px 0 8px;color:var(--kp-blue-dark);font-size:12px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}.app-hero h1,.game-header h1{max-width:760px;margin:0;color:var(--kp-ink);font-size:clamp(34px,6vw,64px);line-height:1.08;letter-spacing:0}.app-hero p:last-child,.game-header>p:last-of-type{max-width:690px;margin:14px 0 0;color:var(--kp-ink-soft);font-size:clamp(16px,2vw,19px);font-weight:800}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.game-card{display:grid;min-height:176px;align-content:end;gap:8px;border:1px solid rgba(219,229,243,.9);border-radius:var(--kp-radius);padding:20px;cursor:pointer;text-align:left;background:#fff;color:var(--kp-ink);box-shadow:var(--kp-shadow-soft);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.game-card:hover,.game-card:focus-visible{transform:translateY(-3px);border-color:currentColor;box-shadow:var(--kp-shadow);outline:none}.game-card span{width:fit-content;border-radius:999px;padding:5px 10px;background:rgba(255,255,255,.72);color:var(--tone-strong);font-size:12px;font-weight:950}.game-card strong{font-size:23px;line-height:1.18}.game-card small{color:var(--kp-muted);font-size:14px;font-weight:760;line-height:1.55}.tone-blue{--tone: #2f80ff;--tone-strong: #1f5fbd;--tone-soft: #eaf3ff}.tone-mint{--tone: #23b894;--tone-strong: #0b8067;--tone-soft: #e8faf5}.tone-peach{--tone: #ff8fb3;--tone-strong: #bc3f69;--tone-soft: #fff0f5}.tone-gold{--tone: #f5bf42;--tone-strong: #9b7010;--tone-soft: #fff7df}.game-card.tone-blue,.game-card.tone-mint,.game-card.tone-peach,.game-card.tone-gold{background:linear-gradient(150deg,var(--tone-soft),#fff 56%),#fff}.game-topbar{position:sticky;z-index:10;top:10px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;min-height:64px;margin-bottom:14px;border:1px solid rgba(219,229,243,.92);border-radius:var(--kp-radius);padding:8px;background:rgba(255,255,255,.9);box-shadow:0 12px 26px #16203614;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.game-topbar button,.switcher button,.choice-grid button,.listen-button,.result-modal button{min-height:46px;border:1px solid rgba(219,229,243,.96);border-radius:var(--kp-radius);cursor:pointer;background:#fff;color:var(--kp-ink);font-weight:950}.game-topbar button{min-width:48px;padding:0 14px}.game-topbar div:not(.game-titlemark){display:grid;gap:0;min-width:0}.game-topbar strong,.game-topbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-topbar span{color:var(--kp-muted);font-size:12px;font-weight:850}.game-header{padding:clamp(24px,5vw,46px);background:linear-gradient(135deg,var(--tone-soft),rgba(255,255,255,.88) 58%),#fff}.game-header .eyebrow{margin-top:0;color:var(--tone-strong)}.score-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.score-pills span{display:inline-flex;min-height:38px;align-items:center;gap:5px;border:1px solid rgba(219,229,243,.9);border-radius:999px;padding:7px 13px;background:rgba(255,255,255,.72);color:var(--kp-ink-soft);font-size:13px;font-weight:900}.score-pills b{color:var(--tone-strong);font-size:16px}.play-panel,.keyboard-panel{display:grid;gap:20px;margin-top:14px;padding:clamp(18px,4vw,32px)}.question-view{display:grid;place-items:center;min-height:260px;gap:16px;border-radius:var(--kp-radius);padding:clamp(18px,5vw,34px);background:linear-gradient(180deg,#fff,var(--tone-soft));text-align:center}.prompt{margin:0;color:var(--kp-ink);font-size:clamp(23px,4vw,38px);font-weight:950;line-height:1.18}.question-subtitle{margin:0;color:var(--kp-muted);font-size:14px;font-weight:820}.listen-button{min-width:min(100%,220px);border-color:transparent;background:var(--tone);color:#fff;box-shadow:0 14px 28px #16203624}.note-card-image{width:min(100%,360px);border:1px solid var(--kp-line);border-radius:var(--kp-radius);background:#fff;box-shadow:var(--kp-shadow-soft)}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.choice-grid button{min-height:64px;padding:12px;background:#fff;box-shadow:0 8px 18px #1620360d;transition:transform .12s ease,border-color .12s ease,background .12s ease}.choice-grid button:hover:not(:disabled),.choice-grid button:focus-visible{transform:translateY(-2px);border-color:var(--tone);background:var(--tone-soft);outline:none}.choice-grid button:disabled{cursor:default;opacity:.62}.modal-backdrop{position:fixed;z-index:30;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:18px;background:rgba(22,32,54,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.result-modal{width:min(100%,390px);border:1px solid rgba(255,255,255,.7);border-radius:var(--kp-radius);padding:26px;background:#fff;text-align:center;box-shadow:var(--kp-shadow)}.answer-mark{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 12px;border-radius:50%;background:#fff1f4;color:var(--kp-danger);font-size:42px;font-weight:950}.answer-mark.ok{background:#e8faf5;color:var(--kp-mint)}.result-modal h2{margin:0;font-size:25px;line-height:1.25}.result-modal p{margin:10px 0 18px;color:var(--kp-ink-soft);font-weight:850}.result-modal button{width:100%;border-color:transparent;background:var(--tone, var(--kp-blue));color:#fff}.rhythm-card{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;min-height:112px;align-items:center}.rhythm-card span{display:grid;place-items:center;width:70px;height:70px;border:1px solid var(--kp-line);border-radius:18px;background:#fff;color:var(--kp-ink);font-size:34px;font-weight:950}.music-card{position:relative;display:grid;place-items:center;width:min(100%,430px);min-height:180px;overflow:hidden;border:1px solid var(--kp-line);border-radius:var(--kp-radius);background:#fff}.staff{position:absolute;top:38px;right:24px;bottom:38px;left:24px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 19px,rgba(22,32,54,.34) 20px,rgba(22,32,54,.34) 22px)}.chord-notes{position:relative;display:flex;align-items:center;gap:8px}.chord-notes span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--tone);color:#fff;font-size:20px;font-weight:950}.key-signature{position:relative;border-radius:var(--kp-radius);padding:14px 22px;background:var(--tone-soft);color:var(--tone-strong);font-size:clamp(30px,7vw,54px);line-height:1}.note-display{display:grid;place-items:center;min-height:132px;border-radius:var(--kp-radius);background:linear-gradient(135deg,var(--tone-soft),#fff);text-align:center}.note-display strong{font-size:clamp(30px,6vw,58px);line-height:1.1}.note-display span{color:var(--kp-muted);font-size:14px;font-weight:850}.keyboard{display:grid;grid-template-columns:repeat(21,minmax(44px,1fr));gap:4px;overflow-x:auto;padding:4px 2px 12px}.white-key{display:grid;align-content:end;justify-items:center;min-width:48px;height:clamp(180px,28vw,260px);border:1px solid #cdd9ea;border-radius:0 0 8px 8px;cursor:pointer;background:linear-gradient(180deg,#fff,#eef5ff);color:var(--kp-ink);box-shadow:inset 0 -10px 18px #1620360d}.white-key:hover,.white-key:focus-visible{border-color:var(--kp-gold);background:#fff8e4;outline:none}.white-key span{color:var(--kp-muted);font-size:12px;font-weight:900}.white-key small{margin-bottom:14px;color:var(--kp-ink);font-size:15px;font-weight:950}.switcher{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding:12px}.switcher button{flex:1 1 120px;background:#fff}.switcher button.is-active{border-color:var(--tone);background:var(--tone-soft);color:var(--tone-strong)}@media (max-width: 820px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 620px){.site-header__inner{grid-template-columns:1fr;gap:8px;min-height:auto;padding:10px 0}.site-nav{justify-content:flex-start;overflow-x:auto;padding-bottom:2px}.site-nav a{flex:0 0 auto}.app-home,.game-shell{width:min(100% - 18px,1120px);padding-top:12px}.app-hero,.game-header,.play-panel,.keyboard-panel{padding:18px}.game-grid,.choice-grid{grid-template-columns:1fr}.game-topbar{top:6px;grid-template-columns:46px 1fr 58px}.game-topbar button{min-width:46px;padding:0 8px}.keyboard{grid-template-columns:repeat(21,48px)}}body{color:#f7fbff;background:radial-gradient(circle at 12% 8%,rgba(133,104,255,.18),transparent 28rem),radial-gradient(circle at 88% 0%,rgba(35,184,148,.16),transparent 24rem),linear-gradient(180deg,#f7f2ff 0,#f7f2ff 210px,#fff8dd 100%)}.surface-browser{color:#223052}.surface-browser .app-home,.surface-browser .game-shell{padding-top:22px}.surface-browser .game-shell{width:min(100% - 32px,1120px)}.surface-browser .game-topbar{top:84px;border:1px solid rgba(219,229,243,.92);background:rgba(255,255,255,.92);color:#223052}.surface-browser .game-topbar button{background:#fff;color:#223052;box-shadow:inset 0 0 0 1px #dbe5f3eb}.surface-browser .game-topbar span{color:#6b7890}.surface-browser .app-hero{margin-top:10px}.surface-webview .app-home,.surface-webview .game-shell{width:min(100% - 16px,980px);padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom))}.surface-webview .game-topbar{top:max(8px,env(safe-area-inset-top));grid-template-columns:46px 1fr 56px;min-height:58px;margin-bottom:10px}.surface-webview .game-header{padding:14px 16px}.surface-webview .game-header h1{font-size:clamp(22px,7vw,36px)}.surface-webview .play-panel,.surface-webview .keyboard-panel{margin-top:10px}.app-home{width:min(100% - 26px,1180px)}.app-hero{grid-template-columns:minmax(0,1fr) minmax(300px,520px);min-height:460px;align-items:center;justify-items:stretch;gap:clamp(20px,4vw,46px);border:0;border-radius:10px;padding:clamp(24px,5vw,48px);background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.78)),url(/assets/brand/game-night-stage-v1.png) center / cover;box-shadow:0 24px 60px #16203629}.app-hero:before{display:none}.app-hero h1{color:#223052;font-size:clamp(34px,6vw,68px)}.app-hero p:last-child{color:#51607d}.app-hero .eyebrow{color:#6b4ee6}.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.hero-actions button{min-height:46px;border:0;border-radius:999px;padding:12px 18px;cursor:pointer;background:linear-gradient(180deg,#8f67ff,#6647de);color:#fff;font-weight:950;box-shadow:0 14px 30px #6647de47}.hero-actions button+button{background:#fff;color:#223052;box-shadow:inset 0 0 0 1px #dbe5f3}.hero-preview{display:grid;place-items:center}.hero-preview__screen{width:min(100%,500px);border:4px solid #071329;border-radius:18px;padding:16px;background:linear-gradient(180deg,rgba(9,20,48,.18),rgba(4,8,22,.88)),url(/assets/brand/game-night-stage-v1.png) center / cover;box-shadow:0 26px 44px #07132961}.mini-top,.mini-cards{display:flex;align-items:center;justify-content:space-between;gap:8px}.mini-top{color:#dbe7ff;font-size:12px;font-weight:950}.mini-play{display:grid;place-items:center;width:116px;height:116px;margin:30px auto;border-radius:50%;background:radial-gradient(circle,#79a7ff,#5d5af5 58%,rgba(93,90,245,.1) 59%);color:#fff;font-size:54px;box-shadow:0 0 0 14px #7474ff29,0 0 42px #52cdff66}.mini-cards span{display:grid;place-items:end center;width:58px;height:82px;border-radius:10px;padding-bottom:8px;background:#fff;color:#8390aa;font-weight:950;box-shadow:0 10px 22px #0003}.mini-cards .is-hit{border:2px solid #72e7a7;background:linear-gradient(180deg,#fff,#dfffee);color:#16a765;box-shadow:0 0 30px #40d78a80}.game-grid{gap:16px}.game-card{min-height:186px;border:0;border-radius:10px;padding:22px;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(5,13,33,.82)),url(/assets/brand/game-night-stage-v1.png) center / cover;box-shadow:0 22px 44px #1620362e}.game-card span{background:rgba(255,255,255,.92);color:var(--tone-strong)}.game-card small{color:#ffffffc7}.game-card:hover,.game-card:focus-visible{transform:translateY(-5px);box-shadow:0 28px 54px #1620363d}.game-shell{width:min(100% - 24px,980px);padding-top:16px}.game-topbar{border:0;border-radius:14px;background:#101a34;color:#fff;box-shadow:0 16px 36px #050d212e}.game-titlemark{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;min-width:0;padding:6px 8px}.game-titlemark__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(180deg,#ffd95b,#f5a623);color:#1c2440;font-size:26px;font-weight:950;box-shadow:0 12px 24px #f5a62342}.game-titlemark>div{display:grid;gap:1px;min-width:0}.game-titlemark__title{display:block;overflow:hidden;margin:0;color:#fff;font-size:clamp(21px,4.4vw,32px);line-height:1.05;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}.game-titlemark span:not(.game-titlemark__icon){color:#b9c5e4;font-size:12px;font-weight:950}.game-topbar button{border:0;background:rgba(255,255,255,.08);color:#fff}.game-topbar span{color:#91a0c3}.game-topbar .game-titlemark__icon{color:#1c2440;font-size:26px}.game-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,auto);gap:18px;align-items:center;border:0;border-radius:16px 16px 8px 8px;padding:18px 20px;background:linear-gradient(90deg,rgba(9,20,48,.94),rgba(18,32,70,.78)),url(/assets/brand/game-night-stage-v1.png) center / cover;color:#fff;box-shadow:0 22px 50px #050d2138}.game-header h1{color:#fff;font-size:clamp(24px,5vw,42px)}.game-header>div>p:last-child{max-width:620px;margin:8px 0 0;color:#eaf0ffc2;font-weight:820}.game-header .eyebrow{color:#8ff2bf}.game-stats{display:grid;gap:10px}.progress-line{height:12px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.12)}.progress-line span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#40d78a,#7be4ff);box-shadow:0 0 18px #40d78a8c}.score-pills{margin-top:0}.score-pills span{border:0;background:rgba(255,255,255,.1);color:#cbd7f6}.score-pills b{color:#fff}.score-pills .hearts{color:#ff5b8d;letter-spacing:.12em}.play-panel,.keyboard-panel{position:relative;overflow:hidden;border:4px solid #071329;border-radius:18px;padding:clamp(18px,4vw,28px);background:linear-gradient(180deg,rgba(6,13,32,.12),rgba(4,8,22,.9)),url(/assets/brand/game-night-stage-v1.png) center / cover;box-shadow:0 28px 58px #050d2142}.play-panel:before,.keyboard-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 18% 24%,rgba(151,99,255,.22),transparent 11rem),radial-gradient(circle at 84% 14%,rgba(245,191,66,.16),transparent 10rem)}.question-view{position:relative;min-height:280px;border-radius:14px;background:transparent;color:#fff}.prompt{color:#fff;text-shadow:0 3px 16px rgba(0,0,0,.36)}.question-subtitle{color:#eaf0ffb8}.floating-notes{position:absolute;inset:20px 20px auto;display:flex;justify-content:space-between;pointer-events:none;color:#f5bf42;font-size:30px;text-shadow:0 0 18px currentColor}.floating-notes span:nth-child(1){color:#b78cff}.floating-notes span:nth-child(2){color:#5fe2a0;transform:translateY(38px)}.listen-button{position:relative;display:grid;place-items:center;width:124px;height:124px;min-width:124px;border-radius:50%;border:2px solid rgba(166,190,255,.72);background:radial-gradient(circle at 42% 34%,rgba(255,255,255,.55),transparent 15%),radial-gradient(circle,#6da3ff 0 24%,#5657ed 25% 55%,rgba(83,77,231,.22) 56% 70%,rgba(83,77,231,0) 71%);color:#fff;box-shadow:0 0 0 10px #585bf529,0 0 0 21px #585bf514,0 0 52px #5b90ffad,inset 0 0 28px #ffffff3d;isolation:isolate}.listen-button:before,.listen-button:after{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:inherit;border:1px solid rgba(255,255,255,.16)}.listen-button:after{top:-14px;right:-14px;bottom:-14px;left:-14px;border-color:#8469ff42;box-shadow:0 0 26px #8469ff59}.listen-button span{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.12);font-size:36px;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.32)}.listen-button strong{position:absolute;bottom:16px;z-index:1;font-size:12px;letter-spacing:.08em;opacity:.92}.note-card-image,.music-card,.rhythm-card span{border:0;border-radius:12px;background:#fff;box-shadow:0 16px 30px #00000038}.choice-grid{position:relative;z-index:1;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}.choice-grid button{position:relative;display:grid;--note-color: var(--tone);--note-soft: var(--tone-soft);min-height:140px;align-content:start;justify-items:center;gap:7px;overflow:visible;border:2px solid rgba(255,255,255,.78);border-radius:12px;padding:10px 8px 12px;background:linear-gradient(180deg,#fff 0%,#fff 68%,#eef4ff 100%);color:#1e2946;box-shadow:0 14px 24px #0003,inset 0 0 0 1px #0f1e3e0d}.choice-grid button:before{content:"♪";display:block;margin-bottom:4px;color:var(--tone);font-size:20px}.choice-grid button.has-choice-image:before{display:none}.choice-grid button img{width:min(100%,116px);height:74px;object-fit:contain;border-radius:7px;background:#fff}.choice-grid button span{display:block;max-width:100%;overflow:hidden;color:#7a849d;font-size:12px;font-weight:950;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.choice-grid button b{display:grid;place-items:center;width:34px;height:34px;margin-top:auto;border-radius:50%;background:var(--note-color);color:#fff;font-size:15px;font-weight:950;line-height:1;box-shadow:0 8px 16px #16203629}.choice-grid button.note-tone-c{--note-color: #ff6f91;--note-soft: #fff0f4}.choice-grid button.note-tone-d{--note-color: #f6b83f;--note-soft: #fff7df}.choice-grid button.note-tone-e{--note-color: #40d78a;--note-soft: #e8fff2}.choice-grid button.note-tone-f{--note-color: #65c7ff;--note-soft: #eaf7ff}.choice-grid button.note-tone-g{--note-color: #9a7cff;--note-soft: #f0ecff}.choice-grid button.note-tone-a{--note-color: #ff8f4f;--note-soft: #fff1e8}.choice-grid button.note-tone-b{--note-color: #42c7c2;--note-soft: #e7fbfa}.choice-grid button.has-choice-image{align-content:start;background:linear-gradient(180deg,#fff 0%,#fff 64%,var(--note-soft) 100%)}.choice-grid button.has-choice-image:not(.has-rhythm-image) b{width:44px;height:44px;font-size:22px}.choice-grid button.has-rhythm-image{min-height:132px;align-content:center;background:linear-gradient(180deg,#fff,#fff8e6)}.choice-grid button.has-rhythm-image img{width:min(100%,170px);height:78px;padding:4px}.choice-grid button.has-rhythm-image span{color:#9b7010;font-size:12px}.choice-grid button.has-choice-image img{box-shadow:inset 0 -4px 0 color-mix(in srgb,var(--note-color) 20%,transparent)}.choice-grid button:hover:not(:disabled),.choice-grid button:focus-visible{transform:translateY(-4px);border-color:var(--note-color);background:linear-gradient(180deg,#fff,var(--note-soft));box-shadow:0 0 0 3px color-mix(in srgb,var(--note-color) 64%,transparent),0 0 34px color-mix(in srgb,var(--note-color) 42%,transparent),0 18px 28px #00000038}.choice-grid button:disabled{opacity:.78}.choice-grid button.is-correct{border-color:#78eba7;background:linear-gradient(180deg,#fff,#e6fff0);opacity:1;box-shadow:0 0 0 4px #40d78abd,0 0 34px #40d78a85,0 18px 28px #00000038}.choice-grid button.is-correct:after{content:"✓";position:absolute;top:-12px;right:-10px;display:grid;place-items:center;width:30px;height:30px;border:3px solid #fff;border-radius:50%;background:#62df92;color:#fff;font-size:17px;font-weight:950;box-shadow:0 10px 20px #12a85f52}.choice-grid button.is-dimmed{filter:saturate(.72)}.modal-backdrop{background:rgba(3,8,20,.62)}.result-modal{overflow:hidden;border:4px solid #071329;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.74) 58%,rgba(7,19,41,.72)),url(/assets/brand/settings-modal-bg-v1.webp) center / cover;color:#223052}.result-modal h2,.result-modal p{color:#223052}.answer-mark{background:rgba(255,91,141,.18);color:#ff5b8d}.answer-mark.ok{background:rgba(64,215,138,.18);color:#40d78a}.stars{margin:8px 0;color:#f5bf42;font-size:42px;line-height:1;letter-spacing:.08em;text-shadow:0 0 20px rgba(245,191,66,.42)}.result-modal button{background:linear-gradient(180deg,#ffd95b,#f5a623);color:#1c2440;box-shadow:0 12px 28px #f5bf423d}.game-menu-backdrop{z-index:34}.game-menu-modal{width:min(100%,520px);border:4px solid #071329;border-radius:18px;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.72) 58%,rgba(7,19,41,.76)),url(/assets/brand/settings-modal-bg-v1.webp) center / cover;color:#223052;box-shadow:0 28px 70px #0000006b}.game-menu-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.game-menu-modal__head h2{margin:0;font-size:22px}.game-menu-modal__head button{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;background:rgba(7,19,41,.78);color:#fff;font-size:24px;font-weight:900}.game-menu-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.game-menu-list button{display:grid;gap:3px;min-height:74px;border:0;border-radius:14px;padding:12px;cursor:pointer;background:rgba(255,255,255,.92);color:#223052;text-align:left;box-shadow:inset 0 0 0 1px #dbe5f3e6}.game-menu-list button span{color:var(--tone-strong);font-size:12px;font-weight:950}.game-menu-list button strong{font-size:15px;line-height:1.2}.game-menu-list button.is-active{background:linear-gradient(180deg,var(--tone-soft),#fff);box-shadow:inset 0 0 0 2px var(--tone),0 0 24px color-mix(in srgb,var(--tone) 34%,transparent)}.settings-backdrop{z-index:36}.settings-modal{width:min(100%,460px);border:4px solid #071329;border-radius:18px;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.7) 48%,rgba(7,19,41,.74)),url(/assets/brand/settings-modal-bg-v1.webp) center / cover;color:#223052;box-shadow:0 28px 70px #0000006b}.settings-modal .game-menu-modal__head button{background:rgba(7,19,41,.78);color:#fff}.settings-form{display:grid;gap:10px}.settings-form label{display:grid;gap:6px}.settings-form label>span{color:#31415f;font-size:12px;font-weight:950}.settings-form input,.settings-form select{width:100%;min-height:48px;border:0;border-radius:14px;padding:10px 13px;background:rgba(255,255,255,.94);color:#223052;font:inherit;font-weight:900;outline:none;box-shadow:inset 0 0 0 1px #dbe5f3e6}.settings-form input:focus,.settings-form select:focus{box-shadow:inset 0 0 0 2px #8f67ff,0 0 24px #8f67ff52}.midi-settings{display:grid;gap:10px;margin-top:4px;border:1px solid rgba(255,255,255,.64);border-radius:16px;padding:12px;background:rgba(7,19,41,.68);color:#fff}.midi-settings__head{display:flex;align-items:center;justify-content:space-between;gap:10px}.midi-settings__head span{color:#fff;font-size:14px;font-weight:950}.midi-status{flex:0 0 auto;border-radius:999px;padding:4px 9px;background:rgba(255,255,255,.14);color:#eaf0ffe0;font-size:11px;line-height:1.2}.midi-status-ready,.midi-status-connected{background:rgba(35,184,148,.22);color:#bfffee}.midi-status-error,.midi-status-unsupported{background:rgba(255,143,179,.2);color:#ffd1de}.midi-settings p{margin:0;color:#eaf0ffc2;font-size:12px;font-weight:760;line-height:1.45}.midi-controls{display:grid;grid-template-columns:84px 1fr;gap:8px}.midi-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.midi-controls button,.midi-actions button{min-height:44px;border:0;border-radius:14px;cursor:pointer;background:rgba(255,255,255,.92);color:#223052;font-weight:950}.midi-controls button:disabled,.midi-actions button:disabled{cursor:not-allowed;opacity:.48}.midi-message,.midi-error{display:block;border-radius:12px;padding:8px 10px;font-size:12px;font-weight:850}.midi-message{background:rgba(35,184,148,.14);color:#d7fff4}.midi-error{background:rgba(255,143,179,.16);color:#ffd6e1}.settings-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.settings-actions button{min-height:46px;border:0;border-radius:999px;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;font-weight:950}.settings-actions button:last-child{background:linear-gradient(180deg,#ffd95b,#f5a623);color:#1c2440}.rhythm-card span{color:#223052}.question-view .note-card-image{width:min(100%,440px);max-height:210px;object-fit:contain;padding:10px}.music-card{color:#223052}.note-display{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));color:#fff}.note-display span{color:#eaf0ffb8}.white-key{border-color:#ffffff38;background:linear-gradient(180deg,#fff,#dbe7ff);box-shadow:0 14px 22px #0000002e,inset 0 -12px 18px #1620361f}.switcher{border:0;border-radius:16px;background:rgba(255,255,255,.78)}.switcher button{border:0;background:#fff;color:#223052;box-shadow:inset 0 0 0 1px #dbe5f3e6}.switcher button.is-active{background:linear-gradient(180deg,var(--tone-soft),#fff);color:var(--tone-strong);box-shadow:inset 0 0 0 2px var(--tone)}@media (max-width: 820px){.app-hero,.game-header{grid-template-columns:1fr}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 620px){.hero-preview{display:none}.app-hero{min-height:420px}.game-header{padding:16px}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.listen-button{width:116px;height:116px;min-width:116px}}.level-selector{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;margin-top:14px;border:0;border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.82);box-shadow:0 14px 30px #050d211a}.level-selector span{color:#52607a;font-size:13px;font-weight:950}.level-selector div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.level-selector button{min-height:42px;border:0;border-radius:999px;cursor:pointer;background:#fff;color:#223052;font-weight:950;box-shadow:inset 0 0 0 1px #dbe5f3f2}.level-selector button.is-active{background:linear-gradient(180deg,#8f67ff,#6647de);color:#fff;box-shadow:0 10px 22px #6647de3d}.choice-grid{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}.choice-grid button:not(.has-choice-image){min-height:112px;align-content:center}.choice-grid button:not(.has-choice-image) span{color:#223052;font-size:14px;line-height:1.45;overflow:visible;text-overflow:clip;white-space:normal}@media (max-width: 620px){.level-selector{grid-template-columns:1fr}.level-selector div{grid-template-columns:repeat(4,minmax(0,1fr))}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}html[data-surface=webview],body[data-surface=webview]{min-height:100dvh;overflow-x:hidden;background:linear-gradient(180deg,rgba(5,12,29,.18),rgba(5,12,29,.92)),url(/assets/brand/game-night-stage-v1.png) center / cover fixed}body[data-surface=webview] .app-frame{min-height:100dvh}.surface-webview .game-shell{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:8px;width:100%;min-height:100dvh;margin:0;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.surface-webview .game-topbar{position:relative;top:auto;min-height:48px;margin:0;border-radius:16px;padding:5px;background:rgba(8,18,42,.82);box-shadow:none;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.surface-webview .game-topbar button{min-width:42px;min-height:38px;border-radius:13px;padding:0 10px}.surface-webview .game-topbar strong{font-size:14px}.surface-webview .game-titlemark>div>span{display:none}.surface-webview .game-header{grid-template-columns:1fr;gap:8px;border-radius:14px;padding:10px 12px;background:rgba(8,18,42,.74);box-shadow:none;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.surface-webview .game-header .eyebrow,.surface-webview .game-header>div>p:last-child{display:none}.surface-webview .game-header h1{font-size:clamp(20px,5vw,28px)}.surface-webview .game-stats{gap:7px}.surface-webview .score-pills{gap:6px}.surface-webview .score-pills span{min-height:30px;padding:4px 9px;font-size:12px}.surface-webview .level-selector{margin:0;border-radius:14px;padding:7px;background:rgba(255,255,255,.86);box-shadow:none}.surface-webview .level-selector span{display:none}.surface-webview .level-selector div{grid-column:1 / -1}.surface-webview .level-selector button{min-height:36px}.surface-webview .play-panel,.surface-webview .keyboard-panel{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;min-height:0;margin:0;border-width:2px;border-radius:18px;padding:clamp(10px,2.8vw,18px);box-shadow:0 14px 34px #00000047}.surface-webview .question-view{min-height:0;align-content:center;gap:clamp(8px,2vh,14px);padding:clamp(8px,2.6vw,18px)}.surface-webview .prompt{font-size:clamp(20px,5.4vw,30px)}.surface-webview .listen-button{width:clamp(96px,24vw,124px);height:clamp(96px,24vw,124px);min-width:clamp(96px,24vw,124px)}.surface-webview .question-view .note-card-image{width:min(100%,420px);max-height:min(24vh,180px);padding:8px}.surface-webview .choice-grid{grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px}.surface-webview .choice-grid button{min-height:clamp(96px,16vh,132px);padding:8px 6px 9px}.surface-webview .choice-grid button img{height:clamp(50px,9vh,70px)}.surface-webview .switcher{display:none}.surface-webview .game-menu-backdrop,.surface-webview .settings-backdrop{align-items:end;padding:12px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.surface-webview .settings-modal,.surface-webview .game-menu-modal{width:100%;border-width:2px;border-radius:22px;padding:14px}.surface-webview .game-menu-list{grid-template-columns:repeat(2,minmax(0,1fr))}.surface-webview .keyboard-panel{grid-template-rows:auto minmax(0,1fr)}.surface-webview .keyboard{align-self:stretch}.surface-webview .white-key{height:min(42vh,260px)}@media (max-width: 520px){.surface-webview .game-shell{gap:6px}.surface-webview .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.surface-webview .score-pills span:nth-child(3){display:none}}.level-selector{display:inline-grid;grid-template-columns:auto auto;justify-self:start}.level-selector div{display:none}.level-selector .level-trigger{min-height:42px;border:0;border-radius:999px;padding:0 18px;cursor:pointer;background:linear-gradient(180deg,#8f67ff,#6647de);color:#fff;font-weight:950;box-shadow:0 10px 22px #6647de3d}.level-modal-backdrop{z-index:35}.level-modal{width:min(100%,430px);border:4px solid #071329;border-radius:18px;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.72) 58%,rgba(7,19,41,.76)),url(/assets/brand/settings-modal-bg-v1.webp) center / cover;color:#223052;box-shadow:0 28px 70px #0000006b}.level-modal-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.level-modal-list button{display:grid;place-items:center;gap:2px;min-height:86px;border:0;border-radius:15px;cursor:pointer;background:rgba(255,255,255,.94);color:#223052;box-shadow:inset 0 0 0 1px #dbe5f3e6}.level-modal-list button span{color:#6b7890;font-size:11px;font-weight:950;text-transform:uppercase}.level-modal-list button strong{color:#6647de;font-size:30px;line-height:1}.level-modal-list button.is-active{background:linear-gradient(180deg,#f0ecff,#fff);box-shadow:inset 0 0 0 2px #8f67ff,0 0 24px #8f67ff57}.surface-webview .game-shell{grid-template-rows:auto auto auto minmax(0,1fr)}.surface-webview .game-header{padding:7px 9px}.surface-webview .game-header>div{display:none}.surface-webview .level-selector{justify-self:end;grid-template-columns:auto;padding:4px}.surface-webview .level-selector .level-trigger{min-height:34px;padding:0 13px}.surface-webview .level-modal-backdrop{align-items:end;padding:12px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.surface-webview .level-modal{width:100%;border-width:2px;border-radius:22px;padding:14px}.surface-browser .game-shell{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:10px;width:min(100% - 32px,940px);margin:26px auto 46px;border:10px solid #071329;border-radius:30px;padding:16px;background:linear-gradient(180deg,rgba(6,13,32,.16),rgba(4,8,22,.86)),url(/assets/brand/game-night-stage-v1.png) center / cover;box-shadow:0 34px 80px #050d2147,inset 0 0 0 1px #ffffff14}.surface-browser .game-topbar{position:relative;top:auto;margin:0;border:0;border-radius:16px;background:rgba(8,18,42,.82);color:#fff;box-shadow:none;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.surface-browser .game-topbar button{border:0;background:rgba(255,255,255,.1);color:#fff;box-shadow:none}.surface-browser .game-topbar span{color:#91a0c3}.surface-browser .game-header{grid-template-columns:1fr;gap:8px;margin:0;border-radius:15px;padding:10px 12px;background:rgba(8,18,42,.7);box-shadow:none;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.surface-browser .game-header>div{display:none}.surface-browser .game-stats{gap:8px}.surface-browser .score-pills{gap:7px}.surface-browser .score-pills span{min-height:32px;padding:5px 10px;font-size:12px}.surface-browser .level-selector{justify-self:end;grid-template-columns:auto;margin:0;padding:5px;border-radius:14px;background:rgba(255,255,255,.86);box-shadow:none}.surface-browser .level-selector span{display:none}.surface-browser .level-selector .level-trigger{min-height:36px;padding:0 15px}.surface-browser .play-panel,.surface-browser .keyboard-panel{margin:0;border-width:2px;border-radius:18px;padding:clamp(14px,2.6vw,24px);box-shadow:0 18px 46px #0000003d}.surface-browser .switcher{display:none}.surface-browser .game-menu-backdrop,.surface-browser .level-modal-backdrop{padding-top:86px}.surface-browser .game-menu-modal,.surface-browser .level-modal{border-width:3px}@media (max-width: 720px){.surface-browser .game-shell{width:min(100% - 18px,940px);border-width:4px;border-radius:22px;padding:10px}}.app-dock{position:relative;z-index:12;display:flex;justify-content:center;gap:8px;width:fit-content;max-width:100%;margin:0 auto;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px;background:rgba(8,18,42,.72);box-shadow:0 18px 42px #00000052,inset 0 1px #ffffff1f;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.app-dock button{display:grid;grid-template-columns:auto auto;align-items:center;gap:6px;min-width:82px;min-height:42px;border:0;border-radius:999px;padding:8px 12px;cursor:pointer;background:rgba(255,255,255,.1);color:#fff;font-weight:950}.app-dock button span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.14);color:#8ff2bf;font-size:14px;line-height:1}.app-dock button b{font-size:12px;line-height:1}.app-dock .level-trigger{background:linear-gradient(180deg,#8f67ff,#6647de);box-shadow:0 10px 22px #6647de42}.app-dock .level-trigger span{width:auto;min-width:24px;padding:0 5px;background:rgba(255,255,255,.18);color:#fff;font-size:11px}.app-dock .level-trigger b{font-size:18px}.game-topbar{grid-template-columns:1fr}.game-topbar>.game-titlemark{justify-items:stretch;text-align:left}.surface-webview .game-shell{grid-template-rows:auto auto minmax(0,1fr) auto;padding-bottom:max(76px,calc(env(safe-area-inset-bottom) + 76px))}.surface-webview .game-topbar{min-height:42px;grid-template-columns:1fr!important}.surface-webview .game-topbar>.game-titlemark{width:100%;grid-template-columns:40px minmax(0,1fr);gap:10px;padding-left:4px}.surface-webview .game-titlemark>div{display:grid;min-width:0}.surface-webview .game-titlemark__icon{width:40px;height:40px;border-radius:12px;font-size:22px}.surface-webview .game-titlemark__title{display:block!important;visibility:visible!important;opacity:1!important;color:#fff!important;font-size:clamp(20px,6.2vw,28px);line-height:1.08}.surface-webview .game-header{padding:6px 8px}.surface-webview .app-dock{position:fixed;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translate(-50%);width:min(100%,360px);padding:6px}.surface-webview .app-dock button{flex:1 1 0;min-width:0;min-height:42px;padding:7px 9px}.surface-webview .app-dock button b{font-size:11px}.surface-browser .game-shell{grid-template-rows:auto auto minmax(0,1fr) auto;padding-bottom:86px}.surface-browser .app-dock{position:fixed;left:50%;bottom:22px;transform:translate(-50%);width:min(100% - 32px,360px)}.surface-browser .game-topbar>.game-titlemark{justify-items:stretch;text-align:left;padding-left:4px}@media (max-width: 420px){.surface-webview .app-dock{width:100%}.surface-webview .app-dock button{grid-template-columns:1fr;justify-items:center;gap:3px}.surface-webview .app-dock button span{width:22px;height:22px}}.surface-webview .app-home{width:100%;min-height:100dvh;margin:0;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(88px,calc(env(safe-area-inset-bottom) + 88px)) max(10px,env(safe-area-inset-left))}.surface-browser .app-home{width:min(100% - 32px,1100px);padding-bottom:104px}.surface-webview .app-hero{min-height:min(48vh,430px);border:2px solid #071329;border-radius:22px;padding:clamp(18px,5vw,34px);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.7)),url(/assets/brand/game-night-stage-v1.png) center / cover}.surface-webview .app-hero h1{font-size:clamp(32px,10vw,58px)}.surface-webview .app-hero p:last-child{font-size:15px}.surface-webview .hero-actions{margin-top:18px}.surface-webview .hero-actions button{flex:1 1 130px}.surface-webview .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}.surface-webview .game-card{min-height:132px;border-radius:16px;padding:14px}.surface-webview .game-card strong{font-size:18px}.surface-webview .game-card small{display:none}.surface-webview .home-dock,.surface-browser .home-dock{position:fixed;left:50%;transform:translate(-50%)}.surface-webview .home-dock{bottom:max(8px,env(safe-area-inset-bottom));width:min(100%,360px);padding:6px}.surface-browser .home-dock{bottom:22px;width:min(100% - 32px,390px)}.surface-browser .app-hero{border:10px solid #071329;border-radius:30px;background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.7)),url(/assets/brand/game-night-stage-v1.png) center / cover}@media (max-width: 620px){.surface-webview .hero-preview{display:none}.surface-webview .app-hero{grid-template-columns:1fr}}.surface-webview .game-topbar .game-titlemark__title{display:block!important;visibility:visible!important;opacity:1!important;min-width:0!important;margin:0!important;color:#fff!important;font-size:clamp(20px,6.2vw,28px)!important;line-height:1.08!important;white-space:nowrap!important}
.answer-mark{position:relative;display:grid;place-items:center;width:92px;height:92px;margin:0 auto 12px;border-radius:50%;font-size:0!important;line-height:1;background:rgba(255,91,141,.16);color:transparent;overflow:visible}.answer-mark:before{content:"";display:block;width:104px;height:104px;background:url(/assets/brand/answer-wrong-cute-v1.png?v=20260928-center) center / contain no-repeat;transform:translateZ(0);filter:drop-shadow(0 10px 18px rgba(5,13,33,.22))}.answer-mark.ok{background:rgba(64,215,138,.16)}.answer-mark.ok:before{background-image:url(/assets/brand/answer-correct-cute-v1.png?v=20260928-center)}@media (max-width:620px){.answer-mark{width:84px;height:84px}.answer-mark:before{width:96px;height:96px}}
/* kp-choice-keyboard-v20260928 */.choice-grid button:before{content:none!important;display:none!important}.choice-grid button:not(.has-choice-image){align-content:center;gap:10px;padding:14px 12px;min-height:132px}.choice-grid button:not(.has-choice-image) span{display:grid;place-items:center;min-height:2.6em;color:#17233f;font-size:clamp(20px,4vw,30px);font-weight:950;line-height:1.18;text-align:center;white-space:normal;overflow:visible;text-overflow:clip}.choice-grid button.has-choice-image b{width:auto;min-width:58px;height:auto;min-height:44px;padding:8px 12px;border-radius:999px;font-size:clamp(20px,5vw,28px);line-height:1}.choice-grid button.has-rhythm-image span{color:#17233f;font-size:clamp(18px,3.4vw,24px);font-weight:950;line-height:1.2}.keyboard{position:relative;isolation:isolate;grid-template-columns:repeat(21,minmax(42px,1fr));gap:0;overflow-x:auto;padding:10px 7px 18px}.white-key{position:relative;z-index:1;min-width:44px;margin:0 -1px 0 0;border:1px solid #b7c4d8;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 60%,#dbe7ff 100%);box-shadow:0 14px 18px rgba(0,0,0,.24),inset 0 -12px 20px rgba(22,32,54,.16)}.white-key:before{content:"";position:absolute;z-index:4;top:0;right:0;width:58%;height:58%;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#11182b 0%,#050814 74%,#27314d 100%);transform:translateX(50%);box-shadow:0 8px 12px rgba(0,0,0,.42);pointer-events:none}.white-key:nth-child(7n+3):before,.white-key:nth-child(7n):before{content:none}.white-key:hover,.white-key:focus-visible{z-index:5}.white-key span,.white-key small{position:relative;z-index:2}.white-key small{font-size:clamp(16px,2.5vw,22px)}@media (max-width:620px){.choice-grid button:not(.has-choice-image){min-height:112px;padding:12px 8px}.choice-grid button:not(.has-choice-image) span{font-size:clamp(18px,5.6vw,24px)}.keyboard{grid-template-columns:repeat(21,46px);padding-inline:6px}.white-key{min-width:46px}.white-key:before{width:60%;height:56%}}
/* kp-listen-playing-v20260929 */.listen-button.is-playing{animation:kpListenPulse .7s ease-in-out infinite alternate;filter:saturate(1.2) brightness(1.06)}.listen-button.is-playing span{animation:kpListenBounce .34s ease-in-out infinite alternate}.listen-button.is-playing:before{border-color:rgba(255,255,255,.38);box-shadow:0 0 0 9px rgba(255,217,91,.24),0 0 32px rgba(123,228,255,.5)}.listen-button.is-playing:after{content:"♫";display:grid;place-items:center;top:-22px;right:-20px;bottom:auto;left:auto;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,217,91,.94);color:#1c2440;font-size:19px;font-weight:950;box-shadow:0 0 24px rgba(255,217,91,.7);animation:kpListenNote .82s ease-in-out infinite}@keyframes kpListenPulse{from{box-shadow:0 0 0 10px #585bf529,0 0 0 21px #585bf514,0 0 52px #5b90ffad,inset 0 0 28px #ffffff3d}to{box-shadow:0 0 0 12px rgba(255,217,91,.28),0 0 0 24px rgba(123,228,255,.16),0 0 70px rgba(255,217,91,.72),inset 0 0 34px rgba(255,255,255,.48)}}@keyframes kpListenBounce{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-4px) rotate(5deg)}}@keyframes kpListenNote{0%{opacity:.1;transform:translateY(8px) scale(.86) rotate(-8deg)}32%{opacity:1}100%{opacity:0;transform:translateY(-16px) scale(1.12) rotate(12deg)}}@media (prefers-reduced-motion:reduce){.listen-button.is-playing,.listen-button.is-playing span,.listen-button.is-playing:after{animation:none}.listen-button.is-playing{box-shadow:0 0 0 12px rgba(255,217,91,.28),0 0 48px rgba(255,217,91,.55),inset 0 0 34px rgba(255,255,255,.48)}}