:root { --ink:#202822; --muted:#525e56; --line:#d5dcd6; --green:#175c3c; --green-light:#edf5ef; --rust:#9b3d2e; --paper:#fff; --soft:#f5f7f5; }
* { box-sizing:border-box; }
img { max-width:100%; height:auto; display:block; }
.tool-grid > * { min-width:0; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.6; letter-spacing:0; }
a { color:var(--green); text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
button,input,select { font:inherit; letter-spacing:0; }
button,a,select,input { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #b45b22; outline-offset:4px; }
[hidden] { display:none!important; }
.wrap { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
.masthead { border-bottom:1px solid var(--line); }
.masthead .wrap { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { color:var(--ink); text-decoration:none; font-weight:750; line-height:1.25; font-size:20px; max-width:245px; }
.brand span { display:block; color:var(--green); font-weight:400; font-size:13px; margin-top:4px; }
.main-nav { display:flex; flex-wrap:wrap; gap:24px; }
.main-nav a { color:var(--ink); text-decoration:none; font-size:14px; padding:10px 0; border-bottom:2px solid transparent; }
.main-nav a:hover { border-color:var(--green); }
.skip-link { position:fixed; top:-80px; left:16px; z-index:10; background:#fff; padding:10px; }
.skip-link:focus { top:10px; }
.intro { padding:36px 0 25px; border-bottom:1px solid var(--line); }
h1,h2,h3,p { margin-top:0; }
h1 { font-family:Georgia,'Times New Roman',serif; font-size:42px; line-height:1.16; font-weight:400; margin-bottom:15px; overflow-wrap:anywhere; }
h2 { font-size:24px; line-height:1.3; margin-bottom:14px; }
h3 { font-size:18px; line-height:1.4; margin-bottom:10px; }
.intro .lead { max-width:820px; font-size:19px; line-height:1.55; margin-bottom:12px; }
.small,.scope,.review { font-size:13px; color:var(--muted); }
.privacy-line { font-size:14px; color:var(--green); margin:12px 0 0; }
.tool-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin:26px 0 12px; }
.tool-heading h2 { margin:0; }
.tool-grid { display:grid; grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr); gap:40px; align-items:start; padding-bottom:40px; }
.tool-form { min-width:0; }
.scene-links { padding-block:24px; border-bottom:1px solid var(--line); }
.scene-links ul { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 32px; }
.scene-links li { min-width:0; }
.scene-links a { display:block; font-size:15px; overflow-wrap:anywhere; }
@media (max-width:560px) { .scene-links ul { grid-template-columns:1fr; } }
.tool-form fieldset { border:0; padding:0; margin:0 0 22px; min-width:0; }
.tool-form legend { font-size:18px; font-weight:700; padding:0; margin-bottom:12px; }
.select-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 0 15px; }
.select-row label,.full-select label { font-size:14px; font-weight:600; }
select { width:100%; height:44px; min-width:0; background:#fff; border:1px solid #849489; border-radius:4px; padding:8px 32px 8px 10px; color:var(--ink); font-size:14px; margin-top:7px; }
.fact-row { display:grid; grid-template-columns:minmax(0,1fr) 225px; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line); }
.fact-row fieldset { display:contents; }
.fact-row legend { float:left; font-weight:400; font-size:14px; margin:0; line-height:1.5; max-width:100%; }
.choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; }
.choice { position:relative; display:flex; align-items:center; justify-content:center; min-height:38px; text-align:center; }
.choice input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
.choice span { width:100%; min-height:38px; display:grid; place-items:center; padding:6px 3px; border:1px solid var(--line); border-radius:3px; color:var(--muted); font-size:12px; line-height:1.25; }
.choice input:checked+span { background:var(--green); color:#fff; border-color:var(--green); }
.choice input:hover+span { border-color:var(--green); }
.choice input:focus-visible+span { outline:3px solid #b45b22; outline-offset:2px; }
.full-select { margin:12px 0 18px; }
.field-note { font-size:13px; color:var(--muted); margin:5px 0 15px; }
details { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:10px 0 22px; padding:14px 0; }
summary { cursor:pointer; font-size:15px; font-weight:700; }
details[open] summary { margin-bottom:14px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.button,button { border:1px solid var(--green); border-radius:4px; color:#fff; background:var(--green); padding:11px 17px; font-size:14px; font-weight:600; cursor:pointer; line-height:1.3; min-height:43px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-align:center; }
.button:hover,button:hover { background:#10422b; }
.secondary { color:var(--green); background:#fff; }
.secondary:hover { background:var(--green-light); }
button:disabled { color:#66716a; border-color:var(--line); background:#edf0ed; cursor:default; }
.icon { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.side-intro { border-left:1px solid var(--line); padding-left:28px; }
.side-intro img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; }
figure { margin:0 0 22px; }
figcaption { font-size:12px; color:var(--muted); line-height:1.5; margin-top:9px; }
.role-note { display:block; font-size:12px; margin:4px 0 12px; color:var(--muted); }
.side-intro h3 { margin-top:26px; }
.side-intro ul { padding-left:21px; }
.result { min-width:0; border-top:3px solid var(--green); padding-top:20px; }
.result section { padding:16px 0; border-bottom:1px solid var(--line); }
.result h2 { font-size:24px; }
.result h3 { color:var(--green); }
.result ul { margin:0; padding-left:20px; }
.result li { font-size:14px; margin:0 0 9px; }
.result-intro { font-size:15px; line-height:1.55; }
.attention h3 { color:var(--rust); }
.limitations { padding:16px 0 0; font-size:14px; font-weight:600; }
.ad { border-top:1px solid var(--line); margin-top:22px; padding:20px 0; }
#comparison-result { margin-top:20px; }
.ad h2,.ad h3 { font-size:19px; }
.ad .disclosure { font-size:13px; color:var(--muted); margin:0 0 12px; max-width:730px; }
.ad .boundary { font-size:14px; margin-top:12px; max-width:750px; }
.reading { padding:35px 0 50px; border-top:1px solid var(--line); }
.reading-top { display:flex; justify-content:space-between; align-items:baseline; gap:20px; }
.guide-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 36px; list-style:none; padding:0; margin:10px 0 0; }
.guide-list li { padding:19px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:31px 1fr; gap:10px; }
.guide-number { color:var(--rust); font-family:Georgia,serif; font-size:20px; }
.guide-list h3 { font-size:17px; margin:0 0 5px; }
.guide-list h3 a { text-decoration:none; }
.guide-list p { font-size:14px; color:var(--muted); margin:0; }
.article-wrap { max-width:840px; width:calc(100% - 40px); margin:0 auto; padding:30px 0 50px; }
.breadcrumb { font-size:13px; margin-bottom:25px; }
.article-wrap h1 { font-size:40px; }
.answer { font-size:19px; line-height:1.6; border-left:3px solid var(--green); padding-left:20px; margin:20px 0; }
.article-meta { border-block:1px solid var(--line); padding:12px 0; margin:22px 0 26px; }
.article-meta p { margin:3px 0; font-size:13px; color:var(--muted); }
.article-body { max-width:760px; }
.article-body h2 { margin-top:35px; font-size:25px; }
.article-body p,.article-body li { font-size:17px; }
.article-body li { margin-bottom:9px; }
.article-body .citation { font-size:13px; color:var(--muted); margin-top:10px; }
.citation a { font-size:13px; }
.example { padding:18px 0; border-block:1px solid var(--line); margin:26px 0; }
.example h2 { font-size:19px; margin-top:0; }
.example p { margin-bottom:0; }
.explanation-image { max-width:760px; margin-top:28px; }
.explanation-image img { width:100%; height:auto; display:block; }
.related { border-top:1px solid var(--line); margin-top:30px; padding-top:20px; }
.sources { border-top:1px solid var(--line); margin-top:30px; padding-top:20px; }
.sources li { font-size:14px; margin-bottom:15px; }
.policy-list dt { font-weight:700; margin-top:20px; }
.policy-list dd { margin:5px 0 0; }
footer { border-top:1px solid var(--line); background:var(--soft); padding:26px 0; }
footer .links { display:flex; flex-wrap:wrap; gap:12px 22px; margin-bottom:14px; font-size:13px; }
footer p { font-size:12px; max-width:800px; color:var(--muted); margin-bottom:6px; }
.announce { font-size:13px; color:var(--green); min-height:21px; margin:10px 0; }
.print-note { display:none; }
@media (max-width:1000px) { .tool-grid { gap:25px; } .fact-row { grid-template-columns:1fr; gap:9px; } .choices { width:225px; } }
@media (max-width:850px) { .wrap { width:calc(100% - 40px); } .tool-grid { grid-template-columns:1fr; gap:25px; } .side-intro { border-left:0; padding-left:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; } .side-intro h3 { margin-top:0; } .fact-row { grid-template-columns:minmax(0,1fr) 225px; } .article-wrap { width:100%; } .article-wrap h1 { font-size:36px; } }
@media (max-width:560px) { .wrap { width:calc(100% - 32px); } .masthead .wrap { align-items:flex-start; flex-direction:column; gap:4px; padding:17px 0 9px; } .brand { font-size:19px; max-width:none; } .main-nav { gap:20px; } .intro { padding:25px 0 20px; } h1 { font-size:33px; } .intro .lead { font-size:17px; } .tool-heading { align-items:flex-start; flex-direction:column; gap:5px; } .tool-heading h2 { font-size:22px; } .select-row { grid-template-columns:1fr; } .fact-row { grid-template-columns:1fr; gap:9px; } .choices { width:100%; max-width:300px; } .choice span { min-height:41px; font-size:13px; } .side-intro { display:block; } .side-intro h3 { margin-top:25px; } .guide-list { grid-template-columns:1fr; } .article-wrap h1 { font-size:32px; } .article-body p,.article-body li { font-size:16px; } .answer { font-size:17px; padding-left:15px; } .reading-top { display:block; } .button,button { max-width:100%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media (max-width:850px) { .article-wrap { width:calc(100% - 40px); } }
@media (max-width:560px) { .article-wrap { width:calc(100% - 32px); } }
@media print { body { color:#000; background:#fff; font-size:11pt; } .wrap { width:100%; } .masthead,footer,.intro,.tool-heading,.tool-form,.side-intro,.reading,.ad,.actions,.announce,.breadcrumb,.related,.no-print { display:none!important; } .tool-grid { display:block; } .result { border:0; } .result section { break-inside:avoid; } .result li { font-size:10pt; } .result h2 { font-size:18pt; } .result h3 { color:#000; font-size:13pt; } .result .small { color:#000; } .article-wrap { padding:0; width:100%; max-width:none; } a { color:#000; } .print-note { display:block; } }