* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,textarea {
  font:inherit
}
button {
  cursor:pointer;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:var(--control-radius);
  background:var(--surface);
  color:var(--ink);
  padding:12px 16px;
  font-weight:550
}
button:hover {
  border-color:var(--muted)
}
button:disabled {
  opacity:.5;
  cursor:not-allowed
}
button.primary {
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper)
}
button.primary:hover:not(:disabled) {
  background:var(--ink)
}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px
}
[hidden] {
  display:none!important
}

.masthead,main {
  width:90%;
  margin-inline:auto
}
.masthead {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:28px 0;
  color:var(--muted);
  font-size:13px
}
.brand {
  font-size:24px;
  font-weight:650;
  color:var(--ink);
  letter-spacing:-.055em
}
.brand .brand-dot {
  color:var(--accent)
}
main {
  padding-bottom:24px
}
.intro {
  display:flex;
  align-items:center;
  gap:6%;
  padding:24px 0 32px
}
.intro h1 {
  font-size:clamp(32px,3.5vw,52px);
  line-height:1.08;
  font-weight:600;
  letter-spacing:-1.5px;
  margin:0;
  flex:1
}
.intro p {
  max-width:48ch;
  flex:1;
  margin:0;
  color:var(--muted);
  font-size:18px
}
.connection {
  color:var(--muted);
  font-size:14px;
  display:flex;
  gap:16px;
  align-items:center;
  min-height:32px;
  margin-bottom:18px
}
.connection button {
  font-size:14px
}
.steps {
  display:flex;
  gap:24px;
  border-bottom:1px solid var(--line);
  margin-bottom:30px
}
.steps button {
  background:none;
  border:0;
  border-radius:0;
  color:var(--muted);
  padding:12px 0 16px;
  display:flex;
  gap:12px;
  align-items:center;
  border-bottom:3px solid transparent
}
.steps button[aria-current] {
  color:var(--accent);
  border-bottom-color:var(--accent)
}
.section-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-bottom:24px
}
.section-heading h2 {
  font-size:24px;
  font-weight:600;
  letter-spacing:-.5px;
  margin:0
}
.section-heading p {
  margin:0;
  color:var(--muted);
  max-width:65ch
}
.fields {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:32px;
  row-gap:22px
}
.fields label {
  display:block;
  font-weight:550;
  min-width:0
}
.fields label.wide {
  grid-column:1/-1
}
input:not([type=checkbox]),textarea {
  display:block;
  width:100%;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  min-height:48px;
  padding:11px 14px;
  margin-top:8px;
  font-weight:400
}
input::placeholder,textarea::placeholder {
  color:var(--muted);
  opacity:1
}
textarea {
  resize:vertical
}
small {
  display:block;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  font-weight:400;
  margin-top:7px;
  max-width:75ch
}
.optional {
  font-size:12px;
  color:var(--muted);
  font-weight:400;
  margin-left:8px
}
.confirmation {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:18px 0;
  max-width:90ch;
  font-size:15px
}
.confirmation input {
  accent-color:var(--accent);
  width:20px;
  height:20px;
  flex:0 0 20px;
  margin:3px 0;
  cursor:pointer
}
.confirmation:has(input:focus-visible) {
  outline:2px solid var(--accent);
  outline-offset:2px
}
.confirmation span {
  min-height:44px;
  display:flex;
  align-items:center
}
.actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:20px 0;
  border-top:1px solid var(--line);
  margin-top:8px
}
.actions>span {
  font-size:14px;
  color:var(--muted)
}
.game-result {
  position:relative;
  border:0;
  background:var(--surface);
  padding:24px;
  border-radius:8px;
  margin:0 0 24px;
  min-width:0
}
.game-result legend {
  float:left;
  font-size:20px;
  font-weight:600;
  margin:0 0 22px;
  padding:0
}
.game-result .fields {
  clear:both
}
.remove-game {
  float:right;
  font-size:14px;
  margin-top:-8px;
  margin-bottom:12px
}
.add-game {
  margin-bottom:20px
}
.errors {
  background:var(--wash);
  color:var(--error);
  padding:20px;
  border-radius:var(--control-radius);
  margin-bottom:24px
}
.errors ul {
  margin:10px 0 0;
  padding-left:20px
}
.errors a {
  color:inherit;
  text-underline-offset:3px;
  overflow-wrap:anywhere
}
.errors li {
  padding:4px 0
}
[aria-invalid=true] {
  border-color:var(--error)!important
}
.review-mac {
  background:var(--surface);
  padding:20px 24px;
  border-radius:12px;
  margin-bottom:24px
}
.review-mac h3 {
  margin:0 0 4px;
  font-size:20px
}
.review-mac p {
  color:var(--muted);
  margin:0;
  overflow-wrap:anywhere
}
.review-game {
  border-top:1px solid var(--line);
  padding:20px 0
}
.review-game h3 {
  margin:0 0 12px;
  font-size:20px
}
.review-game dl {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:0
}
.review-game dt {
  font-size:13px;
  color:var(--muted)
}
.review-game dd {
  margin:3px 0 0;
  overflow-wrap:anywhere
}
.review-game p {
  overflow-wrap:anywhere;
  color:var(--muted)
}
#receipt {
  background:var(--surface);
  border-left:3px solid var(--accent);
  padding:24px;
  overflow-wrap:anywhere
}
#receipt h3 {
  margin-top:0
}
#receipt p {
  margin-bottom:0
}
#receipt code {
  font-size:12px
}
footer {
  display:flex;
  justify-content:space-between;
  gap:24px;
  color:var(--muted);
  font-size:12px;
  padding:24px 0
}

