.cmplz-video.cmplz-iframe-styles{background-color:transparent}.cmplz-video.cmplz-hidden{visibility:hidden !important}.cmplz-blocked-content-notice{display:none}.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optout .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optin .cmplz-wp-video .cmplz-blocked-content-notice,.cmplz-optout .cmplz-wp-video .cmplz-blocked-content-notice{display:block}.cmplz-blocked-content-container,.cmplz-wp-video{animation-name:cmplz-fadein;animation-duration:600ms;background:#FFF;border:0;border-radius:3px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);display:flex;justify-content:center;align-items:center;background-repeat:no-repeat !important;background-size:cover !important;height:inherit;position:relative}.cmplz-blocked-content-container.gmw-map-cover,.cmplz-wp-video.gmw-map-cover{max-height:100%;position:absolute}.cmplz-blocked-content-container.cmplz-video-placeholder,.cmplz-wp-video.cmplz-video-placeholder{padding-bottom:initial}.cmplz-blocked-content-container iframe,.cmplz-wp-video iframe{visibility:hidden;max-height:100%;border:0 !important}.cmplz-blocked-content-container .cmplz-custom-accept-btn,.cmplz-wp-video .cmplz-custom-accept-btn{white-space:normal;text-transform:initial;cursor:pointer;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:200px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-custom-accept-btn:focus,.cmplz-wp-video .cmplz-custom-accept-btn:focus{border:1px dotted #cecece}.cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-wp-video .cmplz-blocked-content-notice{white-space:normal;text-transform:initial;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links{display:block;margin-bottom:10px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links a{color:#fff}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body{display:block}.cmplz-blocked-content-container div div{display:none}.cmplz-wp-video .cmplz-placeholder-element{width:100%;height:inherit}@keyframes cmplz-fadein{from{opacity:0}to{opacity:1}}.trr, .trr-article, .trr-resultbar {
--trr-brand: var(--tr-brand, #0F3D2F);
--trr-brand-hover: var(--tr-brand-hover, #0A2B21);
--trr-brand-tint: var(--tr-brand-tint, rgba(15, 61, 47, .08));
--trr-brand-rule: var(--tr-brand-rule, rgba(15, 61, 47, .55));
--trr-ink: var(--tr-ink, #1c2430);
--trr-body: var(--tr-body, #374151);
--trr-mut: var(--tr-mut, #5d6879);
--trr-surface: var(--tr-surface, #ffffff);
--trr-bg: var(--tr-bg, #f6f8fb);
--trr-bg-head: var(--tr-bg-head, #f1f4f9);
--trr-line: var(--tr-line, #e6e9ef);
--trr-line-strong: var(--tr-line-strong, #d6ddea);
--trr-line-ui: var(--tr-line-ui, #7c8798);
--trr-mark-tint: var(--tr-mark-tint, rgba(28, 36, 48, .10));
--trr-font: var(--tr-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
--trr-fs-100: var(--tr-fs-100, .6875rem);
--trr-fs-200: var(--tr-fs-200, .75rem);
--trr-fs-300: var(--tr-fs-300, .8125rem);
--trr-fs-400: var(--tr-fs-400, .9375rem);
--trr-fs-500: var(--tr-fs-500, 1.0625rem);
--trr-fs-600: var(--tr-fs-600, 1.25rem);
--trr-fs-700: var(--tr-fs-700, 1.5rem);
--trr-fs-800: var(--tr-fs-800, 1.875rem);
--trr-s-1: var(--tr-s-1, 4px);
--trr-s-2: var(--tr-s-2, 8px);
--trr-s-3: var(--tr-s-3, 12px);
--trr-s-4: var(--tr-s-4, 16px);
--trr-s-5: var(--tr-s-5, 24px);
--trr-s-6: var(--tr-s-6, 32px);
--trr-s-7: var(--tr-s-7, 40px);
--trr-r-xs: var(--tr-r-xs, 4px);
--trr-r-sm: var(--tr-r-sm, 8px);
--trr-r-md: var(--tr-r-md, 10px);
--trr-r-lg: var(--tr-r-lg, 12px);
--trr-r-xl: var(--tr-r-xl, 14px);
--trr-touch: var(--tr-touch, 44px);
--trr-dur: var(--tr-dur-1, 120ms);
--trr-maxw-text: var(--tr-maxw-text, 660px);
font-family: var(--trr-font);
color: var(--trr-body);
line-height: 1.5;
}
.trr { --trr-version: "1.3.0"; display: block; max-width: none; margin: 0; container-type: inline-size; }
.trr *, .trr *::before, .trr *::after,
.trr-article *, .trr-article *::before, .trr-article *::after { box-sizing: border-box; }
.trr img { max-width: 100%; height: auto; }
.trr p { margin: 0; }
.trr strong { color: var(--trr-ink); font-weight: 700; } .trr-num, .trr-stepval input, .trr-hero-value, .trr-stat-value, .trr-bar-val, .trr-card-price,
.trr-tvtable td, .trr-tab-count, .trr-rank, .trr-resultbar-value {
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
} .trr .trr-ico, .trr-article .trr-ico, .trr-resultbar .trr-ico {
display: block; width: 20px; height: 20px; flex: 0 0 auto;
fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
} .trr-vh {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
} .trr a:focus-visible, .trr button:focus-visible, .trr summary:focus-visible, .trr input:focus-visible,
.trr [tabindex]:focus-visible, .trr-article a:focus-visible, .trr-article summary:focus-visible,
.trr-resultbar:focus-visible {
outline: 2px solid var(--trr-brand);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(255, 255, 255, .92);
} .trr-panel {
display: grid;
grid-template-columns: minmax(0, 1fr);
background: var(--trr-surface);
border-top: 1px solid var(--trr-line);
}
.trr-in { min-width: 0; }
.trr-in-inner { display: grid; gap: var(--trr-s-4); padding: var(--trr-s-4) 0 var(--trr-s-5); }
.trr-results {
min-width: 0;
display: grid;
gap: var(--trr-s-4);
align-content: start;
padding: var(--trr-s-5) 0;
border-top: 1px solid var(--trr-line);
background: var(--trr-surface);
}
.trr-results > .trr-section-head { margin-bottom: calc(var(--trr-s-1) * -1); scroll-margin-top: calc(var(--trc-header-h, 64px) + var(--trr-s-3)); }
@container (min-width: 560px) {
.trr-panel { border: 1px solid var(--trr-line); border-radius: var(--trr-r-xl); }
.trr-in-inner { padding: var(--trr-s-5); }
.trr-results { padding: var(--trr-s-5); }
}
@container (min-width: 1000px) {
.trr-panel--tool { grid-template-columns: minmax(330px, 380px) minmax(0, 1fr); align-items: stretch; }
.trr-panel--tool > .trr-in { border-right: 1px solid var(--trr-line); }
.trr-in.is-sticky .trr-in-inner { position: sticky; top: calc(var(--trc-header-h, 64px) + var(--trr-s-4)); }
.trr-panel--tool > .trr-results { border-top: 0; }
.trr-panel--tool > .trr-disclosure { grid-column: 1 / -1; }
} .trr-section-head {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--trr-s-3);
row-gap: 2px;
align-items: center;
margin: 0;
padding: 0;
}
.trr-step {
grid-row: 1; grid-column: 1;
width: 28px; height: 28px;
display: grid; place-items: center;
border: 1px solid var(--trr-line-ui);
border-radius: 999px;
background: var(--trr-surface);
color: var(--trr-ink);
font-size: var(--trr-fs-300); font-weight: 700; line-height: 1;
}
.trr-step .trr-ico { width: 16px; height: 16px; }
.trr .trr-section-title {
grid-row: 1; grid-column: 2;
margin: 0;
font-size: var(--trr-fs-500); font-weight: 700; line-height: 1.25;
color: var(--trr-ink); letter-spacing: 0;
text-wrap: balance;
}
.trr-section-sub {
grid-row: 2; grid-column: 2;
font-size: var(--trr-fs-300); color: var(--trr-mut); line-height: 1.4;
} .trr-inputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--trr-s-5); }
@container (min-width: 560px) and (max-width: 999px) {
.trr-inputs--2, .trr-inputs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--trr-s-5); }
.trr-inputs .trr-field--wide { grid-column: 1 / -1; }
}
.trr-field { display: grid; gap: var(--trr-s-2); min-width: 0; align-content: start; }
.trr-field-row {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--trr-s-2) var(--trr-s-3);
}
.trr .trr-field-label {
display: block; flex: 1 1 100px; min-width: 0; margin: 0;
font-size: var(--trr-fs-400); font-weight: 600; line-height: 1.35;
color: var(--trr-ink); text-transform: none; letter-spacing: 0;
}
.trr-hint { font-size: var(--trr-fs-300); line-height: 1.45; color: var(--trr-mut); } .trr-stepper { display: inline-flex; align-items: stretch; flex: 0 0 auto; height: var(--trr-touch); }
.trr .trr-stepbtn {
width: var(--trr-touch); min-width: var(--trr-touch); height: var(--trr-touch); min-height: 0;
margin: 0; padding: 0;
display: grid; place-items: center;
background: var(--trr-surface); color: var(--trr-brand);
border: 1px solid var(--trr-line-ui);
border-radius: var(--trr-r-md) 0 0 var(--trr-r-md);
line-height: 1; box-shadow: none;
touch-action: manipulation;
transition: background-color var(--trr-dur) ease, border-color var(--trr-dur) ease;
}
.trr .trr-stepbtn + .trr-stepval + .trr-stepbtn { border-radius: 0 var(--trr-r-md) var(--trr-r-md) 0; }
.trr .trr-stepbtn:hover { background: var(--trr-bg); border-color: var(--trr-brand); }
.trr .trr-stepbtn:active { background: var(--trr-brand-tint); }
.trr .trr-stepbtn[aria-disabled="true"] { color: var(--trr-line-ui); cursor: default; background: var(--trr-surface); border-color: var(--trr-line-ui); } .trr-stepval {
display: flex; align-items: center; justify-content: center; gap: var(--trr-s-1);
min-width: 96px; height: var(--trr-touch); padding: 0 var(--trr-s-2);
border: 0;
box-shadow: inset 0 1px 0 var(--trr-line-ui), inset 0 -1px 0 var(--trr-line-ui);
background: var(--trr-surface);
white-space: nowrap; cursor: text;
}
.trr-stepval:focus-within { box-shadow: inset 0 0 0 2px var(--trr-brand); }
.trr .trr-stepval input {
flex: 1 1 auto; width: 0; min-width: 4.4ch; height: var(--trr-touch); margin: 0; padding: 0;
border: 0; border-radius: 0; background: transparent; box-shadow: none;
font-family: inherit; font-size: var(--trr-fs-500); font-weight: 800; line-height: 1;
color: var(--trr-ink); text-align: right;
-moz-appearance: textfield; appearance: textfield;
}
.trr .trr-stepval input:focus-visible { outline: 0; box-shadow: none; }
.trr .trr-stepval--nounit input { text-align: center; }
.trr .trr-stepval input::-webkit-outer-spin-button, .trr .trr-stepval input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.trr-unit { font-size: var(--trr-fs-300); font-weight: 600; color: var(--trr-mut); } .trr-rangewrap { position: relative; height: var(--trr-touch); margin: calc(var(--trr-s-2) * -1) 0 calc(var(--trr-s-1) * -1); }
.trr-range-track {
position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px;
border-radius: 999px; background: var(--trr-line-strong); overflow: hidden; pointer-events: none;
}
.trr-range-fill {
position: absolute; left: 0; top: 0; bottom: 0;
width: calc(12px + (100% - 24px) * var(--trr-fill, .5));
background: var(--trr-brand); border-radius: 999px;
}
.trr .trr-range {
position: relative; display: block;
-webkit-appearance: none; appearance: none;
width: 100%; height: var(--trr-touch); margin: 0; padding: 0;
background: transparent; border: 0; border-radius: 0; box-shadow: none;
cursor: pointer;
}
.trr .trr-range:focus-visible { outline-offset: 0; }
.trr-range::-webkit-slider-runnable-track { height: 24px; background: transparent; border: 0; }
.trr-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 24px; height: 24px; margin-top: 0;
border-radius: 999px; background: var(--trr-surface);
border: 2px solid var(--trr-brand);
}
.trr-range:active::-webkit-slider-thumb { background: var(--trr-brand-tint); }
.trr-range::-moz-range-track { height: 4px; background: transparent; border: 0; }
.trr-range::-moz-range-progress { background: transparent; }
.trr-range::-moz-range-thumb {
width: 20px; height: 20px; border-radius: 999px;
background: var(--trr-surface); border: 2px solid var(--trr-brand);
} .trr .trr-chips {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--trr-chip-min, 140px)), 1fr));
gap: var(--trr-s-2);
width: 100%; margin: 0; padding: 0;
background: none; border: 0;
}
.trr .trr-chip {
display: flex; align-items: center; justify-content: center; gap: 6px;
min-height: var(--trr-touch); min-width: 0; margin: 0;
padding: 6px 10px;
background: var(--trr-surface); color: var(--trr-ink);
border: 1px solid var(--trr-line-ui); border-radius: var(--trr-r-md);
font-size: var(--trr-fs-400); font-weight: 600; line-height: 1.25;
text-align: center; box-shadow: none;
transition: background-color var(--trr-dur) ease, border-color var(--trr-dur) ease, color var(--trr-dur) ease;
}
.trr .trr-chip:hover { background: var(--trr-bg); border-color: var(--trr-brand); }
.trr .trr-chip[aria-pressed="true"] { background: var(--trr-brand); border-color: var(--trr-brand); color: #fff; }
.trr .trr-chip[aria-pressed="true"]:hover { background: var(--trr-brand-hover); }
.trr-chip .trr-ico { width: 16px; height: 16px; stroke-width: 2.25; }
.trr-chip[aria-pressed="false"] .trr-ico { display: none; }
.trr-chip-text { display: grid; min-width: 0; }
.trr-chip-sub { font-size: var(--trr-fs-200); font-weight: 400; opacity: .85; } .trr-details {
border: 1px solid var(--trr-line);
border-radius: var(--trr-r-lg);
background: var(--trr-surface);
min-width: 0;
}
.trr .trr-details > summary {
display: flex; align-items: center; gap: var(--trr-s-3);
min-height: var(--trr-touch);
padding: 10px var(--trr-s-4);
list-style: none; cursor: pointer;
font-size: var(--trr-fs-400); font-weight: 600; line-height: 1.35; color: var(--trr-ink);
}
.trr .trr-details > summary::-webkit-details-marker { display: none; }
.trr .trr-details > summary::before {
content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: 0 2px 0 1px;
border-right: 2px solid var(--trr-brand); border-bottom: 2px solid var(--trr-brand);
transform: rotate(-45deg);
transition: transform var(--trr-dur) ease;
}
.trr .trr-details[open] > summary::before { transform: rotate(45deg); margin-top: -4px; }
.trr .trr-details > summary:hover { color: var(--trr-brand); }
.trr-summary-sub { display: block; font-size: var(--trr-fs-300); font-weight: 400; color: var(--trr-mut); }
.trr-details-body {
display: grid; gap: var(--trr-s-3);
padding: 0 var(--trr-s-4) var(--trr-s-4);
font-size: var(--trr-fs-400); line-height: 1.6; color: var(--trr-body);
}
.trr-details-body p { margin: 0; max-width: 70ch; }
.trr-details > .trr-inputs { padding: var(--trr-s-2) var(--trr-s-4) var(--trr-s-4); }
.trr-assume { display: grid; gap: var(--trr-s-5); grid-template-columns: minmax(0, 1fr); padding-top: var(--trr-s-2); }
@container (min-width: 560px) and (max-width: 999px) {
.trr-assume { grid-template-columns: repeat(2, minmax(0, 1fr)); }
} .trr-hero {
display: grid; gap: var(--trr-s-1);
padding: var(--trr-s-4) var(--trr-s-4) var(--trr-s-4) calc(var(--trr-s-4) + 3px);
background: var(--trr-surface);
border: 1px solid var(--trr-line);
border-radius: var(--trr-r-lg);
box-shadow: inset 3px 0 0 var(--trr-brand);
}
.trr-hero-label {
font-size: var(--trr-fs-100); font-weight: 600; line-height: 1.4;
letter-spacing: .08em; text-transform: uppercase; color: var(--trr-mut);
}
.trr-hero-value {
font-size: var(--trr-fs-700); font-weight: 800; line-height: 1.2;
letter-spacing: -.01em; color: var(--trr-ink);
}
@container (min-width: 560px) { .trr-hero-value { font-size: var(--trr-fs-800); } }
.trr .trr-hero-say { margin: 2px 0 0; font-size: var(--trr-fs-500); font-weight: 600; line-height: 1.45; color: var(--trr-ink); max-width: 62ch; }
.trr-hero-sub { font-size: var(--trr-fs-400); line-height: 1.55; color: var(--trr-body); max-width: 62ch; } .trr-statgrid {
display: grid; grid-template-columns: minmax(0, 1fr);
margin: 0; padding: 0;
border-top: 1px solid var(--trr-line);
}
.trr-stat {
display: grid; grid-template-columns: minmax(88px, max-content) minmax(0, 1fr);
column-gap: var(--trr-s-3); align-items: baseline;
padding: 10px 0;
border-bottom: 1px solid var(--trr-line);
background: none; min-width: 0;
}
.trr-stat-value { font-size: var(--trr-fs-500); font-weight: 800; line-height: 1.25; color: var(--trr-ink); white-space: nowrap; }
.trr-stat-label { font-size: var(--trr-fs-300); font-weight: 400; line-height: 1.4; color: var(--trr-mut); }
@container (min-width: 560px) {
.trr-statgrid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-bottom: 1px solid var(--trr-line); }
.trr-stat { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: var(--trr-s-3) var(--trr-s-4) var(--trr-s-3) 0; border-bottom: 0; }
.trr-stat + .trr-stat { padding-left: var(--trr-s-4); border-left: 1px solid var(--trr-line); }
.trr-stat-value { font-size: var(--trr-fs-600); white-space: normal; }
} .trr .trr-statgrid--row {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--trr-s-2);
border: 0;
}
.trr .trr-stat.is-btn {
display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; align-content: center;
min-height: 56px; margin: 0; padding: var(--trr-s-2) var(--trr-s-3);
text-align: left; cursor: pointer;
background: var(--trr-surface); color: var(--trr-ink);
border: 1px solid var(--trr-line-ui); border-radius: var(--trr-r-md);
box-shadow: none;
transition: background-color var(--trr-dur) ease, border-color var(--trr-dur) ease;
}
.trr .trr-stat.is-btn + .trr-stat.is-btn { padding-left: var(--trr-s-3); border-left: 1px solid var(--trr-line-ui); }
.trr .trr-stat.is-btn:hover { border-color: var(--trr-brand); background: var(--trr-bg); }
.trr .trr-stat.is-btn[aria-pressed="true"] { border-color: var(--trr-brand); box-shadow: inset 0 0 0 1px var(--trr-brand); background: var(--trr-brand-tint); }
.trr .trr-stat.is-btn .trr-stat-value { font-size: var(--trr-fs-500); display: flex; align-items: center; gap: 6px; }
.trr .trr-stat.is-btn .trr-stat-label { font-size: var(--trr-fs-200); color: var(--trr-body); }
.trr .trr-stat.is-btn .trr-ico { width: 16px; height: 16px; stroke-width: 2.25; color: var(--trr-brand); }
.trr .trr-stat.is-btn[aria-pressed="false"] .trr-ico { display: none; } .trr-bars { display: grid; gap: var(--trr-s-4); }
.trr-bar-row { display: grid; gap: 6px; }
.trr-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--trr-s-3); }
.trr-bar-name { font-size: var(--trr-fs-400); font-weight: 600; color: var(--trr-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--trr-s-2); min-width: 0; }
.trr-bar-val { font-size: var(--trr-fs-400); font-weight: 800; color: var(--trr-ink); white-space: nowrap; }
.trr-bar-track { height: 8px; border-radius: 999px; background: var(--trr-bg); box-shadow: inset 0 0 0 1px var(--trr-line); overflow: hidden; }
.trr-bar-fill { height: 100%; min-width: 8px; border-radius: 999px; background: var(--trr-line-ui); transition: width .4s cubic-bezier(.2, .7, .3, 1); }
.trr-bar-row.is-best .trr-bar-fill { background: var(--trr-ink); }
.trr-bar-sub { font-size: var(--trr-fs-300); color: var(--trr-mut); line-height: 1.45; }
.trr-best {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--trr-fs-200); font-weight: 600; color: var(--trr-ink);
padding: 1px 6px 1px 4px; border-radius: var(--trr-r-xs); background: var(--trr-mark-tint);
}
.trr-best .trr-ico { width: 14px; height: 14px; stroke-width: 2.25; } .trr-note { margin: 0; font-size: var(--trr-fs-300); line-height: 1.5; color: var(--trr-mut); }
.trr a:not([class]), .trr-note a { color: var(--trr-brand); text-decoration: underline; text-decoration-color: var(--trr-brand-rule); text-underline-offset: .15em; }
.trr a:not([class]):hover, .trr-note a:hover { text-decoration-color: currentColor; }
.trr .trr-h {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--trr-s-2);
margin: var(--trr-s-2) 0 calc(var(--trr-s-1) * -1);
font-size: var(--trr-fs-500); font-weight: 700; line-height: 1.3; color: var(--trr-ink); letter-spacing: 0;
}
.trr .trr-h .trr-note { font-weight: 400; }
.trr-callout {
display: flex; align-items: flex-start; gap: var(--trr-s-3);
padding: var(--trr-s-3) var(--trr-s-4);
background: var(--trr-surface);
border: 1px solid var(--trr-line);
border-radius: var(--trr-r-lg);
font-size: var(--trr-fs-400); line-height: 1.55; color: var(--trr-body);
}
.trr-callout > .trr-ico { color: var(--trr-ink); margin-top: 1px; }
.trr-callout-body { flex: 1 1 auto; min-width: 0; }
.trr-callout.is-warn { border-color: var(--trr-line-ui); box-shadow: inset 3px 0 0 var(--trr-ink); padding-left: calc(var(--trr-s-4) + 3px); }
.trr-callout em { font-style: normal; font-weight: 600; }
.trr-disclosure {
padding: var(--trr-s-3) 0 0;
border-top: 1px solid var(--trr-line);
font-size: var(--trr-fs-200); line-height: 1.5; color: var(--trr-mut);
}
@container (min-width: 560px) { .trr-disclosure { padding: var(--trr-s-3) var(--trr-s-5); } }
.trr-ad-legend { font-weight: 600; color: var(--trr-ink); } .trr .trr-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--trr-s-2);
min-height: var(--trr-touch); margin: 0; padding: 0 var(--trr-s-4);
border: 1px solid transparent; border-radius: var(--trr-r-md);
font-size: var(--trr-fs-400); font-weight: 600; line-height: 1.2;
text-align: center; text-decoration: none; white-space: nowrap;
box-shadow: none; cursor: pointer;
transition: background-color var(--trr-dur) ease, border-color var(--trr-dur) ease, color var(--trr-dur) ease;
}
.trr .trr-btn-primary, .trr .trr-btn-primary:visited { background: var(--trr-brand); border-color: var(--trr-brand); color: #fff; }
.trr .trr-btn-primary:hover { background: var(--trr-brand-hover); border-color: var(--trr-brand-hover); color: #fff; }
.trr .trr-btn-ghost, .trr .trr-btn-ghost:visited { background: var(--trr-surface); border-color: var(--trr-line-ui); color: var(--trr-brand); }
.trr .trr-btn-ghost:hover { background: var(--trr-bg); border-color: var(--trr-brand); color: var(--trr-brand); } .trr-ad {
display: inline-block; padding: 0 5px;
border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--trr-r-xs);
font-size: var(--trr-fs-200); font-weight: 600; line-height: 16px; letter-spacing: .02em;
}
.trr-btn-ghost .trr-ad { border-color: var(--trr-line-ui); }
.trr .trr-more {
justify-self: stretch;
display: flex; align-items: center; justify-content: center; gap: var(--trr-s-2);
min-height: var(--trr-touch); margin: 0; padding: 0 var(--trr-s-4);
background: var(--trr-surface); color: var(--trr-brand);
border: 1px solid var(--trr-line-ui); border-radius: var(--trr-r-md);
font-size: var(--trr-fs-400); font-weight: 600; box-shadow: none;
}
.trr .trr-more:hover { background: var(--trr-bg); border-color: var(--trr-brand); }
.trr a.trr-more, .trr a.trr-more:visited { color: var(--trr-brand); text-decoration: none; }
.trr a.trr-more .trr-ico { width: 16px; height: 16px; stroke-width: 2; }
@container (min-width: 560px) { .trr .trr-more { justify-self: start; min-width: 280px; } } .trr-prodgrid { display: grid; gap: var(--trr-s-3); container: trr-cards / inline-size; }
.trr-card {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
grid-template-areas: "img body" "cta cta";
gap: var(--trr-s-3);
align-items: start;
padding: var(--trr-s-3);
background: var(--trr-surface);
border: 1px solid var(--trr-line);
border-radius: var(--trr-r-lg);
transition: border-color var(--trr-dur) ease;
}
.trr-card.has-top { grid-template-areas: "top top" "img body" "cta cta"; }
.trr-card:hover { border-color: var(--trr-line-strong); }
.trr-card.is-top { border-color: var(--trr-line-ui); }
.trr-card-top {
grid-area: top;
display: flex; align-items: center; gap: 6px;
margin-bottom: calc(var(--trr-s-1) * -1);
font-size: var(--trr-fs-100); font-weight: 600; line-height: 1.4;
letter-spacing: .08em; text-transform: uppercase; color: var(--trr-ink);
}
.trr-card-top .trr-ico { width: 16px; height: 16px; stroke-width: 2.25; }
.trr-imgwrap {
grid-area: img; position: relative;
width: 64px; height: 64px;
display: grid; place-items: center;
background: var(--trr-surface);
border: 1px solid var(--trr-line); border-radius: var(--trr-r-sm);
}
.trr .trr-card-img { width: 56px; height: 56px; object-fit: contain; }
.trr-imgwrap.is-empty, .trr-imgwrap.is-mono { background: var(--trr-bg); }
.trr-ph {
display: grid; justify-items: center; gap: 1px;
max-width: 100%; padding: 0 4px;
font-size: var(--trr-fs-200); font-weight: 600; line-height: 1.2; color: var(--trr-mut);
text-align: center; overflow-wrap: anywhere;
}
.trr-ph b { font-weight: 700; color: var(--trr-ink); }
.trr-rank {
position: absolute; top: -8px; left: -8px;
min-width: 22px; height: 22px; padding: 0 5px;
display: grid; place-items: center;
background: var(--trr-surface); color: var(--trr-ink);
border: 1px solid var(--trr-line-ui); border-radius: 999px;
font-size: var(--trr-fs-200); font-weight: 700; line-height: 1;
}
.trr-card-body { grid-area: body; display: grid; gap: 6px; min-width: 0; }
.trr .trr-card-name { margin: 0; font-size: var(--trr-fs-400); font-weight: 700; line-height: 1.35; color: var(--trr-ink); overflow-wrap: anywhere; }
.trr .trr-card-name a { color: inherit; text-decoration: none; }
.trr .trr-card-name a:hover { color: var(--trr-brand); text-decoration: underline; text-decoration-color: var(--trr-brand-rule); }
.trr-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.trr-tag {
display: inline-block; padding: 2px 6px;
background: var(--trr-bg); color: var(--trr-body);
border-radius: var(--trr-r-xs);
font-size: var(--trr-fs-200); font-weight: 600; line-height: 1.4; white-space: nowrap;
} .trr-tag.is-class { background: var(--trr-surface); box-shadow: inset 0 0 0 1px var(--trr-line-ui); color: var(--trr-ink); }
.trr-tag.is-good { color: var(--trr-ink); font-weight: 700; }
.trr-tag.is-warn { color: var(--trr-ink); }
.trr-card-cta { grid-area: cta; display: grid; gap: var(--trr-s-2); min-width: 0; }
.trr-card-price { margin-top: 2px; font-size: var(--trr-fs-500); font-weight: 800; line-height: 1.25; color: var(--trr-ink); }
.trr-card-price small { display: block; margin-top: 1px; font-size: var(--trr-fs-200); font-weight: 400; color: var(--trr-mut); }
.trr-card-actions { display: flex; flex-wrap: wrap; gap: var(--trr-s-2); }
.trr .trr-card-actions .trr-btn { flex: 1 1 136px; padding: 0 var(--trr-s-3); }
.trr-card-merchant { font-size: var(--trr-fs-200); line-height: 1.4; color: var(--trr-mut); }
@container trr-cards (min-width: 540px) {
.trr-card {
grid-template-columns: 80px minmax(0, 1fr) minmax(180px, max-content);
grid-template-areas: "img body cta";
align-items: center;
padding: var(--trr-s-4);
column-gap: var(--trr-s-4);
}
.trr-card.has-top { grid-template-areas: "top top top" "img body cta"; }
.trr-imgwrap { width: 80px; height: 80px; }
.trr .trr-card-img { width: 70px; height: 70px; }
.trr-card-cta { justify-items: stretch; text-align: right; }
.trr-card-actions { flex-direction: column-reverse; flex-wrap: nowrap; }
.trr .trr-card-actions .trr-btn { flex: 0 0 auto; }
} @container trr-cards (min-width: 720px) {
.trr-card-actions { flex-direction: row-reverse; }
.trr .trr-card-actions .trr-btn { min-width: 140px; }
} .trr-tabbed { display: grid; gap: var(--trr-s-4); min-width: 0; }
.trr .trr-tabs {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
gap: var(--trr-s-1); padding: var(--trr-s-1);
background: var(--trr-bg);
border: 1px solid var(--trr-line);
border-radius: var(--trr-r-lg);
overflow: visible;
}
.trr .trr-tab {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px;
min-height: var(--trr-touch); min-width: 0; margin: 0;
padding: 6px var(--trr-s-2);
background: transparent; color: var(--trr-body);
border: 1px solid transparent; border-radius: var(--trr-r-md);
font-size: var(--trr-fs-400); font-weight: 600; line-height: 1.2;
text-align: center; white-space: normal; hyphens: manual; overflow-wrap: break-word;
box-shadow: none;
transition: background-color var(--trr-dur) ease, color var(--trr-dur) ease, border-color var(--trr-dur) ease;
}
.trr .trr-tab:hover { color: var(--trr-ink); background: var(--trr-surface); }
.trr .trr-tab.is-active { background: var(--trr-surface); color: var(--trr-ink); border-color: var(--trr-line-ui); font-weight: 700; }
.trr-tab-count { font-size: var(--trr-fs-300); font-weight: 700; color: var(--trr-mut); }
.trr-tab.is-active .trr-tab-count { color: var(--trr-ink); }
.trr-tabpanel { min-width: 0; }
.trr-tabpanel:focus-visible { outline-offset: 4px; }
.trr-tabstack { display: grid; gap: var(--trr-s-3); } .trr-resultbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
display: none;
align-items: center; justify-content: space-between; gap: var(--trr-s-3);
width: 100%; min-height: 56px; margin: 0;
padding: var(--trr-s-2) var(--trr-s-4) calc(var(--trr-s-2) + env(safe-area-inset-bottom, 0px));
background: var(--trr-surface); color: var(--trr-ink);
border: 0; border-top: 1px solid var(--trr-line-ui); border-radius: 0;
box-shadow: 0 -2px 8px rgba(15, 61, 47, .08);
text-align: left; cursor: pointer;
font-family: var(--trr-font);
}
.trr-resultbar.is-on { display: flex; }
.trr-resultbar:hover { background: var(--trr-surface); }
.trr-resultbar-text { display: grid; min-width: 0; }
.trr-resultbar-label { font-size: var(--trr-fs-200); font-weight: 600; color: var(--trr-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trr-resultbar-value {
font-size: var(--trr-fs-500); font-weight: 800; line-height: 1.25; color: var(--trr-ink);
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.trr-resultbar-go {
display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: 0 0 auto;
min-width: var(--trr-touch); min-height: var(--trr-touch); padding: 0 var(--trr-s-3);
border: 1px solid var(--trr-line-ui); border-radius: var(--trr-r-md);
font-size: var(--trr-fs-400); font-weight: 600; color: var(--trr-brand);
} @media (max-width: 359px) {
.trr-resultbar-go { padding: 0; font-size: 0; }
.trr-resultbar-go .trr-ico { width: 20px; height: 20px; }
} .trr[data-trrechner]:empty, div[data-trrechner]:empty {
min-height: 620px;
border: 1px solid var(--tr-line, #e6e9ef);
border-radius: var(--tr-r-xl, 14px);
background: var(--tr-bg, #f6f8fb);
} .trr-article { font-size: var(--trr-fs-500); line-height: 1.7; } .trr-article > p:empty, .trr-hero-band > p:empty { display: none; }
.trr-toolgrid br, .trr-linkcards br, .trr-eeat br, .trr-hero-band > br { display: none; }
.trr-article > p, .trr-article > ul:not([class]), .trr-article > ol:not([class]) { max-width: var(--trr-maxw-text); }
.trr-article > p { margin: 0 0 var(--trr-s-4); }
.trr-article > h2 {
max-width: 760px;
margin: var(--trr-s-7) 0 var(--trr-s-3);
padding: var(--trr-s-5) 0 0;
border-top: 1px solid var(--trr-line);
font-size: var(--trr-fs-600); font-weight: 700; line-height: 1.3;
color: var(--trr-ink); text-align: left; letter-spacing: -.01em;
text-wrap: balance;
}
.trr-article > h2::before { content: none; display: none; }
@media (min-width: 768px) { .trr-article > h2 { font-size: var(--trr-fs-700); } }
.trr-article > .trr + h2, .trr-article > div[data-trrechner] + h2 { margin-top: var(--trr-s-7); } .trr-hero-band {
display: flex; flex-direction: column; align-items: flex-start; gap: var(--trr-s-3);
max-width: 760px;
margin: 0 0 var(--trr-s-5);
text-align: left;
}
.trr-hero-band > p { margin: 0; }
.trr-hero-band .trr-backlink {
display: inline-flex; align-items: center; gap: 6px;
min-height: var(--trr-touch); margin: calc(var(--trr-s-2) * -1) 0 calc(var(--trr-s-3) * -1);
padding: 0;
background: none; border: 0; border-radius: 0;
font-size: var(--trr-fs-400); font-weight: 600; line-height: 1.3;
color: var(--trr-brand); text-decoration: none;
}
.trr-hero-band .trr-backlink:hover { text-decoration: underline; text-decoration-color: var(--trr-brand-rule); }
.trr-hero-band .trr-backlink-wrap { margin: 0; }
.trr-article .trr-meta {
display: block; margin: 0;
font-size: var(--trr-fs-300); line-height: 1.5; color: var(--trr-mut);
}
.trr-article .trr-meta strong { color: var(--trr-ink); font-weight: 600; }
.trr-article .trr-lead {
max-width: var(--trr-maxw-text); margin: 0;
font-size: var(--trr-fs-500); line-height: 1.6; color: var(--trr-body);
}
.trr-article .trr-lead strong { color: var(--trr-ink); }
.trr-trust {
display: flex; flex-wrap: wrap; gap: var(--trr-s-1) var(--trr-s-4);
margin: 0; padding: 0; list-style: none;
}
.trr-trust li {
display: inline-flex; align-items: center; gap: var(--trr-s-2);
margin: 0; padding: 0; background: none; border: 0;
font-size: var(--trr-fs-300); font-weight: 600; line-height: 1.45; color: var(--trr-ink);
}
.trr-trust li::before, .trr-eeat .trr-eeat-t::before {
content: ""; flex: 0 0 auto; width: 10px; height: 5px; margin: -3px 1px 0;
border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
} .trr-article .trr-kurz {
max-width: var(--trr-maxw-text); margin: 0;
font-size: var(--trr-fs-500); line-height: 1.55; color: var(--trr-body);
}
.trr-article .trr-kurz strong { color: var(--trr-ink); font-weight: 700; } .trr-intro { display: grid; gap: var(--trr-s-3); max-width: 760px; margin: var(--trr-s-4) 0 0; }
.trr-intro > p { margin: 0; }
.trr-intro .trr-backlink {
display: inline-flex; align-items: center; min-height: var(--trr-touch);
font-size: var(--trr-fs-400); font-weight: 600; color: var(--trr-brand); text-decoration: none;
}
.trr-intro .trr-backlink:hover { text-decoration: underline; text-decoration-color: var(--trr-brand-rule); }
.trr-intro .trr-backlink-wrap { margin: calc(var(--trr-s-2) * -1) 0; } .trr-table-wrap {
max-width: 760px; margin: var(--trr-s-3) 0 var(--trr-s-2);
overflow-x: auto; -webkit-overflow-scrolling: touch;
border: 1px solid var(--trr-line); border-radius: var(--trr-r-lg);
}
.trr-article .trr-table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--trr-fs-400); line-height: 1.45; background: var(--trr-surface); }
.trr-article .trr-table th, .trr-article .trr-table td {
padding: 10px var(--trr-s-3); border: 0; border-bottom: 1px solid var(--trr-line);
text-align: left; vertical-align: top;
}
.trr-article .trr-table thead th { background: var(--trr-bg-head); font-size: var(--trr-fs-300); font-weight: 600; line-height: 1.35; color: var(--trr-ink); }
.trr-article .trr-table tbody th { font-weight: 700; color: var(--trr-ink); }
.trr-article .trr-table td { color: var(--trr-body); font-variant-numeric: tabular-nums lining-nums; }
.trr-article .trr-table td strong { color: var(--trr-ink); font-weight: 800; }
.trr-article .trr-table tbody tr:last-child > * { border-bottom: 0; }
.trr-article .trr-table .trr-table-sub { display: block; margin-top: 2px; font-size: var(--trr-fs-300); font-weight: 400; color: var(--trr-mut); }
.trr-article .trr-table-note { max-width: 760px; margin: 0 0 var(--trr-s-4); font-size: var(--trr-fs-300); line-height: 1.5; color: var(--trr-mut); } .trr-article .trr-infobox {
max-width: var(--trr-maxw-text);
margin: var(--trr-s-4) 0;
padding: var(--trr-s-4) var(--trr-s-5);
background: var(--trr-surface);
border: 1px solid var(--trr-line); border-radius: var(--trr-r-lg);
font-size: var(--trr-fs-400); line-height: 1.6;
}
.trr-infobox p { margin: 0 0 var(--trr-s-2); }
.trr-infobox p:last-child { margin: 0; }
.trr-infobox strong { color: var(--trr-ink); } .trr-article .trr-faq {
max-width: 760px; margin: 0;
background: none; border: 0; border-top: 1px solid var(--trr-line); border-radius: 0; box-shadow: none;
overflow: visible;
}
.trr-article .trr-faq:last-of-type { border-bottom: 1px solid var(--trr-line); }
.trr-article .trr-faq > summary {
position: relative; list-style: none; cursor: pointer;
min-height: var(--trr-touch);
padding: 14px 40px 14px 0;
font-size: var(--trr-fs-500); font-weight: 600; line-height: 1.4; color: var(--trr-ink);
background: none;
}
.trr-article .trr-faq > summary::-webkit-details-marker { display: none; }
.trr-article .trr-faq > summary::after {
content: ""; position: absolute; right: 8px; top: 50%;
width: 9px; height: 9px; margin-top: -7px;
background: none; border-radius: 0;
border-right: 2px solid var(--trr-brand); border-bottom: 2px solid var(--trr-brand);
transform: rotate(45deg);
transition: transform var(--trr-dur) ease;
}
.trr-article .trr-faq[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.trr-article .trr-faq > summary:hover { color: var(--trr-brand); background: none; }
.trr-article .trr-faq .trr-faq-a { max-width: var(--trr-maxw-text); padding: 0 0 var(--trr-s-4); font-size: var(--trr-fs-500); line-height: 1.7; color: var(--trr-body); }
.trr-faq .trr-faq-a p { margin: 0 0 var(--trr-s-2); }
.trr-faq .trr-faq-a p:last-child { margin: 0; } .trr-eeat {
display: grid; gap: var(--trr-s-4) var(--trr-s-5);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
margin: var(--trr-s-4) 0 0; padding: 0; list-style: none;
}
.trr-eeat li {
display: grid; gap: var(--trr-s-1); align-content: start;
margin: 0; padding: var(--trr-s-3) 0 0;
background: none; border: 0; border-top: 1px solid var(--trr-line); border-radius: 0; box-shadow: none;
}
.trr-eeat .trr-eeat-t { display: flex; align-items: center; gap: var(--trr-s-2); font-size: var(--trr-fs-400); font-weight: 700; line-height: 1.35; color: var(--trr-ink); }
.trr-eeat .trr-eeat-d { font-size: var(--trr-fs-400); line-height: 1.55; color: var(--trr-body); }
.trr-eeat .trr-eeat-d a, .trr-article > p a, .trr-infobox a, .trr-faq-a a {
color: var(--trr-brand); text-decoration: underline; text-decoration-color: var(--trr-brand-rule); text-underline-offset: .15em;
} .trr-linkcards {
display: grid; gap: var(--trr-s-3);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
margin: var(--trr-s-4) 0 0; padding: 0; list-style: none;
}
.trr-linkcards li { margin: 0; }
.trr-linkcards a {
display: grid; gap: var(--trr-s-1); align-content: start; height: 100%;
min-height: var(--trr-touch);
padding: 14px var(--trr-s-4);
background: var(--trr-surface);
border: 1px solid var(--trr-line); border-radius: var(--trr-r-lg);
color: var(--trr-body); text-decoration: none; box-shadow: none;
transition: border-color var(--trr-dur) ease;
}
.trr-linkcards a:hover { border-color: var(--trr-line-strong); }
.trr-linkcards .trr-lc-title { display: block; margin: 0; font-size: var(--trr-fs-400); font-weight: 700; line-height: 1.35; color: var(--trr-brand); }
.trr-linkcards a:hover .trr-lc-title { text-decoration: underline; text-decoration-color: var(--trr-brand-rule); }
.trr-linkcards .trr-lc-sub { display: block; font-size: var(--trr-fs-300); line-height: 1.45; color: var(--trr-mut); } .trr-toolgrid {
display: grid; gap: var(--trr-s-3);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
margin: var(--trr-s-5) 0 0; padding: 0; list-style: none;
}
.trr-toolgrid > li { margin: 0; min-width: 0; }
.trr-toolgrid a, .trr-toolgrid .is-soon {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
grid-template-areas: "icon title" "icon desc" "icon fact" "icon cta";
column-gap: var(--trr-s-3); row-gap: var(--trr-s-1);
align-content: start; height: 100%;
padding: var(--trr-s-4);
background: var(--trr-surface);
border: 1px solid var(--trr-line); border-radius: var(--trr-r-lg);
color: var(--trr-body); text-decoration: none; box-shadow: none;
transition: border-color var(--trr-dur) ease;
}
.trr-toolgrid a:hover { border-color: var(--trr-line-strong); }
.trr-tool-icon {
grid-area: icon; align-self: start;
width: 40px; height: 40px;
display: grid; place-items: center;
background: var(--trr-bg); color: var(--trr-brand);
border-radius: var(--trr-r-md);
font-size: 1.25rem; line-height: 1;
}
.trr-tool-icon .trr-ico { width: 22px; height: 22px; }
.trr-tool-title { grid-area: title; font-size: var(--trr-fs-500); font-weight: 700; line-height: 1.3; color: var(--trr-ink); }
.trr-toolgrid a:hover .trr-tool-title { color: var(--trr-brand); }
.trr-tool-desc { grid-area: desc; font-size: var(--trr-fs-400); line-height: 1.55; color: var(--trr-body); }
.trr-tool-fact { grid-area: fact; margin-top: 2px; font-size: var(--trr-fs-300); font-weight: 600; line-height: 1.45; color: var(--trr-mut); background: none; padding: 0; border-radius: 0; }
.trr-tool-cta {
grid-area: cta; justify-self: start;
display: inline-flex; align-items: center; gap: 6px;
margin-top: var(--trr-s-1);
font-size: var(--trr-fs-400); font-weight: 600; line-height: 1.3; color: var(--trr-brand);
}
.trr-tool-cta::after {
content: ""; width: 7px; height: 7px; margin-left: 1px;
border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg);
}
.trr-toolgrid a:hover .trr-tool-cta { text-decoration: underline; text-decoration-color: var(--trr-brand-rule); }
.trr-toolgrid .is-soon { border-style: dashed; border-color: var(--trr-line-strong); background: none; }
.trr-toolgrid .is-soon .trr-tool-icon { color: var(--trr-mut); }
.trr-toolgrid .is-soon .trr-tool-title { color: var(--trr-body); } .trr-projection { margin: var(--trr-s-6) 0; }
.trr-projection .trr-panel { border: 1px solid var(--trr-line); border-radius: var(--trr-r-xl); }
.trr-proj-body { display: grid; gap: var(--trr-s-4); padding: var(--trr-s-4); }
@container (min-width: 560px) { .trr-proj-body { padding: var(--trr-s-5); } }
.trr-proj-cta { display: flex; flex-wrap: wrap; gap: var(--trr-s-2); align-items: center; }
.trr .trr-proj-cta .trr-btn { flex: 0 1 auto; } .trr-tvscale-outer { display: grid; gap: var(--trr-s-2); justify-items: center; }
.trr-tvscale { position: relative; width: min(100%, 640px); aspect-ratio: 1.78 / 1.06; margin-top: var(--trr-s-2); }
.trr-tvscale-rect {
position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
border: 1px solid var(--trr-line-ui);
border-radius: var(--trr-r-xs);
background: transparent;
}
.trr-tvscale-rect .trr-tvscale-label {
position: absolute; top: 3px; right: 6px;
font-size: var(--trr-fs-200); font-weight: 600; color: var(--trr-mut); white-space: nowrap;
}
.trr-tvscale-rect.is-mark { z-index: 2; border: 2px solid var(--trr-brand); background: var(--trr-brand-tint); box-shadow: none; }
.trr-tvscale-rect.is-mark .trr-tvscale-label { color: var(--trr-brand); font-weight: 700; } .trr-tvscale-rect.is-mark .trr-tvscale-label { right: auto; left: 6px; }
.trr-tvtable-wrap {
max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
border: 1px solid var(--trr-line); border-radius: var(--trr-r-lg);
}
.trr .trr-tvtable { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--trr-fs-400); background: var(--trr-surface); }
.trr .trr-tvtable th {
padding: 10px var(--trr-s-3);
background: var(--trr-bg-head);
font-size: var(--trr-fs-300); font-weight: 600; color: var(--trr-ink);
text-transform: none; letter-spacing: 0; white-space: nowrap; text-align: left;
border-bottom: 1px solid var(--trr-line);
}
.trr .trr-tvtable td { padding: 10px var(--trr-s-3); border-top: 0; border-bottom: 1px solid var(--trr-line); white-space: nowrap; color: var(--trr-body); }
.trr .trr-tvtable tr:last-child td { border-bottom: 0; }
.trr .trr-tvtable td strong { font-weight: 800; }
.trr .trr-tvtable tr.is-mark td { background: var(--trr-brand-tint); color: var(--trr-ink); }
.trr .trr-tvtable tr.is-mark td:first-child { box-shadow: inset 3px 0 0 var(--trr-brand); }
.trr-tvtable .trr-note { display: inline; } body:has(.trr-article) .rh-content-wrap > .main-side,
body:has(.trr-article) .main-side.page { width: 100% !important; float: none !important; }
body:has(.trr-article) .rh-content-wrap > .sidebar,
body:has(.trr-article) .rh-content-wrap .sidebar { display: none !important; }
body:has(.trr-article) .rh-post-wrapper { max-width: none; padding: 30px clamp(20px, 4vw, 48px) 40px; } @media (prefers-reduced-motion: reduce) {
.trr *, .trr-article *, .trr-resultbar { transition: none !important; animation: none !important; }
}