:root {
  --ink: #16221f;
  --muted: #61706b;
  --line: #d9e0dc;
  --paper: #f7f8f5;
  --white: #ffffff;
  --green: #2f6d5e;
  --deep-green: #17433a;
  --coral: #f9d7ca;
  --yellow: #f9e7a4;
  --blue: #cbe4f4;
  --mint: #ccead9;
  --purple: #ddd7ef;
  --orange: #f8d8b0;
  font-family: Manrope, system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 16% 8%, #fffefa 0, #f7f8f5 31rem), var(--paper); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #76ad9e; outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; left: 1rem; top: -4rem; background: var(--ink); color: white; padding: .65rem 1rem; z-index: 20; }
.skip-link:focus { top: 1rem; }

.site-header, main, footer { max-width: 1180px; margin: 0 auto; }
.site-header { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; }
.brand { font-size: 1.27rem; font-weight: 800; letter-spacing: -.06em; display: inline-flex; gap: .48rem; align-items: center; }
.brand-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: white; font-family: "DM Mono", monospace; font-weight: 400; font-size: 1.15rem; }
nav { display: flex; gap: 1.6rem; margin-left: auto; margin-right: 1.8rem; }
nav a { color: var(--muted); font-size: .88rem; font-weight: 700; }
.text-button { border: 0; background: transparent; color: var(--green); font-size: .86rem; font-weight: 800; padding: .4rem; }

