:root { color-scheme: light; font: 16px/1.55 system-ui, "PingFang SC", sans-serif; color: #17221f; background: #f6f5ef; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { max-width: 1000px; padding-inline: clamp(18px, 5vw, 54px); margin: auto; }
header { border-bottom: 1px solid #c5ccbf; }
.mast { display: flex; min-height: 68px; align-items: center; justify-content: space-between; }
main { padding-block: clamp(28px, 5vw, 64px); }
h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.1; letter-spacing: -.04em; margin: 0 0 28px; }
.specimen { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #c6cdbe; border-radius: 8px; overflow: hidden; }
.symbol { display: grid; place-items: center; background: #fffef8; padding: 32px; }
.symbol img { display: block; max-width: 95%; height: auto; }
.details { padding: clamp(22px, 4vw, 40px); background: #eaede3; }
h2 { font-size: clamp(21px, 3vw, 29px); margin: 0 0 4px; }
.details p { margin: 0; color: #47594e; }
dl { margin-block: 24px; }
dl div { display: flex; padding-block: 7px; border-top: 1px solid #c6cdbe; justify-content: space-between; gap: 12px; }
dd { margin: 0; font-variant-numeric: tabular-nums; }
.downloads { display: flex; gap: 8px; flex-wrap: wrap; }
a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; border-radius: 4px; color: #2d513a; text-underline-offset: 4px; }
.downloads a { border: 1px solid #93a28e; text-decoration: none; }
.downloads a:first-child { background: #24352b; color: #fff; border-color: #24352b; }
@media (hover:hover) and (pointer:fine) {
  a:hover { background: #dadecf; }
  .downloads a:first-child:hover { background: #354d3d; }
}
a:active { box-shadow: inset 0 0 0 2px #887048; }
a:focus-visible { outline: 3px solid #a45528; outline-offset: 3px; }
@media (max-width: 640px) {
  .specimen { grid-template-columns: 1fr; }
  .symbol { padding: 20px; }
  .symbol img { width: 145px; }
}