:root {
      --bg: #fbfaf7;
      --panel: #ffffff;
      --text: #24211d;
      --muted: #716a60;
      --border: #e9e1d8;
      --accent: #d7a820;
      --accent-strong: #8a6710;
      --shadow: 0 18px 50px rgba(54, 39, 10, 0.08);
      --radius: 22px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(215, 168, 32, 0.16), transparent 34rem),
        linear-gradient(180deg, #fffdf8 0%, var(--bg) 100%);
    }

    header {
      max-width: 1160px;
      margin: 0 auto;
      padding: 48px 22px 24px;
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
      gap: 24px;
      align-items: stretch;
    }

    .hero-copy,
    .scan-card,
    .toolbar,
    .font-card,
    .empty-state {
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
      border-radius: var(--radius);
    }

    .hero-copy {
      padding: clamp(26px, 5vw, 48px);
    }

    .kicker {
      margin: 0 0 12px;
      color: var(--accent-strong);
      font-size: 0.78rem;
      font-weight: 750;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0 0 16px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.25rem, 6vw, 5.2rem);
      line-height: 0.95;
      letter-spacing: -0.055em;
    }

    .lead {
      margin: 0;
      max-width: 58ch;
      color: var(--muted);
      font-size: clamp(1rem, 1.8vw, 1.16rem);
      line-height: 1.7;
    }

    .scan-card {
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 20px;
    }

    .privacy-note {
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.6;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    button,
    .file-label {
      appearance: none;
      border: 0;
      border-radius: 999px;
      padding: 12px 18px;
      background: #26211a;
      color: #fff;
      font: inherit;
      font-weight: 720;
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 46px;
    }

    button:hover,
    .file-label:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 22px rgba(38, 33, 26, 0.16);
    }

    button.secondary,
    .file-label.secondary {
      background: #fff;
      color: var(--text);
      border: 1px solid var(--border);
    }

    button:disabled {
      cursor: not-allowed;
      opacity: 0.62;
      transform: none;
      box-shadow: none;
    }

    input[type="file"] {
      display: none;
    }

    main {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 22px 56px;
    }

    .status {
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.5;
      min-height: 24px;
    }

    .toolbar {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) 160px auto;
      gap: 12px;
      padding: 16px;
      margin-bottom: 22px;
      align-items: end;
    }

    label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 700;
    }

    input[type="search"],
    input[type="text"],
    input[type="range"],
    select {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 15px;
      background: #fff;
      color: var(--text);
      padding: 12px 13px;
      font: inherit;
      outline: none;
    }

    input:focus,
    select:focus {
      border-color: rgba(215, 168, 32, 0.78);
      box-shadow: 0 0 0 4px rgba(215, 168, 32, 0.14);
    }

    .range-wrap {
      display: grid;
      gap: 8px;
    }

    .range-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .count-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border);
      background: #fff;
      border-radius: 999px;
      padding: 12px 16px;
      min-height: 46px;
      color: var(--muted);
      font-weight: 700;
      white-space: nowrap;
    }

    .font-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .font-card {
      position: relative;
      overflow: hidden;
      padding: 18px;
      min-height: 190px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 15px;
    }

    .font-meta {
      display: grid;
      gap: 4px;
      padding-right: 34px;
    }

    .font-name {
      font-weight: 780;
      line-height: 1.25;
    }

    .font-details {
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.45;
    }

    .favorite {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 34px;
      height: 34px;
      padding: 0;
      background: rgba(255, 255, 255, 0.75);
      color: #9a8d76;
      border: 1px solid var(--border);
      box-shadow: none;
    }

    .favorite[data-active="true"] {
      color: var(--accent-strong);
      background: rgba(215, 168, 32, 0.16);
      border-color: rgba(215, 168, 32, 0.45);
    }

    .preview {
      align-self: center;
      word-break: break-word;
      line-height: 1.14;
    }

    .alphabet {
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.45;
      word-break: break-word;
    }

    .empty-state {
      padding: 36px;
      text-align: center;
      color: var(--muted);
    }

    .hidden {
      display: none !important;
    }

    footer {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 22px 36px;
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.6;
    }

    @media (max-width: 940px) {
      .hero,
      .toolbar {
        grid-template-columns: 1fr;
      }

      .font-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 620px) {
      header {
        padding-top: 28px;
      }

      .font-grid {
        grid-template-columns: 1fr;
      }

      .hero-copy,
      .scan-card,
      .toolbar,
      .font-card {
        border-radius: 18px;
      }
    }
  
.wordmark {display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-weight:750;margin-bottom:26px;font-size:20px}
.monogram {background:#26211a;color:#fff;border-radius:12px;padding:10px;font:28px Georgia,serif}
h2{color:var(--text);letter-spacing:-.025em} .panel{background:#fff;border:1px solid var(--border);border-radius:22px;padding:24px;margin:22px 0}
.project-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end}.project-controls label{flex:1;min-width:180px}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 22px}.presets button{padding:8px 14px;min-height:40px}
.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.comparison-grid .font-card{box-shadow:none}
.preview{font-synthesis:none;white-space:pre-wrap}.unavailable{font:14px/1.6 system-ui;color:#805013;background:#fff7e9;padding:14px;border-radius:10px}
.font-card{min-width:0}.font-meta{overflow-wrap:anywhere}.font-actions{display:flex;gap:8px;flex-wrap:wrap}.font-actions button{font-size:13px;padding:8px 12px;min-height:40px}
.creator{display:grid;grid-template-columns:1fr 1.5fr;gap:36px;line-height:1.8}.creator h2{font:36px/1.15 Georgia,serif;margin-top:0}.creator p{margin-top:0}
a{color:#795c13}summary{cursor:pointer;font-weight:700;padding:12px 0}details p{max-width:85ch}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #8a6710;outline-offset:4px}
input[type=file]{display:block;max-width:100%}.file-label{border-radius:15px}.small{font-size:14px;line-height:1.6;color:var(--muted)}
@media(max-width:620px){.comparison-grid,.creator{grid-template-columns:1fr}.panel{padding:18px}.project-controls>*{width:100%}.wordmark{font-size:18px}}
.hero>*{min-width:0}.file-label{position:relative;overflow:hidden;min-width:0;max-width:100%;cursor:pointer}.file-label input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-label:focus-within{outline:3px solid #8a6710;outline-offset:3px}.project-controls .file-label{flex:0 1 auto;min-width:0}.toolbar input,.toolbar select{min-width:0}input[type=range]{padding:10px 0}

.feedback-bar{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:0 0 24px}.feedback-bar span{flex:1;min-width:220px}.feedback-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 18px;background:#26211a;color:white;border-radius:999px;text-decoration:none;font-weight:700}.secondary-link{background:white;color:var(--text);border:1px solid var(--border)}#feedback{scroll-margin-top:20px}.feedback-button:focus-visible{outline:3px solid #8a6710;outline-offset:4px}