:root{--paper:#f2ede1;--ink:#2a2825;--ink-soft:#5b574e;--seal:#a8341f;--sky-top:#bfe3ff;--sky-bottom:#eef8ff}*{box-sizing:border-box}html,body{height:100%}body{color:var(--ink);background:radial-gradient(38px 38px at 92% 9%, #fff6c2 0%, #ffdd57 55%, transparent 72%), radial-gradient(46px 22px at 12% 20%, #fff 60%, transparent 62%), radial-gradient(64px 30px at 19% 24%, #fff 60%, transparent 62%), radial-gradient(40px 20px at 27% 18%, #fff 60%, transparent 62%), radial-gradient(56px 26px at 62% 10%, #fff 60%, transparent 62%), radial-gradient(42px 20px at 68% 14%, #fff 60%, transparent 62%), linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));background-repeat:no-repeat;background-attachment:fixed;flex-direction:column;min-height:100vh;margin:0;padding:0;font-family:Comic Sans MS,Comic Sans,Chalkboard SE,Comic Neue,cursive,sans-serif;line-height:1.6;display:flex}header{text-align:center;flex-direction:column;align-items:center;gap:.4rem;padding:1rem 1.5rem 0;display:flex}nav{text-align:left;align-self:stretch}nav a{color:var(--ink-soft);letter-spacing:.02em;font-size:.9rem;text-decoration:none}nav a:hover,nav a:focus-visible{color:var(--seal)}main{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.75rem;padding:1.5rem;display:flex}h1{letter-spacing:.04em;color:var(--seal);text-shadow:2px 2px #00000026;margin:0;font-family:"Press Start 2P",Comic Sans MS,cursive,sans-serif;font-size:1.3rem;font-weight:400;line-height:1.5}.grove{touch-action:none;justify-content:space-between;align-items:flex-end;gap:clamp(.5rem,2vw,1.5rem);width:min(90vw,62rem);height:min(58vh,30rem);padding:0 clamp(.5rem,4vw,3rem) 1.5rem;display:flex;position:relative;overflow:visible}.ground{z-index:0;background:linear-gradient(#8bd450 0% 30%,#b97a3f 30% 100%);height:1.5rem;position:absolute;bottom:0;left:0;right:0;box-shadow:inset 0 2px #fff6}.mario-hint{color:var(--ink-soft);margin:0;font-size:.85rem}.chime{height:var(--h,100%);cursor:pointer;z-index:1;background:linear-gradient(to bottom, var(--tube) 0%, var(--tube) 70%, var(--tube-deep) 100%);border:2px solid #00000040;border-bottom:none;border-radius:6px 6px 0 0;flex:1;min-width:0;padding:0;transition:box-shadow .4s ease-out,filter .2s ease-out;position:relative;box-shadow:inset 0 0 #ffffffe6}.chime:before{content:"";background:var(--tube-deep);border:2px solid #00000040;border-radius:4px;height:.9rem;position:absolute;top:-.7rem;left:-.35rem;right:-.35rem}.chime[data-note="0"]{--tube:#ffadad;--tube-deep:#ec8b8b}.chime[data-note="1"]{--tube:#ffd6a5;--tube-deep:#f4b877}.chime[data-note="2"]{--tube:#fdffb6;--tube-deep:#e6e88c}.chime[data-note="3"]{--tube:#caffbf;--tube-deep:#9fe89a}.chime[data-note="4"]{--tube:#9bf6ff;--tube-deep:#6cd9e6}.chime[data-note="5"]{--tube:#a0c4ff;--tube-deep:#7aa3f2}.chime[data-note="6"]{--tube:#bdb2ff;--tube-deep:#988ae8}.chime:hover{filter:brightness(1.08)}.chime:focus-visible{outline:2px solid var(--seal);outline-offset:4px}.chime.struck{box-shadow:inset 0 -2rem 1.5rem -1rem #ffffffe6}.chime.knock{pointer-events:none;animation:.25s cubic-bezier(.36,.07,.19,.97) knock}@keyframes knock{0%{transform:translate(0)}35%{transform:translateX(var(--knock-x,6px))}to{transform:translate(0)}}#mario{z-index:2;pointer-events:none;will-change:transform;width:1.6rem;height:1.9rem;position:absolute;bottom:1.5rem;left:0}.mario-cap{background:#e0342d;border-radius:3px 3px 0 0;height:.5rem;position:absolute;top:0;left:-.15rem;right:-.15rem}.mario-face{background:#ffc89a;height:.55rem;position:absolute;top:.45rem;left:.1rem;right:.1rem}.mario-body{background:#1e5fd6;border-radius:0 0 2px 2px;height:.95rem;position:absolute;bottom:0;left:0;right:0}@media (prefers-reduced-motion:reduce){.chime{transition:none}.chime.knock{animation:none}}