@import url('../styles.css');
:root { color-scheme: light; }
body { line-height: 1.65; }
a { color: #126b64; }
.site-header { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.brand { text-decoration: none; color: #21313c; }
main { max-width: 960px; padding-bottom: 50px; }
.hero { margin: 10px 0 28px; padding: clamp(24px, 5vw, 50px); }
h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
h2 { font-size: 1.55rem; line-height: 1.3; }
h3 { line-height: 1.4; }
.panel, details { padding: clamp(18px, 3vw, 30px); background: white; border: 1px solid #dce5e5; border-radius: 20px; margin: 22px 0; }
.panel > :last-child, details > :last-child { margin-bottom: 0; }
.eyebrow { margin: 0; }
nav, .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
nav { margin: 22px 0; }
button, .button, select, input { font: inherit; border-radius: 10px; border: 1px solid #8caba7; padding: 10px 16px; }
button, .button { background: #126b64; color: white; cursor: pointer; text-decoration: none; font-weight: 700; }
button.secondary { background: #eef6f3; color: #145b55; }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 3px solid #b96c26; outline-offset: 4px; }
summary { cursor: pointer; font-weight: bold; color: #126b64; }
details { background: #fff6e8; }
.bits { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin: 20px 0; }
.bit { text-align: center; min-width: 0; }
.bit small { display: block; font-size: .8rem; }
.bit button { padding: 12px 0; width: 100%; background: #eef6f3; color: #126b64; font-size: 1.2rem; }
.bit button[aria-pressed="true"] { background: #126b64; color: white; }
.readout { padding: 16px; background: #eaf4f0; border-radius: 12px; overflow-wrap: anywhere; }
.status { min-height: 2em; font-weight: 700; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td { text-align: left; padding: 9px; border-bottom: 1px solid #dce5e5; }
.formula { font-size: 1.2rem; overflow-x: auto; }
input { max-width: 100%; width: 220px; background: white; }
label { font-weight: bold; }
.steps li { margin: 8px 0; }
.task { font-size: 1.7rem; }
@media(max-width:480px) { .bits { gap: 3px; } .bit small { font-size: .68rem; } .panel { padding: 17px; } }