@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--bg:#f0efe6;--panel:#e7e9dd;--ink:#223e38;--muted:#62756a;--line:#bcc9ba;--accent:#bd5939;--white:#f9f8ef}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}body.dark{--bg:#101d1b;--panel:#192b26;--ink:#e0ead8;--muted:#99b3a1;--line:#365247;--accent:#efaa7b;--white:#22372f}button,input,select{font:inherit;color:inherit}button,select{border:1px solid var(--line);background:transparent;padding:11px 14px;border-radius:3px;cursor:pointer}button:hover,button:focus-visible{background:var(--ink);color:var(--bg)}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.4;cursor:default}a{color:inherit}header,main,footer{max-width:1600px;margin:auto;padding-left:3vw;padding-right:3vw}header{display:flex;align-items:center;gap:32px;padding-top:26px;padding-bottom:24px;border-bottom:1px solid var(--line)}header a{text-decoration:none;font:11px 'IBM Plex Mono',monospace}header a:first-child{font:bold 26px 'DM Sans';letter-spacing:-1.5px}sup{font-size:12px}.header-actions{margin-left:auto;display:flex;gap:8px}button,.mono,.search,.filters,.lab-tools,label,.stage-bottom,.sources,footer{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.04em}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(52px,7vw,110px);letter-spacing:-.075em;line-height:.9;margin-bottom:0}h1 span{color:var(--accent)}.intro{display:flex;gap:5%;align-items:end;padding:44px 0 35px}.intro .mono{margin-bottom:22px}.lead{font-size:clamp(20px,2.7vw,40px);line-height:1.05;letter-spacing:-1.5px;margin-bottom:0}em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.intro-note{margin-left:auto;font:11px/1.7 'IBM Plex Mono';margin-bottom:0;color:var(--muted)}.workspace{display:grid;grid-template-columns:1.7fr 1fr;border:1px solid var(--line);border-radius:5px;overflow:hidden}.stage{position:relative;min-width:0;background:var(--panel);display:flex;flex-direction:column}.stage-top,.stage-bottom{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;gap:12px}.stage-top{border-bottom:1px solid var(--line)}canvas{width:100%;height:340px;display:block;touch-action:pan-y}.stage-bottom{margin-top:auto}aside{padding:26px;border-left:1px solid var(--line)}.element-title{display:flex;gap:22px;align-items:center}.element-symbol{font-size:90px;line-height:1;letter-spacing:-6px}.element-title h2{font-size:26px;letter-spacing:-1px;margin:4px 0}.family-badge{font:10px 'IBM Plex Mono';color:var(--muted)}.properties{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}.properties dt{font:9px 'IBM Plex Mono';color:var(--muted);margin-bottom:5px}.properties dd{margin:0;font-size:15px}.fact{font-size:13px;line-height:1.65;color:var(--muted)}.detail-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.detail-actions a{font-size:10px}.primary{background:var(--ink);color:var(--bg)}section.table-section,.lab,.learn{margin-top:48px;border-top:1px solid var(--line);padding-top:25px}.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:22px}h2{font-size:34px;letter-spacing:-1.3px;font-weight:500;margin-bottom:0}.search{width:280px}.search input{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:12px 0;font-size:13px;outline-offset:3px}.filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.filters label{display:flex;align-items:center;gap:8px}.filters #count{margin-left:auto}.hint{font-size:11px;color:var(--muted);margin:14px 0}.table-scroll{overflow-x:auto;padding-bottom:8px}.periodic{display:grid;grid-template-columns:repeat(18,minmax(44px,1fr));grid-template-rows:22px repeat(7,70px) 12px repeat(2,70px);gap:4px;min-width:920px}.cell{padding:5px 6px;position:relative;text-align:left;display:flex;flex-direction:column;background:color-mix(in srgb,var(--c) 22%,var(--bg));border:1px solid color-mix(in srgb,var(--c) 55%,var(--line));color:var(--ink);min-width:0;transition:opacity .15s,transform .15s}.cell:hover,.cell.selected{background:var(--c);color:#172c29;transform:translateY(-2px);outline:1px solid var(--ink)}.cell small{font:9px 'IBM Plex Mono'}.cell strong{font-size:23px;font-weight:500;line-height:1.1}.cell .ename{font-size:7px;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;width:100%}.cell.dim{opacity:.15}.cell .dot{position:absolute;right:5px;top:5px;background:var(--accent);width:5px;height:5px;border-radius:50%}.groupno{text-align:center;font:9px 'IBM Plex Mono';color:var(--muted)}.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;font:9px 'IBM Plex Mono';color:var(--muted)}.legend i{display:inline-block;width:8px;height:8px;margin-right:5px;background:var(--c);border-radius:50%}.explain{max-width:420px;font-size:13px;line-height:1.7;color:var(--muted);margin-bottom:0}.lab-grid{display:grid;grid-template-columns:1.4fr 1fr;border:1px solid var(--line);border-radius:4px}.lab-grid>div{padding:24px}.lab-tools{display:flex;justify-content:space-between;align-items:end;gap:10px}.lab-tools select{display:block;margin-top:8px;width:100%;min-width:180px}.tray{min-height:120px;padding:24px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.empty{font-size:13px;color:var(--muted)}.ingredient{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--white);border-radius:4px;min-width:82px;text-align:center;overflow:hidden;transition:box-shadow .1s}.ingredient.active{box-shadow:0 0 0 3px var(--accent)}.ingredient strong{font-size:30px;line-height:1.7}.ingredient .quantity{display:flex;align-items:center;justify-content:space-between}.quantity button{border:0;padding:6px 10px;border-radius:0}.quantity span{font:12px 'IBM Plex Mono'}.transport{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:16px;border-top:1px solid var(--line);padding-top:20px;align-items:center}input[type=range]{display:block;width:100%;margin:10px 0 0;accent-color:var(--accent)}#result{padding:26px;border-left:1px solid var(--line);background:var(--panel)}#result .formula{font-size:44px;letter-spacing:-1px;margin:12px 0}#result h3{font-size:24px;margin:0 0 12px}#result p{font-size:13px;line-height:1.7}#result .mono{font-size:10px}.learn{display:grid;grid-template-columns:1fr 1fr;gap:8%;padding-bottom:45px}.learn h3{font-size:22px;font-weight:500}.learn p,.learn details{font-size:13px;line-height:1.8;color:var(--muted)}#question{font-size:21px;line-height:1.5;color:var(--ink);margin:22px 0;max-width:430px}.quiz-actions{display:flex;gap:8px}summary{cursor:pointer;color:var(--ink)}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding-top:20px;padding-bottom:30px;gap:12px}#quiz-feedback{margin-top:15px}button[aria-pressed=true]{background:var(--ink);color:var(--bg)}@media(max-width:950px){.workspace{grid-template-columns:1.2fr 1fr}.intro-note{display:none}.transport{grid-template-columns:1fr 1fr}.lab-grid{grid-template-columns:1fr 1fr}canvas{height:380px}}@media(max-width:650px){header{gap:14px;padding-top:16px;padding-bottom:16px}header a:first-child{font-size:21px}header a:nth-child(2){font-size:8px}.header-actions{gap:4px}.header-actions button{font-size:8px;padding:9px 6px}.intro{align-items:start;flex-direction:column;gap:22px;padding:30px 0}.intro .mono{font-size:9px}h1{font-size:clamp(48px,14.8vw,85px)}.lead{font-size:26px}.workspace,.lab-grid,.learn{grid-template-columns:1fr}aside{border-left:0;border-top:1px solid var(--line);padding:22px}.stage-top{font-size:8px}canvas{height:310px}.stage-bottom{font-size:8px}h2{font-size:29px}.section-head{align-items:start;flex-direction:column}.search{width:100%}.filters #count{margin-left:0}.filters select{font-size:10px}.periodic{grid-template-rows:22px repeat(7,72px) 12px repeat(2,72px)}.cell .ename{font-size:8px}#result{border-left:0;border-top:1px solid var(--line)}.lab-grid>div{padding:18px}.learn{gap:30px}footer{font-size:8px;flex-wrap:wrap}footer button{font-size:8px}.properties{grid-template-columns:repeat(2,1fr)}}
.selection-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}.selection-bar>div{display:flex;gap:6px}.more-facts{font-size:12px;margin:0 0 20px}.more-facts .properties{margin:18px 0}.stage canvas{flex:1;min-height:340px}@media(max-width:650px){.selection-bar{align-items:start;flex-direction:column}.selection-bar>div{width:100%}.selection-bar button{flex:1}.stage canvas{min-height:310px}}