@import"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap";:root{font-family:Noto Sans SC,Yu Gothic,sans-serif;color:#3d5360;background:#fdfaf7;line-height:1.55;--pink:#ef9caf;--deep:#d87890;--pale:#fbe4e8;--aqua:#9ed8d5;--aqua-deep:#65b6b3;--aqua-pale:#e3f5f3;--ink:#3d5360}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 4% 12%,#facad573,transparent 23%),radial-gradient(circle at 97% 34%,#b9e5e176,transparent 25%),linear-gradient(#fffdfb,#f9f6f2)}button,select{font:inherit}button{transition:.18s}button:hover:not(:disabled){transform:translateY(-2px)}button:disabled{opacity:.45}.app-shell{position:relative;overflow:hidden;max-width:1440px;margin:auto;padding:0 56px 36px}.app-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#67a1a90b 1px,transparent 1px),linear-gradient(90deg,#67a1a90b 1px,transparent 1px);background-size:28px 28px}.petals i{position:absolute;font-style:normal;color:var(--pink);opacity:.3;font-size:28px}.petals i:nth-child(1){top:170px;left:2%}.petals i:nth-child(2){top:410px;right:3%;color:var(--aqua-deep);font-size:42px}.petals i:nth-child(3){top:780px;left:1%;color:var(--aqua)}.petals i:nth-child(4){top:1050px;right:1%}.site-header{height:98px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dcebea;position:relative}.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}.brand>span:last-child{display:grid}.brand strong{font-size:1.05rem;letter-spacing:.16em}.brand small{font:600 .61rem Playfair Display;letter-spacing:.18em;color:#78939c}.crest{position:relative;display:grid;place-items:center;width:58px;height:64px;background:#fff;border:2px solid var(--pink);border-radius:50%;box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 7px var(--aqua-pale),0 4px 14px #6a979e1f}.crest b{font-family:serif;font-size:1.35rem;color:var(--deep)}.crest i{position:absolute;right:5px;bottom:4px;font-style:normal;color:var(--aqua-deep);font-size:.75rem}.header-meta{display:flex;align-items:center;gap:25px;color:#758e97;font-size:.76rem}.header-meta b{padding:7px 13px;border:1px solid var(--pink);border-radius:99px;color:var(--deep);background:#fff8f9}.hero{position:relative;min-height:490px;display:grid;grid-template-columns:1.4fr minmax(330px,.65fr);gap:90px;align-items:center;padding:60px 4%}.eyebrow{display:flex;gap:10px;margin:0 0 20px;color:#77939b;letter-spacing:.14em;font-size:.78rem}.eyebrow span{color:var(--pink)}.hero h1{max-width:760px;margin:0;color:#435b66;font:600 clamp(3.2rem,5.5vw,6rem)/1.13 "Playfair Display","Noto Sans SC",serif}.hero h1:first-letter{color:var(--deep)}.lede{max-width:650px;margin:25px 0;color:#738b94;line-height:1.9;letter-spacing:.05em}.hero-link{display:inline-flex;gap:25px;color:var(--deep);font:italic 600 1rem Playfair Display;text-decoration:none;border-bottom:1px solid var(--pink);padding:0 2px 8px}.event-card{position:relative;background:#fffdfbea;border:1px solid #d8ebe8;border-radius:5px;padding:36px 34px 30px;box-shadow:10px 13px var(--aqua-pale),0 18px 45px #57858d1f;transform:rotate(1.5deg)}.event-card:after{content:"✿";position:absolute;right:22px;top:17px;color:var(--pink);font-size:1.6rem}.tape{position:absolute;width:95px;height:25px;top:-13px;left:50%;transform:translate(-50%) rotate(-3deg);background:#f2bec88c}.event-card p{margin:0;color:var(--deep);font-size:.72rem;letter-spacing:.18em}.event-card time{display:block;margin:16px 0 5px;color:var(--aqua-deep);font:600 1.1rem Playfair Display}.event-card h2{margin:0;color:#4f6872;font-size:1.3rem}.event-card small{display:block;margin-top:16px;color:#7d939a;line-height:1.8}.staff-lines{height:35px;margin:17px 0;background:repeating-linear-gradient(transparent 0 5px,#dbe9e8 6px 7px);position:relative}.staff-lines span{position:absolute;color:var(--pink);font-size:1.6rem;left:20%}.practice-heading{position:relative;display:flex;align-items:end;gap:24px;margin-bottom:20px;padding:0 8px;border-bottom:2px solid var(--aqua-pale)}.practice-heading>div{display:flex;align-items:center;gap:10px;color:var(--aqua-deep)}.practice-heading>div span{font:600 2rem Playfair Display}.practice-heading p{font-size:.68rem;letter-spacing:.18em}.practice-heading h2{margin:0 0 -2px;padding-bottom:14px;border-bottom:2px solid var(--pink);color:#4a626d;font-size:1.4rem}.music-mark{margin-left:auto;color:var(--pink);font-size:2rem}.panel{position:relative;background:#fffdfbdd;border:1px solid #dcebea;box-shadow:0 15px 40px #53808a14}.control-panel{display:flex;align-items:end;gap:18px;padding:20px 24px;border-radius:18px;margin-bottom:22px}.field{display:flex;flex-direction:column;gap:7px;min-width:150px}.field label{font-size:.73rem;color:#789099}.field select,.primary,.secondary,.choice{border-radius:10px;padding:11px 14px}.field select{border:1px solid #d5e8e6;background:#fff;color:var(--ink)}.control-actions{margin-left:auto;display:flex;gap:10px}.primary,.secondary,.choice{border:1px solid transparent;cursor:pointer}.primary{display:flex;gap:9px;background:linear-gradient(135deg,var(--pink),#e989a1);color:#fff;font-weight:600;box-shadow:0 7px 18px #dc789038}.secondary,.choice{background:#fff;color:#607983;border-color:#d7e9e7}.secondary:hover:not(:disabled),.choice:hover{border-color:var(--aqua);background:var(--aqua-pale)}.dashboard{position:relative;display:grid;grid-template-columns:2fr minmax(300px,.78fr);gap:22px}.exercise-panel,.stats-panel{border-radius:18px;padding:26px}.panel-header{display:flex;justify-content:space-between;color:#96abb1;letter-spacing:.15em;font-size:.66rem;border-bottom:1px dashed #d7e6e5;padding-bottom:12px}.exercise-title{display:flex;gap:15px;align-items:center;margin-top:23px}.note-orb{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:50%;background:var(--pale);color:var(--deep);font-size:1.4rem}.exercise-title small{color:var(--aqua-deep);letter-spacing:.16em;font-size:.62rem}.exercise-title h2{margin:2px 0;color:#49616c;font-size:1.25rem}.message{min-height:27px;margin:18px 0;color:#789199;font-size:.9rem;padding-left:63px}.message.correct{color:#55a493}.message.wrong{color:var(--deep)}.result-zone{display:flex;align-items:center;gap:18px;margin:15px 0 10px 63px}.result-badge{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:1.6rem}.result-badge.correct{background:var(--aqua-pale);color:var(--aqua-deep)}.result-badge.wrong{background:var(--pale);color:var(--deep)}.countdown-ring{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;padding:7px}.countdown-center{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#fff;text-align:center}.countdown-center strong{font:600 1.8rem Playfair Display}.countdown-center span{font-size:.62rem;color:#8ba0a7}.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px;margin:20px 0}.choice.correct{background:var(--aqua-pale);border-color:var(--aqua);color:#428c80}.choice.wrong{background:var(--pale);border-color:var(--pink);color:#c9667e}.choice.expected{box-shadow:inset 0 0 0 2px var(--aqua)}.keyboard{display:grid;grid-template-columns:repeat(12,minmax(38px,1fr));gap:6px;margin-top:22px;padding:18px 14px 14px;background:var(--aqua-pale);border-radius:14px}.key{display:flex;flex-direction:column;justify-content:space-between;min-height:118px;padding:11px 6px;border-radius:7px;border:1px solid #d7e1e0;cursor:pointer}.key.white{background:linear-gradient(#fff,#fcf9f3);color:#617983;box-shadow:0 4px #cfdedd}.key.black{background:linear-gradient(#617b84,#405760);color:#fff;box-shadow:0 4px #30454d}.key span{font-weight:700}.key.active,.key.free-playing{background:linear-gradient(#f9c3cf,#ec8fa7);color:#fff}.key.correct{background:linear-gradient(#bceae4,#74c8bd);color:#315f5a}.key.wrong{background:linear-gradient(#f9c3cf,#ec8fa7);color:#7b3547}.key.expected{outline:3px solid var(--aqua)}.melody-status,.free-play-status{display:flex;justify-content:space-between;margin:18px 0;padding:13px 16px;border-radius:10px;background:linear-gradient(135deg,var(--pale),#fff)}.free-play-status strong{color:var(--deep)}.melody-submit{margin-top:15px}.auto-next-hint{text-align:right;color:#8ca0a7;font-size:.76rem}.journal-label{display:flex;gap:9px;align-items:center;color:var(--aqua-deep);font-size:.66rem;letter-spacing:.16em}.journal-label span{font:600 1.5rem Playfair Display}.stats-panel>h3{margin:8px 0 16px;color:#4d6670;font-size:1.08rem}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.stats-grid div{padding:13px;border-radius:10px;background:#f7fbfa;border:1px solid #e1efed}.stats-grid dt{color:#8ba0a7;font-size:.72rem}.stats-grid dd{margin:4px 0;color:#536d77;font:600 1.55rem Playfair Display}.stats-grid dd small{font:400 .66rem sans-serif;color:#9aadb2}.rule-title{display:flex;align-items:center;gap:10px;margin-top:23px!important;font-size:.82rem!important}.rule-title:after{content:"";height:1px;flex:1;background:#deebea}.history{display:grid;gap:8px}.history-empty{font-size:.78rem;color:#96a8ad;font-style:italic}.history-item{display:flex;gap:10px;align-items:center;padding:9px;border-radius:9px;background:#fbfdfc}.history-item>b{font-size:1.15rem;color:var(--aqua-deep)}.history-item.wrong>b{color:var(--deep)}.history-item>span{display:grid}.history-item strong{font-size:.75rem}.history-item small{color:#91a4aa;font-size:.66rem}.mapping{display:flex;flex-wrap:wrap;gap:7px}.mapping span{display:flex;gap:5px;padding:4px 7px;background:var(--pale);border-radius:6px;color:#7f9298;font-size:.62rem}.mapping b{color:var(--deep)}footer{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;margin-top:42px;padding:25px;border-top:1px solid #deebea;color:#8ba1a8}footer p{margin:0;font-size:.76rem;letter-spacing:.12em}footer small{font:italic 600 .75rem Playfair Display}footer span{color:var(--pink)}@media(max-width:1050px){.app-shell{padding:0 28px}.header-meta span{display:none}.hero{grid-template-columns:1fr .7fr;gap:35px;padding-inline:0}.dashboard{grid-template-columns:1fr}.keyboard{grid-template-columns:repeat(6,1fr)}}@media(max-width:720px){.app-shell{padding:0 16px}.site-header{height:82px}.brand strong{font-size:.88rem}.crest{width:48px;height:54px}.header-meta{display:none}.hero{grid-template-columns:1fr;padding:45px 0}.hero h1{font-size:clamp(2.6rem,14vw,4.3rem)}.event-card{margin:15px 10px}.practice-heading h2{font-size:1.1rem}.music-mark,.practice-heading>div p{display:none}.control-panel{align-items:stretch}.field,.control-actions{width:100%;margin-left:0}.control-actions{flex-direction:column}.dashboard{display:block}.stats-panel{margin-top:18px}.exercise-panel,.stats-panel{padding:20px 16px}.message{padding-left:0}.keyboard{grid-template-columns:repeat(4,1fr);padding:12px 9px}.key{min-height:95px}.result-zone{margin-left:0}footer{flex-wrap:wrap;gap:8px;text-align:center}footer small{width:100%}}.quick-guide{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:13px;align-items:center;margin:0 0 18px;padding:13px 18px;border:1px solid #dcebea;border-radius:13px;background:#fffdfbdb;color:#718a93;font-size:.76rem}.quick-guide span{display:flex;align-items:center;gap:9px}.quick-guide b{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:50%;background:#fbe4e8;color:#d87890;font-family:Playfair Display,serif}.quick-guide i{color:#9ed8d5;font-style:normal}@media(max-width:720px){.quick-guide{grid-template-columns:1fr}.quick-guide i{display:none}}