@charset "UTF-8";
.breadcrumb{display:flex;gap:12px;align-items:center;font-size:12px;color:#758078;padding:25px 0}.breadcrumb a:hover{color:var(--green);text-decoration:underline}.directory-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0 40px}.directory-head h1{font-size:38px;letter-spacing:-1px;margin:0 0 20px}.directory-head p:not(.eyebrow){color:var(--muted);font-size:14px}.directory-count{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}.directory-count strong{font:58px Georgia,serif;color:#397363}.directory-count span{font-size:11px;color:var(--muted)}.periodic-section{border:1px solid var(--line);background:white;border-radius:18px;padding:28px 23px 20px}.table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:20px}.table-toolbar h2{font-size:22px}.table-toolbar p{font-size:12px;color:var(--muted);margin:7px 0 0}.search-wrap{position:relative}.search-wrap input{font:inherit;font-size:13px;border:1px solid #d8e3da;border-radius:9px;padding:12px 36px 12px 14px;width:270px;background:#f8faf6;color:var(--ink)}.search-wrap input:focus{outline:2px solid var(--green);outline-offset:2px}.search-wrap button{position:absolute;right:7px;top:4px;background:none;border:none;font-size:24px}.filters{display:flex;flex-wrap:wrap;gap:7px}.filter{border:1px solid transparent;border-radius:6px;padding:7px 10px;background:var(--tile,#f1f3ed);color:var(--ink);font-size:10px;display:flex;align-items:center;gap:5px}.filter.selected{outline:2px solid var(--green);outline-offset:1px}.table-status{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted);margin:18px 0 8px}.table-status label{display:flex;align-items:center;white-space:nowrap;gap:5px}.table-status input{accent-color:var(--green)}.mobile-tip{display:none}.table-scroll{overflow-x:auto;padding:8px 3px 18px;scrollbar-color:#a8c1b2 #f2f5ef}.periodic-table{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:20px repeat(7,76px) 15px repeat(2,76px);gap:5px;min-width:960px}.group-number{text-align:center;font-size:10px;color:#8a948a;align-self:center}.element-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;background:var(--tile,#ecf1e8);border:1px solid #24443813;gap:1px;transition:transform .15s,box-shadow .15s,opacity .15s;min-width:0;color:#214739}.element-cell:hover,.element-cell:focus-visible{z-index:2;transform:translateY(-3px);box-shadow:0 6px 12px #1b49342b;outline:2px solid #3a8067}.atomic-number{position:absolute;top:5px;left:6px;font-size:9px;color:#687867}.element-cell strong{font-size:22px;line-height:1.1;font-weight:650;margin-top:10px}.element-name{font-size:11px;font-family:"Microsoft YaHei","SimSun-ExtB","Microsoft YaHei UI",sans-serif}.portrait-dot{width:5px;height:5px;position:absolute;right:6px;top:7px;border-radius:50%;background:#276f50}.cat-alkali{--tile:#f4d7c2}.cat-alkaline{--tile:#f6e8ba}.cat-transition{--tile:#f3dce0}.cat-metal{--tile:#dce5f5}.cat-metalloid{--tile:#dbebca}.cat-nonmetal{--tile:#cfebe0}.cat-halogen{--tile:#e8e8be}.cat-noble{--tile:#dde3f8}.cat-lanthanide{--tile:#e4dff3}.cat-actinide{--tile:#efdded}.cat-unknown{--tile:#e9ece9}.table-note{grid-column:4 / 13;grid-row:2 / 4;align-self:center;justify-self:center;display:flex;flex-direction:column;gap:10px}.table-note .eyebrow{font-size:9px;margin:0}.table-note strong{font-size:20px}.table-note>span:last-child{font-size:11px;color:#758374;line-height:1.9}.series-link{background:var(--tile);border:1px dashed #9bada0;border-radius:5px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:9px;line-height:1.5}.series-link b{font-size:10px}.series-label{font-size:11px;color:#7c8278;align-self:center;text-align:right;padding-right:12px}.table-footnote{display:flex;gap:20px;justify-content:space-between;color:#7c8679;border-top:1px solid var(--line);padding-top:15px;font-size:10px;line-height:1.8}.table-footnote a{white-space:nowrap;text-decoration:underline}.dimmed{opacity:.18}.dimmed:hover,.dimmed:focus-visible{opacity:1}#search-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(67px,1fr));gap:8px;margin:15px 0;padding:16px;background:#f6f8f3;border-radius:8px}#search-results[hidden]{display:none}#search-results .element-cell{height:80px}#search-results p{grid-column:1 / -1;font-size:13px;line-height:1.8}.reading-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;padding:36px 0 48px}.reading-guide>div{padding:0 15px 0 0}.reading-guide span{font:22px Georgia,serif;color:#9eae97}.reading-guide h3{font-size:16px;margin:12px 0}.reading-guide p{font-size:12px;color:var(--muted);line-height:1.9}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.element-detail{display:grid;grid-template-columns:.92fr 1.08fr;gap:55px;padding:20px 0 40px;align-items:start}.character-panel{background:white;border:1px solid #dde7db;border-radius:18px;overflow:hidden}.character-heading{display:flex;justify-content:space-between;gap:10px;padding:18px 22px;background:var(--tile);font-size:11px}.variants{padding:15px 20px;display:flex;gap:7px;align-items:center;min-height:62px}.variant{background:#f3f5ef;border:1px solid transparent;padding:8px 14px;border-radius:25px;font-size:12px}.variant.chosen{background:var(--green);color:white}.variant-note{font-size:10px;color:#92968e;padding-left:5px}.character-stage{padding:0 20px 10px}.character-stage img{width:100%;height:480px;object-fit:contain}.portrait-caption{text-align:center;color:#8a9589;font-size:11px;margin:15px 0}.element-copy{padding-top:17px}.element-copy h1{font-size:43px;margin:0 0 22px;letter-spacing:-1px;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}.element-copy h1>span{color:var(--green)}.element-copy h1 small{font:36px Georgia,serif;color:#a0b598;margin-left:9px}.element-intro{font-size:14px;color:#657364;line-height:2;margin:0 0 25px}.identity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:30px}.identity-grid>div{background:var(--tile);border-radius:8px;padding:16px 8px;text-align:center;display:flex;flex-direction:column;gap:10px}.identity-grid small{font-size:10px;color:#657566}.identity-grid strong{font:28px Georgia,serif}.identity-grid .group-value{font:600 16px "Microsoft YaHei",sans-serif;line-height:32px}.knowledge .eyebrow{font-size:10px}.knowledge h2{font-size:20px;margin:12px 0}.knowledge p,.more-science p{font-size:13px;line-height:2;color:#60705f}.more-science{margin-top:25px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}.more-science summary{font-size:13px;cursor:pointer}.source-note{font-size:10px;color:#879180;line-height:1.9;margin:20px 0}.source-note a{text-decoration:underline}.missing-portrait{height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f4f7ef;border-radius:12px;color:#879981}.missing-portrait>strong{font:110px Georgia,serif;color:#adc0a1}.missing-portrait>span{font-size:14px;margin:20px 0}.missing-portrait h3{font-size:15px}.missing-portrait p{font-size:12px}.element-pager{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:24px 0 45px;font-size:14px;gap:10px}.element-pager small{color:#899c80;margin:0 5px}.element-pager>span{font-size:11px;color:#929b8d}.element-pager .back-table{border:1px solid #b7c5ac;padding:12px 20px;border-radius:8px;font-size:12px}.element-pager a:hover{color:var(--green);background:#edf3e7}.element-cell:target{outline:3px solid #286846;outline-offset:2px}@media(max-width:1100px){.directory-head h1{font-size:30px}.element-detail{gap:28px}.element-copy h1{font-size:34px}.character-stage img,.missing-portrait{height:410px}.identity-grid>div{padding:12px 4px}}@media(max-width:760px){.breadcrumb{padding:20px 0 12px;font-size:11px;gap:9px}.directory-head{padding:20px 0 25px;display:block}.directory-head h1{font-size:29px;line-height:1.55;margin-bottom:17px}.directory-head h1 .accent{display:block;width:max-content}.directory-head p:not(.eyebrow){font-size:12px;line-height:1.9}.directory-count{display:none}.directory-head .eyebrow{font-size:8px;letter-spacing:1.6px}.periodic-section{padding:20px 12px 15px;border-radius:12px}.table-toolbar{display:block}.table-toolbar h2{font-size:20px}.table-toolbar p{font-size:10px}.search-wrap{margin-top:18px}.search-wrap input{width:100%;font-size:14px}.filters{gap:7px}.filter{font-size:10px;padding:7px 8px}.table-status{display:block;font-size:10px;line-height:1.8}.mobile-tip{display:block;font-size:10px;color:#61835d;margin:15px 0 0}.table-footnote{display:block;font-size:9px}.table-footnote a{display:block;margin-top:8px}.reading-guide{grid-template-columns:1fr;gap:10px;padding:25px 0 30px}.reading-guide>div{border-bottom:1px solid var(--line);padding:10px 0}.reading-guide h3{display:inline;margin-left:14px}.reading-guide p{font-size:11px;margin-left:37px}.element-detail{grid-template-columns:1fr;gap:12px;padding-top:15px}.character-stage img,.missing-portrait{height:360px}.character-heading{padding:15px 18px;font-size:10px}.variants{padding:12px 15px}.element-copy h1{font-size:34px}.element-copy .eyebrow{font-size:9px}.element-intro{font-size:13px}.identity-grid{gap:7px}.identity-grid strong{font-size:24px}.identity-grid .group-value{font-size:13px}.knowledge h2{font-size:19px}.element-pager{display:flex!important;flex-wrap:wrap;font-size:12px;padding-bottom:30px}.element-pager .back-table{font-size:10px;padding:10px}.source-note{font-size:9px}.element-pager small{margin:0}.more-science summary{font-size:12px}}

.element-detail{grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);gap:28px;padding:6px 0 14px}.character-stage img,.missing-portrait{height:320px}.character-heading{padding:12px 16px}.variants{padding:10px 14px}.character-stage{padding:0 14px 8px}.element-copy{padding-top:3px}.element-copy h1{font-size:34px;margin:0 0 12px}.element-copy .eyebrow{margin-bottom:8px}.element-intro{margin:0 0 14px;line-height:1.8}.identity-grid{margin-bottom:16px}.identity-grid>div{padding:10px 6px;gap:5px}.knowledge h2{margin:8px 0;font-size:19px}.knowledge p{line-height:1.8;margin:8px 0}.source-note{margin:10px 0}.more-science{margin:12px 0}.song-jump{margin:0 0 12px;padding:6px 12px}.element-study{margin-top:22px}.study-heading h2{margin:6px 0}.study-heading p{margin:6px 0}.study-nav{margin:14px 0 18px}.textbook-atom{margin:12px 0 16px;padding:12px}.textbook-atom figcaption{margin-top:10px}@media(max-width:760px){.element-detail{grid-template-columns:1fr;gap:16px;padding-top:4px}.character-stage img,.missing-portrait{height:280px}.element-copy h1{font-size:30px}}

.variants{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.character-neighbor{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px;border:1px solid #cad9ce;border-radius:50%;color:#216e5e;background:#f6f9f1;font-size:20px;text-decoration:none}.character-neighbor:hover{background:#dfeee2}.character-neighbor:focus-visible{outline:2px solid #216e5e;outline-offset:3px}.character-next{margin-left:auto}.character-neighbor.disabled{opacity:.3;cursor:default}.character-neighbor.disabled:hover{background:#f6f9f1}