:root {
  --ps-bg:          #fafafa;
  --ps-bg-white:    #ffffff;
  --ps-bg-muted:    #ebebeb;
  --ps-bg-info:     #f3fbff;
  --ps-bg-stripe:   repeating-linear-gradient(135deg, #f4f4f4 0 8px, #e9e9e9 8px 9px);

  --ps-text:        #414141;
  --ps-text-strong: #000000;
  --ps-text-muted:  #737373;
  --ps-underline:   #818181;
  --ps-line:        #414141;
  --ps-line-light:  #c1c1c1;
  --ps-ink:         #111111;

  --ps-link:        #0b6ec5;
  --ps-link-hover:  #1e9de7;
  --ps-orange:      #f35815;
  --ps-yellow:      #fbca00;
  --ps-green:       #13862e;

  --ps-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ps-size: 16px;
  --ps-lh:   24px;

  --ps-1: 8px;  --ps-2: 12px;  --ps-3: 16px;  --ps-4: 24px;  --ps-5: 48px;  --ps-6: 80px;

  --ps-page:     1200px;
  --ps-page-pad: 96px;
  --ps-measure:  1008px;

  --ps-dash-v: repeating-linear-gradient(0deg,  var(--ps-line) 0 12px, transparent 12px 16px);
  --ps-dash-h: repeating-linear-gradient(90deg, var(--ps-line) 0 12px, transparent 12px 16px);
}

html { background: var(--ps-bg); }
body {
  margin: 0;
  color: var(--ps-text);
  font-family: var(--ps-mono);
  font-size: var(--ps-size);
  line-height: var(--ps-lh);
  background: var(--ps-bg);
}
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--ps-link); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--ps-link-hover); }
p { margin: 0 0 var(--ps-4); text-wrap: pretty; }
strong, b { font-weight: 600; }
h1, h2, h3, h4 { font-size: var(--ps-size); line-height: var(--ps-lh); margin: 0 0 var(--ps-4); }

h1, .ps-title {
  font-weight: 700;
  color: var(--ps-text-strong);
  border-left: 2px solid var(--ps-orange);
  padding-left: var(--ps-3);
  margin-left: -18px;
}
h2, h3, .ps-h {
  font-weight: 700;
  color: var(--ps-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ps-underline);
  text-underline-offset: 4px;
}

ul { list-style-type: "* "; padding-left: var(--ps-3); margin: 0 0 var(--ps-4) var(--ps-3); }
ul li + li { margin-top: var(--ps-1); }
ol { padding-left: var(--ps-4); margin: 0 0 var(--ps-4) var(--ps-3); }

hr, .ps-dots {
  border: 0; height: 16px; margin: var(--ps-4) 0;
  overflow: hidden; white-space: nowrap; color: var(--ps-text); line-height: 16px;
}
hr::before, .ps-dots::before {
  content: "........................................................................................................................................................................................................................";
}

blockquote { margin: var(--ps-3) 0; padding: 0 0 0 var(--ps-2); border-left: 2px solid var(--ps-line-light); }
blockquote p { margin: 0; }
.ps-cite { color: var(--ps-text-muted); margin: var(--ps-1) 0 var(--ps-3); }

pre, code, kbd { font-family: var(--ps-mono); }
pre { margin: 0 0 var(--ps-4); font-size: 16px; line-height: 20px; color: var(--ps-text-strong); overflow-x: auto; }
.ps-diagram { text-align: center; overflow-x: auto; }
.ps-diagram pre { display: inline-block; text-align: left; margin: 0; overflow: visible; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--ps-1) var(--ps-2); vertical-align: top; }
th { font-weight: 600; }
.ps-row-total td, .ps-row-total th { background: var(--ps-bg-muted); font-weight: 600; }

.ps-page { max-width: var(--ps-page); margin: 0 auto; padding: 0 clamp(20px, 8vw, var(--ps-page-pad)); }
.ps-main { max-width: var(--ps-measure); }
.ps-muted { color: var(--ps-text-muted); }
.ps-strong { color: var(--ps-text-strong); }

.ps-banner {
  background: var(--ps-yellow); color: var(--ps-ink); font-weight: 500;
  padding: var(--ps-1) var(--ps-4); text-align: center;
  display: flex; justify-content: center; gap: var(--ps-1); flex-wrap: wrap;
}
.ps-chip { background: var(--ps-ink); color: #fff; font-weight: 600; padding: 0 4px; }
.ps-chip:hover { text-decoration: none; background: #000; }

.ps-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-4); padding: var(--ps-4) 0 var(--ps-5); }
.ps-nav-left { display: flex; align-items: center; gap: 20px; min-width: 0; }
.ps-nav-links { display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; font-weight: 600; }
.ps-nav-links a { color: var(--ps-text); }
.ps-nav-links a:hover { text-decoration: none; color: var(--ps-text-strong); }
.ps-sep { color: var(--ps-line-light); font-weight: 400; }
.ps-nav-right { display: flex; align-items: center; gap: var(--ps-3); flex: none; font-weight: 600; }
.ps-nav-right a.ps-plain { color: var(--ps-text); }
.ps-logo { width: 32px; height: 32px; border-radius: 50%; background: var(--ps-ink); display: block; flex: none; }

