.bonding-drop-page{position:relative;overflow:hidden;background:linear-gradient(145deg,#07182b 0%,#0b2640 46%,#102e43 100%);color:#eef8ff;min-height:760px;padding:38px 0 64px}.bonding-drop-page:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 12%,rgba(65,208,235,.15),transparent 30%),radial-gradient(circle at 82% 24%,rgba(215,145,76,.14),transparent 28%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,auto,42px 42px,42px 42px;pointer-events:none}.bonding-drop-shell{position:relative;z-index:1}.bonding-drop-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:24px}.bonding-drop-intro h1{font-size:clamp(2.7rem,7vw,5.6rem);line-height:.9;margin:.15em 0 .25em;color:#fff}.bonding-drop-intro p{max-width:800px;color:#c7dbe6;font-size:1.08rem}.bonding-drop-kicker,.bonding-drop-overline{margin:0;color:#62d8ed;text-transform:uppercase;letter-spacing:.17em;font-size:.76rem;font-weight:800}.bonding-drop-lab-link{color:#d9f7ff;border-bottom:1px solid rgba(217,247,255,.45);white-space:nowrap}.bonding-drop-app{background:rgba(3,14,27,.72);border:1px solid rgba(138,211,232,.3);box-shadow:0 24px 70px rgba(0,0,0,.32);border-radius:18px;overflow:hidden;backdrop-filter:blur(9px)}.bonding-drop-topbar{display:grid;grid-template-columns:repeat(4,minmax(80px,1fr)) auto;align-items:stretch;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(2,14,27,.88)}.bonding-drop-stat{padding:11px 16px;border-right:1px solid rgba(255,255,255,.09)}.bonding-drop-stat small{display:block;color:#8fb1c2;text-transform:uppercase;letter-spacing:.09em;font-size:.65rem}.bonding-drop-stat strong{font-size:1.35rem;color:#fff;font-variant-numeric:tabular-nums}.bonding-drop-top-actions{display:flex;align-items:center;gap:7px;padding:8px 10px}.bonding-drop-top-actions button{width:40px;height:40px;border:1px solid rgba(255,255,255,.17);border-radius:9px;background:rgba(255,255,255,.06);color:#fff;font-size:1.08rem}.bonding-drop-stage{position:relative;height:min(67vh,720px);min-height:470px;overflow:hidden;background:linear-gradient(180deg,rgba(0,7,16,.8),rgba(9,39,56,.78))}.bonding-drop-stage-lines{position:absolute;inset:0;background:linear-gradient(90deg,transparent 24.8%,rgba(78,200,222,.12) 25%,transparent 25.2%,transparent 49.8%,rgba(78,200,222,.12) 50%,transparent 50.2%,transparent 74.8%,rgba(78,200,222,.12) 75%,transparent 75.2%),radial-gradient(circle at center,rgba(91,218,238,.07),transparent 55%);pointer-events:none}.bonding-drop-stage-lines:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 44px,rgba(255,255,255,.025) 45px);animation:bd-grid 12s linear infinite}@keyframes bd-grid{to{transform:translateY(45px)}}.bonding-drop-faller{position:absolute;left:0;top:0;z-index:4;min-height:86px;padding:12px 16px;border:1px solid rgba(116,230,247,.7);border-radius:15px;background:linear-gradient(145deg,rgba(14,72,91,.97),rgba(9,35,55,.97));box-shadow:0 12px 34px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:center;text-align:center;will-change:transform}.bonding-drop-faller small{color:#80dff0;text-transform:uppercase;letter-spacing:.1em;font-size:.62rem}.bonding-drop-faller strong{display:block;color:#fff;font-size:clamp(1rem,2.2vw,1.45rem);line-height:1.18;overflow-wrap:normal;word-break:normal}.bonding-drop-faller.is-correct{border-color:#79f0b3;background:linear-gradient(145deg,#126b58,#0e3942)}.bonding-drop-faller.is-wrong{border-color:#ff8d91;background:linear-gradient(145deg,#74333d,#422338)}.bonding-drop-lanes{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px;background:linear-gradient(180deg,transparent,rgba(2,11,20,.88) 24%)}.bonding-drop-lane{height:104px;min-width:0;padding:8px;border:1px solid rgba(148,205,221,.33);border-radius:12px;background:linear-gradient(180deg,rgba(16,55,75,.92),rgba(8,29,46,.97));color:#ecfbff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:border-color .15s,transform .15s,background .15s}.bonding-drop-lane small{color:#6ecfe3;font-size:.66rem;margin-bottom:4px}.bonding-drop-lane strong{display:flex;align-items:center;justify-content:center;width:100%;height:62px;line-height:1.12;font-size:clamp(.86rem,1.45vw,1.07rem);overflow:hidden}.bonding-drop-lane.is-targeted{border-color:#56d5eb;transform:translateY(-4px);background:linear-gradient(180deg,rgba(28,91,111,.98),rgba(11,43,60,.98));box-shadow:0 0 0 2px rgba(86,213,235,.13)}.bonding-drop-lane.is-correct{border-color:#68edaa;background:#155d4e}.bonding-drop-lane.is-wrong{border-color:#ff7b82;background:#6a2a36}.bonding-drop-feedback{position:absolute;z-index:8;top:22%;left:50%;transform:translate(-50%,-50%) scale(.92);padding:11px 18px;border-radius:10px;background:rgba(0,0,0,.78);opacity:0;pointer-events:none;font-weight:800;transition:.15s}.bonding-drop-feedback.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.bonding-drop-feedback.is-correct{color:#83f1b7}.bonding-drop-feedback.is-wrong{color:#ffabb0}.bonding-drop-chain{position:absolute;z-index:5;top:12px;left:50%;transform:translateX(-50%);max-width:min(82%,780px);padding:8px 14px;border:1px solid rgba(220,158,88,.45);border-radius:999px;background:rgba(29,26,25,.82);text-align:center}.bonding-drop-chain small{color:#dfa365;margin-right:8px;text-transform:uppercase;font-size:.62rem;letter-spacing:.09em}.bonding-drop-chain strong{font-size:.82rem}.bonding-drop-chain span{color:#86dfef;margin-left:9px;font-size:.72rem}.bonding-drop-overlay{position:absolute;z-index:20;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,8,18,.79);backdrop-filter:blur(10px)}.bonding-drop-overlay.is-visible{display:flex}.bonding-drop-panel{width:min(650px,100%);max-height:96%;overflow:auto;padding:26px;border:1px solid rgba(146,221,239,.35);border-radius:17px;background:linear-gradient(145deg,rgba(12,39,57,.98),rgba(5,24,39,.99));box-shadow:0 30px 80px rgba(0,0,0,.45)}.bonding-drop-panel h2{margin:.22em 0 .7em;color:#fff;font-size:clamp(1.65rem,4vw,2.5rem)}.bonding-drop-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.bonding-drop-choice-grid fieldset{margin:0;padding:0;border:0}.bonding-drop-choice-grid legend,.bonding-drop-select-label{display:block;color:#a9c5d3;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;margin-bottom:7px}.bonding-drop-choice-grid label{display:block;margin-bottom:7px}.bonding-drop-choice-grid input{position:absolute;opacity:0}.bonding-drop-choice-grid label span{display:block;padding:10px 12px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.04)}.bonding-drop-choice-grid input:checked+span{border-color:#55d5eb;background:rgba(58,176,202,.14)}.bonding-drop-choice-grid b,.bonding-drop-choice-grid small{display:block}.bonding-drop-choice-grid small{color:#9bb5c3;font-size:.72rem}.bonding-drop-select-label{margin-top:10px}.bonding-drop-start-panel select{width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:#0b293f;color:#fff;font:inherit}.bonding-drop-start-note{min-height:1.4em;color:#a9c6d3;font-size:.83rem}.bonding-drop-primary,.bonding-drop-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:10px;border:1px solid transparent;font-weight:800}.bonding-drop-primary{background:#52cee5;color:#061d2a}.bonding-drop-primary:disabled{opacity:.45}.bonding-drop-secondary{background:transparent;border-color:rgba(255,255,255,.22);color:#e7f8ff}.bonding-drop-key-hint{color:#91afbe;font-size:.75rem}.bonding-drop-key-hint kbd{display:inline-block;padding:2px 6px;margin-right:3px;border:1px solid rgba(255,255,255,.2);border-radius:5px;background:rgba(255,255,255,.07);color:#fff}.bonding-drop-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:#041523;border-top:1px solid rgba(255,255,255,.1)}.bonding-drop-controls button{min-height:58px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:linear-gradient(180deg,#153f58,#0a293e);color:#fff}.bonding-drop-controls button.is-drop{background:linear-gradient(180deg,#b8763c,#71421f)}.bonding-drop-controls span{display:block;font-size:1.45rem;line-height:1}.bonding-drop-controls small{font-size:.68rem;color:#bdd6e2}.bonding-drop-version{display:block;padding:0 14px 9px;text-align:right;color:#6f93a5;background:#041523;font-size:.6rem;letter-spacing:.07em}.bonding-drop-result-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.bonding-drop-result-metrics div{padding:11px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.04)}.bonding-drop-result-metrics small,.bonding-drop-result-metrics strong{display:block}.bonding-drop-result-metrics small{color:#93b3c2}.bonding-drop-result-metrics strong{font-size:1.35rem}.bonding-drop-save{min-height:1.5em;margin:12px 0;color:#b9d5df}.bonding-drop-save a{color:#6cdeef}.bonding-drop-review{margin-top:16px;border-top:1px solid rgba(255,255,255,.13);padding-top:14px}.bonding-drop-review-head{display:flex;justify-content:space-between;align-items:center}.bonding-drop-review-head h3{margin:0}.bonding-drop-review-head small{color:#a7c0cd}.bonding-drop-review article{margin-top:10px;padding:12px;border-left:3px solid #c8874b;background:rgba(255,255,255,.04)}.bonding-drop-review article>div{display:flex;justify-content:space-between;gap:12px}.bonding-drop-review article span{color:#ffbe83;font-size:.72rem;white-space:nowrap}.bonding-drop-review article p{margin:.45em 0;color:#c9dbe3;font-size:.87rem}.bonding-drop-review article b{color:#fff}.bonding-drop-result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.bonding-drop-about{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:34px 4px 0}.bonding-drop-about h2{font-size:1.14rem;color:#fff}.bonding-drop-about p{color:#b9cfda;font-size:.92rem}.bonding-drop-ambient i{position:absolute;width:5px;height:5px;border-radius:50%;background:#68d9ec;box-shadow:0 0 18px #68d9ec;animation:bd-float 15s linear infinite}.bonding-drop-ambient i:nth-child(1){left:7%;top:18%}.bonding-drop-ambient i:nth-child(2){left:84%;top:10%;animation-delay:-4s}.bonding-drop-ambient i:nth-child(3){left:72%;top:69%;animation-delay:-8s}.bonding-drop-ambient i:nth-child(4){left:18%;top:76%;animation-delay:-11s}.bonding-drop-ambient i:nth-child(5){left:48%;top:6%;animation-delay:-6s}@keyframes bd-float{50%{transform:translateY(60px) scale(1.8);opacity:.35}}
.bonding-drop-app.is-playing .bonding-drop-topbar{position:relative;z-index:5}.bonding-drop-app:fullscreen{width:100%;height:100%;border-radius:0;background:#04111d}.bonding-drop-app:fullscreen .bonding-drop-stage{height:calc(100vh - 155px)}
@media(max-width:760px){.bonding-drop-page{padding:18px 0 40px}.bonding-drop-intro{display:block}.bonding-drop-lab-link{display:inline-block;margin-top:10px}.bonding-drop-intro h1{font-size:3.4rem}.bonding-drop-app{border-radius:12px}.bonding-drop-topbar{grid-template-columns:repeat(4,1fr)}.bonding-drop-top-actions{position:absolute;right:8px;top:64px;z-index:10}.bonding-drop-stat{padding:8px 7px}.bonding-drop-stat strong{font-size:1rem}.bonding-drop-stage{height:min(63vh,610px);min-height:430px}.bonding-drop-lanes{gap:4px;padding:6px}.bonding-drop-lane{height:112px;padding:5px 3px;border-radius:8px}.bonding-drop-lane strong{height:78px;font-size:.88rem;line-height:1.07}.bonding-drop-faller{min-height:76px;padding:9px 10px}.bonding-drop-faller strong{font-size:1rem}.bonding-drop-choice-grid{grid-template-columns:1fr}.bonding-drop-panel{padding:19px}.bonding-drop-controls{padding-top:9px}.bonding-drop-controls button{min-height:66px}.bonding-drop-about{grid-template-columns:1fr;gap:9px}.bonding-drop-chain{top:7px;max-width:92%;border-radius:10px}.bonding-drop-chain small{display:none}.bonding-drop-chain strong{font-size:.72rem}.bonding-drop-result-metrics{grid-template-columns:1fr 1fr 1fr}.bonding-drop-review article>div{display:block}.bonding-drop-review article span{white-space:normal}}
@media(max-width:390px){.bonding-drop-stage{min-height:405px}.bonding-drop-lane{height:118px}.bonding-drop-lane strong{font-size:.8rem}.bonding-drop-stat small{font-size:.55rem}.bonding-drop-result-metrics{grid-template-columns:1fr}.bonding-drop-top-actions button{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.bonding-drop-stage-lines:after,.bonding-drop-ambient i{animation:none}.bonding-drop-lane,.bonding-drop-feedback{transition:none}}
.bonding-drop-review .bd-review-correction{padding:8px 10px;border-radius:8px;background:rgba(74,202,222,.09);color:#d7f6fb}

.bonding-drop-top-actions button.is-bank{width:auto;min-width:58px;padding:0 10px;font-size:.72rem;font-weight:800;letter-spacing:.035em}.bonding-drop-top-actions button.is-bank[hidden]{display:none!important}
@media(max-width:760px){.bonding-drop-top-actions button.is-bank{min-width:52px;padding:0 8px;font-size:.66rem}}

.bonding-drop-top-actions button.is-sound.is-muted{opacity:.58}