/* Version 3: interactive chemistry dashboard, matching the original third concept. */
.grade-portal{height:100svh;min-height:720px;padding:0 3.2vw 24px;background:radial-gradient(circle at 54% 40%,#10252c 0,#071317 42%,#03090c 78%)}.portal-nav{height:82px}.portal-content{display:grid;grid-template-columns:minmax(390px,.8fr) minmax(520px,1.2fr);grid-template-rows:1fr auto;grid-template-areas:'heading dashboard' 'deck deck';gap:24px 5vw;align-items:center;max-width:1500px;padding:30px 0 12px}.portal-heading{grid-area:heading}.portal-heading h1{font-size:clamp(62px,6vw,96px);margin:25px 0 18px}.portal-heading h1 em{background:linear-gradient(90deg,#39f7e2,#65a8ff,#ff4fce);-webkit-background-clip:text;background-clip:text}.portal-heading>p:last-child{max-width:600px}.periodic-dashboard{grid-area:dashboard;border:1px solid #4cf8df35;background:#061217d4;box-shadow:0 30px 80px #0009,0 0 55px #39f7e20d;backdrop-filter:blur(16px);clip-path:polygon(0 0,95% 0,100% 8%,100% 100%,5% 100%,0 92%)}.dashboard-bar{height:50px;padding:0 19px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12;color:#617d87;font:600 8px 'DM Mono',monospace;letter-spacing:.14em}.dashboard-bar span{display:flex;align-items:center;gap:8px}.dashboard-bar i{width:7px;height:7px;border-radius:50%;background:#39f7e2;box-shadow:0 0 10px #39f7e2}.dashboard-bar b{color:#39f7e2;font-weight:500}.periodic-console{display:grid;grid-template-columns:1fr 190px;min-height:335px}.portal-periodic{padding:28px;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,76px);gap:7px;border-right:1px solid #ffffff10;background-image:linear-gradient(#39f7e207 1px,transparent 1px),linear-gradient(90deg,#39f7e207 1px,transparent 1px);background-size:28px 28px}.pd-element{position:relative;grid-column:var(--col);grid-row:var(--row);border:1px solid #35e9d83b;background:#0b2428;color:#7feadd;font:600 18px 'DM Mono',monospace;transition:.18s}.pd-element small{position:absolute;left:6px;top:5px;color:#52747a;font-size:7px}.pd-element:hover,.pd-element.active{border-color:#39f7e2;background:#10383c;color:white;box-shadow:inset 0 0 22px #39f7e218,0 0 16px #39f7e217;transform:translateY(-2px)}.pd-element.metal{border-color:#8065ff42;background:#1a1632;color:#ae9aff}.pd-element.halogen{border-color:#ff4fce42;background:#2b1128;color:#ff8cdf}.pd-element.noble{border-color:#4f8fff42;background:#101e39;color:#7fb0ff}.portal-element-detail{position:relative;padding:24px 20px;overflow:hidden}.portal-element-detail>span{color:#5f7983;font:600 7px 'DM Mono',monospace;letter-spacing:.15em}.portal-element-detail>div{position:relative;margin:43px 0 5px}.portal-element-detail>div small{position:absolute;left:5px;top:-7px;color:#7b8e99;font:500 10px 'DM Mono',monospace}.portal-element-detail>div strong{display:block;color:#ecffff;font:600 88px/1 'DM Mono',monospace;text-align:center;text-shadow:0 0 25px #39f7e250}.portal-element-detail h3{text-align:center;margin:5px 0 26px;font-size:15px}.portal-element-detail p{display:flex;justify-content:space-between;margin:0;padding-top:13px;border-top:1px solid #ffffff13;color:#617883;font-size:9px}.portal-element-detail p b{color:#39f7e2;font-family:'DM Mono',monospace}.portal-element-detail>i{position:absolute;width:105px;height:105px;border:1px solid #39f7e21b;border-radius:50%;right:-35px;bottom:-31px}.portal-element-detail>i:last-child{width:70px;height:70px;right:-18px;bottom:-14px;border-color:#8b5dff27}.grade-deck{grid-area:deck;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grade-panel{min-height:150px;padding:18px 23px}.grade-panel>strong{font-size:42px;margin-right:17px}.grade-panel h2{font-size:17px;margin-top:21px}.grade-panel p{font-size:10px}.panel-action{bottom:12px;left:23px;right:23px;padding-top:7px}.panel-level{left:84px}.portal-footer{height:30px}
@media(max-width:1050px){.grade-portal{height:auto;min-height:100svh}.portal-content{grid-template-columns:1fr;grid-template-areas:'heading' 'dashboard' 'deck';padding:28px 0}.portal-heading{text-align:left}.portal-heading h1{font-size:64px;margin:17px 0 10px}.portal-heading>p:last-child{font-size:12px;line-height:1.6}.periodic-dashboard{max-width:780px;width:100%;margin:auto}.grade-deck{margin-top:4px}.portal-footer{display:none}}
@media(max-width:700px){.grade-portal{padding:0 18px 18px}.portal-nav{height:68px}.portal-content{padding:23px 0}.portal-heading h1{font-size:46px}.portal-heading>p:last-child{font-size:10px}.periodic-console{grid-template-columns:1fr 112px;min-height:250px}.portal-periodic{padding:13px;grid-template-rows:repeat(3,51px);gap:4px}.pd-element{font-size:12px}.portal-element-detail{padding:14px 10px}.portal-element-detail>div{margin:35px 0 2px}.portal-element-detail>div strong{font-size:56px}.portal-element-detail h3{margin-bottom:20px;font-size:12px}.grade-deck{grid-template-columns:1fr;gap:7px}.grade-panel{min-height:114px}.grade-panel>strong{font-size:35px;margin-top:25px}.grade-panel h2{margin-top:27px}.grade-panel p{display:none}.panel-level{top:14px}.panel-index{top:14px}.panel-action{bottom:8px}.portal-code{display:none}}

/* Keep the complete grade selector available on short screens. */
.grade-portal{height:100svh;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-color:#39f7e244 transparent}.portal-content{flex:0 0 auto;min-height:calc(100svh - 136px)}
.grade-panel{animation:gradePanelIn .65s cubic-bezier(.2,.8,.2,1) both}.grade-panel:nth-child(2){animation-delay:.09s}.grade-panel:nth-child(3){animation-delay:.18s}.grade-panel:hover{transform:translateY(-5px)}

/* Live, scientifically counted shell model. */
.portal-element-detail{padding:18px 15px 14px;display:flex;flex-direction:column;min-width:0}.portal-element-detail>span{display:block}.portal-element-detail .pd-atom-stage{position:relative;width:160px;height:160px;margin:5px auto 0}.pd-atom-stage canvas{position:absolute;inset:0;width:100%;height:100%}.portal-element-detail .pd-nucleus-label{position:absolute;inset:0;margin:0;display:grid;place-items:center;pointer-events:none}.portal-element-detail .pd-nucleus-label small{position:absolute;left:62px;top:62px;color:#8cb7b6;font:600 7px 'DM Mono',monospace}.portal-element-detail .pd-nucleus-label strong{display:block;color:#f2ffff;font:700 25px/1 'DM Mono',monospace;text-align:center;text-shadow:0 0 13px #39f7e2}.portal-element-detail h3{margin:-3px 0 8px;font-size:13px}.portal-element-detail p{padding-top:8px}.portal-element-detail>button{align-self:stretch;margin-top:8px;padding:7px 5px;border:1px solid #39f7e22e;background:#39f7e207;color:#67958f;font:600 7px 'DM Mono',monospace;letter-spacing:.12em;transition:.2s}.portal-element-detail>button:hover{border-color:#39f7e2;color:#39f7e2;background:#39f7e210}.portal-element-detail>i{display:none}
@keyframes gradePanelIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media(max-height:850px) and (min-width:1051px){.grade-portal{padding-bottom:12px}.portal-nav{height:62px}.portal-content{min-height:auto;padding:14px 0 8px;gap:12px 4vw}.portal-heading h1{font-size:clamp(48px,5vw,70px);margin:13px 0 10px}.portal-heading>p:last-child{font-size:11px;line-height:1.55}.periodic-console{min-height:292px}.portal-periodic{padding:18px;grid-template-rows:repeat(3,66px)}.grade-panel{min-height:130px}.grade-panel>strong{font-size:36px}.grade-panel h2{margin-top:17px}.grade-panel p{font-size:9px}.portal-footer{display:none}.portal-element-detail .pd-atom-stage{width:132px;height:132px}.portal-element-detail .pd-nucleus-label small{left:50px;top:50px}}
@media(max-width:1050px){.portal-content{min-height:auto}.grade-portal{height:100svh;min-height:0;overscroll-behavior:contain}}
@media(max-width:700px){.portal-element-detail .pd-atom-stage{width:100px;height:100px;margin-top:3px}.portal-element-detail .pd-nucleus-label small{left:36px;top:36px;font-size:6px}.portal-element-detail .pd-nucleus-label strong{font-size:18px}.portal-element-detail h3{margin:0 0 6px}.portal-element-detail>button{font-size:6px;padding:6px 2px}.grade-panel:hover{transform:none}}

.portal-heading h1{white-space:nowrap;letter-spacing:-.045em;font-family:"Helvetica Neue",Arial,"PingFang HK",sans-serif;font-weight:650}.portal-heading h1 .chem-lead{color:transparent;background:linear-gradient(180deg,#fff 12%,#edf3f5 58%,#aebdc4 100%);-webkit-background-clip:text;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 18px #c9faff14)}.portal-heading h1 .try-accent{position:relative;display:inline-block;font-size:1.09em;font-weight:720;font-style:normal;color:transparent;background:linear-gradient(180deg,#ff5579 4%,#ff245c 55%,#dd174e 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 18px #ff285f99)}.portal-heading h1 .try-accent::after{content:"";position:absolute;left:6%;right:0;bottom:-7px;height:4px;background:#ff285f;box-shadow:0 0 13px #ff285f,0 0 24px #ff285f66}.portal-heading h1 em{display:inline-block;margin-top:31px;font-family:"PingFang HK","Microsoft JhengHei","Noto Sans TC",sans-serif;font-size:clamp(24px,.41em,34px);font-weight:400;font-style:normal;line-height:1.35;letter-spacing:.13em;color:#b6c9d3;background:none;-webkit-background-clip:border-box;background-clip:border-box;filter:drop-shadow(0 0 8px #66cfff12)}

/* Selected logo direction C: cinematic split wordmark. */
.portal-heading h1.slogan-c{display:grid;grid-template-columns:auto minmax(190px,1fr);align-items:end;gap:clamp(20px,2.2vw,34px);margin:28px 0 24px;white-space:normal;letter-spacing:0}.slogan-c .slogan-west{display:flex;flex-direction:column;align-items:flex-start}.portal-heading .slogan-c .chem-lead{font-size:clamp(21px,2.05vw,32px);font-weight:500;line-height:1;letter-spacing:.2em;color:#9cabb0;background:none;-webkit-background-clip:border-box;background-clip:border-box;filter:none}.portal-heading .slogan-c .try-accent{margin-top:11px;font-size:clamp(76px,6.3vw,112px);font-weight:800;line-height:.82;letter-spacing:-.07em}.portal-heading .slogan-c .try-accent::after{left:2%;right:-2%;bottom:-10px;height:4px}.portal-heading .slogan-c .try-y{display:inline-block;font-size:.91em;transform:translate(.03em,-.17em);transform-origin:left bottom}.portal-heading .slogan-c em{align-self:stretch;display:flex;align-items:center;margin:0;padding:8px 0 7px clamp(20px,2vw,31px);border-left:1px solid #39f7e277;font-size:clamp(19px,1.45vw,23px);font-weight:450;line-height:1.35;letter-spacing:.025em;color:#d3dddf;white-space:nowrap}
@media(max-width:700px){.portal-heading h1.slogan-c{grid-template-columns:1fr;gap:27px;margin:24px 0 20px}.portal-heading .slogan-c .chem-lead{font-size:19px}.portal-heading .slogan-c .try-accent{font-size:72px}.portal-heading .slogan-c em{padding:16px 0 0;border-left:0;border-top:1px solid #39f7e255;font-size:18px;letter-spacing:0}}

/* Preserve the final Y glyph when negative tracking meets background-clipped text. */
.portal-heading .slogan-c .try-accent{padding-right:.13em;overflow:visible}.portal-heading .slogan-c .try-accent::after{right:5%}

/* Centre the smaller line over TRY so the wordmark reads as one compact logo. */
.portal-heading .slogan-c .slogan-west{width:max-content;align-items:center}
.portal-heading .slogan-c .chem-lead{text-align:center;transform:translateX(.05em)}

/* Topic counts vary by Aristo book range, so cards reflow without empty columns. */
.topic-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;border-color:#1d3938;background:#1d3938}.topic-card,.topic-card:last-child{border:0;background:#061011}.topic-card:hover{background:#091718}

/* Reserve a dedicated text row above the grade-card action bar. */
.grade-panel{min-height:172px;padding-bottom:52px}.grade-panel h2{margin-bottom:8px}.grade-panel p{max-width:calc(100% - 12px);margin:0;white-space:normal;line-height:1.45}.grade-panel .panel-action{bottom:13px;padding-top:9px;background:linear-gradient(180deg,#090d1700,#090d17 38%)}
@media(max-height:850px) and (min-width:1051px){.grade-panel{min-height:158px;padding-bottom:48px}.grade-panel h2{margin-top:16px;margin-bottom:6px}.grade-panel p{font-size:9px;line-height:1.35}}
@media(max-width:700px){.grade-panel{min-height:118px;padding-bottom:40px}.grade-panel p{display:none}}

/* A shared card grid keeps every heading, book label and topic on the same lines. */
.grade-panel{display:grid;grid-template-columns:94px minmax(0,1fr);grid-template-rows:57px 34px minmax(82px,1fr);column-gap:12px;min-height:260px;padding:23px 28px 54px}
.grade-panel>strong{position:relative;grid-column:1;grid-row:1;align-self:center;float:none;margin:0;font-size:50px;line-height:1}
.grade-panel .panel-level{position:static;grid-column:2;grid-row:1;align-self:center;justify-self:start;margin:0;font-size:9px;white-space:nowrap}
.grade-panel h2{grid-column:1/-1;grid-row:2;align-self:start;margin:0;font-size:17px;line-height:1.2}
.grade-panel p.panel-topics{grid-column:1/-1;grid-row:3;align-self:start;display:grid;grid-template-columns:1fr;gap:3px;max-width:none;margin:0;color:#9aa9bc;font-size:9px;line-height:1.35;white-space:normal}
.panel-topics span{display:grid;grid-template-columns:30px minmax(0,1fr);gap:7px;align-items:start;min-width:0}
.panel-topics b{color:var(--accent);font:500 9px/1.35 'DM Mono',monospace;text-shadow:0 0 7px color-mix(in srgb,var(--accent) 55%,transparent)}
.panel-topics i{min-width:0;color:#9aa9bc;font-style:normal}
@media(max-height:850px) and (min-width:1051px){.grade-panel{min-height:246px;padding:20px 24px 50px;grid-template-rows:52px 31px minmax(78px,1fr)}.grade-panel>strong{font-size:46px}.grade-panel p.panel-topics,.panel-topics b{font-size:8px}}
@media(max-width:1050px){.grade-panel{min-height:260px}}
@media(max-width:700px){.grade-panel,.grade-panel.magenta{grid-template-columns:76px minmax(0,1fr);grid-template-rows:48px 29px auto;min-height:240px;padding:18px 20px 47px}.grade-panel>strong{font-size:39px;margin:0}.grade-panel .panel-level{font-size:8px}.grade-panel h2{font-size:15px;margin:0}.grade-panel p.panel-topics{display:grid;font-size:9px;gap:3px}.panel-topics b{font-size:8px}}

/* Square wordmark: both lines share one optical centre and a fixed 1:1 field. */
.portal-heading .slogan-c .slogan-west{width:clamp(224px,17.5vw,278px);aspect-ratio:1;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(15px,1.15vw,19px);padding:clamp(18px,1.5vw,24px) 0}
.portal-heading .slogan-c .chem-lead{box-sizing:border-box;width:100%;padding-left:.24em;font-size:clamp(22px,1.75vw,28px);font-weight:520;line-height:1;letter-spacing:.24em;text-align:center;transform:none}
.portal-heading .slogan-c .try-accent{box-sizing:border-box;width:100%;margin:0;padding-right:.08em;font-size:clamp(82px,6vw,102px);line-height:.82;letter-spacing:-.055em;text-align:center}
.portal-heading .slogan-c .try-accent::after{left:3%;right:3%;bottom:-13px}
@media(max-width:700px){.portal-heading .slogan-c .slogan-west{width:230px}.portal-heading .slogan-c .chem-lead{font-size:22px}.portal-heading .slogan-c .try-accent{font-size:84px}}

/* Scientifically aligned main-group table for atomic numbers 1–18. */
.portal-periodic{grid-template-columns:repeat(8,minmax(0,1fr));padding:25px 20px;gap:6px}
.pd-element{min-width:0;font-size:15px}
.pd-element.metalloid{border-color:#f0b84c4d;background:#2a2110;color:#ffd071}
@media(max-height:850px) and (min-width:1051px){.portal-periodic{padding:18px 14px;gap:5px}.pd-element{font-size:14px}}
@media(max-width:700px){.portal-periodic{padding:13px 8px;gap:3px}.pd-element{font-size:11px}.pd-element small{left:3px;top:3px;font-size:6px}}

/* Four-stage learning path: junior secondary foundation through DSE integration. */
.grade-deck{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.grade-panel.azure{--accent:#4fc3ff}
.grade-panel{grid-template-columns:78px minmax(0,1fr);padding-left:22px;padding-right:22px}
.grade-panel>strong{font-size:44px}
.grade-panel .panel-level{font-size:8px}
.panel-topics span{grid-template-columns:29px minmax(0,1fr);gap:5px}
.grade-picker{grid-template-columns:repeat(4,1fr)}
@media(max-width:1250px){.grade-deck{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grade-panel{grid-template-columns:94px minmax(0,1fr);padding-left:28px;padding-right:28px}.grade-panel>strong{font-size:50px}}
@media(max-width:700px){.grade-deck{grid-template-columns:1fr}.grade-panel{grid-template-columns:76px minmax(0,1fr);padding-left:20px;padding-right:20px}.grade-panel>strong{font-size:39px}.grade-picker{grid-template-columns:repeat(2,1fr)}}

.parent-platform-link{justify-self:center;padding:8px 13px;border:1px solid #39f7e238;background:#39f7e208;color:#8ab1b4;font:600 8px 'DM Mono',monospace;letter-spacing:.12em;text-decoration:none;transition:.2s}.parent-platform-link:hover{border-color:#39f7e2;color:#39f7e2;box-shadow:0 0 18px #39f7e21f}@media(max-width:700px){.parent-platform-link{font-size:0;padding:8px}.parent-platform-link::after{content:'← SCIENCE';font-size:7px}}