:root { color-scheme: light; --paper:#f7f4ec; --ink:#242520; --muted:#666960; --line:rgba(37,38,33,.17); --green:#365a44; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-size:1rem; line-height:1.9; }
a { color:var(--green); }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:10; padding:.8rem 1rem; background:var(--ink); color:#fff; }
.skip-link:focus { top:1rem; }
.site-header { min-height:72px; padding:0 max(1.25rem,calc((100% - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.site-header a { text-decoration:none; }
.brand { color:var(--ink); font:700 1.6rem/1 "Avenir Next",system-ui,sans-serif; letter-spacing:.08em; }
.article-shell { width:min(760px,calc(100% - 2rem)); margin:0 auto; padding:2rem 0 5rem; }
.breadcrumbs ol { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 3rem; padding:0; list-style:none; color:var(--muted); font-size:.82rem; }
.breadcrumbs li+li::before { content:"/"; margin-right:.4rem; }
.article-header { margin-bottom:2.5rem; }
.affiliate-disclosure { margin:-1rem 0 2rem; padding:.65rem .9rem; border-left:3px solid var(--green); background:rgba(54,90,68,.07); color:var(--muted); font-size:.88rem; }
.quick-choice { margin:-.6rem 0 1.75rem; padding:1rem; border:1px solid var(--line); border-radius:14px; background:#fffdf8; }
.quick-choice h2 { margin:0 0 .8rem; font-size:1.25rem; }
.quick-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.quick-choice-card { min-width:0; padding:.8rem; border:1px solid var(--line); border-radius:10px; background:white; }
.quick-choice-card h3 { margin:0; font-size:1rem; line-height:1.5; }
.quick-choice-card p { margin:.35rem 0 .75rem; color:#4f524b; font-size:.9rem; line-height:1.65; }
.quick-choice-card a { display:inline-block; padding:.45rem .7rem; border-radius:7px; background:var(--green); color:white; font-size:.88rem; font-weight:700; line-height:1.5; text-decoration:none; }
.section-links ul { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; padding-left:1.2rem; }
.research-sources { margin-top:3rem; padding-top:1rem; border-top:1px solid var(--line); }
.research-sources ul { padding-left:1.2rem; }
.comparison-table-wrap { max-width:100%; overflow-x:auto; margin:1.25rem 0 2rem; border:1px solid var(--line); border-radius:10px; background:#fffdf8; }
.comparison-table { width:100%; min-width:680px; border-collapse:collapse; font-size:.9rem; line-height:1.65; }
.comparison-table caption { padding:.8rem 1rem; text-align:left; font-weight:700; }
.comparison-table th,.comparison-table td { padding:.8rem 1rem; border-top:1px solid var(--line); border-right:1px solid var(--line); text-align:left; vertical-align:top; }
.comparison-table th:last-child,.comparison-table td:last-child { border-right:0; }
.comparison-table thead { background:rgba(54,90,68,.08); }
.cable-supplement { margin-top:3rem; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:12px; background:#fffdf8; overflow-wrap:anywhere; }
.cable-supplement h2 { margin:0 0 1rem; }
.cable-supplement ol,.cable-supplement-products { padding-left:1.35rem; }
.cable-supplement li+li { margin-top:.45rem; }
.cable-supplement-table-wrap { max-width:100%; overflow-x:auto; margin:1rem 0; }
.cable-supplement-table { width:100%; border-collapse:collapse; line-height:1.65; }
.cable-supplement-table caption { padding:.6rem 0; text-align:left; font-weight:700; }
.cable-supplement-table th,.cable-supplement-table td { padding:.65rem .55rem; border-top:1px solid var(--line); text-align:left; vertical-align:top; }
.cable-supplement-table thead { background:rgba(54,90,68,.08); }
.cable-supplement-note,.cable-supplement-links,.cable-supplement-affiliate { color:var(--muted); font-size:.86rem; }
.cable-supplement-affiliate { padding:.55rem .7rem; border-left:3px solid var(--green); background:rgba(54,90,68,.07); }
.category { color:var(--green); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
h1,h2 { font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:500; line-height:1.45; }
h1 { margin:.5rem 0 1rem; font-size:clamp(2rem,7vw,3.6rem); }
h2 { margin:3.5rem 0 1rem; font-size:clamp(1.4rem,4vw,2rem); }
.lead { color:#4f524b; font-size:1.08rem; }
.dates { display:flex; flex-wrap:wrap; gap:1rem; color:var(--muted); font-size:.82rem; }
figure { margin:2.5rem 0; }
figure img { display:block; width:100%; height:auto; border-radius:14px; }
figcaption { margin-top:.5rem; color:var(--muted); font-size:.78rem; }
.related { margin-top:4rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.related ul { padding-left:1.2rem; }
footer { min-height:90px; padding:1.5rem max(1rem,calc((100% - 1120px)/2)); display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); }
footer a { color:var(--ink); font-weight:700; text-decoration:none; }
footer small { color:var(--muted); }
@media (max-width:600px) { .quick-choice-grid{grid-template-columns:1fr}.quick-choice{padding:.8rem}.quick-choice-card{padding:.7rem}.article-shell{padding-top:1.25rem}.breadcrumbs{overflow-wrap:anywhere}.dates{display:grid;gap:.1rem} }
@media (max-width:600px) { .cable-supplement { padding:.8rem; }.cable-supplement-table { font-size:.9rem; }.cable-supplement-table th,.cable-supplement-table td { padding:.55rem .4rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important} }