/* One sage material, with raised surfaces and carved controls. */
:root{--bg:#dfe9e2;--ink:#294d3c;--muted:#587563;--accent:#396e52;--raised:10px 10px 22px #bdcfc1,-10px -10px 22px #fafffb;--small:4px 4px 9px #bdcfc1,-4px -4px 9px #fafffb;--inset:inset 5px 5px 11px #becfc2,inset -5px -5px 11px #f8fff9}
body{background:var(--bg)!important}button,a,input,select,textarea{transition:box-shadow .2s ease,transform .2s ease,color .2s ease}
.surface,.card,.chart-pane,.feedback-card,.modal-card,.element-details{background:var(--bg)!important;border:0!important;box-shadow:var(--raised)!important;border-radius:26px!important}
.tool-card{--tool-color:var(--accent)!important;background:var(--bg)!important;box-shadow:12px 12px 24px #bdcfc1,-12px -12px 24px #fafffb!important;border:0!important;overflow:visible}
.tool-card::after,.tool-card::before{display:none!important;content:none!important}.tool-card:hover{transform:translateY(-2px);box-shadow:6px 6px 14px #bdcfc1,-6px -6px 14px #fafffb!important}.tool-card:active{transform:none;box-shadow:var(--inset)!important}
.tool-icon,.brand-mark,.card-arrow,.floating-symbol,.new-tag,.small-tag,.version-chip{background:var(--bg)!important;border:0!important;color:var(--accent)!important;box-shadow:var(--small)!important}.tool-icon{box-shadow:var(--inset)!important}.new-tag,.small-tag{padding:7px 10px}.card-bottom{border:0;padding-top:12px}.tool-grid{gap:34px}.tool-card h3{color:var(--ink)}.tool-card p{color:var(--muted)}
.hero-art .orbit{background:var(--bg)!important;border:0;box-shadow:var(--raised)}.orbit-inner{box-shadow:var(--inset)}.site-top,.tool-top,.bottom-note{border:0}.sidebar{background:var(--bg)!important;box-shadow:7px 0 18px #c4d4c7!important;border:0!important}.sidebar-header{border:0}.sidebar .nav-button,.sidebar .nav-button:hover,button,.button,button.primary,button.action-btn,.icon-btn,.close-btn{background:var(--bg)!important;border:0!important;color:var(--ink)!important;box-shadow:var(--small)!important}
button:hover,.button:hover{box-shadow:2px 2px 5px #bdcfc1,-2px -2px 5px #fafffb!important}button:active,.button:active,button[aria-pressed=true],.sidebar .nav-button.active,.sidebar .nav-button[aria-pressed=true]{box-shadow:var(--inset)!important;transform:none;background:var(--bg)!important;color:var(--ink)!important}
.text-input,input:not([type=range]):not([type=checkbox]),select,textarea{background:var(--bg)!important;border:0!important;box-shadow:var(--inset)!important;color:var(--ink)}.input-label{background:none!important}.formula-box,.preview-container,.chart-container,.result-container,.mass-result,.stats-chart,.element-symbol-large,.paste-target{background:var(--bg)!important;border:0!important;box-shadow:var(--inset)!important}
.status,.task-row{background:var(--bg)!important;border:0!important;box-shadow:var(--inset)!important;padding:14px 17px}.hint,.description{color:var(--muted)}.feedback-item{background:none!important;box-shadow:none!important;padding:16px 2px}.feedback-item+.feedback-item{border-color:#c0d1c3!important}
.headline-metrics .metric,.headline-metrics .metric:first-child,.element-properties .prop-item{background:var(--bg)!important;border:0!important;box-shadow:var(--small)!important;color:var(--ink)!important;border-radius:16px}.headline-metrics .metric span,.headline-metrics .metric:first-child span{color:var(--muted)!important}.all-metrics{gap:15px}.all-metrics .metric{background:var(--bg);box-shadow:var(--inset);padding:15px;border:0;border-radius:13px}.all-metrics .metric output{font-size:16px}.element-properties{gap:18px}.element-properties .prop-item{padding:18px}.element-description{line-height:1.9}
details{border:0;padding:0;margin-top:24px}summary{background:var(--bg);box-shadow:var(--small);padding:14px 16px;border-radius:13px;margin-bottom:18px;min-height:44px}details[open]>summary{box-shadow:var(--inset)}.table-scroll{background:var(--bg);box-shadow:var(--inset);border-radius:13px;padding:9px}.table-scroll th{background:var(--bg)}.table-scroll td,.table-scroll th,.compound-table td,.compound-table th{border-color:#c0d1c3}
.element-tile{background:var(--bg)!important;color:var(--ink)!important;box-shadow:3px 3px 6px #b9ccbd,-3px -3px 6px #fafffb!important;border:0!important;outline:0!important;transform:none!important;transition:box-shadow .15s ease!important}
.element-tile:hover,.element-tile:active,.element-tile[aria-pressed=true]{box-shadow:inset 3px 3px 6px #b4c8b9,inset -3px -3px 6px #f8fff9!important;transform:none!important;border:0!important}.element-tile:hover .element-symbol{color:var(--accent)}.periodic-grid{gap:8px;min-width:960px}.periodic-wrapper{padding:14px 8px 24px}.element-tile:focus-visible{outline:2px solid #557e64!important;outline-offset:3px}
.element-guide{position:fixed;bottom:26px;right:26px;z-index:80;padding:15px 20px!important;border-radius:30px!important;max-width:calc(100vw - 36px);gap:12px;box-shadow:var(--raised)!important}.element-guide span{display:block}.element-guide .guide-arrow{border-radius:50%;width:27px;height:27px;display:grid;place-items:center;box-shadow:var(--inset);font-size:17px}.element-guide[hidden]{display:none!important}
.focus-stage[data-clock=ring] .timer-face{background:var(--bg)!important;border:0;box-shadow:inset 12px 12px 23px #b9cdbd,inset -12px -12px 23px #fafffb!important;isolation:isolate}
.focus-stage[data-clock=ring] .timer-face::before{inset:28px;background:var(--bg);box-shadow:5px 5px 11px #bed0c2,-5px -5px 11px #f6fff8;z-index:-1}.countdown-ring{inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);filter:none}.countdown-ring .track{stroke:#c6d7ca;stroke-width:2}.countdown-ring .progress{stroke:#679078;stroke-width:2;opacity:.75}.timer-face output{line-height:1;font-weight:550;color:var(--ink);margin:0}.timer-face>span{display:none!important}.focus-stage[data-clock=digital] .timer-face{box-shadow:var(--inset)!important;background:var(--bg)!important}.focus-stage[data-clock=digital] .timer-face output{color:#72947e;text-shadow:2px 3px 3px #b3c7b8,-2px -2px 2px #fafffb}.session-config{border:0;box-shadow:var(--inset);padding:22px;border-radius:18px}.session-config input[type=range]{margin:10px 0}.focus-stage:fullscreen,.immersive .focus-stage{box-shadow:none!important}
input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#6b937c var(--progress,50%),#d3e0d5 var(--progress,50%));box-shadow:inset 2px 2px 4px #aec4b4,inset -2px -2px 4px #fafffb}input[type=range]::-webkit-slider-thumb{background:var(--bg);border:5px solid var(--bg);box-shadow:3px 3px 6px #acc2b2,-3px -3px 6px #fafffb}input[type=range]::-moz-range-thumb{background:var(--bg);border:5px solid var(--bg);box-shadow:var(--small)}
.input-format-guide{padding:17px;background:var(--bg);box-shadow:var(--inset);border-radius:17px;margin:0 0 24px}.format-guide-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;font-weight:650}.format-guide-top button{min-height:32px;padding:7px 9px;font-size:10px}.input-format-guide pre{font-size:12px;line-height:1.8;min-height:92px;margin:14px 0 10px;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:8;color:var(--ink);font-family:ui-monospace,monospace}.format-tabs{display:flex;gap:8px;flex-wrap:wrap}.format-tabs button{font-size:10px;padding:7px 9px;min-height:32px}.input-format-guide .hint{margin-bottom:0}.data-panel .field textarea{min-height:170px}.input-format-guide:focus-within{outline:0}
@media(max-width:900px){.element-guide{bottom:18px;right:18px}.tool-grid{gap:27px}.element-properties{gap:14px}.sidebar{box-shadow:0 5px 15px #c4d4c7!important}}
@media(max-width:480px){.all-metrics{gap:12px}.all-metrics .metric{padding:13px}.all-metrics .metric output{font-size:14px}.element-properties .prop-item{padding:14px}.focus-stage[data-clock=ring] .timer-face{width:235px;height:235px}.focus-stage:fullscreen .timer-face,.immersive .focus-stage .timer-face{width:min(75vmin,540px);height:min(75vmin,540px)}.session-config{padding:17px}.element-guide{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}