:root { --color-bg:#f5f7fb; --color-surface:#fff; --color-text:#183047; --color-muted:#526578; --color-primary:#1559a6; --color-primary-dark:#104782; --color-soft:#eaf2fc; --color-border:#d9e2ed; --color-error:#9f2424; --radius:14px; --shadow:0 5px 20px rgba(24,48,71,.045); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--color-bg); color:var(--color-text); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
a { color:var(--color-primary); text-underline-offset:3px; }
a:hover { color:var(--color-primary-dark); }
button,input,textarea,select { font:inherit; }
:focus-visible { outline:3px solid #327bcf; outline-offset:3px; }
[hidden] { display:none !important; }
img { max-width:100%; height:auto; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(1.85rem,3vw,2.65rem); line-height:1.18; letter-spacing:-.035em; margin-bottom:14px; }
h2 { font-size:1.35rem; line-height:1.35; letter-spacing:-.015em; }
h3 { font-size:1.07rem; line-height:1.45; }
p { margin-bottom:1rem; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.65; }
.site-shell { max-width:1240px; margin:0 auto; padding:0 30px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:98px; border-bottom:1px solid var(--color-border); }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--color-text); font-size:1.45rem; line-height:1.2; font-weight:750; text-decoration:none; flex-shrink:0; }
.brand img { width:42px; height:42px; }
.brand small { display:block; color:var(--color-muted); font-size:.7rem; font-weight:400; margin-top:5px; letter-spacing:.01em; }
.site-nav { display:flex; align-items:center; gap:5px; }
.site-nav a { display:block; padding:9px 16px; color:var(--color-muted); font-size:.95rem; font-weight:600; text-decoration:none; border-radius:8px; }
.site-nav a:hover { background:#edf1f7; color:var(--color-primary); }
.site-nav a[aria-current="page"] { color:var(--color-primary); background:var(--color-soft); }
.page-main { padding:34px 0 44px; min-height:calc(100vh - 184px); }
.page-main:focus { outline:none; }
.site-footer { border-top:1px solid var(--color-border); color:var(--color-muted); padding:22px 0; display:flex; justify-content:space-between; gap:12px; font-size:.8rem; }
.skip-link { position:fixed; top:-80px; left:20px; padding:10px 16px; border-radius:8px; z-index:200; background:#fff; color:var(--color-primary); }
.skip-link:focus { top:12px; }
.muted { color:var(--color-muted); }
.spaced-top { margin-top:22px; }
.eyebrow { margin:0 0 12px; color:var(--color-primary); font-size:.75rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:6px; background:var(--color-soft); color:var(--color-primary); font-size:.77rem; line-height:1.55; font-weight:600; }
.card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow); min-width:0; }
.card-header { padding:20px 24px; border-bottom:1px solid var(--color-border); }
.card-header h2,.card-header h3 { margin:0; }
.card-body { padding:24px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 19px; border:1px solid var(--color-primary); border-radius:8px; color:#fff; background:var(--color-primary); font-weight:650; font-size:.92rem; line-height:1.35; text-decoration:none; transition:background-color .15s; }
.button:hover { color:#fff; background:var(--color-primary-dark); border-color:var(--color-primary-dark); }
.button-secondary { color:var(--color-primary); background:#fff; border-color:#bacde3; }
.button-secondary:hover { color:var(--color-primary-dark); background:var(--color-soft); border-color:#91b3d8; }
.button-small { min-height:36px; padding:7px 13px; font-size:.83rem; }
.button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.notice { padding:14px 17px; border:1px solid #c6d9ef; border-radius:9px; color:#264a71; background:#f0f6fd; font-size:.9rem; overflow-wrap:anywhere; }
.notice p:last-child { margin-bottom:0; }
.notice-error { background:#fff3f3; color:var(--color-error); border-color:#edc4c4; }
.notice-warning { background:#fff8ea; color:#79531a; border-color:#e8d5ae; }
.section-heading { margin:0 0 22px; }
.section-heading p { color:var(--color-muted); max-width:780px; margin-bottom:0; }
.section-heading h1 { font-size:clamp(1.85rem,3vw,2.2rem); }
.table-scroll { overflow-x:auto; max-width:100%; }
.hero { display:grid; grid-template-columns:1.25fr 1fr; align-items:center; gap:48px; padding:22px 0 38px; }
.hero-copy h1 { max-width:640px; font-size:clamp(2.1rem,3.6vw,3.15rem); }
.hero-copy > p:not(.eyebrow) { max-width:610px; color:var(--color-muted); font-size:1.04rem; line-height:1.75; }
.hero .button-row { margin-top:23px; }
.hero-footnote { margin-top:15px; font-size:.81rem !important; }
.workflow-card { padding:24px; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius); }
.workflow-card h2 { font-size:.95rem; margin-bottom:20px; }
.workflow-steps { list-style:none; padding:0; margin:0; counter-reset:workflow; }
.workflow-steps li { display:grid; grid-template-columns:34px 1fr; gap:12px; position:relative; padding:0 0 23px; counter-increment:workflow; }
.workflow-steps li:last-child { padding-bottom:0; }
.workflow-steps li::before { content:counter(workflow); border:1px solid #c6d9ef; background:var(--color-soft); width:31px; height:31px; border-radius:50%; text-align:center; line-height:29px; color:var(--color-primary); font-size:.85rem; font-weight:700; z-index:1; }
.workflow-steps li:not(:last-child)::after { content:""; position:absolute; top:31px; bottom:0; left:15px; border-left:1px solid var(--color-border); }
.workflow-steps strong { display:block; font-size:.94rem; line-height:1.5; }
.workflow-steps span { display:block; font-size:.83rem; color:var(--color-muted); margin-top:3px; }
.mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; margin-bottom:28px; }
.mode-card { padding:23px; }
.mode-card h2 { font-size:1.05rem; margin:13px 0 10px; }
.mode-card p { font-size:.89rem; color:var(--color-muted); margin-bottom:15px; }
.mode-card a { font-size:.87rem; font-weight:650; }
.citation-card { padding:21px 24px; font-size:.87rem; color:var(--color-muted); }
.citation-card h2 { color:var(--color-text); font-size:.97rem; margin-bottom:7px; }
.citation-card p { margin-bottom:7px; }
.citation-card a { overflow-wrap:anywhere; }
.predict-layout { display:grid; grid-template-columns:minmax(0,1fr) 285px; gap:24px; align-items:start; }
.form-card { padding:26px; }
.field-heading { display:flex; gap:15px; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
.field-heading label { font-size:1.03rem; font-weight:700; }
.field-actions { display:flex; gap:5px; }
.text-button { border:0; background:transparent; color:var(--color-primary); font-size:.85rem; padding:7px 9px; min-height:36px; border-radius:6px; font-weight:600; }
.text-button:hover { background:var(--color-soft); }
.field-help { color:var(--color-muted); font-size:.85rem; margin-bottom:11px; }
textarea.smiles-input { display:block; width:100%; min-height:185px; padding:13px 14px; border:1px solid #afbed0; border-radius:8px; background:#fff; color:var(--color-text); font:.875rem/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; resize:vertical; }
textarea.smiles-input:focus { border-color:var(--color-primary); }
textarea.smiles-input[aria-invalid="true"] { border-color:var(--color-error); }
.input-meta { display:flex; gap:14px; justify-content:space-between; color:var(--color-muted); font-size:.78rem; margin-top:7px; }
.input-meta [data-over-limit="true"] { color:var(--color-error); font-weight:650; }
.example-reference { margin-top:15px; padding:11px 13px; border:1px solid var(--color-border); border-radius:8px; background:#f8fafc; font-size:.8rem; }
.example-reference summary { cursor:pointer; color:var(--color-primary); font-weight:600; }
.example-reference p { color:var(--color-muted); margin:10px 0 0; }
.example-compounds { padding-left:21px; margin:13px 0; }
.example-compounds li { padding:3px 0; }
.example-compounds strong { display:inline-block; min-width:135px; font-weight:650; }
.example-compounds span { color:var(--color-muted); font-variant-numeric:tabular-nums; }
.mode-fieldset { padding:0; border:0; margin:25px 0 0; min-width:0; }
.mode-fieldset legend { font-size:1.03rem; font-weight:700; padding:0; margin-bottom:5px; }
.mode-choice { display:flex; gap:12px; padding:15px; border:1px solid var(--color-border); border-radius:9px; margin-top:10px; cursor:pointer; transition:border-color .15s,background-color .15s; }
.mode-choice:hover { border-color:#90afd2; }
.mode-choice.is-selected { border-color:#6c98ca; background:#f0f6fd; }
.mode-choice:focus-within { outline:2px solid #327bcf; outline-offset:2px; }
.mode-choice input { appearance:none; -moz-appearance:none; flex:0 0 auto; position:relative; margin:5px 0 0; width:18px; height:18px; border:1.5px solid #8093a8; border-radius:4px; background:#fff; cursor:pointer; }
.mode-choice input:checked { border-color:var(--color-primary); background:var(--color-primary); }
.mode-choice input:checked::after { content:""; position:absolute; left:5px; top:2px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.mode-choice strong { display:block; font-size:.93rem; }
.mode-choice .mode-description { display:block; font-size:.81rem; color:var(--color-muted); margin-top:3px; }
.mode-choice .mode-limit { display:block; font-size:.79rem; color:#79531a; margin-top:4px; }
.form-notice { margin:17px 0 0; }
.form-error { margin:0 0 18px; }
.form-footer { display:flex; gap:17px; align-items:center; flex-wrap:wrap; margin-top:24px; }
.form-footer p { margin:0; font-size:.81rem; color:var(--color-muted); }
.side-note { padding:22px; }
.side-note h2 { font-size:1rem; margin-bottom:12px; }
.side-note ol { margin:0; padding-left:19px; font-size:.86rem; color:var(--color-muted); }
.side-note li { padding-left:3px; margin-bottom:12px; }
.side-note li:last-child { margin-bottom:0; }
.side-note + .side-note { margin-top:16px; }
.side-note p { font-size:.86rem; color:var(--color-muted); }
.side-note p:last-child { margin-bottom:0; }
.download-list { margin-top:24px; }
.download-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; padding:23px; border-bottom:1px solid var(--color-border); align-items:center; }
.download-item:last-child { border-bottom:0; }
.download-item h2 { font-size:1.03rem; margin-bottom:6px; }
.download-item p { color:var(--color-muted); font-size:.86rem; margin-bottom:5px; }
.download-metadata { font-size:.77rem; color:var(--color-muted); display:flex; gap:6px 14px; flex-wrap:wrap; overflow-wrap:anywhere; }
.download-metadata code { overflow-wrap:anywhere; word-break:break-all; }
.download-action { text-align:right; }
.download-action span { display:block; color:var(--color-muted); font-size:.78rem; margin-bottom:7px; }
.help-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:25px; align-items:start; }
.help-nav { position:sticky; top:20px; display:flex; flex-direction:column; gap:4px; }
.help-nav a { font-size:.86rem; padding:8px 10px; text-decoration:none; border-radius:6px; }
.help-nav a:hover { background:var(--color-soft); }
.help-section { padding:27px; margin-bottom:20px; scroll-margin-top:20px; }
.help-section:last-child { margin-bottom:0; }
.help-section p,.help-section li { font-size:.91rem; }
.help-section ul,.help-section ol { padding-left:22px; }
.help-section li { margin-bottom:8px; }
.help-section figure { margin:20px 0 0; }
.help-section figure a { display:block; }
.help-section figure img { display:block; width:100%; border:1px solid var(--color-border); border-radius:8px; }
.help-example-link .help-example-open { display:inline-block; margin-top:8px; font-size:.8rem; font-weight:600; }
.help-section figcaption { font-size:.78rem; color:var(--color-muted); margin-top:8px; }
.help-section details { border-top:1px solid var(--color-border); margin-top:16px; padding-top:16px; }
.help-section summary { cursor:pointer; font-size:.93rem; font-weight:650; }
.help-section details p { margin-top:12px; }
.score-definitions { margin:0; }
.score-definitions dt { font-weight:650; margin:18px 0 6px; font-size:.94rem; }
.score-definitions dt:first-child { margin-top:0; }
.score-definitions dd { margin:0; color:var(--color-muted); font-size:.88rem; }
.contact-list { display:grid; grid-template-columns:1fr 1fr; gap:20px; font-style:normal; font-size:.9rem; }
.contact-list a { overflow-wrap:anywhere; }
.contact-list strong { display:block; }
@media (max-width:940px) {
  .site-shell { padding:0 22px; }
  .hero { gap:25px; }
  .predict-layout { grid-template-columns:minmax(0,1fr) 245px; gap:17px; }
  .brand small { max-width:180px; }
  .site-nav a { padding:9px 11px; }
}
@media (max-width:720px) {
  .site-shell { padding:0 16px; }
  .site-header { display:block; padding-top:17px; min-height:auto; }
  .brand { font-size:1.3rem; }
  .brand img { width:36px; height:36px; }
  .brand small { max-width:none; }
  .site-nav { margin-top:16px; padding-bottom:11px; gap:3px; }
  .site-nav a { flex:1; padding:8px 5px; text-align:center; font-size:.87rem; }
  .page-main { padding:24px 0 32px; }
  .hero { grid-template-columns:1fr; padding:7px 0 25px; gap:22px; }
  .hero-copy h1 { font-size:2.2rem; }
  .hero-copy > p:not(.eyebrow) { font-size:.97rem; }
  .workflow-card { padding:20px; }
  .mode-grid { grid-template-columns:1fr; gap:12px; }
  .mode-card { padding:20px; }
  .mode-card h2 { margin-top:10px; }
  .mode-card p { margin-bottom:10px; }
  .predict-layout { grid-template-columns:1fr; }
  .form-card { padding:20px; }
  .predict-aside { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .side-note { padding:18px; }
  .side-note + .side-note { margin-top:0; }
  .input-meta { flex-direction:column; gap:3px; }
  .help-layout { grid-template-columns:1fr; gap:15px; }
  .help-nav { position:static; flex-direction:row; flex-wrap:wrap; gap:3px; }
  .help-nav a { font-size:.81rem; padding:5px 8px; background:#eaf0f8; }
  .help-section { padding:20px; }
  .download-item { gap:16px; padding:20px; }
  .site-footer { flex-direction:column; font-size:.76rem; gap:5px; }
  .card-body,.card-header { padding:20px; }
}
@media (max-width:430px) {
  .hero-copy h1 { font-size:1.97rem; }
  .hero .button-row { gap:9px; }
  .hero .button-row .button { width:100%; }
  .predict-aside { grid-template-columns:1fr; }
  .form-card { padding:17px; }
  .download-item { grid-template-columns:1fr; gap:10px; }
  .download-action { display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; }
  .download-action span { margin:0; }
  .contact-list { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}