@media(min-width:1500px) {
  .mac-fields {
  grid-template-columns:repeat(4,minmax(0,1fr))
}

}

@media(max-width:734px) {
  .masthead {
  padding:20px 0
}
.brand {
  font-size:21px
}
.masthead>span:last-child {
  font-size:12px;
  max-width:125px;
  text-align:right
}
.intro {
  display:block;
  padding:16px 0 24px
}
.intro h1 {
  font-size:34px;
  margin-bottom:16px
}
.intro p {
  font-size:16px
}
.steps {
  gap:0;
  justify-content:space-between;
  margin-bottom:24px
}
.steps button {
  font-size:13px;
  gap:6px
}
.section-heading {
  display:block
}
.section-heading h2 {
  font-size:21px;
  margin-bottom:10px
}
.section-heading p {
  font-size:14px
}
.fields {
  grid-template-columns:1fr;
  gap:20px
}
.game-result {
  padding:18px
}
.actions {
  flex-wrap:wrap
}
.actions .primary {
  margin-left:auto
}
.actions>span {
  width:100%
}
.review-game dl {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
footer {
  display:block
}
footer span {
  display:block;
  margin-bottom:8px
}

}

@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto
}

}

.masthead .brand {
  text-decoration:none
}

.website-field {
  position:fixed!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important
}


.masthead { border-bottom: 1px solid var(--line); min-height: 88px; padding-block: 16px; }
.masthead nav { display: flex; align-items: center; gap: 32px; font-size: 14px; }
.masthead nav a { text-decoration: none; }
.intro { display: block; padding-block: 48px; }
.intro h1 { font-weight: 600; line-height: 1.06; letter-spacing: -.055em; font-size: clamp(40px, 4vw, 48px); max-width: 25ch; }
.intro h1 br { display: none; }
.intro p { margin-top: 16px; max-width: 70ch; font-size: 16px; }
.section-heading { grid-template-columns: 1fr 2fr; }
.game-result { background: none; border-top: 1px solid var(--line); border-radius: 0; padding: 24px 0; }
.review-mac { background: var(--wash); }
.brand { color: var(--ink); }
.benchmark-field { position: relative; min-width: 0; padding-top: 44px; }
.benchmark-field.wide { grid-column: 1 / -1; }
.field-help { position: absolute; top: 0; right: 0; min-height: 44px; width: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); }
.field-help:hover, .field-help:focus-visible { color: var(--ink); }
.field-hint { position: absolute; z-index: 3; top: 44px; right: 0; width: min(100%, 320px); margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); color: var(--ink); font-size: 14px; line-height: 1.5; }
@media (max-width: 734px) {
  .masthead { gap: 12px; flex-wrap: wrap; }
  .masthead nav { gap: 16px; }
  .masthead nav > span { display: none; }
  .intro { padding-block: 24px; }
  .intro h1 { font-size: 32px; }
  .section-heading { display: block; }
}