.pf-chrome{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.9rem;line-height:1.5;
  color:inherit;--pf-line:rgba(128,128,128,.34);--pf-fill:rgba(128,128,128,.07)}
.pf-chrome a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pf-chrome-foot{border-top:1px solid var(--pf-line);background:var(--pf-fill);margin-top:40px;padding:22px 16px 26px}
.pf-chrome-foot .pf-inner{max-width:1080px;margin:0 auto}
.pf-chrome-foot h2{font-size:1rem;margin:0 0 4px;color:inherit}
/* No opacity here, and it is the same reasoning as the color:inherit above run
 * the other way. The chrome does not know its host's palette, so it cannot know
 * what an opacity of .78 will produce: the declaration multiplies down a colour
 * chosen by a venture, and a host whose body text already sits near the 4.5:1
 * AA floor lands under it. There is no safe value — a host exactly at 4.5:1
 * fails at any opacity below 1 — which is why this is a deletion rather than a
 * larger number. Measured on the built site, freight-accessorial-auditor
 * rendered this footer at 3.22:1 and cloud-egress-calculator at 3.32:1.
 * What the tint was dimming is also the wrong thing to dim: the no-warranty and
 * no-SLA clauses PRODUCT_PLAYBOOK.md 5b requires, the link to the rest of the
 * portfolio, and the sponsors line. The footer is quieter than the venture's
 * own content already, by its border, fill and position. */
