:root {
  --paper: #FFFFFF;
  --sheet: #FAF8F5;
  --ink: #0A0A0A;
  --ink-soft: #5F5B55;
  --rule: #ECE8E2;
  --rule-strong: #DCD6CD;
  --tang: #0A0A0A;
  --tang-ink: #82633A;
  --tang-wash: #F5EFE6;
  --on-tang: #FFFFFF;
  --good: #2E6FDB;
  --good-wash: #E8F0FF;
  --warn: #7a4f00;
  --warn-wash: #f8ecd0;
  --bad: #a3261a;
  --bad-wash: #f8e2de;
  --code: #F4F1EC;
  --tok-key: #7a3410;
  --tok-str: #2E6FDB;
  --tok-num: #1d4f91;
  --tok-lit: #7a4f00;
  --round: 12px;
  --stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --check-b: #EEEAE4;
  }

:root[data-theme="dark"] {
    --paper: #000000;
    --sheet: #0F0E0D;
    --ink: #FFFFFF;
    --ink-soft: #A8A39C;
    --rule: #24221F;
    --rule-strong: #35322E;
    --tang: #FFFFFF;
    --tang-ink: #C9AE8A;
    --tang-wash: #1C1813;
    --good: #9CC0FF;
    --good-wash: #1B2740;
    --warn: #f2c46b;
    --warn-wash: #352a12;
    --bad: #ff9a8c;
    --bad-wash: #3a1d19;
    --code: #171614;
    --tok-key: #ffb27f;
    --tok-str: #8fd6a4;
    --tok-num: #9cc3ff;
    --tok-lit: #f2c46b;
    --on-tang: #000000;
    --check-a: #1A1917;
    --check-b: #111010;
  }

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--stack);
}

h1, h2, h3, p, ul, ol, dl, dd, fieldset, legend { margin: 0; padding: 0; }

fieldset { border: 0; min-width: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--tang-ink); }

code, pre { font-family: var(--mono); }

:focus-visible {
  outline: 3px solid var(--tang-ink);
  outline-offset: 2px;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand svg { width: 28px; height: 28px; flex: none; }

.pledge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 14px;
}

.pledge svg { width: 16px; height: 16px; flex: none; color: var(--tang-ink); }

.intro { padding: 56px 0 32px; max-width: 760px; }

.intro h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.intro h1 em { font-style: normal; color: var(--tang-ink); }

.intro p {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 18px;
}

