:root {
  --slop-paper: #f4f1e9;
  --slop-card: #fffdf7;
  --slop-ink: #17161c;
  --slop-muted: #686570;
  --slop-line: rgba(23, 22, 28, .16);
  --slop-accent: #d8442a;
  --slop-good: #267455;
  --slop-warn: #a56d13;
  --slop-bad: #bd3927;
}

.slop-page { background: var(--slop-paper); color: var(--slop-ink); }
.slop-shell { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.slop-hero { padding: 142px 0 76px; border-bottom: 1px solid var(--slop-line); }
.slop-kicker, .slop-section-heading > span, .slop-panel-head span, .slop-summary-label, .slop-download-card span, .slop-final > div > span { display: block; margin-bottom: 16px; color: var(--slop-accent); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.slop-hero h1 { max-width: 900px; margin: 0; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(3.6rem, 8.5vw, 7.4rem); font-weight: 400; letter-spacing: -.045em; line-height: .88; }
.slop-hero h1 em { font-weight: 400; }
.slop-hero > div > p { max-width: 760px; margin: 30px 0 0; color: var(--slop-muted); font-size: clamp(1rem, 2vw, 1.24rem); line-height: 1.65; }
.slop-hero-actions, .slop-tool-actions, .slop-share-row { display: flex; gap: 10px; margin-top: 28px; align-items: center; flex-wrap: wrap; }
.slop-button { display: inline-flex; min-height: 44px; padding: 11px 18px; align-items: center; justify-content: center; border: 1px solid var(--slop-ink); border-radius: 999px; background: transparent; color: var(--slop-ink); cursor: pointer; font: inherit; font-size: .84rem; font-weight: 700; text-decoration: none; }
.slop-button.primary { background: var(--slop-ink); color: var(--slop-paper); }
.slop-section { padding: 76px 0; }
.slop-tool-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 18px; align-items: start; }
.slop-panel, .slop-report { padding: 28px; border: 1px solid var(--slop-line); border-radius: 22px; background: var(--slop-card); }
.slop-panel-head { display: flex; gap: 20px; align-items: start; justify-content: space-between; }
.slop-panel-head h2 { max-width: 580px; margin: 0 0 22px; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; line-height: 1; }
.slop-text-button { padding: 0; border: 0; background: none; color: var(--slop-accent); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.slop-panel textarea { box-sizing: border-box; width: 100%; min-height: 230px; padding: 16px; border: 1px solid var(--slop-line); border-radius: 13px; background: transparent; color: inherit; font: inherit; line-height: 1.6; resize: vertical; }
.slop-panel textarea:focus { border-color: var(--slop-accent); outline: 3px solid rgba(216, 68, 42, .13); }
.slop-tool-actions { margin-top: 14px; }
.slop-tool-actions > span, .slop-privacy { color: var(--slop-muted); font-size: .78rem; }
.slop-privacy { margin: 14px 0 0; }
.slop-error { min-height: 20px; margin: 8px 0 0; color: var(--slop-bad); font-size: .84rem; font-weight: 700; }
.slop-summary strong { display: block; font-family: "Instrument Serif", Georgia, serif; font-size: 2.2rem; font-weight: 400; }
.slop-summary ol { padding-left: 20px; }
.slop-summary li { padding: 5px 0; }
.slop-summary p { margin-bottom: 0; color: var(--slop-muted); font-size: .88rem; line-height: 1.65; }
.slop-report { display: none; margin-top: 18px; }
.slop-report.visible { display: block; animation: slop-in .3s ease; }
@keyframes slop-in { from { opacity: 0; transform: translateY(8px); } }
.slop-report-top { display: grid; grid-template-columns: 100px 1fr auto; gap: 20px; align-items: center; }
.slop-grade { display: grid; width: 100px; height: 100px; place-items: center; border: 1px solid var(--slop-good); border-radius: 18px; background: rgba(38, 116, 85, .1); font-family: "Instrument Serif", Georgia, serif; font-size: 3.8rem; line-height: 1; }
.slop-grade.mid { border-color: var(--slop-warn); background: rgba(165, 109, 19, .1); }
.slop-grade.low { border-color: var(--slop-bad); background: rgba(189, 57, 39, .1); }
.slop-verdict span { color: var(--slop-muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.slop-verdict h2 { margin: 4px 0; font-family: "Instrument Serif", Georgia, serif; font-size: 2.3rem; font-weight: 400; line-height: 1; }
.slop-verdict p { margin: 0; color: var(--slop-muted); }
.slop-score-number { text-align: right; }
.slop-score-number strong { display: block; font-family: "Instrument Serif", Georgia, serif; font-size: 3.5rem; font-weight: 400; line-height: 1; }
.slop-score-number span { color: var(--slop-muted); font-size: .75rem; }
.slop-meter { height: 10px; margin-top: 24px; overflow: hidden; border-radius: 99px; background: rgba(23, 22, 28, .1); }
.slop-meter > div { width: 0; height: 100%; border-radius: inherit; background: var(--slop-good); transition: width .6s ease; }
.slop-meter > div.mid { background: var(--slop-warn); }
.slop-meter > div.low { background: var(--slop-bad); }
.slop-meter-labels { display: flex; justify-content: space-between; margin-top: 6px; color: var(--slop-muted); font-size: .72rem; }
.slop-findings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.slop-finding { padding: 17px; border: 1px solid var(--slop-line); border-radius: 14px; }
.slop-finding h3 { margin: 0 0 6px; font-size: .95rem; }
.slop-finding p { margin: 0; color: var(--slop-muted); font-size: .83rem; line-height: 1.55; }
.slop-pill { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 99px; background: rgba(165, 109, 19, .12); color: var(--slop-warn); font-size: .68rem; }
.slop-pill.good { background: rgba(38, 116, 85, .12); color: var(--slop-good); }
.slop-pill.bad { background: rgba(189, 57, 39, .12); color: var(--slop-bad); }
.slop-phrases { margin-top: 8px; }
.slop-phrases span { display: inline-block; margin: 3px 3px 0 0; padding: 3px 8px; border-radius: 99px; background: rgba(189, 57, 39, .1); color: var(--slop-bad); font-size: .72rem; font-weight: 700; }
.slop-action-note { margin: 16px 0 0; color: var(--slop-muted); font-size: .82rem; }
.slop-dark { background: #111116; color: #f5f1e8; }
.slop-section-heading { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr); gap: 24px; margin-bottom: 30px; }
.slop-section-heading > span { grid-row: 1 / 3; }
.slop-section-heading h2 { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(2.7rem, 6vw, 5.3rem); font-weight: 400; letter-spacing: -.03em; line-height: .95; }
.slop-section-heading p { max-width: 660px; margin: 0; color: var(--slop-muted); line-height: 1.65; }
.slop-section-heading.light p { color: rgba(245, 241, 232, .66); }
.slop-formula-grid, .slop-rubric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.slop-formula-grid article { padding: 22px; border: 1px solid rgba(245, 241, 232, .16); border-radius: 16px; }
.slop-formula-grid b { color: #ff7758; font-family: "Instrument Serif", Georgia, serif; font-size: 3rem; font-weight: 400; }
.slop-formula-grid h3 { margin: 6px 0; font-size: .95rem; }
.slop-formula-grid p, .slop-formula-note { color: rgba(245, 241, 232, .65); font-size: .82rem; line-height: 1.6; }
.slop-formula-note { margin: 22px 0 0; }
.slop-rubric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slop-rubric-grid article { padding: 22px; border-top: 1px solid var(--slop-line); }
.slop-rubric-grid article > span { color: var(--slop-accent); font-size: .72rem; font-weight: 700; }
.slop-rubric-grid h3 { margin: 9px 0; font-family: "Instrument Serif", Georgia, serif; font-size: 1.8rem; font-weight: 400; }
.slop-rubric-grid p { margin: 0; color: var(--slop-muted); line-height: 1.65; }
.slop-download-card { display: flex; gap: 24px; margin-top: 30px; padding: 26px; align-items: center; justify-content: space-between; border: 1px solid var(--slop-line); border-radius: 18px; background: var(--slop-card); }
.slop-download-card h3 { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-size: 2rem; font-weight: 400; }
.slop-download-card p { margin: 4px 0 0; color: var(--slop-muted); }
.slop-example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.slop-example-grid article { padding: 28px; border: 1px solid var(--slop-line); border-radius: 18px; background: var(--slop-card); }
.slop-example-grid article > span { color: var(--slop-bad); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.slop-example-grid .after > span { color: var(--slop-good); }
.slop-example-grid blockquote { margin: 30px 0; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; }
.slop-example-grid p { color: var(--slop-muted); font-size: .85rem; }
.slop-embed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.slop-embed-grid .slop-section-heading { display: block; margin: 0; }
.slop-embed-grid .slop-section-heading > span { margin-bottom: 16px; }
.slop-embed-grid .slop-section-heading p { margin-top: 16px; }
.slop-code-card { padding: 24px; border: 1px solid var(--slop-line); border-radius: 18px; background: #111116; color: #f5f1e8; }
.slop-code-card code { display: block; overflow-wrap: anywhere; color: #f6a38f; font-size: .8rem; line-height: 1.7; }
.slop-code-card .slop-button { margin-top: 20px; border-color: rgba(245, 241, 232, .5); color: #f5f1e8; }
.slop-code-card p { min-height: 20px; color: rgba(245, 241, 232, .65); font-size: .8rem; }
.slop-faq details { border-top: 1px solid var(--slop-line); }
.slop-faq summary { padding: 20px 0; cursor: pointer; font-weight: 700; }
.slop-faq details p { max-width: 740px; margin: 0 0 22px; color: var(--slop-muted); line-height: 1.65; }
.slop-final { text-align: center; }
.slop-final h2 { max-width: 820px; margin: 0 auto; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(2.7rem, 6vw, 5rem); font-weight: 400; line-height: .95; }
.slop-final p { max-width: 680px; margin: 22px auto; color: var(--slop-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.slop-page.embed-mode .mm-site-nav, .slop-page.embed-mode .mm-site-footer, .slop-page.embed-mode .scorecard-resource, .slop-page.embed-mode .slop-summary { display: none !important; }
.slop-page.embed-mode .slop-section { padding: 12px; }
.slop-page.embed-mode .slop-shell { width: 100%; }
.slop-page.embed-mode .slop-tool-grid { display: block; }
.slop-page.embed-mode .slop-panel, .slop-page.embed-mode .slop-report { border-radius: 16px; }

@media (max-width: 820px) {
  .slop-tool-grid, .slop-section-heading, .slop-embed-grid { grid-template-columns: 1fr; }
  .slop-section-heading > span { grid-row: auto; }
  .slop-formula-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slop-hero { padding-top: 112px; }
}

@media (max-width: 580px) {
  .slop-shell { width: min(100% - 24px, 1080px); }
  .slop-panel, .slop-report { padding: 20px; }
  .slop-panel-head { display: block; }
  .slop-text-button { margin-bottom: 16px; }
  .slop-report-top { grid-template-columns: 78px 1fr; }
  .slop-grade { width: 78px; height: 78px; font-size: 3rem; }
  .slop-score-number { grid-column: 1 / -1; text-align: left; }
  .slop-findings, .slop-rubric-grid, .slop-formula-grid, .slop-example-grid { grid-template-columns: 1fr; }
  .slop-download-card { align-items: flex-start; flex-direction: column; }
}

@media (prefers-color-scheme: dark) {
  :root { --slop-paper: #08080c; --slop-card: #111116; --slop-ink: #f4f1e9; --slop-muted: #aaa6b2; --slop-line: rgba(244, 241, 233, .16); --slop-good: #65c58e; --slop-warn: #e4ae55; --slop-bad: #f07a65; }
  .slop-button.primary { background: var(--slop-ink); color: var(--slop-paper); }
  .slop-meter { background: rgba(244, 241, 233, .12); }
}

@media print {
  .mm-site-nav, .mm-site-footer, .slop-hero-actions, .slop-share-row, .slop-code-card, #checker { display: none !important; }
  .slop-section { padding: 24px 0; }
  .slop-dark { background: #fff; color: #000; }
}