.hero { isolation: isolate; overflow: hidden; padding: 7rem 1.5rem 4.2rem; position: relative; text-align: center; max-width: 940px; margin: 0 auto; }
.hero::before, .hero::after { border-radius: 50%; content: ""; filter: blur(1px); opacity: .72; position: absolute; z-index: -1; }
.hero::before { background: #d7eee2; height: 230px; right: -3rem; top: 5rem; width: 230px; }
.hero::after { background: #fbe4c8; height: 120px; left: 1rem; top: 13rem; width: 120px; }
.eyebrow { color: var(--green); font-size: .71rem; font-weight: 800; letter-spacing: .115em; margin: 0 0 .78rem; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.055em; }
h1 { font-size: clamp(3.3rem, 7vw, 6.5rem); line-height: .98; margin: 0; font-weight: 800; }
h1 em { color: var(--green); font-family: Georgia, serif; font-weight: 400; }
.hero-copy { color: var(--muted); max-width: 540px; line-height: 1.7; margin: 1.8rem auto 2rem; }
.tool-search { background: var(--white); border: 1px solid var(--line); border-radius: 14px; display: flex; align-items: center; box-shadow: 0 11px 30px #344b4312; max-width: 700px; margin: 0 auto; padding: .45rem .75rem .45rem 1.15rem; text-align: left; }
.tool-search > span { color: var(--green); font-family: Georgia, serif; font-size: 2rem; line-height: 1; margin-right: .55rem; transform: rotate(-20deg); }
.tool-search input { border: 0; outline: 0; flex: 1; min-width: 0; color: var(--ink); padding: .85rem .2rem; font-size: 1rem; background: transparent; }
.tool-search kbd { color: var(--muted); background: #f2f5f2; border: 1px solid var(--line); border-radius: 5px; font-family: "DM Mono", monospace; font-size: .65rem; padding: .24rem .38rem; }
.privacy-note { align-items: flex-start; background: #edf7f1; border: 1px solid #cfe4d7; border-radius: 12px; color: var(--muted); display: flex; gap: .72rem; margin: 1.15rem auto 0; max-width: 620px; padding: .85rem 1rem; text-align: left; }
.privacy-note > span { align-items: center; background: var(--green); border-radius: 50%; color: white; display: flex; flex: 0 0 auto; font-family: "DM Mono", monospace; font-size: .78rem; height: 24px; justify-content: center; margin-top: .08rem; width: 24px; }
.privacy-note strong { color: var(--deep-green); display: block; font-size: .8rem; }
.privacy-note small { display: block; font-size: .73rem; line-height: 1.55; margin-top: .18rem; }
.hero-tags { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-top: 1.55rem; }.hero-tags span { background: #ffffffa8; border: 1px solid #dfe6e1; border-radius: 999px; color: var(--muted); font-size: .7rem; font-weight: 700; padding: .42rem .68rem; }.hero-tags b { color: var(--green); font-family: "DM Mono", monospace; font-weight: 500; }

.quick-links { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quick-links button { text-align: left; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink); padding: 1rem 1.5rem; font-size: .83rem; font-weight: 800; }
.quick-links button:last-child { border-right: 0; }
.quick-links span { float: right; color: var(--green); font-size: 1rem; }
.category-browser { align-items: center; display: flex; gap: 1.2rem; padding: 1.35rem 1.5rem 0; }.category-browser > p { color: var(--muted); flex: 0 0 auto; font-size: .72rem; font-weight: 800; letter-spacing: .06em; margin: 0; text-transform: uppercase; }.category-pills { display: flex; flex-wrap: wrap; gap: .45rem; }.category-pills button { background: #f0f4f1; border: 1px solid #dce5df; border-radius: 99px; color: var(--deep-green); font-size: .74rem; font-weight: 800; padding: .48rem .74rem; transition: background .18s, border-color .18s, transform .18s; }.category-pills button:hover { background: var(--white); border-color: #9fbcae; transform: translateY(-1px); }
.recent-tools { align-items: center; background: #eef6f1; border: 1px solid #d9e7df; border-radius: 15px; display: grid; gap: 1.4rem; grid-template-columns: 160px 1fr; margin: 2rem 1.5rem 0; padding: 1.1rem; }.recent-tools .eyebrow { margin-bottom: .35rem; }.recent-tools h2 { font-size: 1.1rem; margin: 0; }.recent-tools-list { display: grid; gap: .55rem; grid-template-columns: repeat(4, 1fr); }.recent-tool { background: #ffffffc9; border: 1px solid #d7e4dc; border-radius: 9px; color: var(--ink); display: grid; gap: .16rem; grid-template-columns: 1fr auto; padding: .7rem .75rem; text-align: left; transition: background .18s, border-color .18s, transform .18s; }.recent-tool:hover { background: white; border-color: #9cbcac; transform: translateY(-2px); }.recent-tool span { color: var(--green); font-size: .58rem; font-weight: 800; grid-column: 1 / 2; letter-spacing: .08em; text-transform: uppercase; }.recent-tool strong { font-size: .76rem; grid-column: 1 / 2; letter-spacing: -.02em; }.recent-tool i { color: var(--green); font-style: normal; grid-column: 2; grid-row: 1 / 3; }
.favorite-tools { background: #fbf3d9; border-color: #ecdfaf; }.favorite-tools .recent-tool { border-color: #eadfb8; }.favorite-tools .recent-tool span, .favorite-tools .recent-tool i { color: #7b6522; }

.tool-section { padding: 5.6rem 1.5rem; }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 2rem; }
.section-heading h2, .workspace h2, .dialog-heading h2 { font-size: clamp(1.95rem, 4vw, 3rem); margin: 0; }
.section-heading > p { color: var(--muted); font-family: "DM Mono", monospace; font-size: .74rem; margin: 0 0 .45rem; }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ad-zone { background: #f1f4f1; border: 1px solid #dce3df; border-radius: 13px; margin: 2.2rem 1.5rem 0; min-height: 112px; overflow: hidden; padding: 1.35rem 1rem .7rem; position: relative; text-align: center; }
.ad-zone-after-tools { margin-bottom: 4rem; margin-top: -2.5rem; }
.ad-label { color: #7a8580; font-size: .58rem; font-weight: 800; left: 50%; letter-spacing: .1em; position: absolute; text-transform: uppercase; top: .5rem; transform: translateX(-50%); }
.ad-mount { min-height: 90px; width: 100%; }
.ad-mount .adsbygoogle { min-height: 90px; }
.tool-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; min-height: 250px; overflow: hidden; padding: 1.5rem; display: flex; flex-direction: column; position: relative; transition: border-color .18s, transform .18s, box-shadow .18s; }
.tool-card:hover { border-color: #a8bfb6; box-shadow: 0 9px 24px #1d41340a; transform: translateY(-3px); }
.tool-card.featured { background: var(--deep-green); border-color: var(--deep-green); color: white; }
.card-icon { display: grid; place-items: center; border-radius: 10px; width: 45px; height: 45px; font-family: "DM Mono", monospace; font-size: .93rem; font-weight: 500; margin-bottom: auto; }
.card-top { align-items: start; display: flex; justify-content: space-between; margin-bottom: auto; }.card-top .card-icon { margin-bottom: 0; }.new-badge { background: #eef6f0; border: 1px solid #d0e3d6; border-radius: 999px; color: var(--green); font-size: .61rem; font-weight: 800; letter-spacing: .06em; padding: .3rem .45rem; text-transform: uppercase; }.new-tool::after { background: linear-gradient(90deg, transparent, #ccead9); content: ""; height: 2px; left: 1.5rem; position: absolute; right: 1.5rem; top: 0; }
.coral { background: var(--coral); color: #742b25; }.yellow { background: var(--yellow); color: #645315; }.blue { background: var(--blue); color: #174c6f; }.mint { background: var(--mint); color: #235842; }.purple { background: var(--purple); color: #453771; }.orange { background: var(--orange); color: #7e3e16; }
.tool-category { color: var(--green); font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin: 1.4rem 0 .45rem; }
.featured .tool-category { color: #b7d9ca; }
.tool-card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.tool-card p:not(.tool-category) { color: var(--muted); font-size: .82rem; line-height: 1.55; margin-bottom: 1.35rem; }
.featured p:not(.tool-category) { color: #cee0d9; }
.tool-card button, .tool-card > .tool-open-link { align-self: flex-start; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--green); padding: 0 0 .15rem; font-size: .8rem; font-weight: 800; text-decoration: none; }
.tool-card > .favorite-toggle { align-items: center; background: #f8fbf9; border: 1px solid #ceddd5; border-radius: 50%; color: #6c7f76; display: flex; font-size: 1rem; height: 30px; justify-content: center; padding: 0; position: absolute; right: 1rem; top: 1rem; width: 30px; z-index: 2; }.tool-card > .favorite-toggle:hover { background: #fff5cf; border-color: #d8c46d; color: #745e12; }.tool-card > .favorite-toggle[aria-pressed="true"] { background: #f9e9a6; border-color: #d9be4d; color: #69540d; }.featured > .favorite-toggle { background: #ffffff17; border-color: #ffffff45; color: white; }.featured > .favorite-toggle:hover, .featured > .favorite-toggle[aria-pressed="true"] { background: #f8df78; border-color: #f8df78; color: #5c4808; }.card-top { padding-right: 2.25rem; }
.featured button { color: white; }
.tool-card button span, .tool-card > .tool-open-link span, .primary-button span { display: inline-block; margin-left: .25rem; transition: transform .16s; }
.tool-card button:hover span, .tool-card > .tool-open-link:hover span, .primary-button:hover span { transform: translateX(3px); }
.empty-state { color: var(--muted); margin: 2rem 0 0; }.empty-state button { background: none; border: 0; color: var(--green); font-weight: 800; padding: 0; }

.workspace { background: #eef5f1; border: 1px solid #d5e4dc; border-radius: 18px; padding: 1.7rem; }
.workspace-bar, .dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #d4e0d9; padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.workspace-bar .eyebrow { margin-bottom: .5rem; }.workspace-actions { align-items: center; display: flex; gap: .55rem; }.compact-button { margin: 0; padding: .55rem .72rem; }.icon-button { border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); width: 34px; height: 34px; font-size: 1.35rem; line-height: 1; display: grid; place-items: center; }
.tool-layout { max-width: 860px; }.full-label, .input-stack label, .calculator-layout label { color: var(--ink); display: block; font-size: .82rem; font-weight: 800; }
textarea, input[type="number"], input[type="email"], input[type="text"], input[type="date"], input[type="time"], input[type="datetime-local"], select { border: 1px solid #c8d4ce; border-radius: 8px; margin-top: .52rem; padding: .75rem .85rem; width: 100%; background: var(--white); color: var(--ink); font-weight: 500; }
textarea { resize: vertical; line-height: 1.55; font-family: "DM Mono", monospace; font-size: .85rem; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-top: 1rem; }.stats-grid div { background: var(--white); border: 1px solid #d5e1db; border-radius: 10px; padding: 1rem; }.stats-grid span { display: block; font-family: "DM Mono", monospace; font-size: 1.18rem; font-weight: 500; }.stats-grid small { color: var(--muted); display: block; font-size: .7rem; margin-top: .25rem; }
.button-row, .tool-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }.secondary-button { border: 1px solid #bccfc5; border-radius: 8px; background: var(--white); color: var(--deep-green); padding: .62rem .82rem; font-size: .78rem; font-weight: 800; }.secondary-button:hover { background: #f4f8f5; }
.calculator-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); gap: 1.5rem; max-width: 800px; }.input-stack { display: grid; gap: .92rem; }.result-card { background: var(--deep-green); color: white; border-radius: 12px; padding: 1.5rem; }.result-card p { color: #c6ded4; font-size: .8rem; margin-bottom: .35rem; }.result-card p small { opacity: .78; }.result-card strong { font-family: "DM Mono", monospace; font-size: 2rem; letter-spacing: -.08em; }.result-card dl { border-top: 1px solid #598579; margin: 1.35rem 0 0; padding-top: 1rem; }.result-card dl div { display: flex; justify-content: space-between; margin-bottom: .55rem; }.result-card dt { color: #c6ded4; font-size: .77rem; }.result-card dd { margin: 0; font-family: "DM Mono", monospace; font-size: .8rem; }
.password-layout { max-width: 680px; }.password-output { display: flex; align-items: center; background: var(--white); border: 1px solid #c8d4ce; border-radius: 9px; padding: .65rem .75rem .65rem 1rem; gap: .75rem; }.password-output code { overflow: auto; flex: 1; font-family: "DM Mono", monospace; font-size: .94rem; white-space: nowrap; }.password-output .icon-button { flex: 0 0 auto; }.password-layout > label { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; margin-top: 1.2rem; font-size: .82rem; font-weight: 800; }.password-layout output { color: var(--green); font-family: "DM Mono", monospace; }.password-layout input[type="range"] { accent-color: var(--green); }.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-top: 1.2rem; }.check-grid label, .checkbox-row { font-size: .8rem !important; font-weight: 600 !important; }.check-grid input, .checkbox-row input { accent-color: var(--green); margin-right: .38rem; }
.file-drop { border: 1.5px dashed #9dbbb0; background: #f9fcfa; border-radius: 11px; cursor: pointer; display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1rem; text-align: center; }.file-drop:hover { background: #f3faf5; }.file-drop > span { color: var(--green); font-size: 1.7rem; }.file-drop strong { font-size: .95rem; margin-top: .4rem; }.file-drop small { color: var(--muted); font-size: .75rem; margin-top: .32rem; }.file-drop input { display: none; }.image-settings { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.5rem; margin-top: 1.3rem; }.image-settings img { background: #dfe9e3; border-radius: 10px; max-height: 370px; min-height: 180px; max-width: 100%; object-fit: contain; width: 100%; }.checkbox-row { align-items: center; display: flex !important; }
.converter-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); gap: 1.5rem; max-width: 850px; }.converter-controls { background: #f9fcfa; border: 1px solid #d8e6dd; border-radius: 12px; display: grid; gap: .9rem; padding: 1.25rem; }.converter-controls label { color: var(--ink); display: block; font-size: .8rem; font-weight: 800; }.unit-pair { align-items: end; display: grid; grid-template-columns: 1fr 40px 1fr; gap: .55rem; }.swap-button { background: var(--white); border: 1px solid #bdd2c5; border-radius: 50%; color: var(--green); height: 34px; margin-bottom: .05rem; width: 34px; }.converter-result { background: #193f37; border-radius: 12px; color: white; display: flex; flex-direction: column; justify-content: center; padding: 1.6rem; }.converter-result p { color: #c0dbcf; font-size: .75rem; line-height: 1.55; }.converter-result p:last-child { margin: 1.2rem 0 0; }.converter-result strong { font-family: "DM Mono", monospace; font-size: clamp(1.55rem, 3vw, 2.4rem); letter-spacing: -.06em; overflow-wrap: anywhere; }.split-tool-layout { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); max-width: 1050px; }.split-tool-layout > .button-row, .split-tool-layout > .form-status { grid-column: 1 / -1; }.split-arrow { align-self: center; color: var(--green); font-family: Georgia, serif; font-size: 1.8rem; text-align: center; }.split-tool-layout .full-label small { color: var(--muted); font-weight: 500; }.colour-layout { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(0, 1fr); gap: 1.5rem; max-width: 850px; }.colour-preview { align-items: flex-end; background: #2f6d5e; border-radius: 13px; box-shadow: inset 0 -60px 70px #00000025; color: white; display: flex; min-height: 270px; padding: 1.25rem; }.colour-preview span { background: #ffffff22; backdrop-filter: blur(3px); border: 1px solid #ffffff33; border-radius: 6px; font-family: "DM Mono", monospace; font-size: .82rem; padding: .5rem .62rem; }.colour-controls { display: grid; align-content: start; gap: .9rem; }.colour-controls label { color: var(--ink); display: grid; font-size: .8rem; font-weight: 800; gap: .45rem; }.colour-controls input { margin: 0; }.colour-controls input[type="color"] { background: var(--white); border: 1px solid #c8d4ce; border-radius: 8px; cursor: pointer; height: 45px; padding: .3rem; width: 100%; }.colour-values { border-top: 1px solid #d8e3dd; margin-top: .35rem; }.colour-values > div { align-items: center; border-bottom: 1px solid #d8e3dd; display: grid; gap: .5rem; grid-template-columns: 38px 1fr 34px; padding: .7rem 0; }.colour-values span { color: var(--muted); font-size: .72rem; font-weight: 800; }.colour-values code { font-family: "DM Mono", monospace; font-size: .78rem; }.copy-value { background: var(--white); border: 1px solid #ccd8d1; border-radius: 6px; color: var(--green); height: 29px; width: 29px; }.random-layout { max-width: 720px; }.random-inputs { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }.random-inputs label { color: var(--ink); display: block; font-size: .8rem; font-weight: 800; }.random-output { align-items: center; background: linear-gradient(120deg, #d5ecdf, #f5f9f6); border: 1px solid #c9ded0; border-radius: 12px; display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; padding: 1.3rem; }.random-output p { color: var(--muted); font-size: .76rem; font-weight: 800; margin: 0; text-transform: uppercase; letter-spacing: .06em; width: 100%; }.random-output strong { color: var(--deep-green); font-family: "DM Mono", monospace; font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -.1em; margin-right: auto; }.random-output .text-button { color: var(--deep-green); }
.loan-layout .tool-disclaimer { color: var(--muted); font-size: .73rem; grid-column: 1 / -1; line-height: 1.6; margin: 0; }.date-layout { display: grid; gap: 1.3rem; max-width: 760px; }.date-inputs { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }.date-inputs label, .hash-controls label { color: var(--ink); display: block; font-size: .8rem; font-weight: 800; }.date-result { background: #f9e7a4; border: 1px solid #edd98c; border-radius: 12px; padding: 1.35rem; }.date-result p { color: #6b5916; font-size: .75rem; font-weight: 800; letter-spacing: .06em; margin-bottom: .4rem; text-transform: uppercase; }.date-result strong { color: #4d420e; display: block; font-family: "DM Mono", monospace; font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -.08em; }.date-result span { color: #6b5916; display: block; font-size: .8rem; margin-top: .45rem; }.hash-controls { align-items: end; display: grid; gap: .8rem; grid-template-columns: minmax(180px, .65fr) auto; margin: 1rem 0; max-width: 560px; }.hash-controls select { margin-top: .52rem; }.uuid-layout { max-width: 760px; }.uuid-output { align-items: center; background: #f7faf8; border: 1px solid #cbdcd3; border-radius: 11px; display: flex; gap: .8rem; padding: .85rem 1rem; }.uuid-output code { color: var(--deep-green); flex: 1; font-family: "DM Mono", monospace; font-size: clamp(.85rem, 2vw, 1rem); overflow: auto; white-space: nowrap; }.uuid-output .icon-button { flex: 0 0 auto; }
.slug-options { align-items: end; display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }.slug-options label { color: var(--ink); font-size: .8rem; font-weight: 800; }.slug-options select { margin-top: .45rem; min-width: 170px; }.percentage-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); max-width: 820px; }.percentage-controls { display: grid; gap: .9rem; }.percentage-controls label { color: var(--ink); display: block; font-size: .8rem; font-weight: 800; }.percentage-result { background: #d9ebf7; border: 1px solid #c0dce9; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem; }.percentage-result p { color: #245775; font-size: .77rem; line-height: 1.5; }.percentage-result p:first-child { margin-bottom: .4rem; }.percentage-result strong { color: #173d56; font-family: "DM Mono", monospace; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.1em; }.percentage-result span { color: #245775; font-family: "DM Mono", monospace; font-size: .73rem; margin-top: 1rem; }.timestamp-layout { display: grid; gap: 1rem; max-width: 830px; }.timestamp-inputs { align-items: end; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) minmax(150px, .45fr) auto; }.timestamp-inputs label, .timestamp-date-input label { color: var(--ink); display: block; font-size: .8rem; font-weight: 800; }.timestamp-result { background: #f8faf9; border: 1px solid #d5e2dc; border-radius: 11px; display: grid; gap: .45rem; padding: 1.15rem; }.timestamp-result p { color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .07em; margin: .5rem 0 0; text-transform: uppercase; }.timestamp-result p:first-child { margin-top: 0; }.timestamp-result code { color: var(--deep-green); font-family: "DM Mono", monospace; font-size: .82rem; overflow-wrap: anywhere; }.timestamp-date-input { display: grid; gap: .2rem; grid-template-columns: minmax(0, 320px) 1fr; align-items: end; }.timestamp-date-input .form-status { margin: 0; }.diff-layout { max-width: 1050px; }.diff-inputs { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }.diff-inputs label { color: var(--ink); display: block; font-size: .8rem; font-weight: 800; }.diff-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }.diff-stats span { background: var(--white); border: 1px solid #d8e3dd; border-radius: 999px; color: var(--muted); font-size: .71rem; padding: .38rem .58rem; }.diff-stats b { color: var(--ink); font-family: "DM Mono", monospace; }.diff-output { background: #fcfdfc; border: 1px solid #d7e2db; border-radius: 10px; font-family: "DM Mono", monospace; font-size: .76rem; margin: 1rem 0 0; max-height: 360px; min-height: 80px; overflow: auto; padding: .5rem 0; white-space: pre-wrap; }.diff-line { display: grid; grid-template-columns: 28px minmax(0, 1fr); line-height: 1.6; padding: .12rem .75rem; }.diff-line b { font-weight: 500; text-align: center; }.diff-line.added { background: #e4f3e9; color: #1b593a; }.diff-line.removed { background: #fbe5e1; color: #8a342b; }.diff-line.same { color: #65736d; }.jwt-output { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin-top: 1rem; }.jwt-output label { color: var(--ink); display: block; font-size: .8rem; font-weight: 800; }.jwt-output textarea { color: var(--deep-green); margin-top: .5rem; }
.split-tool-layout > .json-csv-option { grid-column: 1 / -1; margin-top: 1rem; }
.contrast-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.1fr); max-width: 950px; }.contrast-controls { align-content: start; background: #f9fcfa; border: 1px solid #d8e6dd; border-radius: 12px; display: grid; gap: 1rem; padding: 1.2rem; }.contrast-colour-input { border-bottom: 1px solid #d9e5de; display: grid; gap: .65rem; grid-template-columns: 92px 1fr; padding-bottom: 1rem; }.contrast-colour-input:last-of-type { border-bottom: 0; padding-bottom: 0; }.contrast-colour-input label { color: var(--ink); display: grid; font-size: .72rem; font-weight: 800; gap: .38rem; }.contrast-colour-input input { margin: 0; }.contrast-colour-input input[type="color"] { background: var(--white); border: 1px solid #c8d4ce; border-radius: 8px; cursor: pointer; height: 43px; padding: .28rem; width: 100%; }.contrast-controls .form-status { margin: 0; }.contrast-results { display: grid; gap: .85rem; }.contrast-preview { align-items: start; border: 1px solid #d7e2db; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; min-height: 145px; padding: 1.4rem; transition: background .15s, color .15s; }.contrast-preview span { font-size: clamp(1.05rem, 2.5vw, 1.45rem); font-weight: 800; letter-spacing: -.04em; }.contrast-preview small { font-size: .73rem; margin-top: .55rem; opacity: .8; }.contrast-score { align-items: baseline; background: #193f37; border-radius: 11px; color: white; display: flex; flex-wrap: wrap; gap: .5rem .85rem; padding: 1rem 1.15rem; }.contrast-score span { color: #bdd8ca; font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.contrast-score strong { font-family: "DM Mono", monospace; font-size: 1.55rem; letter-spacing: -.08em; }.contrast-score small { color: #d7e9df; font-size: .72rem; margin-left: auto; }.contrast-checks { display: grid; gap: .55rem; grid-template-columns: 1fr 1fr; }.contrast-checks span { background: var(--white); border: 1px solid #d7e2db; border-radius: 8px; color: var(--muted); font-size: .7rem; font-weight: 700; padding: .65rem .72rem; }.contrast-checks span.passes { background: #e4f3e9; border-color: #bedcc6; color: #276041; }.contrast-checks span.fails { background: #fbe9e5; border-color: #ebc9c2; color: #933e33; }.lorem-layout { max-width: 900px; }.lorem-controls { align-items: end; display: grid; gap: .8rem; grid-template-columns: minmax(180px, .8fr) minmax(130px, .45fr) 1fr; }.lorem-controls label { color: var(--ink); display: block; font-size: .8rem; font-weight: 800; }.lorem-controls .checkbox-row { align-self: end; min-height: 43px; }
.tool-wide { grid-column: 1 / -1; margin: 0; }.input-stack label small { color: var(--muted); font-weight: 500; }.aspect-layout { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); max-width: 850px; }.aspect-controls { display: grid; gap: 1rem; }.aspect-pair { align-items: end; display: grid; gap: .7rem; grid-template-columns: 1fr auto 1fr; }.aspect-pair > span { color: var(--muted); font-family: "DM Mono", monospace; padding-bottom: .78rem; }.aspect-target { display: grid; gap: .7rem; grid-template-columns: 1fr 1fr; }.aspect-pair label, .aspect-target label, .base-input label { color: var(--ink); display: block; font-size: .8rem; font-weight: 800; }.aspect-result { background: #f7e8db; border: 1px solid #e9d2bf; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; padding: 1.4rem; }.aspect-result p { color: #785238; font-size: .7rem; font-weight: 800; letter-spacing: .07em; margin-bottom: .45rem; text-transform: uppercase; }.aspect-result strong { color: #653a22; font-family: "DM Mono", monospace; font-size: clamp(1.4rem, 3vw, 2.15rem); letter-spacing: -.07em; overflow-wrap: anywhere; }.aspect-result span { color: #785238; font-family: "DM Mono", monospace; font-size: .73rem; margin-top: .75rem; }.aspect-layout > .form-status { grid-column: 1 / -1; margin: 0; }.base-layout { max-width: 900px; }.base-input { align-items: end; display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr) minmax(190px, .5fr); }.base-results { display: grid; gap: .65rem; grid-template-columns: 1fr 1fr; margin-top: 1rem; }.base-results div { background: var(--white); border: 1px solid #d5e1db; border-radius: 9px; display: grid; gap: .4rem; padding: .8rem .9rem; }.base-results span { color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.base-results code { color: var(--deep-green); font-family: "DM Mono", monospace; font-size: .82rem; overflow-wrap: anywhere; }
.compressor-settings > div:first-child { min-width: 0; }.image-meta { color: var(--muted); font-family: "DM Mono", monospace; font-size: .7rem; margin: .55rem 0 0; }.compressor-settings input[type="range"] { accent-color: var(--green); margin-top: .65rem; width: 100%; }.compressor-settings output { color: var(--green); float: right; font-family: "DM Mono", monospace; }.download-result { background: #e4f3e9; border: 1px solid #c4dfcd; border-radius: 9px; display: grid; gap: .35rem; padding: .8rem; }.download-result strong { color: var(--deep-green); font-family: "DM Mono", monospace; font-size: .85rem; }.download-result span { color: var(--muted); font-size: .7rem; }.download-result a { display: inline-block; margin-top: .45rem; text-align: center; text-decoration: none; }.regex-layout { max-width: 950px; }.regex-pattern { align-items: end; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; }.regex-pattern > label { color: var(--ink); display: block; font-size: .8rem; font-weight: 800; }.regex-flags { display: flex; flex-wrap: wrap; gap: .65rem; padding-bottom: .7rem; }.regex-flags label { color: var(--muted); font-size: .72rem; white-space: nowrap; }.regex-flags input { accent-color: var(--green); }.regex-layout > .full-label { margin-top: 1rem; }.regex-summary { align-items: center; border-bottom: 1px solid #d3e0d9; display: flex; gap: 1rem; margin-top: 1rem; padding-bottom: .7rem; }.regex-summary strong { color: var(--deep-green); font-size: .82rem; }.regex-summary span { color: var(--muted); font-family: "DM Mono", monospace; font-size: .73rem; overflow-wrap: anywhere; }.regex-matches { display: grid; gap: .5rem; margin-top: .75rem; max-height: 300px; overflow: auto; }.regex-matches > div { background: var(--white); border: 1px solid #d7e2db; border-radius: 8px; display: grid; gap: .25rem; padding: .65rem .75rem; }.regex-matches span { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.regex-matches code { color: var(--deep-green); font-family: "DM Mono", monospace; font-size: .8rem; overflow-wrap: anywhere; }.regex-matches small { color: var(--muted); font-family: "DM Mono", monospace; font-size: .66rem; }.compound-layout .tool-disclaimer { color: var(--muted); font-size: .73rem; line-height: 1.6; margin: .35rem 0 0; }.business-days-layout { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); max-width: 900px; }.business-days-controls { display: grid; gap: 1rem; }.business-days-controls .full-label small { color: var(--muted); display: block; font-weight: 500; margin-top: .25rem; }.business-days-result { background: #f6e9b8; border: 1px solid #e7d38e; border-radius: 12px; padding: 1.4rem; }.business-days-result > p { color: #6b5814; font-size: .7rem; font-weight: 800; letter-spacing: .07em; margin-bottom: .4rem; text-transform: uppercase; }.business-days-result > strong { color: #53430d; font-family: "DM Mono", monospace; font-size: 2.4rem; letter-spacing: -.08em; }.business-days-result dl { border-top: 1px solid #dcc474; margin: 1rem 0 0; padding-top: .85rem; }.business-days-result dl div { display: flex; justify-content: space-between; margin-bottom: .5rem; }.business-days-result dt { color: #745f17; font-size: .72rem; }.business-days-result dd { color: #53430d; font-family: "DM Mono", monospace; font-size: .75rem; margin: 0; }.business-days-layout > .form-status { grid-column: 1 / -1; margin: 0; }

.request-section { background: var(--coral); border-radius: 17px; display: flex; gap: 2rem; justify-content: space-between; align-items: center; margin: 0 1.5rem 5.6rem; padding: 3.3rem; }.request-section h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: .7rem; }.request-section p:not(.eyebrow) { color: #6e4f48; font-size: .92rem; line-height: 1.65; max-width: 580px; margin-bottom: 0; }.primary-button { background: var(--green); border: 1px solid var(--green); border-radius: 8px; color: white; flex: 0 0 auto; padding: .82rem 1rem; font-size: .8rem; font-weight: 800; }.primary-button:hover { background: var(--deep-green); border-color: var(--deep-green); }
.support-section { align-items: center; background: linear-gradient(125deg, #173f37, #245f51); border-radius: 18px; color: white; display: grid; gap: 1.5rem; grid-template-columns: auto minmax(0, 1fr) auto; margin: 0 1.5rem 5.6rem; padding: 2.4rem; scroll-margin-top: 1rem; }.support-mark { align-items: center; background: #f9d7ca; border-radius: 50%; color: #7b3028; display: flex; font-size: 1.25rem; height: 54px; justify-content: center; width: 54px; }.support-section .eyebrow { color: #b9dccd; margin-bottom: .5rem; }.support-section h2 { font-size: clamp(1.75rem, 3.2vw, 2.7rem); margin-bottom: .65rem; }.support-section p { color: #d2e6dd; font-size: .88rem; line-height: 1.7; margin-bottom: .65rem; max-width: 680px; }.support-section small { color: #a9c9bc; display: block; font-size: .7rem; }.support-action { min-width: 180px; text-align: center; }.support-action .primary-button { background: #f9e7a4; border-color: #f9e7a4; color: #4f4212; display: inline-block; text-decoration: none; }.support-action .primary-button:hover { background: white; border-color: white; }.coming-soon { border: 1px solid #ffffff3d; border-radius: 8px; color: #c9ddd4; display: inline-block; font-size: .72rem; font-weight: 800; padding: .75rem .9rem; }
.about-section { border-top: 1px solid var(--line); padding: 5rem 1.5rem 6rem; }.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }.about-grid h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); margin: 0; }.about-grid p { color: var(--muted); font-size: .95rem; line-height: 1.7; max-width: 500px; }
footer { border-top: 1px solid var(--line); display: flex; align-items: center; gap: 1.5rem; padding: 2rem 1.5rem; }footer p { color: var(--muted); font-size: .75rem; margin: 0 auto 0 0; }.footer-link { color: var(--green); font-size: .78rem; font-weight: 800; }
.privacy-page { min-height: 100vh; }.privacy-main { max-width: 820px; padding: 4rem 1.5rem 7rem; }.privacy-main h1 { font-size: clamp(2.7rem, 7vw, 5rem); }.privacy-intro { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin: 1.4rem 0 3rem; max-width: 680px; }.privacy-card { background: var(--white); border: 1px solid var(--line); border-radius: 15px; margin-top: 1rem; padding: 1.5rem; }.privacy-card h2 { font-size: 1.35rem; margin-bottom: .65rem; }.privacy-card p, .privacy-card li { color: var(--muted); font-size: .9rem; line-height: 1.7; }.privacy-card p:last-child { margin-bottom: 0; }.privacy-card a { color: var(--green); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.back-to-top { align-items: center; background: var(--deep-green); border: 1px solid #426f64; border-radius: 999px; bottom: 1.4rem; box-shadow: 0 10px 28px #173f3633; color: white; display: flex; gap: .42rem; opacity: 0; padding: .62rem .78rem .62rem .62rem; pointer-events: none; position: fixed; right: 1.4rem; text-decoration: none; transform: translateY(12px); transition: opacity .18s, transform .18s, background .18s; z-index: 20; }.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }.back-to-top:hover { background: var(--green); }.back-to-top span { align-items: center; background: #ffffff18; border-radius: 50%; display: flex; font-family: "DM Mono", monospace; font-size: .92rem; height: 25px; justify-content: center; width: 25px; }.back-to-top small { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

dialog { border: 0; border-radius: 16px; box-shadow: 0 20px 70px #17251e44; color: var(--ink); max-width: min(94vw, 580px); padding: 0; width: 100%; }dialog::backdrop { background: #17251e80; }dialog form { padding: 1.5rem; }dialog label { display: block; font-size: .8rem; font-weight: 800; margin-top: 1.1rem; }dialog label span { display: block; }dialog label small { color: var(--muted); font-weight: 500; }.form-status { color: var(--muted); font-size: .8rem; min-height: 1.2rem; margin: 1rem 0 0; }.form-status.error { color: #a13730; }.form-status.success { color: var(--green); }
dialog.workspace-dialog { height: auto; margin: auto; max-height: calc(100dvh - 2rem); max-width: 1100px; overflow: auto; width: min(1100px, calc(100vw - 2rem)); }dialog.workspace-dialog::backdrop { background: #10251fbd; backdrop-filter: blur(3px); }.workspace-dialog .workspace-bar { background: #eef5f1; position: sticky; top: -1.7rem; z-index: 3; }

.category-pills button.is-active { background: var(--deep-green); border-color: var(--deep-green); color: white; transform: translateY(-1px); }

@media (max-width: 720px) { .site-header { height: 68px; padding: 0 1rem; } nav { display: none; }.site-header .text-button { font-size: .75rem; }.hero { padding: 5rem 1rem 3rem; }.hero::before { height: 150px; top: 8rem; width: 150px; }.hero::after { display: none; }.quick-links { grid-template-columns: repeat(2, 1fr); }.quick-links button:nth-child(2) { border-right: 0; }.quick-links button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.category-browser { align-items: flex-start; flex-direction: column; gap: .65rem; padding: 1.2rem 1rem 0; }.recent-tools { grid-template-columns: 1fr; margin: 1.25rem 1rem 0; }.recent-tools-list { grid-template-columns: repeat(2, 1fr); }.ad-zone { margin-left: 1rem; margin-right: 1rem; }.ad-zone-after-tools { margin-top: -1.5rem; }.tool-section { padding: 4rem 1rem; }.tool-grid { grid-template-columns: 1fr; }.tool-card { min-height: 220px; }dialog.workspace-dialog { border-radius: 14px; max-height: calc(100dvh - 1rem); padding: 1.15rem; width: calc(100vw - 1rem); }.workspace-dialog .workspace-bar { top: -1.15rem; }.workspace-bar { align-items: flex-start; }.workspace-actions { align-items: flex-end; flex-direction: column-reverse; }.compact-button { font-size: .7rem; white-space: nowrap; }.stats-grid { grid-template-columns: repeat(2, 1fr); }.calculator-layout, .image-settings, .about-grid, .converter-layout, .colour-layout, .percentage-layout, .contrast-layout, .aspect-layout, .business-days-layout { grid-template-columns: 1fr; }.split-tool-layout { grid-template-columns: 1fr; }.split-arrow { padding: .65rem; transform: rotate(90deg); }.split-tool-layout > .button-row, .split-tool-layout > .form-status, .split-tool-layout > .json-csv-option { grid-column: auto; }.timestamp-inputs, .timestamp-date-input, .diff-inputs, .jwt-output, .lorem-controls, .base-input, .regex-pattern { grid-template-columns: 1fr; }.regex-flags { padding-bottom: 0; }.contrast-colour-input { grid-template-columns: 1fr; }.contrast-checks, .base-results { grid-template-columns: 1fr; }.contrast-score small { margin-left: 0; width: 100%; }.aspect-layout > .form-status, .business-days-layout > .form-status, .tool-wide { grid-column: auto; }.request-section { align-items: flex-start; flex-direction: column; margin: 0 1rem 4rem; padding: 2rem; }.support-section { align-items: flex-start; grid-template-columns: 1fr; margin: 0 1rem 4rem; padding: 2rem; }.support-action { min-width: 0; text-align: left; }.about-section { padding: 4rem 1rem; } footer { align-items: flex-start; flex-wrap: wrap; padding: 1.6rem 1rem; }footer p { flex-basis: 100%; order: 5; }.tool-search kbd { display: none; }.privacy-main { padding: 3rem 1rem 5rem; } }
@media (max-width: 720px) { .date-inputs, .hash-controls { grid-template-columns: 1fr; }.hash-controls .primary-button { width: 100%; } }
@media (max-width: 720px) { .back-to-top { bottom: 1rem; right: 1rem; }.back-to-top small { display: none; }.back-to-top { padding: .58rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.back-to-top { transition: none; } }