.skw.dt-win{min-height:660px}
.dt-ico{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:#7C7C82}
.skw-nav.on .dt-ico,.skw-nav[aria-selected="true"] .dt-ico{color:#1D1D1F}
.dt-pane{display:flex;flex-direction:column;flex:1;min-width:0}
.dt-pane:focus{outline:none}
.dt-pane>.skw-bar{padding:16px 22px 4px}
.dt-head{min-width:0}
.dt-head h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:#1D1D1F}
.dt-head p{margin:2px 0 0;font-size:13.5px;color:#6E6E73}
.dt-pane .skw-body{gap:18px;padding:14px 22px 22px}
.dt-io{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 20px;align-items:start}
.dt-col{display:grid;gap:10px;min-width:0;align-content:start}
.dt-col>*,.dt-field>*{min-width:0}
.dt-field{display:grid;gap:8px;min-width:0}
.dt-cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;min-height:30px;padding-left:4px}
.dt-k,.dt-cap>label,.dt-field>label,.dt-cap>h3{margin:0;font-size:12.5px;font-weight:600;color:#6E6E73;letter-spacing:0;text-transform:none}
.dt-k small,.dt-cap>label small,.dt-field>label small{margin-left:4px;font-weight:500;color:#8E8E93}
.dt-links{display:flex;flex-wrap:wrap;gap:2px}
.dt-link{padding:4px 9px;border:0;border-radius:999px;background:none;font:inherit;font-size:12.5px;font-weight:600;color:#3A3A3C;cursor:pointer;transition:background .15s}
.dt-link:hover{background:rgba(118,118,128,.12)}
.dt-link:focus-visible{outline:2px solid var(--sk-accent,#5B8DEF);outline-offset:1px}
.skw-seg.dt-small label>span,.skw-seg.dt-small>button{padding:4px 11px;font-size:12.5px}
.skw textarea.dt-code,.skw input.dt-mono{font:13.5px/1.55 var(--mono)}
.skw.dt-win textarea.dt-code{min-height:300px;resize:vertical}
.skw textarea.dt-short{min-height:150px}
.skw textarea.dt-out{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.09),0 1px 2px rgba(0,0,0,.04)}
.skw textarea.dt-out:focus{box-shadow:0 0 0 1px var(--sk-accent,#5B8DEF),0 0 0 4px rgba(91,141,239,.25)}
.dt-well{position:relative;min-width:0}
.dt-ghost{position:absolute;inset:0;display:none;place-items:center;align-content:center;gap:6px;padding:24px;text-align:center;color:#8E8E93;font-size:13.5px;line-height:1.45;pointer-events:none}
.dt-ghost svg{width:34px;height:34px;fill:none;stroke:#B8BEC6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dt-ghost b{font-size:14.5px;color:#3A3A3C}
.dt-well textarea:not([hidden]):placeholder-shown+.dt-ghost{display:grid}
.dt-opts{display:grid;gap:10px}
.dt-opts:not(:has(.skw-row:not([hidden]))){display:none}
.dt-opts .skw-lbl{margin:0}
.skw-row.dt-stack{flex-direction:column;align-items:stretch;gap:10px}
.skw-row.dt-stack>.skw-seg{align-self:flex-start}
label.skw-row{cursor:pointer}
.skw .skw-row input.dt-num{width:92px;max-width:92px;padding:7px 11px;text-align:right;font-variant-numeric:tabular-nums}
.dt-len{display:flex;align-items:center;gap:12px}
.dt-range{width:150px;margin:0;accent-color:var(--sk-accent,#5B8DEF)}
.dt-mini{margin:0;padding-left:4px;color:#6E6E73;font-size:12.5px;font-variant-numeric:tabular-nums}
.hint{margin:0;padding-left:4px;color:#6E6E73;font-size:12.5px;line-height:1.5}
.skw-row .hint,.skw-row em{padding:0}
.skw-status.is-error{color:#D93036}
.verdict{display:flex;align-items:flex-start;gap:8px;margin:0;padding:9px 12px;border-radius:10px;background:rgba(118,118,128,.08);font-size:13.5px;font-weight:600;line-height:1.45;color:#1D1D1F;overflow-wrap:anywhere}
.verdict svg{width:16px;height:16px;margin-top:1px;flex:none}
.verdict.is-good{background:rgba(91,152,255,.1);color:#2E6FDB}
.verdict.is-bad{background:rgba(229,72,77,.1);color:#C02B30}
.verdict.is-warn{background:rgba(229,160,0,.13);color:#865700}
.notes{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.note{display:flex;gap:8px;padding-left:4px;color:#6E6E73;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.note svg{width:15px;height:15px;margin-top:2px;flex:none}
.note.is-warn{color:#865700}
.note.is-bad{color:#C02B30}
pre.block{max-height:380px;margin:0;padding:11px 13px;overflow:auto;border-radius:10px;background:rgba(118,118,128,.08);font-size:13px;line-height:1.5;color:#1D1D1F;white-space:pre-wrap;overflow-wrap:anywhere}
pre.caret{background:rgba(229,72,77,.07);color:#C02B30;white-space:pre;overflow-x:auto;overflow-wrap:normal}
.sub{margin:0;padding-left:4px;font-size:12.5px;font-weight:600;color:#6E6E73;letter-spacing:0;text-transform:none}
.tree{max-height:520px;min-height:300px;padding:11px 13px;overflow:auto;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.09);font:13px/1.65 var(--mono);color:#1D1D1F;overflow-wrap:anywhere}
.tree summary{cursor:pointer}
.tree-kids{margin-left:6px;padding-left:14px;border-left:1px solid rgba(0,0,0,.1)}
.tree-leaf{padding-left:18px}
.tree-key{color:#9A3F12}
.tree-index{color:#8E8E93}
.tree-str{color:#1E7A4C}
.tree-num{color:#2457A8}
.tree-lit{color:#865700;font-weight:600}
.tree-type{color:#8E8E93;font-family:var(--stack);font-size:12px}
.tree .hint{font-family:var(--stack)}
.dt-scroll{max-width:100%;overflow-x:auto;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
table.grid{width:100%;border-collapse:collapse;font-size:13px}
.grid th,.grid td{padding:7px 11px;border-bottom:1px solid rgba(0,0,0,.06);text-align:left;vertical-align:top}
.grid tr:last-child td{border-bottom:0}
.grid th{background:rgba(242,246,250,.9);color:#6E6E73;font-size:12px;font-weight:600;white-space:nowrap}
.grid td{font-family:var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;min-width:70px;max-width:320px;color:#1D1D1F}
.grid td.empty-cell{color:#8E8E93;font-family:var(--stack);font-style:italic}
.rows{display:grid;gap:0;margin:0;padding:0;list-style:none;border-radius:14px;background:rgba(118,118,128,.07)}
.rows:empty{display:none}
.rows li{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 10px 10px 14px}
.rows li+li{box-shadow:inset 0 1px 0 rgba(0,0,0,.06)}
.rows li.is-match{border-radius:12px;background:rgba(91,152,255,.1);box-shadow:inset 0 0 0 1.5px rgba(91,152,255,.55)}
.row-main{display:grid;gap:2px;flex:1 1 auto;min-width:0}
.row-label{color:#6E6E73;font-size:12.5px;font-weight:600}
.row-value{font-size:13.5px;color:#1D1D1F;overflow-wrap:anywhere;word-break:break-all}
.row-value.wrap-words{word-break:normal;font-family:var(--stack);font-size:14px}
.row-hint{color:#8E8E93;font-size:12px}
.icon-btn{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.06);color:#3A3A3C;cursor:pointer;transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .15s}
.icon-btn:hover{background:#F6F8FA}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:15px;height:15px}
.icon-btn:focus-visible{outline:2px solid var(--sk-accent,#5B8DEF);outline-offset:2px}
.tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:rgba(118,118,128,.12);font-size:11.5px;font-weight:600;color:#3A3A3C;vertical-align:1px;white-space:nowrap}
.tag:empty{display:none}
.tag.is-good{background:rgba(91,152,255,.12);color:#2E6FDB}
.tag.is-bad{background:rgba(229,72,77,.12);color:#C02B30}
.tag.is-warn{background:rgba(229,160,0,.15);color:#865700}
.pw-list .row-value{font-size:15px}
.meter{height:6px;overflow:hidden;border-radius:6px;background:rgba(118,118,128,.14)}
.meter i{display:block;width:0;height:100%;border-radius:6px;background:var(--sk-accent,#5B8DEF);transition:width .25s}
.meter.is-weak i{background:#E5484D}
.meter.is-fair i{background:#E5A000}
.meter.is-strong i{background:#5B98FF}
.hl{min-height:150px;max-height:420px;padding:11px 13px;overflow:auto;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.09);font:13.5px/1.65 var(--mono);color:#1D1D1F;white-space:pre-wrap;overflow-wrap:anywhere}
.hl .hint{padding:0;font-family:var(--stack)}
.hl mark{border-radius:3px;background:rgba(91,141,239,.16);box-shadow:inset 0 -2px 0 var(--sk-accent,#5B8DEF);color:inherit}
.hl mark.alt{background:rgba(91,152,255,.14);box-shadow:inset 0 -2px 0 #5B98FF}
.hl mark.zero{display:inline-block;width:2px;height:1.2em;margin:0 1px;vertical-align:text-bottom;background:var(--sk-accent,#5B8DEF);box-shadow:none}
.skw-drop.dt-drop{min-height:300px;gap:12px}
.skw-drop.dt-drop>svg{width:38px;height:38px;fill:none;stroke:#9AA3AE;stroke-width:1.5}
.skw-drop.is-dragging{border-color:var(--sk-accent,#5B8DEF);background:rgba(91,141,239,.06)}
.skw-drop p{margin:0;max-width:34ch;font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
.chip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08);font-size:13.5px;color:#1D1D1F;overflow-wrap:anywhere}
.chip>span{flex:1;min-width:0}
.chip svg{flex:none;color:#6E6E73}
.chip strong{font-weight:600}
.dt-file{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.preview-img{display:block;max-width:100%;max-height:260px;margin:0 auto;border-radius:10px;background:repeating-conic-gradient(#E6E9ED 0 25%,#fff 0 50%) 0 0/16px 16px}
.dt-clock{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;padding:14px 16px 14px 18px;border-radius:14px;background:rgba(118,118,128,.07)}
.dt-clock span{display:block;font-size:12.5px;font-weight:600;color:#6E6E73}
.dt-clock strong{display:block;font:700 26px/1.2 var(--mono);letter-spacing:-.01em;color:#1D1D1F;font-variant-numeric:tabular-nums}
.dt-empty{display:grid;place-items:center;gap:6px;min-height:220px;padding:20px;border-radius:14px;background:rgba(118,118,128,.05);text-align:center;color:#8E8E93;font-size:13.5px}
.dt-empty svg{width:34px;height:34px;fill:none;stroke:#B8BEC6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dt-empty b{font-size:14.5px;color:#3A3A3C}
.dt-pattern{display:flex;align-items:center;min-width:0;border-radius:10px;background:rgba(118,118,128,.1);transition:background .2s,box-shadow .2s}
.dt-pattern:focus-within{background:#fff;box-shadow:0 0 0 1px var(--sk-accent,#5B8DEF),0 0 0 4px rgba(91,141,239,.25)}
.dt-pattern>span{flex:none;padding:0 4px 0 13px;font:15px var(--mono);color:#8E8E93}
.dt-pattern>span:last-child{padding:0 13px 0 4px}
.skw .dt-pattern input.text{flex:1 1 auto;min-width:0;padding-inline:2px;background:transparent;box-shadow:none;font-size:14.5px}
.skw .dt-pattern input.text:focus{background:transparent;box-shadow:none}
.dt-flags label>span{font-family:var(--mono)}
.skw .dt-flags input[type=checkbox]:not(.skw-sw){position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;border:0;opacity:0}
.dt-flags small{margin-left:5px;font-family:var(--stack);font-size:11.5px;font-weight:500;color:#8E8E93}
.skw [aria-invalid="true"]{box-shadow:0 0 0 1.5px #E5484D}
.skw .dt-pattern input[aria-invalid="true"]{box-shadow:none}
.dt-pattern:has(input[aria-invalid="true"]){box-shadow:0 0 0 1.5px #E5484D}
.skw-foot .btn svg{width:15px;height:15px;fill:none;stroke:currentColor}
.dt-pane .skw-foot{padding:12px 20px}
@media (max-width:1100px){.dt-io{grid-template-columns:minmax(0,1fr)}.skw.dt-win textarea.dt-code{min-height:220px}.tree{min-height:200px}}
@media (max-width:900px){.dt-pane>.skw-bar{padding:14px 16px 4px}.dt-pane .skw-body{padding:12px 16px 18px}.skw.dt-win{min-height:0}}
@media (max-width:560px){.dt-head h2{font-size:17px}.skw-seg label>span{padding:6px 11px}.skw.dt-win .skw-row input.dt-range{flex:1;width:auto;max-width:none;min-width:0}.dt-len{display:flex;align-items:center;gap:12px;width:100%}.skw.dt-win .skw-row input.dt-num{flex:none;width:92px;max-width:92px}.dt-win .skw-row:has(>input.skw-sw){flex-wrap:nowrap}.dt-clock strong{font-size:22px}}

.callout {
  padding: 12px 14px;
  border-left: 3px solid var(--tang);
  border-radius: 0 8px 8px 0;
  background: var(--tang-wash);
  font-size: 14px;
}

.prose {
  margin-top: 88px;
  padding: 56px 0 24px;
  border-top: 1px solid var(--rule);
}

.prose > * { max-width: 720px; }

.prose h2 {
  margin: 48px 0 12px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.prose h2:first-child { margin-top: 0; }

.prose h3 { margin: 24px 0 4px; font-size: 17px; }

.prose p + p, .prose p + ul, .prose ul + p { margin-top: 12px; }

.prose ul { padding-left: 20px; }

.prose li { margin-top: 8px; }

.prose p, .prose li { color: var(--ink-soft); }

.prose strong { color: var(--ink); }

.prose code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--code);
  color: var(--ink);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

.colophon {
  margin-top: 40px;
  padding: 24px 0 48px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 14px;
}

.colophon a { color: inherit; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .masthead { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 0; }
  .intro { padding: 36px 0 24px; }
  .intro p { font-size: 17px; }
  .prose { margin-top: 56px; padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}

.dt-clock strong,
.dt-pattern>span,
.dt-flags label>span {
  font-family: var(--pl-sans);
  font-variant-numeric: tabular-nums;
}
