:root {
  color-scheme: light;
  --ink: #102936;
  --ink-soft: #294553;
  --paper: #f8f7f2;
  --paper-deep: #eef0e9;
  --card: #ffffff;
  --line: rgba(16, 41, 54, .12);
  --muted: #718087;
  --mint: #b8e0ce;
  --sky: #b4d6e7;
  --coral: #edb2a0;
  --lilac: #c8c6e9;
  --yellow: #ead697;
  --shadow: 0 20px 50px rgba(16, 41, 54, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: "DM Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.app-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 20px/1 "Manrope", sans-serif; letter-spacing: -.05em; }
.brand-mark { width: 27px; height: 27px; display: inline-flex; align-items: flex-end; gap: 3px; padding: 5px; border-radius: 9px; background: var(--ink); }
.brand-mark span { display: block; width: 4px; border-radius: 3px; background: var(--mint); }.brand-mark span:nth-child(1){height: 8px}.brand-mark span:nth-child(2){height: 13px;background:#dfe9df}.brand-mark span:nth-child(3){height: 17px;background:var(--sky)}
.topnav { display: flex; gap: 34px; margin-left: 75px; color: var(--muted); font-size: 14px; }.topnav a { padding: 7px 0; }.topnav a.active, .topnav a:hover { color: var(--ink); }
.topbar-actions { display: flex; align-items: center; gap: 18px; }.privacy-note { color: var(--muted); font-size: 12px; }.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #73b99c; vertical-align: 1px; }.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; font-size: 16px; }.icon-button:hover { background: var(--ink); color: var(--paper); }
.hero-section { display: flex; justify-content: space-between; align-items: end; padding: 78px 0 58px; }.hero-copy { max-width: 630px; }.eyebrow, .section-kicker { margin: 0 0 17px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .16em; }.eyebrow { display: flex; align-items: center; gap: 10px; }.eyebrow-line { width: 28px; height: 1px; background: var(--coral); }
h1, h2, h3, p { margin-top: 0; }.hero-copy h1 { margin-bottom: 18px; font: 800 clamp(3rem, 6vw, 5.25rem)/.98 "Manrope", sans-serif; letter-spacing: -.075em; }.hero-intro { max-width: 420px; margin-bottom: 0; color: var(--ink-soft); font-size: 18px; line-height: 1.55; }.date-card { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: end; min-width: 158px; padding: 22px; border-left: 1px solid var(--line); }.date-label, .date-month { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; }.date-label { grid-column: 1/-1; margin-bottom: 5px; }.date-card strong { font: 700 49px/.9 "Manrope", sans-serif; letter-spacing: -.08em; }.date-month { align-self: end; padding-bottom: 2px; }
.focus-card { display: grid; grid-template-columns: 1.3fr .9fr auto; gap: 32px; align-items: center; margin-bottom: 84px; padding: 26px 30px; color: var(--paper); background: var(--ink); border-radius: 18px; box-shadow: var(--shadow); }.focus-intro { display: flex; align-items: flex-start; gap: 16px; }.focus-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 12px; color: var(--ink); background: var(--mint); font-size: 19px; }.focus-card .section-kicker { margin-bottom: 7px; color: #aac0c2; }.focus-card h2 { margin-bottom: 4px; font: 700 22px/1.2 "Manrope", sans-serif; letter-spacing: -.04em; }.focus-card p:not(.section-kicker) { margin-bottom: 0; color: #b4c3c2; font-size: 14px; }.rate-widget { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10px 13px; padding-left: 27px; border-left: 1px solid rgba(255,255,255,.14); }.rate-widget label { grid-column: 1/-1; color: #b4c3c2; font-size: 12px; }.input-prefix { display: flex; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.35); }.input-prefix span { color: #b4c3c2; }.input-prefix input { width: 100%; border: 0; outline: 0; color: var(--paper); background: transparent; font-size: 21px; font-weight: 600; }.widget-result { display: grid; gap: 2px; color: #b4c3c2; font-size: 11px; }.widget-result strong { color: var(--mint); font-size: 18px; }.text-button, .card-link { display: inline-flex; align-items: center; gap: 9px; width: fit-content; padding: 0; border: 0; background: none; font-weight: 700; }.text-button { color: var(--mint); font-size: 13px; white-space: nowrap; }.text-button:hover, .card-link:hover { color: var(--coral); }.text-button span, .card-link span { transition: transform .2s ease; }.text-button:hover span, .card-link:hover span { transform: translate(3px, -3px); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 26px; }.section-heading h2, .how-section h2 { margin-bottom: 0; font: 700 27px/1.2 "Manrope", sans-serif; letter-spacing: -.05em; }.tool-count { color: var(--muted); font-size: 12px; }.tool-count span { color: var(--coral); padding: 0 4px; }.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.tool-card { position: relative; min-height: 224px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }.tool-card:hover { transform: translateY(-4px); border-color: rgba(16,41,54,.24); box-shadow: var(--shadow); }.tool-card-featured { color: var(--paper); background: #1b3d48; border-color: transparent; }.tool-card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 23px; }.tool-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--ink); background: var(--mint); font-weight: 700; }.icon-sky { background: var(--sky); }.icon-coral { background: var(--coral); }.icon-lilac { background: var(--lilac); }.icon-yellow { background: var(--yellow); }.icon-green { background: #b6d9ad; }.icon-peach { background: #f0c5ac; }.tool-tag { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .13em; }.tool-card-featured .tool-tag { color: #b9d2d2; }.tool-card h3 { position: relative; z-index: 1; margin-bottom: 8px; font: 700 20px/1.15 "Manrope", sans-serif; letter-spacing: -.04em; }.tool-card p { position: relative; z-index: 1; max-width: 235px; margin-bottom: 17px; color: var(--muted); font-size: 13px; line-height: 1.45; }.tool-card-featured p { color: #bfd0cf; }.card-link { position: relative; z-index: 1; margin-top: auto; color: var(--ink); font-size: 12px; }.tool-card-featured .card-link { color: var(--mint); }.card-orbit { position: absolute; right: -36px; bottom: -45px; width: 150px; height: 150px; border: 1px solid rgba(184,224,206,.28); border-radius: 50%; }.orbit-two { right: -8px; bottom: -75px; width: 130px; height: 130px; border-color: rgba(180,214,231,.25); }.tool-card-wide { grid-column: span 2; min-height: 166px; display: grid; grid-template-columns: 1fr .7fr; }.tool-card-wide .tool-card-top { grid-column: 1/-1; margin-bottom: 10px; }.wide-card-content { display: flex; flex-direction: column; }.tool-card-wide .card-link { margin-top: 16px; }.message-lines { align-self: center; justify-self: end; width: min(100%, 220px); padding: 18px; border: 1px solid rgba(16,41,54,.1); border-radius: 12px; background: #f3f1e9; transform: rotate(4deg); }.message-lines span { display: block; height: 7px; margin-bottom: 10px; border-radius: 4px; background: #c7ddd5; }.message-lines span:nth-child(2) { width: 80%; background: #ded7ed; }.message-lines span:nth-child(3) { width: 58%; margin-bottom: 0; background: #e8c5b5; }
.how-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin: 110px 0 80px; padding-top: 32px; border-top: 1px solid var(--line); }.how-section p { max-width: 400px; margin-bottom: 0; color: var(--muted); font-size: 16px; }.footer { display: flex; justify-content: space-between; padding: 22px 0 30px; color: var(--muted); font-size: 11px; border-top: 1px solid var(--line); }
.tool-dialog { width: min(580px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 20px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 80px rgba(0,0,0,.25); }.tool-dialog::backdrop { background: rgba(16,41,54,.58); backdrop-filter: blur(4px); }.dialog-shell { padding: 30px; }.dialog-top { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 26px; }.dialog-top .section-kicker { margin-bottom: 7px; }.dialog-top h2 { margin-bottom: 0; font: 700 29px/1.1 "Manrope", sans-serif; letter-spacing: -.05em; }.close-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font-size: 24px; line-height: 1; }.close-button:hover { background: var(--ink); color: var(--paper); }.tool-form { display: grid; gap: 16px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.tool-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }.tool-form input, .tool-form textarea, .tool-form select { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--ink); background: white; }.tool-form textarea { min-height: 120px; resize: vertical; line-height: 1.5; }.tool-form input:focus, .tool-form textarea:focus, .tool-form select:focus { border-color: var(--ink-soft); box-shadow: 0 0 0 3px rgba(180,214,231,.4); }.submit-button { width: fit-content; padding: 12px 17px; border: 0; border-radius: 9px; color: var(--paper); background: var(--ink); font-weight: 700; }.submit-button:hover { background: #285261; }.result-box { margin-top: 3px; padding: 17px; border-radius: 12px; color: var(--ink); background: #e2eee7; }.result-box strong { display: block; margin-bottom: 4px; font: 700 24px/1.1 "Manrope", sans-serif; letter-spacing: -.04em; }.result-box p { margin: 0; color: var(--ink-soft); font-size: 13px; }.result-box pre { white-space: pre-wrap; margin: 0; font: inherit; line-height: 1.5; }.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.stat { padding: 12px; border-radius: 10px; background: #eef0e9; }.stat span { display: block; color: var(--muted); font-size: 11px; }.stat strong { font: 700 19px "Manrope", sans-serif; }.diff-output { max-height: 220px; overflow: auto; white-space: pre-wrap; padding: 14px; border-radius: 10px; background: #eef0e9; font-size: 13px; line-height: 1.6; }.added { padding: 2px 3px; border-radius: 3px; background: #c4e5cf; }.removed { padding: 2px 3px; border-radius: 3px; background: #f0c5bb; text-decoration: line-through; }
body.dark { --paper: #112830; --paper-deep: #18343d; --card: #18343d; --ink: #eff3ed; --ink-soft: #c4d0cd; --line: rgba(239,243,237,.14); --muted: #9cafad; --shadow: 0 20px 50px rgba(0,0,0,.18); }.dark .topbar { border-color: var(--line); }.dark .tool-card:not(.tool-card-featured), .dark .tool-form input, .dark .tool-form textarea, .dark .tool-form select { background: #1a3942; }.dark .message-lines, .dark .stat, .dark .diff-output { background: #18343d; }.dark .how-section, .dark .footer { border-color: var(--line); }
@media (max-width: 800px) { .app-shell { width: min(100% - 30px, 650px); }.topbar { height: 72px; }.topnav { display: none; }.privacy-note { display: none; }.hero-section { align-items: flex-start; gap: 24px; padding: 54px 0 38px; }.hero-copy h1 { font-size: clamp(2.85rem, 11vw, 4.2rem); }.date-card { min-width: 128px; padding: 14px 0 0 18px; }.date-card strong { font-size: 38px; }.date-month { font-size: 9px; }.focus-card { grid-template-columns: 1fr; gap: 20px; margin-bottom: 63px; padding: 22px; }.rate-widget { padding: 0; border: 0; }.text-button { justify-self: start; }.tool-grid { grid-template-columns: repeat(2, 1fr); }.tool-card-wide { grid-column: span 2; }.how-section { gap: 30px; margin-top: 80px; } }
@media (max-width: 520px) { .app-shell { width: min(100% - 24px, 420px); }.topbar-actions { gap: 0; }.hero-section { display: block; padding-top: 44px; }.date-card { display: flex; gap: 10px; align-items: baseline; margin-top: 26px; padding: 0; border: 0; }.date-label { margin: 0; }.date-card strong { font-size: 28px; }.date-month { padding: 0; }.tool-grid { grid-template-columns: 1fr; }.tool-card, .tool-card-wide { grid-column: auto; min-height: 210px; }.tool-card-wide { display: flex; }.message-lines { display: none; }.how-section { display: block; margin: 70px 0 60px; }.how-section > div { margin-bottom: 26px; }.footer { display: block; }.footer span { display: block; margin-bottom: 8px; }.dialog-shell { padding: 22px 18px; }.form-row, .stats-row { grid-template-columns: 1fr; } }

.inline-tool-slot { position: relative; z-index: 2; width: 100%; margin-top: 16px; }
.tool-grid { align-items: start; }
.tool-card { min-height: auto; }
.tool-card-wide .inline-tool-slot { grid-column: 1 / -1; }
.inline-tool-panel { padding-top: 20px; border-top: 1px solid var(--line); }
.tool-card-featured .inline-tool-panel { border-color: rgba(255,255,255,.18); }
.inline-tool-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.inline-tool-heading .section-kicker { margin-bottom: 6px; }
.inline-tool-heading h4 { margin: 0; font: 700 18px/1.15 "Manrope", sans-serif; letter-spacing: -.04em; }
.panel-close { flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; color: inherit; background: transparent; font-size: 12px; }
.panel-close:hover { color: var(--ink); background: var(--paper); }
.tool-card-featured .panel-close { border-color: rgba(255,255,255,.2); color: var(--paper); }
.tool-card-featured .panel-close:hover { color: var(--ink); }
.inline-tool-panel .tool-form { gap: 12px; }
.inline-tool-panel .tool-form input, .inline-tool-panel .tool-form textarea, .inline-tool-panel .tool-form select { background: rgba(255,255,255,.86); }
.tool-card-featured .inline-tool-panel .tool-form input, .tool-card-featured .inline-tool-panel .tool-form textarea, .tool-card-featured .inline-tool-panel .tool-form select { border-color: rgba(255,255,255,.18); color: var(--ink); background: rgba(255,255,255,.92); }
.tool-card-featured .inline-tool-panel .tool-form label { color: #bfd0cf; }
.tool-card-featured .inline-tool-panel .result-box, .tool-card-featured .inline-tool-panel .stat { color: var(--ink); background: var(--mint); }
.inline-tool-panel .result-box { margin-top: 0; }
.inline-tool-panel .submit-button { font-size: 12px; padding: 10px 13px; }

/* Shared workbench rhythm: every utility follows the same quiet, usable pattern. */
.tool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.tool-card,
.tool-card-wide {
  min-height: 0;
  height: 100%;
  padding: 24px;
  border-radius: 20px;
}

.tool-card:hover,
.tool-card-wide:hover {
  transform: translateY(-2px);
}

.tool-card-top,
.tool-card-wide .tool-card-top {
  margin-bottom: 20px;
}

.tool-card > h3,
.tool-card-wide > h3 {
  min-height: 2.3rem;
  margin-bottom: 8px;
}

.tool-card > p,
.tool-card-wide > p {
  max-width: none;
  min-height: 2.9rem;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.45;
}

.inline-tool-slot {
  margin-top: 18px;
}

.inline-tool-panel {
  padding-top: 18px;
}

.inline-tool-heading {
  min-height: 42px;
  margin-bottom: 16px;
}

.inline-tool-heading h4 {
  font-size: 17px;
}

.inline-tool-panel .tool-form {
  gap: 14px;
}

.form-row {
  gap: 14px;
}

.tool-form label {
  gap: 8px;
  font-size: 13px;
  line-height: 1.25;
}

.tool-form input,
.tool-form textarea,
.tool-form select,
.inline-tool-panel .tool-form input,
.inline-tool-panel .tool-form textarea,
.inline-tool-panel .tool-form select {
  min-height: 44px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--paper-deep);
}

.tool-form textarea {
  min-height: 112px;
}

.submit-button,
.inline-tool-panel .submit-button {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
}

.result-box {
  min-height: 82px;
  padding: 16px;
  border-radius: 14px;
}

.result-box strong {
  font-size: 22px;
}

.stats-row {
  gap: 8px;
}

.stat {
  min-height: 68px;
  padding: 12px;
  border-radius: 12px;
}

.diff-output {
  min-height: 112px;
  max-height: 220px;
  border-radius: 12px;
}

.tool-card-featured .inline-tool-panel .tool-form input,
.tool-card-featured .inline-tool-panel .tool-form textarea,
.tool-card-featured .inline-tool-panel .tool-form select {
  background: var(--paper-deep);
}

.dark .tool-form input,
.dark .tool-form textarea,
.dark .tool-form select,
.dark .inline-tool-panel .tool-form input,
.dark .inline-tool-panel .tool-form textarea,
.dark .inline-tool-panel .tool-form select {
  border-color: var(--line);
  background: #1d3d46;
}

.dark .result-box {
  color: #e9f3ec;
  background: #275258;
}

.dark .result-box p {
  color: #d0dfd8;
}

.dark .focus-card {
  color: #eff3ed;
  background: #0e2027;
}

.dark .input-prefix input {
  color: #eff3ed;
}

.dark .tool-card-featured {
  color: #eff3ed;
  background: #173b45;
}

.dark .tool-card-featured p {
  color: #bfd0cf;
}

.dark .tool-card-featured .inline-tool-panel .result-box,
.dark .tool-card-featured .inline-tool-panel .stat {
  color: #14313a;
  background: #b8e0ce;
}

.dark .stat,
.dark .diff-output {
  background: #1d3d46;
}

@media (max-width: 800px) {
  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .tool-card,
  .tool-card-wide {
    padding: 20px;
  }
}

@media (max-width: 520px) {
  .tool-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .tool-card,
  .tool-card-wide {
    grid-column: auto;
    min-height: 0;
    padding: 20px;
  }

  .tool-card > h3,
  .tool-card-wide > h3,
  .tool-card > p,
  .tool-card-wide > p {
    min-height: 0;
  }
}