.bond-lab{--bond-accent:#3d8ca3;--bond-soft:#e9f5f6;padding:1rem;color:#203b49}.bond-lab.covalent{--bond-accent:#7762ae;--bond-soft:#f0ecf8}.bond-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;border:1px solid #d7e6e9;border-radius:20px;background:linear-gradient(125deg,#fff,var(--bond-soft))}.bond-kicker{display:block;color:var(--bond-accent);font-size:.62rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.bond-hero h2{margin:.2rem 0;font-size:1.55rem;letter-spacing:-.035em}.bond-hero p{max-width:720px;margin:.3rem 0 0;color:#607680;font-size:.7rem;line-height:1.55}.bond-score{flex:0 0 auto;min-width:90px;padding:.65rem;border-radius:14px;background:#fff;text-align:center;box-shadow:0 7px 22px rgba(40,76,89,.08)}.bond-score span{display:block;color:#6a808a;font-size:.53rem}.bond-score strong{display:block;color:var(--bond-accent);font-size:1.25rem}.bond-stage-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem;margin:.75rem 0}.bond-stage{min-height:54px;padding:.45rem;border:1px solid #d5e3e7;border-radius:12px;background:#fff;color:#506b77;cursor:pointer}.bond-stage b,.bond-stage small{display:block}.bond-stage b{font-size:.63rem}.bond-stage small{margin-top:.12rem;font-size:.49rem}.bond-stage:hover{border-color:var(--bond-accent);transform:translateY(-1px)}.bond-stage.active{border-color:transparent;background:linear-gradient(125deg,var(--bond-accent),#6372b5);color:#fff;box-shadow:0 7px 18px rgba(60,112,133,.2)}.bond-stage.done:after{content:"✓";display:inline-grid;place-items:center;width:17px;height:17px;margin-top:.2rem;border-radius:50%;background:#35a477;color:#fff;font-size:.48rem}.bond-task{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:.75rem}.bond-brief,.bond-workshop,.bond-discover{border:1px solid #d7e4e8;border-radius:18px;background:rgba(255,255,255,.9)}.bond-brief{padding:1rem}.bond-brief-label{color:var(--bond-accent);font-size:.55rem;font-weight:850;text-transform:uppercase}.bond-brief h3{margin:.25rem 0;font-size:1rem}.bond-brief p{margin:.25rem 0;color:#617782;font-size:.65rem;line-height:1.5}.bond-target{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.65rem;padding:.65rem;border-radius:12px;background:var(--bond-soft)}.bond-target span{font-size:.55rem}.bond-target strong{font-size:1.05rem}.bond-hint{margin-top:.6rem;padding:.55rem .65rem;border-left:3px solid var(--bond-accent);border-radius:0 10px 10px 0;background:#f7faf9;color:#55707c;font-size:.58rem;line-height:1.5}.bond-workshop{padding:.85rem}.bond-palette{display:flex;flex-wrap:wrap;gap:.42rem}.bond-piece{position:relative;display:grid;place-items:center;min-width:58px;min-height:58px;padding:.35rem;border:2px solid color-mix(in srgb,var(--bond-accent) 35%,#dce8eb);border-radius:15px;background:#fff;color:#274653;cursor:grab;box-shadow:0 5px 13px rgba(39,77,91,.07);user-select:none}.bond-piece:hover{border-color:var(--bond-accent);transform:translateY(-2px)}.bond-piece strong{font-size:.86rem}.bond-piece small{font-size:.45rem;color:#6b8089}.bond-piece sup,.bond-piece sub{font-size:.58em}.bond-board{position:relative;display:flex;align-items:center;justify-content:center;gap:.22rem;min-height:200px;margin-top:.65rem;padding:1rem;border:2px dashed #bad0d7;border-radius:17px;background:radial-gradient(circle at center,#fff,var(--bond-soft));overflow:hidden}.bond-board.dragover{border-color:var(--bond-accent);background:var(--bond-soft)}.bond-empty{max-width:310px;color:#70858e;font-size:.62rem;line-height:1.45;text-align:center}.bond-placed{position:relative;display:grid;place-items:center;width:66px;height:66px;margin-left:-7px;border:3px solid #fff;border-radius:17px;background:linear-gradient(145deg,#fff,var(--bond-soft));color:#234451;box-shadow:0 6px 17px rgba(33,69,83,.14);animation:bondSnap .28s cubic-bezier(.2,1.4,.4,1)}.bond-placed:first-of-type{margin-left:0}.bond-placed strong{font-size:1rem}.bond-placed small{font-size:.43rem}.bond-placed.cation{box-shadow:0 0 0 2px #e88668,0 6px 17px rgba(33,69,83,.14)}.bond-placed.anion{box-shadow:0 0 0 2px #518db8,0 6px 17px rgba(33,69,83,.14)}.bond-charge-meter{display:grid;grid-template-columns:auto 1fr auto;gap:.55rem;align-items:center;margin-top:.6rem;color:#5a727d;font-size:.58rem}.bond-meter{height:8px;overflow:hidden;border-radius:999px;background:#e4ecef}.bond-meter i{display:block;width:50%;height:100%;background:linear-gradient(90deg,#dd8067,#47a67d);transition:.3s}.bond-feedback{min-height:58px;margin-top:.6rem;padding:.62rem .72rem;border-radius:12px;background:#f4f8f8;color:#506a76;font-size:.61rem;line-height:1.5}.bond-feedback strong{display:block;color:#294b5a;font-size:.68rem}.bond-feedback.success{background:#e6f6ef;color:#28684f}.bond-feedback.error{background:#fff0eb;color:#92513e}.bond-controls{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}.bond-controls button{min-height:36px;padding:.42rem .65rem;border:1px solid #cbdce1;border-radius:10px;background:#fff;color:#3d6575;font-size:.56rem;font-weight:760;cursor:pointer}.bond-controls button.primary{border-color:transparent;background:var(--bond-accent);color:#fff}.bond-discover{margin-top:.75rem;padding:.9rem}.bond-discover h3{margin:0;font-size:.82rem}.bond-discover>p{margin:.25rem 0 .65rem;color:#657983;font-size:.59rem}.bond-example-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.bond-example{padding:.65rem;border:0;border-radius:13px;background:var(--bond-soft);color:#385967;text-align:left;cursor:pointer}.bond-example:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(41,79,93,.1)}.bond-example strong,.bond-example span,.bond-example small{display:block}.bond-example strong{font-size:.76rem}.bond-example span{margin:.15rem 0;font-size:.56rem;font-weight:700}.bond-example small{color:#667c85;font-size:.49rem;line-height:1.4}.molecule-board{gap:28px}.molecule-atom{position:relative;z-index:2;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 32% 27%,#fff,var(--atom,#8fc5d5) 42%,#4f7e91);color:#183946;box-shadow:0 8px 18px rgba(35,73,87,.2);animation:bondSnap .28s cubic-bezier(.2,1.4,.4,1)}.molecule-atom strong{font-size:1rem}.molecule-bond{position:absolute;z-index:1;height:5px;border-radius:99px;background:#526f7c;transform-origin:left center}.molecule-bond.double{height:13px;border-top:4px solid #526f7c;border-bottom:4px solid #526f7c;background:transparent}.molecule-bond.triple{height:17px;border-top:4px solid #526f7c;border-bottom:4px solid #526f7c;background:linear-gradient(transparent 6px,#526f7c 6px,#526f7c 10px,transparent 10px)}.electron-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--bond-accent)}@keyframes bondSnap{from{opacity:0;transform:scale(.65) rotate(-5deg)}to{opacity:1;transform:none}}@media(max-width:800px){.bond-stage-tabs{grid-template-columns:repeat(3,1fr)}.bond-task{grid-template-columns:1fr}.bond-example-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.bond-lab{padding:.35rem}.bond-hero{padding:.8rem}.bond-score{display:none}.bond-stage-tabs{gap:.25rem}.bond-stage{min-height:49px;padding:.3rem}.bond-board{min-height:175px;padding:.6rem}.bond-piece{min-width:51px;min-height:51px}.bond-placed,.molecule-atom{width:53px;height:53px}.bond-example-grid{grid-template-columns:1fr 1fr}}