:root {
  font-family: 'Segoe UI Variable', 'Microsoft YaHei UI', system-ui, sans-serif;
  color: #172019;
  background: #f2f5ef;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #172019;
  --muted: #778178;
  --line: #e2e8df;
  --green: #2d9b61;
  --green-dark: #187548;
  --green-pale: #e5f4e9;
  --red: #c34e49;
  --amber: #ae7a25;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(ellipse at 78% 4%, #e2f0df 0, #f2f5ef 39rem); }
button, input { font: inherit; }
.shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(28, 62, 41, .1); }
.brand { display: flex; gap: 11px; align-items: center; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #248b54; font-size: 17px; font-weight: 800; box-shadow: 0 5px 12px rgba(34, 137, 80, .22); }
.top-note { display: flex; align-items: center; gap: 8px; color: #5d7161; font-family: ui-monospace, Consolas, monospace; font-size: 10px; letter-spacing: .03em; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #31ac67; box-shadow: 0 0 0 4px rgba(49, 172, 103, .12); }
.hero { min-height: 348px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; padding: 48px 7.2% 45px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 12px; color: #31895a; font: 500 10px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .14em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 15px; font-size: clamp(36px, 4.2vw, 52px); line-height: 1.11; font-weight: 800; letter-spacing: -.065em; }
h1 span { color: #25874f; }
.hero-text { max-width: 540px; margin-bottom: 21px; color: #647067; font-size: 13px; line-height: 1.8; }
.privacy-note { display: flex; align-items: center; gap: 9px; color: #55735d; font-size: 11px; }
.privacy-icon { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #b8d8c0; border-radius: 50%; color: #25874f; font-weight: 800; }
.hero-orbit { position: relative; width: 264px; height: 264px; justify-self: end; margin-right: 10%; }
.orbit { position: absolute; inset: 14px; border: 1px solid rgba(40, 132, 76, .16); border-radius: 50%; }
.orbit-one { transform: rotate(-26deg) scaleY(.56); }
.orbit-two { transform: rotate(33deg) scaleY(.73); border-color: rgba(40, 132, 76, .11); }
.core-mark { position: absolute; inset: 78px; display: grid; place-items: center; border: 1px solid #c6e0ca; border-radius: 50%; color: #23814a; background: linear-gradient(145deg, #fafff7, #dcefdc); box-shadow: 0 12px 32px rgba(46, 125, 72, .13), inset 0 0 0 10px rgba(255,255,255,.42); font-size: 62px; font-weight: 800; letter-spacing: -.1em; }
.core-mark i { position: absolute; width: 9px; height: 9px; right: 29px; top: 29px; border: 2px solid #f6fff3; border-radius: 50%; background: #27a45d; box-shadow: 0 0 0 4px rgba(39, 164, 93, .15); }
.orbit-chip { position: absolute; padding: 5px 8px; border: 1px solid #d7e7d7; border-radius: 6px; color: #52705a; background: rgba(250, 255, 248, .88); font: 500 8px ui-monospace, Consolas, monospace; letter-spacing: .08em; box-shadow: 0 5px 14px rgba(46, 90, 54, .06); }
.chip-a { left: 7px; top: 58px; }.chip-b { right: -11px; top: 123px; }.chip-c { left: 34px; bottom: 30px; }
.config-card, .observed-card { border: 1px solid rgba(32, 62, 41, .1); border-radius: 16px; background: rgba(255, 255, 255, .82); box-shadow: 0 16px 42px rgba(39, 67, 42, .055); }
.config-card { padding: 26px 30px 18px; }
.card-heading, .results-heading, .observed-heading { display: flex; align-items: center; justify-content: space-between; }
.card-heading h2, .results-heading h2 { margin: 0; font-size: 21px; letter-spacing: -.045em; }
.card-heading .eyebrow, .results-heading .eyebrow, .observed-heading .eyebrow { margin-bottom: 5px; }
.step-mark { color: #25874f; font: 500 12px ui-monospace, Consolas, monospace; }
.step-mark span { color: #a3afa3; }
.config-form { display: grid; grid-template-columns: 1.3fr 1fr .7fr auto; align-items: end; gap: 14px; margin-top: 23px; }
.field { display: grid; gap: 7px; color: #3e4c41; font-size: 11px; font-weight: 700; }
.field input { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #dce4dc; border-radius: 8px; outline: 0; color: #26372b; background: #fbfdf9; font: 12px ui-monospace, Consolas, monospace; transition: border-color .18s, box-shadow .18s; }
.field input:focus { border-color: #61ac78; box-shadow: 0 0 0 3px rgba(57, 157, 93, .12); }
.field small { min-height: 14px; color: #929b92; font-size: 9px; font-weight: 400; }
.field-cores input { max-width: 116px; }
.run-button { height: 43px; display: flex; align-items: center; gap: 22px; justify-content: space-between; padding: 0 14px 0 17px; border: 0; border-radius: 8px; color: #fff; background: #25874f; cursor: pointer; font-size: 11px; font-weight: 700; box-shadow: 0 7px 14px rgba(37, 135, 79, .15); transition: background .18s, transform .18s; }
.run-button:hover { background: #1c7543; transform: translateY(-1px); }.run-button:disabled { cursor: wait; opacity: .7; transform: none; }
.button-arrow { font-size: 17px; line-height: 1; }
.config-footnote { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: #7d897f; font-size: 10px; }
.config-footnote span { width: 14px; height: 14px; display: grid; place-items: center; border: 1px solid #bdc9bd; border-radius: 50%; font: 700 9px Georgia, serif; }
.form-error { margin: 12px 0 0; color: #b94843; font-size: 11px; }
.results { padding-top: 44px; scroll-margin-top: 24px; }
.results-heading { margin-bottom: 15px; }.results-heading h2 { font-size: 24px; }
.summary-pill { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #d7e8dc; border-radius: 20px; color: #277849; background: #edf8ef; font-size: 10px; }
.summary-pill > span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }.summary-pill.fail { color: #b54843; border-color: #f0d7d4; background: #fff2f0; }.summary-pill.unknown { color: #a87822; border-color: #eddfc5; background: #fff8e9; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 15px; }
.summary-tile { display: flex; align-items: baseline; gap: 9px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.summary-tile strong { font: 700 20px ui-monospace, Consolas, monospace; }.summary-tile span { color: var(--muted); font-size: 10px; }.summary-tile.pass strong { color: #288653; }.summary-tile.fail strong { color: #bd4e48; }.summary-tile.unknown strong { color: #ae7a25; }
.check-groups { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 14px; }
.check-group { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.group-heading { min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 15px; border-bottom: 1px solid #edf0eb; background: #fbfcfa; }
.group-heading h3 { margin: 0; font-size: 12px; letter-spacing: -.02em; }.group-heading span { color: #89958b; font-size: 9px; }
.check-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: start; gap: 9px; padding: 12px 14px; border-bottom: 1px solid #f0f2ee; }.check-row:last-child { border-bottom: 0; }
.check-icon { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: #25874f; background: #e8f5e9; font-size: 10px; font-weight: 800; }.check-row.fail .check-icon { color: #bd4e48; background: #fff0ee; }.check-row.unknown .check-icon { color: #ae7a25; background: #fff6e4; }
.check-body { min-width: 0; }.check-body strong { display: block; margin: 1px 0 3px; color: #314036; font-size: 10px; }.check-body p { margin: 0; color: #7d887f; font-size: 9px; line-height: 1.55; overflow-wrap: anywhere; }
.check-status { padding-top: 2px; color: #318456; font-size: 9px; white-space: nowrap; }.check-row.fail .check-status { color: #bd4e48; }.check-row.unknown .check-status { color: #ae7a25; }
.observed-value { display: block; margin-top: 6px; color: #778178; font: 9px/1.5 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.observed-card { margin-top: 14px; padding: 18px; }.observed-heading h3 { margin: 0; font-size: 14px; }.observed-heading .eyebrow { font-size: 9px; }.info-icon { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #d5dfd5; border-radius: 50%; color: #829084; font: 700 10px Georgia, serif; }
.observed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; }.observed-item { min-width: 0; display: grid; gap: 6px; padding: 11px; border-radius: 7px; background: #f6f8f4; }.observed-item span { color: #889288; font-size: 9px; }.observed-item strong { color: #46564a; font: 10px/1.5 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.observed-note { margin: 12px 0 0; color: #929c92; font-size: 9px; line-height: 1.6; }
.footer { display: flex; justify-content: space-between; gap: 12px; padding: 25px 0 30px; margin-top: 23px; border-top: 1px solid rgba(28, 62, 41, .1); color: #879287; font-size: 9px; }
.test-frame { position: fixed; width: 1px; height: 1px; left: -10px; top: -10px; border: 0; opacity: 0; pointer-events: none; }

@media (max-width: 800px) {
  .hero { padding: 42px 2% 35px; grid-template-columns: 1fr .55fr; }.hero-orbit { width: 205px; height: 205px; margin-right: 0; }.core-mark { inset: 58px; font-size: 48px; }.config-form { grid-template-columns: 1fr 1fr; }.field-cores input { max-width: none; }.run-button { align-self: start; }
}
@media (max-width: 580px) {
  .shell { width: min(100% - 30px, 440px); }.topbar { height: 62px; }.top-note { font-size: 8px; }.hero { display: block; min-height: auto; padding: 42px 2% 25px; }.hero-orbit { display: none; }h1 { font-size: 39px; }.hero-text { font-size: 12px; }.config-card { padding: 20px 17px 16px; }.config-form { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }.field-cores input { max-width: none; }.run-button { width: 100%; }.results { padding-top: 34px; }.check-groups { grid-template-columns: 1fr; }.observed-grid { grid-template-columns: 1fr 1fr; }.summary-grid { gap: 6px; }.summary-tile { padding: 11px 9px; gap: 5px; }.summary-tile strong { font-size: 18px; }.summary-tile span { font-size: 9px; }.footer { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }