/* GchemIB art direction — editorial science, not a generic dashboard */
:root{
  --bg:#f3f0e8;--panel:#fbfaf6;--panel2:#e9e5da;--line:#d8d2c5;
  --text:#202b25;--muted:#6b746b;--teal:#245d4b;--blue:#426b63;
  --purple:#8a6252;--amber:#c66b43;--radius:2px;--shadow:none;
  --paper:#fbfaf6;--ink:#202b25;--forest:#245d4b;--clay:#c66b43;
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif;font-size:14px;line-height:1.65}
button,input,select,textarea{font-family:"DM Sans",sans-serif}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.app-shell{background:var(--bg)}
.sidebar{width:250px;background:#e9e5da;border:0;border-right:1px solid #d2ccbf;padding:26px 19px 18px;color:var(--ink)}
.sidebar-topline{display:flex;align-items:center;gap:7px;color:#77786c;font-size:8px;letter-spacing:1.3px;font-weight:800;padding:0 8px 21px}
.sidebar-live-dot{width:6px;height:6px;border-radius:50%;background:var(--forest);display:inline-block}
.sidebar-version{margin-left:auto;border:1px solid #c9c2b5;padding:2px 5px;color:var(--forest)}
.brand{padding:0 7px 27px;gap:12px}
.brand-mark{width:37px;height:37px;border-radius:0;background:var(--forest);color:#f3f0e8;box-shadow:none}
.brand-copy strong{font-family:"Manrope",sans-serif;font-size:22px;letter-spacing:-1.2px;color:var(--ink)}
.brand-copy strong span{color:var(--forest)}
.brand-copy small{font-size:8px;letter-spacing:1.7px;color:#73786d}
.brand-arrow{color:var(--forest);margin-left:auto;font-size:17px}
.sidebar-course-chip{display:flex;align-items:center;gap:10px;margin:0 0 25px;padding:12px 10px;border-block:1px solid #d3cdbf;background:transparent}
.course-chip-symbol{font-size:20px;color:var(--forest)}
.sidebar-course-chip b{font-size:9px;letter-spacing:1px;color:var(--ink)}
.sidebar-course-chip small{display:block;font-size:8px;letter-spacing:.45px;color:#77796f;margin-top:3px}
.nav-group-label{padding:0 10px 8px;color:#858477;font-size:9px;letter-spacing:1.7px;font-weight:800}
.nav-group-spaced{margin-top:24px}
.side-nav{gap:3px}
.nav-link{position:relative;gap:11px;padding:10px 10px;border:0;border-radius:0;color:#666f66;font-size:12px;background:transparent}
.nav-link:hover{background:#dedace;color:var(--ink)}
.nav-link.active{background:var(--forest);color:#fff;border:0}
.nav-link.active .nav-icon{color:#f2c9a9}
.nav-icon{color:#7c8176;font-size:16px}
.nav-copy{display:grid;gap:2px}
.nav-copy b{font-weight:700}
.nav-copy small{font-size:9px;color:inherit;opacity:.72;font-weight:400}
.nav-count{margin-left:auto;border-radius:0;background:#d9d4c8;color:#4e6457}
.nav-ai-dot{width:5px;height:5px;background:var(--clay);border-radius:50%;margin-left:auto}
.sidebar-bottom{margin-top:auto}
.sidebar-journey-card{border:1px solid #d1cabc;background:#f0ede5;padding:15px 13px}
.journey-card-head{font-size:8px;letter-spacing:1.25px;font-weight:800;color:#77796e;display:flex;justify-content:space-between}
.journey-spark{color:var(--clay);font-size:15px}
.journey-track{display:flex;align-items:center;margin:16px 0 9px}
.journey-stop{width:23px;height:23px;border:1px solid #b8b4a7;border-radius:50%;display:grid;place-items:center;color:#69756a;font-size:8px;background:#f7f5ef}
.journey-stop-one{background:var(--forest);border-color:var(--forest);color:white}
.journey-line{height:1px;background:#c5c0b4;flex:1}
.journey-labels{display:flex;justify-content:space-between}
.journey-labels span{display:grid;gap:2px}.journey-labels b{font-size:9px;color:var(--ink)}.journey-labels small{font-size:9px;color:#77796e}
.sidebar-journey-link{border:0;border-top:1px solid #d5cfc2;background:transparent;color:var(--forest);font-size:9px;letter-spacing:1px;font-weight:800;width:100%;text-align:left;padding:13px 0 0;margin-top:15px}
.sidebar-journey-link span{float:right;font-size:14px}
.sidebar-foot{border-top:1px solid #d2ccbf;padding:14px 2px 0;color:#77796e;font-size:8px;letter-spacing:.6px}
.sidebar-foot .status-dot{background:var(--forest);box-shadow:none}
.main-area{margin-left:250px;background:var(--bg)}
.topbar{height:66px;padding:0 4.2%;background:rgba(243,240,232,.94);border:0;border-bottom:1px solid #d8d2c5;backdrop-filter:blur(12px)}
.breadcrumbs{font-size:11px;color:#7c8075}.breadcrumbs strong{color:var(--ink)}.crumb-slash{color:#b0a99a}
.top-actions{gap:9px}
.global-search{width:220px;height:35px;border:1px solid #d5d0c4;border-radius:0;background:#f8f6f0;color:#7c8075}
.global-search input{color:var(--ink)}.global-search input::placeholder{color:#929184}
.global-search kbd{border:0;color:#7c8075}
.icon-button,.language-toggle{border:1px solid #d5d0c4;border-radius:0;background:transparent;color:var(--ink)}
.avatar{border-radius:50%;background:var(--forest);border:0;color:#fff}
.content-wrap{max-width:1500px;padding:35px 4.2% 35px}
.page{animation:editorialIn .28s ease}
@keyframes editorialIn{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}
.hero{min-height:440px;grid-template-columns:1.1fr .9fr;border:0;border-radius:0;background:#e7e3d8;overflow:hidden;position:relative}
.hero:before{content:"FIELD NOTES / 01 — IB CHEMISTRY";position:absolute;right:25px;top:20px;font-size:8px;letter-spacing:1.7px;font-weight:800;color:#7d8174;z-index:3}
.hero-copy{padding:65px 10px 42px 6.5%;z-index:2}
.eyebrow{color:var(--forest);font-size:9px;letter-spacing:1.8px}
.eyebrow-dot{background:var(--clay);box-shadow:none}
.hero h1,.page-intro h1{font-family:"Manrope",sans-serif;font-weight:600;letter-spacing:-2.8px}
.hero h1{font-size:clamp(43px,5.5vw,76px);line-height:.99;margin:24px 0 22px;color:var(--ink)}
.hero h1 span{color:var(--forest);font-family:Georgia,serif;font-weight:400;font-style:italic}
.hero-copy>p{font-size:14px;line-height:1.8;max-width:390px;color:#626b60}
.hero-actions{margin-top:27px;gap:0}
.btn{border-radius:0;padding:13px 17px;font-size:11px;letter-spacing:.15px;transition:background .2s,color .2s}
.btn-primary{background:var(--forest);color:#fff;box-shadow:none}
.btn-primary:hover{background:#183f33}
.btn-ghost{background:transparent;border:1px solid #b8b7a9;color:var(--ink)}
.btn-ghost:hover,.btn-secondary:hover{background:#d9d6cb}
.hero-proof{margin-top:30px;color:#77796e;font-size:10px}
.proof-avatars i{border-radius:50%;border:1px solid #e7e3d8;background:#c9d3c5;color:var(--forest)}
.hero-visual{min-height:390px;background:#d6ddd1;display:grid;place-items:center}
.hero-visual:before{inset:0;background:radial-gradient(ellipse at center,#eff0e5 0,#d6ddd1 64%,transparent 65%)}
.molecule{width:min(100%,440px);height:auto;filter:saturate(.72);z-index:1}
.molecule defs filter{display:none}
.molecule g[filter]{filter:none}
.molecule g[filter] circle{stroke:#f3f0e8;stroke-width:2}
.orb{border-color:#6c8c7c55;width:255px;height:255px}
.orb-two,.orb-three{width:330px;height:180px;border-color:#6c8c7c66}
.visual-caption{bottom:22px;right:22px;border:0;border-left:3px solid var(--clay);border-radius:0;background:#f3f0e8;color:var(--ink);box-shadow:none}
.caption-line{display:none}.visual-caption strong{font-size:10px}.visual-caption small{color:#76796e}
.floating-chip{border:1px solid #aeb8a8;border-radius:0;background:#f3f0e8;color:#36493e;box-shadow:none;font-size:9px}
.floating-chip span{color:var(--clay)}
.chip-top{top:57px;right:20px}.chip-bottom{bottom:88px;left:14px}
.section-heading{margin:42px 0 16px;padding-bottom:13px;border-bottom:1px solid #d6d0c4}
.section-kicker{font-size:9px;letter-spacing:1.7px;color:#858477}
.section-heading h2{font-family:"Manrope",sans-serif;font-weight:600;letter-spacing:-.8px;font-size:24px;color:var(--ink)}
.subtle-link{color:var(--forest);font-size:11px}
.feature-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #d7d1c5;border-bottom:1px solid #d7d1c5}
.feature-card{min-height:200px;padding:22px 19px 16px;border:0;border-right:1px solid #d7d1c5;border-radius:0;background:transparent;color:var(--ink);transition:background .18s}
.feature-card:last-child{border-right:0}
.feature-card:hover{background:#e9e5da;border-color:#d7d1c5;transform:none}
.feature-icon{width:auto;height:auto;min-height:32px;background:transparent!important;border-radius:0;place-items:start;color:var(--forest)!important;font-size:22px}
.feature-meta{margin-top:14px;color:#858477;font-size:8px;letter-spacing:1.6px}
.feature-card>strong{font-family:"Manrope",sans-serif;font-weight:650;font-size:17px;letter-spacing:-.35px}
.feature-card p{font-size:11px;color:#6c7469;line-height:1.7}
.card-bottom{border-top:1px solid #d7d1c5;color:#77796e;font-size:9px}
.card-bottom b{color:var(--clay)}
.lower-grid{gap:0;border-bottom:1px solid #d7d1c5}
.panel{padding:23px 25px;border:0;border-right:1px solid #d7d1c5;border-radius:0;background:transparent}
.panel:last-child{border-right:0}
.panel h3{font-family:"Manrope",sans-serif;font-size:18px;font-weight:650;color:var(--ink)}
.panel p{color:#6c7469;font-size:12px}
.panel-symbol{color:var(--clay)}
.progress-track,.quiz-progress-track{border-radius:0;background:#ddd8cd}
.progress-track span,.quiz-progress-track span{background:var(--forest);border-radius:0}
.btn-secondary{border-radius:0;background:transparent;border-color:#c7c2b5;color:var(--ink)}
.tiny-pill{border-radius:0;background:#e4e1d5;border:0;color:var(--forest)}
.question-preview{border:1px solid #d5d0c4;border-radius:0;background:#e9e5da;color:var(--ink)}
.daily-options button{border:1px solid #c8c2b5;border-radius:0;background:transparent;color:var(--ink)}
.daily-options button:hover{border-color:var(--forest)}
.inline-feedback{color:var(--forest)}
.page-intro{padding:12px 0 23px;border-bottom:1px solid #d7d1c5;margin-bottom:24px}
.page-intro h1{font-size:clamp(36px,4vw,54px);line-height:1.03;letter-spacing:-2px}
.page-intro p{font-size:13px;color:#6c7469;line-height:1.75}
.intro-stat strong{font-family:Georgia,serif;font-weight:400;font-size:42px;color:var(--forest)}
.intro-stat span{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#77796e}
.toolbar{gap:0;border-bottom:1px solid #d7d1c5;padding-bottom:16px}
.search-field{border:1px solid #d2ccbf;border-radius:0;background:#fbfaf6;color:#77796e}
.search-field input{color:var(--ink)}.search-field input::placeholder{color:#929184}
.toolbar select{border:1px solid #d2ccbf;border-radius:0;background:#fbfaf6;color:var(--ink)}
.notes-layout{grid-template-columns:245px minmax(0,1fr);gap:27px}
.topic-list{gap:0;border-top:1px solid #d7d1c5}
.topic-button{border:0;border-bottom:1px solid #d7d1c5;border-radius:0;background:transparent;color:#646d63;padding:12px 8px}
.topic-button.active,.topic-button:hover{border-color:#c7c2b5;background:#e7e3d8;color:var(--ink)}
.topic-index{width:31px;height:31px;border-radius:0;background:#e4e0d5;color:#5f7164}
.topic-button.active .topic-index{background:var(--forest);color:#fff}
.topic-button strong{font-size:11px}
.topic-button small{color:#77796e}
.panel,.feature-card,.topic-button,.vn-card,.tq,.note-extra>summary{box-shadow:none}
input,select{accent-color:var(--forest)}
/* Notes should read like printed chemistry pages, not app cards. */
.revision-page{max-width:960px;border:1px solid #d8d2c5;border-radius:0;box-shadow:none;background:#fbfaf6;color:var(--ink)}
.revision-title{padding:38px 44px 30px;background:#fbfaf6;border-bottom:1px solid #d8d2c5}
.revision-kicker{color:var(--clay);letter-spacing:.18em}
.revision-title h2{font-family:"Manrope",sans-serif;font-weight:600;letter-spacing:-1.8px;font-size:clamp(32px,4vw,48px);color:var(--ink)}
.note-lead{color:#626b60;font-size:15px;line-height:1.85}
.revision-meta span{border-radius:0;background:#e9e5da;color:#59685b}
.note-keypoints,.note-explanations,.note-table-section{padding-left:44px;padding-right:44px}
.note-label{font-family:"Manrope",sans-serif;font-weight:650;color:var(--ink);border-bottom:1px solid #d8d2c5;padding-bottom:13px}
.note-fact{border-bottom:1px solid #e3ded3}
.note-fact-num{border-radius:0;background:#e0e6dc;color:var(--forest)}
.note-fact h4{font-weight:700;color:var(--ink)}
.note-fact p{color:#606a60}
.note-section{border-bottom:1px solid #e3ded3}
.note-section h3{font-weight:700;color:var(--ink)}
.note-section h3 span{border-radius:0;background:#e0e6dc;color:var(--forest)}
.note-section p{color:#424d43;line-height:1.85}
.chem-figure{border:1px solid #d8d2c5;border-radius:0;background:#f0eee6}
.chem-figure figcaption{color:var(--forest)}
.particle-state{border:1px solid #d8d2c5;border-radius:0;background:#fbfaf6}
.particle-state strong{color:var(--ink)}
.particle-state p{color:#626b60}
.phase-node{border:1px solid #d8d2c5;border-radius:0;background:#fbfaf6}
.phase-node b{color:var(--ink)}
.formula-band{border:1px solid #d2dacf;border-left:3px solid var(--forest);border-radius:0;background:#e8ece3}
.formula-band span{color:var(--forest)}
.formula-band strong{color:#263d31}
.note-table-wrap{border:1px solid #d8d2c5;border-radius:0}
.note-table-wrap th,.note-table-wrap td{border-bottom:1px solid #e3ded3}
.note-table-wrap tr:first-child th,.note-table-wrap tr:first-child td{background:#e5e9df;color:#30483a}
.note-table-wrap tr:nth-child(even) td{background:#f3f1ea}
.exam-tip{border:1px solid #e5c7b5;border-radius:0;background:#f7ece4;color:#5e4335}
.exam-tip-title>span{border-radius:50%;background:#ead0bf;color:#9b4f2e}
.exam-tip h3{color:#7c432d}
.revision-footer{background:#f0eee6;border-color:#d8d2c5;color:#77796e}
.revision-footer span:first-child{color:var(--forest)}
.note-extra>summary{border:1px dashed #c8c2b5;border-radius:0;color:#626b60;background:#f8f6f0}
.vn-card,.vn-table,.tq{border-radius:0;border-color:#d8d2c5;background:#fbfaf6}
.vn-card{border-left-width:3px}
.vn-table thead th{background:#e5e9df}
.vn-mistakes{border-radius:0}
.tq-opt{border-radius:0}
.tq-opt span{border-radius:0}
@media(max-width:1100px){
 .content-wrap{padding-left:26px;padding-right:26px}
 .topbar{padding:0 26px}
 .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .feature-card:nth-child(2){border-right:0}
 .feature-card:nth-child(-n+2){border-bottom:1px solid #d7d1c5}
}
@media(max-width:760px){
 .sidebar{width:280px;background:#e9e5da}
 .main-area{margin-left:0}
 .topbar{height:58px;padding:0 15px}
 .content-wrap{padding:20px 15px 28px}
 .global-search{width:min(38vw,180px)}
 .breadcrumbs{font-size:10px}
 .hero{grid-template-columns:1fr;min-height:0}
 .hero:before{right:13px;top:13px;font-size:7px}
 .hero-copy{padding:45px 23px 27px}
 .hero h1{font-size:clamp(43px,12vw,63px)}
 .hero-visual{min-height:280px}
 .molecule{max-width:330px}
 .orb{width:200px;height:200px}
 .orb-two,.orb-three{width:250px;height:150px}
 .chip-top{top:20px;right:12px}.chip-bottom{bottom:70px;left:10px}
 .section-heading{align-items:flex-start;gap:10px}
 .section-heading h2{font-size:20px}
 .feature-grid{grid-template-columns:1fr 1fr}
 .feature-card{padding:17px 13px;min-height:185px}
 .lower-grid{grid-template-columns:1fr}
 .panel{border-right:0;border-bottom:1px solid #d7d1c5;padding:20px 6px}
 .panel:last-child{border-bottom:0}
 .page-intro{align-items:flex-start}
 .page-intro h1{font-size:39px}
 .notes-layout{grid-template-columns:1fr;gap:17px}
 .topic-list{max-height:270px;overflow:auto}
 .note-keypoints{grid-template-columns:1fr}
 .revision-title{padding:27px 22px 22px}
 .note-keypoints,.note-explanations,.note-table-section{padding-left:22px;padding-right:22px}
 .note-section p{margin-left:0}
 .chem-figure{margin:20px 22px 4px;padding:14px}
 .particle-states{grid-template-columns:1fr}
 .particle-state{display:grid;grid-template-columns:1fr 100px;text-align:left}
 .particle-state svg{grid-column:2;grid-row:1/3}
 .phase-flow{grid-template-columns:1fr}
 .formula-band,.exam-tip{margin-left:22px;margin-right:22px}
 .revision-footer{padding:14px 22px}
}
@media print{
 body{background:#fff!important;color:#111}
 .sidebar,.topbar{display:none!important}
 .main-area{margin:0}
 .content-wrap{padding:0}
 .revision-page{border:0;background:#fff}
}


/* Signature direction: cinematic chemistry, warm ivory type, antique gold, live atom. */
:root{
  --bg:#0b0d10;--panel:#11151b;--panel2:#171b22;--line:#292d35;
  --text:#f2eee6;--muted:#9ba0aa;--teal:#d1a84c;--blue:#c5a24b;
  --purple:#c5a24b;--amber:#e2b95e;--paper:#11151b;--ink:#f2eee6;
  --forest:#cba64c;--clay:#e5b54d;
}
html,body,.app-shell,.main-area{background:#0b0d10;color:#f2eee6}
.sidebar{background:#101319;border-right:1px solid #272b32;color:#f2eee6}
.sidebar-topline,.brand-copy small,.sidebar-course-chip small,.nav-group-label,.sidebar-foot,.journey-card-head,.journey-labels small{color:#8f929a}
.brand-mark,.avatar{background:#cba64c;color:#111319}
.brand-copy strong,.brand-copy strong span{color:#f2eee6}
.sidebar-course-chip{border-color:#2a2e36}
.sidebar-course-chip b,.nav-link,.nav-copy b{color:#d8d9dc}
.nav-link:hover{background:#1b2028;color:#fff}
.nav-link.active{background:#cba64c;color:#111319}
.nav-link.active .nav-copy b,.nav-link.active .nav-copy small{color:#111319}
.nav-link.active .nav-icon{color:#111319}
.nav-count{background:#262a32;color:#d9b75e}
.sidebar-journey-card{background:#141820;border-color:#2a2e36}
.journey-stop{background:#151a22;border-color:#49433a;color:#cba64c}
.journey-stop-one{background:#cba64c;color:#101319;border-color:#cba64c}
.journey-line,.sidebar-foot{border-color:#2a2e36}
.topbar{background:rgba(11,13,16,.92);border-color:#292d35}
.breadcrumbs,.global-search,.global-search input,.icon-button,.language-toggle{color:#d8d9dc}
.global-search,.icon-button,.language-toggle{background:#11151b;border-color:#30343c}
.global-search input::placeholder{color:#777d88}
.content-wrap{max-width:1540px}
.hero{background:#101319;border:1px solid #292d35;min-height:475px;grid-template-columns:1.02fr .98fr}
.hero:before{color:#858995}
.hero-copy{padding-top:72px;padding-bottom:48px}
.eyebrow,.section-kicker{color:#d6ad50}
.eyebrow-dot{background:#d6ad50}
.hero h1,.page-intro h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-2.4px}
.hero h1{font-size:clamp(46px,5.1vw,74px);line-height:.99;color:#f3efe8}
.hero h1 span{color:#d8b253;font-style:normal}
.hero-copy>p,.page-intro p,.panel p,.feature-card p{color:#a5a9b1}
.btn{border-radius:7px}
.btn-primary{background:#cba64c;color:#111319}
.btn-primary:hover{background:#dfbd68}
.btn-ghost,.btn-secondary{border-color:#353943;color:#f0eee8;background:transparent}
.btn-ghost:hover,.btn-secondary:hover{background:#1b2028}
.hero-proof{color:#969ba5}
.proof-avatars i{background:#242832;border-color:#101319;color:#e0b954}
.hero-visual{position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#1a1d22 0,#101319 58%,#0b0d10 100%);min-height:430px}
.hero-visual:before{inset:0;background:radial-gradient(circle at center,#24201a 0,#14171d 38%,transparent 69%);opacity:.85}
.hero-visual .molecule{display:none}
.hero-visual .orb{border-color:#cba64c25}
.visual-caption{background:#141820;color:#f1eee7;border:1px solid #34302a;border-left:2px solid #cba64c}
.visual-caption small{color:#a1a5ad}
.floating-chip{background:#171b22;border-color:#39352d;color:#d9dbe0;border-radius:6px}
.floating-chip span{color:#e0b954}
.section-heading{border-color:#292d35}
.section-heading h2,.panel h3,.feature-card>strong{color:#f1eee8}
.feature-grid{border-color:#292d35}
.feature-card{border-color:#292d35;color:#f1eee8}
.feature-card:hover{background:#141820}
.feature-icon{color:#d5b052!important}
.feature-meta,.card-bottom,.subtle-link{color:#d2b052}
.card-bottom{border-color:#292d35}
.lower-grid{border-color:#292d35}
.panel{border-color:#292d35}
.progress-track,.quiz-progress-track{background:#2b2f37}
.progress-track span,.quiz-progress-track span{background:#cba64c}
.tiny-pill{background:#252831;color:#e0b954}
.question-preview{background:#171b22;border-color:#343943;color:#f1eee8}
.daily-options button{border-color:#383d47;background:#11151b;color:#f1eee8}
.daily-options button:hover{border-color:#cba64c}
.inline-feedback{color:#e0b954}
.page-intro{border-color:#292d35}
.intro-stat strong{color:#d9b253}
.search-field,.toolbar select{background:#11151b;border-color:#343943;color:#e5e3dd}
.search-field input{color:#f1eee8}
.topic-list{border-color:#292d35}
.topic-button{border-color:#292d35;color:#c2c5cb}
.topic-button.active,.topic-button:hover{background:#191e26;color:#fff;border-color:#cba64c}
.topic-index{background:#242831;color:#d9b253}
.topic-button.active .topic-index{background:#cba64c;color:#111319}
.revision-page{background:#11151b;color:#f2eee6;border-color:#30343c}
.revision-title{background:#11151b;border-color:#30343c}
.revision-title h2,.note-label,.note-fact h4,.note-section h3{color:#f2eee6}
.note-lead,.note-fact p,.note-section p{color:#c2c5cc}
.revision-meta span,.note-fact-num,.note-section h3 span{background:#272720;color:#e0b954}
.note-fact,.note-section,.note-table-wrap th,.note-table-wrap td{border-color:#30343c}
.chem-figure,.particle-state,.phase-node{background:#171b22;border-color:#343943}
.particle-state strong,.phase-node b{color:#f2eee6}
.particle-state p{color:#aeb2ba}
.formula-band{background:#201e18;border-color:#4d4124;border-left-color:#cba64c}
.formula-band span,.formula-band strong{color:#e0bd63}
.note-table-wrap tr:first-child th,.note-table-wrap tr:first-child td{background:#27251e;color:#e0bd63}
.note-table-wrap tr:nth-child(even) td{background:#151920}
.exam-tip{background:#211b16;border-color:#58412c;color:#e6c9aa}
.exam-tip h3{color:#e6b86b}
.revision-footer{background:#151920;border-color:#30343c;color:#9da2ab}
.note-extra>summary,.vn-card,.vn-table,.tq{background:#141820;border-color:#343943;color:#e8e6df}
.vn-table thead th{background:#24251f}
.tq-opt{background:#171b22;color:#e8e6df}
@media(max-width:760px){
 .hero{background:#101319}
 .hero-visual{min-height:310px}
}
@media(prefers-reduced-motion:reduce){
 .atom-orbit,.atom-electron{animation:none!important}
}
.atom-stage{position:absolute;inset:0;display:grid;place-items:center;perspective:900px;isolation:isolate}
.atom-aura{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(203,166,76,.12),rgba(203,166,76,.035) 38%,transparent 70%);filter:blur(3px)}
.atom-core{position:absolute;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffe9a0,#d3a743 44%,#75521b 100%);box-shadow:0 0 25px #d2a54170,0 0 70px #d2a54128;z-index:3;animation:corePulse 4s ease-in-out infinite}
.atom-core:before,.atom-core:after{content:"";position:absolute;border-radius:50%;background:#fff0bc;width:11px;height:11px;left:14px;top:12px;opacity:.85}
.atom-core:after{width:8px;height:8px;left:31px;top:29px;background:#a77825}
.atom-orbit{position:absolute;width:76%;height:30%;border:1px solid #d7b55e9c;border-radius:50%;transform-style:preserve-3d;box-shadow:0 0 18px #cba64c0c,inset 0 0 12px #cba64c0c}
.atom-orbit.orbit-one{transform:rotate(-32deg) rotateY(62deg);animation:orbitDriftA 12s linear infinite}
.atom-orbit.orbit-two{transform:rotate(52deg) rotateY(62deg);animation:orbitDriftB 15s linear infinite}
.atom-orbit.orbit-three{transform:rotate(90deg) rotateY(62deg);animation:orbitDriftC 18s linear infinite}
.atom-electron{position:absolute;width:12px;height:12px;border-radius:50%;background:#f3d47a;box-shadow:0 0 8px #e5bd59,0 0 22px #cba64c9c;top:50%;left:-5px;transform:translateY(-50%)}
.atom-orbit.orbit-two .atom-electron{background:#fff0b7}
.atom-orbit.orbit-three .atom-electron{width:9px;height:9px}
.atom-label{position:absolute;right:8%;top:20%;font:600 9px "DM Sans",sans-serif;letter-spacing:2px;color:#c4a75b}
.atom-label:before{content:"";display:inline-block;width:20px;height:1px;background:#cba64c;vertical-align:middle;margin-right:8px}
.atom-caption{position:absolute;left:8%;top:20%;font:10px "DM Sans",sans-serif;letter-spacing:1.6px;color:#7f8793}
.atom-caption strong{display:block;color:#e1bd63;font:italic 22px Georgia,serif;letter-spacing:0;margin-top:6px}
@keyframes orbitDriftA{from{transform:rotate(-32deg) rotateY(62deg)}to{transform:rotate(328deg) rotateY(62deg)}}
@keyframes orbitDriftB{from{transform:rotate(52deg) rotateY(62deg)}to{transform:rotate(412deg) rotateY(62deg)}}
@keyframes orbitDriftC{from{transform:rotate(90deg) rotateY(62deg)}to{transform:rotate(450deg) rotateY(62deg)}}
@keyframes corePulse{0%,100%{transform:scale(1);box-shadow:0 0 25px #d2a54170,0 0 70px #d2a54128}50%{transform:scale(1.08);box-shadow:0 0 35px #d2a54199,0 0 90px #d2a54142}}


/* V3 — redesign the information architecture, retain the original midnight/teal identity. */
:root{
 --bg:#07111f;--panel:#0d1a2b;--panel2:#122239;--line:#22344b;
 --text:#edf4fb;--muted:#91a5bc;--teal:#42e4d2;--blue:#5b8dff;
 --purple:#a88bff;--amber:#ffbd69;--paper:#0d1a2b;--ink:#edf4fb;
 --forest:#42e4d2;--clay:#5b8dff;--radius:14px;
}
html,body,.app-shell,.main-area{background:#07111f;color:#edf4fb}
body{font-family:"DM Sans",sans-serif}
.app-shell{display:block;min-height:100vh}
.sidebar{
 position:sticky;top:0;z-index:40;width:100%;height:auto;min-height:0;
 display:flex;flex-direction:row;align-items:center;gap:20px;
 padding:12px clamp(18px,4vw,64px);background:rgba(7,17,31,.94);
 border:0;border-bottom:1px solid #20324a;backdrop-filter:blur(18px);
}
.sidebar-topline,.sidebar-course-chip,.sidebar-bottom{display:none!important}
.brand{padding:0;gap:10px;flex:0 0 auto}
.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#42e4d2,#5b8dff);color:#07111f}
.brand-copy strong,.brand-copy strong span{color:#edf4fb}
.brand-copy strong span{color:#42e4d2}
.brand-copy small{color:#8095ad}
.brand-arrow{display:none}
.side-nav{display:flex;flex-direction:row;align-items:center;gap:4px;margin-left:auto;width:auto;overflow:visible}
.nav-group-label{display:none!important}
.nav-group-spaced{display:none!important}
.nav-link{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:#9eb0c5;white-space:nowrap}
.nav-link:hover{background:#101f32;color:#edf4fb}
.nav-link.active{background:#122c3a;border:1px solid #245b61;color:#f3ffff}
.nav-link.active .nav-copy b,.nav-link.active .nav-copy small{color:#f3ffff}
.nav-link.active .nav-icon{color:#42e4d2}
.nav-copy b{font-size:12px;color:inherit}
.nav-copy small{display:none}
.nav-icon{font-size:15px;color:#8096af}
.nav-count,.nav-ai-dot,.nav-active-arrow{display:none}
.main-area{margin:0;min-width:0}
.topbar{position:relative;height:58px;padding:0 clamp(18px,4vw,64px);background:#091524;border:0;border-bottom:1px solid #182a40}
.breadcrumbs{color:#8195ad}.breadcrumbs strong{color:#dfeaf5}
.global-search,.icon-button,.language-toggle{background:#0d1a2b;border:1px solid #263a52;color:#eaf3fb;border-radius:10px}
.global-search input{color:#edf4fb}.global-search input::placeholder{color:#748aa4}
.avatar{background:#173b4a;color:#42e4d2;border:1px solid #28616b}
.content-wrap{max-width:1600px;padding:34px clamp(18px,4vw,64px) 70px}
.page{animation:pageLift .35s ease both}
@keyframes pageLift{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.hero{
 min-height:490px;grid-template-columns:minmax(0,1fr) minmax(380px,.88fr);
 border:1px solid #21354d;border-radius:22px;
 background:radial-gradient(ellipse at 80% 45%,#10263b 0,#0b1b2d 44%,#0b1727 72%);
 overflow:hidden;position:relative;isolation:isolate;
}
.hero:before{content:"CHEMISTRY / DP1—DP2";position:absolute;top:24px;right:28px;color:#68819d;font-size:9px;letter-spacing:2px;z-index:4}
.hero-copy{padding:70px 5% 48px 8%;z-index:5}
.eyebrow{color:#42e4d2;font-size:10px;letter-spacing:2px}
.eyebrow-dot{background:#42e4d2;box-shadow:0 0 15px #42e4d255}
.hero h1,.page-intro h1{font-family:"Manrope",sans-serif;font-weight:750;letter-spacing:-3px}
.hero h1{font-size:clamp(46px,5.2vw,76px);line-height:.99;color:#f3f7fc;margin:26px 0 22px}
.hero h1 span{font-family:Georgia,serif;font-style:italic;font-weight:400;color:#42e4d2}
.hero-copy>p{max-width:440px;color:#9db0c6;font-size:15px;line-height:1.8}
.hero-actions{gap:10px;flex-wrap:wrap}
.btn{border-radius:10px;padding:13px 18px;font-size:12px}
.btn-primary{background:#42e4d2;color:#061522;box-shadow:0 8px 28px #42e4d21c}
.btn-primary:hover{background:#72f2e5}
.btn-ghost,.btn-secondary{background:#0e1c2d;border:1px solid #2c4058;color:#eaf3fb}
.btn-ghost:hover,.btn-secondary:hover{background:#172a40}
.hero-proof{color:#849ab4}
.proof-avatars i{background:#132c40;border:2px solid #0b1b2d;color:#42e4d2}
.hero-visual{min-height:440px;background:radial-gradient(ellipse at center,#10273b 0,#0b1a2b 54%,transparent 75%);position:relative;overflow:hidden}
.hero-visual:before{inset:0;background:radial-gradient(circle at center,#1b3448 0,rgba(9,24,40,.35) 42%,transparent 70%)}
.hero-visual .molecule{display:none}
.orb{border-color:#42e4d22b}
.orb-two,.orb-three{border-color:#5b8dff2b}
.floating-chip{background:#101f32;border:1px solid #29435d;color:#dce9f7;border-radius:10px;box-shadow:0 12px 34px #02081155}
.floating-chip span{color:#42e4d2}
.visual-caption{background:#101f32;color:#edf4fb;border:1px solid #2b435b;border-left:2px solid #42e4d2;border-radius:10px}
.visual-caption small{color:#91a7bf}
.section-heading{border-color:#20344b}
.section-heading h2,.panel h3,.feature-card>strong{color:#edf4fb}
.section-kicker{color:#42e4d2}
.subtle-link{color:#42e4d2}
.feature-grid{border:0;gap:14px}
.feature-card{min-height:205px;padding:23px;border:1px solid #22364e;border-radius:16px;background:linear-gradient(145deg,#0f1e30,#0b1727);color:#edf4fb}
.feature-card:last-child{border-right:1px solid #22364e}
.feature-card:hover{background:#13263a;border-color:#346176;transform:translateY(-3px)}
.feature-icon{width:38px;height:38px;min-height:38px;display:grid;place-items:center;border-radius:11px;background:#143341!important;color:#42e4d2!important;font-size:19px}
.feature-icon.blue{background:#182a4b!important;color:#8eafff!important}
.feature-icon.purple{background:#2b2347!important;color:#c1a8ff!important}
.feature-icon.amber{background:#382b20!important;color:#ffca86!important}
.feature-meta{color:#7891ab}
.feature-card>strong{font-family:"Manrope",sans-serif;font-size:17px}
.feature-card p{color:#9badc1}
.card-bottom{border-color:#22364e;color:#8298b1}
.card-bottom b{color:#42e4d2}
.lower-grid{gap:14px;border:0}
.panel{border:1px solid #22364e;border-radius:16px;background:#0d1a2b;padding:24px}
.panel:last-child{border:1px solid #22364e}
.panel h3{font-family:"Manrope",sans-serif}
.panel p{color:#98abc0}
.progress-track,.quiz-progress-track{background:#203249;border-radius:99px}
.progress-track span,.quiz-progress-track span{background:linear-gradient(90deg,#42e4d2,#5b8dff);border-radius:99px}
.tiny-pill{background:#15323c;color:#42e4d2;border-radius:6px}
.question-preview{background:#101f32;border:1px solid #293e57;border-radius:10px;color:#edf4fb}
.daily-options button{border:1px solid #2c4058;border-radius:9px;background:#0d1a2b;color:#edf4fb}
.daily-options button:hover{border-color:#42e4d2;background:#102735}
.inline-feedback{color:#42e4d2}
.page-intro{border-color:#20344b}
.page-intro h1{font-size:clamp(38px,4vw,56px);color:#f1f6fb}
.page-intro p{color:#9badc1}
.intro-stat strong{color:#42e4d2}
.intro-stat span{color:#91a5bc}
.toolbar{border-color:#20344b}
.search-field,.toolbar select{background:#0d1a2b;border:1px solid #2a3e56;border-radius:10px;color:#eaf3fb}
.search-field input{color:#edf4fb}.search-field input::placeholder{color:#7188a2}
.notes-layout{grid-template-columns:285px minmax(0,1fr);gap:24px}
.topic-list{border:1px solid #20344b;border-radius:14px;overflow:hidden;gap:0}
.topic-button{border:0;border-bottom:1px solid #20344b;border-radius:0;background:#0c1929;color:#9eb0c5;padding:13px}
.topic-button:last-child{border-bottom:0}
.topic-button:hover,.topic-button.active{background:#12283a;color:#f4f8fc;border-color:#29465d}
.topic-index{background:#172b40;color:#42e4d2;border-radius:8px}
.topic-button.active .topic-index{background:#42e4d2;color:#07111f}
.topic-button strong{color:inherit}
.topic-button small{color:#8ca1b8}
.revision-page{background:#0d1a2b;border:1px solid #263b54;border-radius:16px;color:#edf4fb}
.revision-title{background:#0d1a2b;border-color:#263b54}
.revision-title h2,.note-label,.note-fact h4,.note-section h3{color:#edf4fb}
.revision-kicker{color:#42e4d2}
.note-lead,.note-fact p,.note-section p{color:#b1c0d1}
.revision-meta span,.note-fact-num,.note-section h3 span{background:#16303d;color:#42e4d2}
.note-fact,.note-section,.note-table-wrap th,.note-table-wrap td{border-color:#263b54}
.chem-figure,.particle-state,.phase-node{background:#101f32;border-color:#2a4058}
.particle-state strong,.phase-node b{color:#edf4fb}
.particle-state p{color:#a4b6c9}
.formula-band{background:#102a32;border-color:#28515b;border-left-color:#42e4d2}
.formula-band span,.formula-band strong{color:#7df1e4}
.note-table-wrap{border-color:#263b54}
.note-table-wrap tr:first-child th,.note-table-wrap tr:first-child td{background:#16303d;color:#c5fff7}
.note-table-wrap tr:nth-child(even) td{background:#101f32}
.exam-tip{background:#30251d;border-color:#5c4431;color:#f1d4b4}
.exam-tip h3{color:#ffca86}
.revision-footer{background:#101f32;border-color:#263b54;color:#91a5bc}
.note-extra>summary,.vn-card,.vn-table,.tq{background:#0d1a2b;border-color:#2a4058;color:#edf4fb}
.vn-table thead th{background:#16303d}
.tq-opt{background:#101f32;color:#edf4fb}
@media(max-width:1100px){
 .sidebar{gap:12px;padding:10px 18px}
 .side-nav{gap:2px}
 .nav-link{padding:9px 8px}
 .nav-copy b{font-size:11px}
 .brand-copy small{display:none}
 .hero{grid-template-columns:1fr .85fr}
}
@media(max-width:850px){
 .sidebar{align-items:flex-start;flex-wrap:wrap}
 .brand{padding:0}
 .side-nav{order:2;width:100%;margin:0;overflow-x:auto;padding:4px 0 2px}
 .nav-link{flex:0 0 auto}
 .hero{grid-template-columns:1fr}
 .hero-copy{padding:48px 28px 28px}
 .hero-visual{min-height:340px}
 .topbar{height:54px}
}
@media(max-width:760px){
 .content-wrap{padding:18px 14px 40px}
 .sidebar{padding:10px 14px}
 .nav-link{padding:8px 10px}
 .hero h1{font-size:clamp(42px,12vw,62px)}
 .hero-visual{min-height:290px}
 .feature-grid{grid-template-columns:1fr 1fr;gap:9px}
 .feature-card{padding:15px;min-height:185px}
 .lower-grid{grid-template-columns:1fr}
 .panel{padding:18px}
 .notes-layout{grid-template-columns:1fr}
 .topic-list{max-height:250px;overflow:auto}
}


}

/* GchemIB — precision pass: one layout system, consistent rhythm, intentional hierarchy. */
:root{
  --bg:#07111f;--panel:#0d1a2b;--panel2:#101f32;--line:#20344b;
  --text:#edf5fb;--muted:#91a6bd;--teal:#42e4d2;--blue:#5b8dff;
  --purple:#b49aff;--amber:#f4c66b;--ink:#edf5fb;
}
html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;line-height:1.6}
*{box-sizing:border-box}
.app-shell{min-height:100vh;background:var(--bg)}
/* Desktop navigation is a single, measured top rail — no competing sidebars. */
@media(min-width:1101px){
  .sidebar{
    position:sticky;inset:auto;width:100%;height:auto;min-height:78px;
    display:flex;flex-direction:row;align-items:center;gap:20px;
    padding:12px clamp(24px,4vw,68px);overflow:visible;
    background:rgba(7,17,31,.96);border:0;border-bottom:1px solid #1b3046;
    box-shadow:0 8px 30px #02081220;backdrop-filter:blur(18px)
  }
  .sidebar-topline,.sidebar-course-chip,.sidebar-bottom,.nav-group-label{display:none!important}
  .brand{flex:0 0 auto;gap:10px;padding:0;margin:0}
  .brand-mark{width:39px;height:39px;border-radius:12px;background:linear-gradient(145deg,#42e4d2,#5b8dff);color:#07111f;box-shadow:0 5px 22px #42e4d21c}
  .brand-copy strong{font-size:22px;letter-spacing:-1px;color:#f4f8fc}
  .brand-copy strong span{color:var(--teal)}
  .brand-copy small{font-size:8px;letter-spacing:1.45px;color:#8da4bd}
  .brand-arrow{display:none}
  .sidebar .side-nav{
    display:flex;flex:1;flex-direction:row;align-items:center;justify-content:flex-end;
    gap:5px;min-width:0;overflow:visible;margin:0;padding:0
  }
  .sidebar .nav-link{
    width:auto;min-height:40px;flex:0 0 auto;gap:7px;padding:0 11px;
    border:1px solid transparent;border-radius:9px;background:transparent;
    color:#9db0c5;font-size:11px;white-space:nowrap;transform:none
  }
  .sidebar .nav-link .nav-copy{display:block}
  .sidebar .nav-link .nav-copy b{font-size:11px;font-weight:650}
  .sidebar .nav-link .nav-copy small,.sidebar .nav-link .nav-count,
  .sidebar .nav-link .nav-ai-dot,.sidebar .nav-link .nav-active-arrow{display:none}
  .sidebar .nav-link .nav-icon{width:auto;font-size:14px;color:#8ea5ba}
  .sidebar .nav-link:hover{background:#102438;border-color:#203c52;color:#f4f8fc;transform:none}
  .sidebar .nav-link.active{background:#12313b;border-color:#24505a;color:#f3fffd;box-shadow:inset 0 0 0 1px #42e4d20a}
  .sidebar .nav-link.active .nav-icon{background:transparent;color:var(--teal)}
  .main-area{margin-left:0!important;min-height:calc(100vh - 78px)}
  .topbar{height:62px;top:0;padding:0 clamp(24px,4vw,68px);background:rgba(7,17,31,.88);border-color:#1b3046}
  .content-wrap{max-width:1512px;padding:34px clamp(24px,4vw,68px) 38px}
}
.topbar{display:flex;align-items:center;gap:18px;border-bottom:1px solid #1b3046}
.breadcrumbs{color:#7890a9;font-size:11px;gap:9px}
.breadcrumbs strong{color:#e6f0fa}
.top-actions{gap:8px}
.global-search{width:230px;height:36px;border-radius:10px;background:#0b1929;border-color:#233950}
.global-search:focus-within{border-color:#3a7b87;box-shadow:0 0 0 3px #42e4d20d}
.icon-button,.language-toggle{height:36px;border-radius:10px;border-color:#233950;background:#0b1929;color:#d7e5f1}
.avatar{width:34px;height:34px;background:#143b46;border-color:#276371;color:#7af3e4}
.content-wrap{width:100%;margin:0 auto}
.page{min-width:0}
.hero{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);
  align-items:stretch;min-height:420px;overflow:hidden;
  border:1px solid #1e3a50;border-radius:22px;
  background:linear-gradient(112deg,#0d1b2c 0%,#0b192a 58%,#0d2235 100%);
  box-shadow:0 22px 65px #02081226
}
.hero:before{content:"GchemIB  /  FIELD NOTES 001";position:absolute;top:20px;right:24px;z-index:4;color:#718ba5;font-size:8px;letter-spacing:1.7px;font-weight:800}
.hero-copy{align-self:center;padding:66px clamp(26px,4vw,58px) 42px;max-width:680px}
.eyebrow{display:flex;align-items:center;gap:9px;color:#8fb7c3;font-size:9px;letter-spacing:1.8px;font-weight:800}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 14px #42e4d255}
.hero h1{font-family:"Manrope",sans-serif;font-size:clamp(44px,5.1vw,72px);font-weight:650;line-height:.99;letter-spacing:-.065em;margin:23px 0 20px;color:#f2f7fc}
.hero h1 span{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;color:var(--teal);letter-spacing:-.055em}
.hero-copy>p{max-width:420px;color:#9eb2c7;font-size:13px;line-height:1.85;margin:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:11px 15px;border-radius:10px;font-size:11px;font-weight:750;letter-spacing:.1px;transition:transform .18s,border-color .18s,background .18s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(110deg,#42e4d2,#73dfe5);color:#06202a;box-shadow:0 7px 22px #42e4d21c}
.btn-primary:hover{background:#76f1e3}
.btn-ghost,.btn-secondary{background:#101f32;border:1px solid #2a425a;color:#d9e8f4}
.btn-ghost:hover,.btn-secondary:hover{background:#14283c;border-color:#3c647b}
.hero-proof{display:flex;align-items:center;gap:11px;margin-top:25px;color:#8098b1;font-size:10px}
.proof-avatars i{width:24px;height:24px;display:grid;place-items:center;border:2px solid #0d1b2c;background:#143644;color:#65ebdd;font-size:8px}
.hero-visual{
  min-width:0;min-height:420px;position:relative;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(ellipse at 52% 45%,#143a4b 0%,#0d2639 38%,#0a192a 76%)
}
.hero-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,#42e4d20e,transparent 54%);pointer-events:none}
.hero-visual .molecule{display:none}
.hero-visual .orb{left:50%;top:47%;border-color:#42e4d228}
.hero-visual .orb-one{width:255px;height:255px}
.hero-visual .orb-two,.hero-visual .orb-three{width:330px;height:190px;border-color:#5b8dff35}
.atom-stage{
  --atom-size:min(31vw,330px);position:relative;isolation:isolate;
  width:var(--atom-size);height:var(--atom-size);max-width:330px;max-height:330px;
  display:grid;place-items:center;flex-shrink:0
}
.atom-aura{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,#42e4d21e 0%,#5b8dff0c 42%,transparent 72%);filter:blur(7px)}
.atom-core{
  position:absolute;z-index:2;width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 33% 28%,#b5fff6 0,#42e4d2 25%,#178caa 65%,#183f74 100%);
  box-shadow:0 0 25px #42e4d255,0 0 65px #42e4d21b
}
.atom-orbit{position:absolute;inset:10%;border:1px solid #5b8dff8a;border-radius:50%;transform-style:preserve-3d}
.atom-orbit.orbit-one{transform:rotate(0deg) scaleY(.38)}
.atom-orbit.orbit-two{transform:rotate(60deg) scaleY(.38);border-color:#42e4d28a}
.atom-orbit.orbit-three{transform:rotate(-60deg) scaleY(.38);border-color:#83a9ff8a}
.atom-electron{position:absolute;left:50%;top:-5px;width:10px;height:10px;border-radius:50%;background:#8eb2ff;box-shadow:0 0 14px #5b8dffcc}
.orbit-two .atom-electron{background:#42e4d2;box-shadow:0 0 14px #42e4d2cc}
.orbit-three .atom-electron{background:#c0ccff;box-shadow:0 0 14px #829dffcc}
.atom-label{position:absolute;top:4%;left:50%;transform:translateX(-50%);white-space:nowrap;color:#7f9ab4;font-size:8px;letter-spacing:2px;font-weight:800}
.atom-caption{position:absolute;bottom:-1%;left:50%;transform:translateX(-50%);display:grid;gap:5px;white-space:nowrap;color:#7894ad;font-size:8px;letter-spacing:1.6px;text-align:center}
.atom-caption strong{font-family:"Manrope",sans-serif;font-size:12px;letter-spacing:0;color:#e8f3fb;font-weight:650}
.visual-caption{right:20px;bottom:20px;padding:11px 14px;border-radius:11px;background:#0d1b2beF;border:1px solid #29465c;border-left:2px solid var(--teal);box-shadow:0 10px 30px #02081230}
.visual-caption strong{font-size:10px}.visual-caption small{font-size:9px;color:#8fa7be}
.floating-chip{padding:8px 11px;border-radius:10px;background:#0e2032;border:1px solid #2b485f;color:#d8e8f3;font-size:9px;box-shadow:0 10px 28px #02081235}
.chip-top{top:60px;right:20px}.chip-bottom{left:18px;bottom:80px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:39px 0 16px;padding-bottom:14px;border-bottom:1px solid #1d3248}
.section-kicker{color:#7d9ab4;font-size:9px;letter-spacing:1.7px;font-weight:800}
.section-heading h2{margin:5px 0 0;font-family:"Manrope",sans-serif;font-size:23px;font-weight:650;letter-spacing:-.8px;color:#eef5fb}
.subtle-link{color:var(--teal);font-size:11px;font-weight:750}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.feature-card{
  min-width:0;min-height:196px;padding:20px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  border:1px solid #20374e;border-radius:15px;background:linear-gradient(145deg,#0e1d30,#0b1727);
  color:#edf5fb;transition:transform .2s,border-color .2s,background .2s
}
.feature-card:hover{transform:translateY(-3px);border-color:#34727c;background:linear-gradient(145deg,#11263a,#0d1c2d)}
.feature-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#123541!important;color:#42e4d2!important;font-size:17px}
.feature-icon.blue{background:#182a4b!important;color:#8eafff!important}
.feature-icon.purple{background:#2b2347!important;color:#c1a8ff!important}
.feature-icon.amber{background:#382b20!important;color:#ffca86!important}
.feature-meta{margin-top:13px;color:#7d97b0;font-size:8px;letter-spacing:1.5px;font-weight:800}
.feature-card>strong{font-family:"Manrope",sans-serif;font-size:16px;font-weight:700;letter-spacing:-.35px;margin-top:3px}
.feature-card p{margin:5px 0 13px;color:#9badc1;font-size:11px;line-height:1.7}
.card-bottom{width:100%;margin-top:auto;padding-top:11px;border-top:1px solid #20364b;color:#8199b2;font-size:9px}
.card-bottom b{color:var(--teal)}
.lower-grid{display:grid;grid-template-columns:1.04fr 1fr;gap:12px;margin-top:13px}
.panel{min-width:0;padding:22px;border:1px solid #20374e;border-radius:15px;background:linear-gradient(145deg,#0d1b2c,#0b1726)}
.panel h3{font-family:"Manrope",sans-serif;font-size:16px;color:#edf5fb}
.panel p{color:#9badc1;font-size:11px;line-height:1.75}
.progress-track,.quiz-progress-track{background:#1c3047;border-radius:99px}
.progress-track span,.quiz-progress-track span{background:linear-gradient(90deg,#42e4d2,#5b8dff);border-radius:99px}
.question-preview{padding:12px;border:1px solid #2a4159;border-radius:10px;background:#0b1929;color:#eaf4fb}
.daily-options{gap:8px}
.daily-options button{border:1px solid #2a4159;border-radius:9px;background:#0d1b2c;color:#c4d6e5;padding:8px 11px}
.daily-options button:hover{border-color:#42e4d2;background:#102a37}
.inline-feedback{color:#42e4d2}
.page-intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:9px 0 25px;padding:0 0 21px;border-bottom:1px solid #1d3248}
.page-intro h1{font-family:"Manrope",sans-serif;font-size:clamp(36px,4vw,54px);font-weight:650;line-height:1.04;letter-spacing:-.055em;color:#f1f6fb}
.page-intro p{max-width:650px;color:#9badc1;font-size:12px;line-height:1.8}
.intro-stat strong{font-family:"Manrope",sans-serif;color:var(--teal);font-size:30px}
.toolbar{display:flex;gap:10px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid #1d3248}
.search-field,.toolbar select{height:42px;border:1px solid #2a4058;border-radius:10px;background:#0d1a2b;color:#eaf3fb}
.search-field input{color:#edf4fb}
.notes-layout{display:grid;grid-template-columns:minmax(225px,275px) minmax(0,1fr);align-items:start;gap:20px}
.topic-list{display:grid;gap:5px;max-height:calc(100vh - 190px);overflow:auto;padding:7px;border:1px solid #20374e;border-radius:14px;background:#091726}
.topic-button{min-width:0;border:1px solid transparent;border-radius:9px;background:transparent;color:#9eb0c5;padding:11px}
.topic-button:hover,.topic-button.active{border-color:#294b60;background:#12283a;color:#f4f8fc}
.topic-index{flex:0 0 31px;width:31px;height:31px;border-radius:9px;background:#172b40;color:#42e4d2}
.topic-button.active .topic-index{background:#42e4d2;color:#07111f}
.revision-page{max-width:980px;margin:0 auto;background:#0d1a2b;border:1px solid #263b54;border-radius:16px;color:#edf4fb}
.revision-title{background:#0d1a2b;border-color:#263b54}
.revision-title h2,.note-label,.note-fact h4,.note-section h3{color:#edf4fb}
.revision-kicker{color:#42e4d2}
.note-lead,.note-fact p,.note-section p{color:#b1c0d1}
.revision-meta span,.note-fact-num,.note-section h3 span{background:#16303d;color:#42e4d2}
.chem-figure,.particle-state,.phase-node{background:#101f32;border-color:#2a4058}
.formula-band{background:#102a32;border-color:#28515b;border-left-color:#42e4d2}
.note-table-wrap tr:first-child th,.note-table-wrap tr:first-child td{background:#16303d;color:#c5fff7}
.exam-tip{background:#30251d;border-color:#5c4431;color:#f1d4b4}
.vn-card,.vn-table,.tq,.note-extra>summary{background:#0d1a2b;border-color:#2a4058;color:#edf4fb}
.site-footer{margin-top:32px;padding-top:19px;border-top:1px solid #1d3248;color:#7189a2;font-size:10px}
.site-footer a{color:#42e4d2}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid #42e4d2;outline-offset:3px}
@media(max-width:1100px){
  .sidebar{position:fixed;inset:0 auto 0 0;width:278px;height:100vh;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:17px 15px;overflow-y:auto;background:#0a1727;border-right:1px solid #20364b;z-index:20;transform:translateX(-105%);transition:transform .22s}
  .sidebar.open{transform:translateX(0);box-shadow:20px 0 60px #020812a8}
  .sidebar-topline,.sidebar-course-chip,.sidebar-bottom,.nav-group-label{display:block}
  .sidebar .side-nav{display:flex;flex-direction:column;align-items:stretch;gap:4px;overflow:visible}
  .sidebar .nav-link{width:100%;min-height:46px;justify-content:flex-start;padding:8px 10px}
  .sidebar .nav-link .nav-copy small,.sidebar .nav-link .nav-count,.sidebar .nav-link .nav-ai-dot{display:block}
  .main-area{margin-left:0!important}
  .mobile-menu{display:block}
  .topbar{height:62px;padding:0 22px}
  .content-wrap{padding:25px 22px 34px}
}
@media(max-width:800px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-copy{padding:48px 27px 26px}
  .hero-visual{min-height:340px}
  .atom-stage{--atom-size:280px}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lower-grid{grid-template-columns:1fr}
  .notes-layout{grid-template-columns:1fr}
  .topic-list{max-height:270px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar{padding:0 16px}
  .content-wrap{padding:21px 16px 30px}
}
@media(max-width:520px){
  .topbar{height:58px;gap:8px}
  .breadcrumbs span:first-child,.crumb-slash{display:none}
  .global-search{width:min(38vw,155px);height:34px}
  .top-actions{gap:5px}
  .language-toggle{min-width:39px;padding:0 7px!important}
  .hero-copy{padding:42px 21px 24px}
  .hero h1{font-size:clamp(39px,11.8vw,54px)}
  .hero-visual{min-height:285px}
  .atom-stage{--atom-size:240px}
  .atom-label{font-size:7px}
  .atom-caption strong{font-size:11px}
  .chip-top{right:10px;top:45px}.chip-bottom{left:10px;bottom:63px}
  .visual-caption{right:10px;bottom:10px}
  .feature-grid{gap:9px}
  .feature-card{min-height:190px;padding:14px}
  .feature-card>strong{font-size:14px}
  .feature-card p{font-size:10px}
  .section-heading{align-items:flex-start;gap:10px}
  .section-heading h2{font-size:19px}
  .section-heading .subtle-link{white-space:nowrap;font-size:10px}
  .page-intro{align-items:flex-start;gap:10px}
  .page-intro h1{font-size:34px}
  .intro-stat{display:none}
  .toolbar{flex-direction:column}
  .toolbar select{max-width:none;min-height:42px}
  .topic-list{grid-template-columns:1fr}
  .panel{padding:17px}
  .site-footer{gap:10px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}
@media print{
  .sidebar,.topbar,.site-footer{display:none!important}
  .main-area{margin:0!important}.content-wrap{padding:0!important}
  .revision-page{border:0;background:#fff;color:#111}
}


/* GchemIB / Atelier edition — warm paper, ink, deep botanical green, one persimmon accent. */
:root{
  --bg:#f5f2eb;--panel:#fffdf8;--panel2:#eee9df;--line:#dcd5c8;
  --text:#202a27;--muted:#68736d;--teal:#176b58;--blue:#315d76;
  --purple:#655b7d;--amber:#b65a3c;--radius:16px;
  --shadow:0 12px 34px rgba(32,42,39,.055);
}
html,body{background:#f5f2eb!important;color:#202a27!important}
body{font-family:"Plus Jakarta Sans","DM Sans",sans-serif!important;font-size:14px;line-height:1.65}
.app-shell,.main-area{background:#f5f2eb!important;color:#202a27!important}
*{box-sizing:border-box}
.sidebar{
 background:#f9f7f1!important;color:#202a27!important;border:0!important;
 border-bottom:1px solid #dcd5c8!important;box-shadow:0 4px 18px #202a2706!important;
}
.sidebar .brand-copy strong{font-family:"Playfair Display",Georgia,serif!important;font-size:25px!important;font-weight:700!important;letter-spacing:-.8px!important;color:#202a27!important}
.sidebar .brand-copy strong span{color:#176b58!important}
.sidebar .brand-copy small,.sidebar .sidebar-foot,.sidebar .sidebar-label{color:#68736d!important}
.sidebar .brand-mark{background:#176b58!important;color:#fffdf8!important;border-radius:13px!important;box-shadow:none!important}
.sidebar .nav-link{color:#5e6b64!important;border:1px solid transparent!important;background:transparent!important;border-radius:9px!important}
.sidebar .nav-link .nav-icon{color:#64776c!important}
.sidebar .nav-link:hover{background:#eeeee5!important;border-color:#d8ded1!important;color:#202a27!important}
.sidebar .nav-link.active{background:#e4eee6!important;border-color:#c8dbce!important;color:#164c40!important;box-shadow:none!important}
.sidebar .nav-link.active .nav-icon{color:#176b58!important}
.sidebar .nav-copy b{font-weight:700!important}
.sidebar .nav-copy small{color:#7b857e!important}
.sidebar-course-chip,.sidebar-journey-card{background:#f0eee6!important;border:1px solid #dfd9ce!important;border-radius:12px!important}
.sidebar-journey-card *{color:#47584e}
.sidebar .status-dot,.sidebar .sidebar-live-dot{background:#3d9a70!important}
.topbar{background:#f5f2ebf2!important;border-color:#dcd5c8!important;backdrop-filter:blur(16px)}
.breadcrumbs,.breadcrumbs strong{color:#68736d!important}
.breadcrumbs strong{color:#202a27!important}
.global-search,.search-field,.toolbar select,.icon-button,.language-toggle{
 background:#fffdf8!important;border:1px solid #dcd5c8!important;color:#202a27!important;border-radius:9px!important;box-shadow:none!important
}
.global-search input,.search-field input{color:#202a27!important}
.global-search:focus-within,.search-field:focus-within{border-color:#176b58!important;box-shadow:0 0 0 3px #176b5810!important}
.avatar{background:#dce9df!important;border-color:#c3d6c8!important;color:#176b58!important}
.content-wrap{max-width:1500px!important}
.hero{
 position:relative;grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr)!important;
 background:#fffdf8!important;border:1px solid #ded7cb!important;border-radius:18px!important;
 box-shadow:0 16px 42px #202a2708!important;overflow:hidden
}
.hero:after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#176b58}
.hero:before{color:#9a9d8f!important;letter-spacing:1.8px!important;font-size:8px!important}
.hero-copy{padding:clamp(38px,5vw,72px)!important}
.eyebrow{color:#527365!important;letter-spacing:1.6px!important;font-size:9px!important}
.eyebrow-dot{background:#176b58!important;box-shadow:none!important}
.hero h1,.hero h1 span{
 font-family:"Playfair Display",Georgia,serif!important;font-weight:500!important;
 font-size:clamp(46px,5vw,72px)!important;line-height:1.02!important;letter-spacing:-2.8px!important
}
.hero h1{color:#202a27!important}
.hero h1 span{color:#176b58!important;font-style:italic!important}
.hero-copy>p{color:#65716a!important;font-size:13px!important;line-height:1.9!important;max-width:440px!important}
.btn{border-radius:8px!important;min-height:43px!important;padding:12px 16px!important;font-size:11px!important;box-shadow:none!important}
.btn-primary{background:#176b58!important;color:#fffdf8!important;border:1px solid #176b58!important}
.btn-primary:hover{background:#105544!important;transform:translateY(-1px)}
.btn-ghost,.btn-secondary{background:transparent!important;border:1px solid #cfcfc2!important;color:#34443b!important}
.btn-ghost:hover,.btn-secondary:hover{background:#f0eee6!important;border-color:#aebfb1!important}
.hero-proof{color:#7b857e!important}
.proof-avatars i{background:#e4eee6!important;border-color:#fffdf8!important;color:#176b58!important;border-radius:50%!important}
.hero-visual{background:#e9eee5!important;min-height:420px!important}
.hero-visual:before{background:radial-gradient(circle at 50% 46%,#176b580e,transparent 56%)!important}
.hero-visual .orb{border-color:#176b5820!important}
.hero-visual .orb-two,.hero-visual .orb-three{border-color:#315d7620!important}
.atom-aura{background:radial-gradient(circle,#176b581c 0%,#315d760a 48%,transparent 72%)!important}
.atom-core{background:radial-gradient(circle at 33% 28%,#d7eee0 0,#53a987 27%,#176b58 70%,#174638 100%)!important;box-shadow:0 0 25px #176b5825,0 0 65px #176b5810!important}
.atom-orbit{border-color:#176b586b!important}
.atom-orbit.orbit-two{border-color:#315d766b!important}
.atom-orbit.orbit-three{border-color:#6e8b7b80!important}
.atom-electron{background:#315d76!important;box-shadow:0 0 12px #315d7655!important}
.orbit-two .atom-electron{background:#176b58!important;box-shadow:0 0 12px #176b5855!important}
.orbit-three .atom-electron{background:#b65a3c!important;box-shadow:0 0 12px #b65a3c55!important}
.atom-label{color:#64796c!important;letter-spacing:2px!important}
.atom-caption{color:#687b6e!important}
.atom-caption strong{font-family:"Playfair Display",Georgia,serif!important;font-size:16px!important;font-weight:500!important;color:#202a27!important}
.visual-caption,.floating-chip{background:#fffdf8f2!important;border:1px solid #d7ded3!important;color:#34443b!important;box-shadow:0 8px 22px #202a2708!important}
.visual-caption small{color:#68736d!important}
.section-heading{border-color:#dcd5c8!important;margin-top:44px!important}
.section-kicker{color:#6c7e70!important;letter-spacing:1.6px!important}
.section-heading h2,.panel h3,.page-intro h1{font-family:"Playfair Display",Georgia,serif!important;color:#202a27!important;font-weight:500!important;letter-spacing:-.5px!important}
.section-heading h2{font-size:27px!important}
.subtle-link,.text-button{color:#176b58!important}
.feature-grid{gap:14px!important}
.feature-card,.panel,.formula-card,.calculator-card,.practice-main,.practice-side,.tutor-chat,.tool-card,.textbook-topbar,.textbook-section,.textbook-card,.note-reader,.daily-panel{
 background:#fffdf8!important;border:1px solid #ded8cc!important;color:#202a27!important;
 border-radius:13px!important;box-shadow:none!important
}
.feature-card{min-height:205px!important;padding:21px!important;transition:transform .18s,border-color .18s,box-shadow .18s!important}
.feature-card:hover{background:#fffdf8!important;border-color:#9db9a5!important;box-shadow:0 9px 24px #202a270b!important;transform:translateY(-2px)!important}
.feature-icon,.feature-icon.teal{background:#e4eee6!important;color:#176b58!important;border:1px solid #d3e2d6!important;border-radius:10px!important}
.feature-icon.blue{background:#e7edf0!important;color:#315d76!important;border-color:#d4e0e4!important}
.feature-icon.purple{background:#eeebf3!important;color:#655b7d!important;border-color:#dfd8eb!important}
.feature-icon.amber{background:#f7e9e1!important;color:#a34d32!important;border-color:#ecd2c5!important}
.feature-meta{color:#7b877e!important;letter-spacing:1.4px!important}
.feature-card>strong{font-family:"Playfair Display",Georgia,serif!important;font-size:19px!important;font-weight:500!important;letter-spacing:-.2px!important;color:#202a27!important}
.feature-card p,.panel p,.page-intro p,.textbook-card p,.textbook-card li,.note-reader p,.note-reader li{color:#65716a!important;line-height:1.8!important}
.card-bottom{border-color:#e5e0d7!important;color:#7c867f!important}
.card-bottom b{color:#176b58!important}
.lower-grid{gap:14px!important}
.panel{padding:24px!important}
.page-intro{border-color:#dcd5c8!important}
.page-intro h1{font-size:clamp(36px,4vw,55px)!important}
.page-intro p{color:#65716a!important}
.intro-stat strong{font-family:"Playfair Display",Georgia,serif!important;color:#176b58!important}
.toolbar{border-color:#dcd5c8!important}
.notes-layout{gap:18px!important}
.topic-list{background:#eeece4!important;border:1px solid #dcd5c8!important;border-radius:13px!important;padding:8px!important}
.topic-button{background:transparent!important;border:1px solid transparent!important;color:#53645a!important;border-radius:9px!important}
.topic-button:hover,.topic-button.active{background:#fffdf8!important;border-color:#c9d8cb!important;color:#174c40!important}
.topic-index{background:#e0e7de!important;color:#176b58!important;border-radius:8px!important}
.topic-button.active .topic-index{background:#176b58!important;color:#fffdf8!important}
.revision-page{background:#fffdf8!important;border:1px solid #ded8cc!important;border-radius:14px!important;color:#202a27!important;box-shadow:none!important}
.revision-title{background:#f3f0e8!important;border-color:#ded8cc!important}
.revision-title h2,.note-label,.note-fact h4,.note-section h3,.note-reader h2,.note-reader h3{color:#202a27!important;font-family:"Playfair Display",Georgia,serif!important;font-weight:500!important}
.revision-kicker,.textbook-eyebrow,.textbook-overline,.chem-visual-label{color:#176b58!important}
.note-lead,.note-fact p,.note-section p{color:#5d6b62!important}
.revision-meta span,.note-fact-num,.note-section h3 span,.formula-tag,.tiny-pill{background:#e4eee6!important;color:#176b58!important;border-color:#d1e1d5!important}
.chem-figure,.particle-state,.phase-node,.vn-card,.vn-table,.tq,.note-extra>summary{background:#f2f0e9!important;border-color:#dcd5c8!important;color:#202a27!important}
.formula-band{background:#e7f0e8!important;border-color:#d0e0d3!important;border-left-color:#176b58!important;color:#174c40!important}
.note-table-wrap tr:first-child th,.note-table-wrap tr:first-child td{background:#e4eee6!important;color:#174c40!important}
.exam-tip{background:#f7e9e1!important;border-color:#ecd2c5!important;color:#713d2b!important}
.textbook-hero{background:#e4eee6!important;border:1px solid #cbdccc!important}
.textbook-hero h1{font-family:"Playfair Display",Georgia,serif!important;color:#202a27!important}
.textbook-hero p{color:#52665a!important}
.textbook-hero-footer span{background:#fffdf8!important;border-color:#d5dfd4!important;color:#52665a!important}
.textbook-number{background:#d7e8db!important;color:#176b58!important}
.textbook-table,.textbook-section table,.chem-table-wrap{border-color:#ded8cc!important}
.textbook-table th,.textbook-section table th,.chem-table-heading{background:#e9eee6!important;color:#283d32!important}
.textbook-table td,.textbook-section table td{color:#4f5f55!important;border-color:#e3ded4!important}
.textbook-application,.textbook-recall,.example-box,.note-callout,.question-preview,.result-box{background:#f2f0e9!important;border-color:#ddd7cc!important;color:#35443b!important}
.textbook-application.warning{background:#f7e9e1!important;border-color:#ecd2c5!important}
.textbook-recall button{background:#e4eee6!important;color:#176b58!important;border-color:#cbdccc!important}
.textbook-video-section{background:#203e35!important}
.textbook-video-copy h2{font-family:"Playfair Display",Georgia,serif!important;color:#fffdf8!important}
.textbook-video-copy p{color:#d8e4da!important}
.textbook-video-copy a{color:#b7e0c4!important}
.quiz-option{background:#fffdf8!important;border-color:#ded8cc!important;color:#35443b!important}
.quiz-option.correct{background:#e4f1e8!important;border-color:#a9d0b6!important}
.quiz-option.incorrect{background:#f7e9e1!important;border-color:#e6b9a5!important}
.element-cell{background:#e9eee6!important;border-color:#d2dcd0!important;color:#283d32!important}
.element-cell.cat-nonmetal{background:#e0eee6!important;border-color:#b9d8c5!important}
.element-cell.cat-metalloid{background:#eeebf3!important;border-color:#d9cfe7!important}
.element-cell.cat-noble{background:#f7e9e1!important;border-color:#e8cbbd!important}
.element-detail{background:#fffdf8!important;border-color:#ded8cc!important}
.detail-symbol,.ai-avatar{background:#e4eee6!important;color:#176b58!important}
.progress-track,.quiz-progress-track{background:#e4e1d8!important}
.progress-track span,.quiz-progress-track span{background:#176b58!important}
.daily-options button{background:#fffdf8!important;border:1px solid #dcd5c8!important;color:#35443b!important;border-radius:8px!important}
.daily-options button:hover{border-color:#176b58!important;background:#e4eee6!important}
.site-footer{border-color:#dcd5c8!important;color:#7b857e!important}
.site-footer a{color:#176b58!important}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid #176b58!important;outline-offset:3px!important}
@media(max-width:1100px){
 .sidebar{background:#f9f7f1!important;border-right:1px solid #dcd5c8!important;border-bottom:0!important}
 .sidebar.open{box-shadow:15px 0 45px #202a2720!important}
 .sidebar-topline,.sidebar-course-chip,.sidebar-bottom,.nav-group-label{display:block}
 .sidebar .side-nav{display:flex;flex-direction:column;align-items:stretch;gap:4px}
 .sidebar .nav-link{width:100%;min-height:46px;justify-content:flex-start;padding:8px 10px}
 .sidebar .nav-link .nav-copy small,.sidebar .nav-link .nav-count,.sidebar .nav-link .nav-ai-dot{display:block}
}
@media(max-width:800px){
 .hero{grid-template-columns:minmax(0,1fr)!important}
 .hero-copy{padding:38px 27px 27px!important}
 .hero-visual{min-height:320px!important}
 .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .lower-grid{grid-template-columns:1fr!important}
 .notes-layout{grid-template-columns:1fr!important}
 .topic-list{max-height:270px;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
 .hero h1,.hero h1 span{font-size:clamp(40px,11vw,54px)!important;letter-spacing:-1.8px!important}
 .hero-copy{padding:32px 21px 22px!important}
 .hero-visual{min-height:275px!important}
 .atom-stage{--atom-size:235px!important}
 .feature-grid{gap:9px!important}
 .feature-card{min-height:185px!important;padding:14px!important}
 .feature-card>strong{font-size:17px!important}
 .section-heading h2{font-size:23px!important}
 .topic-list{grid-template-columns:1fr}
 .panel{padding:17px!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
@media print{
 html,body,.app-shell,.main-area{background:#fff!important;color:#111!important}
 .sidebar,.topbar,.site-footer{display:none!important}
 .main-area{margin:0!important}.content-wrap{padding:0!important}
 .revision-page{border:0!important;background:#fff!important;color:#111!important}
}


/* Header + navigation repair: stable sidebar, no logo/nav collisions, high-contrast color system */
:root{
  --bg:#f3f6f8!important;
  --panel:#ffffff!important;
  --panel2:#eaf0f4!important;
  --line:#d5e0e7!important;
  --text:#172b3a!important;
  --muted:#526979!important;
  --teal:#087f8c!important;
  --blue:#315fca!important;
  --purple:#7255a3!important;
  --amber:#b65332!important;
}
html,body,.app-shell,.main-area{background:#f3f6f8!important;color:#172b3a!important}
.sidebar{
  position:fixed!important;inset:0 auto 0 0!important;
  width:258px!important;height:100vh!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  padding:22px 17px 16px!important;overflow-y:auto!important;
  background:#102536!important;color:#f5f9fc!important;
  border-right:1px solid #294454!important;border-bottom:0!important;
  box-shadow:8px 0 28px #1025360b!important;z-index:30!important;
  transform:none!important;
}
.sidebar-topline{display:flex!important;align-items:center!important;flex-shrink:0!important;padding:0 7px 18px!important;color:#a9c1ce!important}
.sidebar .brand{display:flex!important;align-items:center!important;gap:11px!important;flex-shrink:0!important;padding:0 7px 25px!important;margin:0!important;min-width:0!important}
.sidebar .brand-mark{flex:0 0 39px!important;width:39px!important;height:39px!important;display:grid!important;place-items:center!important;background:#16a6a0!important;color:#082432!important;border:1px solid #4ccbc1!important;border-radius:12px!important}
.sidebar .brand-copy{min-width:0!important}
.sidebar .brand-copy strong{font-family:"Plus Jakarta Sans","DM Sans",sans-serif!important;font-size:25px!important;font-weight:800!important;letter-spacing:-1.2px!important;color:#f5f9fc!important;white-space:nowrap!important}
.sidebar .brand-copy strong span{color:#4bd6cc!important}
.sidebar .brand-copy small{color:#a9c1ce!important;font-size:8px!important;letter-spacing:1.35px!important;white-space:nowrap!important}
.sidebar .brand-arrow{color:#4bd6cc!important;flex-shrink:0!important}
.sidebar-course-chip,.sidebar-journey-card{background:#172f40!important;border:1px solid #2d4b5d!important;border-radius:11px!important;color:#edf5fa!important}
.sidebar-course-chip{margin:0 0 21px!important}
.sidebar-course-chip b,.sidebar-journey-card b{color:#f5f9fc!important}
.sidebar-course-chip small,.sidebar-journey-card small{color:#b0c5d0!important}
.sidebar-journey-card *{color:#b0c5d0}
.sidebar .nav-group-label{color:#8faab9!important}
.sidebar .nav-link{display:flex!important;width:100%!important;min-width:0!important;align-items:center!important;gap:10px!important;padding:10px!important;border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;color:#c0d1db!important}
.sidebar .nav-link .nav-icon{flex:0 0 21px!important;color:#8faab9!important}
.sidebar .nav-copy{min-width:0!important}
.sidebar .nav-copy b{color:inherit!important}
.sidebar .nav-copy small{color:#9db4c1!important}
.sidebar .nav-link:hover{background:#1a3a4c!important;border-color:#315568!important;color:#fff!important}
.sidebar .nav-link.active{background:#164b59!important;border-color:#237785!important;color:#fff!important}
.sidebar .nav-link.active .nav-icon{color:#55e0d4!important}
.sidebar .nav-link.active .nav-copy small{color:#d0e9ec!important}
.sidebar .nav-count{background:#254758!important;color:#d5edf0!important}
.sidebar .sidebar-foot{color:#a9c1ce!important}
.sidebar .status-dot,.sidebar .sidebar-live-dot{background:#4bd6a2!important}
.main-area{margin-left:258px!important;min-width:0!important}
.topbar{
  position:sticky!important;top:0!important;z-index:15!important;
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
  justify-content:space-between!important;gap:18px!important;
  min-width:0!important;height:70px!important;padding:0 30px!important;
  background:#ffffffed!important;border-bottom:1px solid #d5e0e7!important;
  backdrop-filter:blur(16px)!important;
}
.breadcrumbs{display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important;white-space:nowrap!important;color:#526979!important}
.breadcrumbs strong{color:#172b3a!important}
.top-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;min-width:0!important;flex-shrink:0!important}
.global-search{width:clamp(145px,19vw,235px)!important;min-width:0!important;background:#f7fafb!important;border:1px solid #cbd9e1!important;color:#526979!important}
.global-search input{color:#172b3a!important}
.global-search input::placeholder{color:#647c8a!important}
.icon-button,.language-toggle{background:#fff!important;border:1px solid #cbd9e1!important;color:#234253!important}
.avatar{background:#d9f2ef!important;border-color:#9ddbd5!important;color:#086e78!important}
.mobile-menu{display:none!important}
.hero,.feature-card,.panel,.formula-card,.calculator-card,.practice-main,.practice-side,.tutor-chat,.tool-card,.textbook-card,.note-reader,.daily-panel{border-color:#d2dfe6!important}
.hero{background:#fff!important}
.hero h1,.hero h1 span{color:#172b3a!important}
.hero h1 span{color:#087f8c!important}
.eyebrow,.section-kicker,.textbook-eyebrow,.textbook-overline,.chem-visual-label{color:#087f8c!important}
.btn-primary{background:#087f8c!important;border-color:#087f8c!important;color:#fff!important}
.btn-primary:hover{background:#066772!important}
.subtle-link,.text-button,.site-footer a{color:#087f8c!important}
.feature-icon,.feature-icon.teal{background:#d9f2ef!important;color:#087f8c!important;border-color:#b6e5df!important}
.feature-icon.blue{background:#e2eaff!important;color:#315fca!important;border-color:#cbd8ff!important}
.feature-icon.purple{background:#eee8fb!important;color:#7255a3!important;border-color:#ded2f6!important}
.feature-icon.amber{background:#fff0e8!important;color:#a9472b!important;border-color:#f0d0c0!important}
.topic-button{color:#405969!important}
.topic-button:hover,.topic-button.active{background:#e3f4f2!important;border-color:#9ddbd5!important;color:#075d65!important}
.topic-index,.formula-tag,.tiny-pill{background:#d9f2ef!important;color:#087f8c!important;border-color:#b6e5df!important}
.progress-track,.quiz-progress-track{background:#dce6eb!important}
.progress-track span,.quiz-progress-track span{background:#087f8c!important}
@media(max-width:1100px){
  .sidebar{width:280px!important;transform:translateX(-110%)!important;transition:transform .22s ease!important;z-index:40!important}
  .sidebar.open{transform:translateX(0)!important}
  .main-area{margin-left:0!important}
  .mobile-menu{display:block!important;flex:0 0 36px!important}
  .topbar{height:62px!important;padding:0 18px!important;gap:12px!important}
  .breadcrumbs{flex:1 1 auto!important;overflow:hidden!important}
  .top-actions{flex:0 1 auto!important}
}
@media(max-width:600px){
  .topbar{padding:0 11px!important;gap:8px!important}
  .breadcrumbs span:first-child,.breadcrumbs .crumb-slash{display:none!important}
  .breadcrumbs{font-size:11px!important}
  .top-actions{gap:5px!important}
  .global-search{width:clamp(100px,31vw,155px)!important;height:34px!important}
  .global-search kbd{display:none!important}
  .language-toggle{min-width:36px!important;padding:0 6px!important}
  .top-actions .avatar{display:none!important}
  .content-wrap{padding:18px 13px 28px!important}
}
@media(max-width:380px){
  .global-search{width:96px!important}
  .topbar{gap:5px!important}
  .icon-button{width:32px!important;height:32px!important}
}


/* GchemIB polished horizontal navigation — logo first, tabs on top, no sidebar layout */
:root{
 --bg:#f4f7fb!important;--panel:#ffffff!important;--panel2:#edf3f8!important;
 --line:#dbe5ef!important;--text:#17283f!important;--muted:#52677e!important;
 --teal:#00b8ad!important;--blue:#3867f5!important;--purple:#8062d9!important;--amber:#e27b4d!important;
}
html,body,.app-shell,.main-area{background:#f4f7fb!important;color:#17283f!important}
.app-shell{min-height:100vh!important}
.sidebar{
 position:sticky!important;top:0!important;inset:auto!important;
 width:100%!important;height:auto!important;min-height:82px!important;
 padding:13px clamp(18px,3vw,46px)!important;margin:0!important;
 display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
 align-items:center!important;gap:clamp(16px,2.5vw,38px)!important;
 overflow:visible!important;transform:none!important;
 background:#10243a!important;color:#f5f9ff!important;
 border:0!important;border-bottom:1px solid #29445f!important;
 box-shadow:0 8px 26px #10243a14!important;z-index:50!important;
}
.sidebar-topline,.sidebar-course-chip,.sidebar-bottom{display:none!important}
.sidebar .brand{
 flex:0 0 auto!important;display:flex!important;align-items:center!important;
 gap:10px!important;padding:0!important;margin:0!important;min-width:176px!important;
}
.sidebar .brand-mark{
 flex:0 0 39px!important;width:39px!important;height:39px!important;
 display:grid!important;place-items:center!important;background:linear-gradient(145deg,#4ce3d3,#00a99f)!important;
 color:#09263a!important;border:1px solid #7cece1!important;border-radius:12px!important;
 box-shadow:0 5px 18px #00c9b530!important;
}
.sidebar .brand-copy{min-width:0!important}
.sidebar .brand-copy strong{
 font-family:"Plus Jakarta Sans","DM Sans",sans-serif!important;font-size:24px!important;
 font-weight:800!important;letter-spacing:-1.2px!important;color:#f8fbff!important;white-space:nowrap!important;
}
.sidebar .brand-copy strong span{color:#4ce3d3!important}
.sidebar .brand-copy small{font-size:8px!important;letter-spacing:1.25px!important;color:#b3c5d8!important;white-space:nowrap!important}
.sidebar .brand-arrow{display:none!important}
.sidebar .side-nav{
 flex:1 1 auto!important;min-width:0!important;display:flex!important;flex-direction:row!important;
 align-items:center!important;justify-content:flex-end!important;gap:5px!important;overflow:visible!important;
}
.sidebar .nav-group-label{display:none!important}
.sidebar .nav-link{
 flex:0 1 auto!important;width:auto!important;min-width:0!important;min-height:42px!important;
 display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;
 gap:7px!important;padding:9px 11px!important;border:1px solid transparent!important;border-radius:10px!important;
 background:transparent!important;color:#c2d1e0!important;white-space:nowrap!important;
}
.sidebar .nav-link .nav-icon{flex:0 0 auto!important;width:auto!important;font-size:15px!important;color:#8faac1!important}
.sidebar .nav-copy{min-width:0!important}
.sidebar .nav-copy b{font-size:11px!important;font-weight:700!important;color:inherit!important}
.sidebar .nav-copy small,.sidebar .nav-count,.sidebar .nav-ai-dot,.sidebar .nav-active-arrow{display:none!important}
.sidebar .nav-link:hover{background:#1a3854!important;border-color:#315779!important;color:#fff!important}
.sidebar .nav-link.active{
 background:linear-gradient(135deg,#087e8b,#086b7d)!important;
 border-color:#1ba8b0!important;color:#fff!important;box-shadow:0 4px 14px #00b8ad24!important;
}
.sidebar .nav-link.active .nav-icon{color:#83fff1!important}
.main-area{margin:0!important;min-width:0!important}
.topbar{
 position:relative!important;top:auto!important;z-index:10!important;
 display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;
 gap:16px!important;width:100%!important;height:62px!important;padding:0 clamp(18px,3vw,46px)!important;
 background:#fff!important;border:0!important;border-bottom:1px solid #dbe5ef!important;
 box-shadow:0 3px 12px #152d4610!important;backdrop-filter:none!important;
}
.breadcrumbs{display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important;white-space:nowrap!important;color:#61758a!important}
.breadcrumbs strong{color:#17283f!important}
.top-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:9px!important;min-width:0!important;flex-shrink:0!important}
.global-search{width:clamp(145px,20vw,245px)!important;min-width:0!important;background:#f5f8fc!important;border:1px solid #d4e0eb!important;border-radius:10px!important;color:#61758a!important}
.global-search input{color:#17283f!important}
.global-search input::placeholder{color:#71869a!important}
.icon-button,.language-toggle{background:#fff!important;border:1px solid #d4e0eb!important;color:#29465f!important;border-radius:10px!important}
.icon-button:hover,.language-toggle:hover{background:#eaf8f7!important;border-color:#80d8d0!important;color:#087e8b!important}
.avatar{background:#d8f5f1!important;border:1px solid #9de5dc!important;color:#087e8b!important}
.mobile-menu{display:none!important}
.content-wrap{max-width:1480px!important;padding:32px clamp(18px,3vw,46px) 36px!important}
.hero{
 background:linear-gradient(115deg,#fff 0%,#fff 56%,#edf9fa 100%)!important;
 border:1px solid #d9e7ef!important;border-radius:22px!important;
 box-shadow:0 14px 42px #183e5b0a!important;
}
.hero:after{background:linear-gradient(180deg,#00b8ad,#3867f5)!important;width:5px!important}
.hero h1,.hero h1 span{color:#17283f!important}
.hero h1 span{color:#087f8b!important}
.hero-visual{background:linear-gradient(145deg,#eaf8f7,#eaf0ff)!important}
.hero-visual:before{background:radial-gradient(circle at 50% 46%,#00b8ad1a,transparent 58%)!important}
.atom-core{background:radial-gradient(circle at 33% 28%,#b5fff6 0,#42d9ca 27%,#078e9a 70%,#174c78 100%)!important}
.atom-orbit{border-color:#3867f580!important}
.atom-orbit.orbit-two{border-color:#00a99f80!important}
.atom-orbit.orbit-three{border-color:#7388d980!important}
.atom-electron{background:#3867f5!important;box-shadow:0 0 12px #3867f555!important}
.orbit-two .atom-electron{background:#00a99f!important}
.orbit-three .atom-electron{background:#e27b4d!important}
.atom-label,.atom-caption{color:#526b80!important}
.atom-caption strong{color:#17283f!important}
.floating-chip,.visual-caption{background:#fff!important;border:1px solid #d4e3eb!important;color:#29465f!important;box-shadow:0 8px 22px #17283f0d!important}
.section-heading{border-color:#dbe5ef!important}
.section-kicker,.eyebrow,.textbook-eyebrow,.textbook-overline,.chem-visual-label{color:#087f8b!important}
.section-heading h2,.panel h3,.page-intro h1{color:#17283f!important}
.btn-primary{background:linear-gradient(135deg,#078f99,#087e8b)!important;border-color:#087e8b!important;color:#fff!important;box-shadow:0 7px 18px #087e8b24!important}
.btn-primary:hover{background:#066b79!important}
.btn-ghost,.btn-secondary{background:#fff!important;border-color:#cfdeea!important;color:#29465f!important}
.feature-card,.panel,.formula-card,.calculator-card,.practice-main,.practice-side,.tutor-chat,.tool-card,.textbook-topbar,.textbook-section,.textbook-card,.note-reader,.daily-panel{
 background:#fff!important;border:1px solid #dbe5ef!important;border-radius:16px!important;
 box-shadow:0 6px 22px #17395408!important;color:#17283f!important;
}
.feature-card:hover{border-color:#8cd9d4!important;box-shadow:0 12px 30px #17395410!important}
.feature-card>strong,.panel h3,.note-reader h2,.note-reader h3{color:#17283f!important}
.feature-card p,.panel p,.page-intro p,.textbook-card p,.textbook-card li,.note-reader p,.note-reader li{color:#52677e!important}
.feature-icon,.feature-icon.teal{background:#d9f7f3!important;color:#087f8b!important;border-color:#b2e9e2!important}
.feature-icon.blue{background:#e4ebff!important;color:#315fca!important;border-color:#cbd7ff!important}
.feature-icon.purple{background:#eee8ff!important;color:#7255b1!important;border-color:#ded2ff!important}
.feature-icon.amber{background:#fff0e8!important;color:#a9472b!important;border-color:#f0d0c0!important}
.card-bottom{border-color:#e3ebf1!important;color:#71869a!important}
.card-bottom b,.subtle-link,.text-button,.site-footer a{color:#087f8b!important}
.topic-list{background:#edf3f8!important;border:1px solid #dbe5ef!important;border-radius:14px!important}
.topic-button{color:#405a70!important}
.topic-button:hover,.topic-button.active{background:#dff7f4!important;border-color:#8bdad3!important;color:#075d65!important}
.topic-index,.formula-tag,.tiny-pill{background:#d9f7f3!important;color:#087f8b!important;border-color:#b2e9e2!important}
.revision-page{background:#fff!important;border-color:#dbe5ef!important;color:#17283f!important}
.revision-title{background:#f0f5f9!important;border-color:#dbe5ef!important}
.revision-title h2,.note-label,.note-fact h4,.note-section h3{color:#17283f!important}
.note-lead,.note-fact p,.note-section p{color:#52677e!important}
.chem-figure,.particle-state,.phase-node,.vn-card,.vn-table,.tq,.note-extra>summary{background:#f4f7fb!important;border-color:#dbe5ef!important;color:#17283f!important}
.formula-band{background:#e2f7f4!important;border-color:#b8e9e2!important;border-left-color:#087f8b!important;color:#075d65!important}
.note-table-wrap tr:first-child th,.note-table-wrap tr:first-child td,.textbook-table th,.textbook-section table th,.chem-table-heading{background:#e4f3f7!important;color:#173d55!important}
.exam-tip{background:#fff0e8!important;border-color:#f0d0c0!important;color:#763b28!important}
.textbook-hero{background:linear-gradient(125deg,#e1f7f4,#e9efff)!important;border:1px solid #c8e6e6!important}
.textbook-hero h1{color:#17283f!important}
.textbook-hero p{color:#405a70!important}
.textbook-video-section{background:#102f43!important}
.textbook-video-copy h2{color:#fff!important}
.textbook-video-copy p{color:#d7e6ef!important}
.textbook-video-copy a{color:#6ef0e0!important}
.quiz-option{background:#fff!important;border-color:#dbe5ef!important;color:#29465f!important}
.quiz-option.correct{background:#e3f7eb!important;border-color:#a9d9bb!important}
.quiz-option.incorrect{background:#fff0e8!important;border-color:#e9b9a5!important}
.element-cell{background:#edf3f8!important;border-color:#d6e2ec!important;color:#203d55!important}
.element-cell.cat-nonmetal{background:#e0f4e9!important;border-color:#b5e2c8!important}
.element-cell.cat-metalloid{background:#eee8ff!important;border-color:#ded2ff!important}
.element-cell.cat-noble{background:#fff0e8!important;border-color:#f0d0c0!important}
.element-detail{background:#fff!important;border-color:#dbe5ef!important}
.detail-symbol,.ai-avatar{background:#d9f7f3!important;color:#087f8b!important}
.progress-track,.quiz-progress-track{background:#dfe8f0!important}
.progress-track span,.quiz-progress-track span{background:linear-gradient(90deg,#00b8ad,#3867f5)!important}
@media(max-width:1100px){
 .sidebar{position:sticky!important;top:0!important;width:100%!important;height:auto!important;min-height:0!important;flex-wrap:wrap!important;gap:8px 18px!important;padding:12px 18px 0!important;overflow:hidden!important}
 .sidebar .brand{min-height:44px!important;flex:1 0 100%!important;padding:0 0 8px!important}
 .sidebar .side-nav{flex:1 1 100%!important;justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important;padding:0 0 10px!important;scrollbar-width:thin!important}
 .sidebar .nav-link{flex:0 0 auto!important;padding:9px 12px!important}
 .main-area{margin:0!important}
 .topbar{height:58px!important;padding:0 18px!important}
 .mobile-menu{display:none!important}
}
@media(max-width:680px){
 .sidebar{gap:4px!important;padding:10px 13px 0!important}
 .sidebar .brand{flex:1 0 100%!important;padding-bottom:7px!important}
 .sidebar .side-nav{justify-content:flex-start!important;gap:4px!important}
 .sidebar .nav-link{min-height:37px!important;padding:8px 10px!important}
 .sidebar .nav-copy b{font-size:10px!important}
 .topbar{height:auto!important;min-height:56px!important;flex-wrap:wrap!important;gap:8px!important;padding:9px 13px!important}
 .breadcrumbs{flex:1 1 auto!important}
 .top-actions{flex:1 1 100%!important;justify-content:flex-start!important}
 .global-search{width:min(58vw,250px)!important}
 .content-wrap{padding:18px 13px 28px!important}
 .hero{grid-template-columns:minmax(0,1fr)!important}
 .hero-copy{padding:32px 22px 23px!important}
 .hero-visual{min-height:275px!important}
}


/* ACCESSIBILITY PASS — larger, easier-to-read type across the whole site */
html { font-size: 16px; }
body { font-size: 16px !important; line-height: 1.7 !important; }
button, input, select, textarea { font-size: inherit; }
p, li { line-height: 1.75; }

/* Tiny captions, metadata, labels and helper text: raise the old 7–10px range
   to a readable 12–14px range (approximately double the smallest text). */
.sidebar-topline,
.sidebar-version,
.brand-copy small,
.sidebar-course-chip small,
.sidebar-course-chip b,
.nav-group-label,
.nav-copy small,
.nav-count,
.sidebar-foot,
.sidebar-foot-version,
.journey-card-head,
.journey-labels small,
.sidebar-journey-link,
.eyebrow,
.section-kicker,
.feature-meta,
.card-bottom,
.hero-proof,
.proof-avatars i,
.visual-caption small,
.floating-chip,
.breadcrumbs,
.global-search input,
.global-search kbd,
.intro-stat span,
.toolbar select,
.topic-button small,
.topic-index,
.formula-tag,
.formula-units,
.legend,
.element-cell .atomic-num,
.element-cell small,
.detail-hint,
.element-detail h3 small,
.quiz-top,
.tiny-pill,
.progress-row,
.daily-options button,
.inline-feedback,
.roadmap-stats div span,
.orbit-tag,
.roadmap-principle > span,
.roadmap-source,
.status-dot,
.language-toggle {
  font-size: 12px !important;
}

/* Small body copy and controls: 14–16px minimum for comfortable reading. */
.hero-copy > p,
.feature-card p,
.panel p,
.page-intro p,
.note-reader p,
.note-reader li,
.note-callout,
.example-box p,
.formula-card p,
.element-detail p,
.quiz-option,
.quiz-explanation,
.practice-side p,
.practice-side > strong,
.calculator-card label,
.result-box,
.question-preview,
.daily-options button,
.empty-state p,
.topic-button strong,
.formula-card h3,
.example-box strong,
.feature-card > strong,
.panel h3 {
  font-size: 15px !important;
}

.btn,
.subtle-link,
.text-button,
.search-field input,
.toolbar select,
.calculator-card input,
.quiz-controls button,
.top-actions button,
.language-toggle {
  font-size: 14px !important;
}

.nav-link { font-size: 15px !important; }
.nav-copy b { font-size: 15px !important; }
.brand-copy strong { font-size: 23px !important; }
.brand-copy small { letter-spacing: .8px !important; }
.section-heading h2 { font-size: 25px !important; }
.page-intro h1 { font-size: clamp(34px, 3.5vw, 44px) !important; }
.hero h1 { font-size: clamp(40px, 4.2vw, 58px) !important; }
.note-reader h2 { font-size: 30px !important; }
.note-reader h3 { font-size: 20px !important; }
.quiz-question { font-size: 25px !important; }
.equation { font-size: 25px !important; }
.topic-button { padding: 14px !important; }
.feature-card { padding: 20px !important; }
.panel { padding: 24px !important; }
.search-field, .global-search { min-height: 46px; }
.element-cell { min-height: 64px; }
.element-cell strong { font-size: 17px !important; }

/* Preserve readability on phones without letting the layout overflow. */
@media (max-width: 760px) {
  body { font-size: 16px !important; }
  .content-wrap { padding: 22px 16px !important; }
  .hero-copy { padding: 30px 22px !important; }
  .hero h1 { font-size: clamp(36px, 9vw, 48px) !important; }
  .page-intro h1 { font-size: 34px !important; }
  .feature-card p, .panel p, .page-intro p,
  .note-reader p, .note-reader li { font-size: 15px !important; }
  .sidebar-topline, .nav-group-label, .section-kicker,
  .feature-meta, .card-bottom, .intro-stat span,
  .topic-button small, .formula-tag, .formula-units,
  .legend, .element-cell .atomic-num, .element-cell small,
  .quiz-top, .tiny-pill, .sidebar-foot { font-size: 12px !important; }
}


/* Topic-specific real scientific illustrations, embedded in every revision note */
.topic-visual-board{
  margin:0 0 30px;padding:24px;border:1px solid var(--line,#24374d);
  border-radius:20px;background:var(--panel,#0d1b2c);color:var(--text,#edf5ff);
}
.topic-visual-heading>span{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--accent,#3ce0ce)}
.topic-visual-heading h3{margin:7px 0 5px;font-size:clamp(21px,2.4vw,29px);line-height:1.2}
.topic-visual-heading p{margin:0 0 18px;color:var(--muted,#a9b8ca);font-size:13px}
.topic-visual-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:15px}
.topic-visual-card{margin:0;min-width:0;overflow:hidden;border:1px solid var(--line,#24374d);border-radius:15px;background:var(--surface,#101f32)}
.topic-visual-card img{display:block;width:100%;height:260px;object-fit:contain;background:#f8fafc;padding:12px}
.topic-visual-main img{height:300px;object-fit:contain}
.topic-visual-card figcaption{display:flex;flex-direction:column;gap:5px;padding:13px 15px}
.topic-visual-card figcaption strong{font-size:14px;color:var(--text,#edf5ff)}
.topic-visual-card figcaption span{font-size:12px;line-height:1.55;color:var(--muted,#a9b8ca)}
.topic-visual-credit{margin:12px 0 0;font-size:11px;color:var(--muted,#a9b8ca)}
@media(max-width:680px){.topic-visual-board{padding:15px}.topic-visual-grid{grid-template-columns:1fr}.topic-visual-card img,.topic-visual-main img{height:230px}}
@media print{.topic-visual-board{break-inside:avoid;background:white;color:#152238;border:1px solid #cbd5e1}.topic-visual-card figcaption strong{color:#152238}.topic-visual-card figcaption span,.topic-visual-credit,.topic-visual-heading p{color:#475569}}