.pf-chrome-foot p{margin:0 0 12px}
.pf-chrome-foot ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px 18px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.pf-chrome-foot li{margin:0}
.pf-ci{margin:0 0 14px}
.pf-ci summary{cursor:pointer;font-weight:600}
.pf-ci pre{overflow-x:auto;margin:0 0 10px;padding:8px 10px;border:1px solid var(--pf-line);border-radius:6px;font-size:.82rem}
.pf-chrome :focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* The site header as a full-width band, as it is on the site's own pages.
 *
 * Every venture centres its body in a 1000-1080px column with ~28px of padding,
 * and the header is the body's first child, so it used to sit as a grey strip
 * inset in that column, floating 28px below the top of the window. The band
 * now meets the top edge (the body's top padding moves below it) and its fill
 * runs to both edges through a spread shadow clipped to the band's height. A
 * shadow, not a 100vw pseudo-element: it adds no scrollable overflow, so no
 * venture page grows a sideways scroll, and the fill stays the host-neutral
 * grey the header always had. A browser without :has() keeps the old top gap.
 *
 * The mark is the one literal colour here, and it is not text: it is the
 * site's logo (pf-site.css draws the same compass-star mark), so it reads as one
 * site on every venture palette instead of a blot of the host's ink. */
body:has(> .pf-chrome-top[data-pfs-head]:first-child){padding-top:0;margin-top:0}
.pf-chrome-top[data-pfs-head]{margin:0 0 26px;border-bottom:0;
  box-shadow:0 0 0 100vmax var(--pfs-head-bg,rgba(128,128,128,.07));clip-path:inset(0 -100vmax)}
.pf-chrome-top .pfs-bar{padding:12px 0}
.pf-chrome-top .pfs-crumbs{padding:0 0 10px}
.pf-chrome-top .pfs-mark{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2220%22%20fill%3D%22%231d2b53%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2216.1%22%20fill%3D%22none%22%20stroke%3D%22%23d4ac58%22%20stroke-width%3D%222.2%22%2F%3E%3Cpolygon%20points%3D%2228.48%2C11.52%2023%2C20%2028.48%2C28.48%2020%2C23%2011.52%2C28.48%2017%2C20%2011.52%2C11.52%2020%2C17%22%20fill%3D%22%23d4ac58%22%2F%3E%3Cpolygon%20points%3D%2220%2C1.2%2022.83%2C17.17%2038.8%2C20%2022.83%2C22.83%2020%2C38.8%2017.17%2C22.83%201.2%2C20%2017.17%2C17.17%22%20fill%3D%22%23faf4e6%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%221.8%22%20fill%3D%22%23d4ac58%22%2F%3E%3C%2Fsvg%3E") center/100% no-repeat}
.pf-chrome-top .pfs-searchlink{padding:4px 14px;border:1px solid var(--pf-line);border-radius:999px}
[data-pfs-head].pf-chrome-top .pfs-searchlink:hover{text-decoration:none;border-color:currentColor}
/* The shop-rates and saved-bids bars (rates.mjs, jobs.mjs) sit under the band
 * in the same column, so they line up with the venture's content rather than
 * their own 18px inset. */
body:has(> .pf-chrome-top[data-pfs-head]:first-child) > :is(.pf-rates,.pf-jobs){padding-left:0;padding-right:0}
body:has(> .pf-chrome-top[data-pfs-head]:first-child) > .pf-jobs .pf-jobs-status:empty{display:none}

/* Site chrome is not part of anything a visitor prints.
 *
 * Nine bid calculators produce a customer proposal (platform/proposal), whose
 * own print stylesheet hides header, main and footer so the homeowner's copy
 * carries the price and not the contractor's wages. That allow-list was written
 * against the venture's own markup — it cannot know about the nav and aside
 * this build injects as siblings of main, so on the published site the
 * customer's quote came out with the site navigation and the "more tools"
 * footer stapled to it. The rule belongs here, with the markup it hides, rather
 * than in each venture: a calculator that adopts the proposal next week is
 * covered without touching it. */
@media print{.pf-chrome{display:none !important}}
input[type=file]{max-width:100%;cursor:pointer}
input[type=file]::file-selector-button{font:inherit;color:inherit;background:rgba(128,128,128,.14);border:1px solid rgba(128,128,128,.55);border-radius:7px;padding:6px 14px;margin-right:12px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:rgba(128,128,128,.26)}

[data-pfs-head]{display:block;position:static;float:none;width:auto;max-width:none;height:auto;margin:0;padding:0;
  border:0;border-bottom:1px solid var(--pfs-line,rgba(128,128,128,.34));box-shadow:none;border-radius:0;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;font-weight:400;line-height:1.4;
  letter-spacing:normal;text-transform:none;text-align:left;
  color:var(--pfs-ink,inherit);background:var(--pfs-head-bg,rgba(128,128,128,.07))}
[data-pfs-head] *{box-sizing:border-box}
[data-pfs-head] a{color:inherit;text-decoration:none;background:none;border-radius:0;padding:0;margin:0}
[data-pfs-head] a:hover,[data-pfs-head] a:focus-visible{text-decoration:underline;text-underline-offset:3px}
[data-pfs-head] :focus-visible{outline:2px solid currentColor;outline-offset:2px}
.pfs-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;max-width:1120px;margin:0 auto;padding:10px 16px}
[data-pfs-head] .pfs-brand{display:inline-flex;align-items:center;gap:9px;font-weight:750;letter-spacing:-.01em;white-space:nowrap}
.pfs-mark{display:inline-block;width:22px;height:22px;border-radius:50%;flex:none;background:var(--pfs-mark,currentColor)}
.pfs-nav{display:flex;flex-wrap:wrap;gap:4px 16px;flex:1 1 auto;min-width:0}
[data-pfs-head] .pfs-nav a{display:inline-block;padding:4px 0;font-weight:600;color:var(--pfs-muted,inherit);
  border-bottom:2px solid transparent}
[data-pfs-head] .pfs-nav a[aria-current="page"]{color:var(--pfs-ink,inherit);border-bottom-color:var(--pfs-accent,currentColor)}
.pfs-search{position:relative;display:flex;margin:0;padding:0;border:0;flex:0 1 236px;min-width:0}
.pfs-search input{flex:1 1 auto;min-width:0;width:100%;font:inherit;font-size:14px;padding:7px 12px 7px 34px;margin:0;border-radius:999px;
  border:1px solid var(--pfs-line,rgba(128,128,128,.5));background:var(--pfs-panel,transparent);color:inherit;
  transition:border-color .15s ease,box-shadow .15s ease}
.pfs-search input:focus{outline:none;border-color:var(--pfs-accent,currentColor);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pfs-accent,currentColor) 22%,transparent)}
.pfs-search button{position:absolute;left:3px;top:50%;transform:translateY(-50%);width:28px;height:28px;padding:0;margin:0;
  border:0;border-radius:999px;background:none;color:var(--pfs-muted,inherit);cursor:pointer}
.pfs-search button::before{content:"";position:absolute;inset:6px;background:currentColor;
  -webkit-mask:var(--pfs-glass) center/contain no-repeat;mask:var(--pfs-glass) center/contain no-repeat}
