:root{--k-base:#effaf5;--k-card:#ffffff;--k-ink:#0f2e24;--k-muted:#4f6f63;--k-primary:#0f766e;--k-pop:#f59e0b;--k-border:#d3eee3;--k-round:4px;--k-page:1080px;--k-f1:'Merriweather',system-ui,sans-serif;--k-font-body:'Work Sans',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem} body{margin:0;background:var(--k-base);color:var(--k-ink);font:16px/1.65 var(--k-font-body)}
img{max-width:100%;height:auto} a{color:var(--k-primary);text-underline-offset:3px}
input,select,textarea{max-width:100%;box-sizing:border-box}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-height:2.75em} input::-webkit-date-and-time-value{text-align:left}}
h1,h2,h3{font-family:var(--k-f1);line-height:1.2;letter-spacing:-.01em;color:var(--k-ink)}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.2em 0 .35em} h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:2.20em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1em}
.ped4bu{max-width:var(--k-page);margin:0 auto;padding:0 1rem} .pe9ai6{max-width:var(--k-page);margin:0 auto;padding:1.2rem 1rem 3rem}
.pexzyz{position:absolute;left:-9999px} .pexzyz:focus{left:1rem;top:1rem;background:var(--k-card);padding:.5rem;z-index:99}
.pewh16{max-width:var(--k-page);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.peyw96{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--k-f1);color:var(--k-ink);text-decoration:none}
.peh8iz{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .peh8iz a{color:var(--k-ink);text-decoration:none;font-weight:600;font-size:.95rem}
.pegxgk{background:var(--k-primary)} .pegxgk a,.pegxgk .peyw96,.pegxgk summary{color:#fff} .pegxgk .pez2jj summary{border-color:rgba(255,255,255,.5)} .pegxgk .pe7d9a a{color:var(--k-ink)} .pegxgk .pe7d9a a[aria-current]{color:var(--k-primary)}  .peh8iz a{border-bottom:2px solid transparent;padding-bottom:2px} .peh8iz a:hover,.peh8iz a[aria-current]{border-color:var(--k-primary)}
.pec56z{margin:1rem 0 1.4rem} .pewa5u{font-size:1.12rem;max-width:46em;color:var(--k-muted)} .pec56z{background:var(--k-card);border:1px solid var(--k-border);padding:2rem 1.6rem;border-radius:var(--k-round)}
.pesf9d{margin:1.4rem 0 2rem}
.pex49n{margin:1.4em 0;padding:.9em 1.1em;background:var(--k-card);border-left:4px solid var(--k-pop);border-radius:0 var(--k-round) var(--k-round) 0}
.peu3du{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--k-card);border:1px dashed var(--k-primary);border-radius:var(--k-round);overflow-x:auto}
.pebabh{margin:1.2em 0;overflow-x:auto;border:1px solid var(--k-border);border-radius:var(--k-round);background:var(--k-card)}
.petxqq{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .petxqq th,.petxqq td{padding:.5em .75em;border-bottom:1px solid var(--k-border);text-align:left}
.petxqq thead th{background:color-mix(in srgb,var(--k-border) 60%,var(--k-card))}
ol.pem894{padding-left:1.3em} ol.pem894>li{margin:.5em 0}
.pe6w4r{margin:1.6em 0;text-align:center} .pe6w4r img{width:100%;max-width:720px;border-radius:var(--k-round);border:1px solid var(--k-border);background:#fff} .pe6w4r figcaption{font-size:.9em;color:var(--k-muted)}
.pebnh6{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.pe4gtf{display:block;padding:1.1rem;background:var(--k-card);border-radius:var(--k-round);border:1px solid var(--k-border);color:var(--k-ink);text-decoration:none}
.pe4gtf b{display:block;font-family:var(--k-f1);margin-bottom:.35rem} .pe4gtf span{color:var(--k-muted);font-size:.92rem} .pe4gtf:hover{border-color:var(--k-primary)}
.pe4gtf--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .pe4gtf--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--k-ink) 14%,transparent)}
.pemsjm{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .pewaec{display:block;padding:1rem 1.1rem 1.1rem} .pewaec>span{display:block}
.pebp49 a,.pe6ju7,.pedryy{background:none!important}
.pey922{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--k-primary)}
.pebnh6--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .pebnh6--feat>.pe4gtf:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .pebnh6--feat>.pe4gtf:first-child b{font-size:1.35rem}
.pebp49{display:grid;gap:1rem;margin:1.2em 0} .pe6ju7{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--k-card);border:1px solid var(--k-border);border-radius:var(--k-round);overflow:hidden;color:var(--k-ink);text-decoration:none}
.pe6ju7 .pemsjm{height:100%;aspect-ratio:auto;min-height:126px} .pe6ju7 b{display:block;font-family:var(--k-f1);font-size:1.12rem;margin-bottom:.3rem} .pe6ju7 .pewaec>span{color:var(--k-muted);font-size:.93rem} .pe6ju7:hover{border-color:var(--k-primary)}
.pebp49--min{list-style:none;padding:0;counter-reset:bl;gap:0} .pebp49--min li{counter-increment:bl;border-top:1px solid var(--k-border)} .pebp49--min li:last-child{border-bottom:1px solid var(--k-border)}
.pebp49--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--k-ink);text-decoration:none} .pebp49--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--k-f1);color:var(--k-primary)}
.pebp49--min b{font-family:var(--k-f1);font-size:1.15rem} .pebp49--min span{color:var(--k-muted);font-size:.93rem} .pebp49--min a:hover b{color:var(--k-primary)}
.pea9r5--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--k-round);overflow:hidden} .pea9r5--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.peab4p{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .peab4p h1,.peab4p .pe9ydn,.peab4p .pedryy{color:#fff}
.pea9r5--band{background:var(--k-primary);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--k-round)} .pea9r5--band h1,.pea9r5--band .pe9ydn,.pea9r5--band .pedryy{color:#fff}
.pea9r5--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .pea9r5--split .pebnga{margin:0}
.pe86c9--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .pe86c9--chips li{margin:0} .pe86c9--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--k-border);border-radius:999px;background:var(--k-base);text-decoration:none;font-size:.88rem}
.pe86c9--rail{background:none;border:0;border-left:3px solid var(--k-pop);border-radius:0;padding:.2rem 0 .2rem 1rem}
.pez2jj--globe summary{display:flex;align-items:center;gap:.35rem} .pe708t{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .pe708t a{padding:.25rem .7rem;border:1px solid var(--k-border);border-radius:999px;text-decoration:none} .pe708t a[aria-current]{background:var(--k-primary);border-color:var(--k-primary);color:#fff}
@media (max-width:700px){.pebnh6--feat{grid-template-columns:1fr} .pebnh6--feat>.pe4gtf:first-child{display:flex} .pe6ju7{grid-template-columns:1fr} .pe6ju7 .pemsjm{min-height:0;aspect-ratio:1200/630} .pea9r5--split{grid-template-columns:1fr} .peab4p{position:static;background:var(--k-primary);padding:1.2rem} .pea9r5--overlay>img{min-height:0}}
.pexvwi{max-width:48rem;margin:0 auto} .pea9r5{margin:.6rem 0 1.2rem} .pea9r5 h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.pedryy{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--k-primary);text-decoration:none}
.pe4h60{color:var(--k-muted);font-size:.9rem;margin:2rem 0 0} .pe400c{font-style:italic;color:var(--k-muted)} .pe9ydn{color:var(--k-muted);font-size:.92rem;margin:0} .pebnga{margin:0 0 1.6rem} .pebnga img{display:block;width:100%;height:auto;border-radius:var(--k-round)}
.pexvwi .pewa5u{font-size:1.2rem;color:var(--k-ink)} .pexvwi .pewa5u::first-letter{font-family:var(--k-f1);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--k-primary)}
.pexvwi .pe86c9--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--k-card);border:1px solid var(--k-border);border-left:4px solid var(--k-primary);border-radius:var(--k-round);font-size:.95rem}
.pe86c9--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .pe86c9--post li{margin:.2rem 0}
.pexvwi h3{color:var(--k-primary)} .pexvwi blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--k-pop);font-size:1.1em}
.pe0irq details{border-bottom:1px solid var(--k-border);padding:.7rem 0} .pe0irq summary{cursor:pointer;font-weight:700;font-family:var(--k-f1)}
.pejjwr{font-size:.88rem;color:var(--k-muted);margin:.4rem 0 1rem} .pejjwr a{color:var(--k-muted)}
.pesczr{margin:2.4rem 0;padding:1.4rem;background:var(--k-card);border-radius:var(--k-round);border:1px solid var(--k-border);text-align:center}
.perkgx{display:inline-block;padding:.7em 1.4em;background:var(--k-primary);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.perv42{border-top:1px solid var(--k-border);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--k-muted);background:var(--k-card)}
.perv42 nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .perv42 a{color:var(--k-muted)} .perv42{background:var(--k-ink);color:var(--k-base)} .perv42 a,.perv42 p{color:var(--k-base);opacity:.85}
.pe9ai6{counter-reset:sec} .pe2gad>h2{counter-increment:sec} .pe2gad>h2::before{content:counter(sec,decimal-leading-zero);display:block;font-size:.8rem;letter-spacing:.12em;color:var(--k-primary);margin-bottom:.2em}
.pe86c9{margin:1.2rem 0;padding:.8rem 1rem;background:var(--k-card);border-radius:var(--k-round);border:1px solid var(--k-border)} .pe86c9 ol{margin:.3rem 0 0;padding-left:1.2rem;columns:2;column-gap:2rem} @media(max-width:640px){.pe86c9 ol{columns:1}}
.pez2jj{position:relative} .pez2jj summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--k-border);border-radius:999px;font-size:.85rem}
.pe7d9a{position:absolute;right:0;top:120%;background:var(--k-card);border:1px solid var(--k-border);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.pe7d9a a{padding:.3rem .5rem;text-decoration:none;color:var(--k-ink)} .pe7d9a a[aria-current]{font-weight:700;color:var(--k-primary)}
.pev18e{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .pev18e a{text-decoration:none;color:var(--k-muted);padding:.1rem .3rem;border-radius:4px} .pev18e a[aria-current]{color:var(--k-primary);background:color-mix(in srgb,var(--k-primary) 12%,transparent)}
[data-ad]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-ad]:empty{margin:0}
[data-ad="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--k-card)}
[data-ad="sidebar_left"],[data-ad="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-ad="sidebar_left"]{left:12px} [data-ad="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-ad="sidebar_left"],[data-ad="sidebar_right"]{display:none}}
.pe47bd{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--k-muted)}
.perkgx{border-radius:var(--k-round);box-shadow:0 4px 0 color-mix(in srgb,var(--k-primary) 55%,#000)} .perkgx:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--k-primary) 55%,#000)}
.pebabh{border:0;border-top:3px solid var(--k-primary);border-radius:0;background:transparent} .petxqq thead th{background:transparent;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.pe2gad a:not(.perkgx):not(.pe4gtf){text-decoration-thickness:2px}
@media (max-width:640px){.pewh16{gap:.5rem} .peh8iz{gap:.8rem}}

/* Percentage Increase Calculator — tool styles. Colours, radius and fonts come only from the site tokens. */
.pic {
  --pic-up: var(--k-primary);
  --pic-down: var(--k-pop);
  --pic-soft: color-mix(in srgb, var(--k-primary) 8%, var(--k-card));
  --pic-soft2: color-mix(in srgb, var(--k-pop) 12%, var(--k-card));
  color: var(--k-ink);
  font-family: var(--k-font-body);
  color-scheme: inherit;
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.pic *, .pic *::before, .pic *::after { box-sizing: border-box; }
.pic [hidden] { display: none !important; }
.pic svg { overflow: visible; }

/* modes */
.pic-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pic-mode {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .55rem .8rem;
  font: inherit; font-weight: 600; font-size: .98rem; color: var(--k-muted);
  background: var(--k-card); border: 1.5px solid var(--k-border); border-radius: var(--k-round);
  cursor: pointer; transition: border-color .2s, background-color .2s, color .2s;
}
.pic-mode svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pic-mode:hover { color: var(--k-ink); border-color: color-mix(in srgb, var(--k-primary) 50%, var(--k-border)); }
.pic-mode[aria-pressed="true"] { color: var(--k-primary); background: var(--pic-soft); border-color: var(--k-primary); box-shadow: inset 0 -3px 0 var(--k-primary); }

.pic-panel { display: grid; gap: .9rem; }
.pic-lead { margin: 0; color: var(--k-muted); font-size: .95rem; }

/* the before → after trio */
.pic-trio { display: grid; grid-template-columns: 1fr minmax(150px, .9fr) 1fr; gap: .9rem; align-items: start; }
.pic-f {
  position: relative; display: grid; gap: .35rem; min-width: 0;
  padding: .8rem .85rem .7rem; background: var(--k-card);
  border: 1.5px solid var(--k-border); border-radius: var(--k-round);
  transition: border-color .25s, background-color .25s;
}
.pic-f:focus-within { border-color: var(--k-primary); }
.pic-f.is-solved { background: var(--pic-soft); border-style: dashed; border-color: var(--k-primary); }
.pic-f-pct { background: var(--pic-soft2); }
.pic-f-pct.is-solved { background: var(--pic-soft2); border-color: var(--k-pop); }
.pic-ramp { position: absolute; left: 10%; right: 10%; top: -14px; width: 80%; height: 16px; fill: none; stroke: var(--k-pop); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pic-lab { display: flex; align-items: center; justify-content: space-between; gap: .4rem; flex-wrap: wrap; }
.pic-lab label, .pic-xf > label, .pic-row-lab { font-weight: 600; font-size: .92rem; color: var(--k-ink); }
.pic-tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--k-primary); padding: .1rem .45rem; border: 1px solid currentColor; border-radius: var(--k-round);
}
.pic-f-pct .pic-tag { color: var(--k-pop); }
.pic-in {
  width: 100%; min-width: 0; min-height: 48px; padding: .55rem .7rem;
  font: inherit; font-family: var(--k-f1); font-size: 1.35rem; font-variant-numeric: tabular-nums;
  color: var(--k-ink); background: var(--k-base); border: 1.5px solid var(--k-border); border-radius: var(--k-round);
  color-scheme: inherit;
}
.pic-in::placeholder { color: var(--k-muted); opacity: .7; font-family: var(--k-font-body); font-size: 1rem; }
.pic-in:focus { outline: 2px solid var(--k-primary); outline-offset: 1px; border-color: var(--k-primary); }
.pic-in[aria-invalid="true"] { border-color: var(--k-pop); outline-color: var(--k-pop); box-shadow: inset 4px 0 0 var(--k-pop); }
.pic-f.is-solved .pic-in { border-color: transparent; background: transparent; font-weight: 700; color: var(--k-primary); }
.pic-f-pct.is-solved .pic-in { color: var(--k-ink); }
.pic-in-s { font-size: 1.05rem; min-height: 44px; }
.pic-pw { position: relative; display: flex; align-items: center; }
.pic-pw .pic-in { padding-right: 2rem; }
.pic-unit { position: absolute; right: .7rem; color: var(--k-muted); font-weight: 700; pointer-events: none; }
.pic-read { margin: 0; min-height: 1.1em; font-size: .8rem; color: var(--k-primary); }
.pic-read:empty { min-height: 0; }
.pic-hint { margin: 0; font-size: .8rem; color: var(--k-muted); line-height: 1.4; }

/* rates switch */
.pic-switch { position: relative; display: flex; align-items: center; gap: .65rem; cursor: pointer; font-size: .92rem; line-height: 1.35; }
.pic-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pic-knob {
  position: relative; flex: none; width: 42px; height: 24px; border-radius: var(--k-round);
  background: var(--k-border); transition: background-color .2s;
}
.pic-knob::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--k-round);
  background: var(--k-card); transition: transform .2s;
}
.pic-switch input:checked + .pic-knob { background: var(--k-primary); }
.pic-switch input:checked + .pic-knob::after { transform: translateX(18px); }
.pic-switch input:focus-visible + .pic-knob { outline: 2px solid var(--k-primary); outline-offset: 2px; }

/* optional extras */
.pic-extra {
  margin: 0; padding: .7rem .9rem .9rem; min-width: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem;
  border: 1.5px dashed var(--k-border); border-radius: var(--k-round);
}
.pic-extra legend { padding: 0 .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); }
.pic-xf { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.pic-xrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: .5rem; }
.pic-sel {
  min-height: 44px; min-width: 0; padding: .4rem .5rem; font: inherit; font-size: 1rem;
  color: var(--k-ink); background: var(--k-base); border: 1.5px solid var(--k-border); border-radius: var(--k-round);
}
.pic-sel:focus { outline: 2px solid var(--k-primary); outline-offset: 1px; }
.pic-pw-s { max-width: none; }

