:root { --ink: #17221f; --muted: #71807b; --line: #dfe8e3; --paper: #f6f8f5; --card: #fff; --mint: #dff2e8; --green: #16734d; --orange: #e78545; --shadow: 0 18px 50px rgba(26, 53, 42, .08); }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, system-ui, sans-serif; }
body:before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .26; background-image: radial-gradient(#cbd8d1 .65px, transparent .65px); background-size: 16px 16px; mask-image: linear-gradient(to bottom, #000, transparent 78%); }
.shell { position: relative; max-width: 1240px; margin: auto; padding: 0 34px; }
.topbar { min-height: 86px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.file-button { white-space: nowrap; }
.brand { display: flex; gap: 10px; align-items: center; color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: var(--ink); border-radius: 8px; font-size: 15px; }
.brand-muted { color: var(--muted); font-weight: 500; }
.topbar-actions { display: flex; align-items: center; gap: 25px; }
.mode-label, .hero-note, .mono { color: var(--muted); font: 500 11px/1.4 "DM Mono", monospace; letter-spacing: .01em; }
.pulse { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #36a66e; box-shadow: 0 0 0 4px #dff2e8; }
.file-button, .primary-button { border: 0; cursor: pointer; font: 700 12px Manrope, sans-serif; }
.file-button { padding: 11px 15px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.visually-hidden:focus-visible + .file-button { outline: 2px solid var(--green); outline-offset: 2px; }
.github-link { display: flex; align-items: center; gap: 4px; color: var(--ink); font: 700 12px Manrope, sans-serif; text-decoration: none; }
.github-link:hover { color: var(--green); }
.github-link span { font-size: 11px; }
.privacy-note { display: flex; align-items: center; gap: 7px; margin-top: 16px; color: var(--muted); font: 500 11px/1.4 "DM Mono", monospace; }
.hero { padding: 90px 0 76px; max-width: 760px; }
.eyebrow, .section-kicker { color: var(--green); font: 700 10px "DM Mono", monospace; letter-spacing: .14em; }
h1 { margin: 18px 0 18px; font-size: clamp(45px, 7vw, 78px); line-height: .98; letter-spacing: -.075em; }
h1 em { color: var(--green); font-style: normal; }
.hero-copy { max-width: 520px; color: #596963; font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.primary-button { padding: 14px 18px; color: #fff; background: var(--ink); border-radius: 8px; box-shadow: 0 9px 20px rgba(23,34,31,.15); transition: transform .2s, background .2s; }
.primary-button:hover { background: var(--green); transform: translateY(-2px); }
.primary-button span { margin-left: 10px; font-size: 15px; }
code { padding: 2px 5px; color: var(--green); background: var(--mint); border-radius: 4px; font-family: "DM Mono", monospace; font-size: 10px; }
.workspace { margin-bottom: 85px; }
.error-banner { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; padding: 13px 16px; color: #9a3412; background: #fff2ec; border: 1px solid #f3c8b4; border-radius: 10px; font-size: 12px; }
.error-banner[hidden] { display: none; }
.error-banner strong { font-size: 12px; }
.workspace-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 22px; }
h2 { margin: 8px 0 0; font-size: 25px; letter-spacing: -.055em; }
.source-badge { margin-left: 9px; padding: 3px 7px; color: var(--muted); background: #eef2ef; border-radius: 5px; font: 700 9px "DM Mono", monospace; letter-spacing: .08em; vertical-align: middle; }
.source-badge-loaded { color: var(--green); background: var(--mint); }
.status { padding: 7px 10px; color: var(--green); background: var(--mint); border-radius: 20px; font: 700 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .05em; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #2a9a62; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.stat-card, .panel { background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.stat-card { padding: 20px; min-height: 108px; }
.stat-label { color: var(--muted); font: 700 10px "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.stat-value { margin-top: 15px; font-size: 26px; font-weight: 800; letter-spacing: -.06em; }
.stat-sub { margin-top: 2px; color: var(--muted); font-size: 11px; }
.content-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; margin-bottom: 12px; }
.panel { padding: 25px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 17px; color: var(--muted); font: 700 10px "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.confidence-badge { padding: 6px 8px; color: var(--green); background: var(--mint); border-radius: 5px; font-size: 9px; }
.featured-claim { padding: 31px 4px 25px; font-size: 22px; font-weight: 700; line-height: 1.42; letter-spacing: -.04em; }
.featured-claim:before { content: "“"; display: block; height: 17px; color: var(--orange); font: 800 39px Georgia, serif; line-height: .7; }
.claim-footer { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); }
.tag { padding: 6px 8px; color: #53635d; background: #f2f5f2; border-radius: 4px; font: 500 10px "DM Mono", monospace; }
.metrics-list { padding-top: 4px; }
.metric-row { padding: 17px 0; border-bottom: 1px solid var(--line); }
.metric-row:last-child { border-bottom: 0; }
.metric-name { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.metric-values { display: flex; align-items: baseline; gap: 10px; margin-top: 9px; }
.metric-before, .metric-after { font-size: 25px; font-weight: 800; letter-spacing: -.06em; }
.metric-before { color: #91a09a; }
.metric-arrow { color: var(--orange); font-size: 18px; }
.metric-unit { color: var(--muted); font: 11px "DM Mono", monospace; }
.metric-change { float: right; padding: 6px 8px; color: var(--green); background: var(--mint); border-radius: 5px; font: 700 12px "DM Mono", monospace; }
.metric-context { margin-top: 7px; color: var(--muted); font: 10px "DM Mono", monospace; }
.lower-grid { grid-template-columns: .9fr 1.1fr; }
.evidence-list { padding-top: 7px; }
.evidence-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.evidence-row:last-child { border-bottom: 0; }
.evidence-icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--green); background: var(--mint); border-radius: 7px; font-size: 13px; }
.evidence-name { font-size: 12px; font-weight: 700; }.evidence-type { margin-top: 3px; color: var(--muted); font: 10px "DM Mono", monospace; }
.signal-label { color: var(--green); font-size: 9px; }.review-score { margin-top: 25px; font-size: 52px; font-weight: 800; letter-spacing: -.09em; }.review-score small { color: var(--muted); font-size: 15px; letter-spacing: -.02em; }
.review-panel p { max-width: 410px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.review-bars { margin-top: 21px; display: grid; gap: 12px; }.review-bars div { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 14px; color: var(--muted); font: 10px "DM Mono", monospace; }.review-bars i { height: 5px; overflow: hidden; background: #edf1ee; border-radius: 9px; }.review-bars b { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.opportunity-strip { display: flex; align-items: center; gap: 14px; padding: 17px 20px; background: #fff8f2; border: 1px solid #f4dfcd; border-radius: 10px; }.opportunity-icon { color: var(--orange); font-size: 22px; }.opportunity-strip strong { font-size: 12px; }.opportunity-strip p { margin: 3px 0 0; color: #8c7768; font-size: 11px; }.arrow { margin-left: auto; color: var(--orange); font-size: 19px; }
footer { display: flex; justify-content: space-between; padding: 20px 0 28px; color: var(--muted); border-top: 1px solid var(--line); font-size: 10px; }
@media (max-width: 760px) { .shell { padding: 0 18px; }.topbar { min-height: 64px; }.mode-label, .hero-note { display: none; }.hero { padding: 65px 0 52px; }.hero-actions { display: block; }.hero-note { margin-top: 13px; }.stats-grid, .content-grid, .lower-grid { grid-template-columns: 1fr 1fr; }.featured-panel, .metric-panel, .evidence-panel, .review-panel { grid-column: span 2; } footer { gap: 10px; flex-wrap: wrap; } }
@media (max-width: 480px) { .topbar-actions { gap: 12px; }.brand { font-size: 15px; gap: 8px; }.brand-mark { width: 24px; height: 24px; font-size: 13px; }.github-link { font-size: 11px; }.file-button { padding: 9px 12px; font-size: 11px; }.stats-grid { grid-template-columns: 1fr 1fr; }.stat-card { padding: 15px; }.stat-value { font-size: 21px; }.panel { padding: 18px; }.featured-claim { font-size: 19px; } }