/* Simple Learning Hub — realistic virtual lab (vlab) */
.vl{margin:14px 0 26px;--vl-ac:#0a7c86}
.vl h2.vl-h{font-size:1.25rem;margin:0 0 4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vl .vl-new{font-size:.7rem;background:#ffd21f;color:#3a2c00;border-radius:999px;padding:2px 8px;font-weight:700;letter-spacing:.02em}
.vl .vl-sub{margin:0 0 12px;color:var(--mut,#56636e);font-size:.95rem}
.vl-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 10px}
.vl-pick button{all:unset;box-sizing:border-box;cursor:pointer;background:var(--card,#fff);border:1.5px solid var(--line,#dfe6ec);border-radius:14px;padding:8px 8px 9px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:74px;-webkit-tap-highlight-color:transparent;box-shadow:0 1px 2px rgba(8,28,44,.06)}
.vl-pick button .em{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:20px;background:#e8f6f3}
.vl-pick button:nth-child(2) .em{background:#fff3d6}.vl-pick button:nth-child(3) .em{background:#fde8e8}
.vl-pick button>span:last-child{display:block;line-height:1.15}
.vl-pick button b{display:block;font-size:.8rem;line-height:1.2;color:var(--ink,#14212b)}
.vl-pick button small{display:block;font-size:.68rem;color:var(--mut,#56636e);line-height:1.2;margin-top:2px}
.vl-pick button[aria-pressed=true]{border-color:var(--vl-ac);box-shadow:0 0 0 2px rgba(10,124,134,.25)}
.vl-pick button:focus-visible{outline:2px solid var(--vl-ac);outline-offset:2px}
.vl-stagewrap{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 6px 24px rgba(8,28,44,.25);background:#14293a;touch-action:manipulation}
.vl-stage{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}
.vl-stage [data-n]{cursor:pointer}
.vl-step{background:#0f2231;padding:8px 10px 9px;min-height:44px;display:flex;align-items:center}
.vl-step .pill{color:#eaf6fb;font-size:.86rem;line-height:1.35}
.vl-step .pill b{color:#ffd21f}
.vl-tip{position:absolute;z-index:5;max-width:min(260px,80%);background:#fffdf5;color:#1b2a33;border:2px solid #ffd21f;border-radius:12px;padding:7px 10px;font-size:.8rem;line-height:1.3;box-shadow:0 6px 18px rgba(0,0,0,.3);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.vl-tip.on{opacity:1;transform:none}
.vl-tip b{display:block;font-size:.9rem}
.vl-tip i{font-style:normal;display:block;color:#5b6770;font-size:.74rem}
.vl-shelf{margin:10px 0 0;background:linear-gradient(#5b3b22,#3e2714);border-radius:14px;padding:8px 8px 12px;box-shadow:inset 0 -6px 0 #2b1a0c}
.vl-shelf .lbl{color:#ffe9b8;font-size:.75rem;margin:0 2px 6px;font-weight:600;letter-spacing:.02em}
.vl-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
.vl-it{all:unset;box-sizing:border-box;cursor:pointer;background:linear-gradient(#fff,#eef3f5);border-radius:11px;padding:4px 3px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px;min-height:92px;touch-action:none;-webkit-tap-highlight-color:transparent;position:relative;box-shadow:0 2px 0 #1d1208}
.vl-it svg{width:46px;height:52px}
.vl-it b{font-size:.72rem;line-height:1.15;color:#13222c}
.vl-it small{font-size:.64rem;color:#5d6a73;line-height:1.1}
.vl-it.next{box-shadow:0 0 0 3px #ffd21f,0 2px 0 #1d1208;animation:vlp 1.2s ease-in-out infinite}
.vl-it.used{opacity:.55}
.vl-it:focus-visible{outline:3px solid #7fd8ec;outline-offset:1px}
@keyframes vlp{50%{box-shadow:0 0 0 6px rgba(255,210,31,.45),0 2px 0 #1d1208}}
.vl-ghost{position:fixed;z-index:50;pointer-events:none;width:56px;height:62px;transform:translate(-50%,-60%) rotate(-12deg);filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.vl-res{margin:10px 0 0;background:var(--card,#fff);border:1.5px solid var(--line,#dfe6ec);border-left:5px solid #15803d;border-radius:14px;padding:10px 12px}
.vl-res[hidden]{display:none}
.vl-res .eq{font-size:1.02rem;font-weight:700;color:var(--ink,#14212b);overflow-wrap:anywhere;margin:2px 0 6px;line-height:1.5}
.vl-res .eq small{font-weight:600;color:var(--mut,#56636e)}
.vl-res p{margin:4px 0;font-size:.9rem;line-height:1.45}
.vl-res .safe{background:#fff6e0;color:#5a3b00;border-radius:10px;padding:6px 9px;font-size:.82rem}
.vl-res .src{font-size:.75rem;color:var(--mut,#56636e)}
.vl-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.vl-btn{all:unset;box-sizing:border-box;cursor:pointer;background:#0a7c86;color:#fff;border-radius:10px;padding:8px 12px;font-size:.85rem;font-weight:600;min-height:38px;display:inline-flex;align-items:center;gap:6px}
.vl-btn.gh{background:transparent;color:var(--link,#07677f);border:1.5px solid currentColor}
.vl-btn:focus-visible{outline:2px solid #ffd21f;outline-offset:2px}
.vl-note{font-size:.75rem;color:var(--mut,#56636e);margin:8px 2px 0}
html[data-theme=dark] .vl-res .safe{background:#3a2c0a;color:#ffe3a1}
/* physics book page */
.vb-page{position:relative;background:#fbf7ee;color:#2b2b2b;border-radius:6px 16px 16px 6px;box-shadow:0 8px 26px rgba(8,28,44,.28),inset 14px 0 18px -14px rgba(0,0,0,.35);padding:12px 12px 14px 18px;overflow:hidden;background-image:repeating-linear-gradient(transparent 0 27px,rgba(80,110,160,.10) 27px 28px)}
.vb-page:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(90deg,#d9cfb8,#f3ecdc)}
.vb-page h3{font-family:"Comic Sans MS","Segoe Print","Noto Serif",Georgia,serif;font-size:1.25rem;margin:0 0 2px;color:#1d3557}
.vb-page .vb-k{font-size:.78rem;color:#7a6a4f;margin:0 0 6px}
.vb-page p.vb-t{font-size:.9rem;line-height:1.5;margin:6px 0;color:#333}
.vb-fig{position:relative;margin:4px -4px 0}
.vb-svg{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.vb-svg [data-n]{cursor:pointer}
.vb-cap{font-family:"Comic Sans MS","Segoe Print","Noto Serif",Georgia,serif;font-size:.85rem;color:#5b4a2e;text-align:center;margin:2px 0 4px}
.vb-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px;margin:6px 0}
.vb-out div{background:#fff;border:1.5px dashed #c9b991;border-radius:10px;padding:5px 8px;font-size:.8rem;line-height:1.3}
.vb-out div b{display:block;font-size:1rem;color:#1d3557}
.vb-ctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.vb-ctl .vl-btn{background:#1d3557}
.vb-ctl .vl-btn.gh{color:#1d3557;background:transparent}
.vb-ctl label{font-size:.82rem;display:flex;align-items:center;gap:6px;flex:1 1 200px}
.vb-ctl input[type=range]{flex:1;min-width:0;accent-color:#e76f51}
.vb-hint{font-family:"Comic Sans MS","Segoe Print","Noto Serif",Georgia,serif;color:#e76f51;font-size:.85rem;margin:2px 0}
.vb-tbl{width:100%;border-collapse:collapse;font-size:.8rem;margin:6px 0;background:#fff}
.vb-tbl th,.vb-tbl td{border:1px solid #d8ccb0;padding:3px 5px;text-align:center}
.vb-tbl th{background:#f1e8d3}
.vl .vl-pick.ph button .em{background:#e6eefc}
@media (min-width:700px){.vl-pick button{flex-direction:row;align-items:center;gap:10px;min-height:60px}.vl-pick button b{font-size:.9rem}.vl-items{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.vb-page{padding:18px 22px 20px 28px}}
@media (prefers-reduced-motion:reduce){.vl-it.next{animation:none}}
.vl-stagewrap,.vl-shelf,.vl-res,.vb-page{max-width:720px;margin-left:auto;margin-right:auto}

/* batch 1: many experiments — swipe strip on phones, grid on tablets */
.vl-pick.many{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:2px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.vl-pick.many button{flex:0 0 138px;scroll-snap-align:start}
.vl-pick button:nth-child(4) .em{background:#e6eefc}.vl-pick button:nth-child(5) .em{background:#f3e8fd}.vl-pick button:nth-child(6) .em{background:#e3f5e1}
.vl-pick button:nth-child(7) .em{background:#fff0e0}.vl-pick button:nth-child(8) .em{background:#e1f2fb}.vl-pick button:nth-child(9) .em{background:#fdf6d8}.vl-pick button:nth-child(10) .em{background:#fde6e1}
@media (min-width:700px){.vl-pick.many{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;padding:0}.vl-pick.many button{flex:none}}
.vl-swipe{margin:0 0 4px;font-size:.78rem;font-weight:700;color:var(--vl-ac,#0a7c86)}.vl-swipe:empty{display:none}@media (min-width:700px){.vl-swipe{display:none}}