:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #101411; color: #e9f1e8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #263b2b, #101411 48rem); }
main { width: min(760px, calc(100% - 2rem)); margin: 0 auto; padding: 5rem 0; }
.eyebrow { color: #9fcaa7; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
h1 { margin: .2rem 0; font: 700 clamp(2.8rem, 9vw, 5.5rem)/.95 Georgia, serif; color: #d9f2bb; }
.intro { max-width: 42rem; color: #bdc8bc; line-height: 1.6; }
form, section, aside { margin-top: 2rem; padding: 1.4rem; border: 1px solid #405345; border-radius: 18px; background: #161c18dd; box-shadow: 0 20px 60px #0005; }
label { display: grid; gap: .45rem; color: #c9d8c9; font-weight: 650; }
textarea, select { width: 100%; border: 1px solid #526857; border-radius: 10px; padding: .85rem; background: #0f1410; color: #f3f7f2; font: inherit; }
textarea { resize: vertical; font-size: 1.12rem; }
.hint { margin: .45rem 0 1rem; color: #91a092; font-size: .82rem; }
.controls { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-top: 1rem; }
button { margin-top: 1.2rem; border: 0; border-radius: 999px; padding: .8rem 1.4rem; background: #b8e986; color: #15200f; font: 750 1rem system-ui; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.secondary { background: #263c2b; color: #d9f2bb; border: 1px solid #526857; }
.state { color: #9fcaa7; margin: 0; }
blockquote { margin: .8rem 0; font: 1.8rem/1.35 Georgia, serif; }
ol { margin-bottom: 0; color: #aebbae; }
aside { color: #aebbae; line-height: 1.5; }
aside strong { color: #d9f2bb; }
aside p { margin-bottom: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .7rem; margin-top: 1rem; }
.stats p { margin: 0; padding: .8rem; border: 1px solid #405345; border-radius: 10px; background: #0f1410; }
.stats b, .stats span { display: block; }
.stats b { color: #d9f2bb; font-size: 1.35rem; }
.stats span { margin-top: .15rem; font-size: .78rem; }
.training table { width: 100%; margin-top: 1rem; border-collapse: collapse; }
.training th, .training td { padding: .55rem; border-bottom: 1px solid #405345; text-align: left; }
.training th { color: #d9f2bb; }
.training .note { color: #91a092; font-size: .84rem; }
#comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; }
.comparison { min-width: 0; padding: 1rem; border: 1px solid #405345; border-radius: 12px; background: #0f1410; }
.comparison h2 { margin: 0; color: #d9f2bb; font-size: 1rem; }
.comparison blockquote { font-size: 1.25rem; overflow-wrap: anywhere; }
.comparison ol { padding-left: 1.3rem; font-size: .86rem; }
.warning { margin: -.35rem 0 .7rem; color: #e6b98a; font-size: .78rem; }
@media (max-width: 540px) { main { padding-top: 2.5rem; } .controls { grid-template-columns: 1fr; } }