/* DaFontStyle Font Previewer 13 - mobile first */
.dfsp{--dfsp-ink:#111;--dfsp-muted:#555;--dfsp-line:#e4e4e1;--dfsp-soft:#f3f3f1;--dfsp-accent:#2b4bff;margin:2rem 0;display:flex;flex-direction:column;gap:14px;color:var(--dfsp-ink)}
.dfsp *{box-sizing:border-box}
.dfsp-title{margin:0;font-size:1.35rem;line-height:1.25}
.dfsp-subtitle{margin:10px 0 0;font-size:1.1rem;line-height:1.3}
.dfsp-controls{margin:0;display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;background:var(--dfsp-soft)}
.dfsp-label{font-size:.875rem;font-weight:600}
.dfsp-text{width:100%;height:48px;padding:0 14px;border:1px solid #cfcfcb;border-radius:10px;background:#fff;color:var(--dfsp-ink);font:inherit;font-size:16px}
.dfsp-text:focus,.dfsp-size:focus-visible,.dfsp-pick:focus,.dfsp-btn:focus-visible{outline:2px solid var(--dfsp-accent);outline-offset:2px}
.dfsp-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.dfsp-size-label{white-space:nowrap}
.dfsp-size{flex:1 1 140px;min-width:0;height:44px;accent-color:var(--dfsp-ink)}
.dfsp-btn{min-height:44px;padding:0 16px;border:1px solid var(--dfsp-ink);border-radius:10px;background:var(--dfsp-ink);color:#fff;font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer}
.dfsp-btn-light{background:#fff;color:var(--dfsp-ink);border-color:#cfcfcb}
.dfsp-btn:disabled{opacity:.6;cursor:wait}
.dfsp-stage{display:flex;flex-direction:column;border:1px solid var(--dfsp-line);border-radius:14px;overflow:hidden;background:#fff;color:#111}
.dfsp-stage[data-theme=dark]{background:#111;color:#fff;border-color:#111}
.dfsp-style{margin:0;padding:18px 16px 14px;border-top:1px solid var(--dfsp-line)}
.dfsp-stage[data-theme=dark] .dfsp-style{border-color:#2a2a2a}
.dfsp-style:first-child{border-top:0}
.dfsp-sample{margin:0;min-height:1.3em;font-size:44px;line-height:1.25;overflow-wrap:anywhere;word-break:break-word}
.dfsp-caption{margin-top:8px;font-size:.8125rem;color:var(--dfsp-muted)}
.dfsp-stage[data-theme=dark] .dfsp-caption{color:#bdbdbd}
.dfsp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:44px}
.dfsp-actions:not(.is-ready){visibility:hidden}
.dfsp-pick{height:44px;padding:0 10px;border:1px solid #cfcfcb;border-radius:10px;background:#fff;font:inherit}
.dfsp-summary{margin:0;font-size:1rem;line-height:1.6;color:#333}
.dfsp-map{display:flex;flex-direction:column;gap:14px}
.dfsp-group-label{margin:0 0 6px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.8125rem;font-weight:600;color:var(--dfsp-muted)}
.dfsp-chars{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}
.dfsp-chars span{display:flex;align-items:center;justify-content:center;height:52px;border-radius:8px;background:var(--dfsp-soft);font-size:26px;line-height:1;overflow:hidden}
.dfsp-download{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border-radius:12px;background:var(--dfsp-accent);color:#fff!important;font-weight:700;text-decoration:none!important;text-align:center}
.dfsp-download:hover{filter:brightness(.92)}
/* Text + Preview button */
.dfsp-text-row{flex-wrap:nowrap}
.dfsp-text-row .dfsp-text{flex:1;min-width:0}
.dfsp-text-row .dfsp-btn{flex:none;height:48px}

/* Style variants */
.dfsp-variants{display:flex;flex-direction:column;gap:6px}
.dfsp-variant-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.dfsp-variant{width:100%;min-height:76px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;border:1px solid var(--dfsp-line);border-radius:12px;background:#fff;color:var(--dfsp-ink);font:inherit;text-align:left;cursor:pointer}
.dfsp-variant[aria-pressed=true]{border:2px solid var(--dfsp-ink);padding:9px 11px}
.dfsp-variant-sample{font-size:24px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dfsp-variant-name{font-size:.75rem;color:var(--dfsp-muted)}
.dfsp-btn-accent{background:var(--dfsp-accent);border-color:var(--dfsp-accent)}

/* Product mockups */
.dfsp-mock{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:var(--dfsp-soft)}
.dfsp-mock[hidden]{display:none}
.dfsp-mock-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.dfsp-mock-tabs::-webkit-scrollbar{display:none}
.dfsp-chip{flex:none;min-height:40px;padding:0 14px;border:1px solid #cfcfcb;border-radius:999px;background:#fff;color:var(--dfsp-ink);font:inherit;font-size:.875rem;font-weight:600;white-space:nowrap;cursor:pointer}
.dfsp-chip[aria-pressed=true]{background:var(--dfsp-ink);border-color:var(--dfsp-ink);color:#fff}
.dfsp-mock-colors{display:flex;gap:10px}
.dfsp-swatch{width:36px;height:36px;border-radius:50%;border:2px solid #cfcfcb;cursor:pointer;padding:0}
.dfsp-swatch[aria-pressed=true]{outline:3px solid var(--dfsp-accent);outline-offset:2px}
.dfsp-mock-view{border-radius:12px;overflow:hidden;background:#fff;line-height:0}
.dfsp-mock-view svg{display:block;width:100%;height:auto}
.dfsp-mock .dfsp-btn{align-self:flex-start}

/* AI intro + more characters */
.dfsp-intro{margin:0;font-size:1.0625rem;line-height:1.65;color:#222}
.dfsp-more-btn{align-self:flex-start}
.dfsp-more-btn:not(.is-ready){display:none}

/* FAQ */
.dfsp-faq{display:flex;flex-direction:column;gap:0;margin-top:6px}
.dfsp-faq .dfsp-subtitle{margin-bottom:6px}
.dfsp-q{border-top:1px solid var(--dfsp-line);padding:12px 0}
.dfsp-q:last-child{border-bottom:1px solid var(--dfsp-line)}
.dfsp-q summary{cursor:pointer;font-weight:600;font-size:1rem;line-height:1.4;min-height:28px}
.dfsp-q p{margin:8px 0 0;font-size:.9375rem;line-height:1.6;color:#333}

/* Mockup editor */
.dfsp-mock[aria-busy=true]{min-height:120px}
.dfsp-mock-view:focus-visible{outline:2px solid var(--dfsp-accent);outline-offset:2px}
.dfsp-ed-text{cursor:move;touch-action:none}
.dfsp-mock-view.is-dragging{cursor:grabbing}
.dfsp-ed-hint{margin:0;font-size:.8125rem;color:var(--dfsp-muted)}
.dfsp-ed{display:flex;flex-direction:column;gap:12px}
.dfsp-ed-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.dfsp-ed .dfsp-size{flex:none;width:100%;height:32px}
.dfsp-ed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 16px}
.dfsp-ed .dfsp-mock-colors{flex-wrap:wrap;align-items:center}
.dfsp-ed .dfsp-chip{min-height:36px}
.dfsp-color{width:44px;height:36px;padding:0;border:1px solid #cfcfcb;border-radius:8px;background:#fff;cursor:pointer}
.dfsp-btn-light[aria-pressed=true]{background:var(--dfsp-ink);color:#fff;border-color:var(--dfsp-ink)}
.dfsp-ed-more{font-size:.875rem;font-weight:600;color:var(--dfsp-accent)}

/* Font details */
.dfsp-details{display:flex;flex-direction:column;gap:10px}
.dfsp-desc{margin:0;font-size:1rem;line-height:1.6;color:#333}
.dfsp-dl{margin:0;display:grid;grid-template-columns:auto 1fr;border:1px solid var(--dfsp-line);border-radius:12px;overflow:hidden}
.dfsp-dl dt,.dfsp-dl dd{margin:0;padding:10px 14px;border-top:1px solid var(--dfsp-line);font-size:.9375rem;line-height:1.5}
.dfsp-dl dt:first-of-type,.dfsp-dl dt:first-of-type+dd{border-top:0}
.dfsp-dl dt{background:var(--dfsp-soft);font-weight:600;color:var(--dfsp-muted)}
.dfsp-dl dd{overflow-wrap:anywhere}
.dfsp-dl a{color:var(--dfsp-accent)}
.dfsp-more{margin-top:6px}
.dfsp-more summary{cursor:pointer;font-weight:600;color:var(--dfsp-accent);min-height:32px}
.dfsp-more p{margin:6px 0 0;font-size:.8125rem;line-height:1.55;color:var(--dfsp-muted);max-height:240px;overflow:auto}
@media (min-width:768px){
	.dfsp-title{font-size:1.6rem}
	.dfsp-controls{padding:16px 18px}
	.dfsp-style{padding:24px 24px 16px}
	.dfsp-chars{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
	.dfsp-chars span{height:60px;font-size:30px}
	.dfsp-download{align-self:flex-start}
}
@media (prefers-reduced-motion:no-preference){.dfsp-btn,.dfsp-download{transition:filter .15s,opacity .15s}}