.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):not(.twvr__detect),
.twvr--noCost .twvr__detectCost,
.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: minmax(0, 34rem);
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__legend {
margin: 0 0 0.6rem;
padding: 0 !important;
list-style: none !important;
font-size: 0.75rem;
color: var(--twvr-ink-soft);
}
.twvr__legendItem {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0.15rem 0;
list-style: none !important;
}
.twvr__legendItem::before {
content: "";
flex: 0 0 auto;
width: 1.1rem;
height: 0;
border-top: 2px solid currentColor;
}
.twvr__legendItem--rise::before {
color: var(--twvr-accent);
}
.twvr__legendItem--flat::before {
color: var(--twvr-alert);
}
.twvr__pressureNote {
max-width: 52ch;
margin: 0.5rem 0 0;
font-size: 0.75rem;
line-height: 1.5;
color: var(--twvr-ink-soft);
}
.twvr__plot {
display: flex;
align-items: stretch;
gap: 0.5rem;
} .twvr__plotY {
position: relative;
flex: 0 0 auto;
width: 5rem;
font-size: 0.75rem;
line-height: 1;
color: var(--twvr-ink-soft);
font-variant-numeric: tabular-nums;
}
.twvr__plotY span {
position: absolute;
right: 0;
white-space: nowrap;
}
.twvr__plotTop {
top: 0;
transform: translateY(-0.3em);
}
.twvr__plotZero {
bottom: 0;
transform: translateY(0.3em);
}
.twvr__plotCost {
top: var(--twvr-costpos, 50%);
transform: translateY(-0.5em);
color: var(--twvr-alert);
font-weight: 600;
}
.twvr__plotArea {
position: relative;
flex: 1 1 auto;
min-width: 0;
border-left: 1px solid var(--twvr-line);
border-bottom: 1px solid var(--twvr-line);
}
.twvr__plotDot {
position: absolute;
left: var(--twvr-dotx, 50%);
top: var(--twvr-doty, 50%);
width: 0.5rem;
height: 0.5rem;
margin: -0.25rem 0 0 -0.25rem;
border: 2px solid var(--twvr-accent);
border-radius: 50%;
background: var(--twvr-paper);
}
.twvr__plotDot[hidden] {
display: none;
}
.twvr__plotX {
position: relative;
margin: 0.35rem 0 0 5.5rem;
font-size: 0.75rem;
line-height: 1.4;
color: var(--twvr-ink-soft);
} .twvr__plotBreak {
position: absolute;
top: 0;
left: var(--twvr-dotx, 50%);
transform: translateX(-50%);
white-space: nowrap;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr__plotBreak[hidden] {
display: none;
}
.twvr__plotArea {
touch-action: pan-y;
}
.twvr__plotGuide {
position: absolute;
top: 0;
bottom: 0;
left: var(--twvr-guidex, 50%);
width: 1px;
background: var(--twvr-ink-soft);
opacity: 0.5;
pointer-events: none;
}
.twvr__plotGuide[hidden] {
display: none;
}
.twvr__plotTip {
position: absolute;
top: 0.35rem;
left: var(--twvr-guidex, 50%);
max-width: 100%;
transform: translateX(-50%);
padding: 0.35rem 0.55rem;
border: 1px solid var(--twvr-line);
border-radius: var(--twvr-radius);
background: var(--twvr-paper);
font-size: 0.75rem;
line-height: 1.3;
color: var(--twvr-ink-soft);
white-space: nowrap;
pointer-events: none;
z-index: 2;
}
.twvr__plotTip[hidden] {
display: none;
}
.twvr__plotTip strong {
display: block;
font-size: 0.875rem;
color: var(--twvr-accent-deep);
}
.twvr__plotX span[hidden] {
display: none;
}
.twvr__curveSvg {
display: block;
width: 100%;
height: 10rem;
}
.twvr__curveLine {
fill: none;
stroke: var(--twvr-accent);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.twvr__curveFlat {
fill: none;
stroke: var(--twvr-alert);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.twvr__curveMark {
fill: none;
stroke: var(--twvr-ink-soft);
stroke-width: 1;
stroke-dasharray: 3 3;
vector-effect: non-scaling-stroke;
}
.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);
}  .twvr .twvr__alt > * {
display: none;
}
.twvr .twvr__alt[data-alt="1"] > :nth-child(1),
.twvr .twvr__alt[data-alt="2"] > :nth-child(2),
.twvr .twvr__alt[data-alt="3"] > :nth-child(3),
.twvr .twvr__alt[data-alt="4"] > :nth-child(4),
.twvr .twvr__alt[data-alt="5"] > :nth-child(5),
.twvr .twvr__alt[data-alt="6"] > :nth-child(6) {
display: block;
}
.twvr .twvr__alt p {
margin: 0;
}   .twvr:not([data-units="us"]) .twvr__sys > :nth-child(2),
.twvr[data-units="us"] .twvr__sys > :nth-child(1) {
display: none !important;
} .twvr:not([data-sys="us"]):not([data-sys="uk"]) .twvr__loc > :not(:nth-child(1)),
.twvr[data-sys="us"] .twvr__loc > :not(:nth-child(2)),
.twvr[data-sys="uk"] .twvr__loc > :not(:nth-child(3)) {
display: none !important;
}
.twvr__units {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.75rem;
margin: 0 0 1.25rem;
}
.twvr__unitsLabel {
font-size: 0.875rem;
font-weight: 600;
color: var(--twvr-ink-soft);
}
.twvr__unitsGroup {
display: inline-flex;
border: 1px solid var(--twvr-line);
border-radius: var(--twvr-radius);
overflow: hidden;
} .twvr .twvr__unitBtn.twvr__unitBtn {
display: inline-flex;
align-items: center;
margin: 0;
padding: 0.4rem 0.8rem;
border: 0 !important;
border-radius: 0;
background-color: var(--twvr-paper) !important;
background-image: none !important;
box-shadow: none !important;
color: var(--twvr-ink-soft) !important;
font: inherit;
font-size: 0.8125rem;
line-height: 1.3;
text-transform: none !important;
letter-spacing: normal !important;
text-decoration: none !important;
text-shadow: none !important;
min-height: 0;
min-width: 0;
width: auto;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: background-color 0.12s ease;
}
.twvr .twvr__unitBtn.twvr__unitBtn + .twvr__unitBtn {
border-left: 1px solid var(--twvr-line) !important;
}
.twvr .twvr__unitBtn.twvr__unitBtn:hover {
background-color: var(--twvr-wash) !important;
}
.twvr .twvr__unitBtn.twvr__unitBtn.is-active {
background-color: var(--twvr-wash) !important;
color: var(--twvr-accent-deep) !important;
font-weight: 600;
}
.twvr .twvr__unitBtn.twvr__unitBtn:focus-visible {
outline: 2px solid var(--twvr-accent);
outline-offset: -2px;
} .twvr__refSet {
min-width: 0;
} .twvr__detectInterval {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.75rem;
margin: 0.75rem 0 1rem;
font-size: 0.875rem;
}
.twvr__detectInterval label {
font-weight: 600;
color: var(--twvr-ink-soft);
}
.twvr__detectRows {
display: flex;
flex-direction: column;
gap: 0.9rem;
margin-bottom: 0.75rem;
}
.twvr__detectRow {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.3rem 1rem;
align-items: center;
}
.twvr__detectHead {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 0.2rem 0.6rem;
align-items: baseline;
}
.twvr__detectLabel {
font-weight: 600;
font-size: 0.9375rem;
}
.twvr__detectDays {
font-size: 0.8125rem;
color: var(--twvr-ink-soft);
}
.twvr__detectTrack {
display: block;
height: 0.8rem;
border-radius: var(--twvr-radius);
background: var(--twvr-muted);
overflow: hidden;
}
.twvr__detectBar {
display: block;
height: 100%;
transition: width 0.2s ease;
}
.twvr__detectBar--out {
background: var(--twvr-alert);
}
.twvr__detectBar--in {
background: var(--twvr-accent);
}
.twvr__detectValue {
font-weight: 600;
white-space: nowrap;
text-align: right;
}
.twvr__detectCost {
display: block;
font-weight: 400;
font-size: 0.8125rem;
color: var(--twvr-ink-soft);
} .twvr:not(.twvr--noCost) .twvr__billRow .twvr__detectCost {
display: inline;
margin-left: 0.6rem;
}
.twvr__detectLinks {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.twvr__detectLinks a {
color: var(--twvr-accent-deep);
}
@container (max-width: 480px) {
.twvr__detectRow {
grid-template-columns: 1fr;
}
.twvr__detectValue {
text-align: left;
}
} .twvr .twvr__detectDays.twvr__alt > :nth-child(n) {
display: none;
}
.twvr .twvr__detectDays.twvr__alt[data-alt="1"] > :nth-child(1),
.twvr .twvr__detectDays.twvr__alt[data-alt="2"] > :nth-child(2),
.twvr .twvr__detectDays.twvr__alt[data-alt="3"] > :nth-child(3) {
display: inline;
}
.twvr__detectNotes {
margin-top: 0.75rem;
}
.twvr__detectNotes .twvr__billHint {
margin: 0;
} .twvr .twvr__detectInterval[hidden],
.twvr [data-twvr-detectnums][hidden] {
display: none !important;
} .twvr__detectChoice {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: 0.75rem 1.25rem;
margin: 1rem 0 1.25rem;
}
.twvr__detectField {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin: 0;
min-width: 0;
}
.twvr__detectField label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--twvr-ink-soft);
}
.twvr .twvr__detectField[hidden] {
display: none !important;
} .twvr .twvr__select.twvr__select {
box-sizing: border-box;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
margin: 0;
padding: 0.5rem 2.25rem 0.5rem 0.7rem !important;
border: 1px solid var(--twvr-line) !important;
border-radius: var(--twvr-radius) !important;
background-color: var(--twvr-paper) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237a8f99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 0.75rem center !important;
background-size: 12px 8px !important;
color: var(--twvr-ink) !important;
font: inherit;
font-size: 0.9375rem !important;
line-height: 1.4 !important;
box-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
cursor: pointer;
}
.twvr .twvr__select.twvr__select:focus-visible {
outline: 2px solid var(--twvr-accent);
outline-offset: 1px;
}
.twvr__detectCards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.twvr__detectCard {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1rem 1.1rem;
border: 1px solid var(--twvr-line);
border-top: 3px solid var(--twvr-alert);
border-radius: var(--twvr-radius);
background: var(--twvr-paper);
}
.twvr__detectCard--in {
border-top-color: var(--twvr-accent);
}
.twvr .twvr__detectCardTitle {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr__detectFacts {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin: 0;
}
.twvr__detectFacts > div {
margin: 0;
}
.twvr__detectFacts dt {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--twvr-ink-soft);
}
.twvr__detectFacts dd {
margin: 0.1rem 0 0;
}
.twvr__detectFacts strong {
font-size: 1.35rem;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr__detectCard--out .twvr__detectFacts strong {
color: var(--twvr-alert);
}
.twvr__detectCard--in .twvr__detectFacts strong {
color: var(--twvr-accent-deep);
}
.twvr__detectNote {
display: block;
font-size: 0.8125rem;
line-height: 1.4;
color: var(--twvr-ink-soft);
}
.twvr .twvr__alt.twvr__altInline > :nth-child(n) {
display: none;
}
.twvr .twvr__alt.twvr__altInline[data-alt="1"] > :nth-child(1),
.twvr .twvr__alt.twvr__altInline[data-alt="2"] > :nth-child(2) {
display: inline;
}
.twvr__detectCard .twvr__detectTrack {
margin-top: auto;
}
@container (max-width: 560px) {
.twvr__detectChoice,
.twvr__detectCards {
grid-template-columns: 1fr;
}
} .twvr__detect .twvr__billList {
max-width: none;
}
.twvr__detect .twvr__billRow--total dt .twvr__billNote {
display: block;
margin-top: 0.1rem;
}
.twvr__detect .twvr__billRow--total dt .twvr__billNote {
font-weight: 400;
}
@container (max-width: 560px) {
.twvr__detect .twvr__billRow--total {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
}
.twvr__detectSplit {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin-top: 0.3rem;
}
.twvr__detectPart {
font-size: 0.875rem;
color: var(--twvr-ink);
}
.twvr__detectSplit .twvr__detectNote {
margin: -0.05rem 0 0.25rem;
}
.twvr__detectWhy {
margin: 0.75rem 0 0;
}
.twvr .twvr__detectWhy[hidden] {
display: none !important;
} .twvr__net {
margin-top: 1.25rem;
padding: 1rem 1.1rem;
border: 1px solid var(--twvr-line);
border-radius: var(--twvr-radius);
background: var(--twvr-wash);
}
.twvr .twvr__netTitle {
margin: 0 0 0.75rem;
font-size: 1rem;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr__netField {
max-width: 20rem;
margin-bottom: 1rem;
}
.twvr__netGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.twvr__netItem {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.75rem 0.9rem;
border-radius: var(--twvr-radius);
border-top: 3px solid var(--twvr-alert);
background: var(--twvr-paper);
}
.twvr__netItem--in {
border-top-color: var(--twvr-accent);
}
.twvr__netItem--save {
border-top-color: var(--twvr-ink);
}
.twvr__netLabel {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--twvr-ink-soft);
}
.twvr__netItem strong {
font-size: 1.35rem;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr__netItem--out strong {
color: var(--twvr-alert);
}
.twvr__netItem--in strong {
color: var(--twvr-accent-deep);
}
.twvr__net .twvr__billHint {
margin: 0;
}
@container (max-width: 560px) {
.twvr__netGrid {
grid-template-columns: 1fr;
}
.twvr__netField {
max-width: none;
}
} .twvr__netLabel .notranslate {
text-transform: none;
} .twvr__sum {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0 0 1rem;
}
.twvr__sum > div {
display: flex;
flex-direction: column;
margin: 0;
padding: 0.35rem 0.6rem;
border: 1px solid var(--twvr-line);
border-radius: var(--twvr-radius);
background: var(--twvr-paper);
}
.twvr__sum dt {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--twvr-ink-soft);
}
.twvr__sum dd {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr--noCost .twvr__sumPrice {
display: none;
} .twvr__netChart {
margin: 0 0 0.9rem;
padding: 0.9rem 1rem;
border-radius: var(--twvr-radius);
background: var(--twvr-paper);
}
.twvr__netChartTitle {
margin: 0 0 0.75rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr__netRow {
display: grid;
grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: center;
margin-bottom: 0.6rem;
}
.twvr__netRowLabel {
font-size: 0.875rem;
color: var(--twvr-ink);
}
.twvr__netRowValue {
font-weight: 600;
white-space: nowrap;
text-align: right;
min-width: 5.5rem;
}
.twvr__netTrack {
display: block;
height: 1.4rem;
border-radius: var(--twvr-radius);
background: var(--twvr-muted);
overflow: hidden;
} .twvr__netBar {
--twvr-seg: calc(100% / var(--twvr-n, 1));
display: block;
height: 100%;
transition: width 0.2s ease;
}
.twvr__netBar--out {
background: repeating-linear-gradient(
to right,
var(--twvr-alert) 0,
var(--twvr-alert) calc(var(--twvr-seg) - 2px),
transparent calc(var(--twvr-seg) - 2px),
transparent var(--twvr-seg)
);
}
.twvr__netBar--in {
background: var(--twvr-accent);
}
.twvr__netLegend {
margin: 0.25rem 0 0;
font-size: 0.75rem;
color: var(--twvr-ink-soft);
}
@container (max-width: 560px) {
.twvr__netRow {
grid-template-columns: minmax(0, 1fr) auto;
}
.twvr__netRowLabel {
grid-column: 1 / -1;
}
}  .twvr .twvr__caption,
.twvr .twvr__note,
.twvr .twvr__tariffHint,
.twvr .twvr__billList,
.twvr .twvr__billHint,
.twvr .twvr__chartNote,
.twvr .twvr__field--temp,
.twvr .twvr__tempNote,
.twvr .twvr__explainBody p,
.twvr .twvr__energyLead {
max-width: none;
} .twvr__history {
margin-top: 0.75rem;
}
.twvr__historyItem {
padding: 0.6rem 0;
border-top: 1px solid var(--twvr-muted-line);
}
.twvr__historyItem:first-of-type {
border-top: 0;
}
.twvr .twvr__historyVersion {
margin: 0 0 0.3rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--twvr-ink);
} .twvr .twvr__historyList {
margin: 0;
padding: 0;
list-style: none;
}
.twvr .twvr__historyList li {
position: relative;
margin: 0 0 0.2rem;
padding-left: 1rem;
font-size: 0.875rem;
line-height: 1.5;
color: var(--twvr-ink-soft);
}
.twvr .twvr__historyList li::before {
content: "";
position: absolute;
left: 0.2rem;
top: 0.6em;
width: 0.35rem;
height: 0.35rem;
border-radius: 50%;
background: var(--twvr-accent);
} .twvr .twvr__detectLinks a {
color: var(--twvr-accent-deep) !important;
font-weight: 600;
text-decoration: underline !important;
text-underline-offset: 0.15em;
}
.twvr .twvr__detectLinks a::after {
content: " \2192";
}
.twvr .twvr__detectLinks a:hover,
.twvr .twvr__detectLinks a:focus {
text-decoration-thickness: 2px !important;
} .twvr {
--twvr-cta: var(--twvr-cta-set, #36a8df);
--twvr-cta-hover: var(--twvr-cta-hover-set, #2b8dbd);
--twvr-cta-text: var(--twvr-cta-text-set, #ffffff);
}
.twvr__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem 2rem;
margin: 1.5rem 0 0;
padding: 1.25rem 1.4rem;
border: 1px solid var(--twvr-line);
border-left: 4px solid var(--twvr-cta);
border-radius: var(--twvr-radius);
background: var(--twvr-wash);
}
.twvr__ctaText {
flex: 1 1 22rem;
min-width: 0;
}
.twvr .twvr__ctaTitle {
margin: 0 0 0.35rem;
font-size: 1.125rem;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr__ctaText p {
margin: 0;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--twvr-ink-soft);
}
.twvr .twvr__ctaText .twvr__ctaSave {
margin-top: 0.4rem;
color: var(--twvr-ink);
}
.twvr--noCost .twvr__ctaSave {
display: none;
} .twvr .twvr__ctaBtn.twvr__ctaBtn {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin: 0;
padding: 0.85rem 1.6rem;
border: 0 !important;
border-radius: 6px;
background-color: var(--twvr-cta) !important;
background-image: none !important;
box-shadow: none !important;
color: var(--twvr-cta-text) !important;
font: inherit;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: normal !important;
white-space: nowrap;
transition: background-color 0.12s ease;
}
.twvr .twvr__ctaBtn.twvr__ctaBtn:hover,
.twvr .twvr__ctaBtn.twvr__ctaBtn:focus {
background-color: var(--twvr-cta-hover) !important;
color: var(--twvr-cta-text) !important;
}
.twvr .twvr__ctaBtn.twvr__ctaBtn:focus-visible {
outline: 2px solid var(--twvr-cta);
outline-offset: 3px;
}
@container (max-width: 560px) {
.twvr .twvr__ctaBtn.twvr__ctaBtn {
width: 100%;
}
} .twvr .twvr__srOnly {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.twvr__netTime {
font-size: 0.75rem;
color: var(--twvr-ink-soft);
}
.twvr .twvr__ctaSave p {
color: var(--twvr-ink);
} .twvr__ctaStats {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin: 0.9rem 0 0.5rem;
}
.twvr__ctaStat {
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 0.6rem 0.9rem;
border-radius: var(--twvr-radius);
border-left: 3px solid var(--twvr-line);
background: var(--twvr-paper);
}
.twvr__ctaStat--total {
border-left-color: var(--twvr-cta);
}
.twvr .twvr__ctaStat[hidden] {
display: none !important;
}
.twvr__ctaStatLabel {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--twvr-ink-soft);
}
.twvr .twvr__ctaStatValue {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2;
color: var(--twvr-ink);
}
.twvr .twvr__ctaStat--total .twvr__ctaStatValue {
font-size: 1.75rem;
color: var(--twvr-accent-deep);
}
.twvr .twvr__ctaText .twvr__ctaBasis {
font-size: 0.8125rem;
color: var(--twvr-ink-soft);
}
.twvr--noCost .twvr__ctaSave {
display: none;
} .twvr .twvr__sum .twvr__sumSub {
display: block;
font-size: 0.75rem;
font-weight: 400;
color: var(--twvr-ink-soft);
} .twvr .twvr__amortBox {
display: block;
margin-top: 1.5rem;
padding: 1.25rem 1.4rem;
border: 1px solid var(--twvr-line);
border-left: 4px solid var(--twvr-accent-deep);
border-radius: var(--twvr-radius);
background: var(--twvr-paper);
}
.twvr .twvr__amortBox .twvr__curveTitle {
font-size: 1.05rem;
}
.twvr__amortLead {
margin: 0.35rem 0 0.9rem;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--twvr-ink-soft);
}
.twvr__amortInput {
max-width: 22rem;
margin-bottom: 1rem;
}
.twvr__amortInput .twvr__tariffItem {
margin: 0;
}
.twvr .twvr__curveNote,
.twvr .twvr__curveHint,
.twvr .twvr__amortNotes {
max-width: none;
}  .twvr.twvr--locked > :not(.twvr__head):not(.twvr__gate) {
display: none !important;
}
.twvr__gate {
margin: 0 0 1.5rem;
padding: 1.2rem 1.4rem;
border: 1px solid var(--twvr-line);
border-left: 4px solid var(--twvr-alert);
border-radius: var(--twvr-radius);
background: var(--twvr-wash);
}
.twvr .twvr__gateTitle {
margin: 0 0 0.4rem;
font-size: 1.05rem;
font-weight: 600;
color: var(--twvr-ink);
}
.twvr .twvr__gateText {
margin: 0 0 0.9rem;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--twvr-ink-soft);
}
.twvr .twvr__gateCheck {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.45;
color: var(--twvr-ink);
cursor: pointer;
}
.twvr .twvr__gateCheck input {
flex: 0 0 auto;
width: 1.15rem;
height: 1.15rem;
margin: 0.15rem 0 0;
accent-color: var(--twvr-accent);
}
.twvr .twvr__gateHint {
margin: 0.6rem 0 0;
font-size: 0.8125rem;
color: var(--twvr-ink-soft);
}
.twvr .twvr__gateHint[hidden] {
display: none !important;
} .twvr:not(.twvr--locked) .twvr__gate {
border-left-color: var(--twvr-accent);
} .twvr__roi {
margin-top: 1.25rem;
padding-top: 1.1rem;
border-top: 1px solid var(--twvr-line);
}
.twvr__roiInput {
max-width: 22rem;
margin-bottom: 1rem;
}
.twvr__netField .twvr__inputGroup,
.twvr__roiInput .twvr__inputGroup {
max-width: 14rem;
}
.twvr__roiGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 0.9rem;
}
.twvr .twvr__roiGrid[hidden],
.twvr .twvr__roiChart[hidden] {
display: none !important;
}
.twvr__netItem--total {
border-top-color: var(--twvr-cta);
}
.twvr__roiChart {
margin: 0 0 0.9rem;
padding: 0.9rem 1rem;
border-radius: var(--twvr-radius);
background: var(--twvr-paper);
}
.twvr__roiBars {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.75rem;
height: 10rem;
padding-bottom: 1.4rem;
}
.twvr__roiBarCol {
display: flex;
flex-direction: column;
align-items: stretch;
min-width: 0;
}
.twvr__roiBarTrack {
position: relative;
flex: 1 1 auto;
display: block;
}
.twvr__roiBar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: block;
border-radius: var(--twvr-radius) var(--twvr-radius) 0 0;
background: var(--twvr-muted-line);
transition: height 0.2s ease;
}
.twvr__roiBar.is-paid {
background: var(--twvr-accent);
}
.twvr__roiBarLabel {
position: absolute;
bottom: 0;
font-size: 0.75rem;
color: var(--twvr-ink-soft);
}
.twvr__roiBarCol {
position: relative;
}
.twvr__roiBarCol .twvr__roiBarLabel {
left: 0;
right: 0;
bottom: -1.4rem;
text-align: center;
}
.twvr__roiBudgetLine {
position: absolute;
left: 0;
right: 0;
bottom: calc(1.4rem + (100% - 1.4rem) * var(--twvr-roiline, 0));
border-top: 2px dashed var(--twvr-alert);
pointer-events: none;
}
@container (max-width: 560px) {
.twvr__roiGrid {
grid-template-columns: 1fr;
}
.twvr__roiInput {
max-width: none;
}
}
.twvr .twvr__alt.twvr__altInline[data-alt="3"] > :nth-child(3) {
display: inline;
} .twvr__roiBars {
height: 12rem;
padding-top: 1.6rem;
}
.twvr__roiBarCol {
cursor: default;
outline: none;
}
.twvr__roiBarValue {
position: absolute;
left: 0;
right: 0;
margin-bottom: 0.2rem;
font-size: 0.8125rem;
font-weight: 600;
text-align: center;
white-space: nowrap;
color: var(--twvr-ink);
}
.twvr__roiBarCol:hover .twvr__roiBar,
.twvr__roiBarCol:focus-visible .twvr__roiBar {
filter: brightness(1.12);
}
.twvr__roiBarCol:focus-visible {
box-shadow: 0 0 0 2px var(--twvr-accent);
border-radius: var(--twvr-radius);
}
.twvr__roiTip {
position: absolute;
left: 50%;
top: 0;
z-index: 3;
display: none;
flex-direction: column;
gap: 0.15rem;
min-width: 17rem;
padding: 0.55rem 0.7rem;
border: 1px solid var(--twvr-line);
border-radius: var(--twvr-radius);
background: var(--twvr-paper);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
font-size: 0.8125rem;
line-height: 1.4;
color: var(--twvr-ink);
transform: translate(-50%, -105%);
pointer-events: none;
}
.twvr__roiBarCol:first-child .twvr__roiTip {
left: 0;
transform: translate(0, -105%);
}
.twvr__roiBarCol:last-of-type .twvr__roiTip {
left: auto;
right: 0;
transform: translate(0, -105%);
}
.twvr__roiBarCol:hover .twvr__roiTip,
.twvr__roiBarCol:focus-visible .twvr__roiTip {
display: flex;
}
.twvr__roiBudgetLabel {
position: absolute;
right: 0;
bottom: 0.15rem;
padding: 0 0.3rem;
border-radius: var(--twvr-radius);
background: var(--twvr-paper);
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
color: var(--twvr-alert);
}
@container (max-width: 480px) {
.twvr__roiBarValue {
font-size: 0.6875rem;
}
} .twvr__roiLead {
margin: 0 0 0.9rem;
font-size: 0.875rem;
line-height: 1.5;
color: var(--twvr-ink-soft);
}
.twvr__roiInput {
max-width: none;
}
.twvr__roiFields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 18rem));
gap: 0.75rem 1.25rem;
}
.twvr__roiGrid .twvr__netItem--out strong {
color: var(--twvr-alert);
}
.twvr__cf {
position: relative;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0.6rem;
height: 14rem;
padding: 1.4rem 0 1.6rem;
}
.twvr__cfCol {
position: relative;
display: flex;
flex-direction: column;
outline: none;
}
.twvr__cfArea {
position: relative;
flex: 1 1 auto;
display: block;
}
.twvr__cfBar {
position: absolute;
left: 0;
right: 0;
display: block;
background: var(--twvr-accent);
border-radius: 2px;
transition: height 0.2s ease, bottom 0.2s ease;
}
.twvr__cfBar.is-neg {
background: var(--twvr-alert);
}
.twvr__cfValue {
position: absolute;
left: -0.3rem;
right: -0.3rem;
font-size: 0.75rem;
font-weight: 600;
text-align: center;
white-space: nowrap;
color: var(--twvr-accent-deep);
transform: translateY(-0.1rem);
}
.twvr__cfValue.is-neg {
color: var(--twvr-alert);
transform: translateY(100%);
}
.twvr__cfLabel {
position: absolute;
left: 0;
right: 0;
bottom: -1.5rem;
font-size: 0.75rem;
text-align: center;
color: var(--twvr-ink-soft);
} .twvr__cfZero {
position: absolute;
left: 0;
right: 0;
top: 1.4rem;
bottom: 1.6rem;
pointer-events: none;
}
.twvr__cfZero::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: var(--twvr-zero, 50%);
border-top: 2px solid var(--twvr-ink);
}
.twvr__cfZeroLabel {
position: absolute;
right: 0;
bottom: var(--twvr-zero, 50%);
padding: 0 0.3rem;
border-radius: var(--twvr-radius);
background: var(--twvr-paper);
font-size: 0.6875rem;
font-weight: 600;
color: var(--twvr-ink);
transform: translateY(-0.15rem);
}
.twvr__cfCol:hover .twvr__cfBar,
.twvr__cfCol:focus-visible .twvr__cfBar {
filter: brightness(1.12);
}
.twvr__cfCol:focus-visible {
box-shadow: 0 0 0 2px var(--twvr-accent);
border-radius: var(--twvr-radius);
}
.twvr__cfCol:hover .twvr__roiTip,
.twvr__cfCol:focus-visible .twvr__roiTip {
display: flex;
}
.twvr__cfCol:first-child .twvr__roiTip,
.twvr__cfCol:nth-child(2) .twvr__roiTip {
left: 0;
transform: translate(0, -105%);
}
.twvr__cfCol:last-child .twvr__roiTip {
left: auto;
right: 0;
transform: translate(0, -105%);
}
@container (max-width: 480px) {
.twvr__cfValue {
font-size: 0.625rem;
}
.twvr__cf {
gap: 0.3rem;
}
}
.twvr .twvr__alt.twvr__altInline[data-alt="4"] > :nth-child(4) {
display: inline;
}
.twvr .twvr__netTime[hidden] {
display: none !important;
} .twvr .twvr__cf {
height: 15.5rem;
padding-bottom: 3rem;
}
.twvr .twvr__cfZero {
bottom: 3rem;
z-index: 2;
}
.twvr .twvr__cfLabel {
bottom: -2.9rem;
}
.twvr .twvr__cfZeroLabel {
left: 0;
right: auto;
transform: translateY(-0.2rem);
}
@container (max-width: 560px) {
.twvr .twvr__cfZeroLabel {
display: none;
}
.twvr .twvr__cfLabel {
font-size: 0.6875rem;
white-space: nowrap;
}
.twvr .twvr__cfValue {
font-size: 0.625rem;
}
} .twvr__printNote,
.twvr__printMark,
.twvr__printHead {
display: none;
}
.twvr__printBar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
margin-top: 1rem;
}
.twvr .twvr__printBtn.twvr__printBtn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
padding: 0.65rem 1.1rem;
border: 1px solid var(--twvr-line) !important;
border-radius: var(--twvr-radius);
background-color: var(--twvr-paper) !important;
background-image: none !important;
box-shadow: none !important;
color: var(--twvr-ink) !important;
font: inherit;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.2;
text-transform: none !important;
letter-spacing: normal !important;
text-decoration: none !important;
cursor: pointer;
}
.twvr .twvr__printBtn.twvr__printBtn:hover,
.twvr .twvr__printBtn.twvr__printBtn:focus {
background-color: var(--twvr-wash) !important;
border-color: var(--twvr-accent) !important;
}
.twvr__printHint {
font-size: 0.8125rem;
color: var(--twvr-ink-soft);
}
@media print {
@page {
margin: 14mm 12mm;
} html.twvr-printing body * {
visibility: hidden !important;
}
html.twvr-printing .twvr.is-printing,
html.twvr-printing .twvr.is-printing * {
visibility: visible !important;
}
html.twvr-printing .twvr.is-printing {
position: absolute !important;
left: 0;
top: 0;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
} .twvr.twvr,
.twvr.twvr--dark {
--twvr-ink: #10242f;
--twvr-ink-soft: #3d5561;
--twvr-paper: #ffffff;
--twvr-wash: #f2f6f7;
--twvr-muted: #eef1f2;
--twvr-muted-line: #d5dcde;
--twvr-line: #b9ccd1;
--twvr-accent: #0f7b8a;
--twvr-accent-deep: #0a5560;
--twvr-alert: #9c3b1f;
border: 0 !important;
padding: 0 !important;
box-shadow: none !important;
background: #ffffff !important;
color: #10242f !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
} .twvr .twvr__printNote {
display: block !important;
margin: 0 0 6mm;
padding: 4mm 5mm;
border: 1.2mm solid #c62828;
border-radius: 2mm;
background: #fdecea !important;
break-inside: avoid;
}
.twvr .twvr__printNoteTitle {
margin: 0 0 2mm;
font-size: 17pt;
font-weight: 800;
letter-spacing: 0.01em;
text-transform: uppercase;
color: #b71c1c !important;
}
.twvr .twvr__printNoteText {
margin: 0 0 2mm;
font-size: 10.5pt;
font-weight: 600;
line-height: 1.45;
color: #3b0d0d !important;
}
.twvr .twvr__printNoteMeta {
margin: 0;
font-size: 8.5pt;
line-height: 1.4;
color: #5b2020 !important;
}
.twvr .twvr__printNoteUrl {
display: block;
word-break: break-all;
} .twvr .twvr__printMark {
display: block !important;
position: fixed;
top: 45%;
left: 50%;
z-index: 0;
font-size: 44pt;
font-weight: 800;
white-space: nowrap;
color: rgba(198, 40, 40, 0.1) !important;
transform: translate(-50%, -50%) rotate(-30deg);
pointer-events: none;
} .twvr .twvr__units,
.twvr .twvr__share,
.twvr .twvr__printBar,
.twvr .twvr__ctaBtn,
.twvr .twvr__gate,
.twvr .twvr__qr,
.twvr .twvr__range,
.twvr .twvr__roiTip,
.twvr .twvr__plotTip,
.twvr .twvr__plotGuide,
.twvr .twvr__scaleHint,
.twvr .twvr__tariffHint,
.twvr .twvr__detectLinks,
.twvr .twvr__history {
display: none !important;
} .twvr .twvr__hole:not(.is-active) {
display: none !important;
} .twvr .twvr__bill,
.twvr .twvr__detectCard,
.twvr .twvr__net,
.twvr .twvr__netChart,
.twvr .twvr__roiGrid,
.twvr .twvr__roiChart,
.twvr .twvr__amortBox,
.twvr .twvr__cta,
.twvr .twvr__chart,
.twvr .twvr__tableWrap,
.twvr figure {
break-inside: avoid;
}
.twvr input,
.twvr select {
border: 0 !important;
background: transparent !important;
padding-left: 0 !important;
appearance: none !important;
-webkit-appearance: none !important;
background-image: none !important;
}
}
@media print {
.twvr .twvr__periods,
.twvr .twvr__headline,
.twvr .twvr__tariff,
.twvr .twvr__detectChoice,
.twvr .twvr__detectCards {
break-inside: avoid;
}
.twvr .twvr__select.twvr__select {
border: 0 !important;
background-image: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media print {
.twvr .twvr__printHead {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 6mm;
margin: 0 0 4mm;
padding-bottom: 3mm;
border-bottom: 0.3mm solid #b9ccd1;
}
.twvr .twvr__printLogo {
display: block;
height: 11mm;
width: auto;
max-width: 60mm;
object-fit: contain;
}
.twvr .twvr__printSite {
font-size: 9pt;
color: #3d5561 !important;
}
} .twvr__people {
margin: 0.25rem 0 1.25rem;
}
.twvr .twvr__people[hidden],
.twvr .twvr__peopleIcons[hidden],
.twvr .twvr__town[hidden],
.twvr [data-twvr-hhproto][hidden],
.twvr [data-twvr-personproto][hidden] {
display: none !important;
}
.twvr__peopleIcons {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.35rem 0.6rem;
margin-bottom: 0.5rem;
}
.twvr__hh {
display: inline-flex;
align-items: flex-end;
gap: 1px;
}
.twvr__person {
display: block;
width: 0.7rem;
height: 1.4rem;
fill: var(--twvr-accent);
}
.twvr__person--child {
width: 0.52rem;
height: 1.02rem;
fill: var(--twvr-accent-deep);
opacity: 0.85;
}
.twvr__hh--part .twvr__person {
opacity: 0.55;
}
.twvr__hhText p,
.twvr__townText p {
margin: 0;
font-size: 0.9375rem;
color: var(--twvr-ink);
}
.twvr__townText p {
font-size: 1.05rem;
font-weight: 600;
margin-bottom: 0.6rem;
}
.twvr .twvr__alt.twvr__townText > :nth-child(n) {
display: none;
}
.twvr .twvr__townText[data-alt="1"] > :nth-child(1),
.twvr .twvr__townText[data-alt="2"] > :nth-child(2),
.twvr .twvr__townText[data-alt="3"] > :nth-child(3),
.twvr .twvr__townText[data-alt="4"] > :nth-child(4),
.twvr .twvr__townText[data-alt="5"] > :nth-child(5),
.twvr .twvr__townText[data-alt="6"] > :nth-child(6),
.twvr .twvr__townText[data-alt="7"] > :nth-child(7),
.twvr .twvr__townText[data-alt="8"] > :nth-child(8),
.twvr .twvr__townText[data-alt="9"] > :nth-child(9) {
display: block;
}
.twvr .twvr__townScale {
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
gap: 0.3rem;
margin: 0 0 0.6rem;
padding: 0;
list-style: none;
}
.twvr .twvr__townStep {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
margin: 0;
padding: 0.35rem 0.15rem;
border-radius: var(--twvr-radius);
border: 1px solid transparent;
text-align: center;
opacity: 0.4;
}
.twvr .twvr__townStep.is-below {
opacity: 0.7;
}
.twvr .twvr__townStep.is-active {
opacity: 1;
border-color: var(--twvr-accent);
background: var(--twvr-wash);
}
.twvr__townIcon {
display: block;
width: 100%;
max-width: 3rem;
height: auto;
fill: var(--twvr-accent-deep);
}
.twvr__townLabel {
font-size: 0.6875rem;
line-height: 1.2;
color: var(--twvr-ink-soft);
hyphens: auto;
}
.twvr__townStep.is-active .twvr__townLabel {
font-weight: 600;
color: var(--twvr-ink);
}
.twvr .twvr__peopleNote {
margin: 0.35rem 0 0;
font-size: 0.75rem;
color: var(--twvr-ink-soft);
}
@container (max-width: 560px) {
.twvr .twvr__townScale {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
} .twvr__townExample p {
margin: -0.3rem 0 0.7rem;
font-size: 0.9375rem;
color: var(--twvr-ink);
}
.twvr .twvr__alt.twvr__townExample > :nth-child(n) {
display: none;
}
.twvr .twvr__townExample[data-alt="1"] > :nth-child(1),
.twvr .twvr__townExample[data-alt="2"] > :nth-child(2),
.twvr .twvr__townExample[data-alt="3"] > :nth-child(3),
.twvr .twvr__townExample[data-alt="4"] > :nth-child(4),
.twvr .twvr__townExample[data-alt="5"] > :nth-child(5),
.twvr .twvr__townExample[data-alt="6"] > :nth-child(6),
.twvr .twvr__townExample[data-alt="7"] > :nth-child(7),
.twvr .twvr__townExample[data-alt="8"] > :nth-child(8),
.twvr .twvr__townExample[data-alt="9"] > :nth-child(9) {
display: block;
}
.twvr__townPlace {
font-size: 0.625rem;
line-height: 1.2;
color: var(--twvr-ink-soft);
font-style: italic;
}
.twvr__townStep.is-active .twvr__townPlace {
color: var(--twvr-accent-deep);
font-weight: 600;
}
.twvr .twvr__townExWrap > :nth-child(n) {
display: none;
}
.twvr .twvr__townExWrap[data-alt="1"] > :nth-child(1),
.twvr .twvr__townExWrap[data-alt="2"] > :nth-child(2) {
display: block;
}