.twvr {
--twvr-ink: #10242f;
--twvr-ink-soft: #4a6572;
--twvr-paper: #ffffff;
--twvr-wash: #eef4f6;
--twvr-muted: #f2f4f5;
--twvr-muted-line: #dfe5e7;
--twvr-line: #c9dade;
--twvr-accent: #0f7b8a;
--twvr-accent-deep: #0a5560;
--twvr-alert: #9c3b1f;
--twvr-water: #85b7eb;
--twvr-water-fill: 0.45;
--twvr-water-jet: 0.7;
--twvr-water-line: #185fa5;
--twvr-action: var(--twvr-action-set, #1a7f4b);
--twvr-action-hover: var(--twvr-action-hover-set, #14653b);
--twvr-action-text: var(--twvr-action-text-set, #ffffff);
--twvr-radius: 3px;
box-sizing: border-box;
container-type: inline-size;
width: 100%;
margin: 2rem 0;
padding: 1.75rem;
border: 1px solid var(--twvr-line);
border-top: 3px solid var(--twvr-accent);
border-radius: var(--twvr-radius);
background: var(--twvr-paper);
color: var(--twvr-ink);
font-variant-numeric: tabular-nums;
line-height: 1.5;
}
.twvr *,
.twvr *::before,
.twvr *::after {
box-sizing: inherit;
}
.twvr__title {
margin: 0 0 1.25rem;
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--twvr-ink);
} .twvr__controls {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--twvr-line);
}
.twvr__field {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.twvr__legend {
display: block;
margin: 0 0 0.6rem;
padding: 0;
font-size: 0.875rem;
font-weight: 600;
color: var(--twvr-ink-soft);
}
.twvr__holes {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.twvr .twvr__hole.twvr__hole {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem 0.75rem;
border: 1px solid var(--twvr-line) !important;
border-radius: var(--twvr-radius);
background-color: var(--twvr-paper) !important;
color: var(--twvr-ink-soft) !important;
font: inherit;
font-size: 0.8125rem;
cursor: pointer;
transition: border-color 0.12s ease, background-color 0.12s ease;
}
.twvr .twvr__hole.twvr__hole:hover {
border-color: var(--twvr-accent);
}
.twvr .twvr__hole.is-active {
border-color: var(--twvr-accent) !important;
background-color: var(--twvr-wash) !important;
color: var(--twvr-accent-deep) !important;
box-shadow: inset 0 0 0 1px var(--twvr-accent);
}
.twvr__hole:focus-visible {
outline: 2px solid var(--twvr-accent);
outline-offset: 2px;
} .twvr__scale {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
min-height: calc(var(--twvr-scale-max, 5mm) + 0.75rem);
margin: 0.9rem 0 0;
font-size: 0.75rem;
line-height: 1.45;
color: var(--twvr-ink-soft);
}
.twvr__scaleHint {
display: block;
opacity: 0.8;
}
.twvr__scaleDot {
flex: 0 0 auto;
width: calc(var(--twvr-d, 1mm) * var(--twvr-scale, 1));
height: calc(var(--twvr-d, 1mm) * var(--twvr-scale, 1));
border-radius: 50%;
background: var(--twvr-accent-deep);
box-shadow: 0 0 0 1px rgba(16, 36, 47, 0.2);
transition: width 0.12s ease, height 0.12s ease;
}
.twvr__field--pressure {
max-width: 22rem;
}
.twvr__range {
display: block;
width: 100%;
max-width: 14rem;
margin: 0 0 0.4rem;
accent-color: var(--twvr-accent);
}
.twvr__pressureOut {
display: block;
font-size: 1.05rem;
font-weight: 600;
color: var(--twvr-ink);
} .twvr__headline {
padding: 1.5rem 0 1.25rem;
}
.twvr__headlineNum {
display: block;
font-size: clamp(2.75rem, 11vw, 4.25rem);
font-weight: 700;
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--twvr-accent-deep);
}
.twvr__headlineUnit {
display: block;
margin-top: 0.35rem;
font-size: 1rem;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr__headlineSub {
display: block;
margin-top: 0.15rem;
font-size: 0.875rem;
color: var(--twvr-ink-soft);
} .twvr__periods {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
gap: 1px;
margin: 0;
padding: 0;
background: var(--twvr-line);
border: 1px solid var(--twvr-line);
border-radius: var(--twvr-radius);
overflow: hidden;
}
.twvr__period {
padding: 0.9rem 1rem;
background: var(--twvr-paper);
}
.twvr__periodLabel {
margin: 0 0 0.3rem;
font-size: 0.8125rem;
color: var(--twvr-ink-soft);
}
.twvr__periodValue {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
}
.twvr__unit {
font-size: 0.9rem;
font-weight: 500;
color: var(--twvr-ink-soft);
}
.twvr__periodAlt {
display: block;
font-size: 0.8125rem;
font-weight: 500;
color: var(--twvr-ink-soft);
}
.twvr__periodCost {
display: block;
margin-top: 0.2rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--twvr-alert);
} .twvr__tableWrap {
overflow-x: auto;
}
.twvr__table {
width: 100%;
min-width: 30rem;
border-collapse: collapse;
font-size: 0.9375rem;
}
.twvr__reference {
margin: 2.25rem -1.75rem -1.75rem;
padding: 1.5rem 1.75rem;
border-top: 1px solid var(--twvr-line);
background: var(--twvr-muted);
}
.twvr__referenceTitle {
margin: 0 0 0.35rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--twvr-ink-soft);
}
.twvr__caption {
max-width: 42rem;
margin: 0 0 1rem;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--twvr-ink-soft);
}
.twvr__tableWrap:focus-visible {
outline: 2px solid var(--twvr-accent);
outline-offset: 2px;
}
.twvr__table th,
.twvr__table td {
padding: 0.5rem 0.7rem;
text-align: right;
border-bottom: 1px solid var(--twvr-muted-line);
color: var(--twvr-ink-soft);
}
.twvr__table thead th {
font-size: 0.75rem;
font-weight: 600;
color: var(--twvr-ink-soft);
border-bottom-color: var(--twvr-line);
}
.twvr__table thead th:first-child,
.twvr__table tbody th {
text-align: left;
}
.twvr__table tbody th {
font-weight: 600;
white-space: nowrap;
}
.twvr__table tbody tr:last-child th,
.twvr__table tbody tr:last-child td {
border-bottom: 0;
}
.twvr__tableRow.is-active th,
.twvr__tableRow.is-active td {
background: var(--twvr-paper);
color: var(--twvr-ink);
font-weight: 600;
}
.twvr__tableRow.is-active th {
box-shadow: inset 3px 0 0 var(--twvr-accent);
}
.twvr__tableRow.is-active .twvr__rowDot {
background: var(--twvr-accent);
}
.twvr__rowDot {
display: inline-block;
margin-right: 0.5rem;
vertical-align: middle;
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
background: var(--twvr-ink-soft);
}
.twvr__note {
max-width: 68ch;
margin: 1.5rem 0 0;
padding-top: 1rem;
border-top: 1px solid var(--twvr-line);
font-size: 0.8125rem;
line-height: 1.55;
color: var(--twvr-ink-soft);
} .twvr__tariff {
margin: 1.5rem 0 0;
padding: 1.1rem 1.15rem 0.9rem;
border: 1px solid var(--twvr-line);
border-radius: var(--twvr-radius);
background: var(--twvr-wash);
}
.twvr__tariffLegend {
padding: 0 0.4rem;
margin-left: -0.4rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr__tariffGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: 0.9rem 1.25rem;
}
.twvr__tariffItem {
display: flex;
flex-direction: column;
justify-content: flex-end;
margin: 0;
}
.twvr__tariffItem label {
display: block;
margin-bottom: 0.3rem;
font-size: 0.8125rem;
color: var(--twvr-ink-soft);
}
.twvr__inputGroup {
display: flex;
gap: 0.35rem;
}
.twvr__inputGroup input {
flex: 1 1 4rem;
min-width: 0;
padding: 0.4rem 0.5rem;
border: 1px solid var(--twvr-line);
border-radius: var(--twvr-radius);
background: var(--twvr-paper);
color: var(--twvr-ink);
font: inherit;
font-size: 0.9375rem;
font-variant-numeric: tabular-nums;
}
.twvr__inputGroup select {
flex: 0 0 auto;
padding: 0.4rem 0.35rem;
border: 1px solid var(--twvr-line);
border-radius: var(--twvr-radius);
background: var(--twvr-paper);
color: var(--twvr-ink);
font: inherit;
font-size: 0.875rem;
}
.twvr__inputGroup input:focus-visible,
.twvr__inputGroup select:focus-visible {
outline: 2px solid var(--twvr-accent);
outline-offset: 1px;
}
.twvr__tariffHint {
max-width: 68ch;
margin: 0.8rem 0 0;
font-size: 0.75rem;
color: var(--twvr-ink-soft);
} .twvr__bill {
margin-top: 1.5rem;
padding: 1.1rem 1.15rem;
border: 1px solid var(--twvr-line);
border-left: 3px solid var(--twvr-alert);
border-radius: var(--twvr-radius);
}
.twvr__billTitle {
margin: 0 0 0.7rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr__billList {
max-width: 46rem;
margin: 0;
}
.twvr__billRow {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 0.35rem 0;
font-size: 0.9375rem;
}
.twvr__billRow[hidden] {
display: none;
}
.twvr__billRow dt,
.twvr__billRow dd {
margin: 0;
color: var(--twvr-ink-soft);
}
.twvr__billRow dd {
white-space: nowrap;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr__billRow--total {
margin-top: 0.35rem;
padding-top: 0.6rem;
border-top: 1px solid var(--twvr-line);
font-size: 1.0625rem;
}
.twvr__billRow--total dt {
font-weight: 600;
color: var(--twvr-ink);
}
.twvr__billRow--total dd {
color: var(--twvr-alert);
}
.twvr__billRow--base {
margin-top: 0.6rem;
padding-top: 0.6rem;
border-top: 1px dashed var(--twvr-line);
font-size: 0.875rem;
}
.twvr__billRow--base dd {
font-weight: 500;
color: var(--twvr-ink-soft);
}
.twvr__billNote {
font-size: 0.8125rem;
}
.twvr__billHint {
max-width: 68ch;
margin: 0.75rem 0 0;
font-size: 0.75rem;
line-height: 1.5;
color: var(--twvr-ink-soft);
} .twvr--noCost .twvr__periodCost,
.twvr--noCost .twvr__bill:not(.twvr__energy),
.twvr--noCost [data-twvr-costcol] {
display: none;
} @media (prefers-color-scheme: dark) {
.twvr {
--twvr-ink: #e7eff1;
--twvr-ink-soft: #9db1b9;
--twvr-paper: #12232b;
--twvr-wash: #17323c;
--twvr-muted: #0e1b22;
--twvr-muted-line: #24393f;
--twvr-line: #2c4650;
--twvr-accent: #4dbccb;
--twvr-accent-deep: #7ad3df;
--twvr-alert: #e79c7e;
--twvr-water: #8dc3f2;
--twvr-water-fill: 0.3;
--twvr-water-jet: 0.6;
--twvr-water-line: #b7d9f7;
--twvr-action: var(--twvr-action-set, #4fbe85);
--twvr-action-hover: var(--twvr-action-hover-set, #6ccb99);
--twvr-action-text: var(--twvr-action-text-set, #06301b);
}
.twvr__holeDot {
background: var(--twvr-ink);
box-shadow: 0 0 0 1px rgba(231, 239, 241, 0.3);
}
}
@media (prefers-reduced-motion: reduce) {
.twvr__hole,
.twvr__scaleDot,
.twvr__shareBtn,
.twvr__shareCopy {
transition: none;
}
}
@media (max-width: 480px) {
.twvr {
padding: 1.25rem;
}
.twvr__reference {
margin: 1.75rem -1.25rem -1.25rem;
padding: 1.25rem;
}
.twvr__controls {
gap: 1.25rem;
} .twvr__hole {
padding: 0.4rem 0.55rem;
font-size: 0.75rem;
}
.twvr__scaleDot {
width: calc(var(--twvr-d, 1mm) * var(--twvr-scale, 1) * 0.75);
height: calc(var(--twvr-d, 1mm) * var(--twvr-scale, 1) * 0.75);
}
} @container (max-width: 480px) {
.twvr__reference {
margin: 1.75rem -1.25rem -1.25rem;
padding: 1.25rem;
}
.twvr__hole {
padding: 0.4rem 0.55rem;
font-size: 0.75rem;
}
.twvr__scaleDot {
width: calc(var(--twvr-d, 1mm) * var(--twvr-scale, 1) * 0.75);
height: calc(var(--twvr-d, 1mm) * var(--twvr-scale, 1) * 0.75);
}
} .twvr__chart {
margin: 0 0 1.5rem;
}
.twvr__chartTitle {
margin: 0 0 0.75rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--twvr-ink-soft);
}
.twvr__chartList {
margin: 0;
padding: 0;
list-style: none;
}
.twvr__chartRow {
display: grid;
grid-template-columns: 4.5rem 1fr 6rem;
align-items: center;
gap: 0.75rem;
padding: 0.2rem 0;
font-size: 0.8125rem;
color: var(--twvr-ink-soft);
}
.twvr__chartLabel {
white-space: nowrap;
}
.twvr__chartTrack {
display: block;
height: 1rem;
border-radius: 2px;
background: var(--twvr-muted-line);
}
.twvr__chartBar {
display: block;
min-width: 2px;
height: 100%;
border-radius: 2px;
background: var(--twvr-ink-soft);
opacity: 0.55;
}
.twvr__chartValue {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.twvr__chartRow.is-active {
color: var(--twvr-ink);
font-weight: 600;
}
.twvr__chartRow.is-active .twvr__chartBar {
background: var(--twvr-accent);
opacity: 1;
}
.twvr__chartNote {
max-width: 68ch;
margin: 0.85rem 0 0;
font-size: 0.75rem;
line-height: 1.5;
color: var(--twvr-ink-soft);
}
@container (max-width: 480px) {
.twvr__chartRow {
grid-template-columns: 3.6rem 1fr 5rem;
gap: 0.5rem;
font-size: 0.75rem;
}
}
@media (max-width: 480px) {
.twvr__chartRow {
grid-template-columns: 3.6rem 1fr 5rem;
gap: 0.5rem;
font-size: 0.75rem;
}
} .twvr__field--temp {
max-width: 42rem;
}
.twvr__check {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--twvr-ink-soft);
cursor: pointer;
}
.twvr__check input {
width: 1rem;
height: 1rem;
margin: 0;
accent-color: var(--twvr-accent);
cursor: pointer;
}
.twvr__check input:focus-visible {
outline: 2px solid var(--twvr-accent);
outline-offset: 2px;
}
.twvr__checkHint {
margin: 0.3rem 0 0 1.5rem;
font-size: 0.75rem;
color: var(--twvr-ink-soft);
opacity: 0.85;
}
.twvr__tempBody {
margin: 0.9rem 0 0 1.5rem;
padding: 0.9rem 1rem;
border-left: 2px solid var(--twvr-line);
background: var(--twvr-muted);
border-radius: 0 var(--twvr-radius) var(--twvr-radius) 0;
}
.twvr__tempBody[hidden] {
display: none;
}
.twvr__inputGroup--temp {
align-items: center;
max-width: 20rem;
}
.twvr__inputGroup--temp input {
flex: 0 0 5rem;
}
.twvr__inputUnit {
font-size: 0.9375rem;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr__tempRho {
font-size: 0.75rem;
color: var(--twvr-ink-soft);
white-space: nowrap;
}
.twvr__tempNote {
max-width: 68ch;
margin: 0.8rem 0 0;
font-size: 0.75rem;
line-height: 1.55;
color: var(--twvr-ink-soft);
}
.twvr__tempNote strong {
color: var(--twvr-ink);
} .twvr__explain {
margin: 0.9rem 0 0;
border-top: 1px solid var(--twvr-line);
}
.twvr__explainSummary {
padding: 0.75rem 0 0;
font-size: 0.8125rem;
font-weight: 600;
color: var(--twvr-accent-deep);
cursor: pointer;
list-style: none;
}
.twvr__explainSummary::-webkit-details-marker {
display: none;
}
.twvr__explainSummary::before {
content: "+";
display: inline-block;
width: 1rem;
font-weight: 400;
}
.twvr__explain[open] .twvr__explainSummary::before {
content: "\2013";
}
.twvr__explainSummary:hover {
text-decoration: underline;
}
.twvr__explainSummary:focus-visible {
outline: 2px solid var(--twvr-accent);
outline-offset: 2px;
}
.twvr__explainBody {
padding: 0.5rem 0 0.25rem 1rem;
font-size: 0.8125rem;
line-height: 1.6;
color: var(--twvr-ink-soft);
}
.twvr__explainBody p {
max-width: 68ch;
margin: 0 0 0.9rem;
}
.twvr__explainBody strong {
color: var(--twvr-ink);
}
.twvr__explainFigure {
max-width: 40rem;
margin: 0 0 1rem;
}
.twvr__explainCanvas {
overflow-x: auto;
}
.twvr__explainCanvas:focus-visible,
.twvr__explainScroll:focus-visible {
outline: 2px solid var(--twvr-accent);
outline-offset: 2px;
} .twvr__explainSvg {
display: block;
width: 100%;
min-width: 20rem;
height: auto;
}
.twvr__explainScroll {
margin: 0 0 1rem;
overflow-x: auto;
}
.twvr__svgWall {
fill: var(--twvr-ink-soft);
}
.twvr__svgWater {
fill: var(--twvr-water);
opacity: var(--twvr-water-fill);
}
.twvr__svgJet {
fill: var(--twvr-water);
opacity: var(--twvr-water-jet);
}
.twvr__svgFlow {
fill: none;
stroke: var(--twvr-water-line);
stroke-width: 1;
opacity: 0.55;
}
.twvr__svgArrow {
fill: none;
stroke: var(--twvr-water-line);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.twvr__svgDash {
fill: none;
stroke: var(--twvr-ink-soft);
stroke-width: 0.5;
stroke-dasharray: 3 3;
}
.twvr__svgMark {
fill: var(--twvr-paper);
stroke: var(--twvr-accent);
stroke-width: 1.5;
}
.twvr__svgMarkT {
font: 500 14px/1 inherit;
fill: var(--twvr-accent-deep);
text-anchor: middle;
dominant-baseline: central;
}
.twvr__explainCaption {
margin: 0.6rem 0 0;
font-size: 0.75rem;
color: var(--twvr-ink-soft);
}
.twvr .twvr__explainLegend.twvr__explainLegend {
max-width: 34rem;
margin: 0.6rem 0 0 !important;
padding-left: 1.6rem !important;
font-size: 0.8125rem;
line-height: 1.5;
list-style: decimal outside !important;
}
.twvr .twvr__explainLegend.twvr__explainLegend li {
margin: 0.25rem 0;
padding: 0 !important;
list-style: decimal outside !important;
}
.twvr .twvr__explainLegend.twvr__explainLegend li::before {
content: none !important;
}
.twvr__explainLegend li::marker {
color: var(--twvr-accent);
font-weight: 600;
}
.twvr__explainTable {
width: 100%;
min-width: 26rem;
max-width: 34rem;
margin: 0;
border-collapse: collapse;
font-size: 0.8125rem;
}
.twvr__explainTable caption {
margin-bottom: 0.4rem;
text-align: left;
color: var(--twvr-ink-soft);
}
.twvr__explainTable th,
.twvr__explainTable td {
padding: 0.4rem 0.6rem;
text-align: right;
border-bottom: 1px solid var(--twvr-line);
}
.twvr__explainTable thead th,
.twvr__explainTable tbody th {
text-align: left;
font-weight: 600;
}
.twvr__explainTable thead th {
font-size: 0.75rem;
color: var(--twvr-ink-soft);
}
.twvr__explainRow--ideal th,
.twvr__explainRow--ideal td {
color: var(--twvr-alert);
border-bottom: 0;
} .twvr__share {
margin-top: 1.25rem;
} .twvr .twvr__shareBtn.twvr__shareBtn,
.twvr .twvr__shareCopy.twvr__shareCopy,
.twvr .twvr__hole.twvr__hole {
background-image: none !important;
box-shadow: none !important;
text-shadow: none !important;
text-transform: none !important;
letter-spacing: normal !important;
text-decoration: none !important;
min-height: 0;
min-width: 0;
width: auto;
margin: 0;
appearance: none;
-webkit-appearance: none;
}
.twvr .twvr__shareBtn.twvr__shareBtn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.15rem;
border: 0 !important;
border-radius: var(--twvr-radius);
background-color: var(--twvr-action) !important;
color: var(--twvr-action-text) !important;
font: inherit;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background-color 0.12s ease;
}
.twvr .twvr__shareBtn.twvr__shareBtn:hover,
.twvr .twvr__shareBtn.twvr__shareBtn:focus {
background-color: var(--twvr-action-hover) !important;
color: var(--twvr-action-text) !important;
}
.twvr__shareIcon {
width: 1.05rem;
height: 1.05rem;
flex: 0 0 auto;
}
.twvr__shareBtn:focus-visible,
.twvr__shareCopy:focus-visible {
outline: 2px solid var(--twvr-accent);
outline-offset: 2px;
}
.twvr__sharePanel {
max-width: 34rem;
margin-top: 0.75rem;
padding: 0.9rem 1rem;
border: 1px solid var(--twvr-line);
border-radius: var(--twvr-radius);
background: var(--twvr-muted);
}
.twvr__sharePanel[hidden] {
display: none;
}
.twvr__shareLabel {
display: block;
margin-bottom: 0.35rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--twvr-ink-soft);
}
.twvr__inputGroup--share input {
flex: 1 1 8rem;
font-size: 0.8125rem;
}
.twvr .twvr__shareCopy.twvr__shareCopy {
flex: 0 0 auto;
padding: 0.4rem 0.8rem;
border: 0 !important;
border-radius: var(--twvr-radius);
background-color: var(--twvr-action) !important;
color: var(--twvr-action-text) !important;
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.twvr__shareCopy[hidden] {
display: none;
}
.twvr .twvr__shareCopy.twvr__shareCopy:hover,
.twvr .twvr__shareCopy.twvr__shareCopy:focus {
background-color: var(--twvr-action-hover) !important;
color: var(--twvr-action-text) !important;
}
.twvr__shareHint {
margin: 0.6rem 0 0;
font-size: 0.75rem;
color: var(--twvr-ink-soft);
}
.twvr__shareHint span[hidden] {
display: none;
} .twvr__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
}
.twvr__head .twvr__title {
flex: 1 1 auto;
}
.twvr__qr {
margin: 0;
text-align: center;
}
.twvr__qr[hidden] {
display: none;
}
.twvr__qrSvg {
display: block;
width: 7rem;
height: 7rem;
border-radius: 2px;
shape-rendering: crispEdges;
}
.twvr__qrCaption {
margin-top: 0.3rem;
max-width: 7rem;
font-size: 0.6875rem;
line-height: 1.3;
color: var(--twvr-ink-soft);
}
.twvr__qr--top {
flex: 0 0 auto;
} @container (max-width: 560px) {
.twvr__qr--top {
display: none;
}
}
@media (max-width: 560px) {
.twvr__qr--top {
display: none;
}
}
.twvr__sharePanel .twvr__qr {
margin-top: 0.9rem;
text-align: left;
}
.twvr__sharePanel .twvr__qrSvg {
width: 8rem;
height: 8rem;
}
.twvr__sharePanel .twvr__qrCaption {
max-width: 12rem;
text-align: left;
}  .twvr--light {
--twvr-ink: #10242f;
--twvr-ink-soft: #4a6572;
--twvr-paper: #ffffff;
--twvr-wash: #eef4f6;
--twvr-muted: #f2f4f5;
--twvr-muted-line: #dfe5e7;
--twvr-line: #c9dade;
--twvr-accent: #0f7b8a;
--twvr-accent-deep: #0a5560;
--twvr-alert: #9c3b1f;
--twvr-water: #85b7eb;
--twvr-water-fill: 0.45;
--twvr-water-jet: 0.7;
--twvr-water-line: #185fa5;
--twvr-action: var(--twvr-action-set, #1a7f4b);
--twvr-action-hover: var(--twvr-action-hover-set, #14653b);
--twvr-action-text: var(--twvr-action-text-set, #ffffff);
}
.twvr--dark {
--twvr-ink: #e7eff1;
--twvr-ink-soft: #9db1b9;
--twvr-paper: #12232b;
--twvr-wash: #17323c;
--twvr-muted: #0e1b22;
--twvr-muted-line: #24393f;
--twvr-line: #2c4650;
--twvr-accent: #4dbccb;
--twvr-accent-deep: #7ad3df;
--twvr-alert: #e79c7e;
--twvr-water: #8dc3f2;
--twvr-water-fill: 0.3;
--twvr-water-jet: 0.6;
--twvr-water-line: #b7d9f7;
--twvr-action: var(--twvr-action-set, #4fbe85);
--twvr-action-hover: var(--twvr-action-hover-set, #6ccb99);
--twvr-action-text: var(--twvr-action-text-set, #06301b);
}
.twvr--dark .twvr__holeDot,
.twvr--dark .twvr__scaleDot {
box-shadow: 0 0 0 1px rgba(231, 239, 241, 0.3);
} .twvr__energy {
border-left-color: var(--twvr-accent);
}
.twvr__energy[hidden] {
display: none;
}
.twvr__energy .twvr__billRow--total dd {
color: var(--twvr-accent-deep);
}
.twvr__energyLead {
max-width: 68ch;
margin: 0 0 0.9rem;
font-size: 0.8125rem;
line-height: 1.55;
color: var(--twvr-ink-soft);
}
.twvr__energyWarn {
padding-top: 0.5rem;
border-top: 1px dashed var(--twvr-line);
} .twvr__curves {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 1.5rem 2rem;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--twvr-line);
}
.twvr__curve {
margin: 0;
min-width: 0;
}
.twvr__curve[hidden] {
display: none;
}
.twvr__curveTitle {
margin: 0 0 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr__curveSvg {
display: block;
width: 100%;
height: auto;
}
.twvr__curveAxis {
fill: none;
stroke: var(--twvr-line);
stroke-width: 1;
}
.twvr__curveLine {
fill: none;
stroke: var(--twvr-accent);
stroke-width: 2;
stroke-linejoin: round;
}
.twvr__curveFlat {
fill: none;
stroke: var(--twvr-alert);
stroke-width: 2;
}
.twvr__curveMark {
fill: none;
stroke: var(--twvr-ink-soft);
stroke-width: 1;
stroke-dasharray: 3 3;
}
.twvr__curveDot {
fill: var(--twvr-paper);
stroke: var(--twvr-accent);
stroke-width: 2;
}
.twvr__curveTick {
font: 400 11px/1 inherit;
fill: var(--twvr-ink-soft);
}
.twvr__curveNote {
max-width: 46ch;
margin: 0.6rem 0 0;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--twvr-ink);
}
.twvr__curveNote span[hidden] {
display: none;
}
.twvr__curveHint {
max-width: 46ch;
margin: 0.5rem 0 0;
font-size: 0.75rem;
line-height: 1.5;
color: var(--twvr-ink-soft);
}