@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; scroll-behavior: smooth; }
  body { margin: 0; min-width: 320px; }
  button, input { font: inherit; }
  button { cursor: pointer; }
  h1, h2, h3, h4, p, blockquote { text-wrap: pretty; }
  a { color: inherit; }
  code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
}

@layer base {
  :root {
    --ground: #f3f5f4;
    --surface: #ffffff;
    --surface-muted: #e9eeeb;
    --ink: #273a34;
    --muted: #586963;
    --line: #cbd4cf;
    --brand: #708278;
    --brand-strong: #52675c;
    --brand-pale: #dfe7e2;
    --fix: #a26150;
    --fix-pale: #f2e6e1;
    --verify: #8a713c;
    --verify-pale: #f1ead8;
    --unknown: #657784;
    --pass: #61786a;
    --pass-pale: #e3ebe6;
    --demo: #7a5f25;
    --demo-pale: #f0e7cf;
    --radius: 12px;
    --shadow: 0 18px 48px rgb(45 62 54 / 8%);
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    background: var(--ground);
    color: var(--ink);
  }

  body { background: var(--ground); color: var(--ink); line-height: 1.58; }
  button, input { color: inherit; }
  button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgb(82 103 92 / 32%); outline-offset: 3px; }
  button:disabled { cursor: not-allowed; opacity: .58; }
  [hidden] { display: none !important; }
  main { width: min(1040px, calc(100% - 40px)); margin-inline: auto; }
  h1, h2, .finding h4 { font-family: inherit; font-weight: 600; }
}

@layer layout {
  .demo-banner {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--demo-pale);
    color: #4e401d;
    border-bottom: 1px solid #d4c59e;
  }

  .demo-banner-inner, .site-header, footer {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
  }

  .demo-banner-inner { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .demo-banner-inner div { display: flex; align-items: baseline; gap: 14px; }
  .demo-banner strong { font-size: .88rem; }
  .demo-banner span { font-size: .78rem; }
  .demo-banner a { flex: 0 0 auto; font-size: .8rem; font-weight: 800; text-underline-offset: 3px; }

  .site-header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 850; }
  .brand-mark { display: grid; place-items: center; width: 30px; aspect-ratio: 1; border-radius: 50%; background: var(--brand); color: white; font-family: inherit; }\n  .product-logo { display: block; width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
  .utility-label { color: var(--muted); font-size: .78rem; }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: clamp(36px, 6vw, 72px);
    align-items: center;
    margin-inline: calc(50% - 50vw);
    padding: 58px max(20px, calc((100vw - 1040px) / 2)) 68px;
    background: var(--surface-muted);
    border-block: 1px solid var(--line);
  }

  .hero-copy { max-width: 600px; }
  .report { width: min(880px, 100%); margin: 44px auto 88px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
  .report > *:not(.proof-fold) { padding-inline: clamp(26px, 6vw, 68px); }

  footer { min-height: 92px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .78rem; }
}

