.bl-page{--bl-purple:#c6a4ff;--bl-cyan:#77e6dc;--bl-pink:#ffaccc;--bl-line:#51446d;max-width:1500px;margin:auto;padding-bottom:40px;color:#f6efff}.bl-page *{box-sizing:border-box}.bl-page button,.bl-page input{font:inherit}.bl-page button,.bl-page a,.bl-page input{touch-action:manipulation}.bl-page p{margin:0}.bl-page a:focus-visible,.bl-page button:focus-visible,.bl-page input:focus-visible,.bl-page [tabindex]:focus-visible{outline:3px solid #77e6dc;outline-offset:4px}.bl-back{display:inline-flex;align-items:center;min-height:44px;color:#aaa2be;font-size:12px}.bl-back:hover{color:#e4cbff}.bl-eyebrow{font:10px/1.7 monospace!important;letter-spacing:1.8px;color:#b7a1df!important}.bl-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0 34px;isolation:isolate}.bl-hero:before{content:'';position:absolute;right:5%;top:15%;width:220px;height:220px;border:1px solid #a48cde44;border-radius:50%;box-shadow:0 0 60px #8b5fc01a,inset 0 0 60px #8b5fc015;z-index:-1}.bl-hero>div{flex:1;min-width:0;position:relative;z-index:1}.bl-hero h1{font-size:clamp(46px,6vw,84px);line-height:.97;letter-spacing:-.055em;margin:18px 0 23px;font-family:Arial Black,Arial,sans-serif;font-weight:950}.bl-hero h1 em{color:#c6a4ff;font-style:normal}.bl-hero>div>p:not(.bl-eyebrow){color:#b9b1cb;font-size:14px;line-height:1.8;max-width:670px}.bl-hero strong{color:#eaddff}.bl-avatar{width:220px;height:260px;object-fit:contain;align-self:flex-end;filter:drop-shadow(0 13px 25px #0004);margin-right:-10px}.bl-console{border:1px solid #635080;border-radius:22px;background:#1d2034;overflow:hidden;box-shadow:0 25px 90px #0003}.bl-console-top{display:flex;align-items:center;justify-content:space-between;padding:19px 25px;gap:15px;background:#29233d;font:9px monospace;letter-spacing:1.2px;color:#c4b4da;border-bottom:1px solid #63508055}.bl-console-top>span:first-child{display:flex;align-items:center;gap:9px;color:#e7d9ff}.bl-console-top i{width:6px;height:6px;background:#c6a4ff;border-radius:50%;box-shadow:0 0 13px #c6a4ff66}.bl-visual{position:relative;height:140px;background:radial-gradient(ellipse at 50% 100%,#513d7655,transparent 70%),linear-gradient(100deg,#15182b,#251b3b);border-bottom:1px solid #63508055;padding:22px 35px 31px;overflow:hidden}.bl-visual:before{content:'';position:absolute;inset:0;background:linear-gradient(#b9a1dd0b 1px,transparent 1px),linear-gradient(90deg,#b9a1dd0b 1px,transparent 1px);background-size:24px 24px;pointer-events:none}.bl-visual svg{position:relative;width:100%;height:90px;display:block;filter:drop-shadow(0 0 5px #b598fb44)}.bl-visual-label{position:absolute;left:25px;right:25px;bottom:12px;display:flex;justify-content:space-between;gap:15px;font:8px monospace;letter-spacing:1.2px;color:#9686ae}.bl-visual-label b{font-weight:400}.bl-is-playing .bl-visual-label b{color:#b8ede4}.bl-controls{display:grid;grid-template-columns:190px 1.5fr 1fr;align-items:center;gap:30px;padding:25px}.bl-play{border:1px solid #d2b7ff;background:#c6a4ff;color:#2a1a43;min-height:58px;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:12px;font-size:20px!important;cursor:pointer;box-shadow:0 4px 0 #9075c2;transition:background .2s,transform .2s}.bl-play span{font:700 12px monospace;letter-spacing:.5px}.bl-play:hover:not(:disabled){background:#dcc5ff;transform:translateY(-2px)}.bl-is-playing .bl-play{background:#91e1d2;border-color:#b0f0e5;box-shadow:0 4px 0 #4b9b91;color:#123b3b}.bl-control label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:650;color:#cdc5db;margin-bottom:7px}.bl-control output{font:11px monospace;color:#c6a4ff}.bl-volume output{color:#77e6dc}.bl-control input{width:100%;height:31px;accent-color:#c6a4ff;margin:0;cursor:pointer}.bl-volume input{accent-color:#77e6dc}.bl-presets{padding:0 25px 23px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.bl-presets>span{font:8px monospace;letter-spacing:.9px;color:#9d93ae;margin-right:5px}.bl-presets button{border:1px solid #5f506f;border-radius:8px;background:#2d293e;color:#cfc3e4;min-height:38px;padding:8px 13px;font-size:11px;cursor:pointer}.bl-presets button:hover{border-color:#c6a4ff;background:#463958}.bl-presets .bl-clear{margin-left:auto;background:transparent;color:#b3a8c6}.bl-grid-scroll{width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:#786296 #171c2c;padding:0 25px 12px;scroll-padding:25px}.bl-grid{min-width:790px;width:100%}.bl-count-row,.bl-track{display:grid;grid-template-columns:108px repeat(16,minmax(32px,1fr));gap:7px;align-items:center}.bl-count-row{padding:0 0 13px;font:9px monospace;color:#7f7993;text-align:center}.bl-count-row>span:first-child{text-align:left;letter-spacing:.9px;font-size:8px;color:#a89bbd}.bl-count-row .bl-downbeat{color:#c4b4dc}.bl-count-row .bl-current{color:#f7e9ff}.bl-track{margin-bottom:10px}.bl-track-name{display:flex;flex-direction:column;gap:3px;padding-right:10px}.bl-track-name b{font-size:13px;color:var(--bl-track);line-height:1.3}.bl-track-name>span{font-size:8px;color:#92899e}.bl-cell{display:grid;place-items:center;min-width:0;width:100%;height:43px;border:1px solid #50485f;border-radius:8px;background:#29283d;cursor:pointer;position:relative;transition:background .12s,border-color .12s,box-shadow .12s}.bl-cell.bl-beat-start{border-left:2px solid #73617d;background:#312c43}.bl-cell>span{width:5px;height:5px;border-radius:50%;background:#5b526c;opacity:.8}.bl-cell[aria-pressed="true"]{background:color-mix(in srgb,var(--bl-track) 75%,#30233f);border-color:var(--bl-track);box-shadow:inset 0 1px 0 #fff3}.bl-cell[aria-pressed="true"]>span{background:#22182f;width:7px;height:7px;opacity:.6}.bl-cell:hover{border-color:#eee2ff;box-shadow:inset 0 0 0 1px #eee2ff55}.bl-cell.bl-current{box-shadow:0 0 0 2px #f9f1ff80,inset 0 -4px 0 #fff4}.bl-cell[aria-pressed="true"].bl-current{box-shadow:0 0 0 2px #f9f1ff99,0 0 15px color-mix(in srgb,var(--bl-track) 35%,transparent)}.bl-grid-help{display:flex;justify-content:space-between;gap:20px;padding:6px 25px 18px;color:#9289a5;font-size:9px;line-height:1.7}.bl-status{padding:17px 25px;border-top:1px solid #63508055;background:#211d31;font-size:12px;line-height:1.7;color:#c8bbdf;min-height:56px}.bl-save-section{display:grid;grid-template-columns:1fr 1.35fr;gap:45px;margin-top:40px;padding:32px;border-radius:19px;border:1px solid #514867;background:linear-gradient(120deg,#242238,#192837)}.bl-save-section h2{font-size:42px;line-height:1.02;letter-spacing:-1.5px;margin:14px 0 20px}.bl-save-section h2 em{color:#c6a4ff}.bl-save-section>div>p:not(.bl-eyebrow){font-size:12px;color:#afa8c0;line-height:1.8;max-width:360px}.bl-save-controls>label,.bl-share>label{display:block;font-size:12px;color:#cfc4df;font-weight:650;margin:0 0 10px}.bl-save-controls input{width:100%;min-width:0;border:1px solid #5d5971;border-radius:8px;background:#121c2e;color:#ede4ff;min-height:48px;padding:12px 14px;font-size:13px}.bl-save-actions{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}.bl-button{display:inline-flex;align-items:center;justify-content:center;min-height:43px;padding:10px 15px;border:1px solid #c6a4ff;border-radius:8px;background:#c6a4ff;color:#2b203e;font-size:11px!important;font-weight:650!important;cursor:pointer}.bl-button:hover:not(:disabled){background:#dcc5ff}.bl-secondary{background:#303048;color:#e1d5f3;border-color:#66587c}.bl-secondary:hover:not(:disabled){background:#45415e}.bl-save-controls>p{font-size:10px!important;color:#a9a3ba!important;line-height:1.7!important;max-width:none!important}.bl-share{margin-top:20px;padding:20px;background:#142e35;border:1px solid #4c7d7d;border-radius:12px}.bl-share input{font:10px monospace;margin-bottom:12px;background:#12212e;color:#bce7de}.bl-share .bl-button{background:#93dfd1;border-color:#93dfd1;color:#163d3d}.bl-share small{display:block;font-size:10px;line-height:1.7;color:#a6c4c1;margin-top:12px}.bl-tip{display:flex;align-items:baseline;gap:25px;border-left:3px solid #b99ae5;background:#2b26363d;margin-top:30px;padding:22px 25px;border-radius:0 10px 10px 0}.bl-tip b{font:9px/1.7 monospace;letter-spacing:1px;color:#d4b8f1;flex:none}.bl-tip p{font-size:12px;line-height:1.8;color:#b6acc6}.bl-footer-note{font-size:10px;color:#9096b0;margin-top:23px!important;line-height:1.8!important}.still .bl-page *,.still .bl-page *:before,.still .bl-page *:after{animation:none!important;transition:none!important}.still .bl-cell.bl-current,.still .bl-cell[aria-pressed="true"].bl-current{box-shadow:none}.still .bl-count-row .bl-current{color:#a99bbd}
@media(max-width:1100px){.bl-hero h1{font-size:60px}.bl-avatar{width:170px;height:220px}.bl-hero:before{width:170px;height:170px;right:0}.bl-controls{grid-template-columns:160px 1.2fr 1fr;gap:22px}.bl-presets>span{width:100%;margin-bottom:3px}.bl-save-section{gap:25px;padding:27px}.bl-save-section h2{font-size:37px}.bl-grid-help{flex-direction:column;gap:4px}.bl-tip{flex-direction:column;gap:10px}}
@media(max-width:650px){.bl-page{padding-bottom:25px}.bl-back{font-size:11px}.bl-hero{padding:12px 0 27px;align-items:flex-start;gap:0}.bl-hero h1{font-size:clamp(38px,9vw,56px);letter-spacing:-.055em;line-height:1.02;margin:14px 0 20px}.bl-eyebrow{font-size:8px!important;letter-spacing:1px}.bl-hero>div>p:not(.bl-eyebrow){font-size:12px;padding-right:0;line-height:1.8}.bl-avatar{display:none}.bl-hero:before{display:none}.bl-console{border-radius:15px}.bl-console-top{padding:14px 16px;font-size:7px;letter-spacing:.7px;gap:13px}.bl-console-top>span:last-child{font-size:6px;text-align:right;max-width:100px;line-height:1.6}.bl-visual{height:110px;padding:10px 18px 30px}.bl-visual svg{height:72px}.bl-visual-label{left:17px;right:17px;font-size:6px;letter-spacing:.7px}.bl-controls{grid-template-columns:1fr 1fr;padding:20px 18px;gap:20px 18px}.bl-play{grid-column:1/-1;min-height:53px;box-shadow:0 3px 0 #9075c2}.bl-control label{font-size:11px;display:block}.bl-control output{display:block;margin-top:6px;font-size:10px}.bl-control input{height:35px}.bl-presets{padding:0 18px 20px;gap:7px}.bl-presets>span{font-size:7px}.bl-presets button{font-size:10px;padding:8px 10px;min-height:39px}.bl-presets .bl-clear{margin-left:0}.bl-grid-scroll{padding:0 18px 10px;scroll-padding:18px}.bl-grid{min-width:760px}.bl-count-row,.bl-track{grid-template-columns:90px repeat(16,minmax(31px,1fr));gap:7px}.bl-count-row{font-size:8px;padding-bottom:11px}.bl-count-row>span:first-child{font-size:7px}.bl-track-name b{font-size:12px}.bl-track-name>span{font-size:7px}.bl-cell{height:43px;border-radius:7px}.bl-grid-help{padding:6px 18px 17px;font-size:8px;gap:4px}.bl-status{padding:16px 18px;font-size:11px;min-height:68px}.bl-save-section{grid-template-columns:1fr;gap:25px;margin-top:27px;padding:25px 21px;border-radius:15px}.bl-save-section h2{font-size:36px;letter-spacing:-1.2px;margin:12px 0 16px}.bl-save-section>div>p:not(.bl-eyebrow){font-size:12px;max-width:none}.bl-save-actions{gap:8px}.bl-button{font-size:10px!important;padding:10px 12px;min-height:44px}.bl-share{padding:17px}.bl-tip{padding:20px;margin-top:25px;gap:10px}.bl-tip b{font-size:8px}.bl-tip p{font-size:11px}.bl-footer-note{font-size:9px;line-height:1.8}}
@media(prefers-reduced-motion:reduce){.bl-page *,.bl-page *:before,.bl-page *:after{animation:none!important;transition:none!important}.bl-cell.bl-current,.bl-cell[aria-pressed="true"].bl-current{box-shadow:none}.bl-count-row .bl-current{color:#a99bbd}}