:root { color-scheme:light; --ink:#15231e; --paper:#eee9dc; --acid:#d8ff3e; --orange:#ed5b2a; --muted:#687069; --line:#a8ab9f; --white:#fffdf4; }
* { box-sizing:border-box; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; line-height:1.65; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:linear-gradient(90deg,transparent 49.8%,rgba(21,35,30,.14) 50%,transparent 50.2%); background-size:72px 72px; }
main { width:min(1040px,100%); margin:auto; padding:30px 24px 76px; position:relative; }
a { color:inherit; }
.back { margin:0 0 52px; font-size:11px; font-weight:800; letter-spacing:.16em; }
header { display:grid; grid-template-columns:1.2fr .7fr; gap:40px; align-items:end; margin-bottom:34px; }
.eyebrow { grid-column:1/-1; margin:0; color:var(--orange); font-size:11px; font-weight:900; letter-spacing:.22em; }
h1 { margin:0; font-family:Georgia,"Yu Mincho",serif; font-size:clamp(52px,9vw,104px); line-height:.92; letter-spacing:-.075em; }
h1 span { display:inline-block; background:var(--acid); padding:0 .08em .08em; transform:rotate(-1deg); }
.lede { margin:0 0 8px; max-width:420px; color:var(--muted); font-size:15px; }
.calculator { display:grid; grid-template-columns:1.08fr .92fr; border:2px solid var(--ink); background:var(--white); box-shadow:12px 12px 0 var(--ink); }
.calculator>* { min-width:0; }
form { padding:34px; }
.field--hero { border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:25px; }
.field--hero label { display:block; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.08em; }
.field--hero div { display:flex; align-items:baseline; }
.field--hero input { width:140px; border:0; border-bottom:4px solid var(--orange); background:transparent; color:var(--ink); font:700 72px/1 Georgia,serif; outline:none; }
.field--hero span { margin-left:10px; font-size:22px; font-weight:800; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; }
.field-grid label { color:var(--muted); font-size:12px; font-weight:700; }
.field-grid label span { display:flex; align-items:center; margin-top:5px; color:var(--ink); font-size:13px; }
.field-grid input { min-width:0; width:100%; border:1px solid var(--line); background:#f7f4ea; padding:10px 11px; font:700 20px Georgia,serif; }
.hint { margin:22px 0 0; color:var(--muted); font-size:11px; }
.result { display:flex; flex-direction:column; justify-content:center; background:var(--ink); color:var(--white); padding:36px; }
.result>p:first-child { margin:0; color:var(--acid); font-size:11px; font-weight:900; letter-spacing:.13em; }
.total { display:flex; align-items:start; gap:7px; margin:8px 0 28px; }
.total span { margin-top:9px; color:var(--acid); font-size:23px; }
.total strong { color:var(--acid); font:700 clamp(48px,7vw,78px)/1 Georgia,serif; letter-spacing:-.06em; }
dl { margin:0 0 20px; border-top:1px solid #53605a; }
dl div { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid #53605a; font-size:13px; }
dd { margin:0; font-variant-numeric:tabular-nums; }
.summary { min-height:3em; color:#c6cec8; font-size:13px; }
button { border:1px solid var(--acid); background:transparent; color:var(--acid); padding:11px 13px; font-weight:800; cursor:pointer; }
button:hover { background:var(--acid); color:var(--ink); }
.copy-status { min-height:1.3em; margin-bottom:0; color:#c6cec8; font-size:11px; }
.reading { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:66px 0 34px; background:var(--line); border:1px solid var(--line); }
.reading>div { background:var(--paper); padding:26px; }
.reading>div>p:first-child { color:var(--orange); font:900 12px/1 sans-serif; }
.reading h2 { margin:9px 0; font:700 21px Georgia,serif; }
.reading p:last-child { margin-bottom:0; color:var(--muted); font-size:13px; }
.affiliate { display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center; border:2px solid var(--ink); padding:23px 25px; background:var(--acid); }
.affiliate p { margin:0 0 5px; font-size:10px; font-weight:900; letter-spacing:.15em; }
.affiliate strong,.affiliate small { display:block; }
.affiliate small { margin-top:4px; color:#4f5a50; }
.affiliate a { background:var(--ink); color:var(--white); padding:13px 16px; font-size:13px; font-weight:800; text-decoration:none; }
.notice { margin-top:28px; color:var(--muted); font-size:11px; }
@media (max-width:720px) { main{padding:20px 15px 55px}.back{margin-bottom:38px}header{display:block}.eyebrow{margin-bottom:14px}h1{font-size:58px}.lede{max-width:none;margin-top:24px;overflow-wrap:anywhere}.calculator{display:block;box-shadow:5px 5px 0 var(--ink)}form,.result{padding:25px 20px}.field-grid,.reading{grid-template-columns:1fr}.affiliate{grid-template-columns:1fr}.affiliate a{text-align:center} }