:root{--ink:#30304a;--soft-ink:#65627a;--cream:#fff8e8;--card:#fffffff2;--purple:#7255c9;--purple-dark:#513894;--shadow:0 18px 50px #5442372e}.app-shell{isolation:isolate;width:100%;height:100dvh;min-height:100svh;padding:max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));background-color:#89c4ec;background-image:url(/assets/background-BF36ggwa.svg);background-position:50%;background-repeat:no-repeat;background-size:cover;grid-template-rows:auto minmax(0,1fr);display:grid;position:relative;overflow:hidden}.app-shell:before,.app-shell:after{z-index:-1;color:#7255c917;content:"♪";pointer-events:none;font-weight:900;line-height:1;position:absolute}.app-shell:before{font-size:clamp(60px,10vw,130px);top:16%;left:2%;transform:rotate(-13deg)}.app-shell:after{font-size:clamp(72px,12vw,160px);bottom:2%;right:2%;transform:rotate(11deg)}.app-header{place-items:center;min-height:clamp(68px,11dvh,104px);padding-block:4px;display:grid;position:relative}.start-card h2,.start-card p{margin:0}.app-logo{object-fit:contain;width:clamp(210px,34vw,360px);height:clamp(60px,10dvh,96px);display:block}.mascot{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;display:block}.mascot--header{width:clamp(72px,11vw,124px);max-height:100%;position:absolute;bottom:0;right:clamp(2px,3vw,38px)}.instrument{touch-action:none;-webkit-user-select:none;user-select:none;background:#ffffff4d;border:2px solid #ffffffd1;border-radius:clamp(22px,3vw,38px);min-height:0;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #7255c90f}.bell-grid{grid-template-rows:minmax(0,1fr);grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(7px,1.2vw,16px);width:100%;height:100%;padding:clamp(8px,1.6vw,20px);display:grid}.bell{--bell-color:#ef5a67;--bell-dark:#ad2539;min-width:0;min-height:0;color:var(--ink);background:var(--card);box-shadow:0 8px 0 color-mix(in srgb, var(--bell-color) 28%, transparent), 0 12px 22px #41342b1c;cursor:pointer;-webkit-tap-highlight-color:transparent;border:3px solid #ffffffe6;border-radius:clamp(18px,2.4vw,32px);outline:none;grid-template-rows:minmax(0,1fr) auto;place-items:center;padding:clamp(6px,1vw,12px);transition:transform .12s,box-shadow .12s,background-color .12s;display:grid;position:relative;overflow:hidden}.bell-illustration:before{aspect-ratio:1;background:color-mix(in srgb, var(--bell-color) 13%, transparent);content:"";border-radius:50%;width:120%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (hover:hover) and (pointer:fine){.bell:hover:not(:disabled){background:#fff;transform:translateY(-3px)}}.bell:active:not(:disabled),.bell--pressed:not(:disabled){box-shadow:0 2px 0 color-mix(in srgb, var(--bell-color) 35%, transparent), 0 5px 12px #41342b24;transform:translateY(5px)scale(.97)}.bell:focus-visible{outline-offset:-5px;outline:5px solid #25203d}.bell:disabled{cursor:default}.bell-illustration{z-index:1;place-items:center;width:100%;height:100%;min-height:0;padding-bottom:clamp(6px,1.2vh,12px);display:grid;position:relative}.bell-image{z-index:1;object-fit:contain;object-position:center;filter:drop-shadow(0 7px 5px #38282329);pointer-events:none;width:min(100%,235px);height:100%;max-height:250px;display:block;position:relative}.bell-label{z-index:1;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:3px 6px;width:100%;line-height:1;display:flex;position:relative}.bell-label strong{font-size:clamp(1rem,2.3vw,1.8rem)}.bell-label small{color:var(--soft-ink);font-size:clamp(.65rem,1.2vw,.86rem);font-weight:800}@media (width<=720px){.bell-label small{flex-basis:100%}}.bell--red{--bell-color:#f25f6e;--bell-dark:#ad263b}.bell--orange{--bell-color:#ff9f43;--bell-dark:#c15a13}.bell--yellow{--bell-color:#ffd84f;--bell-dark:#b6800d}.bell--green{--bell-color:#59c982;--bell-dark:#247849}.bell--blue{--bell-color:#4aaee8;--bell-dark:#236995}.bell--indigo{--bell-color:#687bd8;--bell-dark:#35438f}.bell--pink{--bell-color:#d965a7;--bell-dark:#a7386d}.bell--ivory{--bell-color:#f2d9a6;--bell-dark:#a87832}.start-overlay{z-index:10;-webkit-backdrop-filter:blur(9px)saturate(.8);backdrop-filter:blur(9px)saturate(.8);background:#fff8e89e;place-items:center;padding:clamp(14px,3vw,36px);display:grid;position:absolute;inset:0}.orientation-overlay{z-index:20;padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));-webkit-backdrop-filter:blur(12px)saturate(.85);backdrop-filter:blur(12px)saturate(.85);background:#fff8e8d6;place-items:center;display:none;position:absolute;inset:0}.orientation-card{text-align:center;width:min(100%,620px);height:min(100%,820px);box-shadow:var(--shadow);background:#89c4ec url(/assets/background-BF36ggwa.svg) bottom/cover no-repeat;border:4px solid #fffffff5;border-radius:clamp(28px,7vw,52px);flex-direction:column;justify-content:center;align-items:center;gap:clamp(20px,3dvh,30px);padding:clamp(24px,5vw,44px);display:flex}.speech-bubble.orientation-speech-bubble{width:min(100%,560px);height:clamp(190px,29dvh,240px)}.speech-bubble.orientation-speech-bubble h2{padding-inline:clamp(28px,8vw,62px);font-size:clamp(1.55rem,6vw,2.2rem)}.orientation-overlay .mascot--welcome{width:min(58vw,340px);max-height:min(40dvh,360px)}.start-card{text-align:center;width:min(100%,700px);box-shadow:var(--shadow);background:#fffffff0;border:4px solid #fffffff5;border-radius:clamp(24px,4vw,42px);flex-direction:column;align-items:center;padding:clamp(22px,2.7vw,28px);display:flex}.start-greeting{flex-direction:column;justify-content:center;align-items:center;gap:clamp(20px,2.5vh,28px);width:100%;display:flex}.mascot--welcome{flex:none;width:clamp(240px,26vw,300px);max-height:min(285px,32dvh)}@media (width<=480px){.app-logo{width:min(58vw,210px)}.mascot--header{width:48px;right:0}.start-card{padding:20px 18px 24px}.start-greeting{gap:18px}.mascot--welcome{width:140px;max-height:140px}}.speech-bubble{width:min(100%,520px);height:clamp(180px,20vw,210px);color:var(--ink);flex:none;position:relative}.speech-bubble-svg{filter:drop-shadow(7px 8px #7255c92e);width:100%;height:100%;display:block;position:absolute;inset:0;overflow:visible}.speech-bubble-shape{fill:#fffdf8;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:4px}.speech-bubble h2{letter-spacing:-.025em;text-align:center;text-wrap:balance;place-items:center;width:84%;height:72%;margin:0;padding:clamp(10px,1.5vw,18px) clamp(24px,4vw,48px);font-family:Chalkboard SE,Comic Sans MS,Comic Sans,cursive;font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.08;display:grid;position:absolute;top:2%;left:8%;transform:rotate(-1deg)}@media (width<=480px){.speech-bubble{width:100%;height:180px}.speech-bubble h2{padding:8px 16px;font-size:clamp(1.2rem,6.4vw,1.5rem)}}.start-card p{max-width:34ch;color:var(--soft-ink);margin-top:12px;font-size:clamp(.9rem,2vw,1.1rem);font-weight:700;line-height:1.45}.start-button{color:#fff;background:linear-gradient(180deg, #8165d8, var(--purple));width:min(100%,clamp(300px,34vw,380px));min-height:clamp(58px,8dvh,76px);box-shadow:0 7px 0 var(--purple-dark), 0 12px 24px #51389440;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;border-radius:999px;margin-top:clamp(18px,3vw,26px);padding:16px 32px;font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:900;transition:transform .12s,box-shadow .12s}.start-button:hover:not(:disabled){transform:translateY(-2px)}.start-button:active:not(:disabled){box-shadow:0 2px 0 var(--purple-dark), 0 5px 12px #51389440;transform:translateY(5px)}.start-button:focus-visible{outline-offset:4px;outline:4px solid #25203d}.start-button:disabled{color:#ffffffd1;cursor:wait;background:#a59bbf;box-shadow:0 5px #776f8b}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (height<=560px){.app-shell{padding-top:max(6px, env(safe-area-inset-top));padding-bottom:max(6px, env(safe-area-inset-bottom))}.app-header{min-height:clamp(40px,14dvh,56px)}.app-logo{height:clamp(36px,12dvh,48px)}.start-overlay{padding:6px 10px 10px}.start-card{border-width:3px;border-radius:24px;max-height:100%;padding:6px 18px 10px}.start-greeting{gap:2px}.mascot--header{width:clamp(48px,18dvh,64px)}.mascot--welcome{width:clamp(70px,24dvh,100px);max-height:clamp(56px,20dvh,82px)}.speech-bubble{height:clamp(88px,29dvh,118px)}.speech-bubble h2{padding:4px 20px;font-size:clamp(1rem,4.8dvh,1.25rem)}.start-button{min-height:42px;margin-top:4px;padding-block:8px;font-size:clamp(1rem,4.4dvh,1.15rem)}}@media (orientation:portrait) and (any-pointer:coarse){.start-overlay{display:none}.orientation-overlay{display:grid}}@media (prefers-reduced-motion:reduce){.bell,.start-button{transition:none}}:root{color:#30304a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff8e8;font-family:Trebuchet MS,Avenir Next Rounded,Arial Rounded MT Bold,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;min-height:100%;overflow:hidden}body{overscroll-behavior:none;min-height:100svh;margin:0}button{font:inherit}