/* Version 2: controlled relief, stronger hierarchy, inset only where useful. */
:root{--bg:#e9eeeb;--ink:#243c32;--muted:#597065;--accent:#28674f;--raised:7px 9px 19px #cdd5cf,-6px -6px 15px #ffffff;--small:3px 4px 8px #c9d3cc,-3px -3px 8px #fff;--inset:inset 2px 3px 6px #ced8d0,inset -2px -2px 5px #fafffb}
body{background:var(--bg)!important}button,.button{font-weight:650;font-size:13px;border:1px solid #f7faf7;border-radius:12px}.surface,.card,.chart-pane,.feedback-card{border-color:#f8faf7!important;box-shadow:var(--raised)!important}.card,.surface{overflow:visible}.sidebar{box-shadow:5px 0 15px #d3dcd5!important;border-right:1px solid #f8faf7!important}.sidebar-header{padding-bottom:23px;border-bottom:1px solid #cad7cc}.sidebar-header h1{letter-spacing:-.7px}.nav-button{box-shadow:none;padding:13px 15px}.nav-button.active{box-shadow:var(--inset)!important;border-left:3px solid var(--accent);border-radius:12px}.nav-section-title{letter-spacing:1.3px;font-size:10px}.description{font-size:13px!important;max-width:65ch}.card-header-row{align-items:center;gap:18px;margin-bottom:15px}.card-header-row h2{font-size:24px;margin:0}.card-header-row .icon-btn{flex-shrink:0;border-radius:12px}.formula-box{padding:21px 24px;margin:20px 0 25px;border-radius:17px!important}.formula-box .formula-label,.formula-box .title{letter-spacing:1.4px;font-size:10px;line-height:1.5;margin-bottom:9px;display:block}.formula-box .formula-text{font-size:23px;line-height:1.5}.slider-group{padding:5px 0 16px;margin-bottom:15px}.slider-label-wrapper{align-items:center;margin-bottom:6px}.slider-title{font-size:13px}.param-input-box{width:85px!important;min-height:44px!important;padding:8px 12px!important}.keyboard-hint{background:transparent!important;box-shadow:none;padding:12px 0 0;gap:8px;border-top:1px solid #d1dcd4!important;border-radius:0;font-size:11px;line-height:1.6;flex-wrap:wrap;opacity:1}.k-badge{background:var(--bg);padding:2px 6px;border:1px solid #c7d2c9}.function-lab .dashboard-pane{padding:10px;gap:23px;overflow-y:auto}.function-lab .card{padding:26px}.feedback-card{margin-top:0;padding:12px 22px}.feedback-item{box-shadow:none!important;background:transparent!important;border-radius:0;padding:13px 0;gap:20px;align-items:center;font-size:12px}.feedback-item+.feedback-item{border-top:1px solid #d0dcd4!important}.feedback-val{text-align:right;line-height:1.5}.feedback-label{line-height:1.5}.chart-pane{padding:20px}.chart-container{box-shadow:var(--inset);background:#e5ece6!important}.graph-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 0 17px;flex-wrap:wrap}.graph-toolbar .button-row{gap:8px}.graph-toolbar button{padding:8px 12px;min-width:40px}.graph-toolbar .hint{margin:0}.graph-scale{font-variant-numeric:tabular-nums;font-size:11px;min-width:45px;text-align:center}.chart-container canvas{touch-action:none;cursor:grab}.chart-container canvas:active{cursor:grabbing}.coord-readout{padding:8px 12px;box-shadow:var(--small);background:var(--bg)!important}.tool-top{padding:26px 34px;border-bottom:1px solid #d4dfd6;display:flex;align-items:center;justify-content:space-between;gap:20px}.tool-top .brand-link{margin:0;font-size:14px}.edition{font-size:10px;letter-spacing:2px;color:var(--muted)}.wide{max-width:1480px;padding:30px 34px 60px}.page-heading{margin:10px 0 35px}.page-heading h1{font-size:38px;display:flex;align-items:center;gap:17px;margin:9px 0 12px}.page-heading p{font-size:14px;margin:0}.version-chip{font-size:12px;letter-spacing:1px;display:inline-block;padding:7px 9px;box-shadow:var(--inset);border-radius:9px;color:var(--accent)}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:25px;flex-wrap:wrap}.panel-title h2{font-size:12px;color:#7a8d80;display:flex;gap:13px;align-items:center;margin:0}.panel-title h2 span{font-size:17px;color:var(--ink);letter-spacing:-.4px}.small-tag{font-size:9px;letter-spacing:1px;background:#d9e4dc;padding:6px 9px;border-radius:7px;color:var(--accent)}.utility-panel{padding:27px}.stats-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:28px;align-items:start}.analysis-results{display:grid;gap:28px;min-width:0}.data-panel{position:sticky;top:22px}.data-panel textarea{font-family:ui-monospace,monospace;font-size:12px;line-height:1.8;tab-size:8;resize:vertical}.data-panel .button-row{gap:9px}.data-panel .button-row>*{padding:10px 13px}.field{font-size:12px;line-height:1.7}.column-pickers{display:grid;grid-template-columns:1fr 1fr;gap:14px}.file-button{cursor:pointer}details{border-top:1px solid #cdd9d0;margin-top:22px;padding-top:16px}summary{cursor:pointer;font-size:13px;font-weight:650;min-height:35px}details[open]>:not(summary){animation:panel-in .25s ease}.table-scroll{overflow:auto;max-height:290px}.table-scroll table{border-collapse:collapse;min-width:100%;font-size:12px;text-align:left}.table-scroll td,.table-scroll th{padding:10px 13px;border-bottom:1px solid #d1dcd4;white-space:nowrap}.table-scroll th{color:var(--accent);position:sticky;top:0;background:var(--bg)}.paste-target{padding:24px;border:1px dashed #94ad9e;border-radius:14px;box-shadow:var(--inset);font-size:12px;text-align:center;margin:15px 0}#chart-reference{max-width:100%;border-radius:12px}.headline-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.headline-metrics .metric{background:linear-gradient(140deg,#eff4ef,#e1e9e2)!important;box-shadow:var(--small);padding:20px 15px;border:1px solid #f9fcf9;position:relative}.headline-metrics .metric:first-child{background:linear-gradient(145deg,#376e58,#25543f)!important;color:#fff}.headline-metrics .metric:first-child span{color:#c5dfce}.headline-metrics .metric output{font-size:25px;display:block;margin-top:12px}.all-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}.all-metrics .metric{box-shadow:none;border-bottom:1px solid #d3ddd5;border-radius:0;padding:16px 0}.all-metrics .metric output{display:block;font-size:17px;margin-top:6px}.all-metrics .metric span{font-size:11px}.stats-chart{border-radius:16px;box-shadow:var(--inset);min-height:160px;padding:15px}.stats-chart svg{width:100%;display:block;max-height:330px}.explore-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.explore-grid output{display:block;margin-top:12px;font-size:13px;font-weight:650;color:var(--accent)}.status{padding:11px 14px;background:#dfe9e1;border-radius:10px;font-size:12px;line-height:1.7}.status:empty{display:none}.hint{line-height:1.7;font-size:11px}.element-details{padding:30px;margin-top:28px;animation:panel-in .3s ease}.element-identity{display:grid;grid-template-columns:100px 1fr 140px;gap:25px;align-items:center;margin-bottom:25px}.element-symbol-large{height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--inset);border-radius:20px;font-size:42px;color:var(--accent);line-height:1.2}.element-symbol-large small{font-size:11px;margin-bottom:5px}.element-identity h2{margin:6px 0;font-size:30px}.element-identity p{font-size:12px;color:var(--muted)}.shell-diagram{width:140px;height:140px}.element-description{font-size:13px;line-height:1.8;max-width:95ch;margin:20px 0}.element-properties{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.element-properties .prop-item{box-shadow:none!important;border:1px solid #d1ddd4!important;padding:15px;background:#e5ece6!important}.element-properties .prop-val{overflow-wrap:anywhere;font-size:14px}.element-properties .prop-label{opacity:1;color:var(--muted);font-size:10px;line-height:1.6}.element-tile{box-shadow:2px 3px 5px #ccd5ce,-2px -2px 5px #fff;transition:transform .18s,box-shadow .18s;border-radius:8px}.element-tile[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:1px;box-shadow:var(--inset);transform:translateY(-2px)}.chem-toolbar{display:flex;gap:15px;align-items:center;margin:22px 0}.chem-toolbar input{width:290px}.chem-toolbar .hint{margin:0}.periodic-wrapper{scrollbar-width:thin}.chem-calculator .card{padding:30px}.chem-calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.formula-preview{font-size:35px;letter-spacing:-1px;font-weight:650;min-height:65px;padding:10px 0;color:var(--accent)}.compound-table{width:100%;font-size:13px;border-collapse:collapse}.compound-table th,.compound-table td{text-align:left;padding:12px;border-bottom:1px solid #d1dcd4}.mass-result{padding:25px;box-shadow:var(--inset);border-radius:20px;margin-bottom:22px}.mass-result output{font-size:38px;display:block;letter-spacing:-1px}.mass-result span{font-size:11px;color:var(--muted)}.chem-attribution{font-size:10px;line-height:1.7;margin-top:25px;color:var(--muted)}.focus-layout{grid-template-columns:minmax(0,1.4fr) minmax(290px,1fr)}.focus-stage{position:relative;padding:32px}.focus-stage .status{margin-top:24px}.clock-settings{display:flex;justify-content:space-between;gap:20px;margin-bottom:20px;align-items:center}.clock-settings select{font-size:12px;padding:10px!important}.timer-face{width:310px;height:310px;margin:35px auto 32px;border:0;outline:0;box-shadow:10px 12px 24px #cbd5cd,-10px -10px 22px #fff;position:relative;background:linear-gradient(145deg,#eff4ef,#e0e8e1)}.timer-face::before{content:'';position:absolute;inset:28px;border-radius:50%;box-shadow:var(--inset)}.timer-face output{font-size:65px;letter-spacing:-3px;font-weight:550;position:relative}.timer-face>span{position:relative;letter-spacing:2px;font-size:10px}.countdown-ring{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);transform:rotate(-90deg);filter:drop-shadow(0 1px 1px #fff)}.countdown-ring circle{fill:none;stroke-width:3}.countdown-ring .track{stroke:#d1ddd3}.countdown-ring .progress{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--remaining-offset,0);transition:stroke-dashoffset .25s linear}.clock-caption{position:absolute;bottom:69px!important;font-size:9px!important;letter-spacing:3px!important;color:#789080!important}.focus-stage[data-clock=digital] .timer-face{border-radius:25px;height:200px;width:100%;max-width:480px;box-shadow:var(--inset);background:var(--bg)}.focus-stage[data-clock=digital] .timer-face::before,.focus-stage[data-clock=digital] .countdown-ring{display:none}.focus-stage[data-clock=digital] .timer-face output{font-size:clamp(52px,6vw,90px);font-weight:750;color:#dae4dc;text-shadow:2px 3px 3px #a8b9ae,-2px -2px 2px white;letter-spacing:2px}.focus-stage[data-clock=digital] .clock-caption{bottom:20px!important}.focus-stage[data-clock=minimal] .timer-face{box-shadow:none;background:none}.focus-stage[data-clock=minimal] .timer-face::before,.focus-stage[data-clock=minimal] .countdown-ring{display:none}.focus-stage[data-clock=minimal] .timer-face output{font-weight:300;font-size:80px}.focus-stage[data-clock=minimal] .clock-caption{display:none}.focus-stage:fullscreen,.immersive .focus-stage{width:100%;height:100dvh;max-width:none;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--bg)!important;border:0!important;border-radius:0!important;overflow:auto;padding:25px}.immersive .focus-stage{position:fixed;inset:0;z-index:9999}.focus-stage:fullscreen .timer-face,.immersive .focus-stage .timer-face{width:min(62vmin,540px);height:min(62vmin,540px);flex-shrink:0}.focus-stage:fullscreen .timer-face output,.immersive .timer-face output{font-size:clamp(55px,10vmin,110px)}.focus-stage:fullscreen .clock-settings,.focus-stage:fullscreen .session-config,.focus-stage:fullscreen .status,.focus-stage:fullscreen .session-modes,.immersive .clock-settings,.immersive .session-config,.immersive .focus-stage .status,.immersive .session-modes{display:none}.fullscreen-toggle{position:absolute;right:25px;top:25px;z-index:3}.focus-stage:fullscreen .fullscreen-toggle,.immersive .fullscreen-toggle{opacity:.7}.focus-stage[data-clock=digital]:fullscreen .timer-face,.immersive .focus-stage[data-clock=digital] .timer-face{width:min(85vw,700px);height:240px}.focus-stage:fullscreen .timer-actions,.immersive .focus-stage .timer-actions{margin-top:10px}.task-row{box-shadow:none;background:#e2ebe3;border:1px solid #d4dfd5;padding:14px;gap:12px}.task-row button{box-shadow:none;background:none!important}.session-config{margin-top:27px;padding-top:22px;border-top:1px solid #cfdbd1}.focus-stage .session-config .field{margin-bottom:8px}.site-top{border-bottom:1px solid #d3ddd5}.hero{padding:20px 0 30px;min-height:230px}.hero-art .orbit{background:linear-gradient(145deg,#eef4ee,#dce7dd);border:1px solid #fafffa}.tool-card{overflow:hidden;padding:27px;min-height:275px;border-radius:22px!important}.tool-card::after{content:'';position:absolute;left:0;top:28px;height:43px;width:3px;background:var(--tool-color)}.tool-icon{box-shadow:var(--small);background:linear-gradient(145deg,#f0f5f0,#dce6de);border:1px solid #fafdfa}.tool-number{font-family:ui-monospace,monospace}.tool-card h3{font-size:20px;margin-top:25px}.card-bottom{padding-top:16px;border-top:1px solid #d2ddd5}.new-tag{background:#d5e4d9;border:1px solid #bed3c6}.toast{background:var(--bg)!important;color:var(--ink)!important;box-shadow:var(--raised)!important;border:1px solid #f8faf7;backdrop-filter:none!important}.modal-overlay{backdrop-filter:none!important}.modal-card{box-shadow:var(--raised)!important}.prop-item,.result-container{box-shadow:var(--inset)}.result-item{padding:10px 0}.inputs-container{padding:20px 0}.page.active{animation:panel-in .2s ease}
.timer-face>.clock-caption{position:absolute}.focus-layout{align-items:start}.graph-scale{align-self:center}.focus-stage[data-clock=digital] .timer-face output{color:#8da797}.element-details h3{font-size:15px;margin:28px 0 17px}.stats-chart svg{overflow:hidden}.file-button:focus-visible,.paste-target:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.periodic-grid{grid-template-columns:repeat(18,minmax(45px,1fr));gap:5px;min-width:910px}.element-details{scroll-margin-top:25px}.mass-result output{overflow-wrap:anywhere}.focus-stage:fullscreen .clock-caption,.immersive .focus-stage .clock-caption{bottom:24%!important}
.sidebar .nav-scroll{gap:13px;padding:10px}.sidebar .nav-button{background:var(--bg)!important;border:0!important;border-radius:13px;color:var(--ink)!important;box-shadow:var(--small)!important}.sidebar .nav-button:hover{color:var(--ink)!important;box-shadow:2px 2px 5px #cad5cc,-2px -2px 5px #fff!important}.sidebar .nav-button.active,.sidebar .nav-button[aria-pressed=true]{background:var(--bg)!important;border:0!important;color:var(--ink)!important;box-shadow:var(--inset)!important}.sidebar-header{border-bottom:0}.sidebar .nav-section-title{color:var(--muted)}
/* Neutral controls: no green fills, glow, or selected colour. */
button,button.primary,button.action-btn,.button,.button.primary,.icon-btn,.close-btn{background:var(--bg)!important;background-image:none!important;color:var(--ink)!important;border:1px solid transparent!important;box-shadow:2px 3px 6px #ccd5ce,-2px -2px 6px #fafffb!important;filter:none!important;text-shadow:none!important}
button:hover,.button:hover,.action-btn:hover{background:var(--bg)!important;color:var(--ink)!important;box-shadow:1px 2px 4px #ccd5ce,-1px -1px 4px #fafffb!important;transform:translateY(-1px)}
button:active,.button:active,button[aria-pressed=true],.nav-button.active{background:var(--bg)!important;color:var(--ink)!important;box-shadow:var(--inset)!important;transform:none}
button:focus-visible,.button:focus-visible{outline:2px solid #65756b!important;outline-offset:4px}
.element-tile[aria-pressed=true]{outline:0;border-color:#c7d3ca;box-shadow:var(--inset);transform:none}.focus-stage[data-clock=digital]:fullscreen .clock-caption,.immersive .focus-stage[data-clock=digital] .clock-caption{bottom:15px!important}
@keyframes panel-in{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(min-width:1251px){.function-lab .dashboard-pane{width:390px}.function-lab .main-content{gap:20px;padding:24px}.function-lab .card{padding:24px}}
@media(max-width:1200px){.stats-layout{grid-template-columns:300px minmax(0,1fr)}.headline-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.all-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.element-properties{grid-template-columns:repeat(3,minmax(0,1fr))}.explore-grid{grid-template-columns:1fr}.function-lab .dashboard-pane{overflow:visible}}
@media(max-width:900px){.stats-layout{grid-template-columns:1fr}.data-panel{position:static}.focus-layout{grid-template-columns:1fr}.wide{padding:25px 22px 40px}.tool-top{padding:22px}.edition{display:none}.element-properties{grid-template-columns:repeat(2,minmax(0,1fr))}.chem-calc-grid{grid-template-columns:1fr}.element-identity{grid-template-columns:80px 1fr}.element-symbol-large{height:80px;font-size:35px}.shell-diagram{display:none}.element-details{padding:23px}.function-lab .dashboard-pane{padding:5px}.feedback-card{margin-top:0}.chart-pane{margin-top:25px}.function-lab .main-content{padding:20px 14px}.graph-toolbar .hint{width:100%}.chem-toolbar{flex-wrap:wrap}.chem-toolbar input{width:100%}.focus-stage{padding:25px}.clock-settings{padding-right:95px}.hero-art{display:none}.hero{grid-template-columns:1fr}.element-description{font-size:12px}}
@media(max-width:480px){.panel-title{gap:15px}.utility-panel{padding:22px}.page-heading h1{font-size:31px}.headline-metrics .metric output{font-size:22px}.all-metrics{gap:0 17px}.all-metrics .metric output{font-size:15px}.all-metrics .metric span{font-size:10px}.column-pickers{grid-template-columns:1fr}.element-properties{gap:10px}.element-properties .prop-item{padding:12px}.element-identity{gap:15px}.element-identity h2{font-size:25px}.timer-face{width:245px;height:245px}.timer-face output{font-size:52px}.clock-caption{bottom:48px!important}.clock-settings{padding-right:0;padding-top:42px}.fullscreen-toggle{right:22px;top:20px}.clock-settings select{width:100%}.clock-settings label{width:100%}.function-lab .card{padding:21px}.card-header-row{align-items:flex-start;gap:12px}.card-header-row h2{font-size:21px}.feedback-card{padding:8px 18px}.feedback-item{font-size:11px;gap:12px}.formula-box{padding:18px}.formula-box .formula-text{font-size:20px}.chart-pane{padding:13px}.element-properties .prop-val{font-size:12px}.tool-card{min-height:245px}.compound-table th,.compound-table td{padding:9px 5px;font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}