/* Owner-selected direction: Porcelain and sage. Homepage only; scanner tokens frozen below. */
:root {
  --paper: #f4f6f3;
  --white: #fff;
  --ink: #202a23;
  --muted: #566157;
  --line: #d8ded5;
  --orange: #315c47;
  --orange-hover: #264b39;
  --lilac: #eaf0e8;
  --lilac-ink: #202a23;
  --green: #315c47;
  --radius: 12px;
  --page-surface: #eaf0e8;
  --field: #eaf0e8;
  --field-row: #ffffff;
  --field-row-hover: #f8faf6;
  --field-ink: #202a23;
  --field-secondary: #566157;
  --input-edge: #87958a;
  --input-edge-hover: #607667;
  --input-focus-surface: #e0eadd;
  --body-size: 16px;
  --small-size: 13px;
  --heading-size: clamp(26px, 2.5vw, 34px);
}
body { font-size: var(--body-size); line-height: 1.6; }
::selection { background: #dce9d7; color: var(--ink); }
.wrap { width: min(1200px, calc(100% - 80px)); }
.site-header { height: 98px; border: 0; }
.site-header nav, .header-actions { font-size: 14px; }
.site-header nav { font-weight: 500; gap: 28px; }
.brand { font-weight: 750; letter-spacing: -.035em; }
.brand svg { color: var(--orange); }
.brand svg path:nth-child(2) { fill: var(--paper); }
.brand svg path:nth-child(3) { stroke: var(--orange); }
.hero { padding-block: 44px 40px; gap: 60px; grid-template-columns: 1.5fr 1fr; }
.hero h1 { font-size: clamp(40px, 4.2vw, 56px); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; }
.hero h1 em { color: inherit; }
.hero-aside { max-width: 365px; margin: 0 0 3px; }
.hero-aside p { font-size: 16px; line-height: 1.7; margin-bottom: 18px; color: var(--muted); }
.text-link { font-size: var(--small-size); font-weight: 650; gap: 16px; }
.text-link .arrow-icon, .nav-plan .arrow-icon { transition: transform .2s ease; }
.text-link:hover .arrow-icon, .nav-plan:hover .arrow-icon { transform: translateX(4px); }
[dir=rtl] .text-link:hover .arrow-icon, [dir=rtl] .nav-plan:hover .arrow-icon { transform: scaleX(-1) translateX(4px); }
/* 1200 = 852 editor + 24 gutter + 324 guide; scan area keeps its previous 1280px cap. */
.tool-section.wrap { width: min(1280px, calc(100% - 64px)); }
.section-top, .workspace, .results { max-width: 1200px; margin-inline: auto; }
.section-top { margin-bottom: 20px; }
.section-top h2 { font-size: 22px; font-weight: 600; }
.section-top p { font-size: var(--small-size); color: var(--muted); }
.workspace { border: 0; border-radius: 0; grid-template-columns: minmax(0, 1fr) 324px; gap: 24px; background: transparent; overflow: visible; align-items: stretch; }
.editor-side { padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.editor-toolbar { flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.editor-toolbar > label { font-size: 17px; font-weight: 700; }
.editor-toolbar > div { display: flex; flex-wrap: wrap; gap: 8px; }
.editor-toolbar .quiet { padding: 10px 13px; min-height: 44px; border-radius: 6px; background: var(--page-surface); color: var(--ink); font-size: 13px; }
.editor-toolbar .quiet:hover { color: var(--orange); background: var(--input-focus-surface); }
.quiet { font-size: var(--small-size); min-height: 32px; }
#source-text { display: block; height: 275px; font-size: 17px; line-height: 1.8; padding: 20px; border: 1px solid var(--input-edge); border-radius: 6px; background: var(--white); color: var(--ink); margin: 0; scrollbar-color: var(--input-edge) var(--white); }
#source-text:hover { border-color: var(--input-edge-hover); }
#source-text:focus { border-color: var(--orange); outline: 3px solid var(--orange); outline-offset: 3px; }
#source-text::placeholder { color: var(--muted); font-size: 17px; }
.editor-meta { font-size: 12px; border: 0; padding-block: 16px 0; color: var(--muted); }
.editor-side:has(.error:not([hidden])) #source-text { border-color: #a32d0e; }
.editor-side .error { padding: 12px 14px; background: #fff0eb; border-radius: 4px; }
.editor-actions { margin-top: 24px; }
.btn { min-height: 50px; border-radius: 6px; font-size: 14px; transition: transform .16s ease, background .16s ease; }
.btn:active { transform: translateY(1px); }
.btn-secondary { border: 0; background: var(--page-surface); }
.btn-secondary:hover { background: var(--line); }
.private-note { font-size: 12px; margin-top: 18px; }
.private-note svg { width: 15px; height: 15px; margin-top: 2px; }
.inspection-side { padding: 30px 26px 24px; background: var(--field); color: var(--field-ink); border-radius: var(--radius); }
.inspection-heading, .check-icon { display: none; }
.inspection-side h3 { margin-top: 0; font-size: 28px; font-weight: 600; line-height: 1.25; color: var(--field-ink); letter-spacing: -.025em; }
.inspection-side > p { font-size: 14px; max-width: 32ch; color: var(--muted); margin-top: 18px; }
.inspection-list { gap: 22px; margin-block: 30px 24px; }
.inspection-item strong { font-size: 14px; font-weight: 650; color: var(--field-ink); }
.inspection-item div > span { font-size: 12px; color: var(--field-secondary); line-height: 1.7; margin-top: 4px; }
.inspection-bottom { border: 0; font-size: 12px; padding-block: 10px 0; color: var(--muted); }
.method-section { gap: 60px; padding-block: 80px; align-items: start; }
.method-intro { position: static; }
.method-intro h2, .library-intro h2, .faq-section > h2 { font-size: var(--heading-size); font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.method-intro > p, .method-steps p { font-size: var(--body-size); color: var(--muted); line-height: 1.7; }
.method-steps article, .method-steps article:first-child { border: 0; padding: 0; }
.method-steps article + article { margin-top: 26px; }
.method-steps h3 { font-size: 20px; font-weight: 650; }
.method-steps p { margin-top: 8px; max-width: 58ch; }
.glyph-study { display: none; }
.library-section { background: var(--field); color: var(--field-ink); padding-block: 60px; }
.library-intro { align-items: start; gap: 60px; margin-bottom: 30px; }
.library-intro p { font-size: var(--body-size); color: var(--field-secondary); }
.library-section .text-link:hover { color: var(--orange); }
.library-section a:focus-visible { outline-color: var(--orange); }
.guide-grid { display: block; }
.guide-art { display: none; }
.guide-card { display: grid; grid-template-columns: 1.1fr 1fr auto; align-items: start; gap: 32px; padding: 26px; background: var(--field-row); border: 0; border-radius: 6px; transition: background .2s ease; }
.guide-card + .guide-card { margin-top: 12px; }
.guide-card:hover { background: var(--field-row-hover); }
.guide-card h3 { font-size: 20px; line-height: 1.4; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.guide-card p { font-size: 15px; line-height: 1.7; color: var(--field-secondary); margin: 0; }
.guide-card > .text-link { margin: 4px 0 0; border: 0; }
.faq-section { padding-block: 80px; gap: 60px; align-items: start; }
.faq-item { border: 0; background: var(--white); padding-inline: 24px; border-radius: 6px; }
.faq-item + .faq-item { margin-top: 10px; }
.faq-item summary { font-size: var(--body-size); font-weight: 550; padding-block: 20px; line-height: 1.55; }
.faq-item p { color: var(--muted); font-size: var(--body-size); padding-bottom: 22px; }
.site-footer { border: 0; padding-block: 0 36px; }
.footer-top { border: 0; padding-top: 28px; margin-bottom: 32px; }
.footer-top .brand { font-size: 32px; font-weight: 650; }
.footer-top p { font-size: 15px; color: var(--muted); }
.footer-bottom { border: 0; font-size: 12px; color: var(--muted); }
/* Frozen pre-restyle tokens: entry-page changes cannot recolour either scanner. */
.scan-panel { --paper:#ffffff; --white:#ffffff; --ink:#11151c; --muted:#526071; --line:#dbe1e9; --orange:#164fe8; --orange-hover:#103dbb; --lilac:#164fe8; --lilac-ink:#ffffff; --green:#285849; --radius:8px; --page-surface:#f1f3f7; --field:#164fe8; --field-row:#1044cf; --field-row-hover:#0c37ab; --field-ink:#ffffff; --field-secondary:#e2ebff; --input-edge:#8494ab; --input-edge-hover:#53657e; --input-focus-surface:#eaf0ff; background:var(--ink); }
.scan-panel ::selection { background:#cbdcff; }
.result-heading h2 { font-weight: 500; }
.result-heading p, .cleanup-panel > p { font-size: 14px; }
.marked-text, .clean-text { font-size: 16px; }
@media (max-width: 1000px) {
  .wrap { width: calc(100% - 48px); }
  .hero { gap: 32px; }
  .hero h1 { font-size: 46px; }
  .hero-aside p { font-size: 16px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 265px; gap: 20px; }
  .editor-side, .inspection-side { padding: 22px; }
  .editor-toolbar > label { font-size: 16px; }
  .editor-toolbar .quiet { padding-inline: 10px; }
  .inspection-side h3 { font-size: 24px; }
  .method-section, .faq-section { gap: 32px; }
  .guide-card { grid-template-columns: 1fr 1fr; gap: 20px 32px; }
  .guide-card > .text-link { grid-column: 1 / -1; }
  .editor-actions .btn-primary { font-size: 13px; gap: 12px; padding-inline: 16px; }
}
@media (max-width: 740px) {
  .wrap, .tool-section.wrap { width: calc(100% - 36px); }
  .site-header { height: 76px; }
  .header-actions { font-size: var(--small-size); }
  .hero { padding-block: 26px 28px; }
  .hero h1 { font-size: clamp(34px, 9.75vw, 42px); letter-spacing: -.035em; }
  .hero-aside { margin-top: 22px; }
  .hero-aside p { font-size: 16px; }
  .section-top h2 { font-size: 21px; }
  .section-top p { font-size: 12px; }
  .workspace { grid-template-columns: 1fr; }
  .editor-side { padding: 18px; }
  .inspection-side { padding: 24px; }
  .editor-toolbar > div { width: 100%; gap: 8px; }
  .editor-toolbar .quiet { white-space: normal; min-height: 44px; padding-inline: 10px; }
  .editor-toolbar #sample-btn { flex: 1; justify-content: center; }
  .editor-toolbar #clear-btn { flex: none; }
  #source-text { font-size: 16px; height: 245px; padding: 16px; }
  #source-text::placeholder { font-size: 16px; }
  .editor-meta { font-size: 12px; }
  .editor-actions { flex-wrap: wrap; }
  .editor-actions .btn { font-size: 14px; }
  .private-note { font-size: 12px; }
  .inspection-side h3 { font-size: 25px; }
  .inspection-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .inspection-item strong { font-size: 13px; }
  .method-section { padding-block: 52px; }
  .method-intro { position: static; }
  .method-intro h2, .library-intro h2, .faq-section > h2 { font-size: 28px; }
  .method-intro > p { font-size: 16px; }
  .method-steps { margin-top: 28px; }
  .method-steps h3 { font-size: 20px; }
  .library-section { padding-block: 48px; }
  .library-intro { margin-bottom: 28px; }
  .guide-card { display: block; padding: 24px; }
  .guide-card h3 { font-size: 22px; }
  .guide-card p { margin-top: 16px; }
  .guide-card > .text-link { margin-top: 20px; }
  .faq-section { padding-block: 52px; }
  .faq-item { padding-inline: 20px; }
  .footer-top p { margin-top: 20px; }
  .footer-bottom { gap: 18px; }
  .footer-bottom nav { gap: 18px; }
  html:lang(en) .hero h1, html:lang(ru) .hero h1 { font-size: clamp(38px, 10vw, 46px); }
  html:lang(uk) .hero h1, html:lang(ja) .hero h1, html:lang(hi) .hero h1, html:lang(ko) .hero h1 { font-size: 32px; }
  html:lang(zh) .hero h1 { font-size: 38px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero-aside, .section-top { animation: page-arrive .6s both; }
  .hero-aside { animation-delay: .06s; }
  .section-top { animation-delay: .12s; }
  @supports (animation-timeline: view()) {
    .method-intro > *, .method-steps article, .library-intro > *, .guide-card, .faq-section > h2, .faq-item, .footer-top > * {
      animation: page-arrive linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 25%;
    }
  }
}
@keyframes page-arrive { from { opacity: .25; transform: translateY(14px); } to { opacity: 1; transform: none; } }