:root {
  color-scheme: light;
  --forest: #123c35;
  --forest-deep: #0b2f2a;
  --mint: #a2d7bd;
  --lime: #d6ed76;
  --ink: #192521;
  --muted: #65716b;
  --paper: #f4f4ec;
  --line: #d9ded3;
  --white: #fffefa;
  --sans: "Trebuchet MS", "Aptos", sans-serif;
  --mono: "Cascadia Mono", Consolas, monospace;
  --serif: "Book Antiqua", Georgia, serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { color: inherit; font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid #18896d; outline-offset: 3px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 12px 16px; transform: translateY(-160%); background: var(--white); }
.skip-link:focus { transform: translateY(0); }

.topbar { display: flex; height: 78px; align-items: center; justify-content: space-between; padding: 0 max(6vw, calc((100vw - 1240px) / 2)); border-bottom: 1px solid #dfe3d9; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--forest); }
.brand img { width: 35px; height: 35px; object-fit: contain; }
.brand > span { display: flex; flex-direction: column; font-size: 16px; font-weight: 800; line-height: .9; }
.brand small { margin-top: 5px; font-size: 7px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.home-link { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; }
.home-link span { color: #508d67; font-size: 18px; }

main { width: min(1190px, 88%); margin: 0 auto; }
.page-heading { display: flex; min-height: 286px; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 60px 0 44px; }
.eyebrow, .nav-label, .result-heading, .conversion-result > span, .local-note, .page-footer { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; color: #5e786c; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #7aaf71; box-shadow: 0 0 0 4px #e3ead7; }
h1 { margin: 0; color: var(--forest-deep); font-size: clamp(53px, 7vw, 82px); font-weight: 600; line-height: .99; }
h1 em { color: #679473; font-family: var(--serif); font-weight: 400; }
.heading-note { width: 230px; margin: 0 2.5% 6px 0; color: var(--muted); font-size: 12px; line-height: 1.8; }

.tool-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 572px; border-top: 1px solid var(--line); }
.tool-nav { display: flex; flex-direction: column; align-items: stretch; padding: 30px 24px 25px 0; border-right: 1px solid var(--line); }
.nav-label { margin: 0 0 19px; color: #818a80; }
.tool-tab { display: grid; min-height: 51px; grid-template-columns: 29px 1fr 16px; align-items: center; padding: 0 10px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: #56645c; text-align: left; font-size: 11px; font-weight: 600; transition: color .18s ease, background .18s ease; }
.tool-tab:hover { background: #e9ede3; color: var(--forest); }
.tool-tab.is-active { border-bottom-color: #cbd8c9; background: #e9ede3; color: var(--forest); }
.tab-index { color: #8a968b; font-family: var(--mono); font-size: 9px; }
.tab-mark { color: #609475; opacity: 0; transition: opacity .18s ease; }
.tool-tab.is-active .tab-mark, .tool-tab:hover .tab-mark { opacity: 1; }
.local-note { margin: auto 0 0; padding-top: 35px; color: #7d887e; font-size: 8px; line-height: 2; }
.local-note span { margin-right: 5px; color: #638f69; }
.tool-content { min-width: 0; padding: 31px 0 50px 48px; }
.tool-panel { animation: panel-in .28s ease both; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.panel-heading .eyebrow { margin-bottom: 7px; font-size: 8px; }
h2 { margin: 0; color: var(--forest-deep); font-size: 27px; font-weight: 700; letter-spacing: 0; }
.panel-symbol { position: relative; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid #cbdacf; border-radius: 50%; color: #649676; font-family: var(--serif); font-size: 24px; }
.panel-symbol small { position: absolute; right: 2px; bottom: 3px; font: 10px var(--sans); }
.panel-symbol.braces { font: 16px var(--mono); }
.symbol-sub { position: absolute; right: -9px; bottom: 1px; color: #788c7d; font: 7px var(--mono); }
.field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 11px; font-weight: 700; }
.field-hint { color: #8a9389; font-size: 9px; font-weight: 500; }
textarea, input, select { width: 100%; border: 1px solid #d7ddd2; border-radius: 2px; background: var(--white); }
textarea { display: block; min-height: 170px; padding: 16px; resize: vertical; font-size: 12px; line-height: 1.7; }
textarea::placeholder, input::placeholder { color: #a1aaa0; }
input, select { min-height: 43px; padding: 0 12px; font-size: 12px; }
textarea:focus, input:focus, select:focus { border-color: #529073; outline: 2px solid rgb(82 144 115 / 16%); }
.text-stats { display: flex; flex-wrap: wrap; gap: 20px; padding: 12px 0 17px; color: #778178; font-family: var(--mono); font-size: 9px; }
.text-stats strong { color: var(--forest); font-weight: 500; }
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 15px; }
.action-spacer { flex: 1 1 auto; }
.action-button, .quiet-button, .primary-button, .copy-inline { min-height: 34px; padding: 0 11px; border: 1px solid #d2dad0; border-radius: 2px; background: transparent; font-size: 9px; font-weight: 700; transition: background .16s ease, border-color .16s ease; }
.action-button:hover, .quiet-button:hover, .copy-inline:hover { border-color: #a6bca7; background: #e9ede3; }
.primary-button { border-color: var(--forest); background: var(--forest); color: white; }
.primary-button:hover { border-color: #245c4b; background: #245c4b; }
.quiet-button { color: #65716b; }
.feedback { min-height: 18px; margin: 11px 0 0; color: #8a5a31; font-size: 10px; }
.result-block { margin-top: 21px; border: 1px solid #d7ddd2; background: #eeefe7; }
.result-heading { display: flex; min-height: 35px; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid #d7ddd2; color: #778178; font-size: 8px; }
.result-heading [role="status"] { color: #557d62; text-align: right; }
.unit-select-label { margin-left: auto; color: #778178; font-size: 8px; }
.result-heading select { width: auto; min-height: 25px; padding: 0 20px 0 6px; border: 0; background: transparent; color: #557d62; font-family: var(--mono); font-size: 8px; }
.result-block pre { min-height: 61px; max-height: 220px; overflow: auto; margin: 0; padding: 13px; color: #304a3b; font: 11px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-inline { min-height: 24px; padding: 0 7px; font-size: 8px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.form-field { display: grid; gap: 9px; font-size: 10px; font-weight: 700; }
.conversion-result { display: flex; min-height: 119px; flex-direction: column; justify-content: center; gap: 8px; margin-top: 24px; padding: 18px 22px; border-left: 3px solid #79a876; background: #e8ede2; }
.conversion-result > span { color: #78877a; font-size: 8px; }
.conversion-result output { color: var(--forest); font-family: var(--serif); font-size: 33px; overflow-wrap: anywhere; }
.time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 27px; }
.time-section { min-width: 0; }
.time-section input { margin-bottom: 2px; }
.time-section .action-row { min-height: 48px; }
.time-section .result-block { margin-top: 12px; }
.time-section .result-block pre { min-height: 55px; font-size: 10px; }
.page-footer { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; border-top: 1px solid var(--line); color: #778178; font-size: 8px; }
.page-footer span:first-child { color: var(--forest); font-weight: 500; }
.page-footer a { color: var(--forest); font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: 0; }

@keyframes panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .topbar { height: 68px; padding: 0 6%; }
  main { width: 88%; }
  .page-heading { min-height: 250px; align-items: flex-start; flex-direction: column; justify-content: flex-end; gap: 20px; padding: 42px 0 30px; }
  h1 { font-size: clamp(52px, 11vw, 72px); }
  .heading-note { width: min(370px, 100%); margin: 0; }
  .tool-layout { grid-template-columns: 1fr; }
  .tool-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 17px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav-label, .local-note { display: none; }
  .tool-tab { display: flex; min-height: 52px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px; border-bottom: 0; text-align: center; font-size: 8px; }
  .tab-index { font-size: 7px; }
  .tab-mark { display: none; }
  .tool-content { padding: 26px 0 40px; }
}
@media (max-width: 500px) {
  .home-link { gap: 5px; font-size: 10px; }
  .page-heading { min-height: 226px; }
  h1 { font-size: 53px; }
  .tool-tab { font-size: 7px; }
  .tool-tab .tab-index { display: none; }
  .panel-heading { margin-bottom: 24px; }
  .field-label { align-items: flex-start; flex-direction: column; gap: 4px; }
  .action-row { gap: 6px; }
  .action-button, .quiet-button, .primary-button { padding: 0 8px; font-size: 8px; }
  .action-spacer { display: none; }
  .form-grid, .time-grid { grid-template-columns: 1fr; gap: 14px; }
  .time-grid { gap: 32px; }
  .page-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; padding: 17px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}