/* Goal100 Learning · Reaction Lab styles · Nov 14, 2026 (job reactionlab). Our own code. */
.rl-main{padding-bottom:110px;--rl-ink:#16163A;--rl-indigo:#2B2A8C;--rl-gold:#F2A93B;--rl-teal:#0E7C66;--rl-neon:#38E1C6;--rl-pink:#FF5DA2;--rl-bench:#141A3A}
.rl-crumb{margin:12px 0 0;font-size:.95rem}.rl-crumb a{display:inline-flex;align-items:center;min-height:44px}
.rl-hero{position:relative;overflow:hidden;border-radius:24px;padding:26px 22px 22px;margin:10px 0 18px;color:#fff;background:radial-gradient(120% 140% at 85% 0%,#5B3FD6 0%,#2B2A8C 45%,#141A3A 100%)}
.rl-hero h1{color:#fff;margin:0 0 6px;font-size:clamp(1.7rem,5.4vw,2.6rem);line-height:1.1}
.rl-hero p{margin:6px 0;max-width:58ch;font-size:1.05rem}
.rl-hero .rl-bubbles{position:absolute;inset:0;pointer-events:none}
.rl-hero .rl-bubbles i{position:absolute;bottom:-30px;width:16px;height:16px;border-radius:50%;background:rgba(56,225,198,.55);animation:rlRise 7s linear infinite}
.rl-hero .rl-bubbles i:nth-child(2n){background:rgba(242,169,59,.55);width:11px;height:11px;animation-duration:9s}
.rl-hero .rl-bubbles i:nth-child(3n){background:rgba(255,93,162,.5);width:20px;height:20px;animation-duration:11s}
@keyframes rlRise{0%{transform:translateY(0) scale(.7);opacity:0}10%{opacity:1}100%{transform:translateY(-360px) scale(1.15);opacity:0}}
@media (prefers-reduced-motion:reduce){.rl-hero .rl-bubbles i{animation:none;display:none}}
.rl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;min-width:48px;padding:8px 18px;border-radius:999px;border:2px solid var(--rl-indigo);background:var(--rl-indigo);color:#fff;font:700 1rem/1.15 inherit;cursor:pointer;text-decoration:none;box-sizing:border-box}
.rl-btn:hover{filter:brightness(1.1)}.rl-btn:focus-visible{outline:3px solid var(--rl-gold);outline-offset:2px}
.rl-btn.ghost{background:transparent;color:var(--rl-indigo)}.rl-hero .rl-btn.ghost{color:#fff;border-color:#fff}
.rl-btn.gold{background:var(--rl-gold);border-color:var(--rl-gold);color:#16163A}
.rl-btn[disabled]{opacity:.55;cursor:default}
.rl-btn[aria-pressed=true]{background:var(--rl-teal);border-color:var(--rl-teal);color:#fff}
.rl-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
.rl-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:14px 0}
.rl-tile{display:flex;flex-direction:column;gap:6px;min-height:150px;padding:16px;border-radius:20px;border:2px solid #E0E2F2;background:var(--card,#fff);color:inherit;text-decoration:none;box-sizing:border-box;transition:transform .15s}
.rl-tile:hover{transform:translateY(-2px);border-color:var(--rl-indigo)}
.rl-tile .ico{font-size:2.2rem;line-height:1}.rl-tile b{font-size:1.1rem}.rl-tile small{opacity:.85}
.rl-tile .rl-stars{margin-top:auto;font-size:.95rem}
.rl-tag{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.82rem;font-weight:700;background:#E9E7FF;color:#2B2A8C}
.rl-tag.free{background:#DFF7EE;color:#0B6A57}.rl-tag.watch{background:#FFE3E3;color:#9A1F1F}.rl-tag.try{background:#FFF2D9;color:#7A4E00}
.rl-bands{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:12px 0}
.rl-band{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:44px;padding:14px;border-radius:18px;border:2px solid #E0E2F2;background:var(--card,#fff);color:inherit;font:inherit;text-align:left;cursor:pointer}
.rl-band[aria-pressed=true]{border-color:var(--rl-teal);box-shadow:0 0 0 3px rgba(14,124,102,.25)}
.rl-band .big{font-size:1.8rem}.rl-band b{font-size:1.05rem}
.rl-bandchip{margin:6px 0 12px;font-size:.95rem}.rl-bandchip a{display:inline-flex;min-height:44px;align-items:center}
.rl-card{border:2px solid #E0E2F2;border-radius:20px;padding:16px;margin:14px 0;background:var(--card,#fff)}
.rl-card h2,.rl-card h3{margin-top:0}
.rl-stage{position:relative;border-radius:22px;overflow:hidden;background:radial-gradient(110% 120% at 50% 0%,#24306E 0%,#141A3A 70%);min-height:260px;margin:12px 0;touch-action:pan-y}
.rl-canvas{display:block}
.rl-poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;text-align:center;padding:16px;transition:opacity .35s}
.rl-poster-gone{opacity:0}.rl-poster-ico{font-size:3.4rem}.rl-poster-t{margin:0;font-weight:700;max-width:34ch}
.rl-zoom{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
.rl-zoom .rl-btn{background:rgba(255,255,255,.92);color:#16163A;border-color:#fff;padding:4px 12px;font-size:1.3rem}
.rl-hud{position:absolute;left:10px;top:10px;right:10px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.rl-hud span{background:rgba(20,26,58,.82);color:#fff;border-radius:12px;padding:4px 10px;font-size:.9rem;font-weight:700}
.rl-q{font-size:1.15rem;font-weight:700;margin:10px 0}
.rl-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.rl-choice{min-height:56px;padding:8px 12px;border-radius:16px;border:2px solid #D9DBEA;background:var(--card,#fff);color:inherit;font:700 1rem inherit;cursor:pointer;text-align:left;display:flex;gap:8px;align-items:center}
.rl-choice[aria-pressed=true]{border-color:var(--rl-indigo);background:#EEEDFF}
.rl-choice.ok{border-color:#1D9F5F;background:#E2F7EC}.rl-choice.no{border-color:#C0392B;background:#FDECEA}
.rl-fb{min-height:1.5em;font-weight:700;margin:8px 0}.rl-fb.ok{color:#127A47}.rl-fb.no{color:#A03020}
.rl-eq{font-size:clamp(1.05rem,3.8vw,1.4rem);font-weight:700;letter-spacing:.01em;overflow-wrap:anywhere;margin:8px 0}
.rl-eq .rl-co{color:var(--rl-teal)}.rl-eq .rl-arrow{color:var(--rl-gold);padding:0 4px}
.rl-count{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.rl-count span{border-radius:12px;padding:4px 10px;background:#F1F2FA;font-weight:700}
.rl-count span.eq{background:#E2F7EC}.rl-count span.ne{background:#FDECEA}
.rl-safety{border:2px solid #F2A93B;background:#FFF8EB;border-radius:18px;padding:12px 16px;margin:14px 0}
.rl-safety-h{font-weight:800;margin:0 0 6px}.rl-safety ul{margin:0;padding-left:1.1em}.rl-safety li{margin:4px 0}
.rl-watch{border:2px solid #E25555;background:#FFF1F1;border-radius:18px;padding:12px 16px;margin:12px 0}
.rl-kit{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin:10px 0}
.rl-kit button{min-height:64px;border-radius:16px;border:2px solid #D9DBEA;background:var(--card,#fff);font:800 1.15rem inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;color:inherit}
.rl-kit button small{font-weight:600;font-size:.72rem}
.rl-dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;border:1px solid rgba(0,0,0,.25)}
.rl-slider{width:100%;min-height:44px;accent-color:var(--rl-teal);font-size:16px}
.rl-big{font-size:1.4rem;font-weight:800;margin:6px 0}
.rl-grid{display:grid;grid-template-columns:repeat(18,minmax(44px,1fr));gap:2px;margin:12px 0;font-size:.62rem}
.rl-grid button{min-height:44px;padding:0;border-radius:6px;border:1px solid rgba(0,0,0,.12);font:700 .78rem inherit;cursor:pointer;color:#16163A;overflow:hidden}
.rl-grid .gap{visibility:hidden}
@media (max-width:899px){.rl-grid{display:none}}
.rl-legend{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;font-size:.9rem}.rl-legend button{min-height:44px;border-radius:999px;border:2px solid #D9DBEA;background:var(--card,#fff);padding:4px 12px;font:600 .9rem inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:inherit}
.rl-legend button[aria-pressed=true]{border-color:#16163A}
.rl-info{border-radius:20px;padding:14px 16px;margin:10px 0;background:#F6F5FF;border:2px solid #E0E2F2}
.rl-info .sym{font-size:2.6rem;font-weight:800;line-height:1}
.rl-coef{display:inline-flex;align-items:center;gap:4px;margin:4px 6px 4px 0;padding:4px;border-radius:16px;background:#F1F2FA}
.rl-coef button{min-width:44px;min-height:44px;border-radius:12px;border:2px solid #C8CAE0;background:#fff;font:800 1.2rem inherit;cursor:pointer;color:#16163A}
.rl-coef b{min-width:1.6em;text-align:center;font-size:1.25rem}
.rl-terms{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:10px 0}
.rl-terms .f{font-weight:800;font-size:1.15rem;padding:0 4px}.rl-terms .op{font-weight:800;color:var(--rl-gold);padding:0 4px}
.rl-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:10px 0}
.rl-res{border-radius:16px;padding:10px 12px;background:#F1F2FA;min-height:44px}
.rl-res b{display:block}
.rl-share-box{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
.rl-kcard{border:2px solid #E0E2F2;border-radius:22px;padding:16px;margin:14px 0;background:var(--card,#fff)}
.rl-kcard h3{margin:0 0 6px}.rl-kcard ol,.rl-kcard ul{padding-left:1.2em}.rl-kcard li{margin:4px 0}
.rl-kcard .why{background:#EEF9F6;border-radius:14px;padding:10px 12px}
.rl-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:12px 0}
.rl-gallery button{min-height:72px;padding:10px;border-radius:18px;border:2px solid #D9DBEA;background:var(--card,#fff);font:700 .98rem inherit;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;color:inherit}
.rl-gallery button[aria-pressed=true]{border-color:var(--rl-indigo);background:#EEEDFF}
.rl-gallery .ico{font-size:1.6rem}
.rl-note{font-size:.95rem;opacity:.9}
.rl-board .rl-main{font-size:1.15rem}.rl-board .rl-btn{min-height:60px;font-size:1.15rem}.rl-board .rl-choice{min-height:68px;font-size:1.15rem}
.rl-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rl-thermo{height:16px;border-radius:999px;background:linear-gradient(90deg,#3D7BFF,#38E1C6,#F2A93B,#FF5A3C);position:relative;margin:6px 0}
.rl-thermo i{position:absolute;top:-6px;width:6px;height:28px;border-radius:4px;background:#16163A;transform:translateX(-3px)}
.rl-sticky{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media (max-width:420px){.rl-hero{padding:20px 16px}.rl-btn{padding:8px 14px}}
/* light boxes keep dark words in the dark theme too */
.rl-safety,.rl-watch,.rl-info,.rl-count span,.rl-res,.rl-coef,.rl-kcard .why,.rl-choice.ok,.rl-choice.no,.rl-choice[aria-pressed=true],.rl-gallery button[aria-pressed=true],.rl-tag{color:#16163A}
.rl-safety a,.rl-watch a,.rl-info a{color:#2B2A8C}
.rl-shelf{font-size:1.45rem;min-width:56px}