:root {
  color-scheme: dark;
  --ink: #f6f2e8;
  --muted: #a9b6ad;
  --quiet: #74837a;
  --deep: #172321;
  --panel: #202d29;
  --edge: rgba(238, 244, 226, .12);
  --green: #c6f278;
  --orange: #ff9a61;
  --lavender: #c6b7ff;
  --track: #46564d;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --sans: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --display: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--deep); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select { color: inherit; font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
::selection { color: var(--deep); background: var(--green); }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 20; padding: 12px 16px; background: var(--green); color: var(--deep); }
.skip-link:focus { top: 12px; }
.topbar { min-height: 72px; padding: 0 max(5vw, calc((100vw - 1260px)/2)); border-bottom: 1px solid var(--edge); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 500 10px var(--mono); letter-spacing: .08em; }
.brand-spark { width: 27px; height: 27px; display: block; flex: none; overflow: visible; fill: var(--green); }
.wordmark i { padding: 0 4px; color: #647168; font-style: normal; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.section-label { margin-right: 8px; color: #839188; font: 400 9px var(--mono); letter-spacing: .08em; }
.mode-toggle { min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid #425148; border-radius: 20px; background: transparent; cursor: pointer; transition: border-color .2s, color .2s, background .2s, transform .2s; }
.mode-toggle { width: 32px; min-width: 32px; display: grid; place-items: center; padding: 0; color: var(--orange); font-size: 16px; }
.mode-toggle:hover { border-color: var(--green); background: rgba(198,242,120,.08); transform: translateY(-1px); }
.tool-main { width: min(1260px, 100%); margin: 0 auto; padding: 0 5vw; }
.tool-hero { min-height: 245px; padding: 46px 2.2vw 35px; display: grid; grid-template-columns: minmax(0,1fr) 200px; align-items: center; gap: 25px; }
.eyebrow { margin: 0 0 17px; color: var(--green); font: 400 9px var(--mono); letter-spacing: .13em; }
.pulse-dot { display: inline-block; width: 7px; height: 7px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(198,242,120,.12); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font: 500 clamp(50px, 6vw, 76px)/.96 var(--display); letter-spacing: -.075em; }
h1 em { color: var(--green); font-style: normal; }
.tool-intro { max-width: 600px; margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.tool-mark { width: 180px; height: 155px; justify-self: center; position: relative; display: grid; place-items: center; }
.mark-caption { position: absolute; right: -10px; bottom: 4px; color: #7c8b81; font: 400 8px/1.8 var(--mono); letter-spacing: .1em; }
.panel { min-width: 0; border: 1px solid var(--edge); border-radius: 5px; background: var(--panel); }
.panel-topline { min-height: 54px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid rgba(238,244,226,.1); }
.panel-label { color: #91a096; font: 400 8px var(--mono); letter-spacing: .09em; }
.panel-label b { padding: 0 5px; color: #66756c; font-weight: 400; }
.panel-index { color: #68766d; font: 400 8px var(--mono); }
.primary-button, .secondary-button, .quiet-button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 4px; font-size: 10px; transition: transform .2s, background .2s, border-color .2s, color .2s; }
.primary-button { padding: 0 14px; border: 1px solid rgba(198,242,120,.42); background: rgba(198,242,120,.09); color: var(--green); }
.primary-button:hover { transform: translateY(-1px); background: rgba(198,242,120,.16); }
.primary-button span:first-child { font-size: 8px; }
.secondary-button { padding: 0 12px; border: 1px solid rgba(238,244,226,.18); background: rgba(255,255,255,.025); color: #c0cbc1; }
.secondary-button:hover { border-color: rgba(198,242,120,.4); color: var(--green); }
.quiet-button { min-height: 31px; padding: 0 9px; border: 1px solid rgba(238,244,226,.14); background: transparent; color: #9ba79d; font-size: 9px; }
.quiet-button:hover { border-color: rgba(198,242,120,.4); color: var(--green); }
.setting-group { margin: 20px 21px 0; }
.setting-group label { display: block; margin-bottom: 9px; color: #dce5dc; font-size: 10px; }
.setting-heading { margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.setting-heading label { margin: 0; }
.setting-heading output { color: var(--green); font: 400 9px var(--mono); white-space: nowrap; }
.setting-group select, .setting-group input[type="number"] { width: 100%; height: 36px; padding: 0 10px; border: 1px solid rgba(238,244,226,.16); border-radius: 3px; outline: none; background: #1a2723; color: var(--ink); font-size: 10px; }
.setting-group select:focus-visible, .setting-group input[type="number"]:focus-visible { border-color: var(--green); box-shadow: 0 0 0 2px rgba(198,242,120,.16); }
input[type="range"] { width: 100%; height: 4px; display: block; margin: 0; appearance: none; border-radius: 4px; background: var(--track); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { width: 15px; height: 15px; appearance: none; border: 3px solid var(--panel); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px var(--green); }
input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid var(--panel); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px var(--green); }
input[type="range"]:focus-visible { outline: 2px solid var(--green); outline-offset: 7px; }
.range-ends { margin-top: 9px; display: flex; justify-content: space-between; color: #748279; font: 400 7px var(--mono); }
.setting-note { margin: 17px 21px 0; color: #77857b; font-size: 8px; line-height: 1.7; }
.tool-footer { min-height: 66px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; color: #87938a; font: 400 8px var(--mono); }
.tool-footer a { color: inherit; text-decoration: none; }.tool-footer a span:last-child { color: var(--green); }
.tool-footer p { margin: 0; justify-self: center; color: #77847b; }.tool-footer p > span:nth-child(2) { color: var(--orange); }
.footer-domain { justify-self: end; color: #68766d; letter-spacing: .07em; }
html[data-mode="day"] { color-scheme: light; --ink: #28352c; --muted: #6d786d; --quiet: #738071; --deep: #e9e6d9; --panel: #f3f0e5; --edge: rgba(40,53,44,.15); --green: #617d48; --orange: #bf6845; --lavender: #7663a6; --track: #c4cabb; }
html[data-mode="day"] .mode-toggle { border-color: #bbc3b5; }
html[data-mode="day"] .panel { border-color: #d2d4c8; }
html[data-mode="day"] .panel-topline { border-color: rgba(40,53,44,.13); }
html[data-mode="day"] .panel-label, html[data-mode="day"] .setting-group label { color: #526151; }
html[data-mode="day"] .setting-group select { border-color: rgba(40,53,44,.2); background: #ebe9dd; color: #28352c; }
html[data-mode="day"] .setting-group input[type="number"] { border-color: rgba(40,53,44,.2); background: #ebe9dd; color: #28352c; }
html[data-mode="day"] .secondary-button, html[data-mode="day"] .quiet-button { color: #526151; border-color: rgba(40,53,44,.2); }
@media (max-width: 780px) {
  .tool-hero { min-height: 220px; grid-template-columns: minmax(0,1fr) 150px; gap: 8px; }
  .tool-mark { width: 145px; height: 135px; }
}
@media (max-width: 600px) {
  .topbar { min-height: 62px; padding: 0 17px; }
  .wordmark { gap: 8px; font-size: 8px; }.brand-spark { width: 27px; height: 27px; display: block; flex: none; overflow: visible; fill: var(--green); }
  .section-label { display: none; }.topbar-right { gap: 7px; }
  .tool-main { padding: 0 17px; }
  .tool-hero { min-height: 0; padding: 37px 2px 25px; grid-template-columns: minmax(0,1fr) 86px; align-items: end; }
  .tool-mark { width: 92px; height: 90px; margin-right: -10px; }
  h1 { font-size: clamp(48px, 12vw, 67px); }
  .tool-intro { margin-top: 12px; font-size: 11px; }
  .eyebrow { margin-bottom: 13px; font-size: 8px; }
  .panel-topline { min-height: 49px; padding: 0 13px; }
  .panel-label { font-size: 7px; }
  .tool-footer { min-height: 72px; padding-bottom: 11px; grid-template-columns: 1fr 1fr; row-gap: 9px; }
  .tool-footer p { justify-self: end; font-size: 7px; }
  .footer-domain { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }