*{box-sizing:border-box}body{margin:0;background:#fff9f2;color:#2d3043;font-family:system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:920px;margin:auto;padding:42px 20px 30px}.brand{display:flex;align-items:center;gap:14px}.logo{display:grid;place-items:center;width:58px;height:58px;background:#8a67da;color:#fff;border-radius:17px;font-size:34px;box-shadow:0 5px 15px #8a67da40}h1,h2,p{margin:0}h1{font-size:clamp(1.65rem,4vw,2.5rem);letter-spacing:-.04em}h1 span{font-size:.8em}.eyebrow{font-size:.7rem;letter-spacing:.14em;font-weight:800;color:#9470c9;margin-bottom:5px}.intro{margin:18px 0 30px;color:#656779;font-size:1.07rem;line-height:1.6}.card{background:#fff;border:1px solid #eee9e7;border-radius:24px;padding:28px;margin:20px 0;box-shadow:0 8px 25px #513f3010}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}h2{font-size:1.45rem;letter-spacing:-.025em}.hint{color:#79798a;margin:10px 0 22px}.pill{background:#f3ebff;color:#7855b7;border-radius:30px;padding:9px 14px;font-size:.8rem;font-weight:700;white-space:nowrap}.keys{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;background:#29283a;padding:5px;border-radius:15px;max-width:740px;margin:auto;box-shadow:0 7px 0 #29283a55}.key{border:0;min-height:185px;border-radius:4px 4px 12px 12px;background:linear-gradient(#fff 65%,var(--bg));color:#333348;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;padding:15px 3px;box-shadow:inset 0 -5px 0 #00000012;transition:transform .13s,filter .13s;font:inherit}.key:hover,.key:focus-visible,.key.pressed{filter:brightness(.91);transform:translateY(3px)}.key:active{transform:translateY(5px)}.key .symbol{font-size:1.5rem}.key .name{font-weight:800;font-size:1.3rem}.key .syllable{font-size:.78rem;font-weight:600;opacity:.7}.key .shortcut{background:#29283a;color:#fff;border-radius:5px;padding:2px 7px;font-size:.72rem;font-weight:700;margin-top:3px}.small-tip{margin-top:20px;color:#806a49;background:#fff8e8;border-radius:12px;padding:13px 16px;font-size:.88rem}.count{vertical-align:middle;display:inline-block;background:#f4efff;color:#8257c2;border-radius:30px;padding:6px 11px;font-size:.76rem;letter-spacing:0;margin-left:7px}.melody{min-height:110px;border:2px dashed #e5dcf1;border-radius:16px;padding:16px;display:flex;flex-wrap:wrap;gap:10px;align-content:center}.empty{width:100%;text-align:center;color:#9391a3;padding:25px 5px}.note{border:0;border-radius:12px;background:var(--bg);padding:11px 9px 8px;min-width:60px;font:inherit;cursor:pointer;display:flex;align-items:center;flex-direction:column;position:relative;gap:4px}.note strong{font-size:1.15rem}.note small{opacity:.7}.note.active{outline:3px solid #7656c8;transform:scale(1.09)}.remove{position:absolute;top:-9px;right:-8px;border:0;border-radius:50%;background:#fff;color:#8b5c6a;box-shadow:0 2px 8px #0003;width:23px;height:23px;cursor:pointer;font-size:16px}.controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:21px}.button{border:0;border-radius:12px;padding:13px 18px;font:inherit;font-weight:750;cursor:pointer}.button:disabled{opacity:.45;cursor:not-allowed}.primary{background:#7d5bc7;color:white;box-shadow:0 4px 10px #7d5bc739}.secondary{background:#f3effa;color:#6548a5}.subtle{background:#f7f4f3;color:#77717b}.button:not(:disabled):hover{filter:brightness(.94)}.beat-wrap{overflow-x:auto;padding:4px 0 12px}.beat-grid{display:grid;grid-template-columns:95px repeat(8,minmax(46px,1fr));gap:6px;min-width:520px}.beat-label{font-weight:750;display:flex;align-items:center;font-size:.9rem}.beat-step{height:48px;border:2px solid #ece9f3;border-radius:10px;background:#f7f5fa;cursor:pointer;font-size:1.2rem;transition:background .12s,transform .12s}.beat-step:nth-child(4n + 2){border-left-color:#b9a9da}.beat-step.on{background:var(--beat-color);border-color:var(--beat-color)}.hum-grid .beat-step.on{color:#353348}.hum-grid .beat-label{color:#504769}.beat-step.current{outline:3px solid #5943a5;outline-offset:1px}.beat-step:hover{transform:scale(1.06)}.tempo-control{margin-top:20px;display:flex;gap:15px;align-items:center;flex-wrap:wrap;color:#656779}.tempo-control input{width:min(260px,100%);accent-color:#7d5bc7}.hum-slots{display:grid;gap:13px}.hum-slot{border:1px solid #e7dcf3;border-radius:15px;padding:16px;background:#faf7ff}.hum-slot h3{font-size:1.08rem;margin:0}.hum-slot .controls{margin-top:12px}.hum-slot.active{border-color:#8b69d3;background:#f4edff}.hum-slot.recording{border-color:#d85365;background:#fff4f5}.real-hum{margin-top:20px;padding:20px;background:#faf7ff;border-radius:16px}.real-hum h3{margin:0 0 8px}.real-hum>p:not(.record-status){color:#686778;line-height:1.5}.record-status{margin-top:16px;color:#74658a;font-weight:600}.record-status.recording{color:#c43956}.privacy-note{margin-top:10px;color:#858290;font-size:.82rem;line-height:1.5}.sing{display:flex;align-items:center;gap:22px;background:#fffcf1;border-color:#f5eac8}.sing-icon{font-size:2rem;background:#ffefbc;border-radius:18px;padding:15px}.sing p:last-child{margin-top:8px;color:#676879;line-height:1.6}footer{text-align:center;color:#92909b;font-size:.83rem;margin-top:26px}button:focus-visible{outline:3px solid #37315e;outline-offset:3px}@media(max-width:650px){main{padding:25px 14px}.card{padding:19px;border-radius:19px}.keys{grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}.key{min-height:140px;padding:10px 1px;gap:3px}.key .symbol{font-size:1rem}.key .name{font-size:1rem}.key .syllable{font-size:.66rem}.key .shortcut{font-size:.62rem;padding:2px 5px}.pill{display:none}.button{flex:1 1 auto}.sing{align-items:flex-start}.sing-icon{font-size:1.5rem;padding:10px}}@media(min-width:1050px){main{max-width:1320px;padding:20px 24px 18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 16px;align-items:start}header,footer{grid-column:1/-1}header{display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{width:46px;height:46px;font-size:28px}.intro{margin:0;max-width:420px;font-size:.91rem;line-height:1.4}.card{margin:0;padding:18px;border-radius:17px;min-width:0}.card h2{font-size:1.25rem}.hint{margin:7px 0 12px;font-size:.88rem;line-height:1.4}.pill{padding:6px 10px;font-size:.73rem}.controls{gap:7px;margin-top:12px}.button{padding:9px 11px;border-radius:9px;font-size:.82rem}.beat-grid{grid-template-columns:85px repeat(8,minmax(36px,1fr));min-width:0;gap:4px}.beat-step{height:36px;border-radius:7px}.beat-label{font-size:.77rem}.beat-wrap{padding:1px 0 5px}.tempo-control{margin-top:10px;font-size:.82rem;gap:10px}.tempo-control input{width:160px}.hum-slots{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.hum-slot{padding:11px;border-radius:11px}.hum-slot h3{font-size:.92rem}.hum-slot .controls{margin-top:8px;gap:5px}.hum-slot .button{flex:1 1 calc(50% - 5px);padding:7px 5px;font-size:.76rem;white-space:nowrap}.record-status{margin-top:10px;font-size:.85rem}.privacy-note{font-size:.75rem;margin-top:7px}.voice .controls .button{flex:1 1 auto}.sing{grid-column:1/-1;padding:11px 16px;gap:12px}.sing-icon{font-size:1.2rem;padding:8px;border-radius:10px}.sing h2{font-size:1rem}.sing p:last-child{margin-top:2px;font-size:.82rem}footer{margin-top:0;font-size:.73rem}}@media(min-width:1050px){main{padding:12px 22px;gap:8px 12px}header{gap:12px}.brand{gap:8px}.logo{width:38px;height:38px;font-size:23px;border-radius:11px}h1{font-size:1.65rem}.eyebrow{font-size:.62rem;margin-bottom:2px}.intro{font-size:.81rem;max-width:390px}.card{padding:13px;border-radius:13px}.card h2{font-size:1.13rem}.hint{margin:5px 0 8px;font-size:.8rem}.pill{padding:4px 8px}.controls{margin-top:8px;gap:5px}.button{padding:7px 9px;font-size:.77rem}.beat-grid{gap:3px}.beat-step{height:30px;border-radius:6px}.beat-wrap{padding:0 0 3px}.tempo-control{margin-top:7px}.hum-slots{gap:6px}.hum-slot{padding:8px}.hum-slot h3{font-size:.84rem}.hum-slot .controls{margin-top:5px;gap:4px}.hum-slot .button{padding:6px 4px;font-size:.71rem}.record-status{margin-top:7px;font-size:.78rem}.privacy-note{margin-top:5px;font-size:.71rem}.sing{padding:8px 13px}.sing-icon{padding:6px}.sing p:last-child{font-size:.76rem}footer{font-size:.69rem}}@media(min-width:1050px){main{max-width:1060px;padding:10px 16px;gap:7px 10px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.card{padding:11px}.hum-slot{padding:7px}.hum-slot .button{font-size:.68rem;padding:5px 3px}.beat-grid{grid-template-columns:68px repeat(8,minmax(32px,1fr))}.beat-label{font-size:.7rem}.beat-step{height:28px}.intro{max-width:330px}}@media(prefers-reduced-motion:reduce){.key{transition:none}}