:root {
  --light: #f4f5f0;
  --dark: #080a08;
  --ink: #101210;
  --paper: #f7f8f4;
  --acid: #8bff4d;
  --muted-dark: #555b55;
  --muted-light: #a5aaa2;
  --line-dark: rgb(16 18 16 / 14%);
  --line-light: rgb(247 248 244 / 14%);
  --body-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-font: ui-rounded, "Segoe UI", system-ui, sans-serif;
  --scroll-shift: 0px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--dark); }
body { margin: 0; background: var(--dark); color: var(--paper); font-family: var(--body-font); min-height: 100vh; }
#shell { background: var(--light); }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }
.wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }

.site-header { position: sticky; z-index: 20; top: 0; width: min(1240px, calc(100% - 24px)); margin-inline: auto; border: 1px solid var(--line-dark); border-top: 0; border-radius: 0 0 18px 18px; background: rgb(244 245 240 / 96%); color: var(--ink); box-shadow: 0 12px 38px rgb(8 10 8 / 12%); backdrop-filter: blur(12px); }
.nav { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 0; }
.brand { display: flex; align-items: center; gap: 11px; font: 750 22px var(--display-font); letter-spacing: -.7px; }
.brand-logo { width: 38px; height: 38px; object-fit: contain; }
.links { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 750; letter-spacing: .025em; }
.links > a { border-bottom: 1px solid transparent; padding-block: 10px; }
.links > a:hover { border-color: var(--ink); }
.hot-link { display: grid; grid-template-columns: 48px minmax(190px, 190px); gap: 8px; align-items: center; }
.hot-link span { color: #387b17; font-size: 15px; letter-spacing: .12em; }
.hot-link strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hero-shell, .light-intro { position: relative; overflow: hidden; background: var(--light); color: var(--ink); }
.hero-shell { min-height: 620px; }
.hero-grid { position: absolute; inset: -16% -8%; opacity: .46; background-image: linear-gradient(rgb(16 18 16 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 18 16 / 7%) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(110deg, transparent 5%, #000 54%, transparent 95%); transform: translate3d(0, calc(var(--scroll-shift) * .13), 0) rotate(-4deg); will-change: transform; }
.hero-grid::after { content: ""; position: absolute; width: 360px; height: 360px; right: 8%; top: 8%; border: 1px solid rgb(16 18 16 / 13%); border-radius: 50%; box-shadow: 0 0 0 42px rgb(139 255 77 / 6%), 0 0 0 120px rgb(16 18 16 / 3%); transform: translate3d(0, calc(var(--scroll-shift) * -.035), 0); }
.hero { position: relative; z-index: 1; max-width: 900px; padding: 112px 0 150px; }
.eyebrow { color: #377c14; font-size: 11px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.hero h1, .toolhead h1 { font: 780 clamp(50px, 8vw, 94px)/.91 var(--display-font); letter-spacing: -.065em; margin: 20px 0 26px; }
.gradient { background: linear-gradient(100deg, var(--ink) 12%, #677064 62%, var(--acid) 108%); background-clip: text; color: transparent; }
.hero p, .toolhead p { max-width: 670px; color: var(--muted-dark); font-size: clamp(17px, 2vw, 20px); line-height: 1.65; }
.hero-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; border-bottom: 1px solid var(--ink); padding: 10px 0; font-size: 13px; font-weight: 800; }
.hero-link span { color: #377c14; }

.light-intro .toolhead { padding: 86px 0 130px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 34px; color: #6c736b; font-size: 12px; font-weight: 700; }
.breadcrumbs a { border-bottom: 1px solid rgb(16 18 16 / 25%); }
.breadcrumbs a:hover { color: #377c14; border-color: #377c14; }
.breadcrumbs [aria-current="page"] { color: var(--ink); }
.toolhead h1 { max-width: 920px; font-size: clamp(44px, 6vw, 74px); }
.legal-head { max-width: 900px; }
.legal-updated { font-size: 13px !important; letter-spacing: .03em; }

.dark-stage { position: relative; z-index: 3; margin-top: -54px; overflow: hidden; border-radius: 34px 34px 0 0; background: var(--dark); color: var(--paper); box-shadow: 0 -24px 70px rgb(8 10 8 / 18%); }
.dark-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: linear-gradient(rgb(247 248 244 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(247 248 244 / 3%) 1px, transparent 1px); background-size: 88px 88px; mask-image: linear-gradient(to bottom, #000, transparent 46%); }
.dark-orb { position: absolute; right: -110px; top: 100px; width: 420px; height: 420px; border: 1px solid rgb(139 255 77 / 18%); border-radius: 50%; opacity: calc(.62 - min(.22, var(--scroll-shift) / 6000)); transform: translate3d(calc(var(--scroll-shift) * -.035), calc(var(--scroll-shift) * -.18), 0) scale(calc(1 + min(.055, var(--scroll-shift) / 16000))); will-change: transform, opacity; }
.static-fallback { position: relative; z-index: 1; min-height: 420px; padding-top: 82px; padding-bottom: 96px; }
.static-tool-index h2 { margin: 0 0 28px; font: 760 clamp(30px, 4vw, 46px) var(--display-font); letter-spacing: -.04em; }
.static-tool-index ul { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--line-light); list-style: none; }
.static-tool-index a { display: block; padding: 18px 4px; border-bottom: 1px solid var(--line-light); color: var(--paper); text-decoration: none; }
.static-tool-index li:nth-child(odd) { border-right: 1px solid var(--line-light); padding-right: 22px; }
.static-tool-index li:nth-child(even) { padding-left: 22px; }
.tool-zone { padding: 100px 0 112px; }
#tools { scroll-margin-top: 80px; }
.category-stage { padding: 96px 0 112px; }
.category-list { position: relative; z-index: 1; display: grid; gap: 14px; }
.category-card { display: grid; grid-template-columns: 54px 1fr auto; align-items: start; gap: 24px; border: 1px solid var(--line-light); padding: clamp(24px,4vw,38px); background: rgb(247 248 244 / 3%); transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.category-card:hover { border-color: rgb(139 255 77 / 48%); background: rgb(139 255 77 / 5%); transform: translateX(4px); }
.category-index { color: #697068; font: 700 11px var(--body-font); letter-spacing: .16em; }
.category-card h2 { margin: 8px 0 10px; font: 750 clamp(27px,4vw,40px) var(--display-font); letter-spacing: -.04em; }
.category-card p { max-width: 720px; margin: 0 0 16px; color: var(--muted-light); line-height: 1.65; }
.category-tools { color: #7f867d; font-size: 12px; line-height: 1.7; }
.category-arrow { color: var(--acid); font-size: 22px; transition: transform .2s ease; }
.category-card:hover .category-arrow { transform: translate(3px,-3px); }

.tool-search { position: relative; z-index: 1; display: flex; gap: 10px; max-width: 760px; margin-bottom: 18px; padding: 7px; border: 1px solid var(--line-light); background: rgb(247 248 244 / 4%); }
.tool-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--paper); font-size: 15px; }
.tool-search input::placeholder { color: #777d76; }
.tool-search button { white-space: nowrap; }
.search-status { min-height: 26px; color: var(--muted-light); font-size: 13px; }
.section-heading { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 40px 0 28px; }
.section-heading .eyebrow, .dark-stage .eyebrow { color: var(--acid); }
.section-heading h2 { margin: 8px 0 0; font: 760 clamp(34px, 4vw, 48px) var(--display-font); letter-spacing: -.045em; }
.ranking-note { color: var(--muted-light); font-size: 12px; }

.grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-light); transition: opacity .18s ease; }
.grid.is-ranking { opacity: .01; }
.card { position: relative; min-height: 224px; padding: 30px 56px 28px 22px; border-bottom: 1px solid var(--line-light); transition: background-color .2s ease, transform .2s ease; }
.card:nth-child(odd) { border-right: 1px solid var(--line-light); }
.card:hover { background: rgb(139 255 77 / 5%); transform: translateY(-2px); }
.card-index { display: block; margin-bottom: 34px; color: #697068; font: 700 10px var(--body-font); letter-spacing: .16em; }
.card .icon { color: var(--acid); font-size: 24px; margin-bottom: 18px; }
.card h3 { margin: 0 0 9px; font: 720 clamp(21px, 3vw, 27px) var(--display-font); letter-spacing: -.025em; }
.card p { max-width: 410px; margin: 0; color: var(--muted-light); font-size: 14px; line-height: 1.6; }
.arrow { position: absolute; right: 24px; top: 26px; color: var(--acid); font-size: 18px; transition: transform .2s ease; }
.card:hover .arrow { transform: translate(3px, -3px); }
.empty-tools { grid-column: 1 / -1; padding: 56px 22px; border-bottom: 1px solid var(--line-light); color: var(--muted-light); text-align: center; }

.dark-stage > .wrap { position: relative; z-index: 1; padding-top: 96px; }
.toolbox { margin-bottom: 54px; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--line-light); background: rgb(247 248 244 / 4%); box-shadow: 0 28px 80px rgb(0 0 0 / 22%); }
.controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
label { color: #c6cbc3; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
input, select, textarea { width: 100%; border: 1px solid rgb(247 248 244 / 18%); border-radius: 0; outline: 0; background: #0e110e; color: var(--paper); padding: 14px 15px; font-size: 15px; }
textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: var(--acid); }
.category-nav { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 38px; }
.category-nav a { border: 1px solid var(--line-light); padding: 9px 12px; color: #c2c7bf; font-size: 12px; font-weight: 750; }
.category-nav a:hover { border-color: var(--acid); color: var(--acid); }
.crosshair-preview { display: grid; place-items: center; min-height: 260px; margin-top: 22px; background: radial-gradient(circle, #596159 0 1px, transparent 1px), linear-gradient(135deg,#232823,#111411); background-size: 26px 26px, auto; }
.crosshair { position: relative; width: 90px; height: 90px; color: var(--crosshair-color,#8bff4d); filter: drop-shadow(0 0 3px #000); }
.crosshair span { position: absolute; background: currentColor; }
.crosshair .top,.crosshair .bottom { left: 50%; width: var(--thickness,3px); height: var(--size,20px); transform: translateX(-50%); }
.crosshair .top { bottom: calc(50% + var(--gap,5px)); }.crosshair .bottom { top: calc(50% + var(--gap,5px)); }
.crosshair .left,.crosshair .right { top: 50%; width: var(--size,20px); height: var(--thickness,3px); transform: translateY(-50%); }
.crosshair .left { right: calc(50% + var(--gap,5px)); }.crosshair .right { left: calc(50% + var(--gap,5px)); }
.crosshair .dot { inset: 50% auto auto 50%; width: var(--dot,3px); height: var(--dot,3px); border-radius: 50%; transform: translate(-50%,-50%); }
.team-columns { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 22px; }
.team-card { border: 1px solid var(--line-light); background: #0d100d; padding: 18px; }
.team-card h3 { margin: 0 0 12px; color: var(--acid); }
.team-card ul { margin: 0; padding-left: 20px; color: #c3c8c0; line-height: 1.7; }
.reaction-pad { display: grid; place-items: center; min-height: 280px; margin-top: 20px; border: 1px solid var(--line-light); background: #191d19; color: var(--paper); text-align: center; padding: 30px; user-select: none; }
.reaction-pad.ready { background: #246b35; }.reaction-pad.waiting { background: #552424; }
.reaction-pad strong { font: 750 clamp(28px,5vw,54px) var(--display-font); }
.color-workbench { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(320px,1.2fr); gap: clamp(22px,4vw,42px); }
.color-picker-panel { display: flex; flex-direction: column; gap: 18px; }
.color-swatch { display: grid; place-items: end start; min-height: 260px; padding: 22px; border: 1px solid rgb(247 248 244 / 18%); box-shadow: inset 0 0 0 8px rgb(8 10 8 / 8%); transition: background-color .16s ease,color .16s ease; }
.color-swatch span { font: 800 clamp(25px,4vw,38px) var(--display-font); letter-spacing: -.03em; }
.color-input { min-height: 54px; padding: 5px; cursor: pointer; }
.color-input::-webkit-color-swatch-wrapper { padding: 0; }.color-input::-webkit-color-swatch { border: 0; }.color-input::-moz-color-swatch { border: 0; }
.color-error { min-height: 20px; margin: -6px 0 0; color: #ff8b83; font-size: 12px; }
.color-values { display: grid; align-content: start; gap: 10px; }
.color-value { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 82px; border: 1px solid var(--line-light); background: #0d100d; padding: 14px 16px 14px 20px; }
.color-value small,.color-value strong { display: block; }.color-value small { margin-bottom: 6px; color: var(--acid); font-size: 10px; font-weight: 850; letter-spacing: .14em; }.color-value strong { color: var(--paper); font: 700 clamp(16px,2.2vw,21px) var(--display-font); overflow-wrap: anywhere; }
.color-value .secondary { flex: 0 0 auto; }
.primary { border-radius: 0; background: var(--acid); color: var(--ink); padding: 14px 21px; font-size: 13px; font-weight: 850; }
.primary:hover { background: #a5ff75; }
.secondary { border: 1px solid var(--line-light); border-radius: 0; background: #191d19; color: var(--paper); padding: 12px 16px; font-size: 13px; font-weight: 800; }
.actions { display: flex; gap: 10px; margin-top: 18px; }
.results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
.result { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line-light); background: #0d100d; padding: 13px 15px; }
.result button { background: transparent; color: var(--muted-light); }
.output { margin-top: 22px; border-left: 2px solid var(--acid); background: #0d100d; padding: 22px; }
.output .value { color: var(--acid); font: 750 clamp(25px, 4vw, 40px) var(--display-font); overflow-wrap: anywhere; }
.output small { color: var(--muted-light); }
.copyrow { display: flex; align-items: center; gap: 10px; }
.copyrow .value { flex: 1; }
.content { display: grid; grid-template-columns: 1.5fr .7fr; gap: 52px; padding: 12px 0 90px; }
.article h2 { margin: 36px 0 12px; font: 720 27px var(--display-font); }
.article p, .article li { color: #b5bab2; line-height: 1.78; }
.related { border-left: 1px solid var(--line-light); padding-left: 28px; }
.related .section-title { margin-bottom: 10px; color: #7f867d; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.related a { display: block; border-bottom: 1px solid rgb(247 248 244 / 9%); padding: 13px 0; color: #c2c7bf; font-size: 14px; }
.related a:hover { color: var(--acid); }

.legal-page { max-width: 900px; padding-bottom: 100px; }
.legal-card { border-top: 1px solid var(--line-light); }
.legal-card section { padding: 28px 0; }
.legal-card section + section { border-top: 1px solid rgb(247 248 244 / 9%); }
.legal-card h2 { margin: 0 0 12px; font: 720 clamp(21px, 3vw, 27px) var(--display-font); }
.legal-card p, .legal-card address { color: #b9beb6; font-style: normal; line-height: 1.78; }
.legal-card a { color: var(--acid); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

.site-footer { position: relative; z-index: 5; background: var(--dark); }
.footer { display: flex; justify-content: space-between; gap: 28px; border-top: 1px solid var(--line-light); padding: 34px 0 48px; color: #858b83; font-size: 12px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.legal-links a, .legal-links button { border: 0; border-bottom: 1px solid rgb(139 255 77 / 35%); background: transparent; color: #b7bcb4; padding: 0 0 3px; font-size: 12px; }
.legal-links a:hover, .legal-links button:hover { color: var(--acid); }

.privacy-overlay { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(8 10 8 / 78%); backdrop-filter: blur(9px); }
.privacy-overlay[hidden] { display: none; }
.privacy-dialog { width: min(640px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: auto; border: 1px solid rgb(139 255 77 / 28%); background: #101310; color: var(--paper); padding: clamp(22px, 5vw, 36px); box-shadow: 0 28px 100px rgb(0 0 0 / 55%); }
.privacy-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 22px; }
.privacy-dialog h2 { margin: 8px 0 0; font: 750 30px var(--display-font); }
.privacy-dialog p { color: #afb5ac; line-height: 1.65; }
.privacy-close { flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid var(--line-light); background: transparent; color: var(--paper); font-size: 25px; }
.privacy-categories { margin: 24px 0; border-top: 1px solid var(--line-light); }
.privacy-categories > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line-light); padding: 17px 0; }
.privacy-categories strong, .privacy-categories small { display: block; }
.privacy-categories small { margin-top: 5px; color: #91978f; line-height: 1.45; }
.status { flex: 0 0 auto; border: 1px solid var(--line-light); padding: 6px 9px; color: #bbc0b8; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.status.always, .status.limited { border-color: rgb(139 255 77 / 35%); color: var(--acid); }
.privacy-note { font-size: 12px; }
.privacy-done { margin-top: 4px; min-width: 110px; }

@media (max-width: 700px) {
  .site-header { top: 0; width: calc(100% - 12px); border-radius: 0 0 14px 14px; }
  .wrap { width: min(100% - 28px, 1120px); }
  .nav { min-height: 72px; }
  #tools { scroll-margin-top: 72px; }
  .brand { font-size: 20px; }
  .links { gap: 18px; }
  .links > a:not(.hot-link) { display: none; }
  .hot-link { grid-template-columns: 42px minmax(0, 122px); gap: 5px; }
  .hero-shell { min-height: 560px; }
  .hero { padding: 88px 0 126px; }
  .hero h1, .toolhead h1 { letter-spacing: -.055em; }
  .hero-grid { transform: none; }
  .dark-stage { margin-top: -38px; border-radius: 22px 22px 0 0; }
  .dark-orb { display: none; }
  .tool-zone, .dark-stage > .wrap { padding-top: 72px; }
  .tool-search { flex-direction: column; }
  .tool-search button { width: 100%; }
  .section-heading { align-items: start; flex-direction: column; }
  .grid, .controls, .content, .static-tool-index ul, .team-columns, .color-workbench { grid-template-columns: 1fr; }
  .color-swatch { min-height: 210px; }
  .color-value { align-items: stretch; flex-direction: column; }
  .static-tool-index li:nth-child(odd) { border-right: 0; padding-right: 0; }
  .static-tool-index li:nth-child(even) { padding-left: 0; }
  .card:nth-child(odd) { border-right: 0; }
  .card { min-height: 198px; padding-left: 8px; }
  .field.full { grid-column: auto; }
  .results { grid-template-columns: 1fr; }
  .copyrow { align-items: stretch; flex-direction: column; }
  .related { border-top: 1px solid var(--line-light); border-left: 0; padding: 26px 0 0; }
  .footer, .legal-links { flex-direction: column; }
  .footer { gap: 22px; }
  .legal-links { align-items: flex-start; gap: 14px; }
  .privacy-categories > div { align-items: flex-start; flex-direction: column; }
  .category-card { grid-template-columns: 34px 1fr; gap: 14px; }
  .category-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .hero-grid, .hero-grid::after, .dark-orb { transform: none !important; }
}