:root { --ink:#17313a; --muted:#5b747a; --teal:#087f73; --teal-dark:#055e58; --mint:#e9f6f1; --cream:#fbfaf5; --line:#d8e5e1; --coral:#c7584a; --shadow:0 16px 50px rgba(18,51,52,.10); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--cream); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:radial-gradient(circle at 80% 0%,#e5f4ed 0,transparent 35rem),var(--cream); line-height:1.5; } a { color:var(--teal-dark); } .shell { width:min(1100px, calc(100% - 40px)); margin:auto; } .site-header { border-bottom:1px solid rgba(216,229,225,.75); background:rgba(251,250,245,.82); backdrop-filter:blur(12px); position:sticky; top:0; z-index:2; } .nav { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .brand { text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.03em; } .brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:var(--teal); color:#fff; font-size:21px; } .privacy-pill,.status { border:1px solid #b7ded4; background:#f2fbf7; color:var(--teal-dark); border-radius:999px; padding:6px 11px; font-size:12px; font-weight:750; } .hero { display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center; padding:72px 0 54px; } .eyebrow { margin:0 0 10px; color:var(--teal); font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(38px,6vw,72px); line-height:1.02; letter-spacing:-.065em; max-width:720px; margin-bottom:24px; } h2 { letter-spacing:-.04em; line-height:1.15; font-size:clamp(24px,3vw,34px); margin-bottom:12px; } h3 { margin-bottom:8px; } .hero-lede { color:var(--muted); max-width:640px; font-size:18px; } .hero-points { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:26px; color:var(--teal-dark); font-size:14px; font-weight:700; } .hero-card,.checker-card,.results-card,.info-card { border:1px solid var(--line); background:rgba(255,255,255,.86); border-radius:24px; box-shadow:var(--shadow); } .hero-card { padding:34px; transform:rotate(1.5deg); } .shield { width:48px; height:48px; display:grid; place-items:center; color:#fff; border-radius:15px; background:var(--teal); font-size:22px; margin-bottom:22px; } .small-note { color:var(--muted); font-size:13px; } .checker-card,.results-card { padding:32px; margin-bottom:24px; } .section-heading,.result-header,.empty-result { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; } .step-number { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; background:var(--mint); color:var(--teal-dark); border-radius:50%; font-weight:850; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin:25px 0; } .field { display:flex; flex-direction:column; gap:9px; border:0; padding:0; margin:0; min-width:0; } label span, legend { font-weight:800; font-size:14px; } input,select { font:inherit; border:1px solid #bfd3cd; background:#fff; color:var(--ink); border-radius:12px; padding:12px 13px; min-height:48px; outline-color:var(--teal); } .inline-input { display:flex; gap:8px; } .inline-input input { min-width:0; flex:1; } .inline-input select { width:120px; } label small,.field small { color:var(--muted); font-size:12px; } .history-choice { gap:12px; } .history-choice label { display:flex; align-items:center; gap:9px; font-size:15px; } .history-choice input { min-height:auto; accent-color:var(--teal); } .primary-button { cursor:pointer; border:0; border-radius:14px; padding:14px 20px; font:inherit; font-weight:800; color:#fff; background:var(--teal); box-shadow:0 8px 18px rgba(8,127,115,.2); } .primary-button:hover { background:var(--teal-dark); } .dose-fields { margin:22px 0; padding-top:22px; border-top:1px solid var(--line); } .subheading p { color:var(--muted); margin-bottom:16px; } .dose-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .dose-fields .subheading { grid-column:1/-1; } .dose-field { display:grid; grid-template-columns:1fr 80px; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:13px; } .dose-field small { grid-column:1/-1; } .dose-field input { min-height:40px; padding:7px 9px; } .result-header { align-items:center; margin-bottom:8px; } .lead { color:var(--muted); } .timeline { list-style:none; padding:0; margin:26px 0; display:grid; gap:12px; counter-reset:item; } .timeline li { counter-increment:item; display:grid; grid-template-columns:190px 1fr; gap:15px; padding:17px; border-radius:14px; background:#f1f8f5; border:1px solid #d8ebe4; } .timeline li::before { content:counter(item); display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--teal); color:#fff; font-weight:800; grid-row:span 2; } .timeline-when { font-weight:800; color:var(--teal-dark); } .minimums { border-top:1px solid var(--line); padding-top:22px; } .chip-grid { display:flex; flex-wrap:wrap; gap:8px; } .chip { background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 11px; color:var(--muted); font-size:13px; } .chip b { color:var(--teal-dark); margin-left:5px; } .dose-table { border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:22px 0; } .dose-row { display:grid; grid-template-columns:1.7fr .7fr .7fr 1.2fr; gap:12px; padding:13px 15px; border-top:1px solid var(--line); align-items:center; font-size:14px; } .dose-row:first-child { border-top:0; } .dose-head { background:#f1f8f5; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; } .needs { color:var(--coral); } .met { color:var(--teal-dark); } .notice { padding:20px; border-radius:15px; background:#fff7e6; border:1px solid #f0d79b; } .info-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:24px; margin:34px 0 64px; } .info-card { padding:28px; box-shadow:none; } .info-card li { margin:10px 0; color:var(--muted); } .sources { display:flex; flex-direction:column; gap:12px; } .sources h2 { margin-bottom:4px; } .empty-result { align-items:center; min-height:120px; } .empty-result p { color:var(--muted); margin:0; } .site-footer { padding:30px 0 52px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; } .site-footer p { margin:4px 0; }
@media (max-width: 760px) { .shell { width:min(100% - 28px, 650px); } .hero { grid-template-columns:1fr; padding-top:45px; gap:24px; } h1 { font-size:46px; } .hero-card { transform:none; } .form-grid,.info-grid { grid-template-columns:1fr; } .checker-card,.results-card { padding:22px; } .timeline li { grid-template-columns:28px 1fr; } .timeline-when { grid-column:2; } .timeline li > div:last-child { grid-column:2; } .dose-fields { grid-template-columns:1fr; } .dose-row { grid-template-columns:1.5fr .55fr .55fr 1fr; font-size:12px; padding:11px 9px; gap:7px; } }
/* Local pasted-history review */
.paste-card { margin-top:24px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--mint); }
.paste-card .subheading p:last-child { margin-bottom:12px; color:var(--muted); }
#history-paste { width:100%; resize:vertical; min-height:130px; padding:12px; border:1px solid #b7d8cf; border-radius:12px; background:#fff; color:var(--ink); font:inherit; line-height:1.45; }
.paste-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; }
.secondary-button { border:1px solid var(--teal); border-radius:12px; padding:10px 14px; background:#fff; color:var(--teal-dark); font:inherit; font-weight:750; cursor:pointer; }
.secondary-button:hover { background:#f5fffb; }
.paste-preview { margin-top:16px; overflow:auto; border:1px solid #c9e2d9; border-radius:12px; background:#fff; }
.paste-row { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:12px; padding:10px 12px; border-top:1px solid #e3eeea; font-size:13px; }
.paste-row:first-child { border-top:0; }
.paste-head { background:#f4fbf7; color:var(--teal-dark); font-weight:800; font-size:12px; }