:root{--ink:#34363b;--cream:#fff5cf;--yellow:#ffd247;--cyan:#28bfd3;--blue:#3c83e9;--mint:#18af96;--pink:#cb63cf}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--cream)}body{font-family:PingFang SC,Microsoft YaHei,Arial,sans-serif;color:var(--ink)}button{font:inherit}.studio{height:100svh;min-height:700px;overflow:hidden;position:relative;padding:clamp(16px,2vh,24px) clamp(36px,5vw,90px) 14px;background:radial-gradient(circle at 22% 2%,rgba(255,255,255,.9),transparent 28%),radial-gradient(circle at 74% 90%,rgba(255,231,133,.48),transparent 30%),linear-gradient(105deg,#fff7d8,#fff1bf,#fff8de)}.poster-header{height:clamp(168px,24vh,230px);text-align:center;position:relative;z-index:3;padding-top:clamp(5px,1.2vh,14px)}.eyebrow{display:inline-block;padding:6px 18px;border-radius:999px;background:#ffffff8c;color:#8c7441;font-size:12px;font-weight:800;letter-spacing:.25em}.poster-header h1{margin:14px 0 5px;font-size:clamp(48px,5.1vw,86px);line-height:1;font-weight:950;letter-spacing:.05em;text-shadow:0 7px 0 rgba(52,54,59,.09);transform:rotate(-.5deg)}.poster-header h1 strong{font-weight:950}.poster-header p{margin:12px 0 0;color:#7d6d50;font-size:clamp(13px,1.05vw,17px);letter-spacing:.08em;font-weight:700}.workspace{height:calc(100% - clamp(168px,24vh,230px) - 24px);position:relative;z-index:3}.compose-stage{height:100%;display:flex;flex-direction:column;gap:10px}.music-card{height:min(44vh,390px);min-height:285px;position:relative;background:#ffffff2e;border:0;border-radius:18px;overflow:visible}.staff-wrap{height:calc(100% - 32px);position:relative;cursor:crosshair;touch-action:manipulation;-webkit-user-select:none;user-select:none}.staff-lines{position:absolute;left:3px;right:3px;top:calc(50% - 55px);height:110px;display:flex;flex-direction:column;justify-content:space-between}.staff-lines i{height:2px;background:#426178;border-radius:4px;box-shadow:0 1px #fffc}.clef{position:absolute;left:22px;top:calc(50% - 82px);width:82px;text-align:center;font-family:Noto Music,Segoe UI Symbol,serif;font-size:128px;line-height:1.12;color:#111;z-index:3;pointer-events:none}.final-bar{position:absolute;right:4px;top:calc(50% - 55px);height:110px;display:flex;gap:6px;z-index:3}.final-bar i,.final-bar b{display:block;background:#294458}.final-bar i{width:3px}.final-bar b{width:9px}.click-guide{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#9b8d69;font-size:15px;font-weight:800;letter-spacing:.12em;pointer-events:none}.staff-wrap:has(.staff-note) .click-guide{display:none}.staff-note{position:absolute;z-index:4;width:34px;height:25px;margin:-12px 0 0 -17px;border-radius:50%;border:3px solid var(--ink);box-shadow:0 4px #34363b2e;pointer-events:none;animation:pop .24s ease}.staff-note small{position:absolute;left:8px;top:3px;font-size:9px;font-weight:900}.ledger-line{position:absolute;z-index:-1;left:50%;width:48px;height:3px;background:#294458;transform:translate(-50%,-50%)}.hint{height:32px;display:grid;place-items:center;border-top:1px dashed rgba(52,54,59,.25);font-size:12px;color:#796e59}.hint span{margin-right:7px}.sequence{height:82px;display:grid;grid-template-columns:220px 1fr;gap:10px}.section-title{background:var(--ink);color:#fff;border-radius:17px;padding:9px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;box-shadow:5px 5px #34363b1f}.section-title div span,.section-title div b{display:block}.section-title div span{font-size:10px;color:var(--yellow);font-weight:900;letter-spacing:.14em}.section-title div b{font-size:13px;margin-top:4px}.section-title button{border:0;background:#ffffff1f;border-radius:8px;color:#fff;padding:7px 8px;font-size:10px;cursor:pointer;white-space:nowrap}.section-title button:disabled{opacity:.3}.note-tray{height:82px;overflow-y:auto;border:2px dashed rgba(52,54,59,.25);border-radius:17px;background:#ffffff47;padding:8px;display:flex;align-content:flex-start;flex-wrap:wrap;gap:6px}.empty{margin:auto;color:#9a8e70;font-size:12px}.picked{width:32px;height:32px;display:grid;place-items:center;border:2px solid white;outline:1px solid rgba(52,54,59,.2);border-radius:50%;font-size:11px;font-weight:900;position:relative;animation:pop .24s ease}.picked small{position:absolute;right:-4px;top:-5px;min-width:14px;height:14px;display:grid;place-items:center;border-radius:8px;background:var(--ink);color:#fff;font-size:8px}.control-panel{position:absolute;right:1.4%;top:-72px;width:min(320px,25vw);z-index:8}.counter{width:max-content;margin:0 0 8px auto;background:#fffdf1;border:2px solid rgba(52,54,59,.55);border-radius:999px;padding:7px 12px;font-size:11px;box-shadow:3px 4px 0 var(--yellow);white-space:nowrap}.counter b{font-size:16px}.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mint);margin-right:7px;box-shadow:0 0 0 4px #d9f4ea}.action-area{padding:10px;border-radius:20px;background:linear-gradient(160deg,#32c6db,#24acc7);box-shadow:0 8px #208da4,0 14px 20px #296c7b33;color:#fff;border:2px solid rgba(255,255,255,.65)}.action-copy{display:none}.actions{display:flex;gap:7px}.compose,.stop{border:0;border-radius:13px;cursor:pointer;font-weight:900}.compose{position:relative;overflow:hidden;flex:1;min-width:0;padding:13px 15px;display:flex;justify-content:space-between;align-items:center;background:transparent;color:#fff;font-size:clamp(15px,1.3vw,21px);letter-spacing:.03em}.compose i{font-style:normal;font-size:24px}.compose:disabled{cursor:not-allowed;opacity:.55}.stop{padding:8px;background:#0003;color:#fff}.compose em{position:absolute;left:0;bottom:0;height:4px;background:var(--yellow)}.ai-result{margin-top:12px;padding:11px;border:2px solid var(--ink);border-radius:17px;background:#fff;box-shadow:4px 5px 0 var(--mint);color:var(--ink)}.generating,.player,.ai-error{display:flex;flex-direction:column;gap:7px}.generating b,.generating small{display:block}.generating b,.player b{font-size:12px}.generating small{font-size:10px;margin-top:2px}.music-loader{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--yellow);font-size:20px;animation:breathe 1.1s ease-in-out infinite}.player audio{width:100%;height:33px}.player a,.ai-error button{border:0;border-radius:9px;padding:7px 9px;background:var(--ink);color:#fff;text-align:center;text-decoration:none;font-weight:800;font-size:10px}.ai-error span{color:#a94136;font-size:11px}.ai-error{flex-direction:row;flex-wrap:wrap}.ai-error span{width:100%}.ai-error button:last-child{background:#777}.record-art{position:absolute;right:-52px;top:-78px;width:310px;height:310px;border-radius:50%;background:repeating-radial-gradient(circle,#07090a 0,#07090a 9px,#202326 10px,#202326 12px,#07090a 13px,#07090a 24px);z-index:1;box-shadow:-6px 10px #00000014}.record-art:before{content:"";position:absolute;top:65px;right:65px;bottom:65px;left:65px;border-radius:50%;background:var(--yellow);border:2px solid #d5aa16}.record-art:after{content:"";position:absolute;top:125px;right:125px;bottom:125px;left:125px;border-radius:50%;background:#fff;border:14px solid #07090a}.record-art span{position:absolute;left:57px;bottom:52px;color:#11b89b;font-size:92px;font-weight:900;transform:rotate(9deg);z-index:2}.record-art i{position:absolute;left:39px;top:78px;width:14px;height:14px;border-radius:50%;background:#2de0c0;box-shadow:38px 44px 0 -3px #2de0c0,72px -8px 0 -4px #2de0c0}.ribbon{position:absolute;border:8px solid var(--pink);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;z-index:1}.ribbon-one{width:125px;height:115px;right:28%;top:36px;transform:rotate(27deg)}.ribbon-two{width:95px;height:80px;left:5%;bottom:1%;transform:rotate(160deg);border-color:var(--cyan);border-left-color:transparent;border-bottom-color:transparent}.spark{position:absolute;z-index:1;font-size:24px}.spark-one{left:12%;top:18%;color:#ef5daf}.spark-two{right:22%;top:20%;color:#f3bf22}.character-note{position:absolute;z-index:2;font-size:58px;font-weight:900;filter:drop-shadow(3px 4px 0 rgba(52,54,59,.12));transform-origin:center}.character-note i{position:absolute;font:900 18px Arial;letter-spacing:2px;color:#1f2930;top:34px;left:11px}.note-blue{left:43%;top:4%;color:var(--blue);transform:rotate(8deg)}.note-yellow{left:30%;top:6%;color:#f5b91e;transform:rotate(-8deg)}.note-pink{right:12%;bottom:2%;color:var(--pink);transform:rotate(7deg)}footer{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-family:STKaiti,KaiTi,serif;font-size:11px;color:#817965;z-index:3}@keyframes pop{0%{transform:scale(.2) rotate(-20deg);opacity:0}to{transform:scale(1);opacity:1}}@keyframes breathe{50%{transform:scale(1.1);box-shadow:0 0 0 8px #ffd4473d}}@media (max-width:1100px){.studio{padding-inline:24px}.poster-header h1{font-size:54px}.control-panel{width:280px}.record-art{width:260px;height:260px}.record-art:before{top:55px;right:55px;bottom:55px;left:55px}.record-art:after{top:105px;right:105px;bottom:105px;left:105px}.character-note{font-size:46px}.clef{left:10px}.staff-lines{left:0}.section-title{padding:8px 10px}.sequence{grid-template-columns:205px 1fr}}@media (max-width:850px){.studio{height:auto;min-height:100svh;overflow:auto;padding:16px 12px 36px}.poster-header{height:150px;text-align:left;padding-left:8px}.eyebrow{font-size:9px}.poster-header h1{font-size:38px;max-width:70%;line-height:1.1}.poster-header p{font-size:11px;max-width:65%;line-height:1.5}.record-art{width:190px;height:190px;right:-55px;top:-48px}.record-art:before{top:40px;right:40px;bottom:40px;left:40px}.record-art:after{top:76px;right:76px;bottom:76px;left:76px;border-width:9px}.record-art span{left:34px;bottom:26px;font-size:56px}.workspace,.compose-stage{height:auto}.music-card{height:340px;min-height:0}.staff-wrap{height:308px;overflow:hidden}.staff-lines{left:0;right:0}.clef{left:0;font-size:110px}.sequence{height:auto;display:flex;flex-direction:column}.section-title{min-height:62px}.note-tray{height:auto;min-height:72px}.control-panel{position:static;width:100%;display:flex;flex-direction:column;margin-top:14px}.counter{order:2;margin:10px auto 0}.action-area{order:1}.compose{font-size:18px}.character-note,.ribbon,.spark{display:none}footer{position:static;margin-top:20px}.hint{font-size:9px;text-align:center;padding:0 8px}}html,body{width:100%;height:100%;overflow:hidden;background:#fff2cc}.studio{width:100vw;height:100svh;min-height:0;padding:0;overflow:hidden;background:#fff2cc url(/bell-designer-reference.png) center/contain no-repeat}.poster-header,.record-art,.ribbon,.spark,.character-note,footer,.clef,.final-bar,.click-guide,.hint,.counter,.action-copy,.note-tray,.section-title>div{display:none!important}.workspace{position:absolute;left:50%;top:50%;width:min(100vw,177.68vh);height:min(100vh,56.28vw);transform:translate(-50%,-50%);min-height:0;background:transparent;overflow:visible}.compose-stage,.music-card{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;min-height:0;background:transparent;border:0;border-radius:0;overflow:visible}.staff-wrap{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;cursor:crosshair;overflow:visible}.staff-lines{left:3.55%;right:4.75%;top:55.75%;height:16.2%;opacity:0}.staff-note{width:36px;height:27px;margin:-13px 0 0 -18px;border:3px solid #34363b;box-shadow:0 4px #34363b2e}.staff-note small{display:none!important}.staff-note:after{content:"";position:absolute;right:-4px;bottom:10px;width:4px;height:50px;border-radius:4px;background:#34363b}.ledger-line{width:50px}.sequence{position:absolute;right:1.8%;top:50.5%;z-index:10;display:block;width:auto;height:auto}.section-title{display:block;background:transparent;padding:0;border-radius:0;box-shadow:none}.section-title button{display:block;border:2px solid rgba(52,54,59,.75);border-radius:999px;padding:10px 18px;background:#fff8df;color:#34363b;box-shadow:4px 5px #f5bf39;font-size:14px;font-weight:900}.control-panel{position:absolute;top:0;right:0;bottom:0;left:0;width:auto;z-index:12;pointer-events:none}.action-area{position:absolute;left:34.55%;top:34.2%;width:30.2%;height:12.6%;padding:0;border:0;border-radius:999px;background:transparent;box-shadow:none;pointer-events:none}.actions{width:100%;height:100%}.compose{width:100%;height:100%;padding:0;border-radius:999px;background:transparent;color:transparent;pointer-events:auto}.compose i,.compose em{display:none}.compose:disabled{opacity:.7}.compose span,.stop{display:none}.ai-result{position:absolute;right:5.2%;bottom:3%;width:min(390px,29vw);margin:0;padding:11px 13px;pointer-events:auto;box-shadow:5px 6px #18af96}.generating{flex-direction:row;align-items:center}.generating small{display:none}.player{flex-direction:row;align-items:center}.player b{white-space:nowrap}.player audio{min-width:130px;flex:1}.player a{white-space:nowrap}@media (max-width:850px){.studio{height:100svh;min-height:506px;min-width:900px;padding:0;overflow:hidden}.workspace{height:min(100vh,56.28vw)}.compose-stage,.music-card,.staff-wrap{height:100%}.control-panel{position:absolute;width:auto;margin:0}.section-title{min-height:0}.sequence{display:block}.action-area{order:initial}.staff-lines{left:3.55%;right:4.75%}.character-note,.ribbon,.spark{display:none}.ai-result{width:290px}}.studio{isolation:isolate;background:#ffd166}.studio:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;background:url(/bell-designer-reference.png) center/contain no-repeat;filter:saturate(1.32) contrast(1.09) brightness(1.01);opacity:1;transform:none}.studio:after{display:none}.workspace{width:min(100vw,225vh);height:min(100vh,44.444vw)}.staff-lines{left:9.78%;right:10.15%;top:55.45%;height:16.87%}.staff-note{width:34px;height:25px;margin:-12px 0 0 -17px;border:3px solid #34363b;box-shadow:0 4px #34363b2e}.staff-note:after{display:none}.sequence{right:1.6%;top:48.2%}.section-title button{border-color:#006e8f;background:#fffaf0;color:#006e8f;box-shadow:4px 5px #ffd166;font-size:clamp(12px,.85vw,16px)}.action-area{left:65.72%;top:41.48%;width:15.55%;height:7.18%}.compose{border-radius:999px}.compose:focus-visible,.section-title button:focus-visible{outline:4px solid #006e8f;outline-offset:4px}.ai-result{right:1.2%;top:31.4%;bottom:auto;width:min(355px,18.2%);min-height:58px;padding:10px 12px;border-color:#006e8f;box-shadow:5px 6px #ffd166}.generating b,.player b{font-size:clamp(10px,.65vw,13px)}.player{flex-wrap:wrap}.player b{width:100%}.player audio{width:100%;min-width:0}.player a{margin-left:auto}@media (max-width:850px){.workspace{width:min(100vw,225vh);height:min(100vh,44.444vw)}.ai-result{width:250px}}html,body{background:#fffaf2}.studio{background:#fffaf2;isolation:isolate}.studio:before{background:url(/bell-designer-reference.png) center/contain no-repeat;filter:none}.workspace{width:min(100vw,177.68vh);height:min(100vh,56.28vw)}.staff-lines{left:5.2%;right:6.1%;top:60.9%;height:14.25%}.staff-note{width:2.04%;height:auto;aspect-ratio:34/25;margin:0;transform:translate(-50%,-50%);border-width:clamp(2px,.18vw,7px);box-shadow:0 clamp(2px,.22vw,8px) 0 #34363b2e;animation:note-pop .24s ease}.ledger-line{width:145%;height:clamp(2px,.16vw,6px)}.sequence{right:1.05%;top:47.75%}.section-title button{padding:clamp(7px,.55vw,20px) clamp(10px,.8vw,28px);font-size:clamp(11px,.78vw,27px);border-width:clamp(2px,.13vw,5px);box-shadow:clamp(3px,.25vw,9px) clamp(3px,.3vw,11px) 0 #ffd166}.action-area{left:70.35%;top:47.35%;width:21.72%;height:9.05%}.ai-result{left:70.35%;right:auto;top:47.05%;bottom:auto;width:21.72%;min-height:9.6%;margin:0;padding:clamp(7px,.55vw,20px);border-width:clamp(2px,.13vw,5px);border-radius:clamp(14px,1.4vw,48px);box-shadow:0 clamp(3px,.28vw,10px) 0 #acd6d6}.generating b,.player b{font-size:clamp(10px,.72vw,25px)}.music-loader{width:clamp(28px,2.1vw,72px);height:clamp(28px,2.1vw,72px);font-size:clamp(17px,1.4vw,48px)}.player audio{height:clamp(28px,2.05vw,70px)}.player a,.ai-error button{font-size:clamp(9px,.58vw,20px);padding:clamp(5px,.38vw,14px) clamp(7px,.52vw,18px)}.fallback-flower{position:absolute;left:5.72%;top:80.75%;z-index:20;width:2.2%;aspect-ratio:1;border:0;padding:0;background:transparent;color:#f091a1;font-size:clamp(19px,1.65vw,60px);line-height:1;display:grid;place-items:center;transform:translate(-50%,-50%);cursor:pointer;filter:drop-shadow(0 0 2px #fff);transition:color .18s ease,filter .18s ease,transform .18s ease}.fallback-flower.active{color:#006e8f;filter:drop-shadow(0 0 clamp(4px,.35vw,12px) #ffd166);transform:translate(-50%,-50%) scale(1.13)}.fallback-flower:focus-visible{outline:3px solid #006e8f;outline-offset:4px;border-radius:50%}.player audio{display:none}.playback-actions{width:100%;display:flex;gap:clamp(3px,.28vw,9px)}.playback-actions button{flex:1;border:0;border-radius:999px;padding:clamp(6px,.42vw,15px) clamp(5px,.34vw,12px);background:#625d6b;color:#fff;font-size:clamp(9px,.58vw,20px);font-weight:900;white-space:nowrap;cursor:pointer}.playback-actions button:first-child{background:#799a64}.playback-actions button:last-child{background:#006e8f}.final-bar{display:flex!important;position:absolute;right:4.18%;top:56.1%;height:11.4%;gap:clamp(4px,.28vw,11px);z-index:6;align-items:stretch}.final-bar i,.final-bar b{display:block!important;background:#34363b;box-shadow:none}.final-bar i{width:clamp(2px,.13vw,5px)}.final-bar b{width:clamp(6px,.42vw,15px)}.reset-board{position:absolute;right:2.1%;bottom:2.8%;z-index:22;border:clamp(2px,.13vw,5px) solid #625d6b;border-radius:999px;padding:clamp(7px,.55vw,19px) clamp(13px,.9vw,31px);background:#fffaf0;color:#625d6b;box-shadow:clamp(3px,.22vw,8px) clamp(3px,.28vw,10px) 0 #ffd166;font-size:clamp(11px,.72vw,25px);font-weight:900;cursor:pointer}.reset-board:focus-visible{outline:4px solid #006e8f;outline-offset:4px}@keyframes note-pop{0%{transform:translate(-50%,-50%) scale(.2) rotate(-20deg);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@media (max-width:850px){.studio{min-width:0;min-height:0}.workspace{width:min(100vw,177.68vh);height:min(100vh,56.28vw)}.staff-lines{left:5.2%;right:6.1%}.ai-result{left:70.35%;top:47.05%;width:21.72%}}.studio:before{background:url(/bell-designer-button-bottom.png) center/cover no-repeat}.workspace{width:max(100vw,225vh);height:max(100vh,44.444vw)}.staff-lines{left:4.7%;right:4.2%;top:56.1%;height:11.4%}.staff-note{width:1.3%}.sequence{right:18%;top:44.4%}.action-area{left:67.4%;top:87.8%;width:14.3%;height:7.3%}.ai-result{left:67.4%;right:auto;top:87.55%;width:14.3%;min-height:7.6%}@media (max-width:850px){.workspace{width:max(100vw,225vh);height:max(100vh,44.444vw)}.staff-lines{left:4.7%;right:4.2%;top:56.1%;height:11.4%}.ai-result{left:67.4%;top:87.55%;width:14.3%}}html,body{width:100%;height:100%;margin:0;padding:0;background:#fffaf2;overscroll-behavior:none}.studio{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;outline:0;background:#fffaf2}.studio:before{transform:scale(1.006);transform-origin:center}