/* Letras Chulas: generator UI */
.hero{padding:18px 8px 10px}
.hero h1{font-size:28px;background:linear-gradient(90deg,var(--accent),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:15px}
.tool{padding:14px}
.tool-label{display:block;font-weight:700;font-size:13px;color:var(--muted);margin-bottom:6px}
.tool-input-wrap{position:relative}
.tool-input{font-size:20px;font-weight:700;min-height:64px;border:2px solid var(--line);padding:12px 44px 12px 14px;border-radius:14px}
.tool-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}
.tool-clear{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;border:0;background:var(--line);color:var(--ink);cursor:pointer;font-weight:700}
.tool-clear[hidden]{display:none}
.tool-count{margin:6px 0 10px}
.tool-bar{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.btn.rnd{width:auto;padding:8px 14px}
.chip.on{background:var(--accent);border-color:var(--accent)}
.rnd-box{margin-bottom:14px;text-align:center;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,#fff)}
.rnd-box[hidden]{display:none}
.rnd-out{font-size:26px;line-height:1.3;margin:6px 0 10px;word-break:break-word;font-family:var(--font),system-ui,sans-serif}
.rnd-box .btn{width:auto;padding:10px 22px}
.styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.style{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--card);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:4px 10px;align-items:center;transition:border-color .15s,box-shadow .15s}
.style:hover{border-color:var(--accent)}
.style.copied{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.style[hidden]{display:none}
.style-head{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.style-head .fav{border:0;background:none;cursor:pointer;font-size:16px;line-height:1;color:var(--muted);padding:2px 4px}
.style-head .fav.on{color:var(--gold)}
.style-out{grid-column:1;font-size:21px;line-height:1.35;word-break:break-word;cursor:pointer;font-family:var(--font),system-ui,sans-serif;min-height:30px}
.style-out.cmb{letter-spacing:.5px}
.style .copy{grid-column:2;grid-row:1/3;width:auto;padding:8px 14px;border-radius:999px;background:var(--ink);font-size:13px;align-self:center}
.style .copy.ok{background:var(--accent)}
.style .safe{font-size:10px;background:#dcfce7;color:#166534;border-radius:999px;padding:1px 6px;font-weight:800;text-transform:none;letter-spacing:0}
.share-tool{justify-content:center;margin:14px 0}
.intro p{font-size:15px;line-height:1.55;margin-bottom:10px}
.intro h2,.card.prose h2{font-size:18px;margin:12px 0 8px}
.intro ul,.card.prose ul,.card.prose ol{padding-left:22px;font-size:15px;line-height:1.55;margin-bottom:10px}
.sym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.sym{border:1px solid var(--line);border-radius:10px;padding:8px 4px;text-align:center;font-size:22px;cursor:pointer;background:var(--card);line-height:1}
.sym:hover{border-color:var(--accent)}
.sym.ok{background:color-mix(in srgb,var(--accent) 12%,#fff);border-color:var(--accent)}
.sym-list{display:flex;flex-wrap:wrap;gap:6px}
.sym-list .sym{min-width:120px;font-size:15px;padding:8px 10px}
.landing-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.landing-links a{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;text-decoration:none;color:var(--ink)}
.landing-links a:hover{border-color:var(--accent);color:var(--accent)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:560px){.styles{grid-template-columns:1fr}.style-out{font-size:19px}.tool-input{font-size:18px}.hero h1{font-size:23px}}