:root {
  --ink: #172523;
  --muted: #62706d;
  --paper: #f4f0e6;
  --paper-deep: #e9e2d2;
  --cream: #fffdf7;
  --teal: #0f5c55;
  --teal-dark: #093d39;
  --teal-soft: #d9e8e3;
  --gold: #d4a94c;
  --line: rgba(23, 37, 35, 0.15);
  --serif: "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 11% 4%, rgba(212, 169, 76, 0.12), transparent 25rem),
    var(--paper);
  font-family: var(--sans);
}
button, input, select { font: inherit; }
button, select, input[type="range"], input[type="checkbox"] { cursor: pointer; }
a { color: inherit; }

main { min-height: 100vh; }
.site-header {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 750; letter-spacing: -0.02em; }
.brand-mark {
  width: 34px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff9e9;
  background: var(--teal);
  border-radius: 50% 50% 46% 46% / 42% 42% 58% 58%;
  font-family: var(--serif);
  font-size: 19px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 3px 0 var(--gold);
}
.unofficial { color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

.hero {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 78px 0 54px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: end;
  gap: 60px;
}
.eyebrow { margin: 0 0 15px; color: var(--teal); font-size: 12px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
h1 { margin: 0; max-width: 760px; font-family: var(--serif); font-size: clamp(50px, 7vw, 88px); line-height: .94; letter-spacing: -.055em; font-weight: 600; }
h1 em { color: var(--teal); font-weight: 400; }
.hero-copy { margin: 0 0 8px; color: var(--muted); font-size: 17px; line-height: 1.75; max-width: 440px; }

.calculator-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  border: 1px solid var(--line);
  background: rgba(255, 253, 247, .72);
  box-shadow: 0 25px 80px rgba(21, 49, 45, .09);
}
.input-panel { padding: 34px 42px 42px; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; background: var(--paper-deep); border-radius: 10px; }
.mode-switch button, .segmented button { border: 0; border-radius: 7px; padding: 11px 14px; color: var(--muted); background: transparent; font-weight: 700; font-size: 13px; }
.mode-switch button.active, .segmented button.active { color: var(--teal-dark); background: var(--cream); box-shadow: 0 2px 8px rgba(23,37,35,.08); }

fieldset { margin: 0; padding: 31px 0; border: 0; border-bottom: 1px solid var(--line); }
fieldset:last-child { padding-bottom: 0; border-bottom: 0; }
legend { width: 100%; margin-bottom: 22px; padding: 0; font-family: var(--serif); font-weight: 700; font-size: 21px; }
legend span { margin-right: 9px; color: var(--gold); font-family: var(--sans); font-size: 11px; letter-spacing: .08em; vertical-align: 3px; }
.field-grid { display: grid; gap: 18px; }
.field-grid.two { grid-template-columns: 1fr 1fr; }
.wide { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: 8px; color: #3d4b48; font-size: 12px; font-weight: 750; letter-spacing: .02em; }
input[type="number"], select {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid rgba(23,37,35,.2);
  border-radius: 6px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
}
input:focus, select:focus, button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid rgba(15,92,85,.22); outline-offset: 2px; border-color: var(--teal); }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 38px; }
.input-suffix span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; }
.protection-row { display: grid; grid-template-columns: 1fr 180px; gap: 20px; align-items: stretch; }
.range-label { justify-content: center; gap: 11px; }
.range-label > span:first-child { display: flex; align-items: center; justify-content: space-between; }
.range-label strong { color: var(--teal); font-family: var(--serif); font-size: 25px; }
input[type="range"] { width: 100%; accent-color: var(--teal); }
.range-scale { display: flex; justify-content: space-between; color: var(--muted); }
.check-card { position: relative; padding: 17px; flex-direction: row; align-items: center; background: var(--teal-soft); border: 1px solid rgba(15,92,85,.15); border-radius: 8px; }
.check-card input { position: absolute; opacity: 0; }
.custom-check { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; color: transparent; background: var(--cream); border: 1px solid rgba(15,92,85,.32); border-radius: 4px; }
.check-card input:checked + .custom-check { color: white; background: var(--teal); }
.check-card > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.check-card small, .full-field small { color: var(--muted); font-size: 10px; font-weight: 500; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 19px; padding: 4px; background: var(--paper-deep); border-radius: 8px; }
.full-field { margin-top: 18px; }
.field-note { margin: 15px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.result-panel {
  position: relative;
  overflow: hidden;
  padding: 48px 42px 38px;
  color: #eef7f3;
  background:
    radial-gradient(circle at 82% 12%, rgba(212,169,76,.18), transparent 21rem),
    linear-gradient(155deg, #115f57, #073a37 72%);
}
.result-panel::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.1); pointer-events: none; }
.result-panel > * { position: relative; }
.result-panel.is-disabled > *:not(.result-empty) { opacity: .12; filter: blur(1px); pointer-events: none; }
.result-empty { position: absolute; z-index: 5; inset: 0; display: none; align-content: center; justify-items: center; gap: 10px; padding: 40px; text-align: center; }
.result-panel.is-disabled .result-empty { display: grid; }
.result-empty strong { color: #fffaf0; font-family: var(--serif); font-size: 28px; }
.result-empty span { max-width: 310px; color: #bdd6d0; font-size: 13px; line-height: 1.6; }
.result-kicker { margin: 0 0 20px; color: #b8d6cf; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.result-skill { display: flex; align-items: baseline; gap: 16px; }
.result-skill > span { font-family: var(--serif); font-size: 94px; line-height: .9; letter-spacing: -.05em; color: #fffaf0; }
.result-skill small { color: #bdd6d0; font-weight: 700; }
.progress-heading { margin-top: 30px; display: flex; justify-content: space-between; gap: 16px; color: #c8dcd7; font-size: 12px; }
.progress-heading strong { color: #fff; }
.progress-track { height: 8px; margin-top: 10px; overflow: hidden; background: rgba(255,255,255,.13); border-radius: 99px; }
.progress-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #efd886); border-radius: inherit; transition: width .25s ease; }
.result-summary { margin: 24px 0 30px; color: #c8dcd7; font-family: var(--serif); font-size: 19px; line-height: 1.55; }
.result-summary strong { color: #fffaf0; font-weight: 700; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.14); border-left: 1px solid rgba(255,255,255,.14); }
.metric-grid div { padding: 17px 14px; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.metric-grid span { display: block; margin-bottom: 5px; color: #a9c9c2; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.metric-grid strong { font-family: var(--serif); font-size: 18px; color: #fffaf0; }
.recovery-box { margin-top: 28px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.14); }
.recovery-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.recovery-heading p { margin: 0 0 4px; color: #a9c9c2; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.recovery-heading h2 { margin: 0; color: #fffaf0; font-family: var(--serif); font-size: 20px; }
.recovery-heading > span { padding: 5px 8px; color: #d8e7e3; border: 1px solid rgba(255,255,255,.16); border-radius: 99px; font-size: 9px; white-space: nowrap; }
.recovery-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.recovery-options article { display: grid; grid-template-columns: 25px 1fr; gap: 10px; min-width: 0; padding: 15px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; }
.recovery-number { width: 24px; height: 24px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(212,169,76,.45); border-radius: 50%; font-family: var(--serif); font-size: 12px; }
.recovery-options h3 { margin: 1px 0 7px; color: #c4d9d4; font-size: 10px; font-weight: 750; line-height: 1.3; }
.recovery-options strong { display: block; color: #fffaf0; font-family: var(--serif); font-size: 20px; line-height: 1.15; }
.recovery-options p { margin: 7px 0 0; color: #9ebfb7; font-size: 9px; line-height: 1.45; }
.weapon-counts { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.weapon-counts span { white-space: nowrap; }
.weapon-counts b { color: #f2d98f; }
.recovery-note { margin: 12px 0 0; color: #87afa6; font-size: 9px; line-height: 1.5; }
details { margin-top: 28px; }
summary { cursor: pointer; color: #e9f2ef; font-size: 12px; font-weight: 750; }
.breakdown { margin: 16px 0 0; }
.breakdown div { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.09); font-size: 11px; }
.breakdown dt { color: #a9c9c2; }
.breakdown dd { margin: 0; color: #fff; font-weight: 700; }
.formula-box { margin-top: 15px; padding: 13px; color: #dcebe7; background: rgba(0,0,0,.16); border-radius: 5px; font-size: 10px; line-height: 1.5; }
.rounding-note { margin: 24px 0 0; color: #96bcb4; font-size: 10px; line-height: 1.55; }

.how-it-works { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 96px 0 84px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.steps article { padding-top: 20px; border-top: 1px solid var(--line); }
.steps article > span { color: var(--gold); font-family: var(--serif); font-size: 26px; }
.steps h2 { margin: 22px 0 10px; font-family: var(--serif); font-size: 22px; }
.steps p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
footer { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 26px 0 38px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
footer p { margin: 0; }
footer nav { display: flex; gap: 20px; }
footer a:hover { color: var(--teal); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 58px; }
  .calculator-shell { grid-template-columns: 1fr; }
  .result-panel { min-height: 620px; }
  .steps { gap: 20px; }
}

@media (max-width: 620px) {
  .site-header, .hero, .calculator-shell, .how-it-works, footer { width: min(100% - 24px, 1180px); }
  .site-header { min-height: 66px; }
  .unofficial { display: none; }
  .hero { padding: 48px 0 38px; }
  h1 { font-size: 50px; }
  .input-panel, .result-panel { padding: 27px 20px 32px; }
  .field-grid.two, .protection-row, .steps { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .recovery-options { grid-template-columns: 1fr; }
  .result-skill > span { font-size: 78px; }
  .how-it-works { padding: 68px 0 58px; }
  footer { flex-direction: column; }
  footer nav { flex-wrap: wrap; gap: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}