/* chain rows */
.pic-f-start { max-width: 320px; }
.pic-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; counter-reset: none; }
.pic-row {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: .3rem .4rem; align-items: center;
  padding: .55rem .6rem; background: var(--k-card); border: 1.5px solid var(--k-border); border-radius: var(--k-round);
}
.pic-row-lab { grid-column: 1 / 2; font-size: .85rem; }
.pic-row .pic-pw { grid-column: 1 / 3; }
.pic-row .pic-in { font-size: 1.15rem; min-height: 44px; }
.pic-del {
  grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; color: var(--k-muted); background: transparent;
  border: 1px solid transparent; border-radius: var(--k-round); cursor: pointer;
}
.pic-del svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pic-del:hover:not(:disabled) { color: var(--k-pop); border-color: var(--k-border); }
.pic-del:disabled { opacity: .3; cursor: default; }
.pic-add {
  justify-self: start; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem .9rem;
  font: inherit; font-weight: 600; color: var(--k-primary); background: transparent;
  border: 1.5px dashed var(--k-primary); border-radius: var(--k-round); cursor: pointer;
}
.pic-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pic-add:disabled { opacity: .45; cursor: default; }

/* chips */
.pic-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pic-chips-lab { font-size: .85rem; font-weight: 600; color: var(--k-muted); margin-right: .2rem; }
.pic-chip {
  min-height: 36px; padding: .3rem .75rem; font: inherit; font-size: .85rem; color: var(--k-ink);
  background: var(--k-card); border: 1px solid var(--k-border); border-radius: var(--k-round); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.pic-chip:hover { border-color: var(--k-primary); color: var(--k-primary); }

/* actions */
.pic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.pic-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: .55rem 1.3rem;
  font: inherit; font-weight: 700; font-size: 1rem; border-radius: var(--k-round); cursor: pointer;
  border: 1.5px solid var(--k-primary); transition: filter .2s, background-color .2s;
}
.pic-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.pic-btn-main { color: var(--k-card); background: var(--k-primary); }
.pic-btn-main:hover { filter: brightness(1.08); }
.pic-btn-ghost { color: var(--k-primary); background: transparent; }
.pic-btn-ghost:hover { background: var(--pic-soft); }
.pic-btn:focus-visible, .pic-chip:focus-visible, .pic-mode:focus-visible, .pic-copy:focus-visible, .pic-add:focus-visible, .pic-del:focus-visible, .pic-undo:focus-visible { outline: 2px solid var(--k-pop); outline-offset: 2px; }
.pic-kbd { font-size: .8rem; color: var(--k-muted); }
.pic-kbd kbd { font: inherit; font-size: .75rem; padding: .05rem .35rem; border: 1px solid var(--k-border); border-radius: var(--k-round); background: var(--k-card); }

