:root {
  color-scheme: dark;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #0b0d10;
  color: #eef0e9;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 20% 10%, #223426, transparent 35%), #0b0d10; }
main { width: min(760px, calc(100% - 40px)); border: 1px solid #38423b; padding: clamp(28px, 6vw, 64px); background: rgba(13, 17, 15, .9); box-shadow: 0 24px 80px rgba(0, 0, 0, .45); }
.eyebrow { color: #a9d88f; font-size: .75rem; letter-spacing: .18em; }
h1 { max-width: 12ch; margin: 24px 0; font: 500 clamp(2.4rem, 8vw, 5.5rem)/.92 Georgia, serif; letter-spacing: -.045em; }
p { color: #adb7ae; line-height: 1.7; }
dl { display: grid; gap: 1px; margin: 42px 0; background: #38423b; }
dl div { display: grid; grid-template-columns: 140px 1fr; padding: 14px; background: #111713; }
dt { color: #7f8b81; } dd { margin: 0; color: #dce5dc; }
#automation-result { display: grid; gap: 8px; border-left: 3px solid #a9d88f; padding: 16px 20px; background: #142019; }
#automation-result span { color: #aeb9af; font-size: .85rem; }