:root{--green:#186f62;--gold:#ae8048;scroll-behavior:smooth}body{background:#f2f5ef}main{max-width:1800px}.intro{padding-bottom:4px}.intro h1{font-size:clamp(32px,3.4vw,58px)}.intro em{color:#758b68}.lab-nav{display:flex;gap:28px;border-bottom:1px solid #d8e2d7;padding:0 0 18px;margin-bottom:24px;flex-wrap:wrap}.lab-nav a{font-size:12px;text-decoration:none;color:#5c7263}.lab-nav a:first-child{color:#1a6f60}.workspace{grid-template-columns:250px minmax(0,1fr) 285px;align-items:start;gap:18px}.panel{box-shadow:0 3px 16px #29443a03}.panel-title h2{font-size:14px}.panel-title>span{font-size:10px}.substance-search{padding:14px 14px 0}.substance-search input,.substance-search select{width:100%;font-size:12px;padding:10px;background:#f8faf5;border:1px solid #dbe5d9;border-radius:6px}.substance-search select{margin-top:7px}.substance-search .tiny{font-size:10px;line-height:1.6;margin:9px 0}.example-scroll{height:285px;overflow:auto;padding:0 8px 10px;scrollbar-color:#bdcfc0 #f5f8f1;scrollbar-width:thin}.example-button{font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 3px;border:1px solid transparent;padding:10px 9px;width:100%;border-radius:5px;text-align:left;background:transparent}.example-button:hover,.example-button[aria-pressed=true]{background:#eaf2e7;border-color:#cbdcc8}.example-button small{display:block;font-size:10px;color:#78907a;margin-top:5px;line-height:1.5}.catalog-type{font:11px Georgia,serif;background:#f0f3e8;color:#8b825a;padding:4px 5px;border-radius:5px;flex-shrink:0}.atom-title{margin-top:6px;border-top:1px solid var(--line)}.palette>p.subtle{font-size:11px}.element-scroll{height:250px}.selected-element{font-size:11px}.editor-heading{align-items:center;padding:21px 20px 16px}.editor-heading h2{font-size:25px}.editor-heading .accent{font-size:11px;padding:13px 15px;line-height:1.5;max-width:245px}.ring-builder{margin:0 16px 12px;background:#f0f5ec;border:1px solid #dee7d8;border-radius:8px;padding:12px}.ring-buttons,.substitution-controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.ring-buttons button{background:white;font-size:11px}.ring-buttons label{font-size:10px;color:#6d826e;display:flex;gap:3px;align-items:center}.substitution-controls{border-top:1px solid #dce6d7;padding-top:10px;margin-top:10px;align-items:end}.substitution-controls label{display:flex;flex-direction:column;gap:5px;font-size:9px;letter-spacing:.4px;color:#7b8d77}.substitution-controls select{font-size:11px;background:white;padding:7px;max-width:165px}.substitution-controls button{font-size:10px;padding:8px;background:#fcfdf9}#add-substituent{background:#1f7666;color:white;border-color:#1f7666}.ring-builder>p{font-size:9px;line-height:1.7;margin:9px 0 0;color:#82917c}.representation-heading{display:flex;align-items:center;justify-content:space-between;padding:0 17px 8px}.representation-heading>span{font-size:8px;letter-spacing:1px;color:#849180}.representation-heading button{font-size:10px;padding:5px 9px;background:none}.view-tabs{gap:16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding:0 18px 8px;max-width:100%}.view-tabs button{flex-shrink:0;font-size:10px}.stage-wrap{height:440px;background:radial-gradient(ellipse at 45% 45%,#fafcf6,#f1f5ec)}.stage-tag{pointer-events:none}.stage-tag span{font-size:11px}.stage-tag small{font-size:9px}.metrics strong{font-size:26px}.metrics span{font-size:9px}.view-hint{font-size:11px;line-height:1.7}.notice{font-size:11px}.insights{gap:14px}.aromatic-insight{border-top:3px solid #bd9d62}#aromatic-status{padding:18px;font-size:12px;line-height:1.75;color:#5d786b}#aromatic-status strong{font-size:14px;color:#526a5c;display:block}#aromatic-status.positive strong{color:#1d7564}#aromatic-status p{margin:9px 0}#aromatic-status small{font-size:10px;display:block;color:#96a18e}#substance-properties{padding:18px;font-size:12px;line-height:1.75}#substance-properties h3{font-size:20px;font-family:var(--serif);font-weight:400;margin:0 0 8px;color:#2d5147}.property-family{font-size:9px;border:1px solid #dae4d4;padding:4px 8px;border-radius:4px;color:#809173}#substance-properties>p{color:#6e816f;margin:14px 0}#substance-properties dl{margin:14px 0;border-top:1px solid #e3e9dc}#substance-properties dt{font-size:9px;color:#91a087;padding-top:9px}#substance-properties dd{font-size:12px;font-weight:600;margin:1px 0 7px;color:#456652}#substance-properties a{font-size:10px;display:block;margin-top:15px}#substance-properties button{font-size:11px;text-align:left;line-height:1.6;background:#edf3e6}.atom-inspector .panel-title h2{font-size:12px}.lessons{margin-top:30px}.education,.reaction-section{margin-top:55px;scroll-margin-top:30px}.section-title{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:23px}.section-title h2{font-family:var(--serif);font-size:35px;font-weight:400;margin:0;letter-spacing:-1px}.section-title>p{max-width:360px;font-size:12px;color:#7e8f78;line-height:1.8}.education-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}.education-grid>article{padding:28px}.chapter-number{font-size:9px;letter-spacing:1.6px;color:#a58d5e}.education h3{font:25px var(--serif);color:#385646;margin:18px 0}.education article p,.education li{font-size:12px;line-height:1.9;color:#70846f}.education article b{color:#4e7057}.education ol{padding-left:20px}.education li{margin-bottom:9px}.education .tiny{font-size:10px;line-height:1.8;color:#90a085}.huckel-checks{display:grid;gap:8px;margin:17px 0;font-size:12px;color:#52745b}.huckel-checks label{display:flex;gap:8px;align-items:center}.pi-label{font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:15px}.pi-label input{width:75px;padding:8px;border-radius:5px;border:1px solid #d4e1cc;background:#fafcf6;font-size:18px}.huckel-result{margin:14px 0;padding:14px;border:1px solid #dddbc2;border-radius:8px;background:#f5f2e8;line-height:1.6}.huckel-result p{margin:5px 0 0;font-size:11px!important}.huckel-result strong{font-size:12px}.huckel-result.aromatic{background:#eaf2e6;border-color:#d4e2ca;color:#3e7752}.huckel-result.anti{background:#fbefe4;border-color:#ecd9bd;color:#9c6933}.resonance-mark{font:80px Georgia;text-align:center;line-height:1.3;color:#6d9277;background:#f2f5eb;border-radius:10px;margin:18px 0}.resonance-mark span{font-size:40px;color:#c0a66b;vertical-align:middle}.education button{font-size:11px;background:#f5f8ef;padding:10px 12px;margin-top:5px}.compare-buttons{display:flex;flex-wrap:wrap;gap:6px}.education details{margin-top:17px}.education summary{font-size:11px;padding:12px 0;background:none}.reactions-workspace{display:grid;grid-template-columns:290px minmax(0,1fr);overflow:hidden}#reaction-list{max-height:720px;overflow:auto;background:#f7f9f2;padding:13px;border-right:1px solid #dce5d5;scrollbar-width:thin}#reaction-list button{display:block;width:100%;text-align:left;font-size:12px;padding:14px 13px;margin:0 0 5px;background:transparent;border:1px solid transparent;line-height:1.6}#reaction-list button[aria-pressed=true]{background:white;border-color:#c6d8be;color:#236f4c;box-shadow:0 2px 6px #44633e05}#reaction-list small{display:block;font-size:9px;color:#9ba78f;margin-bottom:4px}#reaction-detail{padding:32px 38px}#reaction-detail h3{font:31px var(--serif);color:#365b47;margin:12px 0 20px}#reaction-detail>p:not(.eyebrow){font-size:13px;color:#70826c;line-height:1.9}.reaction-equation{background:#f1f5e9;border:1px solid #dfe7d4;border-radius:8px;padding:17px 22px;font-size:clamp(13px,1.5vw,20px)!important;color:#406c50!important;overflow-wrap:anywhere}.reaction-molecules{display:grid;grid-template-columns:minmax(0,1fr) 35px minmax(0,1fr);gap:10px;align-items:center;margin:20px 0}.reaction-molecules>div{text-align:center;background:#fcfdf9;border:1px solid #eaf0e2;border-radius:10px;padding:8px 10px 15px;min-width:0}.reaction-molecules svg{width:100%;height:170px}.reaction-molecules b{display:block;font-weight:500;font-size:12px;color:#47694e}.reaction-molecules small{display:block;font-size:11px;color:#8b9d80;margin-top:6px}.reaction-molecules>span{font-size:26px;color:#bba374;text-align:center}.reaction-generic{height:170px;display:grid;place-content:center;text-align:center;line-height:1.8;font:13px/2 Georgia;color:#9ba88b}.mechanism{border:1px solid #e1e8d8;padding:18px;border-radius:9px;background:#fafcf6}.mechanism-steps{display:flex;gap:9px;align-items:center}.mechanism-steps button{border-radius:50%;width:28px;height:28px;font-size:11px;padding:0;background:#f0f4e8;color:#8b9d7d}.mechanism-steps button[aria-pressed=true]{background:#638d69;border-color:#638d69;color:white}.mechanism-steps>span{font-size:10px;color:#a0ac93;margin-left:8px}.mechanism p{font-size:12px;line-height:1.8;color:#6e8568;min-height:42px}.mechanism>button,.reaction-actions button{font-size:11px;background:white;padding:9px 13px}.reaction-actions{display:flex;gap:10px;margin-top:17px;flex-wrap:wrap}.reaction-actions button:last-child{background:#29785d;color:white;border-color:#29785d}.directing{margin-top:17px}.directing summary{padding:18px 22px;font-size:13px;background:#fbfcf7}.directing>div{padding:5px 25px 20px;overflow:auto}.directing p{font-size:12px;color:#74866b;line-height:1.8}.directing table{border-collapse:collapse;width:100%;font-size:12px}.directing td,.directing th{text-align:left;padding:13px;border-bottom:1px solid #e7eddf;line-height:1.7}.source-strip{display:flex;gap:23px;flex-wrap:wrap;margin-top:32px;padding-top:22px;border-top:1px solid #dce5d7;font-size:10px;color:#91a184}.source-strip b{font-weight:500;color:#667d61}.source-strip a{color:#91a184}.gallery-dialog{width:calc(100% - 45px);max-width:1360px;max-height:92vh;overflow:auto;padding:32px;background:#f7faf3}.gallery-dialog h2{margin-top:12px}.all-views{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-top:23px}.view-card{display:flex;flex-direction:column;align-items:stretch;padding:0;border:1px solid #dce6d4;border-radius:9px;overflow:hidden;text-align:left;background:white}.view-card:hover{border-color:#72a078;box-shadow:0 3px 14px #42784a10}.view-card>span{padding:13px 17px;border-bottom:1px solid #edf1e8;font-size:12px;color:#56794e}.view-card svg{height:220px;width:100%;background:radial-gradient(ellipse,#fafcf6,#f3f6ed)}.view-card>small{font-size:10px;color:#8a9b80;line-height:1.8;padding:13px 17px;border-top:1px solid #edf1e8}.gallery-dialog>form{position:sticky;top:0;z-index:2}.gallery-dialog .close{background:#e9efdf;border-radius:50%;right:-16px;top:-16px}.gallery-dialog .close:focus{outline:2px solid #7d9e69}a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #b98a4a;outline-offset:3px}.substitution-controls select,.bond-label select{min-height:32px}#ring-numbering{overflow-wrap:anywhere}#construction{scroll-margin-top:25px}.editor{min-width:0}.palette{min-width:0}
@media(min-width:1700px){.workspace{grid-template-columns:270px minmax(0,1fr) 310px}.stage-wrap{height:500px}}
@media(max-width:1350px){.workspace{grid-template-columns:220px minmax(0,1fr) 245px;gap:13px}.editor-heading{padding:17px 14px}.editor-heading h2{font-size:21px}.editor-heading .accent{font-size:10px;padding:10px;max-width:200px}.ring-builder{margin:0 12px 12px}.stage-wrap{height:410px}.education-grid{gap:14px}.education-grid>article{padding:22px}.education h3{font-size:22px}}
@media(max-width:1100px){.workspace{grid-template-columns:230px minmax(0,1fr)}.insights{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}.education-grid{grid-template-columns:1fr 1fr}.recognition-card{grid-column:1/-1}.reactions-workspace{grid-template-columns:245px minmax(0,1fr)}#reaction-detail{padding:25px}.all-views{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics strong{font-size:23px}}
@media(max-width:760px){.workspace{grid-template-columns:190px minmax(0,1fr)}main{padding:24px 14px}.editor-heading{align-items:flex-start;gap:10px}.editor-heading h2{font-size:20px}.editor-heading .accent{font-size:9px;padding:8px;max-width:165px}.insights{grid-template-columns:1fr 1fr}.education-grid{grid-template-columns:1fr}.recognition-card{grid-column:auto}.section-title{display:block}.section-title h2{font-size:30px}.section-title>p{max-width:none}.reactions-workspace{grid-template-columns:1fr}#reaction-list{display:flex;gap:6px;max-height:none;overflow-x:auto;border-right:0;border-bottom:1px solid #dce5d5}#reaction-list button{width:180px;flex-shrink:0;margin:0;font-size:11px}#reaction-detail{padding:24px 20px}.source-strip{gap:14px}.lab-nav{gap:15px;font-size:10px}.gallery-dialog{padding:24px}.view-card svg{height:180px}.metrics span{font-size:8px}.metrics strong{font-size:21px}}
@media(max-width:660px){.workspace{display:flex;flex-direction:column}.palette{order:0;width:100%}.palette .example-scroll{height:185px;display:grid;grid-template-columns:1fr 1fr;align-content:start}.example-button{padding:9px 7px;font-size:11px}.example-button small{font-size:9px}.catalog-type{display:none}.palette>p.subtle,.selected-element{display:none}.atom-title{margin-top:0}.palette .favorites{margin-bottom:8px}.palette details{margin:0 12px 12px}.substance-search{padding:12px 12px 0;display:grid;grid-template-columns:1fr 1fr;gap:6px}.substance-search select{margin:0}.substance-search input,.substance-search select{font-size:11px;padding:8px;min-width:0}.substance-search p{grid-column:1/-1;margin:2px 0 5px!important}.editor{order:1}.insights{order:2;display:grid;grid-template-columns:1fr;width:100%}.stage-wrap{height:350px}.intro h1{font-size:35px}.intro p:not(.eyebrow){font-size:12px}.lab-nav{gap:12px;line-height:1.6;padding-bottom:14px;margin-bottom:16px}.lab-nav a{font-size:10px}.editor-heading .accent{max-width:170px;font-size:10px}.ring-builder{padding:10px}.ring-buttons button{font-size:10px;padding:8px}.ring-buttons label{font-size:9px}.substitution-controls label{font-size:9px}.substitution-controls select{max-width:145px}.education,.reaction-section{margin-top:35px}.education-grid>article{padding:23px}.reaction-molecules{gap:6px;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)}.reaction-molecules svg{height:120px}.reaction-molecules small{font-size:9px}.reaction-equation{font-size:14px!important;padding:13px}.all-views{grid-template-columns:1fr}.view-card svg{height:230px}.gallery-dialog{width:calc(100% - 20px);max-height:94vh;padding:24px 17px}.gallery-dialog h2{font-size:25px}.gallery-dialog .close{right:-6px;top:-14px}.education .resonance-mark{font-size:80px}.mechanism-steps>span{font-size:9px}.directing td,.directing th{padding:9px;font-size:11px}.source-strip{font-size:9px}.stage-tag small{font-size:8px}.metrics strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}