.mm-app{--mm-bg: #0B0B0B;--mm-bg2: #151515;--mm-panel: #171717;--mm-text: #F5EFE3;--mm-text-soft: rgba(245,239,227,.72);--mm-text-muted: rgba(245,239,227,.45);--mm-border: rgba(215,191,129,.22);--mm-border-strong: rgba(215,191,129,.4);--mm-accent: #D7BF81;--mm-accent-soft: rgba(215,191,129,.12);--mm-on-accent: #1b1505;--mm-grad: linear-gradient(135deg, #E6D4A8 0%, #D7BF81 45%, #BEA86E 100%);--mm-shadow: 0 6px 24px rgba(0,0,0,.35)}.mm-app.mm-theme-light{--mm-bg: #F5F0E6;--mm-bg2: #FBF8F1;--mm-panel: #FFFFFF;--mm-text: #1F1D19;--mm-text-soft: rgba(31,29,25,.72);--mm-text-muted: rgba(31,29,25,.5);--mm-border: rgba(160,137,74,.3);--mm-border-strong: rgba(160,137,74,.5);--mm-accent: #A0894A;--mm-accent-soft: rgba(160,137,74,.12);--mm-on-accent: #1b1505;--mm-grad: linear-gradient(135deg, #C9A94F 0%, #A0894A 55%, #8A6D1F 100%);--mm-shadow: 0 6px 24px rgba(120,100,60,.18)}.mm-app{position:relative;display:flex;flex-direction:column;width:100%;background:var(--mm-bg);color:var(--mm-text);font-family:var(--pm-font, "Montserrat", sans-serif);overflow:hidden;-webkit-tap-highlight-color:transparent}.mm-app *,.mm-app *:before,.mm-app *:after{box-sizing:border-box;margin:0;padding:0}body.mm-playing .mm-app,.mm-app:fullscreen,.mm-app:-webkit-full-screen{position:fixed;inset:0;height:100vh;height:100dvh;z-index:2147483000}.mm-bg{position:absolute;inset:0;z-index:0;pointer-events:none;display:block}.mm-brandbar,.mm-screen,.mm-overlay,.mm-banner{position:relative;z-index:1}.mm-overlay,.mm-banner{z-index:50}.mm-banner{z-index:30}.mm-icon{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.15em;flex:0 0 auto;fill:none;stroke:currentColor;overflow:visible}.mm-brandbar{flex-shrink:0;display:flex;align-items:center;gap:.55rem;height:46px;padding-top:env(safe-area-inset-top,0);padding-left:calc(.75rem + env(safe-area-inset-left,0px));padding-right:calc(.75rem + env(safe-area-inset-right,0px));background:var(--mm-bg2);border-bottom:1px solid var(--mm-border);box-sizing:content-box}.mm-brandbar__back{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:var(--mm-accent);background:var(--mm-accent-soft);border:1px solid var(--mm-border-strong);text-decoration:none;transition:all .2s ease;flex-shrink:0}.mm-brandbar__back .mm-icon{width:17px;height:17px}.mm-brandbar__back:hover{filter:brightness(1.15)}.mm-brandbar__logo{width:26px;height:26px;border-radius:50%;flex-shrink:0}.mm-brandbar__title{margin:0;line-height:1.2;font-weight:800;font-size:.95rem;letter-spacing:.01em;background:var(--mm-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap}.mm-theme-toggle{margin-left:auto;flex-shrink:0;width:34px;height:34px;padding:0;border-radius:50%;border:1.5px solid var(--mm-border-strong);background:transparent;color:var(--mm-accent);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}.mm-theme-toggle:hover{background:var(--mm-accent-soft)}.mm-theme-toggle svg{width:17px;height:17px}.mm-theme-toggle__sun{display:none}.mm-theme-toggle.is-light .mm-theme-toggle__sun{display:block}.mm-theme-toggle.is-light .mm-theme-toggle__moon{display:none}.mm-screen{width:100%}.mm-screen--start,.mm-screen--gameover{display:flex;align-items:flex-start;justify-content:center;padding:1.2rem 1rem 1.6rem}.mm-screen--gameover{min-height:60vh;align-items:center}.mm-screen--game{display:flex;flex:1;min-height:0;flex-direction:column;background:var(--mm-bg)}.mm-start-content{max-width:560px;width:100%;display:flex;flex-direction:column;align-items:stretch;gap:.85rem;animation:mm-fadeIn .4s ease}.mm-hero{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:.6rem 0 .2rem;text-align:center}.mm-hero__best{display:inline-flex;align-items:baseline;gap:.4rem;padding:.22rem .9rem;border:1px solid var(--mm-border-strong);border-radius:9999px;background:var(--mm-accent-soft)}.mm-hero__best-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--mm-text-muted)}.mm-hero__best-value{font-size:.95rem;font-weight:800;color:var(--mm-accent);font-variant-numeric:tabular-nums}.mm-btn--hero{font-size:1.3rem;padding:1rem 3.2rem;gap:.6rem}.mm-btn--hero .mm-icon{width:1.2em;height:1.2em}.mm-hero__lines{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin-top:.15rem}.mm-hero__line{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--mm-text-muted)}.mm-hero__line a{color:var(--mm-accent);text-decoration:none;font-weight:700}.mm-hero__line a:hover{text-decoration:underline}.mm-midi-hint .mm-icon{width:1em;height:1em;color:var(--mm-accent)}.mm-note-progression{display:flex;align-items:center;justify-content:center;gap:.3rem;flex-wrap:wrap;padding:.6rem;background:var(--mm-accent-soft);border-radius:12px;border:1px solid var(--mm-border)}.mm-progression-note{display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;flex-shrink:0}.mm-progression-note span{line-height:1}.mm-progression-arrow{color:var(--mm-text-muted);font-size:.75rem;font-weight:700}.mm-progression-dots{color:var(--mm-text-muted);font-size:1.2rem;letter-spacing:.1em}.mm-accordion{background:var(--mm-bg2);border:1.5px solid var(--mm-border);border-radius:14px;overflow:hidden;box-shadow:var(--mm-shadow)}.mm-accordion__head{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem}.mm-accordion__head::-webkit-details-marker{display:none}.mm-accordion__label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--mm-text-muted);flex-shrink:0}.mm-accordion__value{flex:1;text-align:right;font-weight:700;font-size:.9rem;color:var(--mm-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mm-accordion__chevron{width:18px;height:18px;color:var(--mm-accent);transition:transform .25s ease;flex-shrink:0}.mm-accordion[open] .mm-accordion__chevron{transform:rotate(180deg)}.mm-accordion__body{padding:0 1rem 1.1rem;display:flex;flex-direction:column;gap:.75rem}.mm-accordion__head:hover .mm-accordion__value{color:var(--mm-accent)}.mm-preview{background:var(--mm-panel);border:1px solid var(--mm-border);border-radius:12px;padding:.4rem .5rem}#mm-preview-canvas{display:block;width:100%;height:auto}.mm-melody-meta{display:flex;align-items:center;justify-content:space-between;gap:.6rem;text-align:left}.mm-melody-meta__main{display:flex;flex-direction:column;min-width:0}.mm-melody-meta__main strong{font-size:.95rem;font-weight:800;color:var(--mm-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mm-melody-meta__main span{font-size:.72rem;color:var(--mm-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mm-melody-meta__side{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.mm-melody-meta__count{font-size:.7rem;font-weight:600;color:var(--mm-text-muted);white-space:nowrap}.mm-group-badge{display:inline-block;padding:.18rem .65rem;border-radius:9999px;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#0b0b0b;background:#6fa37a}.mm-group-badge.is-easy{background:#6fa37a}.mm-group-badge.is-folk{background:#6f90c8}.mm-group-badge.is-christmas{background:#c97a6d;color:#fff}.mm-group-badge.is-classical{background:#c68f4e}.mm-melody-list,.mm-mode-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.mm-melody-btn{position:relative;background:transparent;border:1px solid var(--mm-border-strong);color:var(--mm-text-soft);padding:.4rem .9rem;border-radius:9999px;font-family:inherit;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease}.mm-melody-btn:hover{border-color:var(--mm-accent);color:var(--mm-accent);background:var(--mm-accent-soft)}.mm-melody-btn--active{background:var(--mm-accent-soft);border-color:var(--mm-accent);color:var(--mm-accent)}.mm-melody-btn.is-done:after{content:"✓";margin-left:.4rem;font-weight:700;color:#10b981}.mm-field{width:100%}.mm-field__label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--mm-text-muted);margin-bottom:.5rem;text-align:center}.mm-select-wrap{max-width:360px;margin:0 auto;width:100%}.mm-select{width:100%;appearance:none;-webkit-appearance:none;background-color:var(--mm-accent-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0894A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;border:1px solid var(--mm-border-strong);color:var(--mm-text);padding:.55rem 2.2rem .55rem 1rem;border-radius:12px;font-family:inherit;font-size:.85rem;cursor:pointer}.mm-select:focus{outline:none;border-color:var(--mm-accent);box-shadow:0 0 0 3px var(--mm-accent-soft)}.mm-select option{background:var(--mm-panel);color:var(--mm-text)}.mm-select optgroup{background:var(--mm-bg);color:var(--mm-accent);font-weight:700}.mm-field--switch{display:flex;justify-content:center}.mm-switch{display:inline-flex;align-items:center;gap:.7rem;padding:.4rem .5rem .4rem 1rem;background:transparent;border:1px solid var(--mm-border-strong);border-radius:9999px;color:var(--mm-text-soft);font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s ease}.mm-switch:hover{border-color:var(--mm-accent)}.mm-switch__track{position:relative;width:40px;height:22px;border-radius:9999px;background:var(--mm-accent-soft);border:1px solid var(--mm-border-strong);transition:all .2s ease;flex-shrink:0}.mm-switch__thumb{position:absolute;top:50%;left:2px;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;background:var(--mm-text-muted);transition:all .2s ease}.mm-switch.is-on{color:var(--mm-accent);border-color:var(--mm-accent)}.mm-switch.is-on .mm-switch__track{background:var(--mm-grad);border-color:transparent}.mm-switch.is-on .mm-switch__thumb{left:calc(100% - 18px);background:#fff}.mm-help-inline{align-self:center}.mm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.9rem;border:none;border-radius:9999px;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:all .25s ease;text-decoration:none}.mm-btn .mm-icon{width:1.1em;height:1.1em}.mm-btn--play{background:var(--mm-grad);color:var(--mm-on-accent);box-shadow:0 4px 20px #d7bf814d}.mm-btn--play:hover{transform:translateY(-2px);box-shadow:0 6px 28px #d7bf8173}.mm-btn--secondary{background:transparent;color:var(--mm-text-soft);border:1px solid var(--mm-border-strong)}.mm-btn--secondary:hover{border-color:var(--mm-accent);color:var(--mm-text)}.mm-btn--secondary .mm-icon{width:1.05em;height:1.05em}.mm-btn--icon-round{width:46px;height:46px;padding:0;border-radius:50%;background:var(--mm-accent-soft);border:1.5px solid var(--mm-border-strong);color:var(--mm-accent)}.mm-btn--icon-round .mm-icon{width:1.3em;height:1.3em}.mm-btn--icon-round:hover{filter:brightness(1.1);transform:translateY(-2px)}.mm-btn:focus-visible,.mm-hud-btn:focus-visible,.mm-melody-btn:focus-visible,.mm-switch:focus-visible,.mm-brandbar__back:focus-visible,.mm-select:focus-visible,.mm-theme-toggle:focus-visible,.mm-accordion__head:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mm-accent-soft)}.mm-hud{width:100%;background:var(--mm-bg2);border-bottom:1px solid var(--mm-border);flex-shrink:0;z-index:20;padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}.mm-hud__inner{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0 auto;padding:.5rem 1rem}.mm-hud__left,.mm-hud__right{display:flex;align-items:center;gap:.5rem}.mm-hud__center{text-align:center;min-width:0}.mm-hud__score{display:flex;flex-direction:column;align-items:center}.mm-hud__score-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mm-text-muted)}.mm-hud__score-value{font-size:1.55rem;font-weight:800;color:var(--mm-accent);line-height:1;font-variant-numeric:tabular-nums}.mm-hud__melody{margin-top:.12rem;font-size:.66rem;font-weight:600;color:var(--mm-text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}.mm-hud__next{display:flex;flex-direction:column;align-items:center;gap:.15rem}.mm-hud__next-label{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mm-text-muted)}#mm-next-canvas{width:40px;height:40px;border-radius:8px;background:var(--mm-accent-soft);border:1px solid var(--mm-border)}.mm-hud-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:var(--mm-accent-soft);border:1px solid var(--mm-border);border-radius:8px;color:var(--mm-text-soft);cursor:pointer;transition:all .2s ease}.mm-hud-btn .mm-icon{width:20px;height:20px}.mm-hud-btn:hover{color:var(--mm-text);border-color:var(--mm-accent)}#mm-btn-sound .mm-ico-off,#mm-btn-sound.is-muted .mm-ico-on{display:none}#mm-btn-sound.is-muted .mm-ico-off{display:inline-flex;color:#dc2626}.mm-hud-midi{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:var(--mm-accent)}.mm-hud-midi .mm-icon{width:20px;height:20px}.mm-canvas-wrap{position:relative;flex:1;width:100%;min-height:0;margin:0;padding:0;display:block;touch-action:none;overflow:hidden;background:var(--mm-bg)}#mm-canvas{display:block;position:absolute;left:0;top:0}.mm-banner{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%) scale(.85);text-align:center;padding:.85rem 1.9rem;border-radius:18px;background:var(--mm-bg2);border:1.5px solid var(--mm-border-strong);box-shadow:0 0 40px #d7bf8138;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;max-width:90%}.mm-banner.is-show{opacity:1;transform:translate(-50%,-50%) scale(1)}.mm-banner__title{font-weight:800;font-size:1.45rem;background:var(--mm-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.mm-banner__sub{margin-top:.25rem;font-size:.9rem;font-weight:600;color:var(--mm-text-soft)}.mm-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--mm-bg) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:mm-fadeIn .2s ease;padding:1.2rem}.mm-overlay__box{text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center}.mm-overlay__box h2{font-weight:800;font-size:1.8rem;color:var(--mm-accent)}.mm-settings-box{width:100%;max-width:400px;max-height:100%;overflow-y:auto;background:var(--mm-panel);border:1.5px solid var(--mm-border-strong);border-radius:18px;padding:1.3rem 1.2rem;gap:.85rem}.mm-settings-actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.3rem}.mm-settings-actions .mm-btn{padding:.65rem 1.3rem;font-size:.9rem}.mm-tutorial__box{max-width:460px;width:100%;max-height:100%;overflow-y:auto;text-align:center;background:var(--mm-panel);border:1.5px solid var(--mm-border-strong);border-radius:18px;padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.85rem;align-items:center;animation:mm-fadeIn .3s ease}.mm-tutorial__box h2{font-weight:800;font-size:1.5rem;color:var(--mm-accent)}.mm-tutorial__step{display:flex;align-items:flex-start;gap:.85rem;text-align:left}.mm-tutorial__num{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--mm-grad);color:var(--mm-on-accent);font-weight:800;font-size:.9rem}.mm-tutorial__step p{font-size:.85rem;line-height:1.5;color:var(--mm-text-soft)}.mm-gameover-content{text-align:center;animation:mm-fadeIn .5s ease}.mm-gameover-title{font-weight:800;font-size:2.1rem;color:var(--mm-text);margin-bottom:.35rem}.mm-gameover-sub{font-size:.85rem;color:var(--mm-text-muted);margin-bottom:1.2rem}.mm-gameover-score,.mm-gameover-best{margin-bottom:.7rem}.mm-gameover-score__label,.mm-gameover-best__label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;color:var(--mm-text-muted);margin-bottom:.2rem}.mm-gameover-score__value{font-size:3rem;font-weight:800;color:var(--mm-accent);line-height:1;font-variant-numeric:tabular-nums}.mm-gameover-best__value{font-size:1.35rem;font-weight:700;color:var(--mm-text-soft);font-variant-numeric:tabular-nums}.mm-gameover-record{display:inline-block;padding:.35rem 1.2rem;background:var(--mm-grad);color:var(--mm-on-accent);font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;border-radius:9999px;margin-bottom:1rem;animation:mm-recordPulse 1s ease infinite}.mm-gameover-stats{display:flex;justify-content:center;gap:1.5rem;margin:.5rem 0;flex-wrap:wrap}.mm-stat{display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:70px}.mm-stat__value{font-size:1.15rem;font-weight:800;color:var(--mm-accent);font-variant-numeric:tabular-nums}.mm-stat__label{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mm-text-muted)}.mm-gameover-actions{display:flex;flex-direction:column;gap:.7rem;align-items:center;margin-top:1.3rem}@keyframes mm-fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes mm-recordPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05);box-shadow:0 0 20px #d7bf8166}}@media(prefers-reduced-motion:reduce){.mm-app *,.mm-app *:before,.mm-app *:after{animation-duration:1ms!important;transition-duration:1ms!important}}@media(min-width:1024px){.mm-brandbar{height:48px}.mm-brandbar__title{font-size:1.05rem}}@media(max-width:820px){.mm-hud-btn--desktop{display:none}}@media(pointer:coarse){.mm-hud-btn--desktop{display:none}}@media(max-width:480px){.mm-btn--hero{font-size:1.15rem;padding:.9rem 2.6rem}.mm-melody-btn{font-size:.74rem;padding:.35rem .72rem}.mm-btn{padding:.7rem 1.5rem;font-size:.92rem}.mm-hud__score-value{font-size:1.25rem}.mm-hud__melody{font-size:.6rem;max-width:38vw}.mm-hud-btn{width:34px;height:34px}.mm-hud-btn .mm-icon{width:18px;height:18px}#mm-next-canvas{width:34px;height:34px}.mm-banner__title{font-size:1.2rem}.mm-gameover-title{font-size:1.7rem}.mm-gameover-score__value{font-size:2.3rem}}@media(max-height:560px)and (orientation:landscape){.mm-brandbar{height:36px}.mm-brandbar__back,.mm-theme-toggle{width:28px;height:28px}.mm-brandbar__title{font-size:.85rem}.mm-screen--start{padding:.8rem}.mm-hero{padding:.3rem 0;gap:.4rem}.mm-btn--hero{font-size:1.05rem;padding:.7rem 2.2rem}.mm-hud__inner{padding:.3rem .75rem}.mm-hud__score-value{font-size:1.1rem}.mm-hud-btn{width:32px;height:32px}.mm-hud-btn .mm-icon{width:17px;height:17px}.mm-gameover-title{font-size:1.4rem;margin-bottom:.5rem}.mm-gameover-score__value{font-size:1.9rem}.mm-gameover-actions{flex-direction:row;margin-top:.9rem}}@media print{.mm-app{display:none}}