:root { color-scheme: light; --ink:#1f2421; --paper:#f4efe5; --card:#fffdf8; --coral:#d8573f; --line:#d7cdbd; --muted:#6d6a61; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Georgia,'Hiragino Mincho ProN',serif; line-height:1.65; }
main { max-width:880px; margin:0 auto; padding:34px 22px 70px; }
main > p:first-child { margin:0 0 60px; font:600 13px/1.2 system-ui,sans-serif; letter-spacing:.08em; }
a { color:inherit; }
.masthead { max-width:690px; margin-bottom:34px; }
.eyebrow { color:var(--coral); font:700 11px/1 system-ui,sans-serif; letter-spacing:.18em; }
h1 { margin:12px 0 18px; font-size:clamp(38px,8vw,76px); line-height:1.05; letter-spacing:-.06em; }
h1 em { color:var(--coral); font-style:normal; }
.dek { max-width:560px; color:var(--muted); font-size:17px; }
#tool { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.75fr); gap:0; background:var(--card); border:1px solid var(--ink); box-shadow:9px 9px 0 var(--coral); }
.mode-switch, #price-form { grid-column:1; padding:26px 28px; }
.mode-switch { border-bottom:1px solid var(--line); display:flex; gap:20px; font:600 13px system-ui,sans-serif; }
.mode-switch label { cursor:pointer; }
.mode-switch input { accent-color:var(--coral); }
.amount-label, label { display:block; font:600 13px system-ui,sans-serif; }
.amount-label { margin-bottom:7px; color:var(--muted); }
.amount-wrap { display:flex; align-items:center; border-bottom:2px solid var(--ink); margin-bottom:25px; }
.amount-wrap span { font-size:28px; }
input[type=number] { width:100%; border:0; background:transparent; color:var(--ink); font:600 30px Georgia,serif; padding:6px 8px; outline:none; }
.grid { display:grid; gap:16px; }
.grid input { display:block; width:100%; margin-top:5px; border:1px solid var(--line); padding:9px 10px; font:500 16px system-ui,sans-serif; }
.hint { color:var(--muted); font-size:12px; margin:18px 0 0; }
.result { grid-column:2; grid-row:1 / span 2; background:var(--ink); color:var(--paper); padding:30px 26px; display:flex; flex-direction:column; justify-content:center; }
.result-kicker { color:#dbb9ad; font:700 12px system-ui,sans-serif; letter-spacing:.08em; }
.result-number { margin:6px 0 10px; color:#ff9b83; display:flex; align-items:start; gap:5px; }
.result-number span { font:600 22px system-ui,sans-serif; margin-top:10px; }
.result-number strong { font:600 clamp(40px,6vw,64px)/1 Georgia,serif; letter-spacing:-.06em; }
.result-summary { min-height:52px; font-size:14px; }
.breakdown { border-top:1px solid #555b55; margin:20px 0; padding-top:8px; }
.breakdown div { display:flex; justify-content:space-between; border-bottom:1px solid #555b55; padding:7px 0; font-size:13px; }
.breakdown dd { margin:0; font-variant-numeric:tabular-nums; }
button { border:1px solid #ff9b83; background:transparent; color:#ffb09c; padding:10px 12px; cursor:pointer; font:600 12px system-ui,sans-serif; }
button:hover { background:#ff9b83; color:var(--ink); }
.copy-status { min-height:1.4em; color:#dbb9ad; font-size:12px; }
.notes { margin:62px 0 20px; border-top:1px solid var(--ink); padding-top:18px; max-width:650px; }
.notes h2 { font-size:20px; margin:0 0 8px; }
.notes p, .privacy-note { color:var(--muted); font-size:14px; }
.privacy-note { font-family:system-ui,sans-serif; font-size:12px; }
@media (max-width:680px) { main { padding:22px 16px 50px; } main > p:first-child { margin-bottom:42px; } #tool { display:block; box-shadow:6px 6px 0 var(--coral); } .mode-switch, #price-form { padding:21px 19px; } .result { padding:25px 19px; } h1 { font-size:43px; } }