:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; color: #172033; background: #f7f9fd; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
.lab { max-width: 980px; margin: 0 auto; padding: 22px; }
header { margin-bottom: 15px; }
.eyebrow { margin: 0 0 5px; color: #3157b7; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
h1 { margin: 0; font-size: clamp(24px, 5vw, 38px); }
h2 { margin: 0; font-size: clamp(20px, 4vw, 28px); }
header > p:last-child, .muted, .atom-tray p { color: #56627a; }
header > p:last-child, .atom-tray p { margin: 7px 0 0; }
.tabs, .choices, .case-choice, .token-bank, .build-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs[hidden] { display: none; }
button { min-height: 44px; padding: 8px 13px; border: 1px solid #abb6c9; border-radius: 10px; color: inherit; background: #fff; cursor: pointer; }
button.active, button.primary { border-color: #3157b7; color: #fff; background: #3157b7; }
#content { margin-top: 18px; }
.encyclopedia-tools { display: grid; grid-template-columns: minmax(190px, 1.5fr) repeat(2, minmax(145px, .7fr)); gap: 10px; align-items: end; margin-bottom: 14px; }
.encyclopedia-tools label { display: grid; gap: 5px; color: #56627a; font-size: 13px; font-weight: 650; }
.encyclopedia-tools input[type="search"], .encyclopedia-tools select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #abb6c9; border-radius: 9px; color: inherit; background: #fff; }
.encyclopedia-tools .school-filter { display: flex; min-height: 44px; align-items: center; gap: 7px; }
.school-filter input { width: 20px; height: 20px; accent-color: #3157b7; }
.element-count { align-self: center; color: #3157b7; font-weight: 750; }
.card-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.symbol-grid { display: grid; max-height: 430px; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; overflow: auto; padding: 2px 4px 8px 2px; overscroll-behavior: contain; }
.symbol-card { position: relative; display: grid; min-height: 78px; place-content: center; border-top: 5px solid #8090aa; font-size: 25px; font-weight: 750; }
.symbol-card b { font-size: 25px; }
.symbol-card .atomic-number { position: absolute; top: 4px; left: 7px; color: #56627a; font-size: 10px; font-weight: 600; }
.symbol-card.school::after { position: absolute; top: 4px; right: 5px; content: "中"; color: #3157b7; font-size: 10px; font-weight: 800; }
.symbol-card.category-alkali { border-top-color: #d9a514; } .symbol-card.category-alkaline { border-top-color: #dc7a32; } .symbol-card.category-transition { border-top-color: #64748b; } .symbol-card.category-postTransition { border-top-color: #91a0b5; } .symbol-card.category-metalloid { border-top-color: #278a64; } .symbol-card.category-nonmetal { border-top-color: #39465b; } .symbol-card.category-halogen { border-top-color: #745bb5; } .symbol-card.category-noble { border-top-color: #3577cc; } .symbol-card.category-lanthanide { border-top-color: #b76745; } .symbol-card.category-actinide { border-top-color: #8c654b; }
.symbol-card small, .single-element small, .molecule-sets small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; }
.detail { align-self: start; padding: 16px; border-radius: 14px; background: #eaf0ff; }
.detail:empty { display: none; }
.detail-body { display: grid; grid-template-columns: minmax(200px, .85fr) minmax(0, 1.2fr) minmax(200px, 1fr); gap: 18px; align-items: start; }
.detail-col { display: grid; gap: 12px; align-content: start; }
.detail-heading { display: flex; align-items: center; justify-content: flex-start; gap: 16px; }
.detail-heading b { display: block; font-size: 22px; }
.detail-heading small { display: block; margin-top: 3px; color: #56627a; }
.big-symbol { font-size: 58px; font-weight: 800; text-align: center; }
dl { margin: 0; }
dl div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #cfd8e9; }
dt { color: #56627a; }
dd { margin: 0; font-weight: 650; }
.overview { margin: 0; line-height: 1.65; }
.use-example { padding: 11px; border-radius: 10px; background: rgba(255,255,255,.68); }
.use-example p { margin: 5px 0 0; line-height: 1.55; }
.element-image { display: grid; min-height: 150px; margin: 0; place-items: center; overflow: hidden; border-radius: 10px; background: #fff; }
.element-image img { display: block; width: 100%; height: 150px; object-fit: contain; }
.element-image figcaption { width: 100%; padding: 7px 9px; color: #56627a; font-size: 10px; line-height: 1.4; text-align: center; }
.element-image a { color: #3157b7; }
.image-loading { color: #56627a; font-size: 12px; }
.image-fallback { display: grid; width: 110px; height: 110px; place-items: center; border-radius: 16px; color: #fff; background: #3157b7; font-size: 42px; font-weight: 800; }
.one-atom { display: flex; min-height: 60px; align-items: center; justify-content: space-between; }
.detail .primary { width: 100%; }
.atom-tray { display: grid; grid-template-columns: 1fr minmax(180px, 2fr) auto auto auto; gap: 10px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid #d3dbe7; }
.atoms { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.atom { display: inline-grid; width: 45px; height: 45px; place-items: center; border-radius: 50%; color: #fff; background: #567dc8; font-weight: 750; }
.atom-red { background: #dc5b52; } .atom-charcoal { background: #39465b; } .atom-violet { background: #745bb5; } .atom-gold { color: #3b3218; background: #e1bb55; } .atom-green { background: #3d9b69; } .atom-silver { color: #293346; background: #c5cedb; } .atom-orange { background: #d17b3d; } .atom-brown { background: #8c654b; } .atom-copper { background: #b76745; } .atom-slate { background: #64748b; }
.formula-output, .build-output { min-width: 92px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 30px; font-weight: 750; text-align: center; }
.quiz, .case-study, .formula-reader, .build, .fix, .reaction { display: grid; gap: 16px; }
.level { margin: 0; color: #3157b7; font-weight: 700; }
.choices button { flex: 1 1 120px; min-height: 64px; font-size: 20px; }
.selection { min-height: 38px; font-size: 26px; text-align: center; }
.result { padding: 14px; border-left: 5px solid #8090aa; border-radius: 8px; background: #edf1f8; }
.result.correct { border-color: #138a62; background: #e6f7ef; }
.result.incorrect { border-color: #c64141; background: #fff0f0; }
.case-choice { justify-content: center; }
.case-choice button { min-width: 100px; font-size: 28px; }
#case-visual { text-align: center; }
.case-formula { margin: 16px 0; font-family: ui-monospace, monospace; font-size: 40px; font-weight: 750; }
.atoms.large { justify-content: center; }
.atoms.large .atom { width: 64px; height: 64px; font-size: 21px; }
.single-element { display: grid; width: 112px; height: 112px; margin: 10px auto; place-content: center; border-radius: 16px; color: #fff; background: #3157b7; font-size: 42px; font-weight: 750; }
.formula-parts { display: flex; justify-content: center; gap: 7px; }
.formula-parts button { min-width: 82px; min-height: 90px; font-size: 42px; }
.formula-parts span { font-size: 23px; vertical-align: sub; }
.arrows { text-align: center; color: #56627a; }
.molecule-sets { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.molecule-sets > div { text-align: center; }
.total-counts, .count-compare { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.total-counts span, .count-compare div { min-width: 130px; padding: 13px; border-radius: 10px; background: #eaf0ff; text-align: center; }
.build-output { width: 100%; min-height: 64px; padding: 12px; border-bottom: 3px solid #3157b7; }
.token-bank { justify-content: center; }
.token-bank button { min-width: 68px; font-size: 26px; }
.build-actions { justify-content: center; }
.fix-arrow { color: #56627a; text-align: center; }
.fix-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fix-choices button { min-height: 76px; font-size: 28px; }
.fix-choices button.answer { border-width: 3px; }
.reaction-equation { display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: 12px; font-size: 28px; font-weight: 750; }
.reaction-equation label { display: grid; width: 155px; text-align: center; }
.reaction-equation input { width: 100%; accent-color: #3157b7; }
.count-compare div { display: grid; gap: 7px; min-width: 220px; }
@media (max-width: 1024px) { .detail-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .detail-col:first-child { grid-column: 1 / -1; } .symbol-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 760px) { .detail-body { grid-template-columns: 1fr; } .detail-col:first-child { grid-column: auto; } }
@media (max-width: 680px) { .lab { padding: 17px 12px; } .tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs button { flex: 0 0 auto; white-space: nowrap; } .encyclopedia-tools { grid-template-columns: 1fr 1fr; } .encyclopedia-tools label:first-child { grid-column: 1 / -1; } .symbol-grid { max-height: min(64vh, 520px); grid-template-columns: repeat(5, 1fr); } .symbol-card { min-height: 70px; padding: 6px; font-size: 22px; } .atom-tray { grid-template-columns: 1fr 1fr; } .atom-tray > div:first-child, .atom-tray .atoms { grid-column: 1 / -1; } .formula-output { justify-self: start; } .formula-parts button { min-width: 70px; } .fix-choices { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .symbol-grid { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-color-scheme: dark) { :root { color: #edf2ff; background: #101522; } header > p:last-child, .muted, .atom-tray p, dt, .arrows, .encyclopedia-tools label, .detail-heading small, .element-image figcaption, .image-loading, .symbol-card .atomic-number { color: #b4bfd4; } button, .encyclopedia-tools input[type="search"], .encyclopedia-tools select { color: #edf2ff; background: #1a2232; border-color: #46536b; } .detail, .total-counts span, .count-compare div { background: #17213a; } .use-example, .element-image { background: #1a2232; } dl div, .atom-tray { border-color: #46536b; } .result { background: #252e40; } .result.correct { background: #12392f; } .result.incorrect { background: #431f25; } }