@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-subset.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{--navy:#173f7b;--blue:#2f8dff;--sky:#e8f8ff;--line:#dfeef6;--shadow:0 14px 35px rgba(58,118,160,.14)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:#eef8ff;font-family:Pretendard,system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:var(--navy)}
body{display:flex;justify-content:center}
img{display:block;max-width:100%}
button,input{font:inherit}
#app{width:min(100vw,430px);min-height:100dvh;background:linear-gradient(#ddf5ff 0,#f4fbff 56%,#fffdf4 100%);overflow:hidden;position:relative}
.screen{display:none;padding-bottom:92px} .screen.active{display:block}
.top{padding:14px 14px 6px;display:flex;align-items:center;justify-content:space-between}
.top .brand{width:92px}
.statwrap{display:flex;gap:8px} .statwrap img{height:38px}
.hero{margin:4px 14px 12px;border-radius:30px;background:#ffffffd4;border:1px solid #fff;padding:14px;box-shadow:var(--shadow)}
.hero .logo{width:100%;max-height:220px;object-fit:contain}
.hero .tagline{width:84%;margin:-3px auto 0}
.lab-strip{height:128px;margin-top:12px;border-radius:25px;background:linear-gradient(180deg,#def6ff,#fff6d0);position:relative;overflow:hidden}
.lab-strip .left{position:absolute;left:0;bottom:0;width:118px}
.lab-strip .right{position:absolute;right:0;bottom:-2px;width:90px}
.lab-strip .atom{position:absolute;right:84px;top:6px;width:58px}
.lab-copy{position:absolute;left:112px;right:12px;top:16px} .lab-copy h2{font-size:21px;line-height:1.16;margin:0 0 8px;letter-spacing:-.6px}
.lab-copy p{margin:0;font-size:12.5px;line-height:1.45;color:#607f98;font-weight:800}
.section{padding:0 14px 14px}
.title{display:flex;justify-content:space-between;align-items:center;margin:12px 0 8px} .title h2{margin:0;font-size:19px} .title span{font-size:12px;color:#6a859b;font-weight:900}
.nav4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .asset-btn{background:transparent;border:0;padding:0} .asset-btn img{width:100%}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px} .levels img{width:100%}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:#fff;border:1px solid var(--line);border-radius:24px;padding:12px;box-shadow:var(--shadow)} .tile img{height:82px;object-fit:contain;margin:auto}
.tile h3{font-size:17px;margin:8px 0 4px} .tile p{margin:0;font-size:12px;line-height:1.45;color:#698197;font-weight:700}
.strip{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:11px;box-shadow:var(--shadow)} .strip img{width:100%;max-height:100px;object-fit:contain}
.pagehead{display:flex;align-items:center;gap:10px;padding:14px} .pagehead .back{background:transparent;border:0;padding:0;width:42px} .pagehead h1{margin:0;font-size:23px}
.searchbox{margin:0 14px 10px;background:#fff;border-radius:18px;padding:10px 12px;display:flex;gap:8px;align-items:center;border:1px solid var(--line);box-shadow:var(--shadow)}
.searchbox input{flex:1;border:0;outline:0;background:transparent;font-weight:800;color:#173f7b} .searchbox button{border:0;border-radius:12px;background:#ebf7ff;padding:8px 12px;color:#2d82d7;font-weight:900}
.filters{display:flex;gap:7px;overflow:auto;padding:0 14px 10px} .filter{border:0;border-radius:999px;padding:8px 13px;background:#fff;color:#567590;font-size:12px;font-weight:900;white-space:nowrap} .filter.active{background:#2f8dff;color:#fff}
.tablewrap{margin:0 14px;background:#fff;border-radius:26px;padding:11px;border:1px solid var(--line);box-shadow:var(--shadow)}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;font-size:11px;font-weight:800}
.legend span{padding:6px 9px;border-radius:999px}
.periodic-scroll{overflow:auto;padding-bottom:6px}
.periodic{min-width:860px;display:grid;grid-template-columns:repeat(18,1fr);gap:6px}
.pt-gap{height:74px;border-radius:14px;background:transparent}
.el{min-height:74px;border:0;border-radius:15px;padding:6px 4px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#173f7b;box-shadow:0 8px 16px rgba(51,107,146,.1)}
.el .n{font-size:10px;font-weight:1000} .el .s{font-size:22px;font-weight:1000;line-height:1} .el .m{margin-top:4px;font-size:10px;color:#587695;font-weight:800}
.el.selected{outline:3px solid #2f8dff;outline-offset:1px}
.series-label{min-width:860px;display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center;margin-top:10px}
.series-label .tag{height:74px;background:linear-gradient(180deg,#f3f9ff,#eaf4fb);border-radius:18px;display:grid;place-items:center;font-weight:1000;font-size:13px;color:#4572a0;border:1px solid #dceef8}
.series-grid{display:grid;grid-template-columns:repeat(14,1fr);gap:6px}
.nonmetal{background:linear-gradient(#d6ebff,#f4fbff)} .halogen{background:linear-gradient(#dcffe8,#fbfffd)} .noble{background:linear-gradient(#d9fae8,#f7fff9)}
.alkali{background:linear-gradient(#ffd8e8,#fff5fa)} .alkaline{background:linear-gradient(#fff0b8,#fffaf1)} .metalloid{background:linear-gradient(#eadcff,#faf7ff)}
.transition{background:linear-gradient(#ffe7ba,#fff7e7)} .posttransition{background:linear-gradient(#e8f2ff,#f8fbff)} .lanthanide{background:linear-gradient(#ffe1f4,#fff7fc)} .actinide{background:linear-gradient(#ece4ff,#faf8ff)}
.data-note{margin-top:10px;padding:9px 11px;border-radius:14px;background:#f4f9fd;color:#637f98;font-size:11px;line-height:1.45;font-weight:760}
.detail{margin:12px 14px 0;background:#fff;border:1px solid var(--line);border-radius:27px;padding:14px;box-shadow:var(--shadow)}
.detail-top{display:flex;align-items:center;gap:13px} .detail-copy h2{margin:0 0 4px;font-size:25px} .detail-copy p{margin:0;color:#657e95;font-weight:700;line-height:1.5;font-size:13px}
.element-detail-card{width:118px;height:150px;flex:0 0 auto;border-radius:24px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(55,111,150,.14);border:1px solid rgba(255,255,255,.85);position:relative;overflow:hidden}
.element-detail-card::after{content:"";position:absolute;inset:8px;border-radius:18px;border:1px solid rgba(255,255,255,.6)}
.atomic-no{position:absolute;top:10px;left:12px;font-size:14px;font-weight:1000;color:#173f7b}
.symbol{font-size:58px;font-weight:1000;line-height:.95;letter-spacing:-2px;margin-top:4px;color:#123e82}
.element-name{font-size:15px;font-weight:1000;margin-top:5px}
.atomic-mass{font-size:12px;font-weight:800;color:#496d95;margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px} .chip{border-radius:999px;background:#edf7ff;padding:7px 10px;font-size:12px;font-weight:900}
.atom-zone{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.atom-zone .card{background:#fff;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow);padding:12px;min-height:196px}
.atom-visual{width:100%;height:145px;display:grid;place-items:center} .atom-visual svg{width:100%;height:145px;overflow:visible}
.atom-caption{text-align:center;margin-top:4px} .atom-caption b{display:block;font-size:15px} .atom-caption span{display:block;font-size:12px;color:#68829a;font-weight:800;margin-top:2px}
.info-panel{display:flex;flex-direction:column;gap:8px} .info-title{display:flex;align-items:center;gap:8px;margin-bottom:2px} .info-orb{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:22px;font-weight:1000;background:linear-gradient(180deg,#d8ebff,#f7fbff);box-shadow:inset 0 0 0 1px #cce5fa}
.info-row{display:flex;justify-content:space-between;gap:8px;background:#f4f9fd;border-radius:12px;padding:8px 10px;font-size:12px} .info-row span{color:#6b8196;font-weight:800} .info-row b{font-weight:1000;color:#173f7b;text-align:right}
.quizbox,.report{margin:0 14px;background:#fff;border-radius:27px;padding:14px;box-shadow:var(--shadow);border:1px solid var(--line)}
.quiz-hero{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:center} .quiz-hero img{width:100px}
.question-card{margin-top:12px;border-radius:22px;background:linear-gradient(180deg,#eaf7ff,#fff9d8);padding:14px;display:grid;place-items:center;min-height:130px}
.question-card .big{font-size:50px;font-weight:1000;line-height:1} .question-card .small{font-size:14px;font-weight:800;color:#67829b;margin-top:4px}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px} .ans{border:0;border-radius:17px;padding:14px;font-weight:1000} .ans.correct{background:#53c177;color:#fff} .ans.wrong{background:#f16f9c;color:#fff} .ans.normal{background:#edf7ff;color:#1a3d71}
.report-hero{display:flex;gap:10px;align-items:center} .report-hero img{width:100px} .report h2{font-size:20px;margin:0} .report p{font-size:12.5px;color:#678098;font-weight:700;line-height:1.45}
.row{display:grid;grid-template-columns:90px 1fr 42px;gap:9px;align-items:center;margin:11px 0;font-size:12px;font-weight:900} .bar{height:10px;background:#e8eff5;border-radius:999px;overflow:hidden} .bar i{display:block;height:100%;background:linear-gradient(90deg,#58c279,#3aa0ff)}
.navbottom{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(430px,100vw);background:#fff;border-top:1px solid #dcecf4;padding:5px 8px calc(8px + env(safe-area-inset-bottom));z-index:20} .navbottom img{width:100%;max-height:54px;object-fit:contain}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(8px);background:#163f70;color:#fff;border-radius:999px;padding:10px 15px;font-size:13px;font-weight:900;opacity:0;transition:.2s;z-index:50;white-space:nowrap} .toast.show{opacity:1;transform:translateX(-50%)}
@media(min-width:431px){body{padding:16px 0} #app{border-radius:34px;box-shadow:0 22px 72px rgba(55,103,131,.17)}}

/* ===== 배움랩 연결·실제 동작하는 버튼 ===== */
a.hub-link{display:flex;align-items:center;gap:4px;text-decoration:none}
.hub-back{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid #d6eaf5;box-shadow:0 6px 14px rgba(75,132,164,.12);font-size:20px;line-height:1;color:#278cff;font-weight:900}
.live-pill{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 11px 0 6px;border-radius:999px;background:#fff;border:1px solid #d6eaf5;box-shadow:0 6px 14px rgba(75,132,164,.12);font-weight:900;font-size:14px;color:#173e6d}
.live-pill img{width:24px;height:24px;object-fit:contain}
.lv-btn{border:0;background:none;padding:0;cursor:pointer;border-radius:18px;transition:transform .15s}.lv-btn img{width:100%;opacity:.55;filter:saturate(.6)}
.lv-btn.on img{opacity:1;filter:none}.lv-btn.on{transform:translateY(-2px);box-shadow:0 0 0 3px #278cff;border-radius:16px}
.strip-btn{display:block;width:100%;border:0;cursor:pointer;font:inherit}
.mission-live{display:grid;gap:8px}.ms-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;background:#f3f9ff;font-weight:800;font-size:14px}
.ms-row.done{background:#e9f9ef}.ms-ic{font-size:20px}.ms-t{flex:1}.ms-n{color:#5a7a95}.ms-row.done .ms-n{color:#1c9a4a}
.ms-claim{height:44px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffe26c,#ffc12f);color:#704400;font:inherit;font-weight:900;cursor:pointer}.ms-claim:disabled{background:#e6edf4;color:#8ba0b4}
.qcount{font-size:13px;font-weight:900;color:#5a7a95;margin-bottom:4px}#quizSymbol.word{font-size:40px}
.ans small{font-size:12px;color:#6c8499;margin-left:4px}
.review-btn{display:flex;align-items:center;gap:10px;text-align:left}.review-btn img{width:120px!important;max-height:70px}.review-btn span{font-weight:900;color:#173e6d}
.wrong-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.wr-chip{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:14px;border:1px solid #ffd0db;background:#fff4f7;font:inherit;font-weight:800;cursor:pointer}
.wr-chip b{font-size:18px;color:#e2456e}.wr-chip small{color:#8a6a75}.wr-empty{margin:0 0 6px;color:#6c8499;font-weight:700}
.review-cta{width:100%;height:48px;margin-bottom:14px;border:0;border-radius:999px;background:linear-gradient(180deg,#45a6ff,#1678f0);color:#fff;font:inherit;font-weight:900;cursor:pointer}
.alias{color:#6c8499}
.navbottom{position:fixed}.navbottom .nb-hit{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}.nb-btn{border:0;background:transparent;cursor:pointer;border-radius:14px}.nb-btn.on{background:rgba(39,140,255,.08)}

/* 좁은 화면에서도 검색 버튼이 안 밀리게 */
.searchbox{display:flex;gap:8px}.searchbox input{flex:1;min-width:0;width:auto}.searchbox button{flex:none}

/* 홈 안내 글이 그림에 가리지 않게 (그림은 글 뒤로) */
.lab-strip .left{width:92px;z-index:0;opacity:.95}.lab-strip .right{z-index:0;opacity:.9}.lab-strip .atom{z-index:0}
.lab-copy{left:94px;z-index:2}.lab-copy h2,.lab-copy p{text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 8px rgba(255,255,255,.85)}
.lab-copy{right:78px}

/* ===== 주기율표 확대·축소 ===== */
.zoombar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.zb-fit{height:36px;padding:0 14px;border-radius:999px;border:1px solid #cfe3f3;background:#fff;font:inherit;font-weight:900;font-size:14px;color:#173e6d;cursor:pointer}
.zb-fit.on{background:#278cff;border-color:#278cff;color:#fff}
.zb-steps{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #cfe3f3;border-radius:999px;padding:3px}
.zb-btn{width:32px;height:30px;border:0;border-radius:999px;background:#eef6ff;font-size:18px;font-weight:900;color:#278cff;cursor:pointer}.zb-btn:disabled{opacity:.35}
#zoomLabel{min-width:58px;text-align:center;font-weight:900;font-size:13px;color:#173e6d}
.periodic-scroll{touch-action:pan-x pan-y}
/* 크게(지금 크기) */
.periodic-scroll.z2 .periodic{min-width:860px}
/* 중간: 원자번호 + 기호 */
.periodic-scroll.z1 .periodic{min-width:560px;gap:3px}.periodic-scroll.z1 .series-grid{gap:3px}
.periodic-scroll.z1 .el,.periodic-scroll.z1 .pt-gap{min-height:46px;height:46px;border-radius:10px;padding:2px}
.periodic-scroll.z1 .el .m{display:none}.periodic-scroll.z1 .el .s{font-size:17px}.periodic-scroll.z1 .el .n{font-size:9px}
.periodic-scroll.z1 .series-label{grid-template-columns:62px 1fr}.periodic-scroll.z1 .series-label .tag{font-size:10px}
/* 전체 보기: 18족이 한 화면에 (기호만) */
.periodic-scroll.z0 .periodic{min-width:0;width:100%;gap:2px}.periodic-scroll.z0 .series-grid{gap:2px}
.periodic-scroll.z0 .el,.periodic-scroll.z0 .pt-gap{min-height:0;height:24px;border-radius:5px;padding:0;box-shadow:none}
.periodic-scroll.z0 .el .n,.periodic-scroll.z0 .el .m{display:none}.periodic-scroll.z0 .el .s{font-size:10.5px;line-height:1;letter-spacing:-.3px}
.periodic-scroll.z0 .el.selected{outline:2px solid #ff6b81;outline-offset:0;transform:scale(1.25);z-index:2;position:relative}
.periodic-scroll.z0 .series-label{grid-template-columns:44px 1fr;gap:4px;margin-top:4px}.periodic-scroll.z0 .series-label .tag{font-size:9px;padding:2px;border-radius:6px}
.periodic-scroll.z1 .series-label{min-width:560px}.periodic-scroll.z0 .series-label{min-width:0;width:100%}

/* ===== 단계별로 보이는 내용 ===== */
body.lv-ele [data-lv="mid"],body.lv-ele [data-lv="high"],body.lv-mid [data-lv="high"]{display:none!important}
.meaning{margin:8px 2px 0;padding:10px 12px;border-radius:14px;background:#f1f7ff;font-weight:800;font-size:13.5px;color:#2a57c0}
.atom-note{display:grid;place-items:center;min-height:120px;text-align:center;font-weight:800;font-size:13px;color:#6c8499;line-height:1.6}
/* 홈 메뉴·단계 선택 */
.menu4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.m4{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border:1px solid #dcecf4;border-radius:20px;background:#fff;box-shadow:0 8px 18px rgba(51,107,146,.1);font:inherit;cursor:pointer;color:#173e6d}
.m4 img{width:46px;height:46px;object-fit:contain}.m4 b{font-size:14.5px;font-weight:900}.m4 small{font-size:11px;font-weight:800;color:#6c8499}
.lvsel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.lv-pill{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;border-radius:16px;border:2px solid #dcecf4;background:#fff;font:inherit;cursor:pointer;color:#173e6d}
.lv-pill b{font-size:15px;font-weight:900}.lv-pill small{font-size:11px;font-weight:800;color:#6c8499}
.lv-pill.on{border-color:#278cff;background:linear-gradient(180deg,#45a6ff,#1678f0);color:#fff}.lv-pill.on small{color:#e6f2ff}
.tile.tap{cursor:pointer;transition:transform .12s}.tile.tap:active{transform:scale(.97)}
.ph-act,.ph-tag{margin-left:auto;font:inherit;font-weight:900;font-size:13px}.ph-act{height:34px;padding:0 12px;border-radius:999px;border:1px solid #cfe3f3;background:#fff;color:#278cff;cursor:pointer}.ph-tag{color:#6c8499}
.el.in-lv{box-shadow:0 0 0 2px rgba(39,140,255,.35),0 8px 16px rgba(51,107,146,.1)}
/* 아래 메뉴 5개 */
.navbottom.nav5{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:6px 6px calc(8px + env(safe-area-inset-bottom))}
.nav5 .nb-btn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 0;border:0;border-radius:12px;background:transparent;font:inherit;font-size:11.5px;font-weight:900;color:#6c8499;cursor:pointer}
.nav5 .nb-btn span{font-size:20px;line-height:1.1}.nav5 .nb-btn.on{color:#278cff;background:rgba(39,140,255,.08)}
/* 작은 주기율표 */
.mini-pt{display:grid;grid-template-columns:repeat(18,1fr);gap:2px;margin:10px 0 4px}
.mini-pt .mp,.mini-pt .mp-gap{height:20px;border-radius:4px;font-style:normal;font-size:8.5px;font-weight:900;display:grid;place-items:center;color:#173e6d;letter-spacing:-.3px}
.mini-pt .mp.dim{opacity:.22;filter:grayscale(.6)}.mini-pt .mp.hl{outline:2px solid #ff6b81;transform:scale(1.15);position:relative;z-index:1;opacity:1}
.k-metal{background:#ffe2b8}.k-metalloid{background:#e3d8ff}.k-nonmetal{background:#cfeeff}
.mp-legend{display:flex;gap:6px;justify-content:center;font-size:12px;font-weight:800}.mp-legend span{padding:3px 10px;border-radius:999px}
/* 배우기 */
.lesson-list{display:grid;gap:9px}.ls-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:20px;border:1px solid #dcecf4;background:#fff;box-shadow:0 8px 18px rgba(51,107,146,.08);font:inherit;cursor:pointer;text-align:left;color:#173e6d}
.ls-ic{font-size:26px}.ls-t{flex:1;font-weight:900;font-size:16px}.ls-t small{display:block;font-size:11.5px;color:#6c8499}.ls-s{font-size:20px;color:#278cff;font-weight:900}.ls-item.done{background:#effbf3;border-color:#c8eed5}.ls-item.done .ls-s{color:#1c9a4a}
.lv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.lv-back{border:0;background:none;font:inherit;font-weight:900;color:#278cff;cursor:pointer;padding:6px 0}
.lv-dots{display:flex;gap:5px}.lv-dots i{width:8px;height:8px;border-radius:50%;background:#d5e3f0}.lv-dots i.on{background:#7fb8f5}.lv-dots i.cur{background:#278cff;width:20px;border-radius:5px}
.lv-title{margin:4px 0 10px;font-size:21px}.lv-card{padding:16px;border-radius:22px;background:#fff;border:1px solid #dcecf4;box-shadow:0 10px 22px rgba(51,107,146,.1)}
.lv-card p{margin:0;font-size:15.5px;line-height:1.7;font-weight:600;color:#2c4766}.lv-card p b{color:#1e6fd9}.lv-q{font-weight:900!important;margin-bottom:10px!important}
.lv-why{margin-top:10px!important;padding:10px 12px;border-radius:14px;background:#f3f9ff;font-size:14px!important}
.lv-nav{display:flex;gap:8px;margin-top:12px}.lv-prev,.lv-next{flex:1;height:48px;border-radius:999px;border:0;font:inherit;font-weight:900;cursor:pointer}.lv-prev{background:#eef4fb;color:#278cff;flex:.5}.lv-prev:disabled{opacity:.4}.lv-next{background:linear-gradient(180deg,#45a6ff,#1678f0);color:#fff}
/* 실험 */
.lab-card{display:flex;align-items:center;gap:12px;width:100%;padding:16px 14px;margin-bottom:10px;border-radius:22px;border:1px solid #dcecf4;background:#fff;box-shadow:0 8px 18px rgba(51,107,146,.1);font:inherit;text-align:left;cursor:pointer;color:#173e6d}
.lab-ic{font-size:34px}.lab-card b{display:block;font-size:17px}.lab-card small{display:block;margin-top:3px;font-size:13px;font-weight:700;color:#6c8499;line-height:1.45}.lab-go{margin-left:auto;font-size:22px;color:#278cff;font-weight:900}
.bd-goal{margin:6px 0 10px;padding:10px 12px;border-radius:14px;background:#fff6d6;font-weight:800;text-align:center}.bd-goal b{color:#c96f00}
.bd-main{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px;border-radius:22px;background:#fff;border:1px solid #dcecf4}
.bd-atom svg{width:150px;height:150px}.bd-info{display:flex;flex-direction:column;gap:4px;font-weight:800;font-size:13.5px;color:#2c4766}.bd-name{font-size:22px;color:#173e6d}.bd-name span{color:#278cff}
.bd-ctrl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.bd-ctrl button{height:52px;border-radius:999px;border:0;font:inherit;font-weight:900;font-size:16px;cursor:pointer;background:linear-gradient(180deg,#45a6ff,#1678f0);color:#fff}.bd-ctrl button:first-child{background:#eef4fb;color:#278cff}.bd-ctrl button:disabled{opacity:.4}
.bd-tip{margin:0 2px;font-size:13px;font-weight:700;color:#6c8499;line-height:1.5}
.fm-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 4px}.fm-tabs button{height:38px;border-radius:999px;border:1px solid #cfe3f3;background:#fff;font:inherit;font-weight:900;cursor:pointer;color:#173e6d}.fm-tabs button.on{background:#278cff;color:#fff;border-color:#278cff}
.fm-name{margin:10px 2px 0;font-size:19px}.fm-row{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 8px}
.fm-el{flex:0 0 auto;width:74px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border:0;border-radius:16px;font:inherit;cursor:pointer;color:#173e6d;box-shadow:0 6px 14px rgba(51,107,146,.1)}
.fm-el small{font-size:10px;font-weight:800;color:#5a7a95}.fm-el b{font-size:22px}.fm-el span{font-size:12px;font-weight:800}.fm-el em{font-style:normal;font-size:10.5px;font-weight:800;color:#2a57c0}
.fm-box{padding:14px;border-radius:20px;background:#fff;border:1px solid #dcecf4}.fm-box b{display:block;font-size:14px;color:#1e6fd9;margin-top:4px}.fm-box p{margin:4px 0 8px;font-size:14px;line-height:1.6;font-weight:600;color:#2c4766}.fm-note{color:#c05a00!important}
#quizSymbol.clue{font-size:17px!important;line-height:1.55;font-weight:800;padding:0 4px;text-align:left}

[hidden]{display:none!important}