@layer components {
  .product-name { margin: 0 0 13px; color: var(--brand-strong); font-size: .78rem; font-weight: 900; letter-spacing: .04em; }
  h1 { max-width: 650px; margin: 0; font-size: clamp(2.25rem, 4vw, 3.4rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
  .lede { max-width: 620px; margin: 20px 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
  .plain-points { display: flex; flex-wrap: wrap; gap: 7px 18px; margin: 21px 0 0; padding: 0; list-style: none; color: var(--brand-strong); font-size: .84rem; font-weight: 760; }
  .plain-points li::before { content: "✓"; margin-right: 7px; color: var(--pass); }

  .check-form { padding: clamp(22px, 3vw, 30px); border: 1px solid #bcc8c1; border-radius: var(--radius); background: var(--surface); box-shadow: 0 12px 30px rgb(45 62 54 / 7%); }
  .form-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
  .form-heading label { font-weight: 900; }
  .form-heading span { color: var(--demo); font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
  .input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
  input[type="url"] { width: 100%; min-height: 56px; padding: 0 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--ground); color: var(--muted); }
  input[type="url"]:focus { border-color: var(--brand-strong); box-shadow: 0 0 0 4px rgb(82 103 92 / 11%); outline: 0; }
  .input-row button, .primary-action, .handoff-action button { min-height: 50px; padding: 0 22px; border: 1px solid var(--brand-strong); border-radius: 8px; background: var(--brand-strong); color: white; font-weight: 900; transition: background-color 140ms var(--ease-out), transform 140ms var(--ease-out); }
  .input-row button { min-height: 56px; }
  button:active { transform: scale(.98); }
  .field-note, .status { color: var(--muted); font-size: .8rem; line-height: 1.58; }
  .field-note { margin: 10px 0 0; }
  .status { min-height: 20px; margin: 7px 0 0; }

  .proof-fold { position: relative; height: 52px; color: var(--brand); }
  .proof-fold::before { content: ""; position: absolute; top: 25px; left: 0; width: 39%; border-top: 1px solid currentColor; }
  .proof-fold::after { content: ""; position: absolute; top: 25px; left: 43%; right: 0; border-top: 1px solid currentColor; }
  .proof-fold span { position: absolute; top: 25px; left: 39%; width: 4%; height: 14px; border: 1px solid currentColor; border-top: 0; }
  .proof-fold-entry { width: min(880px, 100%); margin: 0 auto -44px; color: #aab8b0; }

  .report-header { display: flex; justify-content: space-between; gap: 30px; padding-top: 46px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
  .demo-label { display: inline-block; margin: 0 0 10px; padding: 5px 9px; border-radius: 4px; background: var(--demo-pale); color: #54451f; font-size: .7rem; font-weight: 900; letter-spacing: .03em; }
  .report-overline { margin: 0; font-size: .8rem; font-weight: 850; }
  .checked-target { margin: 4px 0 0; color: var(--muted); font-size: .86rem; }
  .report-meta { display: flex; align-items: flex-start; gap: 12px 18px; color: var(--muted); font-size: .74rem; }

  .verdict { padding-top: clamp(42px, 6vw, 66px); padding-bottom: clamp(46px, 6vw, 72px); }
  .fixture-warning { max-width: 720px; margin: 0 0 24px; padding: 12px 14px; border: 1px solid #d4c59e; border-radius: 7px; background: #f7f2e6; color: #55451f; font-size: .82rem; font-weight: 780; }
  h2 { max-width: 720px; margin: 0; font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.1; letter-spacing: -.034em; }
  .report.is-clean .verdict h2 { max-width: 660px; font-size: clamp(1.9rem, 3.5vw, 2.75rem); line-height: 1.16; }
  .report.is-clean .verdict { padding-top: clamp(38px, 5vw, 54px); padding-bottom: clamp(40px, 5vw, 58px); }

  .verdict > p:not(.fixture-warning) { max-width: 68ch; margin: 18px 0 0; color: var(--muted); font-size: .96rem; line-height: 1.68; }
  .verdict-actions { display: flex; align-items: center; gap: 20px; margin-top: 26px; }
  .verdict-actions a { color: var(--brand-strong); font-weight: 850; text-underline-offset: 4px; }

  .finding-section { padding-top: 44px; padding-bottom: 52px; border-top: 1px solid var(--line); }
  .section-intro { max-width: 72ch; margin-bottom: 28px; }
  .section-intro h3, .quiet-section h3, .handoff-section h3 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.24; }
  .section-state { margin: 0 0 7px; font-size: .74rem; font-weight: 900; letter-spacing: .03em; }
  .state-fix { color: var(--fix); }
  .state-verify { color: var(--verify); }
  .state-pass { color: var(--pass); }

  .finding { display: block; max-width: 72ch; }
  .finding h4 { margin: 0; font-size: clamp(1.55rem, 2.4vw, 2rem); line-height: 1.18; letter-spacing: -.025em; }
  .finding-impact { margin: 16px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.72; }
  .next-step { margin-top: 24px; padding: 18px 20px; border: 1px solid #d7c0b8; border-radius: 8px; background: var(--fix-pale); }
  .next-step strong { color: #744638; font-size: .8rem; }
  .next-step p { margin: 7px 0 0; color: #4f5d58; line-height: 1.68; }
  .include-control { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; color: var(--brand-strong); font-size: .84rem; font-weight: 850; cursor: pointer; }
  .include-control input { width: 17px; height: 17px; accent-color: var(--brand-strong); }

  details > summary { color: var(--brand-strong); font-size: .84rem; font-weight: 850; cursor: pointer; }
  .evidence { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
  .evidence > summary { margin-bottom: 13px; }
  .evidence-panel { display: grid; gap: 19px; padding: 22px; border: 1px solid #ccd6d1; border-radius: 8px; background: #edf1ef; color: var(--muted); font-size: .84rem; }
  .evidence-panel > div > span { display: block; margin-bottom: 7px; color: var(--ink); font-weight: 850; }
  .evidence-panel p { margin: 0; line-height: 1.64; }
  .evidence-panel code { display: block; padding: 10px 12px; border-radius: 6px; background: var(--surface); color: var(--ink); overflow-wrap: anywhere; }
  .evidence-panel p code { display: inline; padding: 2px 4px; }
  .demo-data-label { width: fit-content; padding: 4px 7px; border-radius: 3px; background: var(--demo-pale); color: #54451f; font-size: .68rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
  .evidence-limit { padding-top: 14px; border-top: 1px solid var(--line); }
  .technical-details { margin-top: -3px; }
  .technical-details p { margin-top: 11px; }

  .verify-section { background: #fbfbfa; }
  .observed-quote { margin-top: 22px; padding: 16px 18px; border: 1px solid #d8cba7; border-radius: 8px; background: var(--verify-pale); }
  .observed-quote span { color: #6e5a2e; font-size: .74rem; font-weight: 850; }
  blockquote { margin: 7px 0 0; font-family: inherit; font-size: 1.08rem; font-weight: 500; }
  .finding-boundary { margin: 15px 0 0; color: #6e5a2e; font-size: .82rem; line-height: 1.64; }

  .quiet-section { padding-top: 30px; padding-bottom: 32px; border-top: 1px solid var(--line); background: var(--pass-pale); }
  .quiet-section > div { max-width: 72ch; }
  .quiet-section > div > p:not(.section-state) { margin: 8px 0 0; color: var(--muted); }
  .quiet-section details { max-width: 72ch; margin-top: 16px; }
  .quiet-section ul { margin: 14px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.8; }
  .quiet-section details > p { color: var(--muted); font-size: .82rem; }

  .proof-fold-handoff { margin-inline: clamp(26px, 6vw, 68px); color: var(--brand); }
  .handoff-section { display: flex; align-items: center; justify-content: space-between; gap: 34px; padding-top: 30px; padding-bottom: 32px; background: var(--pass-pale); color: var(--ink); border-top: 1px solid #c4d1c9; }
  .handoff-label { margin: 0 0 5px; color: var(--pass); font-size: .74rem; font-weight: 900; }
  .handoff-section > div:first-child > p:last-child { max-width: 590px; margin: 10px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.64; }
  .handoff-action { display: grid; flex: 0 0 auto; justify-items: end; gap: 8px; }
  .handoff-action span { color: var(--muted); font-size: .76rem; }
  .handoff-action button { border-color: var(--brand-strong); background: var(--brand-strong); color: white; }
  .result-caveat { margin: 0; padding-top: 18px; padding-bottom: 22px; background: var(--pass-pale); color: var(--muted); border-top: 1px solid #cbd7d0; font-size: .73rem; line-height: 1.58; }

  dialog { width: min(700px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); box-shadow: 0 28px 90px rgb(39 58 52 / 28%); }
  dialog::backdrop { background: rgb(39 58 52 / 44%); }
  .dialog-shell { padding: 30px; }
  .dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
  .dialog-header p { margin: 0 0 5px; color: var(--demo); font-size: .7rem; font-weight: 900; }
  .dialog-header h2 { font-family: inherit; font-size: 2rem; font-weight: 600; }
  .icon-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: white; font-size: 1.4rem; }
  .dialog-shell > p { color: var(--demo); font-size: .82rem; }
  fieldset { margin: 22px 0; padding: 17px; border: 1px solid var(--line); border-radius: 8px; }
  legend { padding-inline: 7px; font-weight: 850; }
  fieldset label { display: block; margin-top: 9px; }
  fieldset input { accent-color: var(--brand-strong); }
  .prompt-preview { max-height: 270px; overflow: auto; padding: 20px; border-radius: 8px; background: var(--ground); }
  .prompt-preview > span { font-size: .72rem; font-weight: 900; }
  .prompt-preview p { color: var(--muted); line-height: 1.62; }
  .dialog-actions { display: flex; gap: 16px; align-items: center; margin-top: 20px; }
  .text-button { border: 0; background: transparent; color: var(--brand-strong); font-weight: 850; }

  @media (hover: hover) and (pointer: fine) {
    .input-row button:hover, .primary-action:hover, .handoff-action button:hover { background: #43564c; }
  }
}

@layer responsive {
  @media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; gap: 34px; }
    .hero-copy { max-width: 720px; }
  }

  @media (max-width: 760px) {
    .demo-banner-inner, .site-header, footer { width: calc(100% - 32px); }
    main { width: calc(100% - 24px); }
    .demo-banner-inner { min-height: 62px; align-items: center; gap: 10px; }
    .demo-banner-inner div { display: grid; gap: 1px; }
    .demo-banner span { display: none; }
    .demo-banner a { font-size: .72rem; }
    .utility-label { display: none; }
    .site-header { min-height: 64px; }
    .hero { margin-inline: calc(50% - 50vw); padding: 42px 20px 50px; }
    h1 { font-size: clamp(2.25rem, 10vw, 3rem); }
    .plain-points { display: grid; gap: 6px; }
    .check-form { padding: 19px; }
    .form-heading span { display: none; }
    .input-row { grid-template-columns: 1fr; }
    .report { margin-top: 34px; }
    .report > *:not(.proof-fold) { padding-inline: 22px; }
    .proof-fold-entry { margin-bottom: -34px; }
    .report-header { align-items: start; flex-direction: column; padding-top: 40px; }
    .report-meta { flex-wrap: wrap; }
    .verdict { padding-top: 42px; padding-bottom: 48px; }
    h2 { font-size: clamp(2.05rem, 10vw, 2.85rem); }
    .verdict-actions { align-items: flex-start; flex-direction: column; }
    .primary-action { width: 100%; }
    .finding-section { padding-top: 38px; padding-bottom: 42px; }
    .finding h4 { font-size: 1.85rem; }
    .evidence-panel { padding: 17px; }
    .quiet-section { padding-top: 27px; padding-bottom: 29px; }
    .proof-fold-handoff { margin-inline: 22px; }
    .handoff-section { align-items: stretch; flex-direction: column; gap: 22px; }
    .handoff-action { justify-items: stretch; }
    .handoff-action button { width: 100%; }
    footer { min-height: 110px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 6px; }
    dialog { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 14px 14px 0 0; }
    .dialog-shell { padding: 24px 20px 28px; }
    .dialog-actions { align-items: stretch; flex-direction: column; }
    .dialog-actions .primary-action { width: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    button { transition: background-color 140ms ease-out; }
  }
}
@layer components {
  .utility-label a, footer a { color: inherit; text-underline-offset: 3px; }
  .privacy-main { width: min(880px, calc(100% - 40px)); margin: 0 auto 80px; }
  .privacy-intro { padding: 64px 0 44px; border-bottom: 1px solid var(--line); }
  .privacy-intro h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 4rem); }
  .privacy-updated { margin-top: 22px; color: var(--muted); font-size: .8rem; }
  .privacy-content { background: var(--surface); border: 1px solid var(--line); border-top: 0; }
  .privacy-content > section { display: grid; grid-template-columns: 150px 1fr; gap: 28px; padding: 32px 36px; border-bottom: 1px solid var(--line); }
  .privacy-content > section:last-child { border-bottom: 0; }
  .privacy-number { color: var(--brand-strong); font-size: .72rem; font-weight: 850; letter-spacing: .04em; }
  .privacy-content h2 { margin: 0 0 10px; font-size: 1.3rem; }
  .privacy-content p { margin: 8px 0 0; color: var(--muted); line-height: 1.72; }
  .privacy-content code { color: var(--ink); }
  .privacy-return { display: inline-block; margin-top: 28px; color: var(--brand-strong); font-weight: 800; text-underline-offset: 4px; }
}
@layer responsive {
  @media (max-width: 760px) {
    .privacy-main { width: calc(100% - 24px); }
    .privacy-intro { padding: 42px 10px 34px; }
    .privacy-content > section { grid-template-columns: 1fr; gap: 8px; padding: 26px 22px; }
  }
}
@layer components {
  .feedback-section { width: min(880px, 100%); margin: 58px auto 48px; padding: 28px 0 0; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
  .feedback-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .feedback-heading h2 { font-size: clamp(1.35rem, 3vw, 1.65rem); line-height: 1.4; letter-spacing: -.02em; }
  .feedback-intro { max-width: 60ch; margin: 12px 0 22px; color: var(--muted); font-size: .9rem; }
  #feedback-form { display: grid; gap: 9px; }
  #feedback-form label { font-size: .86rem; font-weight: 600; }
  #feedback-form select, #feedback-form textarea, .feedback-email-fallback { min-width: 0; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
  #feedback-form select { width: min(240px, 100%); margin-bottom: 10px; }
  #feedback-form textarea { min-height: 120px; resize: vertical; line-height: 1.65; }
  #feedback-form select:focus-visible, #feedback-form textarea:focus-visible { outline: 3px solid rgb(82 103 92 / 32%); outline-offset: 3px; }
  .feedback-count { margin: 0; text-align: right; color: var(--muted); font-size: .75rem; }
  #feedback-note { margin: 0; }
  .feedback-actions { display: flex; align-items: center; gap: 16px; margin-top: 9px; }
  .feedback-actions .primary-action { font-size: .86rem; font-weight: 600; }
  .feedback-actions .status { margin: 0; }
  .feedback-contact { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin-top: 24px; color: var(--muted); font-size: .8rem; }
  .feedback-contact a { text-underline-offset: 3px; }
  .feedback-contact .status:empty { display: none; }
  .feedback-section .text-button, .product-footer button { padding: 4px 0; border: 0; background: transparent; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; }
  .feedback-heading .text-button { flex: 0 0 auto; font-size: .78rem; }
  footer.product-footer { justify-content: flex-start; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
}
@layer responsive {
  @media (max-width: 760px) {
    .feedback-section { margin-top: 44px; padding-inline: 10px; }
    .feedback-heading { align-items: flex-start; }
    .feedback-heading h2 { font-size: 1.35rem; line-height: 1.4; }
    .feedback-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    footer.product-footer { min-height: 92px; }
  }
}