:root {
  color-scheme: dark;
  --soot: #0d1017;
  --panel: #131721;
  --panel-hi: #202632;
  --paper: #bfbdb6;
  --muted: #868a91;
  --line: #414750;
  --copper: #e6b450;
  --sage: #d5ba78;
  --plate-surface: radial-gradient(ellipse at 55% 38%, #30333a, #131721 72%);
  --radius: 12px;
  --shadow: 0 12px 32px #0005;
  --font-hero: "Onest", Inter, "Segoe UI", Arial, sans-serif;
  --font-section: "Urbanist", Inter, "Segoe UI", Arial, sans-serif;
  --font-body: "Onest", Inter, "Segoe UI", Arial, sans-serif;
  --font-utility: "Overpass Mono", "SFMono-Regular", Consolas, monospace;
  --mono: var(--font-utility);
  --sans: var(--font-body);
  --display: var(--font-hero);
}
@font-face { font-family: "Onest"; src: url("/fonts/onest-variable.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("/fonts/urbanist-variable.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Overpass Mono"; src: url("/fonts/overpass-mono-variable.woff2") format("woff2"); font-style: normal; font-weight: 300 700; font-display: swap; }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--soot); }
body {
  margin: 0;
  color: var(--paper);
  font-family: var(--sans);
  background-color: var(--soot);
  background-image: linear-gradient(color-mix(in srgb, var(--paper) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--paper) 4%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
}
.grain { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: var(--texture-opacity, .05); background-image: var(--texture-image); background-position: 0 0; background-repeat: repeat; background-size: 384px 384px; }
a { color: inherit; }
.masthead, main, footer { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.masthead { min-height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand-name { color: var(--paper); text-decoration: none; font: 600 11px var(--mono); letter-spacing: .09em; white-space: nowrap; }
.brand-name span { color: var(--copper); padding-inline: 3px; }
.header-tools { display: flex; align-items: center; gap: 17px; }
.theme-picker { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 9px var(--mono); letter-spacing: .1em; }
.theme-picker select { max-width: 195px; padding: 8px 28px 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--paper); font: 11px var(--sans); }
.theme-picker select:focus-visible, .theme-lab-link:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.theme-lab-link { color: var(--muted); font: 10px var(--mono); text-decoration: none; }
.theme-lab-link:hover { color: var(--copper); }
.masthead-note, .eyebrow, .section-count, .plate-label, .axis, .plate-measure, .plate-caption, footer, .card-index, .card-action { font-family: var(--mono); }
.masthead-note { color: var(--muted); font-size: 10px; letter-spacing: .08em; display: flex; align-items: center; gap: 9px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 10px color-mix(in srgb, var(--sage) 45%, transparent); }
.intro { padding: 69px 0 80px; display: grid; grid-template-columns: 1.02fr .98fr; gap: 8%; align-items: center; }
.eyebrow { color: var(--copper); font-size: 10px; letter-spacing: .17em; margin: 0 0 21px; }
h1, h2, h3 { font-family: var(--font-section); font-weight: 800; mask-image: var(--heading-wear-image); mask-repeat: repeat; mask-size: var(--heading-wear-size, 3em 3em); mask-position: 0 0; }
h1 { font-family: var(--font-hero); font-weight: 900; font-size: clamp(40px, 4.5vw, 62px); letter-spacing: -.04em; line-height: 1.06; margin: 0; max-width: 650px; }
.lede { max-width: 480px; margin: 25px 0 0; color: color-mix(in srgb, var(--paper) 78%, var(--soot)); font-size: 16px; line-height: 1.65; }
.bench-plate { position: relative; padding: 0 0 23px 19px; }
.plate-inner { aspect-ratio: 1.72; min-height: 230px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--plate-surface); box-shadow: var(--shadow); }
.plate-inner::before, .plate-inner::after { content: ""; position: absolute; inset: 12px; border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); }
.plate-inner::after { inset: 25px; border-style: dashed; opacity: .6; }
.plate-label { position: absolute; top: 18px; left: 20px; color: var(--muted); letter-spacing: .1em; font-size: 9px; z-index: 1; }
.axis { position: absolute; z-index: 1; color: var(--copper); font-size: 10px; }
.axis i { display: inline-block; height: 1px; width: 44px; background: var(--copper); vertical-align: middle; }
.axis-x { left: 20px; bottom: 19px; }.axis-y { right: 20px; top: 17px; transform: rotate(90deg); transform-origin: right; }
.plate-part { position: absolute; width: 115px; height: 115px; left: 50%; top: 51%; transform: translate(-50%,-50%) rotate(30deg) skew(-7deg,-7deg); display: grid; grid-template-columns: 1fr 1fr; gap: 7px; filter: drop-shadow(11px 13px 0 #11181799); }
.plate-part span { border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); background: linear-gradient(145deg,var(--sage),var(--panel-hi)); box-shadow: inset 0 5px 12px color-mix(in srgb, var(--paper) 12%, transparent); }
.plate-part span:nth-child(2), .plate-part span:nth-child(3) { background: linear-gradient(145deg,var(--panel-hi),var(--panel)); }
.plate-measure { position: absolute; right: 22px; bottom: 18px; color: var(--muted); font-size: 9px; }
.plate-caption { position: absolute; left: 19px; bottom: 0; color: var(--muted); font-size: 9px; letter-spacing: .06em; }
.tools { border-top: 1px solid var(--line); padding: 25px 0 75px; }
.section-head { display: flex; align-items: end; gap: 24px; margin-bottom: 23px; }
.section-head .eyebrow { margin-bottom: 10px; }
h2 { font-size: 23px; letter-spacing: -.015em; margin: 0; }
.section-rule { height: 1px; background: var(--line); flex: 1; margin-bottom: 7px; }
.section-count { color: var(--muted); font-size: 10px; letter-spacing: .1em; padding-bottom: 1px; }
.app-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; }
.app-card { text-decoration: none; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.app-card:hover { border-color: var(--sage); background: var(--panel-hi); transform: translateY(-3px); }
.app-card:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }
.card-image { display: block; width: 100%; aspect-ratio: 1.9; object-fit: cover; border-bottom: 1px solid var(--line); background: var(--panel-hi); }
.card-body { padding: 15px 15px 14px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.card-index { color: var(--copper); font-size: 9px; letter-spacing: .1em; }
.card-action { color: var(--muted); font-size: 9px; white-space: nowrap; }
.card-title { font-size: 16px; line-height: 1.3; margin: 0; letter-spacing: 0; }
.card-description { color: var(--muted); font-size: 12px; line-height: 1.55; min-height: 57px; margin: 8px 0 0; }
footer { border-top: 1px solid var(--line); min-height: 58px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 9px; letter-spacing: .09em; }
@media (max-width: 950px) { .app-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .intro { gap: 5%; } }
@media (max-width: 650px) {
  .masthead, main, footer { width: min(100% - 36px, 520px); }
  .masthead { min-height: 65px; flex-wrap: wrap; gap: 10px; padding-block: 10px; }.brand-name { font-size: 9px; }.header-tools { flex: 1 1 100%; justify-content: flex-start; gap: 10px; }.theme-lab-link, .masthead-note { display: none; }.theme-picker select { max-width: 185px; }.status-dot { width: 7px; height: 7px; }
  .intro { display: block; padding: 51px 0 51px; }.lede { font-size: 14px; margin-top: 20px; }
  .bench-plate { margin-top: 36px; padding-left: 9px; }.plate-inner { min-height: 188px; }.plate-caption { left: 9px; }
  .tools { padding-bottom: 50px; }.section-head { gap: 13px; }.section-count { font-size: 9px; }h2 { font-size: 20px; }
  .app-grid { grid-template-columns: 1fr; gap: 11px; }.app-card { display: grid; grid-template-columns: 39% 1fr; }.card-image { height: 100%; min-height: 135px; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid #47534e; }.card-body { padding: 13px 13px 11px; }.card-top { margin-bottom: 8px; }.card-title { font-size: 15px; }.card-description { min-height: 0; font-size: 11px; line-height: 1.45; margin-top: 6px; }
  footer { min-height: 60px; font-size: 8px; letter-spacing: .03em; gap: 10px; }footer span:last-child { text-align: right; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }