:root {
  color-scheme: dark;
  --bg: #0d1117;
  --surface: #161d27;
  --ink: #f2f5f9;
  --ink-2: #aab7c9;
  --line: #344255;
  --accent: #f2c56b;
  --accent-ink: #171b22;
  --accent-soft: #202b3a;
  --good: #75d6aa;
  --warn: #f0b86e;
  --bad: #ff9da4;
  --shadow-1: 0 1px 2px #00000040;
  --shadow-2: 0 8px 24px #00000040;

  --gap-line: var(--v-line);
  --gap-item: var(--v-item);
  --gap-block: var(--v-block);
  --gap-section: var(--v-section);

  --m-wide: 1168px;
  --m-control-h: 48px;
  --m-input: #101720;
  --m-control: #718198;
  --m-info: #8ac6ff;
  --m-focus: #8ac6ff;
  --m-success-bg: #112d25;
  --m-fail-bg: #322516;
  --m-drop-bg: #351c25;
  --m-flash: #f2c56b33;
  --m-font: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

:root {
  --m-bg: var(--bg);
  --m-panel: var(--surface);
  --m-raised: var(--accent-soft);
  --m-border: var(--line);
  --m-text: var(--ink);
  --m-muted: var(--ink-2);
  --m-accent: var(--accent);
  --m-accent-hover: #ffda8f;
  --m-on-accent: var(--accent-ink);
  --m-success: var(--good);
  --m-fail: var(--warn);
  --m-drop: var(--bad);
  --m-shadow: #00000040;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t3) / var(--gap-line) var(--m-font);
}
h1, h2, h3 { word-break: keep-all; overflow-wrap: anywhere; }
h1 { margin: 0; font-size: var(--t5); line-height: var(--t5-lh); letter-spacing: -.02em; }
h2 { margin: 0; font-size: var(--t4); line-height: var(--t5-lh); }
h3 { margin: 0; font-size: var(--t3); line-height: var(--gap-line); }
p, dl, dd, figure { margin: 0; }
a { color: var(--m-info); }
input, select, button, textarea { font: inherit; }
.num, input, select, time, table { font-variant-numeric: tabular-nums lining-nums; }

.muted, .m-muted { color: var(--ink-2); }
.help, .m-help { margin-top: var(--gap-item); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.eyebrow, small { font-size: var(--t2); line-height: var(--gap-line); }
.version, .static-note { font-size: var(--t1); line-height: var(--gap-line); color: var(--ink-2); }
.sr, .m-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.header-inner {
  width: min(100%, var(--m-wide));
  margin-inline: auto;
  padding: var(--s2) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-block);
}
.brand { display: flex; align-items: center; gap: var(--gap-item); min-height: var(--touch); color: var(--ink); text-decoration: none; font-size: var(--t4); font-weight: 700; letter-spacing: -.01em; }
.brand-mark { display: block; width: 24px; height: 24px; }
.header-menus { display: flex; align-items: center; }
.menu { display: flex; align-items: center; gap: var(--gap-item); margin: 0; padding: 0; list-style: none; }
.menu a { display: flex; align-items: center; min-height: var(--touch); padding-inline: var(--s1); color: var(--ink-2); text-decoration: none; font-size: var(--t2); }
.menu a[aria-current="page"] { color: var(--accent); }
.menu a:hover { color: var(--ink); }
.brand:focus-visible, .menu a:focus-visible, a:focus-visible { outline: 2px solid var(--m-focus); outline-offset: 2px; }

.m-shell, .shell, .read { width: min(100%, var(--m-wide)); margin-inline: auto; padding: var(--s5) var(--gutter) 0; }
.read p, .read h1, .read h2, .read h3, .read li { max-width: var(--maxw); }

.m-title { margin-top: var(--gap-block); }
.m-lede { margin-top: var(--gap-item); color: var(--ink-2); word-break: keep-all; }
.m-rulever { margin-top: var(--gap-item); font-size: var(--t1); line-height: var(--gap-line); color: var(--ink-2); }
.intro, .m-intro { margin-bottom: var(--gap-section); }

.m-workbench, .workbench { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--gap-section); align-items: start; }
.m-card, .card { min-width: 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); }
.m-card h2, .card h2 { font-size: var(--t4); line-height: var(--t5-lh); }
.outputs, .m-fee-outputs { display: grid; gap: var(--gap-section); min-width: 0; }

.m-field, .field { margin-top: var(--gap-block); }
.m-field:first-child, .field:first-child { margin-top: 0; }
.m-field label, .field > label { display: block; margin-bottom: var(--gap-item); font-size: var(--t2); line-height: var(--gap-line); font-weight: 500; color: var(--ink-2); }
.m-field select, .m-field input, .control, select, input[type="text"], input[type="number"], input[type="date"] {
  width: 100%;
  min-width: 0;
  height: var(--m-control-h);
  padding: 0 var(--s3);
  border: 1px solid var(--m-control);
  border-radius: var(--r1);
  background: var(--m-input);
  color: var(--ink);
  font-size: max(1rem, var(--t3));
}
select:focus-visible, input:focus-visible { outline: 3px solid var(--m-focus); outline-offset: 2px; }
.m-field[data-invalid] select, .m-field[data-invalid] input { border: 2px solid var(--bad); }
.m-error { margin-top: var(--gap-item); font-size: var(--t2); line-height: var(--gap-line); color: var(--bad); }

.btn { font-family: inherit; min-height: var(--m-control-h); transition: transform 80ms, background-color 120ms; touch-action: manipulation; }
.btn:focus-visible { outline: 3px solid var(--m-focus); outline-offset: 3px; }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn-sec { background: var(--surface); }
.btn-block { display: block; width: 100%; }
@media (hover: hover) {
  .btn-pri:hover:not(:disabled) { background: var(--m-accent-hover); border-color: var(--m-accent-hover); }
  .btn-sec:hover:not(:disabled) { background: var(--accent-soft); }
}
.m-actions { display: flex; flex-wrap: wrap; gap: var(--gap-item); margin-top: var(--gap-block); }
.unit-wrap { position: relative; }
.unit-wrap input { padding-right: var(--s6); }
.unit-wrap span { position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%);
  color: var(--ink-2); font-size: var(--t2); line-height: var(--gap-line); }
.jump { display: none; align-items: center; min-height: var(--touch); font-size: var(--t2); line-height: var(--gap-line); }

.tool-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap-block); margin-top: var(--gap-section); padding: 0; list-style: none; }
.tool-card { display: flex; flex-direction: column; gap: var(--gap-item); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); color: var(--ink); text-decoration: none; }
.tool-card .tool-name { font-size: var(--t4); line-height: var(--t5-lh); font-weight: 700; }
.tool-card .tool-line { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
@media (hover: hover) { .tool-card:hover { border-color: var(--accent); } }

.m-tablewrap { overflow-x: auto; margin-top: var(--gap-block); }
table caption { caption-side: top; text-align: left; padding-bottom: var(--s2); color: var(--ink-2); font-size: var(--t1); line-height: var(--gap-line); }
footer nav a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); min-width: var(--touch); }
.m-toc-back { margin-top: var(--gap-block); }
footer { width: calc(min(100%, var(--m-wide)) - 2 * var(--gutter)); margin: var(--gap-section) auto 0; padding: var(--s5) 0 var(--s6); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--t1); line-height: var(--gap-line); }
#operator { margin-top: var(--gap-item); }
.m-note { margin-top: var(--gap-section); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); color: var(--ink-2); font-size: var(--t2); line-height: var(--gap-line); }
.m-note strong { color: var(--ink); }
.m-subhead { margin-top: var(--gap-section); margin-bottom: var(--gap-block); font-size: var(--t4); line-height: var(--t5-lh); font-weight: 700; }
summary { cursor: pointer; min-height: var(--touch); display: flex; align-items: center; }
summary::before { content: ''; flex: none; margin-inline-end: var(--s2);
  border-block: 0.3em solid transparent; border-inline-start: 0.45em solid currentColor; }
details[open] > summary::before { transform: rotate(90deg); }

[id] { scroll-margin-top: var(--anchor-top); }
html { scroll-padding-block-end: var(--gap-section); }

.is-example { border-style: dashed; }
.tag, .m-tag { font-size: var(--t1); line-height: var(--gap-line); border: 1px solid var(--line); padding: var(--s1) var(--s2); border-radius: var(--r1); color: var(--ink-2); white-space: nowrap; }
.example-badge, .m-fee-example-badge { color: var(--accent); border-color: var(--accent); border-style: dashed; }
.section-heading, .m-fee-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-item); margin-bottom: var(--gap-block); }

@media (max-width: 860px) {
  .jump { display: inline-flex; }
  .m-workbench, .workbench { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .m-card, .card { padding: var(--s4); }
  .header-inner { gap: var(--gap-item); }
  .menu { gap: var(--gap-item); }
}
@media (forced-colors: active) {
  .m-error { font-weight: 700; }
  .btn:disabled { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active:not(:disabled) { transform: none; }
}
.unofficial { margin-top: var(--gap-section); color: var(--ink-2); font-size: var(--t1); line-height: var(--gap-line); }

@media print {
  :root {
    color-scheme: light;
    --bg: #fff; --surface: #fff; --m-input: #fff; --accent-soft: #fff;
    --ink: #000; --ink-2: #333; --line: #888; --m-control: #555;
    --accent: #000; --accent-ink: #fff; --m-info: #000; --good: #000; --warn: #000; --bad: #000;
    --m-success-bg: #fff; --m-fail-bg: #fff; --m-drop-bg: #fff;
    --shadow-1: none; --shadow-2: none;
    --m-focus: transparent;
  }
  .result, .m-result, .m-fee-result, .week, .loss, tr { break-inside: avoid; }
  h2, h3, .section-heading { break-after: avoid; }
  .m-workbench, .workbench { grid-template-columns: minmax(0, 1fr); }
  body > footer { display: none; }
}

code, a[href^="http"] { overflow-wrap: anywhere; }
[id="result-title"]:focus-visible, [id="result-title"]:focus { outline: 3px solid var(--m-focus); outline-offset: 3px; }
footer nav + nav { margin-top: var(--gap-item); }
.m-toc ol { list-style: none; padding: 0; margin-top: var(--gap-item); display: grid; gap: var(--gap-item); }
.m-toc ol ol { padding-inline-start: var(--s3); }