.ps-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 32px; padding: 0 var(--ps-1); font-weight: 600; line-height: 16px; white-space: nowrap;
  border: 2px solid var(--ps-orange); color: var(--ps-orange); background: var(--ps-bg-white);
}
.ps-btn:hover { text-decoration: none; background: #fff3ec; }
.ps-btn-fill { background: var(--ps-orange); color: #fff; }
.ps-btn-fill:hover { background: #dc4e12; }
.ps-btn-dark { background: var(--ps-ink); color: #fff; border-color: var(--ps-ink); }
.ps-btn-dark:hover { background: #000; }

.ps-badge { background: var(--ps-orange); color: #fff; font-weight: 500; padding: 0 4px; }
.ps-tag { background: var(--ps-line); color: #fff; font-weight: 500; padding: 2px var(--ps-1); border: 1px solid var(--ps-line); }
.ps-toggle { display: inline-flex; }
.ps-toggle span { background: var(--ps-bg-muted); font-weight: 500; padding: 0 var(--ps-1); }
.ps-toggle span.on { background: var(--ps-link); color: #fff; }
.ps-price { color: var(--ps-green); font-weight: 600; }
.ps-mark { background: var(--ps-yellow); font-weight: 600; padding: 0 4px; }

.ps-select {
  display: inline-flex; align-items: center; gap: var(--ps-1); height: 42px; padding: 0 var(--ps-1);
  border: 1px solid var(--ps-line); background: var(--ps-bg-white); color: var(--ps-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.ps-check { display: inline-flex; align-items: center; gap: var(--ps-2); }
.ps-check i { width: 16px; height: 16px; border: 1px solid var(--ps-line); background: var(--ps-bg-white); flex: none; font-style: normal; }
.ps-check i.on { box-shadow: inset 0 0 0 3px var(--ps-bg-white); background: var(--ps-link); }

.ps-panel { border: 1px solid var(--ps-line); padding: var(--ps-4); margin: 0 0 var(--ps-4); }
.ps-panel > :last-child { margin-bottom: 0; }
.ps-panel + .ps-panel { border-top: 0; margin-top: calc(-1 * var(--ps-4)); }
.ps-callout { border: 1px solid var(--ps-line); background: var(--ps-bg-info); padding: var(--ps-4); margin: 0 0 var(--ps-4); }
.ps-callout > :last-child { margin-bottom: 0; }

.ps-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); margin: 0 0 var(--ps-4); }
.ps-cell { border: 1px solid var(--ps-line); margin: -0.5px; height: 128px; display: flex; align-items: center; justify-content: center; gap: var(--ps-2); font-weight: 600; color: var(--ps-text-strong); }

.ps-tabs { margin: 0 0 var(--ps-4); }
.ps-tabrow { display: grid; grid-template-columns: repeat(var(--tabs, 3), minmax(0, 1fr)); border: 1px solid var(--ps-line); border-bottom: 0; }
.ps-tab { text-align: center; font-weight: 600; padding: var(--ps-3) 0; color: var(--ps-text); border-left: 1px solid var(--ps-line); }
.ps-tab:first-child { border-left: 0; }
.ps-tab.on { background: var(--ps-ink); color: #fafafa; }
.ps-tabpanel { border: 1px solid var(--ps-line); padding: var(--ps-4); }
.ps-tabpanel > :last-child { margin-bottom: 0; }

.ps-dashbox {
  --l: 0; --r: 0; --t: 0; --b: 0;
  background-image: var(--ps-dash-v), var(--ps-dash-h), var(--ps-dash-v), var(--ps-dash-h);
  background-size: calc(var(--l) * 1px) 100%, 100% calc(var(--t) * 1px), calc(var(--r) * 1px) 100%, 100% calc(var(--b) * 1px);
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  padding: var(--ps-4);
}
.ps-dash-l { --l: 1; } .ps-dash-r { --r: 1; } .ps-dash-t { --t: 1; } .ps-dash-b { --b: 1; }

.ps-footer { margin: var(--ps-6) 0 var(--ps-5); }
.ps-footer-cols { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); }
.ps-footer-cols h3 { font-weight: 600; }
.ps-footer ul { list-style: none; margin: 0; padding: 0; }
.ps-footer ul li + li { margin-top: 0; }
.ps-footer a { color: var(--ps-text); }
.ps-footer .ps-legal p { margin: 0; }
.ps-footer .ps-social { margin-top: var(--ps-4); }
.ps-footer .ps-social a { color: var(--ps-text); }
.ps-footer .ps-social .ps-sep { padding: 0 4px; }

.ps-figure { margin: 0 0 var(--ps-4); }
.ps-placeholder { background: var(--ps-bg-stripe); border: 1px solid var(--ps-line-light); min-height: 240px; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--ps-3); color: var(--ps-text-muted); font-size: 14px; }
.ps-caption { color: var(--ps-text-muted); padding-left: var(--ps-4); margin-top: var(--ps-2); }

@media (max-width: 900px) {
  h1, .ps-title { margin-left: 0; }
  .ps-nav-links { display: none; }
  .ps-grid { --cols: 2; }
  .ps-footer-cols { grid-template-columns: 1fr 1fr; }
  pre { font-size: 12px; line-height: 16px; }
}