:root { font-family: Arial, sans-serif; color: #172a26; color-scheme: light; background: #d5e2d8; font-size: 16px; line-height: 1.6; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: radial-gradient(ellipse at 78% 25%, #edf2df 0, transparent 60%), radial-gradient(ellipse at 12% 85%, #a7beb0 0, transparent 65%), #d5e2d8; }
.top-bar { background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 36px; flex-wrap: wrap; }
.brand { font-size: 24px; letter-spacing: -1px; }
.tools { display: flex; gap: 12px; flex-wrap: wrap; }
button, .control, select { font: inherit; color: #172a26; background: #fff; border: 1px solid #b3c1bb; border-radius: 24px; padding: 9px 21px; min-height: 44px; }
button, .control, summary { cursor: pointer; }
.control { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid #172a26; outline-offset: 4px; }
main { padding: 48px 24px 64px; }
.sample { text-align: center; font-size: 13px; color: #40584f; margin: 0 0 20px; }
.panel { background: #fff; max-width: 620px; margin: auto; padding: 32px 40px; border-radius: 12px; box-shadow: 0 12px 50px #234b3020; }
h1 { font-size: 26px; font-weight: 500; margin: 0 0 22px; }
dl { margin: 0; }
.field { padding: 16px 0; border-bottom: 1px solid #edf0ed; }
dt { font-size: 14px; color: #546b62; }
dd { margin: 5px 0 0; font-size: 19px; overflow-wrap: anywhere; }
.hint { font-size: 14px; color: #546b62; margin: 4px 0 0; }
.actions { margin-top: 26px; }
.message { font-size: 14px; color: #40584f; margin: 15px 0 0; min-height: 23px; }
.demo-tools { max-width: 620px; margin: 24px auto 0; padding: 16px 20px; border: 1px solid #8ca596; border-radius: 12px; background: #ffffff70; font-size: 14px; }
.demo-tools label { display: block; margin: 16px 0 6px; }
.demo-tools select { width: 100%; border-radius: 10px; padding: 9px 12px; }
.demo-tools .tools { margin-top: 16px; }
.demo-tools .hint { margin-top: 12px; }
[hidden] { display: none !important; }
@media (max-width: 480px) {
  .top-bar { padding: 18px; gap: 12px; }
  .tools { gap: 8px; }
  .top-bar .control, .top-bar button { padding: 9px 16px; }
  main { padding: 30px 16px; }
  .panel { padding: 24px; }
  dd { font-size: 17px; }
  .actions button, .demo-tools .tools button { width: 100%; }
}