/* Cord & Tank: ledger skin. Written fresh from LAYOUT_RULES.md and SITE_IDENTITY_cord_and_tank.md. */

@font-face { font-family: "Fraunces"; src: url("fonts/carve-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/grain-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/grain-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/grain-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light dark;
  --carve: "Fraunces", Georgia, "Times New Roman", serif;
  --grain: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --birch: #f4ead8;      /* page */
  --sawdust: #e6d4b4;    /* the deeper shade either side of the sheet */
  --kindling: #fffaf0;   /* cards and tool boxes */
  --char: #2b1d12;       /* text */
  --soot: #5a412d;       /* quieter text */
  --walnut: #5b3a22;     /* links, tally bars */
  --lintel: #5b3a22;     /* header band */
  --lintel-low: #452b18; /* nav strip and footer */
  --on-lintel: #fff8ec;
  --flame: #a8461a;      /* buttons */
  --on-ember: #ffffff;
  --rule: #d9c3a3;
  --log: #c89b6d;
  --field: #ffffff;
  --field-edge: #8a6d50;
  --ok: #3d6b2f;
  --mind: #8a5200;
  --halt: #9e2b1e;
  --focus: #1f5fbf;
}
@media (prefers-color-scheme: dark) {
  :root {
    --birch: #19120d; --sawdust: #0e0a07; --kindling: #241a13; --char: #f3e8d6; --soot: #d6c3a8;
    --walnut: #e9bf91; --lintel: #3a2414; --lintel-low: #2a190d; --on-lintel: #fff1dc;
    --flame: #e5834a; --on-ember: #1a0f07; --rule: #4d3b2c; --log: #b9895c; --field: #2e231a; --field-edge: #a88a6a;
    --ok: #9cc98a; --mind: #e8b25a; --halt: #f19583; --focus: #8ab8ff;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--sawdust); }
body {
  margin: 0 auto; max-width: 72rem; min-height: 100vh; min-height: 100dvh;
  background: var(--birch); color: var(--char);
  font-family: var(--grain); font-size: 1.25rem; line-height: 1.6;
  display: flex; flex-direction: column;
}
@media (min-width: 48rem) { body { font-size: 1.3125rem; } }

h1, h2, h3 { font-family: var(--carve); font-weight: 700; line-height: 1.2; color: var(--char); overflow-wrap: break-word; margin: 1.6em 0 0.5em; }
h1 { font-size: clamp(1.9rem, 5.5vw, 2.6rem); margin-top: 0.4em; }
h2 { font-size: clamp(1.45rem, 4vw, 1.85rem); }
h3 { font-size: 1.3rem; }
p, ul, ol { margin: 0 0 1em; max-width: 60ch; }
a { color: var(--walnut); text-underline-offset: 0.18em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
img, svg, iframe, video { max-width: 100%; height: auto; }
strong { font-weight: 700; }

.hop { position: absolute; left: -999rem; }
.hop:focus { left: 1rem; top: 1rem; z-index: 5; background: var(--kindling); padding: 0.6rem 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* header (bigger name and nav, Kevin 11 Nov 2026): phones first, computers from 40rem */
.lintel { background: var(--lintel); color: var(--on-lintel); }
.lintel-in { padding: 0.85rem 1rem; }
.sign { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--on-lintel); text-decoration: none; min-height: 2.75rem; }
.sign img { flex: none; width: 3rem; height: 3rem; }
.sign-words { display: flex; flex-direction: column; min-width: 0; }
.sign-name { font-family: var(--carve); font-size: 1.75rem; line-height: 1.1; }
.sign-line { font-size: 1.125rem; line-height: 1.35; }
.beam { background: var(--lintel-low); }
.beam ul { list-style: none; margin: 0; max-width: none; padding: 0 1rem; display: flex; flex-wrap: wrap; column-gap: 1.1rem; row-gap: 0; }
.beam a, .beam span { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--on-lintel); font-size: 1.125rem; text-decoration: none; }
.beam a:hover { text-decoration: underline; }
@media (min-width: 40rem) {
  .lintel-in { padding: 1rem 2.5rem; }
  .sign { gap: 1rem; }
  .sign img { width: 4rem; height: 4rem; }
  .sign-name { font-size: 2.5rem; }
  .sign-line { font-size: 1em; }
  .beam ul { padding: 0 2.5rem; column-gap: 1.75rem; }
  .beam a, .beam span { font-size: 1em; min-height: 3.5rem; }
}

/* main */
.hearth { flex: 1; padding: 1rem 1rem 2.5rem; }
@media (min-width: 48rem) { .hearth { padding: 1.5rem 2.5rem 3rem; } }
.steps { font-size: 1.0625rem; color: var(--soot); display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.steps a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.checked { color: var(--soot); font-size: 1.0625rem; margin-top: -0.4em; }
.first-say { font-size: 1.1em; }
.fine { font-size: 1.0625rem; color: var(--soot); }

/* the tally (calculator box) */
.tally { background: var(--kindling); border: 2px solid var(--rule); border-left: 0.5rem solid var(--walnut); border-radius: 4px;
  padding: 1rem; margin: 1.25rem 0 2rem; max-width: 50rem;
 }
@media (min-width: 48rem) { .tally { padding: 1.25rem 1.5rem; } }
.tally-row { border: 0; margin: 0 0 1rem; padding: 0.75rem; background: var(--kindling); border-radius: 4px; outline: 1px solid var(--rule); min-width: 0; }
.tally-row legend { font-family: var(--carve); font-size: 1.15rem; padding: 0 0.3rem; }
.split { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 0.6rem 0.9rem; }
.split > * { min-width: 0; }
[data-extra]:not(:empty) { margin-top: 0.6rem; }
.tally label { display: block; font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.2rem; }
.tally .hint { display: block; font-size: 1.0625rem; color: var(--soot); margin-top: 0.2rem; line-height: 1.4; }
.tally input, .tally select, .lend textarea {
  width: 100%; min-height: 2.75rem; font: inherit; font-size: max(1.125rem, 16px);
  color: var(--char); background: var(--field); border: 1px solid var(--field-edge); border-radius: 4px; padding: 0.4rem 0.6rem;
  -webkit-appearance: none; appearance: none; }
.tally select { background-image: linear-gradient(45deg, transparent 50%, var(--char) 50%), linear-gradient(135deg, var(--char) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 50%, calc(100% - 0.75rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2rem; }
.tally-acts { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.kindle, .kindle-quiet { font: inherit; font-weight: 700; min-height: 2.75rem; padding: 0.45rem 1.2rem; border-radius: 4px; cursor: pointer; }
.kindle { background: var(--flame); color: var(--on-ember); border: 2px solid var(--flame); }
.kindle-quiet { background: transparent; color: var(--walnut); border: 2px solid var(--walnut); }
.know { color: var(--walnut); display: block; }
.drop { font: inherit; font-size: 1.0625rem; background: none; border: 0; color: var(--halt); text-decoration: underline; min-height: 2.75rem; padding: 0 0.25rem; cursor: pointer; }
.totals:empty { display: none; }
.totals { margin-top: 1.25rem; border-top: 3px double var(--walnut); padding-top: 0.5rem; }
.totals h3 { margin-top: 0.5em; }
.totals ol { padding-left: 1.4rem; }
.totals li { margin-bottom: 0.6rem; }
.total-fig { font-family: var(--carve); font-size: clamp(1.3rem, 5vw, 1.6rem); display: block; overflow-wrap: anywhere; }
.trouble { color: var(--halt); }
.gauge { display: flex; width: 100%; height: 1rem; margin: 0.35rem 0 0.2rem; background: var(--birch); border-radius: 3px; overflow: hidden; }
.gauge-fill { background: var(--flame); }
.gauge-span { background: var(--flame); opacity: 0.35; }
@media (prefers-reduced-motion: no-preference) { .gauge-fill, .gauge-span { animation: grow 0.5s ease-out; transform-origin: left; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* cards and lists */
.shelf { list-style: none; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.9rem; }
.shelf-card { background: var(--kindling); border: 2px solid var(--rule); border-left: 0.4rem solid var(--walnut); border-radius: 4px; padding: 0.75rem 1rem; min-width: 0; }
.shelf-card h3 { margin: 0 0 0.25rem; }
.shelf-card h3 a, .shelf-card h3 span { display: inline-flex; align-items: center; min-height: 2.75rem; }
.shelf-card p { margin: 0; }
.asked { padding-left: 1.3rem; }
.asked li { min-height: 2.75rem; display: list-item; padding-block: 0.3rem; }

.ledger { border-left: 0.4rem solid var(--log); background: var(--kindling); padding: 0.75rem 1rem; border-radius: 4px; margin: 0 0 1.2rem; max-width: 65ch; }
.ledger ul { margin-bottom: 0; }

.scroll-box { overflow-x: auto; max-width: 100%; margin: 0 0 1.5rem; position: relative; }
.ruled { border-collapse: collapse; min-width: min(20rem, 100%); width: 100%; }
.ruled th, .ruled td { text-align: left; vertical-align: top; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--rule); }
.ruled thead th { background: var(--walnut); color: var(--birch); font-size: 1.0625rem; }

.seal { display: inline-block; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; padding: 0 0.4rem; border: 2px solid currentColor; border-radius: 3px; overflow-wrap: anywhere; }
.seal-gov { color: var(--ok); }
.seal-alt { color: var(--mind); }
.seal-open { color: var(--halt); }
.away { width: 0.7em; height: 0.7em; margin-left: 0.2em; fill: none; stroke: currentColor; stroke-width: 1.6; vertical-align: baseline; }

.warn-box { border: 2px solid var(--rule); border-left: 0.5rem solid var(--flame); background: var(--kindling); border-radius: 4px; padding: 0.5rem 1rem 0.25rem; margin: 2rem 0; max-width: 50rem; }
.warn-box h2 { margin-top: 0.4em; display: flex; align-items: center; gap: 0.5rem; }
.warn-box h2 svg { width: 1.3rem; height: 1.3rem; fill: var(--flame); flex: none; }

.lend textarea { min-height: 7rem; font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.lend-h1 { font-size: 1.5rem; }

/* footer (full width on computers, Kevin 11 Nov 2026): the footer line and privacy line in one column, the two
   link rows in the others; one column on phones. All footer text at the small-print size. */
.chimney { background: var(--lintel-low); color: var(--on-lintel); }
.chimney-in { padding: 1.5rem 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem 2.5rem; }
.chimney-in > * { min-width: 0; }
.chimney p { font-size: 1.0625rem; }
.chimney-say p:last-child { margin-bottom: 0.5rem; }
.flue-head { font-family: var(--carve); font-size: 1.0625rem; line-height: 1.3; color: var(--on-lintel); margin: 0.75rem 0 0; display: flex; align-items: center; gap: 0.5rem; }
.flue-head::before { content: ""; flex: none; width: 0.85rem; height: 0.25rem; background: var(--log); border-radius: 1px; }
.flue { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; column-gap: 1.25rem; row-gap: 0; max-width: none; }
.flue li { min-width: 0; }
.flue a, .flue span { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--on-lintel); font-size: 1.0625rem; }
@media (min-width: 48rem) {
  .chimney-in { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); padding: 2rem 2.5rem; align-items: start; }
  .chimney-say { grid-row: span 2; }
  .flue-head { margin-top: 0; }
  .flue-row + .flue-row .flue-head { margin-top: 0.75rem; }
}
@media (min-width: 64rem) {
  /* about 63 characters a line in the first column; each link row stands in its own column */
  .chimney-in { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr); padding: 2.25rem 3.5rem 2.25rem 2.5rem; }
  .chimney-say { grid-row: auto; }
  .flue-row + .flue-row .flue-head { margin-top: 0; }
  .flue { flex-direction: column; }
}

/* fold-outs: the sources list and the embed code start closed (Kevin, 11 Nov 2026); latch.js opens one when
   its heading is linked to. The rows inside the sources list are unchanged. */
.ledger-fold, .lend-fold { max-width: 50rem; }
.fold-pull { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.65rem 1rem; cursor: pointer; list-style: none;
  background: var(--kindling); border: 2px solid var(--rule); border-left: 0.4rem solid var(--walnut); border-radius: 4px; color: var(--walnut); font-weight: 700; }
.fold-pull::-webkit-details-marker { display: none; }
.fold-pull::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; margin: 0 0.15rem 0 0.1rem; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); }
[open] > .fold-pull::before { transform: rotate(45deg); }
.fold-pull:hover .fold-words { text-decoration: underline; text-underline-offset: 0.18em; }
.fold-words { min-width: 0; overflow-wrap: anywhere; }
[open] > .fold-pull { margin-bottom: 1rem; }
.lend .fold-pull + p { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { .fold-pull::before { transition: transform 0.15s ease-out; } }

@media print {
  .lintel, .beam, .chimney, .tally-acts, .lend, .hop, .margin-ledger { display: none; }
  html, body { background: #fff; color: #000; }
  .fold-pull { border: 0; padding: 0; background: none; color: inherit; }
  .fold-pull::before { display: none; }
}
/* print the sources list open (its own rule: a browser that doesn't know ::details-content skips only this one; latch.js covers it) */
@media print { .ledger-fold::details-content { content-visibility: visible; display: block; } }

/* tool proof line, drawings, the figures ledger (added 11 Nov 2026) */
.proof { font-size: 1.0625rem; color: var(--soot); border-left: 0.25rem solid var(--log); padding-left: 0.6rem; max-width: 65ch; }
.tally-lines { display: grid; grid-template-columns: minmax(0, max-content) minmax(min(6rem, 42%), 1fr); gap: 0.2rem 1rem; align-items: baseline; margin: 0.5rem 0 1rem; }
.tally-lines dt { font-weight: 700; overflow-wrap: anywhere; }
.tally-lines dd { margin: 0; }
.drawing { margin: 0.5rem 0 1rem; }
.stack-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.stack-block { display: block; width: 3rem; height: 2.2rem; border: 2px solid var(--walnut); border-radius: 3px; background: var(--birch); overflow: hidden; }
.stack-fill { display: block; height: 100%; background: var(--log); }
.tank-shell { position: relative; display: block; height: 1.6rem; border: 2px solid var(--walnut); border-radius: 0.8rem; background: var(--birch); overflow: hidden; min-width: 0; }
.tank-level { display: block; height: 100%; background: var(--flame); opacity: 0.85; }
.tank-max { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--char); }
.sketch { margin: 1.25rem 0 1.75rem; max-width: 50rem; }
.sketch svg { height: auto; display: block; }
.sketch figcaption { font-size: 1.0625rem; color: var(--soot); margin-top: 0.4rem; }
.v-stack { fill: var(--log); stroke: var(--walnut); stroke-width: 2; }
.v-logs circle { fill: none; stroke: var(--walnut); stroke-width: 1.5; }
.v-tank { fill: var(--flame); stroke: var(--walnut); stroke-width: 2; }
.v-cut { stroke: var(--walnut); stroke-width: 2; stroke-dasharray: 5 4; }
.v-label { font-family: var(--carve); font-size: 17px; fill: var(--char); }
.v-small { font-family: var(--grain); font-size: 17px; fill: var(--soot); }
.bars { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: 0.45rem; }
.bars li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 4.5rem; gap: 0.6rem; align-items: center; }
@media (max-width: 30rem) { .bars li { grid-template-columns: minmax(0, 1fr) 4.5rem; } .bars .gauge, .bars .tank-shell { grid-column: 1 / -1; grid-row: 2; } }
.bar-name { font-size: 1.0625rem; overflow-wrap: anywhere; }
.bar-fig { font-size: 1.0625rem; font-weight: 700; }
.bars .gauge { margin: 0; }
.qa-pair h3 { margin: 1.1em 0 0.3em; font-size: 1.2rem; }
.hearth h2[id] { scroll-margin-top: 1rem; }
.warn-inline { padding-left: 1.2rem; }
.next-sums ul { padding-left: 1.2rem; }
.next-sums li { padding-block: 0.3rem; }
.ledger-box { border-top: 3px double var(--walnut); margin-top: 2.5rem; padding-top: 0.5rem; }
.ledger-list { list-style: none; padding: 0; max-width: 50rem; }
.ledger-list li { border-bottom: 1px solid var(--rule); }
.ledger-list summary { cursor: pointer; padding-block: 0.65rem; min-height: 2.75rem; font-size: 1.0625rem; overflow-wrap: anywhere; }
.ledger-list details p { font-size: 1.0625rem; }
.ledger-name { font-weight: 700; }
.pieces { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; }
.pieces-base { align-items: flex-end; }
.piece { min-width: 0; max-width: 100%; }
.piece svg { width: auto; max-width: 100%; height: auto; display: block; }
.piece-name { font-family: var(--carve); font-size: 1.0625rem; margin: 0.3rem 0 0; }
.piece-fig { font-size: 1.0625rem; color: var(--soot); margin: 0; }

/* the margin ledger: a side column on wide screens only (11 Nov 2026). Phones and tablets never see it. */
.woodshed { flex: 1; display: flex; flex-direction: column; }
.margin-ledger { display: none; }
@media (min-width: 64rem) {
  /* from 1,024px (Kevin, 11 Nov 2026; was 68rem). The text column is at most 39rem (about 625px at 21px, about 70
     characters a line): the gap takes up the rest, from 2.5rem at 1,024px (about 61 characters) to 7rem on the
     full sheet. A faint ledger rule runs down the middle of the gap. */
  .woodshed-two { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; column-gap: clamp(2.5rem, 100% - 59rem, 7rem); align-items: start; padding: 1.5rem 3.5rem 3rem 2.5rem;
    background-image: linear-gradient(var(--rule), var(--rule)); background-repeat: no-repeat; background-size: 1px calc(100% - 4.5rem);
    background-position: right calc(23.5rem + clamp(1.25rem, (100% - 65rem) / 2, 3.5rem)) top 1.5rem; }
  .woodshed-two > .hearth { padding: 0; min-width: 0; }
  /* the main column is the text column: prose, tables, tools and drawings all share its width */
  .woodshed-two .hearth p, .woodshed-two .hearth ul, .woodshed-two .hearth ol,
  .woodshed-two .tally, .woodshed-two .warn-box, .woodshed-two .sketch, .woodshed-two .ledger,
  .woodshed-two .ledger-list, .woodshed-two .ledger-fold, .woodshed-two .lend-fold { max-width: none; }
  /* small print keeps its own shorter measure (60ch of its own size, about 70 characters) */
  .woodshed-two .hearth .fine, .woodshed-two .hearth .proof, .woodshed-two .hearth .trouble, .woodshed-two .ledger-list p, .woodshed-two .sketch figcaption { max-width: 60ch; }
  .margin-ledger {
    display: block; position: sticky; top: 1rem; min-width: 0;
    max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto;
    margin-top: 2.75rem; background: var(--kindling); border: 2px solid var(--rule); border-left: 0.5rem solid var(--walnut);
    border-radius: 4px; padding: 0.25rem 1rem 0.75rem; font-size: 1.125rem; line-height: 1.5;
  }
}
.margin-entry + .margin-entry { border-top: 3px double var(--walnut); margin-top: 0.6rem; }
.margin-head { font-size: 1.2rem; margin: 0.7rem 0 0.35rem; display: flex; align-items: center; gap: 0.5rem; }
.margin-head::before { content: ""; flex: none; width: 0.85rem; height: 0.25rem; background: var(--flame); border-radius: 1px; }
.margin-index, .margin-sums { list-style: none; padding: 0; margin: 0; max-width: none; }
.margin-index li, .margin-sums li { border-bottom: 1px solid var(--rule); }
.margin-index li:last-child, .margin-sums li:last-child { border-bottom: 0; }
.margin-index a, .margin-sums a, .margin-sums span { display: flex; align-items: center; min-height: 2.75rem; padding-block: 0.3rem; line-height: 1.35; text-decoration-thickness: 1px; }
.margin-sums a { color: var(--walnut); font-weight: 700; }
.margin-figures { margin: 0; }
.margin-fig { padding: 0.4rem 0; border-bottom: 1px solid var(--rule); }
.margin-fig:last-child { border-bottom: 0; }
.margin-fig dt { color: var(--soot); line-height: 1.35; }
.margin-fig dd { margin: 0.1rem 0 0; line-height: 1.35; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; }
.margin-sum { font-family: var(--carve); font-weight: 700; font-size: 1.2rem; color: var(--char); overflow-wrap: anywhere; min-width: 0; }
.margin-fig .seal { font-size: 1.0625rem; }

/* print, whatever the paper width: one column, no margin ledger (kept last so the wide-screen rules above can't win) */
@media print {
  .woodshed-two { display: block; padding: 0; background: none; }
  .margin-ledger { display: none; }
}

/* widths for drawn bars and gauges (CSP: no inline styles) */
.w0{width:0%}.m0{left:0%}.w1{width:1%}.m1{left:1%}.w2{width:2%}.m2{left:2%}.w3{width:3%}.m3{left:3%}.w4{width:4%}.m4{left:4%}.w5{width:5%}.m5{left:5%}.w6{width:6%}.m6{left:6%}.w7{width:7%}.m7{left:7%}.w8{width:8%}.m8{left:8%}.w9{width:9%}.m9{left:9%}.w10{width:10%}.m10{left:10%}.w11{width:11%}.m11{left:11%}.w12{width:12%}.m12{left:12%}.w13{width:13%}.m13{left:13%}.w14{width:14%}.m14{left:14%}.w15{width:15%}.m15{left:15%}.w16{width:16%}.m16{left:16%}.w17{width:17%}.m17{left:17%}.w18{width:18%}.m18{left:18%}.w19{width:19%}.m19{left:19%}.w20{width:20%}.m20{left:20%}.w21{width:21%}.m21{left:21%}.w22{width:22%}.m22{left:22%}.w23{width:23%}.m23{left:23%}.w24{width:24%}.m24{left:24%}.w25{width:25%}.m25{left:25%}.w26{width:26%}.m26{left:26%}.w27{width:27%}.m27{left:27%}.w28{width:28%}.m28{left:28%}.w29{width:29%}.m29{left:29%}.w30{width:30%}.m30{left:30%}.w31{width:31%}.m31{left:31%}.w32{width:32%}.m32{left:32%}.w33{width:33%}.m33{left:33%}.w34{width:34%}.m34{left:34%}.w35{width:35%}.m35{left:35%}.w36{width:36%}.m36{left:36%}.w37{width:37%}.m37{left:37%}.w38{width:38%}.m38{left:38%}.w39{width:39%}.m39{left:39%}.w40{width:40%}.m40{left:40%}.w41{width:41%}.m41{left:41%}.w42{width:42%}.m42{left:42%}.w43{width:43%}.m43{left:43%}.w44{width:44%}.m44{left:44%}.w45{width:45%}.m45{left:45%}.w46{width:46%}.m46{left:46%}.w47{width:47%}.m47{left:47%}.w48{width:48%}.m48{left:48%}.w49{width:49%}.m49{left:49%}.w50{width:50%}.m50{left:50%}.w51{width:51%}.m51{left:51%}.w52{width:52%}.m52{left:52%}.w53{width:53%}.m53{left:53%}.w54{width:54%}.m54{left:54%}.w55{width:55%}.m55{left:55%}.w56{width:56%}.m56{left:56%}.w57{width:57%}.m57{left:57%}.w58{width:58%}.m58{left:58%}.w59{width:59%}.m59{left:59%}.w60{width:60%}.m60{left:60%}.w61{width:61%}.m61{left:61%}.w62{width:62%}.m62{left:62%}.w63{width:63%}.m63{left:63%}.w64{width:64%}.m64{left:64%}.w65{width:65%}.m65{left:65%}.w66{width:66%}.m66{left:66%}.w67{width:67%}.m67{left:67%}.w68{width:68%}.m68{left:68%}.w69{width:69%}.m69{left:69%}.w70{width:70%}.m70{left:70%}.w71{width:71%}.m71{left:71%}.w72{width:72%}.m72{left:72%}.w73{width:73%}.m73{left:73%}.w74{width:74%}.m74{left:74%}.w75{width:75%}.m75{left:75%}.w76{width:76%}.m76{left:76%}.w77{width:77%}.m77{left:77%}.w78{width:78%}.m78{left:78%}.w79{width:79%}.m79{left:79%}.w80{width:80%}.m80{left:80%}.w81{width:81%}.m81{left:81%}.w82{width:82%}.m82{left:82%}.w83{width:83%}.m83{left:83%}.w84{width:84%}.m84{left:84%}.w85{width:85%}.m85{left:85%}.w86{width:86%}.m86{left:86%}.w87{width:87%}.m87{left:87%}.w88{width:88%}.m88{left:88%}.w89{width:89%}.m89{left:89%}.w90{width:90%}.m90{left:90%}.w91{width:91%}.m91{left:91%}.w92{width:92%}.m92{left:92%}.w93{width:93%}.m93{left:93%}.w94{width:94%}.m94{left:94%}.w95{width:95%}.m95{left:95%}.w96{width:96%}.m96{left:96%}.w97{width:97%}.m97{left:97%}.w98{width:98%}.m98{left:98%}.w99{width:99%}.m99{left:99%}.w100{width:100%}.m100{left:100%}