.pfs-search{--pfs-glass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E")}
[data-pfs-head] .pfs-searchlink{display:none;font-weight:600}
[data-pfs-head] .pfs-searchlink.pfs-always{display:inline-block}
.pfs-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pfs-crumbs{display:block;max-width:1120px;margin:0 auto;padding:0 16px 9px;font-size:13px;color:var(--pfs-muted,inherit);
  overflow-wrap:anywhere}
[data-pfs-head] .pfs-crumbs a{text-decoration:underline;text-underline-offset:2px}
.pfs-sep{margin:0 7px}
@media (max-width:600px){
  /* One line on a phone: the current page's title (often a sentence) is cut with an ellipsis instead of wrapping to three lines. */
  .pfs-crumbs{display:flex;flex-wrap:nowrap;align-items:baseline;overflow:hidden;white-space:nowrap}
  .pfs-crumbs>a,.pfs-crumbs>.pfs-sep{flex:0 0 auto}
  .pfs-crumbs>[aria-current]{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:1080px){
  .pfs-search{display:none}
  [data-pfs-head] .pfs-searchlink{display:inline-block}
}
@property --pfs-fade{syntax:'<length>';inherits:false;initial-value:28px}
@keyframes pfs-fade-out{to{--pfs-fade:0px}}
@media (max-width:720px){
  .pfs-bar{gap:6px 14px;padding:9px 16px}
  [data-pfs-head] .pfs-brand{flex:1 1 auto}
  .pfs-search{display:none}
  [data-pfs-head] .pfs-searchlink{display:inline-block}
  .pfs-nav{order:3;flex-basis:100%;gap:2px 18px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;margin-right:-16px;padding-right:28px;
    --pfs-fade:28px;
    -webkit-mask-image:linear-gradient(90deg,black calc(100% - var(--pfs-fade)),transparent);
            mask-image:linear-gradient(90deg,black calc(100% - var(--pfs-fade)),transparent)}
  @supports (animation-timeline:scroll()){
    .pfs-nav{animation:pfs-fade-out linear both;animation-timeline:scroll(self inline);animation-range:calc(100% - 40px) 100%}
  }
  .pfs-nav::-webkit-scrollbar{display:none}
  [data-pfs-head] .pfs-nav a{flex:none;white-space:nowrap}
}
@media print{[data-pfs-head]{display:none !important}}

nav.pf-chrome.pf-chrome-top[data-pfs-head],aside.pf-chrome.pf-chrome-foot{
  --pfs-ink:#1d2530;--pfs-muted:#4a5666;--pfs-line:#d3dce6;--pfs-accent:#1f4e8c;--pfs-panel:#ffffff;
  --pfs-head-bg:#ffffff;--pfs-foot-bg:#f6f8fb;--pfs-mark:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2220%22%20fill%3D%22%231d2b53%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2216.1%22%20fill%3D%22none%22%20stroke%3D%22%23d4ac58%22%20stroke-width%3D%222.2%22%2F%3E%3Cpolygon%20points%3D%2228.48%2C11.52%2023%2C20%2028.48%2C28.48%2020%2C23%2011.52%2C28.48%2017%2C20%2011.52%2C11.52%2020%2C17%22%20fill%3D%22%23d4ac58%22%2F%3E%3Cpolygon%20points%3D%2220%2C1.2%2022.83%2C17.17%2038.8%2C20%2022.83%2C22.83%2020%2C38.8%2017.17%2C22.83%201.2%2C20%2017.17%2C17.17%22%20fill%3D%22%23faf4e6%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%221.8%22%20fill%3D%22%23d4ac58%22%2F%3E%3C%2Fsvg%3E") center/100% no-repeat;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
  text-shadow:none;letter-spacing:normal;text-transform:none;text-align:left}
nav.pf-chrome.pf-chrome-top[data-pfs-head][data-pfs-theme="dark"],aside.pf-chrome.pf-chrome-foot[data-pfs-theme="dark"]{
  --pfs-ink:#e8eef5;--pfs-muted:#a2b0c0;--pfs-line:#2a343f;--pfs-accent:#9dbfe8;--pfs-panel:#171e27;
  --pfs-head-bg:#171e27;--pfs-foot-bg:#121821;--pfs-mark:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2220%22%20fill%3D%22%231d2b53%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2216.1%22%20fill%3D%22none%22%20stroke%3D%22%23d4ac58%22%20stroke-width%3D%222.2%22%2F%3E%3Cpolygon%20points%3D%2228.48%2C11.52%2023%2C20%2028.48%2C28.48%2020%2C23%2011.52%2C28.48%2017%2C20%2011.52%2C11.52%2020%2C17%22%20fill%3D%22%23d4ac58%22%2F%3E%3Cpolygon%20points%3D%2220%2C1.2%2022.83%2C17.17%2038.8%2C20%2022.83%2C22.83%2020%2C38.8%2017.17%2C22.83%201.2%2C20%2017.17%2C17.17%22%20fill%3D%22%23faf4e6%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%221.8%22%20fill%3D%22%23d4ac58%22%2F%3E%3C%2Fsvg%3E") center/100% no-repeat}
nav.pf-chrome.pf-chrome-top[data-pfs-head]{display:block;position:relative;z-index:30;float:none;inset:auto;
  box-sizing:border-box;height:auto;min-height:0;max-width:none;margin:0;padding:0;overflow-x:clip;
  color:var(--pfs-ink);background:var(--pfs-head-bg);border:0;border-bottom:1px solid var(--pfs-line);
  box-shadow:0 1px 0 rgba(15,23,42,.03);border-radius:0;font-size:15px;line-height:1.4;font-weight:400}
nav.pf-chrome.pf-chrome-top[data-pfs-head] a{color:inherit;font:inherit;font-weight:inherit;text-decoration:none;background:none;box-shadow:none;border:0}
nav.pf-chrome.pf-chrome-top[data-pfs-head] .pfs-brand{font-weight:750;color:var(--pfs-ink)}
nav.pf-chrome.pf-chrome-top[data-pfs-head] .pfs-nav a{color:var(--pfs-muted);font-weight:600;border-bottom:2px solid transparent}
nav.pf-chrome.pf-chrome-top[data-pfs-head] .pfs-nav a[aria-current="page"]{color:var(--pfs-ink);border-bottom-color:var(--pfs-accent)}
nav.pf-chrome.pf-chrome-top[data-pfs-head] .pfs-crumbs{color:var(--pfs-muted)}
nav.pf-chrome.pf-chrome-top[data-pfs-head] .pfs-crumbs a{text-decoration:underline;text-underline-offset:2px}
nav.pf-chrome.pf-chrome-top[data-pfs-head] .pfs-searchlink.pfs-always{padding:5px 12px;border:1px solid var(--pfs-line);
  border-radius:999px;font-weight:600;color:var(--pfs-ink)}
nav.pf-chrome.pf-chrome-top[data-pfs-head] .pfs-mark{background:var(--pfs-mark);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
aside.pf-chrome.pf-chrome-foot{display:block;position:static;float:none;max-width:none;box-sizing:border-box;
  color:var(--pfs-ink);background:var(--pfs-foot-bg);border:0;border-top:1px solid var(--pfs-line);border-radius:0;
  box-shadow:none;margin-left:0;margin-right:0;font-size:15px;line-height:1.55}
aside.pf-chrome.pf-chrome-foot h2{font-family:inherit;font-size:1.05rem;font-weight:750;letter-spacing:-.01em;color:var(--pfs-ink);
  display:flex;align-items:center;gap:9px}
aside.pf-chrome.pf-chrome-foot h2::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;background:var(--pfs-mark)}
aside.pf-chrome.pf-chrome-foot p,aside.pf-chrome.pf-chrome-foot li{color:var(--pfs-ink)}
aside.pf-chrome.pf-chrome-foot a{color:var(--pfs-accent);font-weight:550;text-decoration:underline;text-underline-offset:2px}
aside.pf-chrome.pf-chrome-foot>details.pf-embed-offer{max-width:1080px;margin:0 auto;padding:0 16px}

/* Reflow (WCAG 1.4.10). See platform/pages/reflow.mjs. */
.pf-table-scroll{overflow-x:auto;max-width:100%}
/* The shadow appears only once the box is really scrolling: SCROLL_A11Y_SCRIPT
   sets this attribute from a measured scrollWidth, and removes it when the
   table fits again. Without some edge, a phone visitor has no way to know the
   sixth column exists. Inset and behind the cells, so it cannot sit under any
   text and change its contrast. */
.pf-table-scroll[data-pf-scrollable]{box-shadow:inset -12px 0 8px -8px rgba(0,0,0,.28)}
/* Paper has no viewport to scroll. The customer's proposal prints from these
   pages and every column of it has to be on the sheet. */
@media print{.pf-table-scroll{overflow-x:visible;box-shadow:none}}
/* Cause (3): a <pre> whose longest line does not fit. white-space:pre is the
   element's default and it forbids wrapping outright, so one long command holds
   the whole document open at that width — and no word-break a venture wrote can
   rescue it, because breaking only applies where wrapping is permitted at all.
   That combination is why this looks fixed in the source and is not:
   vendor-change-watch sets word-break:break-word on the very block that was
   measured at 649px inside a 360px window on 2026-09-06 (sideways.mjs, the only
   page of 720 still scrolling).

   Scrolled rather than wrapped, which is the choice .pf-table-scroll makes
   above and for the same reason: an install command has to stay copyable as one
   line and a diff has to keep its columns, so re-flowing the text would trade a
   layout bug for a correctness one. WCAG 1.4.10 allows exactly this — content
   needing a two-dimensional layout may scroll, so long as the *page* does not.

   No class to apply and no build pass to run: a <pre> is already the element
   that means "preformatted", so the next venture to paste a command block is
   covered on the day it ships rather than the day someone measures it. The
   keyboard tab stop comes free, because SCROLL_A11Y_SCRIPT finds a scrolling
   box by its computed overflow-x rather than by class. */
:where(pre){overflow-x:auto;max-width:100%}
/* Paper cannot scroll, so here the trade runs the other way: wrap the command
   rather than crop it at the edge of the sheet. pre-wrap still preserves
   every space and newline, so an indented block prints as written. */
@media print{:where(pre){overflow-x:visible;white-space:pre-wrap}}
/* Cause (2): a grid or flex track that will not shrink under its content. A
   grid item's automatic minimum size is its min-content width, so one <input>
   at its 20-character default, or one table the rule above just made
   scrollable, holds the whole column open and the page with it.

   Freed only for the boxes that hold one of those two things, and only on a
   narrow viewport. The blunt version of this rule — min-width:0 on everything —
   was measured first and was worse than the bug: it collapsed the term column
   of every <dl> laid out as a grid, so 372 result labels across 70 pages
   painted over their own values. A definition list holds neither a control nor
   a table, so it no longer matches.

   Zero specificity throughout, so any rule a venture wrote wins; a browser with
   no :has() ignores the second rule and keeps today's layout rather than
   getting a broken one. */
@media (max-width:640px){
  :where(input,select,textarea){min-width:0;max-width:100%}
  :where(*:has(input,select,textarea,.pf-table-scroll)){min-width:0}
  /* And the page's own layout columns, which is where a two-column
     desktop layout meets a one-column phone. Freeing a box is not the same
     as freeing what is inside it: a <dl> here may shrink, and its term
     column still holds at the width of the longest term, because the <dt>
     keeps its own automatic minimum. That is the whole difference between
     this rule and the blunt one described above. */
  :where(body>*,main,section,article,aside,header,footer,form,fieldset){min-width:0}
}

/* Cause (4): a heading holding one unbreakable token. Measured 2026-09-10 on
   security-headers-check/vs-securityheaders.html, the only page of 929 still
   scrolling: 365px inside a 360px window. The whole 5px was the <h1> "This
   checker vs. Security Headers (securityheaders.com)" — a bare domain has no
   space and no hyphen, so there is nowhere for the line to break, and the
   heading's content ran 29px past its own box with overflow:visible handing
   the difference to the document.

   Headings are where this happens because they are the one place a product
   name, a domain or a header field is written out at 2rem with no wrapper: a
   comparison page's title names the competitor, and the competitor is a
   hostname. Body copy has the same hazard and far more room to absorb it.

   overflow-wrap:break-word rather than 'anywhere': break-word breaks a long
   word only when it would otherwise overflow, and leaves the line-breaking of
   text that fits alone, so a heading that was already fine is laid out
   identically. 'anywhere' additionally shrinks the min-content width, which
   changes how flex and grid size the heading's parent — a layout change on
   every page to fix five pixels on one.

   Not restricted to a narrow viewport, and not conditional on measuring the
   page: a token too long for the line is too long at any width, and the next
   comparison page to name a hostname gets this on the day it ships. Zero
   specificity, so a venture that set its own value keeps it. */
:where(h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}
/* Cause (4) again, in body copy rather than a heading. Measured 2026-09-17 on
   openapi-breaking-change-check/vs-oasdiff.html, 4px over at 360px: an inline
   <code>--fail-on-breaking</code> flag inside a <p>, sitting outside any
   table or <pre>, with nowhere to break. "Body copy has the same hazard and
   far more room to absorb it" was already written above the day the heading
   fix landed; this is that hazard, not a new one. Applies to <pre> code too,
   harmlessly: the :where(pre) rule above already makes those boxes scroll
   instead of wrap, and pre's own white-space:pre means overflow-wrap never
   gets a chance to act there, so a command block's copy-pasteable single
   line is untouched. */
:where(code){overflow-wrap:break-word}