.edge-page { --edge-earth: #876344; --edge-line: #c9d6c9; }
.edge-page .page-shell { max-width: 1060px; }
.edge-skip { position: fixed; left: 12px; top: -80px; z-index: 30; padding: 10px 14px; background: #fffefa; color: #194d39; border: 2px solid #286b4e; }
.edge-skip:focus { top: 12px; }
.edge-main { padding-top: 12px; }
.edge-crumb { margin: 0 0 16px; color: #52665b; font-size: .85rem; }
.edge-hero { max-width: 780px; margin-bottom: 22px; }
.edge-hero h1 { max-width: 19ch; }
.edge-hero p { max-width: 68ch; margin-bottom: 0; line-height: 1.6; }
.edge-hero .edge-hero-example { margin-top: 8px; color: #45594c; font-size: .88rem; }
.edge-hero strong { color: #194d39; }
.edge-workspace { display: grid; grid-template-columns: minmax(260px, .88fr) minmax(0, 1.12fr); gap: 20px; align-items: start; }
.edge-result, .edge-form { min-width: 0; background: #fffefa; border: 1px solid var(--edge-line); border-radius: 12px; padding: clamp(18px, 3vw, 28px); }
.edge-result { border-top: 5px solid #286b4e; scroll-margin-top: 16px; }
.edge-result:focus-visible { outline: 3px solid #286b4e; outline-offset: 3px; }
.edge-result-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--edge-line); padding-bottom: 10px; }
.edge-result-heading h2, .edge-form h2 { margin: 0; }
.edge-result-heading span { color: #58685f; font-size: .76rem; }
.edge-primary { padding: 18px 0 12px; }
.edge-primary > span { display: block; color: #52665b; font-weight: 700; }
.edge-primary strong { display: block; color: #194d39; font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -.055em; line-height: 1.12; font-variant-numeric: tabular-nums; }
.edge-primary strong small { font-size: .34em; letter-spacing: 0; }
.edge-primary p { margin: 3px 0 0; color: #52665b; }
.edge-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid var(--edge-line); padding-top: 12px; }
.edge-comparison[hidden], .edge-example[hidden] { display: none; }
.edge-comparison div { min-width: 0; }
.edge-comparison span, .edge-comparison strong { display: block; }
.edge-comparison span { color: #52665b; font-size: .82rem; }
.edge-comparison strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.edge-result #edge-status { min-height: 2.8em; margin: 14px 0 8px; color: #52665b; font-size: .86rem; line-height: 1.45; }
.edge-example { padding: 8px 10px; background: #fff4d9; color: #594915; font-size: .82rem; }
.edge-form-heading button { border: 1px solid #286b4e; background: transparent; color: #194d39; border-radius: 5px; padding: 8px 11px; margin: 0 0 14px; font-weight: 750; }
.edge-form-heading button:hover, .edge-form-heading button:focus-visible { background: #e6efe8; }
.edge-form-heading p, .edge-full-fields p { margin: 7px 0 15px; color: #52665b; font-size: .88rem; }
.edge-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.edge-fields label { min-width: 0; color: #1f3028; font-weight: 750; font-size: .9rem; }
.edge-fields small { display: block; margin: 2px 0 6px; color: #52665b; font-size: .76rem; font-weight: 500; }
.edge-fields input, .edge-fields select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #9aac9d; border-radius: 5px; background: white; color: #1f3028; }
.edge-fields input:focus-visible, .edge-fields select:focus-visible { outline: 3px solid #b4d3bc; outline-offset: 2px; }
.edge-full-fields { border: 1px solid var(--edge-line); margin: 20px 0 0; padding: 14px; min-width: 0; }
.edge-full-fields legend { padding: 0 5px; font-weight: 800; }
.edge-private { margin: 15px 0 0; color: #52665b; font-size: .8rem; }
.edge-view-result { width: 100%; min-height: 44px; margin-top: 18px; padding: 10px 14px; border: 1px solid #194d39; border-radius: 5px; background: #194d39; color: #fffefa; font-weight: 750; }
.edge-view-result:hover { background: #286b4e; }
.edge-view-result:focus-visible { outline: 3px solid #b4d3bc; outline-offset: 3px; }
.edge-diagram { margin: 24px 0; padding: 18px; background: #e9eee6; border: 1px solid var(--edge-line); }
.edge-diagram img { display: block; width: 100%; height: auto; }
.edge-diagram figcaption { max-width: 75ch; color: #45594c; font-size: .83rem; line-height: 1.5; }
.edge-reading { max-width: 78ch; margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid var(--edge-line); line-height: 1.65; }
.edge-reading h2 { font-size: 1.3rem; }
.edge-reading p { margin: 9px 0; }
.edge-faq details { border-top: 1px solid var(--edge-line); padding: 11px 0; }
.edge-faq summary { cursor: pointer; font-weight: 750; }
.edge-faq details p { margin: 8px 0 0; }
@media (max-width: 720px) { .edge-workspace { grid-template-columns: 1fr; gap: 12px; } .edge-fields { grid-template-columns: 1fr 1fr; } .edge-hero { margin-bottom: 14px; } }
@media (max-width: 720px) {
  .edge-result { scroll-margin-top: 92px; }
  .edge-page .site-header.page-shell { display: block; padding: 8px 0 6px; }
  .edge-page .site-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin-top: 5px; padding: 0; }
  .edge-page .site-nav a { white-space: nowrap; font-size: .7rem; min-height: 28px; padding: 2px 0; }
  .edge-main { padding-top: 5px; }
  .edge-crumb { margin-bottom: 8px; font-size: .78rem; }
  .edge-hero { margin-bottom: 10px; }
  .edge-hero h1 { font-size: 1.85rem; margin-bottom: 5px; }
  .edge-hero p { line-height: 1.4; font-size: .91rem; }
  .edge-hero .edge-hero-example { margin-top: 4px; font-size: .8rem; }
  .edge-result, .edge-form { padding: 13px 15px; }
  .edge-result-heading { border: 0; padding: 0; }
  .edge-result-heading span { display: none; }
  .edge-primary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; padding: 2px 0 0; }
  .edge-primary > span { font-size: .78rem; }
  .edge-primary strong { font-size: 1.7rem; }
  .edge-primary p { font-size: .75rem; }
  .edge-result #edge-status { min-height: 0; margin: 4px 0 0; font-size: .78rem; }
  .edge-form-heading p { margin: 3px 0 7px; font-size: .8rem; }
  .edge-form-heading button { min-height: 36px; margin-bottom: 8px; padding: 5px 9px; font-size: .8rem; }
}
@media (max-width: 390px) { .edge-fields { grid-template-columns: 1fr; gap: 11px; } .edge-comparison { grid-template-columns: 1fr; } .edge-diagram { padding: 10px; } }