:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#32372f;background:#f6f5f0;font-synthesis:none;--accent:#8474a8;--scene-color:#a69bd3;--scene-tint:#ece8f4;--scene-dark:#6e608a}
*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #9581be;outline-offset:5px}button{color:inherit}button svg{display:block}button:disabled{cursor:default}a{color:inherit;text-decoration:none}.page{max-width:1200px;margin:auto;padding:0 52px}.header{height:116px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e3d9}.brand{display:flex;gap:12px;align-items:center}.brand-mark{width:44px;height:44px;background:#3c4338;color:#f8f7ee;border-radius:14px;display:grid;place-items:center;font:32px Georgia;transform:rotate(-7deg)}.brand strong{font-size:25px;letter-spacing:2px;display:block;font-weight:650}.brand-dot{color:#a793c4}.brand small{font-size:9px;letter-spacing:2.2px;color:#8c9184;display:block;margin-top:4px}.header-copy{font-size:12px;letter-spacing:1px;color:#8a8e82}.local-badge{font-size:11px;padding:9px 13px;border:1px solid #dddED4;border-radius:30px;display:flex;align-items:center;gap:7px;color:#747d6d}.local-badge i{width:5px;height:5px;background:#8eaa84;border-radius:50%}.intro{display:flex;align-items:center;justify-content:space-between;padding:36px 0 25px}.eyebrow{font-size:9px;letter-spacing:2.2px;color:#94988c;font-weight:550}h1{font-size:25px;font-weight:550;letter-spacing:1px;margin:10px 0 0}.intro-note{font-size:11px;line-height:1.8;color:#979b8d;position:relative;padding-right:26px}.intro-note>span{position:absolute;right:0;bottom:0;font:27px Georgia;color:#b1b4a4}.instrument{border-radius:20px;box-shadow:0 8px 30px #31382a08;border:1px solid #e0ded6;overflow:hidden;background:#fff}.scene{height:310px;background:var(--scene-tint);position:relative;overflow:hidden;transition:background .7s}.scene:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.15' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");opacity:.16}#scene-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.scene-top,.scene-bottom{position:absolute;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center;z-index:2}.scene-top{top:25px}.scene-tag{display:flex;gap:8px;align-items:center;font-size:9px;letter-spacing:1.8px;color:var(--scene-dark)}.scene-tag i{width:5px;height:5px;border-radius:50%;background:var(--scene-dark)}.scene-number{font-size:9px;letter-spacing:2px;color:#8c859a}.scene-message{position:absolute;z-index:2;top:76px;left:40px}.scene-message h2{font-size:40px;line-height:1.4;font-weight:500;letter-spacing:3px;margin:0;color:#494151}.scene-message h2>span{color:#9786b1}.scene-message p{font-size:11px;letter-spacing:.5px;color:#8d819e;margin:12px 0 19px}.start-hint{display:flex;align-items:center;gap:9px;font-size:10px;color:#82748e}.start-hint kbd{padding:4px 7px;border:1px solid #bfb5d2;border-radius:5px;font-family:inherit;font-size:10px;box-shadow:0 2px #cbc3d7}.start-hint.started kbd{background:#9181ab;color:#fff;border-color:#9181ab}.scene-bottom{bottom:21px;font-size:9px;color:#91869d;letter-spacing:1px;gap:12px}.scene-caption{letter-spacing:2px;font-size:8px}.note-trail{display:flex;gap:9px;flex:1;justify-content:center;height:16px;overflow:hidden}.trail-note{font:italic 13px Georgia;animation:note-in .4s both}.trail-note:last-child{color:var(--scene-dark)}.note-orbit{position:absolute;width:244px;height:244px;left:65%;top:48%;transform:translate(-50%,-50%);color:var(--scene-dark)}.orbit-ring{position:absolute;border:1px solid #a89abe35;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.ring-one{width:240px;height:240px}.ring-two{width:195px;height:195px;border-style:dashed}.ring-three{width:149px;height:149px;border-color:#a89abe50}.note-core{width:120px;height:120px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(140deg,#fbf9fcba,#c1b3da80);display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 0 50px #c6b8dc44,inset 0 1px 3px #ffffffa8;transition:box-shadow .3s}.note-label{font:italic 54px Georgia;line-height:1.2}.note-core small{font-size:8px;letter-spacing:.8px;margin-top:6px;color:#91859e}.note-core.playing{animation:core-pulse .5s ease-out}.orbit-spark{position:absolute;color:#a18cbb}.spark-one{left:9px;top:39px;font-size:23px}.spark-two{right:27px;bottom:25px;font-size:29px}.orbit-dot{position:absolute;right:12px;top:62px;width:6px;height:6px;border-radius:50%;background:#ab96c6;box-shadow:0 0 0 4px #ac97c31a}.piano-panel{background:#fcfcf9;padding:19px 25px 12px}.piano-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;color:#89907f;font-size:9px;letter-spacing:.3px}.piano-topline>span:first-child{display:flex;align-items:center;gap:7px}.sound-dot{width:5px;height:5px;border-radius:50%;background:#b0b6a5}.sound-dot.active{background:#9881b9;box-shadow:0 0 0 3px #a18abb16}.sustain-indicator{display:flex;align-items:center;gap:7px}.sustain-indicator kbd{font:8px inherit;font-family:inherit;padding:3px 5px;border:1px solid #dedfd6;border-radius:4px;letter-spacing:1px}.sustain-indicator.active{color:#9475b5}.sustain-indicator.active kbd{border-color:#aa8cc7;background:#f0eaf6}.keyboard{height:157px;position:relative;display:flex;gap:3px;border-radius:6px;background:#e1e2da;padding:1px 3px 4px;box-shadow:inset 0 3px 7px #50564025;touch-action:none;user-select:none;-webkit-user-select:none}.piano-key{border:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;touch-action:none;user-select:none;position:relative}.white-key{flex:1;min-width:0;height:100%;background:linear-gradient(90deg,#eeefe9,#fff 14%,#fbfcf7 85%,#eceee6);border-radius:0 0 5px 5px;padding:0 0 13px;box-shadow:0 3px 0 #c9ccc0,0 4px 3px #3c433819;transition:background .12s,box-shadow .12s,transform .12s}.key-letter{font-size:11px;color:#87907d;font-weight:550}.key-note{font:9px Georgia;color:#b1b7a7;margin-top:6px}.white-key.active{background:linear-gradient(#d8ceea,#f1e9fb);box-shadow:0 1px 0 #ad9abd;transform:translateY(2px)}.white-key.active .key-letter,.white-key.active .key-note{color:#806396}.black-key{z-index:3;position:absolute;top:0;width:4%;height:62%;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#343b31,#4b5344 32%,#3c4436 80%,#2d342a);padding-bottom:11px;box-shadow:0 5px 0 #22291f,2px 6px 4px #31382935;transition:transform .1s,background .1s}.black-key .key-letter{font-size:9px;color:#b2baa7}.black-key.active{background:linear-gradient(#716284,#8c799f);box-shadow:0 2px 0 #51415f;transform:translateY(2px)}.black-key.active .key-letter{color:#fff}.keyboard-help{font-size:9px;color:#929889;display:flex;align-items:center;justify-content:space-between;margin-top:17px;gap:10px}.keyboard-help b{font-weight:400;margin:0 7px;color:#c0c5b7}.mini-key{margin-right:5px;font-size:14px}.mobile-only{display:none}.controls{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 0}.mood-control{display:flex;align-items:center;gap:17px}.control-label{font-size:11px;color:#919684;white-space:nowrap}.mood-tabs{display:flex;gap:5px;background:#efefe7;padding:4px;border-radius:9px}.mood{background:transparent;border:0;border-radius:6px;padding:8px 13px;font-size:11px;color:#939885;display:flex;align-items:center;gap:6px;transition:background .2s,color .2s}.mood>span{font-size:16px;line-height:1}.mood.active{background:#fcfcf7;color:#71618b;box-shadow:0 1px 4px #41483110}.mood:hover{color:#71618b}.audio-controls{display:flex;align-items:center;gap:17px}.accompaniment-label{display:flex;align-items:center;gap:10px;font-size:11px;color:#79816d;cursor:pointer;position:relative;white-space:nowrap}.accompaniment-label input{position:absolute;right:0;width:31px;height:18px;opacity:0;cursor:pointer}.switch-track{width:31px;height:18px;background:#c6cabc;border-radius:20px;position:relative;transition:background .2s;pointer-events:none}.switch-track:after{content:"";position:absolute;width:12px;height:12px;background:#fff;border-radius:50%;left:3px;top:3px;transition:transform .2s}.accompaniment-label input:checked+.switch-track{background:#9382aa}.accompaniment-label input:checked+.switch-track:after{transform:translateX(13px)}.accompaniment-label input:focus-visible+.switch-track{outline:3px solid #b6a1d0;outline-offset:3px}.control-divider{height:21px;width:1px;background:#dedfd5}.volume-control{display:flex;align-items:center;gap:9px}.icon-button{padding:4px;border:0;background:none;color:#838b76}.icon-button svg{height:16px;width:16px}.muted-cross{display:none}.icon-button[aria-pressed=true] .muted-cross{display:block}.icon-button[aria-pressed=true] .sound-waves{display:none}input[type=range]{appearance:none;-webkit-appearance:none;width:82px;height:3px;background:linear-gradient(to right,#92997f 65%,#dcded3 65%);border-radius:5px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:9px;width:9px;border-radius:50%;background:#899175}input[type=range]::-moz-range-thumb{height:9px;width:9px;border:0;border-radius:50%;background:#899175}output{font-size:9px;color:#a1a693;width:29px}.stop-button{border:1px solid #dfe1d5;background:transparent;display:flex;align-items:center;gap:5px;font-size:10px;color:#979e8a;padding:7px 9px;border-radius:6px}.stop-button>span{font-size:7px}.stop-button:hover{background:#eeefe6;color:#69745c}.footnote{display:flex;align-items:center;gap:11px;margin-top:4px}.footnote-icon{font-size:23px;color:#b9afc7}.footnote p{font-size:10px;color:#a1a693;line-height:1.9;letter-spacing:.2px}.footnote-line{flex:1;height:1px;background:#e5e6dc;margin-left:8px}.audio-error{font-size:12px;line-height:1.8;color:#975d52;padding:12px;background:#f9e9e4;border-radius:8px}footer{display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid #e2e3d9;margin-top:35px;padding:24px 0 30px;color:#a0a592;font-size:9px;letter-spacing:.5px}footer>span:first-child{font-size:8px;letter-spacing:1.7px}.footer-note{font-size:15px;color:#a293b6;margin-left:8px}@keyframes core-pulse{0%{box-shadow:0 0 0 0 #b19bce60}100%{box-shadow:0 0 0 32px #b19bce00}}@keyframes note-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
body[data-scene=night]{--scene-color:#809ac7;--scene-tint:#e5eaf3;--scene-dark:#607797}body[data-scene=sky]{--scene-color:#7db5a1;--scene-tint:#e6eee6;--scene-dark:#608d76}
@media(min-width:1400px){.page{max-width:1250px;padding:0 65px}.header{height:125px}.intro{padding-top:44px;padding-bottom:30px}.scene{height:335px}.piano-panel{padding-top:23px;padding-bottom:15px}.keyboard{height:171px}.controls{padding:26px 0}footer{margin-top:44px}}
@media(max-width:900px){.page{padding:0 28px}.header{height:95px}.header-copy{display:none}.controls{flex-wrap:wrap;justify-content:center;gap:16px}.mood-control{justify-content:center}.audio-controls{gap:15px}.scene-message h2{font-size:34px}.note-orbit{left:71%}.intro-note{display:none}.piano-panel{padding:17px 18px 12px}.scene-caption{display:none}}
@media(max-width:560px){.page{padding:0 18px}.header{height:86px}.brand-mark{width:35px;height:35px;font-size:27px;border-radius:11px}.brand strong{font-size:22px}.brand small{font-size:8px}.local-badge{font-size:9px;padding:7px 9px}.intro{padding:27px 0 20px}.eyebrow{font-size:8px;letter-spacing:1.6px}h1{font-size:20px;margin-top:9px;letter-spacing:.4px}.instrument{border-radius:15px}.scene{height:282px}.scene-top,.scene-bottom{left:19px;right:19px}.scene-top{top:20px}.scene-message{left:24px;top:70px}.scene-message h2{font-size:29px;letter-spacing:1px;line-height:1.45}.scene-message p{font-size:9px;margin-top:13px;width:143px;line-height:1.7}.start-hint{font-size:9px;max-width:150px;align-items:flex-start;line-height:1.8;gap:7px}.start-hint kbd{display:none}.note-orbit{width:175px;height:175px;left:76%;top:49%}.ring-one{width:167px;height:167px}.ring-two{width:138px;height:138px}.ring-three{width:109px;height:109px}.note-core{width:87px;height:87px}.note-label{font-size:39px}.note-core small{font-size:6px;margin-top:2px}.spark-one{font-size:16px;left:10px;top:28px}.spark-two{font-size:20px;right:21px;bottom:17px}.orbit-dot{right:5px;top:42px;width:4px;height:4px}.scene-bottom{font-size:8px;bottom:18px;flex-wrap:wrap}.note-trail{gap:6px;justify-content:flex-end}.trail-note{font-size:11px}.scene-tag{font-size:8px;letter-spacing:1px}.scene-number{font-size:8px}.piano-panel{padding:15px 10px 11px}.piano-topline{font-size:8px;gap:8px;margin-bottom:13px}.sustain-indicator kbd{font-size:7px}.keyboard{height:137px;gap:2px;padding-left:2px;padding-right:2px}.white-key{padding-bottom:10px}.key-letter{font-size:8px}.key-note{font-size:6px;margin-top:7px}.black-key{padding-bottom:9px;width:4.5%;border-radius:0 0 3px 3px}.black-key .key-letter{font-size:6px}.keyboard-help{font-size:8px;line-height:1.8;align-items:flex-start;gap:8px}.keyboard-help>span:last-child{text-align:right;max-width:108px}.keyboard-help b{margin:0 3px}.desktop-only{display:none}.mobile-only{display:inline}.mini-key{display:none}.controls{padding:19px 0;gap:17px}.control-label{font-size:10px}.mood-control{gap:14px;width:100%}.mood{padding:8px 12px}.audio-controls{width:100%;justify-content:center;gap:12px}.accompaniment-label{font-size:10px;gap:8px}.volume-control{gap:6px}input[type=range]{width:64px}.footnote{gap:7px;align-items:flex-start;margin-top:3px}.footnote p{font-size:9px;margin:0}.footnote-icon{font-size:20px}.footnote-line{display:none}footer{margin-top:24px;padding:20px 0 23px;flex-direction:column;gap:11px;font-size:8px}footer>span:first-child{font-size:7px;letter-spacing:1.3px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* One-key phrase performance and the complete preset library. */
.note-label{font-size:30px;letter-spacing:-1px}.note-core small{font-size:7px}.scene-message h2{font-size:37px}.scene-message p{max-width:275px}.phrase-panel{padding:17px 25px 13px;background:#f5f3f8;border-bottom:1px solid #e5e0eb}.phrase-heading{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:#756582}.phrase-heading strong{font-size:13px;letter-spacing:2px;font-weight:550}.phrase-heading>span{font-size:9px;color:#a298ac}.auto-badge{margin-left:auto;padding:3px 7px;border:1px solid #ded6e6;border-radius:20px}.chord-strip{display:flex;gap:8px}.chord-step{flex:1;text-align:center;position:relative;border:1px solid #e3ddec;border-radius:7px;padding:7px 0;font:14px Georgia;background:#faf9fc;color:#9b8aaa;transition:background .2s,color .2s}.chord-step.active{background:#9180aa;color:#fff;border-color:#9180aa;box-shadow:0 2px 5px #9180aa25}.phrase-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:10px;font-size:9px;color:#9a8da5}.progress-track{width:90px;background:#e3dcea;height:3px;border-radius:3px;overflow:hidden;flex-shrink:0}.progress-track i{display:block;width:0;height:100%;background:#ad94c7}.pattern-bar{display:flex;align-items:center;gap:18px;padding:0 0 22px;border-bottom:1px solid #e2e3d9}.pattern-tabs{display:flex;flex-wrap:wrap;gap:7px}.pattern-tabs button,.genre-tabs button{border:0;background:none;padding:7px 13px;border-radius:6px;font-size:10px;color:#909782}.pattern-tabs button{border:1px solid #e0e1d7}.pattern-tabs button[aria-pressed=true]{background:#ede7f3;border-color:#d4c6e2;color:#816491}.library{padding-top:26px}.library-header{display:flex;justify-content:space-between;align-items:center}.library-header h2{font-size:17px;font-weight:500;margin:0;letter-spacing:.5px}.library-header p{font-size:10px;color:#a3a793;margin:8px 0 0}.library-icon{font:32px Georgia;color:#b6a5c8}.genre-tabs{display:flex;gap:4px;margin:17px 0 13px}.genre-tabs button{font-size:11px;padding:6px 14px}.genre-tabs button[aria-pressed=true]{background:#e9ebe0;color:#727c5f}.template-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-height:258px;overflow-y:auto;padding:2px 5px 3px 2px;scrollbar-color:#d4d7c9 transparent;scrollbar-width:thin}.template-card{position:relative;text-align:left;padding:13px 14px;border:1px solid #e2e4d8;border-radius:9px;background:#fafaf5;min-width:0;transition:background .2s,border-color .2s}.template-card strong{font-size:12px;font-weight:500;letter-spacing:1px}.template-card em{float:right;font-size:8px;font-style:normal;color:#a3aa93;border:1px solid #e2e5d7;padding:2px 4px;border-radius:4px}.template-chords{display:block;font:9px Georgia;color:#a6ad98;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.template-card:hover{background:#f0eef4;border-color:#cdbddd}.template-card.selected{background:#eee7f4;border-color:#b6a0cb}.template-card.selected strong{color:#7a608b}.footnote{margin-top:19px}.key-note{font-family:inherit;font-size:8px}.scene-message p{font-size:11px}.scene-caption{display:none}#note-trail{justify-content:flex-end}.trail-note{font-size:11px}
@media(max-width:900px){.template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pattern-bar{justify-content:center}.scene-message h2{font-size:33px}}
@media(max-width:560px){.scene-message h2{font-size:29px}.scene-message p{font-size:9px;max-width:145px}.note-label{font-size:22px}.note-core small{font-size:5px}.phrase-panel{padding:13px 12px 11px}.phrase-heading{gap:8px;margin-bottom:10px}.phrase-heading strong{font-size:11px}.phrase-heading>span{font-size:8px}.auto-badge{padding:2px 5px}.chord-strip{gap:5px}.chord-step{font-size:11px;padding:7px 0}.phrase-bottom{font-size:8px;gap:7px;line-height:1.6}.progress-track{width:44px}.pattern-bar{gap:10px;flex-direction:column;padding-bottom:17px}.pattern-tabs{gap:5px;justify-content:center}.pattern-tabs button{padding:7px 10px;font-size:9px}.library{padding-top:21px}.library-header h2{font-size:15px}.library-header p{font-size:9px}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:280px;gap:8px}.template-card{padding:12px 10px}.template-card strong{font-size:11px}.template-chords{font-size:8px}.genre-tabs{gap:2px}.genre-tabs button{padding:6px 12px;font-size:10px}.key-note{font-size:6px}.keyboard-help>span:last-child{max-width:110px}.scene-bottom{font-size:7px}.trail-note{font-size:8px}}

@media(max-width:600px){.mood-control{gap:8px}.mood-tabs{flex:1;display:flex;min-width:0}.mood{flex:1;padding:8px 6px;font-size:10px;white-space:nowrap}.mood span{display:none}}