.pic-toast {
  display: flex; align-items: center; gap: .8rem; justify-self: start; padding: .5rem .9rem;
  font-size: .9rem; color: var(--k-ink); background: var(--k-card);
  border: 1px solid var(--k-border); border-left: 4px solid var(--k-primary); border-radius: var(--k-round);
  animation: pic-in .25s ease-out;
}
.pic-undo { font: inherit; font-weight: 700; color: var(--k-primary); background: none; border: 0; padding: .2rem .3rem; cursor: pointer; text-decoration: underline; min-height: 32px; }

/* output */
.pic-out { min-width: 0; }
.pic-empty {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem;
  color: var(--k-muted); background: var(--k-card); border: 1.5px dashed var(--k-border); border-radius: var(--k-round);
}
.pic-empty svg { width: 96px; height: 52px; flex: none; }
.pic-empty p { margin: 0; }
.pic-e-base, .pic-e-l { fill: none; stroke: var(--k-border); stroke-width: 2; stroke-dasharray: 4 3; }
.pic-e-a { fill: color-mix(in srgb, var(--k-primary) 30%, var(--k-card)); }
.pic-e-b { fill: var(--k-primary); opacity: .55; }
.pic-e-c { fill: var(--k-pop); }
.pic-err {
  margin: 0; padding: .85rem 1rem; color: var(--k-ink); background: var(--pic-soft2);
  border: 1.5px solid var(--k-pop); border-radius: var(--k-round); font-weight: 500;
}
.pic-res { display: grid; gap: 1rem; animation: pic-in .3s ease-out; min-width: 0; }
@keyframes pic-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pic-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem;
  padding: 1.1rem 1.2rem; background: var(--pic-soft); border-radius: var(--k-round);
  border: 1.5px solid color-mix(in srgb, var(--k-primary) 35%, var(--k-border));
  border-left: 6px solid var(--k-primary);
}
.pic-hero[data-dir="down"] { background: var(--pic-soft2); border-color: color-mix(in srgb, var(--k-pop) 40%, var(--k-border)); border-left-color: var(--k-pop); }
.pic-hero[data-dir="undef"], .pic-hero[data-dir="flat"] { border-left-color: var(--k-muted); }
.pic-hero-main { display: grid; gap: .25rem; min-width: 0; }
.pic-hero-lab { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); }
.pic-hero-val {
  display: block; font-family: var(--k-f1); font-weight: 700; font-size: clamp(2rem, 7vw, 3.1rem); line-height: 1.08;
  color: var(--k-primary); overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.pic-hero[data-dir="down"] .pic-hero-val { color: var(--k-ink); }
.pic-hero-sub { margin: 0; font-size: 1rem; color: var(--k-ink); overflow-wrap: anywhere; }
.pic-copy {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  color: var(--k-muted); background: var(--k-card); border: 1px solid var(--k-border); border-radius: var(--k-round); cursor: pointer;
}
.pic-copy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pic-copy:hover { color: var(--k-primary); border-color: var(--k-primary); }
.pic-copy-s { width: 32px; height: 32px; }
.pic-copy-s svg { width: 15px; height: 15px; }
.pic-note { margin: 0; padding: .6rem .85rem; font-size: .92rem; background: var(--k-card); border-left: 3px solid var(--k-pop); border-radius: var(--k-round); }

.pic-ms { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .5rem; }
.pic-m {
  display: flex; flex-direction: column; justify-content: space-between; gap: .2rem; min-width: 0;
  padding: .6rem .75rem; background: var(--k-card); border: 1px solid var(--k-border); border-radius: var(--k-round);
}
.pic-m dt { font-size: .8rem; color: var(--k-muted); }
.pic-m dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.pic-mv { font-family: var(--k-f1); font-weight: 700; font-size: 1.2rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; min-width: 0; }
s.pic-mv { font-weight: 400; color: var(--k-muted); text-decoration-thickness: 2px; text-decoration-color: var(--k-pop); }
.pic-m-big { border-color: var(--k-primary); background: var(--pic-soft); }
.pic-m-big .pic-mv { color: var(--k-primary); font-size: 1.4rem; }

.pic-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; align-items: start; }
.pic-fig { margin: 0; padding: .7rem .8rem .6rem; background: var(--k-card); border: 1px solid var(--k-border); border-radius: var(--k-round); min-width: 0; }
.pic-fig figcaption { margin-top: .35rem; font-size: .8rem; color: var(--k-muted); line-height: 1.4; }
.pic-svg svg { display: block; width: 100%; height: auto; max-height: 260px; }
.pic-svg text { font-family: var(--k-font-body); fill: var(--k-ink); paint-order: stroke; stroke: var(--k-card); stroke-width: 3px; stroke-linejoin: round; }
.pic-b-before { fill: color-mix(in srgb, var(--k-primary) 28%, var(--k-card)); }
.pic-b-after { fill: var(--k-primary); }
.pic-b-up { fill: var(--k-pop); }
.pic-b-down { fill: color-mix(in srgb, var(--k-pop) 18%, transparent); stroke: var(--k-pop); stroke-width: 1.5; stroke-dasharray: 4 3; }
.pic-b-link { fill: none; stroke: var(--k-muted); stroke-width: 1.2; stroke-dasharray: 3 3; }
.pic-b-zero { fill: none; stroke: var(--k-border); stroke-width: 1.5; }
.pic-b-arrow { fill: none; stroke: var(--k-pop); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pic-svg .pic-b-pct { font-size: 15px; font-weight: 700; fill: var(--k-primary); }
.pic-svg .pic-b-val { font-size: 13px; font-weight: 600; }
.pic-svg .pic-b-cap, .pic-svg .pic-g-ax { font-size: 12px; fill: var(--k-muted); }
.pic-svg .pic-c-pct { font-size: 11px; font-weight: 600; fill: var(--k-muted); }
.pic-r-down { fill: color-mix(in srgb, var(--k-pop) 35%, var(--k-card)); }
.pic-r-up { fill: color-mix(in srgb, var(--k-primary) 35%, var(--k-card)); }
.pic-r-tick { stroke: var(--k-muted); stroke-width: 1; }
.pic-svg .pic-r-lab { font-size: 11px; fill: var(--k-muted); }
.pic-r-dot { fill: var(--k-primary); stroke: var(--k-card); stroke-width: 2; }
.pic-r-ghost { fill: var(--k-card); stroke: var(--k-pop); stroke-width: 2; stroke-dasharray: 3 2; }
.pic-r-over { fill: var(--k-primary); }
.pic-svg .pic-r-mark { font-size: 13px; font-weight: 700; fill: var(--k-primary); }
.pic-svg .pic-r-back { font-size: 12px; fill: var(--k-pop); }
.pic-g-area { fill: color-mix(in srgb, var(--k-primary) 14%, transparent); }
.pic-g-axis, .pic-g-tick { fill: none; stroke: var(--k-border); stroke-width: 1.5; }
.pic-g-lin { fill: none; stroke: var(--k-muted); stroke-width: 1.2; stroke-dasharray: 5 4; }
.pic-g-line { fill: none; stroke: var(--k-primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pic-g-dot { fill: var(--k-card); stroke: var(--k-primary); stroke-width: 1.8; }
.pic-g-end { fill: var(--k-pop); stroke: var(--k-card); stroke-width: 2; }
.pic-svg .pic-g-lab { font-size: 12px; font-weight: 600; }
.pic-svg .pic-g-rate { font-size: 12px; font-weight: 700; fill: var(--k-primary); }

.pic-sec {
  display: grid; gap: .7rem; padding: .9rem 1rem 1rem; min-width: 0;
  background: color-mix(in srgb, var(--k-card) 60%, transparent); border: 1px solid var(--k-border); border-radius: var(--k-round);
}
.pic-sec-h { margin: 0; font-family: var(--k-f1); font-size: 1.1rem; color: var(--k-ink); }
.pic-warn { margin: 0; padding: .5rem .7rem; font-size: .9rem; border-left: 3px solid var(--k-pop); background: var(--pic-soft2); border-radius: var(--k-round); }
.pic-verdict { margin: 0; font-weight: 600; padding: .55rem .8rem; border-radius: var(--k-round); background: var(--pic-soft); border-left: 4px solid var(--k-primary); }
.pic-verdict[data-v="down"] { background: var(--pic-soft2); border-left-color: var(--k-pop); }
.pic-tw { overflow-x: auto; max-width: 100%; }
.pic-table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.pic-table th, .pic-table td { padding: .35rem .6rem; text-align: right; border-bottom: 1px solid var(--k-border); white-space: nowrap; }
.pic-table th:first-child, .pic-table td:first-child { text-align: left; }
.pic-table th { font-size: .78rem; color: var(--k-muted); font-weight: 600; }
.pic-table tbody tr:last-child td { font-weight: 700; color: var(--k-primary); border-bottom: 0; }
.pic-table .pic-gap { text-align: center; color: var(--k-muted); }

.pic-steps { background: var(--k-card); border: 1px solid var(--k-border); border-radius: var(--k-round); padding: .7rem .9rem; }
.pic-steps summary, .pic-ref summary { cursor: pointer; font-weight: 700; min-height: 32px; display: list-item; }
.pic-steps ol { margin: .5rem 0 0; padding-left: 1.3rem; display: grid; gap: .3rem; font-size: .92rem; font-variant-numeric: tabular-nums; }
.pic-steps li { overflow-wrap: anywhere; }
.pic-steps li::marker { color: var(--k-primary); font-weight: 700; }
.pic-copyall { display: flex; justify-content: flex-end; }

.pic-ref { font-size: .9rem; padding: .6rem .9rem; border: 1px solid var(--k-border); border-radius: var(--k-round); background: var(--k-card); }
.pic-ref ul { margin: .6rem 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.pic-ref code { font-size: .85rem; padding: .05rem .3rem; background: var(--pic-soft); border-radius: var(--k-round); overflow-wrap: anywhere; }
.pic-ref p { margin: 0; color: var(--k-muted); }
.pic-offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }

@media (max-width: 640px) {
  .pic-trio { grid-template-columns: 1fr; gap: 1.2rem; }
  .pic-f-pct { order: 0; }
  .pic-ramp { display: none; }
  .pic-extra { grid-template-columns: 1fr; }
  .pic-modes .pic-mode { font-size: .9rem; padding: .5rem; }
  .pic-in { font-size: 1.25rem; }
  .pic-in-s, .pic-sel, .pic-row .pic-in { font-size: 1rem; }
  .pic-hero { padding: .9rem; }
  .pic-ms { grid-template-columns: 1fr 1fr; }
  .pic-m-big, .pic-m[data-m="pdiff"], .pic-m[data-m="simple"] { grid-column: 1 / -1; }
  .pic-mv { font-size: 1.1rem; }
  .pic-btn { flex: 1 1 auto; }
  .pic-kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pic-res, .pic-toast { animation: none; }
  .pic-mode, .pic-f, .pic-knob, .pic-knob::after, .pic-chip, .pic-btn { transition: none; }
}

/* design: sites/<d>/design/site.css */
/* Canal lock flight — percentage-increase-calculator.org */

/* page: pale canal water with faint ripples */
body{background-color:var(--k-base);background-image:url(/assets/img/d-ripple.svg);background-size:120px 40px}

/* ---------- header: the timber lock gate ---------- */
.pegxgk{background-color:color-mix(in srgb,var(--k-primary) 38%,var(--k-ink));
  background-image:repeating-linear-gradient(90deg,transparent 0 46px,color-mix(in srgb,var(--k-ink) 55%,transparent) 46px 48px);
  border-bottom:0;position:relative;box-shadow:inset 0 -7px 0 var(--k-pop),inset 0 -9px 0 color-mix(in srgb,var(--k-ink) 70%,transparent)}
.pewh16{padding:.85rem 1rem 1.25rem}
.pegxgk .peyw96{color:#fff;font-family:var(--k-f1);font-weight:700;letter-spacing:-.01em}
.pegxgk .peyw96 svg{border-radius:3px;box-shadow:0 0 0 2px var(--k-pop)}
.peh8iz{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.peh8iz>a{color:#fff;font-weight:600;text-decoration:none;border-bottom:3px solid transparent;padding:.15rem 0}
.peh8iz>a:hover,.peh8iz>a[aria-current]{border-color:var(--k-pop)}
/* language switch: a gauge plate on the gate */
.pegxgk .pez2jj summary{color:#fff;border:1px solid color-mix(in srgb,#fff 45%,transparent);border-radius:2px;background:color-mix(in srgb,var(--k-ink) 35%,transparent);padding:.2rem .55rem;font-weight:700;letter-spacing:.06em;box-shadow:inset 0 -3px 0 var(--k-pop)}
.pegxgk .pez2jj summary:hover,.pegxgk .pez2jj[open] summary{border-color:var(--k-pop)}
.pegxgk .pe7d9a{border-radius:var(--k-round);border-top:4px solid var(--k-pop);box-shadow:0 10px 24px color-mix(in srgb,var(--k-ink) 25%,transparent)}
.pegxgk .pe7d9a a{color:var(--k-ink)}
.pegxgk .pe7d9a a:hover{background:color-mix(in srgb,var(--k-primary) 10%,transparent)}
.pegxgk .pe7d9a a[aria-current]{color:var(--k-primary)}

/* ---------- crumbs: towpath mile markers ---------- */
.pejjwr{font-size:.85rem;color:var(--k-muted);margin:1.2rem 0 .6rem}
.pejjwr a{color:var(--k-primary);text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--k-primary) 55%,transparent)}
.pejjwr a:hover{border-bottom-style:solid}

/* ---------- first screen: a lock chamber with the flight on the right ---------- */
.pec56z{position:relative;overflow:hidden;background-color:var(--k-card);
  background-image:url(/assets/img/d-lockflight.svg),linear-gradient(to top,color-mix(in srgb,var(--k-primary) 7%,var(--k-card)) 0 34px,transparent 34px);
  background-repeat:no-repeat;background-position:right 1.2rem bottom 0,0 0;background-size:330px auto,100% 100%;
  border:1px solid var(--k-border);border-left:8px solid color-mix(in srgb,var(--k-primary) 38%,var(--k-ink));
  padding:2.1rem 370px 2.3rem 1.8rem;margin-top:1.4rem}
.pec56z h1{line-height:1.12;letter-spacing:-.015em;color:var(--k-ink)}
.pec56z .pewa5u{color:var(--k-muted)}
.pec56z::before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;
  background:linear-gradient(90deg,var(--k-pop) 0 25%,color-mix(in srgb,var(--k-pop) 55%,var(--k-card)) 25% 50%,var(--k-border) 50%)}
@media (max-width:860px){
  .pec56z{padding:1.6rem 1.1rem 150px 1.1rem;background-position:right .4rem bottom 0,0 0;background-size:250px auto,100% 100%}
}

/* tool frame: moored in its own chamber (outer spacing only) */
.pesf9d{margin-top:1.2rem;margin-bottom:1.6rem}

/* ---------- home contents: the lock-flight board ---------- */
.pe86c9:not(.pe86c9--post){background:var(--k-card);border:1px solid var(--k-border);border-top:6px solid color-mix(in srgb,var(--k-primary) 38%,var(--k-ink));border-radius:var(--k-round);padding:1rem 1.3rem 1.1rem}
.pe86c9:not(.pe86c9--post)>strong{font-family:var(--k-f1);font-size:1.05rem}
.pe86c9:not(.pe86c9--post) ol{list-style:none;padding:0;counter-reset:lk}
.pe86c9:not(.pe86c9--post) li{counter-increment:lk;position:relative;padding:.18rem 0 .18rem 2.3rem;break-inside:avoid}
.pe86c9:not(.pe86c9--post) li::before{content:counter(lk,decimal-leading-zero);position:absolute;left:0;top:.28rem;font:700 .7rem/1 var(--k-font-body);color:var(--k-ink);background:color-mix(in srgb,var(--k-pop) 70%,var(--k-card));padding:.22rem .3rem;border-radius:2px}
.pe86c9:not(.pe86c9--post) a{color:var(--k-ink);text-decoration:none;border-bottom:1px solid var(--k-border)}
.pe86c9:not(.pe86c9--post) a:hover{color:var(--k-primary);border-color:var(--k-primary)}

/* ---------- section headings: tide-gauge board ---------- */
.pe2gad>h2{position:relative;padding-left:1.5rem;border-left:0}
.pe2gad>h2::after{content:"";position:absolute;left:0;top:.1em;bottom:.05em;width:9px;
  background:repeating-linear-gradient(to bottom,var(--k-primary) 0 2px,transparent 2px 7px),linear-gradient(var(--k-primary),var(--k-primary));
  background-size:9px 100%,2px 100%;background-position:0 0,0 0;background-repeat:no-repeat}
.pe2gad>h2::before{display:block!important;width:max-content;font:700 .72rem/1 var(--k-font-body)!important;letter-spacing:.1em;color:var(--k-ink)!important;background:var(--k-pop);padding:.28rem .45rem .24rem;border-radius:2px;margin-bottom:.4rem!important}
.pe2gad{position:relative}
.pe2gad+.pe2gad{padding-top:.4rem}
/* a lock sill between sections: a small stepped rule */
.pe2gad+.pe2gad::before{content:"";display:block;height:12px;max-width:180px;margin:1.6rem 0 0;
  background:linear-gradient(var(--k-border),var(--k-border)) 0 8px/33% 4px no-repeat,linear-gradient(var(--k-border),var(--k-border)) 50% 4px/34% 4px no-repeat,linear-gradient(color-mix(in srgb,var(--k-pop) 70%,var(--k-border)),color-mix(in srgb,var(--k-pop) 70%,var(--k-border))) 100% 0/33% 4px no-repeat}

/* formula: an engraved lock-keeper's plate */
.peu3du{background:var(--k-card);border:1px solid var(--k-border);border-left:5px solid var(--k-pop);border-radius:var(--k-round);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--k-base) 70%,var(--k-card))}
.pex49n{border-left:4px solid var(--k-primary);background:color-mix(in srgb,var(--k-primary) 6%,var(--k-card));border-radius:var(--k-round)}
.pe6w4r{background:var(--k-card);border:1px solid var(--k-border);border-bottom:4px solid color-mix(in srgb,var(--k-primary) 30%,var(--k-border));border-radius:var(--k-round)}

/* lists: bollard markers */
.pe2gad ul{list-style:none;padding-left:1.4rem}
.pe2gad ul>li{position:relative}
.pe2gad ul>li::before{content:"";position:absolute;left:-1.15rem;top:.62em;width:8px;height:8px;border-radius:2px 2px 0 0;background:var(--k-primary);box-shadow:0 2px 0 var(--k-pop)}
.pe2gad ol>li::marker{color:var(--k-primary);font-weight:700}

/* tables: lock schedule */
.pebabh{border-top:3px solid color-mix(in srgb,var(--k-primary) 38%,var(--k-ink))}
.petxqq thead th{color:var(--k-ink);border-bottom:2px solid var(--k-pop)}
.petxqq tbody tr:hover{background:color-mix(in srgb,var(--k-primary) 6%,transparent)}

/* buttons: heavy gate blocks */
.perkgx{background:var(--k-primary);color:#fff;letter-spacing:.02em}
.pesczr{position:relative;background:var(--k-card);border:1px solid var(--k-border);border-bottom:6px solid color-mix(in srgb,var(--k-primary) 22%,var(--k-border));border-radius:var(--k-round)}

/* ---------- FAQ: sluice paddles ---------- */
.pe0irq details{border:1px solid var(--k-border);border-left:5px solid color-mix(in srgb,var(--k-primary) 38%,var(--k-ink));background:var(--k-card);border-radius:var(--k-round);padding:.75rem 1rem;margin:.55rem 0}
.pe0irq details[open]{border-left-color:var(--k-pop)}
.pe0irq summary{color:var(--k-ink)}
.pe0irq summary:hover{color:var(--k-primary)}

/* ---------- guide cards (home) ---------- */
.pe4gtf{border-top:4px solid color-mix(in srgb,var(--k-primary) 38%,var(--k-ink));transition:border-color .2s,transform .2s}
.pe4gtf:hover{border-top-color:var(--k-pop);transform:translateY(-2px)}

/* ---------- blog list: the gauge fills a little higher on each guide ---------- */
.pebp49{gap:1.1rem}
.pe6ju7{position:relative;padding-right:22px;border-left:5px solid color-mix(in srgb,var(--k-primary) 38%,var(--k-ink));transition:border-color .2s}
.pe6ju7::after{content:"";position:absolute;top:10px;bottom:10px;right:8px;width:7px;border-radius:2px;
  background:linear-gradient(to top,var(--k-primary) 0 var(--lvl,25%),var(--k-border) var(--lvl,25%));box-shadow:0 0 0 1px var(--k-border)}
.pebp49>.pe6ju7:nth-child(2)::after{--lvl:45%}
.pebp49>.pe6ju7:nth-child(3)::after{--lvl:65%}
.pebp49>.pe6ju7:nth-child(4)::after{--lvl:85%}
.pebp49>.pe6ju7:nth-child(n+5)::after{--lvl:100%}
.pe6ju7:hover{border-left-color:var(--k-pop)}
.pe6ju7 .pewaec{padding:1rem 0}
.pe6ju7 .pey922{color:var(--k-primary);font-weight:700;font-size:.8rem;letter-spacing:.04em}
@media (max-width:700px){.pe6ju7 .pewaec{padding:.2rem 1rem 1rem}}

/* ---------- article ---------- */
.pea9r5--split{padding:1.4rem 0 1.6rem;border-bottom:4px solid var(--k-border);position:relative}
.pea9r5--split::after{content:"";position:absolute;right:0;bottom:-4px;width:30%;height:4px;background:var(--k-pop)}
.pea9r5 h1{color:var(--k-ink)}
.pedryy{color:var(--k-ink)!important;background:var(--k-pop)!important;padding:.3rem .55rem .26rem;border-radius:2px;letter-spacing:.12em}
.pe9ydn{color:var(--k-muted)}
.pebnga img{border-radius:var(--k-round);border:1px solid var(--k-border);border-bottom:5px solid color-mix(in srgb,var(--k-primary) 38%,var(--k-ink))}

/* article contents: the lock-keeper's dark board (in the flow, never sticky) */
.pexvwi .pe86c9--post{position:static!important;background:color-mix(in srgb,var(--k-primary) 30%,var(--k-ink));color:#fff;border:0;border-left:6px solid var(--k-pop);border-radius:var(--k-round);padding:1.1rem 1.3rem 1.2rem}
.pexvwi .pe86c9--post>strong{color:#fff;font-family:var(--k-f1);letter-spacing:.01em}
.pexvwi .pe86c9--post ol{columns:2;column-gap:2rem;padding-left:1.5rem}
.pexvwi .pe86c9--post li{break-inside:avoid}
.pexvwi .pe86c9--post li::marker{color:var(--k-pop);font-weight:700}
.pexvwi .pe86c9--post a{color:#fff;text-decoration:underline;text-decoration-color:color-mix(in srgb,#fff 40%,transparent)}
.pexvwi .pe86c9--post a:hover{text-decoration-color:var(--k-pop)}
@media (max-width:640px){.pexvwi .pe86c9--post ol{columns:1}}

.pexvwi .pe2gad>p,.pexvwi .pe2gad li{font-size:1.04rem}
.pexvwi blockquote{margin:1.6rem 0;padding:1rem 1.3rem;background:var(--k-card);border:1px solid var(--k-border);border-left:6px solid var(--k-pop);border-radius:var(--k-round);font-family:var(--k-f1);font-size:1.12rem;line-height:1.5;color:var(--k-ink)}

/* ---------- footer: dark canal water climbing a staircase edge ---------- */
.perv42{margin-top:4rem;border-top:0;padding:3.4rem 0 2.6rem;color:color-mix(in srgb,#fff 82%,var(--k-primary));
  background-color:color-mix(in srgb,var(--k-primary) 30%,var(--k-ink));
  background-image:repeating-linear-gradient(0deg,transparent 0 22px,color-mix(in srgb,#fff 5%,transparent) 22px 23px);
  clip-path:polygon(0 30px,25% 30px,25% 20px,50% 20px,50% 10px,75% 10px,75% 0,100% 0,100% 100%,0 100%)}
.perv42 strong{color:#fff;font-family:var(--k-f1);font-size:1.1rem}
.perv42 p{color:color-mix(in srgb,#fff 82%,var(--k-primary))}
.perv42 a{color:#fff;text-decoration:none;border-bottom:1px solid color-mix(in srgb,#fff 35%,transparent)}
.perv42 a:hover{border-bottom-color:var(--k-pop)}
.perv42 nav{gap:.55rem}
.pec11u{border-top:3px solid var(--k-pop);padding-top:1.2rem}

@media (prefers-reduced-motion:reduce){.pe4gtf,.pe6ju7{transition:none}.pe4gtf:hover{transform:none}}