/* Sourced comparisons on the library's reading desks. All geometry uses SVG attributes. */
.v14-experience,.v14-experience *{box-sizing:border-box}
.v14-experience{--vx-ink:#173039;--vx-teal:#126579;--vx-paper:#fbfdfc;--vx-warm:#f4eadb;--vx-rule:#aec8c7;margin:44px 0;padding:clamp(20px,3.4vw,36px);border:1px solid var(--vx-rule);border-top:5px solid var(--vx-teal);border-radius:4px 4px 20px 20px;background:var(--vx-paper);color:var(--vx-ink);font-size:17px;line-height:1.75;box-shadow:0 10px 30px #17303907;scroll-margin-top:24px}
.v14-experience [hidden]{display:none!important}
.v14-experience p,.v14-experience figure,.v14-experience dl{margin:0}
.v14-experience h2,.v14-experience h3{color:var(--vx-ink)}
.vx-heading{padding-bottom:22px}
.v14-experience .vx-kicker{display:flex;align-items:center;gap:9px;margin:0 0 10px;color:var(--vx-teal);font-size:15px;font-weight:800;letter-spacing:.08em}
.vx-kicker>span{font-size:23px}
.v14-experience .vx-heading h2{margin:0 0 14px;font:800 clamp(24px,3vw,32px)/1.55 var(--serif,serif);text-wrap:pretty}
.v14-experience .vx-intro{font-size:17px;line-height:1.9}
.v14-experience .vx-controls{margin:0 0 24px;padding:17px 19px;border:1px solid #a3c2c2;border-radius:12px;background:#edf5f2}
.v14-experience .vx-controls>label:not(.vx-check){font-weight:800}
.v14-experience .vx-range-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vx-range-label strong{color:var(--vx-teal);font-variant-numeric:tabular-nums;font-size:21px}
.v14-experience input[type=range]{display:block;width:100%;min-height:44px;margin:8px 0 0;padding:0;accent-color:var(--vx-teal);cursor:pointer}
.v14-experience select{min-width:160px;max-width:100%;min-height:46px;margin:6px 0 6px 12px;padding:8px 35px 8px 12px;border:1px solid #567c80;border-radius:7px;background:#fff;color:var(--vx-ink);font:inherit;font-size:17px}
.v14-experience .vx-control-note{font-size:15px;line-height:1.7;color:#38555b}
.vx-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.v14-experience .vx-presets button{min-height:44px;padding:8px 14px;border:1px solid #567c80;border-radius:7px;background:#fff;color:var(--vx-ink);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.v14-experience .vx-presets button[aria-pressed=true]{background:var(--vx-teal);border-color:var(--vx-teal);color:#fff}
.v14-experience :is(button,input,select,a,summary):focus-visible{outline:3px solid #0b596c;outline-offset:4px}
.v14-experience .vx-choice-group{min-width:0;margin:0;padding:0;border:0}
.v14-experience .vx-choice-group+.vx-choice-group{margin-top:16px;padding-top:14px;border-top:1px solid var(--vx-rule)}
.v14-experience .vx-choice-group legend{margin-bottom:8px;padding:0;font-weight:800;font-size:16px}
.v14-experience .vx-choice-group label,.v14-experience .vx-check{display:flex;align-items:center;gap:9px;min-height:44px;padding:7px 10px;border:1px solid transparent;border-radius:7px;cursor:pointer}
.v14-experience .vx-choice-group label:has(input:checked){border-color:#689493;background:#fff;font-weight:800}
.v14-experience .vx-choice-inline{display:flex;flex-wrap:wrap;gap:5px 8px}
.v14-experience .vx-choice-inline legend{float:none;width:100%}
.v14-experience :is(input[type=radio],input[type=checkbox]){flex:0 0 21px;width:21px;height:21px;margin:0;accent-color:var(--vx-teal)}
.v14-experience .vx-check{margin-top:12px}
.v14-experience figcaption{margin-top:12px;font-size:15px;line-height:1.75;color:#38555b}
.v14-experience .vx-note{margin-top:14px;color:#38555b;font-size:15px;line-height:1.8}
.v14-experience .vx-conclusion{margin-top:24px;padding:16px 18px;border-left:4px solid var(--vx-teal);background:#e9f3ed;font-size:18px;font-weight:700;line-height:1.85}
.v14-experience .vx-sources{margin-top:18px;padding-top:8px;border-top:1px solid var(--vx-rule);font-size:15px}
.vx-sources summary{min-height:44px;padding:9px 0;font-weight:700;cursor:pointer}
.vx-sources ul{margin:5px 0;padding-left:22px}
.vx-sources a{display:inline-block;min-height:44px;padding:8px 0;color:var(--vx-teal);text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.vx-live{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* One fixed 24-hour width; the two six-part regions occupy their real shares. */
.vx-time-band{display:block;width:100%;height:auto;overflow:visible}
.vx-time-day{fill:#e3b85e;stroke:#fbfdfc;stroke-width:1.5}
.vx-time-night{fill:#173f50;stroke:#fbfdfc;stroke-width:1.5}
.vx-band-label{fill:#173039;font-size:23px;font-weight:800}
.vx-segment-number{font-size:20px;font-weight:800}
.vx-number-day{fill:#173039}.vx-number-night{fill:#fff}
.vx-time-tick{fill:none;stroke:#486a72;stroke-width:1.5}
.vx-time-axis{fill:#173039;font-size:18px;font-variant-numeric:tabular-nums}
.vx-time-unit{fill:#38555b;font-size:16px}
.vx-time-results{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.vx-time-results>p{display:flex;flex-direction:column;padding:17px 20px;border-top:4px solid #d5a448;background:#faf3e5}
.vx-time-results>p+p{border-color:#2e6276;background:#edf3f5}
.vx-time-results>p>span:first-child{font-weight:800}
.vx-time-results strong{display:block;color:#173039;font-size:clamp(32px,5vw,48px);line-height:1.5;font-variant-numeric:tabular-nums}
.vx-time-results small{margin-left:5px;font-size:18px}
.vx-time-results>p>span:last-child{font-size:14px;color:#38555b}
.vx-static-comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px;padding-top:22px;border-top:1px solid var(--vx-rule)}
.v14-experience .vx-static-comparison h3{margin:0 0 10px;font-size:15px;line-height:1.7}
.vx-mini-time{display:block;width:100%;height:24px}
.v14-experience .vx-static-comparison p{margin-top:10px;font-size:14px;line-height:1.75}

/* The offsets retain the same column positions in both word examples. */
.v14-experience .vx-example-heading{margin-bottom:20px;text-align:center;font-size:18px}
.vx-example-heading strong{color:var(--vx-teal)}
.vx-word-routes{display:grid;gap:24px}
.v14-experience .vx-word-route h3{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:18px;line-height:1.5}
.vx-word-route h3>span{display:grid;place-items:center;flex:0 0 34px;height:34px;border:1px solid #799d9e;border-radius:50%;color:var(--vx-teal);background:#fff;font-size:18px}
.vx-five-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:0;padding:0;list-style:none}
.vx-five-days li{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:12px 6px 10px;border-top:3px solid #b9cccb;background:#f1f5f2;text-align:center}
.vx-day-offset{font-size:14px;font-weight:700;white-space:nowrap}
.vx-weekday{font-size:15px;white-space:nowrap}
.vx-five-days strong{display:grid;align-items:center;min-height:3.4em;font-size:17px;line-height:1.6;overflow-wrap:anywhere}
.vx-five-days .vx-word-match{border-color:var(--vx-teal);background:#e0efea;box-shadow:inset 0 0 0 1px #7aa29b}
.vx-word-match strong{color:#114e5b}
.vx-word-pointer{font-size:24px;line-height:1;color:var(--vx-teal)}

/* A single volume and a single gram scale for all three actual labels. */
.vx-product-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vx-product{display:flex;flex-direction:column;min-width:0;padding:19px 16px;border:1px solid #a9c3c1;border-top:5px solid #126579;border-radius:5px;background:#fff}
.v14-experience .vx-product-kind{align-self:flex-start;margin-bottom:12px;padding:2px 8px;background:var(--vx-warm);font-size:14px;font-weight:800}
.v14-experience .vx-product h3{flex:1;margin:0 0 18px;font-size:17px;line-height:1.8;overflow-wrap:anywhere}
.v14-experience .vx-portion{font-size:14px;line-height:1.7}
.v14-experience .vx-salt-result{display:flex;align-items:baseline;gap:5px;margin:5px 0 16px;color:var(--vx-teal);font-variant-numeric:tabular-nums}
.vx-salt-result strong{font-size:40px;line-height:1.3}.vx-salt-result>span{font-size:20px}
.vx-salt-bar{display:block;width:100%;height:24px}
.vx-salt-track{fill:#e7efec}.vx-salt-fill{fill:#126579}
.vx-bar-axis{display:flex;justify-content:space-between;margin-top:5px;font-size:14px;font-variant-numeric:tabular-nums}
.v14-experience .vx-label-basis{margin-top:17px;padding-top:12px;border-top:1px solid #cfddda;font-size:14px;line-height:1.8}
.vx-product-source{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;color:var(--vx-teal);font-size:14px;font-weight:700;line-height:1.7;text-underline-offset:3px}

/* The role diagram never turns recovery percentages into covered image area. */
.vx-qr-layout{display:grid;grid-template-columns:minmax(190px,.85fr) minmax(0,1.15fr);gap:24px;align-items:start}
.vx-qr-figure{max-width:340px;width:100%;justify-self:center}
.vx-qr-schematic{display:block;width:100%;height:auto}
.vx-qr-paper,.vx-qr-matrix,.vx-qr-hole{fill:#fff}
.vx-qr-paper{stroke:#8eacae;stroke-width:2}
.vx-qr-quiet-guide{fill:none;stroke:#789b9f;stroke-width:2;stroke-dasharray:7 6;opacity:.55}
.vx-qr-data{fill:#173039;opacity:.45}
.vx-qr-position{fill:#173039}
.vx-qr-margin-arrow{fill:none;stroke:#567c80;stroke-width:2}
.vx-qr[data-vx-qr-view=data] .vx-qr-data{fill:#126579;opacity:1}
.vx-qr[data-vx-qr-view=position] .vx-qr-position{fill:#126579}
.vx-qr[data-vx-qr-view=margin] .vx-qr-quiet-guide{stroke:#126579;stroke-width:5;opacity:1}
.vx-qr[data-vx-qr-view=margin] .vx-qr-margin-arrow{stroke:#126579;stroke-width:3}
.vx-qr-figure figcaption{text-align:center}
.vx-qr-figure figcaption strong{display:block;color:#173039;font-size:15px}
.vx-qr-figure figcaption>span{display:block;margin-top:5px;font-size:14px}
.vx-qr-explanation .vx-controls{padding:10px;margin-bottom:12px}
.vx-qr-explanation .vx-choice-group label{font-size:14px;line-height:1.5}
.vx-qr-roles{margin:0;padding:0;list-style:none}
.vx-qr-roles li{padding:12px;border-left:3px solid #d5e2de}
.vx-qr-roles li+li{margin-top:7px}
.vx-qr-roles li[data-selected=true]{border-color:#126579;background:#e9f3ed}
.v14-experience .vx-qr-roles h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:16px;line-height:1.65}
.vx-qr-roles h3 span{font-size:18px;color:#126579}
.v14-experience .vx-qr-roles p{font-size:15px;line-height:1.8}
.vx-codeword{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:15px 20px;margin:26px 0;padding:20px;background:var(--vx-warm);border-radius:9px}
.vx-codeword>p:first-child strong,.vx-codeword>p:first-child>span{display:block}
.vx-codeword>p:first-child strong{font-size:16px}.vx-codeword>p:first-child>span{font-size:14px}
.vx-bits{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.vx-bits span{display:grid;place-items:center;min-height:34px;border:1px solid #7b8f8b;background:#fff;font-size:17px;font-weight:700}
.v14-experience .vx-codeword .vx-note{grid-column:1/-1;margin:0;font-size:14px}
.vx-qr-rates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.vx-qr-rates>div{padding:14px 8px;border-top:3px solid #afc8c6;background:#eff4f1;text-align:center}
.vx-qr-rates>div[data-selected=true]{border-color:#126579;box-shadow:inset 0 0 0 1px #709a96;background:#e2f0e9}
.vx-qr-rates dt{font-size:15px;font-weight:700}
.vx-qr-rates dd{margin:7px 0 0;font-size:17px;white-space:nowrap}
.vx-qr-rates dd strong{margin:0 3px;color:#126579;font-size:32px;font-variant-numeric:tabular-nums}

/* Fixed historical labels: no date parser and no inferred lunar-calendar dates. */
.v14-experience .vx-day-bridge{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px;padding:10px 0;border-bottom:2px solid #88aba9;font-size:14px}
.vx-day-bridge strong{color:#126579;font-size:17px}
.vx-calendar-days{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vx-calendar-card{min-width:0;padding:22px 20px;border:2px solid #c0d1cb;border-radius:5px;background:#fff;box-shadow:0 5px 0 #ecdfcc}
.vx-calendar-card[data-selected=true]{border-color:#126579;background:#f2f8f3}
.v14-experience .vx-calendar-card h3{margin:0 0 17px;padding-bottom:12px;border-bottom:1px solid #a9c4bf;font-size:18px;font-weight:800}
.v14-experience .vx-calendar-era{font-size:15px}
.v14-experience .vx-calendar-date{display:flex;align-items:baseline;justify-content:center;gap:5px;margin:18px 0 24px;font:800 clamp(36px,4.7vw,57px)/1.25 var(--serif,serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.vx-calendar-date>span{font-size:20px;font-weight:500}
.vx-gregorian-date{padding:14px 0;border-top:1px solid #c9d8cf;border-bottom:1px solid #c9d8cf}
.vx-gregorian-date>span,.vx-gregorian-date>strong{display:block}
.vx-gregorian-date>span{font-size:14px}
.vx-gregorian-date>strong{margin-top:4px;font-size:23px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.v14-experience .vx-old-equivalent{margin-top:17px;padding:10px 12px;background:#f4eadb}
.vx-old-equivalent>span,.vx-old-equivalent>strong,.vx-old-equivalent>small{display:block}
.vx-old-equivalent>span{font-size:13px;font-weight:700}.vx-old-equivalent>strong{font-size:17px}
.vx-old-equivalent>small{margin-top:7px;font-size:14px;line-height:1.7}
.v14-experience .vx-calendar-origin{background:#eef3ee}
.v14-experience .vx-calendar-selection{margin-top:24px;font-size:16px;font-weight:700;line-height:1.8}

/* Real DOM writing modes; page order and cover motion have separate diagrams. */
.vx-book-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.vx-book-case{min-width:0;padding:18px;border:2px solid #c1d1cb;background:#fff;border-radius:8px}
.vx-book-case[data-selected=true]{border-color:#126579;background:#f1f8f3}
.v14-experience .vx-book-case h3{margin:0 0 16px;font-size:23px;line-height:1.5}
.vx-book-case h3>span{display:block;margin-top:5px;font-size:15px;font-weight:500}
.v14-experience .vx-trace-ribbon{display:flex;align-items:center;gap:10px;min-height:52px;margin-bottom:14px;padding:8px 12px;background:#126579;color:#fff;font-size:15px;font-weight:700;line-height:1.6}
.vx-trace-ribbon strong{flex:0 0 26px;font-size:27px;text-align:center}
.vx-book-spread{display:grid;grid-template-columns:1fr 1fr;min-width:0;border:1px solid #b9b9a4;background:#fffdf6;box-shadow:0 4px 0 #e8dfca,0 7px 0 #d5c5a5}
.vx-book-page{position:relative;grid-row:1;min-width:0;min-height:235px;padding:18px 14px 37px;background:#fffdf6}
.vx-page-left{grid-column:1;border-right:1px solid #cfc9b7;border-radius:4px 0 0 4px}
.vx-page-right{grid-column:2;border-left:1px solid #ebe5d6;border-radius:0 4px 4px 0}
.v14-experience .vx-book-writing{width:100%;height:180px;margin:0;color:#173039;font-family:var(--serif,serif);font-size:17px;line-height:1.9;text-align:start;overflow-wrap:anywhere}
.vx-book-case[data-vx-book-case=vertical] .vx-book-writing{writing-mode:vertical-rl;text-orientation:mixed}
.vx-book-case[data-vx-book-case=horizontal-ltr] .vx-book-writing{writing-mode:horizontal-tb;direction:ltr}
.vx-page-number{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:15px;font-variant-numeric:tabular-nums}
.vx-reading-routes{display:grid;grid-template-columns:1fr;gap:4px;margin-top:22px!important}
.vx-reading-routes>div{display:grid;grid-template-columns:115px minmax(0,1fr);align-items:start;gap:6px;padding:7px 8px;border:1px solid transparent;line-height:1.7}
.vx-reading-routes>div[data-selected=true]{border-color:#7aa29b;border-radius:5px;background:#e3efe8}
.vx-reading-routes dt{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:800;white-space:nowrap}
.vx-reading-routes dt>span{display:inline-block;min-width:22px;color:#126579;font-size:21px;line-height:1.1}
.vx-reading-routes dd{margin:0;font-size:14px}
.vx-cover-separate{margin-top:19px;padding:14px 8px 7px;border-top:1px dashed #8facaa;text-align:center}
.vx-cover-separate>p:first-child{font-size:14px;font-weight:700}
.vx-cover-separate>p:last-child{font-size:14px;line-height:1.7}
.vx-cover-diagram{display:block;width:100%;max-width:240px;height:auto;margin:8px auto}
.vx-cover-paper{fill:#f8f1df;stroke:#80968d;stroke-width:1}
.vx-cover-spine{fill:#126579}.vx-cover-diagram text{fill:#173039;font-size:16px}
.vx-cover-diagram .vx-cover-spine-label{font-size:13px}
.vx-cover-motion{fill:none;stroke:#126579;stroke-width:3}
.vx-reading[data-vx-book-trace=cover] .vx-cover-separate{outline:2px solid #126579;outline-offset:-2px;background:#e5f0e8}

@media(max-width:1050px){
  .vx-book-comparison{grid-template-columns:1fr}
  .vx-book-case{max-width:540px;width:100%;justify-self:center}
  .vx-reading-routes>div{grid-template-columns:135px minmax(0,1fr)}
}
@media(max-width:720px){
  .vx-product-labels{grid-template-columns:1fr}
  .vx-product{display:grid;grid-template-columns:1fr auto;gap:0 16px;padding:20px}
  .vx-product-kind,.vx-product h3,.vx-salt-bar,.vx-bar-axis,.vx-label-basis,.vx-product-source{grid-column:1/-1}
  .v14-experience .vx-product h3{margin-bottom:12px}
  .vx-portion{align-self:center}.v14-experience .vx-salt-result{margin:0 0 14px}
  .vx-qr-layout{grid-template-columns:1fr}
  .vx-qr-figure{max-width:300px}
  .vx-codeword{grid-template-columns:1fr}
}
@media(max-width:600px){
  .v14-experience{padding:22px 14px;font-size:16px}
  .v14-experience .vx-heading h2{font-size:25px}
  .v14-experience .vx-intro{font-size:16px}
  .v14-experience .vx-controls{padding:14px 12px}
  .v14-experience select{display:block;margin:8px 0 0;width:100%}
  .vx-static-comparison{grid-template-columns:1fr;gap:19px}
  .vx-mini-time{height:28px}
  .vx-band-label{font-size:34px}.vx-segment-number{display:none}
  .vx-time-axis{font-size:29px}.vx-time-unit{font-size:25px}
  .vx-time-results{gap:10px}.vx-time-results>p{padding:14px 11px}
  .vx-five-days{gap:4px}.vx-five-days li{padding:10px 3px 9px}
  .vx-five-days strong{min-height:4.6em;font-size:16px}.vx-weekday{font-size:14px}
  .vx-qr-rates{gap:5px}.vx-qr-rates>div{padding:11px 3px}
  .vx-qr-rates dt{font-size:13px}.vx-qr-rates dd{font-size:14px}.vx-qr-rates dd strong{font-size:25px;margin:0 2px}
  .vx-calendar-days{grid-template-columns:1fr;gap:25px}
  .vx-calendar-card{padding:20px}
  .v14-experience .vx-calendar-date{font-size:50px}
  .v14-experience .vx-day-bridge{flex-wrap:wrap;font-size:13px}.vx-day-bridge strong{font-size:16px}
  .vx-book-case{padding:14px}
  .vx-book-page{padding-right:10px;padding-left:10px}
  .vx-reading-routes>div{grid-template-columns:110px minmax(0,1fr);padding:7px 5px}
}
@media(prefers-reduced-motion:reduce){
  .v14-experience *{scroll-behavior:auto;transition:none!important;animation:none!important}
}