:root {
  --guard-paper: #efeee7;
  --guard-ink: #171916;
  --guard-charcoal: #111310;
  --guard-surface: #fbfbf7;
  --guard-muted: #dde0d8;
  --guard-moss: #cfd5c7;
  --guard-signal: #e7583e;
  --guard-safe: #8fa87f;
  --guard-warn: #d8b44c;
}

body { background: var(--guard-paper); color: var(--guard-ink); }
.guard-shell { width: min(100% - clamp(2rem, 7vw, 8rem), 1440px); margin: 0 auto; padding-top: clamp(2.2rem, 5vw, 5rem); }
.guard-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, .28fr); gap: clamp(3rem, 8vw, 9rem); align-items: end; min-height: clamp(27rem, 53vh, 38rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.guard-hero__main h1 { margin: 0; max-width: 11ch; overflow: visible; font-family: "Noto Sans SC", var(--display); font-size: clamp(3.8rem, 8.1vw, 8.8rem); font-weight: 900; line-height: 1.16; letter-spacing: -.045em; text-wrap: balance; }
.guard-hero__main > p { max-width: 46rem; margin: 2rem 0 2.4rem; color: #444941; font: 500 clamp(1rem, 1.45vw, 1.28rem)/1.7 "Noto Sans SC", var(--display); }
.scan-form { max-width: 61rem; }
.scan-form > label { display: block; margin: 0 0 .65rem; color: #62675f; font: 500 .68rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.scan-form__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .45rem; align-items: center; padding: .42rem; border-radius: 0 1.1rem 0 1.1rem; background: var(--guard-surface); box-shadow: 0 12px 32px rgba(23,25,22,.07); }
.github-mark { display: grid; width: 3.25rem; aspect-ratio: 1; place-items: center; border-radius: 0 .75rem 0 .75rem; background: var(--guard-muted); font: 700 .68rem var(--mono); }
.scan-form input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--guard-ink); font: 650 clamp(.86rem, 1.25vw, 1.04rem) "Google Sans Flex", "Noto Sans SC", sans-serif; }
.scan-form input::placeholder { color: #858980; }
.scan-form button { display: inline-flex; min-height: 3.25rem; align-items: center; gap: 1.4rem; justify-content: center; padding: 0 1.5rem; border: 0; border-radius: .1rem .8rem .1rem .8rem; background: var(--guard-ink); color: #fff; font: 700 .84rem "Noto Sans SC", sans-serif; cursor: pointer; }
.scan-form button:disabled { cursor: wait; opacity: .56; }
.scan-form > p { margin: .72rem 0 0; color: #777b73; font: 500 .67rem/1.6 var(--mono); }
.guard-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

.scan-stages { padding: 1.4rem 1.5rem; border-radius: 0 1.1rem 0 1.1rem; background: var(--guard-moss); }
.scan-stages > strong { font: 750 .92rem "Noto Sans SC", sans-serif; }
.scan-stages ol { display: grid; gap: 0; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.scan-stages li { position: relative; display: grid; grid-template-columns: 1.2rem 1fr; gap: .72rem; align-items: center; min-height: 2.3rem; color: #656a62; font: 600 .74rem "Noto Sans SC", sans-serif; }
.scan-stages li::after { content: ""; position: absolute; left: .36rem; top: 1.46rem; bottom: -.82rem; width: 2px; background: rgba(23,25,22,.13); }
.scan-stages li:last-child::after { display: none; }
.scan-stages i { width: .82rem; aspect-ratio: 1; border-radius: 50%; background: #f4f3ed; box-shadow: inset 0 0 0 2px rgba(23,25,22,.2); }
.scan-stages li.is-active { color: var(--guard-signal); }
.scan-stages li.is-active i { background: var(--guard-signal); box-shadow: 0 0 0 .24rem rgba(231,88,62,.18); }
.scan-stages li.is-done { color: var(--guard-ink); }
.scan-stages li.is-done i { background: var(--guard-safe); box-shadow: none; }

.evidence { overflow: hidden; margin: 0 calc(clamp(1rem, 3vw, 3rem) * -1); border-radius: 0 1.4rem 0 1.4rem; background: var(--guard-charcoal); color: #f3f3ed; clip-path: polygon(1.2rem 0, calc(100% - 1.2rem) 0, 100% 1.2rem, 100% calc(100% - 1.2rem), calc(100% - 1.2rem) 100%, 0 100%, 0 1.2rem); }
.evidence__head { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 clamp(1.5rem, 3vw, 3rem); color: #aeb4aa; font: 500 .68rem var(--mono); }
.evidence__head > div { display: flex; align-items: center; gap: 1rem; }
.evidence__head strong { color: #fff; font: 700 .9rem "Noto Sans SC", sans-serif; }
#scan-status { display: inline-flex; align-items: center; gap: .5rem; }
#scan-status i { width: .48rem; aspect-ratio: 1; border-radius: 50%; background: #777e74; }
.evidence.is-running #scan-status i { background: var(--guard-signal); animation: guard-pulse 1s infinite; }
.evidence.is-complete #scan-status i { background: var(--guard-safe); }
.evidence.is-error #scan-status i { background: var(--guard-signal); }
#share-report { border: 0; border-radius: 999px; padding: .45rem .75rem; background: #292d28; color: #dfe3dc; font: 500 .62rem var(--mono); cursor: pointer; }
.evidence__body { display: grid; grid-template-columns: minmax(18rem, .32fr) minmax(0, 1fr); gap: clamp(1.2rem, 2vw, 2rem); padding: 0 clamp(1.5rem, 3vw, 3rem) 2rem; }
.score-panel { padding: clamp(1.3rem, 2.3vw, 2rem); border-radius: .9rem 0 .9rem 0; background: #20231f; }
.score-panel > span { color: #aeb4aa; font: 500 .63rem var(--mono); letter-spacing: .1em; }
.score-panel > strong { display: block; margin: .55rem 0 0; font: 750 clamp(4rem, 6.5vw, 7rem)/.9 "Google Sans Flex", sans-serif; letter-spacing: -.08em; }
.score-panel > strong::after { content: "/100"; margin-left: .45rem; color: #8a9087; font: 500 .78rem var(--mono); letter-spacing: 0; }
.score-panel > b { display: block; margin-top: .8rem; color: var(--guard-warn); font: 700 .85rem "Noto Sans SC", sans-serif; }
.risk-meter { overflow: hidden; height: .48rem; margin: 1rem 0 1.4rem; border-radius: 999px; background: #3b4039; }
.risk-meter i { display: block; width: 0; height: 100%; background: var(--guard-safe); transition: width .7s cubic-bezier(.22,1,.36,1), background .3s; }
.severity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .42rem; }
.severity-grid div { padding: .72rem .55rem; border-radius: 0 .55rem 0 .55rem; background: #2b2f2a; }
.severity-grid span { display: block; color: #989f95; font: 500 .58rem "Noto Sans SC", sans-serif; }
.severity-grid strong { display: block; margin-top: .35rem; font: 650 1.4rem "Google Sans Flex", sans-serif; }
.score-panel > p { margin: 1.2rem 0 0; color: #9ba198; font: 500 .62rem/1.6 var(--mono); }
.finding-panel { min-width: 0; }
.finding-head, .finding-row > summary { display: grid; grid-template-columns: 7rem minmax(0, 1fr) minmax(10rem, .32fr); gap: 1rem; align-items: center; }
.finding-head { padding: .85rem 1rem; color: #777e74; font: 500 .58rem var(--mono); letter-spacing: .09em; }
.finding-row { border-top: 1px solid #323630; animation: finding-enter .46s cubic-bezier(.22,1,.36,1) both; }
.finding-row > summary { min-height: 4.75rem; padding: .8rem 1rem; cursor: pointer; list-style: none; }
.finding-row > summary::-webkit-details-marker { display: none; }
.finding-row > summary > span:first-child { width: fit-content; padding: .36rem .55rem; border-radius: .42rem 0 .42rem 0; background: #2c312b; color: #d8ddd5; font: 600 .58rem var(--mono); }
.finding-row[data-severity="CRITICAL"] > summary > span:first-child, .finding-row[data-severity="HIGH"] > summary > span:first-child { background: #45251f; color: #ff866f; }
.finding-row[data-severity="MEDIUM"] > summary > span:first-child { background: #433a20; color: #e9c453; }
.finding-details { display: grid; gap: .7rem; padding: 0 1rem 1.2rem 9rem; }
.finding-details p { margin: 0; color: #b6bcb2; font: 500 .68rem/1.65 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.finding-copy { min-width: 0; }
.finding-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; color: #f3f3ed; font: 650 .78rem "Noto Sans SC", sans-serif; white-space: nowrap; }
.finding-copy span, .finding-location { display: block; overflow: hidden; margin-top: .28rem; color: #8d948a; font: 500 .58rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.finding-empty { display: grid; min-height: 18rem; place-content: center; text-align: center; }
.finding-empty strong { font: 700 1.1rem "Noto Sans SC", sans-serif; }
.finding-empty p { max-width: 28rem; color: #858c82; font: 500 .68rem/1.7 var(--mono); }
.evidence__foot { margin: 0; padding: 1rem clamp(1.5rem, 3vw, 3rem) 1.4rem; background: #1a1d19; color: #7f867c; font: 500 .6rem/1.5 var(--mono); }

.report-offer { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; }
.report-offer article { min-height: 26rem; padding: clamp(1.8rem, 3vw, 3rem); }
.offer-free { border-radius: 0 1.15rem 0 1.15rem; background: #dfe3d7; }
.offer-paid, .offer-service { border-radius: 1.15rem 0 1.15rem 0; background: var(--guard-surface); }
.report-offer article > div { display: flex; align-items: baseline; justify-content: space-between; }
.report-offer article > div span { font: 600 .68rem var(--mono); letter-spacing: .08em; }
.report-offer article > div strong { font: 750 clamp(2.2rem, 4vw, 4.2rem) "Google Sans Flex", sans-serif; letter-spacing: -.07em; }
.offer-paid > div strong, .offer-service > div strong { color: var(--guard-signal); }
.report-offer h2 { max-width: 16ch; margin: 2.5rem 0 1.8rem; font: 800 clamp(1.75rem, 3vw, 3.2rem)/1.18 "Noto Sans SC", sans-serif; letter-spacing: -.035em; text-wrap: pretty; }
.report-offer ul { display: grid; gap: .8rem; margin: 0 0 2.2rem; padding: 0; list-style: none; }
.report-offer li { position: relative; padding-left: 1.3rem; color: #444941; font: 500 .82rem/1.5 "Noto Sans SC", sans-serif; }
.report-offer li::before { content: "✓"; position: absolute; left: 0; color: #5a6a51; font-weight: 800; }
.report-offer a, .report-offer button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; border: 0; border-radius: .1rem .7rem .1rem .7rem; padding: 0 1.15rem; background: var(--guard-ink); color: #fff; text-decoration: none; font: 700 .76rem "Noto Sans SC", sans-serif; cursor: pointer; }
.offer-paid button, .offer-service a { background: var(--guard-signal); }
.offer-paid button:disabled { cursor: not-allowed; opacity: .42; }
.guard-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: .8rem; }
.guard-notes article { min-height: 16rem; padding: 2rem; border-radius: 0 .95rem 0 .95rem; background: var(--guard-surface); }
.guard-notes article:nth-child(2) { border-radius: .95rem 0 .95rem 0; background: #d9ddd5; }
.guard-notes article:nth-child(3) { background: #e6e4dd; }
.guard-notes h2 { margin: 0 0 2.5rem; font: 800 clamp(1.4rem, 2.2vw, 2.2rem)/1.2 "Noto Sans SC", sans-serif; letter-spacing: -.025em; text-wrap: pretty; }
.guard-notes p { margin: 0; color: #555b52; font: 500 .82rem/1.8 "Noto Sans SC", sans-serif; }
.team-strip { display: flex; min-height: 8rem; align-items: center; justify-content: space-between; gap: 2rem; margin: .8rem 0 4rem; padding: 1.5rem 2rem; border-radius: 0 1.1rem 0 1.1rem; background: #344033; color: #f7f7f2; text-decoration: none; }
.team-strip div { display: grid; gap: .45rem; }
.team-strip div span { color: #bfc7bb; font: 500 .6rem var(--mono); letter-spacing: .1em; }
.team-strip strong { font: 750 clamp(1.15rem, 2vw, 1.85rem) "Noto Sans SC", sans-serif; }
.team-strip > span { padding: .9rem 1.2rem; border-radius: .65rem 0 .65rem 0; background: #f3f3ed; color: var(--guard-ink); font: 700 .75rem "Noto Sans SC", sans-serif; }

@keyframes guard-pulse { 50% { opacity: .25; transform: scale(.66); } }
@keyframes finding-enter { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

@media (max-width: 900px) {
  .guard-hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .scan-stages { display: none; }
  .evidence__body { grid-template-columns: 1fr; }
  .report-offer, .guard-notes { grid-template-columns: 1fr; }
  .report-offer article { min-height: auto; }
  .guard-notes article { min-height: auto; }
}

@media (max-width: 620px) {
  .guard-shell { width: min(100% - 1rem, 1440px); padding-top: 1.8rem; }
  .guard-hero { min-height: auto; padding-bottom: 2.4rem; }
  .guard-hero__main h1 { max-width: none; font-size: clamp(3.15rem, 15vw, 5rem); line-height: 1.18; letter-spacing: -.045em; }
  .guard-hero__main > p { margin: 1.35rem 0 1.6rem; font-size: .92rem; }
  .scan-form__row { grid-template-columns: auto minmax(0, 1fr); }
  .scan-form button { grid-column: 1 / -1; width: 100%; }
  .evidence { margin: 0; clip-path: none; }
  .evidence__head { align-items: flex-start; flex-direction: column; padding-block: 1.2rem; }
  .evidence__body { padding-inline: .75rem; }
  .finding-head { display: none; }
  .finding-row > summary { grid-template-columns: 5rem minmax(0, 1fr); gap: .6rem; padding-inline: .25rem; }
  .finding-location { grid-column: 2; }
  .finding-details { padding: 0 .5rem 1rem 5.85rem; }
  .severity-grid { grid-template-columns: repeat(2, 1fr); }
  .report-offer article, .guard-notes article { padding: 1.5rem; }
  .team-strip { align-items: flex-start; flex-direction: column; margin-bottom: 2rem; }
}