:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1d3049;background:#f6f9fd;font-size:14px;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:300px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}a{color:inherit}[tabindex]:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #72aaff;outline-offset:3px}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:absolute;top:-100px;left:20px;z-index:100;padding:12px;background:#fff}.skip-link:focus{top:10px}.shell{max-width:1510px;padding:0 36px;margin:0 auto}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #e7edf5}.brand{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:780;letter-spacing:-.35px}.brand-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#4594f6;color:#fff;font-size:21px;font-weight:800;box-shadow:0 4px 14px #4594f633}.brand-muted{color:#8090a7;font-weight:520}.top-actions{display:flex;align-items:center;gap:20px}.privacy-pill{color:#487c65;background:#eaf9f0;border:1px solid #d4eedf;font-size:11px;font-weight:720;border-radius:30px;padding:8px 11px}.privacy-dot{display:inline-block;width:6px;height:6px;background:#52b98c;border-radius:100%;margin-right:6px}.home-link{text-decoration:none;color:#6080a5;font-size:12px;font-weight:680}.hero{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:48px 0 39px}.eyebrow{font-weight:840;letter-spacing:2px;color:#5595e5;font-size:10px;margin:0 0 13px}.hero h1{font-size:clamp(32px,3.5vw,52px);line-height:1.13;letter-spacing:-2px;margin:0 0 17px;font-weight:840}.hero h1 span{color:#518ee6}.hero-copy{color:#72859d;font-size:14px;line-height:1.8;max-width:600px;margin:0}.hero-stats{display:flex;gap:9px}.hero-stats div{width:115px;padding:17px 8px;background:#fff;border:1px solid #e7edf4;border-radius:17px;display:flex;flex-direction:column;text-align:center;box-shadow:0 8px 26px #2f52710a}.hero-stats strong{font-size:26px;color:#347ad4}.hero-stats span{font-size:10px;color:#8a9bad;font-weight:670;margin-top:5px}.tabbar{display:flex;gap:7px;overflow-x:auto;padding:7px;background:#eaf0f8;border:1px solid #e2eaf5;border-radius:15px;margin-bottom:24px;scrollbar-width:thin}.tab{border:0;border-radius:11px;background:0 0;padding:13px 17px;white-space:nowrap;font-weight:730;color:#69819c;flex:1;min-width:max-content;transition:.15s}.tab.active{background:#fff;color:#2b79d6;box-shadow:0 2px 10px #31486b10}.workspace{background:#fff;border:1px solid #e7edf6;border-radius:22px;padding:28px;box-shadow:0 12px 50px #28476908;min-height:550px}.workspace[hidden],[hidden]{display:none!important}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}.section-heading h2{font-size:26px;letter-spacing:-.8px;margin:0 0 6px}.section-heading p:not(.eyebrow){color:#8294a9;margin:0;line-height:1.65}.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:23px;flex-wrap:wrap}.search-field{border:1px solid #dfe7f2;border-radius:11px;display:flex;align-items:center;gap:9px;color:#8ca5bb;background:#fbfdff;min-width:210px;max-width:520px;flex:1;padding:0 13px}.search-field span[aria-hidden]{font-size:21px}.search-field input{min-width:0;background:0 0;border:0;outline:0;width:100%;height:44px;color:#263f5e}.field-inline{display:flex;gap:9px;align-items:center;font-weight:740;color:#68809a;white-space:nowrap;font-size:12px}select{max-width:260px;min-width:90px;border:1px solid #dfe7f2;background:#fff;padding:11px 32px 11px 11px;border-radius:10px;color:#3f5a76}.counter{font-size:12px;font-weight:780;color:#7d91a7}.btn{border:1px solid transparent;padding:11px 15px;border-radius:10px;font-size:12px;font-weight:780;display:inline-flex;justify-content:center;align-items:center;gap:7px;text-decoration:none}.btn.primary{background:#438ce9;color:#fff;box-shadow:0 5px 16px #4488e92b}.btn.primary:hover:not(:disabled){background:#2778df}.btn.subtle{background:#f3f7fc;color:#547392;border-color:#e8eef6}.btn.subtle:hover:not(:disabled){background:#e7f1ff}.mini-tag{font-size:11px;background:#eff6ff;border:1px solid #dceafa;color:#4c8ad2;padding:8px 11px;border-radius:30px;font-weight:780;white-space:nowrap}.table-layout{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:20px;align-items:start}.periodic-wrapper{min-width:0}.periodic-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding:5px 0 12px}.periodic-grid{min-width:720px;display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(9,55px);gap:3px}.element-tile{border:1px solid transparent;border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;position:relative;padding:3px 1px 4px;transition:transform .12s,box-shadow .12s;min-width:0}.element-tile.selected,.element-tile:hover{transform:translateY(-2px);box-shadow:0 4px 11px #16375c25;z-index:2}.element-tile.selected{outline:2px solid #296fcb;outline-offset:1px}.element-tile.filtered{opacity:.14}.element-tile.filtered:focus{opacity:1}.element-number{font-size:8px;align-self:flex-start;margin-left:4px;font-weight:760;opacity:.8}.element-symbol{font-size:16px;font-weight:860;letter-spacing:-.7px}.element-name{font-size:7px;white-space:nowrap;overflow:hidden;max-width:98%;text-overflow:ellipsis}.element-tile .saved-star{position:absolute;right:2px;top:1px;font-size:7px}.caption,.table-hint{font-size:11px;line-height:1.7;color:#8396a9}.legend{display:flex;flex-wrap:wrap;gap:9px 15px;margin:18px 0}.legend-button{border:0;background:0 0;display:flex;align-items:center;gap:6px;font-size:10px;color:#738aa1;font-weight:670;padding:3px}.legend-dot{width:9px;height:9px;border-radius:3px;display:inline-block}.cat-alkali{--catbg:#ffeddc;--catfg:#aa6237}.cat-alkaline{--catbg:#fdf3da;--catfg:#967329}.cat-transition{--catbg:#e7efff;--catfg:#4767b9}.cat-post{--catbg:#e5f5f3;--catfg:#3c8c88}.cat-metalloid{--catbg:#e7f3e9;--catfg:#45805b}.cat-nonmetal{--catbg:#e8f5fd;--catfg:#3487b6}.cat-halogen{--catbg:#f3eaff;--catfg:#8254ba}.cat-noble{--catbg:#fce9f5;--catfg:#ad5685}.cat-lanthanoid{--catbg:#f8eefe;--catfg:#905ba7}.cat-actinoid{--catbg:#ffece9;--catfg:#b25c54}.element-tile,.legend-dot{background:var(--catbg);color:var(--catfg)}.detail-panel{background:linear-gradient(165deg,#f7fbff 0,#fff 75%);border:1px solid #e5edf6;border-radius:17px;padding:20px}.detail-atom{width:90px;height:90px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #dae4ef;background:var(--catbg);color:var(--catfg);margin-bottom:15px}.detail-atom b{font-size:37px;letter-spacing:-1.5px}.detail-atom small{font-size:10px;font-weight:780}.detail-panel h3{font-size:22px;letter-spacing:-.7px;margin:0 0 6px}.detail-panel p{color:#7287a1;line-height:1.6}.detail-category{font-size:12px;font-weight:760}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.detail-grid div{border-top:1px solid #e2eaf3;padding-top:10px}.detail-grid span{display:block;color:#93a5b7;font-size:10px;margin-bottom:4px}.detail-grid strong{font-size:12px}.detail-actions{display:flex;flex-wrap:wrap;gap:8px}.detail-actions .btn{flex:1}.comparison{border-top:1px solid #dfe7f2;margin-top:15px;padding-top:12px;font-size:12px}.comparison table{width:100%;border-collapse:collapse}.comparison td,.comparison th{padding:7px 2px;border-bottom:1px solid #e7edf5;text-align:left}.comparison .btn{margin:10px 0}.two-column{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);gap:20px}.card{border:1px solid #e4ecf6;border-radius:17px;padding:23px;background:#fbfdff;min-width:0}.card h3{font-size:18px;letter-spacing:-.4px;margin:4px 0 14px}.field-label{display:block;color:#516d88;font-weight:770;margin-bottom:11px}.card textarea{resize:vertical;min-height:96px;width:100%;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:17px;line-height:1.6;color:#315175;padding:16px;border-radius:12px;border:1px solid #dce5f0;background:#fff}.hint{font-size:11px;color:#8fa0b3;line-height:1.65}.hint code{background:#edf3fb;padding:1px 3px;border-radius:4px}.form-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:18px}.inline-message{margin-top:14px;padding:14px;border-radius:10px;background:#fff2ee;color:#ad5547;border:1px solid #f3d7cd}.balance-result{border:1px solid #cbead9;background:#f1fbf6;padding:19px;border-radius:14px;margin-top:22px}.balance-result .eyebrow{color:#33896e}.balance-result h3{font-size:14px;margin:21px 0 10px}.formula-output{font-size:clamp(19px,2.1vw,28px);font-weight:780;color:#28765f;line-height:1.5;overflow-wrap:anywhere;margin:7px 0}.atom-summary{display:flex;gap:8px;flex-wrap:wrap}.atom-chip{border:1px solid #d9e7ef;background:#fff;border-radius:9px;padding:8px 11px;color:#57728a;font-size:11px;font-weight:730}.atom-chip.good{color:#288363}.example-list{display:grid;gap:7px;margin:12px 0 27px}.example-list button{border:1px solid #e3ebf3;background:#fff;text-align:left;border-radius:10px;padding:11px 12px;color:#456582;font-size:12px;font-family:ui-monospace,Consolas,monospace}.example-list button:hover{border-color:#83b5ef;background:#f3f8ff}.muted{color:#7c91a7;line-height:1.7;font-size:13px}.molecule-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);gap:18px}.molecule-main{padding:18px}.molecule-toolbar{margin:0 0 12px}.molecule-stage{border:1px solid #e4ecf3;border-radius:16px;min-height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:grab;background:#f4f8fd}.molecule-stage.dragging{cursor:grabbing}.molecule-stage svg{width:100%;height:auto;max-height:460px;display:block}.center{text-align:center}.molecule-options{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:14px;color:#637d9a;font-weight:700;font-size:12px}.molecule-options label{display:flex;align-items:center;gap:9px}.molecule-options input[type=range]{accent-color:#4f93e6;max-width:150px}.check input{accent-color:#4789df}.molecule-detail h3{font-size:27px}.large-formula{font-size:34px;font-weight:840;color:#417fd4;margin:8px 0 16px}.molecule-detail .mini-tag{display:inline-block;white-space:normal}.reactions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.reaction-card{border:1px solid #e5edf5;border-radius:15px;padding:17px;background:#fbfdff;display:flex;flex-direction:column;min-height:197px}.reaction-card .mini-tag{align-self:flex-start}.reaction-card h3{font-size:15px;margin:13px 0 11px}.reaction-formula{color:#3c6c9d;font-weight:740;font-size:13px;overflow-wrap:anywhere;line-height:1.65}.reaction-card p{color:#7d90a6;font-size:11px;line-height:1.65;flex:1}.reaction-card .btn{align-self:flex-start}.quiz-head{display:flex;gap:15px;flex-wrap:wrap}.quiz-card #quiz-current{padding:35px 0 12px}.quiz-card #quiz-current h3{font-size:25px;margin:0 0 12px}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer-grid button{border:1px solid #dce6f1;border-radius:11px;background:#fff;color:#3a5774;font-weight:770;font-size:16px;padding:17px;min-width:0;overflow-wrap:anywhere}.answer-grid button:hover:not(:disabled){border-color:#83baf9;background:#f0f7ff}.answer-grid .correct{background:#e3f7eb;border-color:#80c8a1;color:#228456}.answer-grid .wrong{background:#fff0ed;border-color:#ebb5ab;color:#bb5749}.quiz-feedback{font-size:13px;font-weight:710;margin-top:13px;line-height:1.5}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}.stats-grid div{border:1px solid #e5ecf4;background:#fff;border-radius:13px;padding:15px}.stats-grid strong{display:block;font-size:25px;color:#448be0}.stats-grid span{font-size:11px;color:#8a9daf}.studio-footer{display:flex;justify-content:space-between;gap:20px;margin:28px 0 40px;padding:25px 5px;border-top:1px solid #e4edf7;color:#8192a9;font-size:12px}.studio-footer strong{color:#5c7795}.studio-footer p{max-width:600px}.studio-footer>div:last-child{display:flex;gap:20px;flex-wrap:wrap;align-items:center}.studio-footer a{text-decoration:none;color:#568ac8}.toast{position:fixed;z-index:10;bottom:25px;left:50%;transform:translateX(-50%);background:#244b77;color:#fff;padding:12px 17px;border-radius:11px;box-shadow:0 5px 24px #20314b40;font-weight:650;font-size:12px;max-width:90vw;text-align:center}@media(max-width:1100px){.shell{padding:0 22px}.periodic-grid{grid-template-rows:repeat(9,49px)}.table-layout{grid-template-columns:minmax(0,1fr) 250px}.reactions-grid{grid-template-columns:1fr 1fr}.hero-stats div{width:95px}}@media(max-width:800px){.hero{flex-direction:column;align-items:flex-start;padding:34px 0}.hero-stats{width:100%}.hero-stats div{flex:1}.molecule-layout,.table-layout,.two-column{grid-template-columns:1fr}.detail-panel{display:grid;grid-template-columns:105px 1fr;gap:0 12px}.detail-panel #element-detail{grid-column:1/-1;display:grid;grid-template-columns:104px 1fr;gap:0 14px}.detail-atom{grid-row:1/4}.detail-panel .detail-grid{grid-column:1/-1}.detail-panel .caption{grid-column:1/-1}.detail-actions{grid-column:1/-1}.section-heading{align-items:flex-start}.workspace{padding:22px}.reactions-grid{grid-template-columns:1fr 1fr}}@media(max-width:540px){.shell{padding:0 12px}.topbar{height:65px}.brand{font-size:12px}.brand-icon{width:31px;height:31px}.brand-muted{display:none}.privacy-pill{font-size:0;padding:8px}.privacy-dot{margin:0;width:9px;height:9px}.top-actions{gap:10px}.hero{padding:30px 4px 24px}.hero h1{font-size:34px;letter-spacing:-1.25px}.hero-copy{font-size:12px}.hero-stats div{padding:13px 5px}.hero-stats strong{font-size:22px}.tabbar{margin-bottom:15px}.tab{padding:11px 12px;font-size:12px}.workspace{padding:17px 12px;border-radius:16px;min-height:430px}.section-heading{flex-direction:column;gap:12px}.section-heading h2{font-size:22px}.toolbar{gap:9px}.search-field{flex-basis:100%;max-width:none}.periodic-grid{min-width:720px}.detail-panel #element-detail{display:block}.detail-panel{display:block}.detail-grid{margin:15px 0}.reactions-grid{grid-template-columns:1fr}.card{padding:16px}.molecule-toolbar .field-inline{flex-basis:100%}.molecule-toolbar select{width:100%;max-width:none}.molecule-stage{min-height:220px}.studio-footer{flex-direction:column}.answer-grid button{padding:12px 7px;font-size:14px}.hero-stats div span{font-size:9px}}.mass-calculator{border-top:1px solid #dfe8f1;border-bottom:1px solid #dfe8f1;padding:17px 0;margin:16px 0 24px}.mass-calculator input{min-width:0;flex:1;border:1px solid #dfe7f2;border-radius:10px;padding:11px;background:#fff;color:#335773}.mass-result{font-size:12px;color:#68809a;line-height:1.65;min-height:24px;margin-top:10px}.mass-result strong{font-size:18px;color:#32886c}.mass-result.error{color:#b65447}.yield-workspace{margin-top:20px;padding:20px;border:1px solid #bed8f3;background:#f6faff;border-radius:18px}.learning-backup h3,.yield-workspace h3{margin:0 0 8px}.quantity-fields{display:grid;gap:10px;margin:12px 0}.quantity-row{display:grid;grid-template-columns:minmax(65px,1fr) minmax(90px,1.3fr) 105px;gap:9px;align-items:center;min-width:0}.full-width,.quantity-row input,.quantity-row select{width:100%;min-width:0;max-width:100%;padding:10px;border:1px solid #b7c8d9;border-radius:10px;background:#fff;color:#213349}.learning-backup{padding:12px 0;border-top:1px solid #d7e4f2;margin-top:14px}.formula-output sub,.reaction-formula sub{font-size:.68em;vertical-align:sub;line-height:0}#learning-status:not(:empty){margin-top:7px;color:#325d79}@media(max-width:500px){.quantity-row{grid-template-columns:1fr 1fr}.quantity-row span{grid-column:1/-1}}