.tool{padding-block:32px 24px}.tool__head{text-align:center;margin-bottom:24px}.tool__head h1{font-size:clamp(28px,4.5vw,44px);line-height:1.1;letter-spacing:-.03em;margin:0 0 10px}.tool__head p{color:var(--text-2);max-width:600px;margin:0 auto}.tool__seo{margin:48px auto 0}.tool [hidden]{display:none!important}.msg{max-width:760px;margin:0 auto 16px;padding:12px 16px;border-radius:var(--radius);background:var(--accent-soft);color:var(--text);font-size:15px}.workspace{display:flex;flex-direction:column;gap:14px}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.toolbar__sep{width:1px;height:24px;background:var(--border);margin-inline:4px}.toolbar__other{margin-left:auto;padding:9px 16px}.panel{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border)}.panel__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}.panel__row--actions{justify-content:flex-end}.readout{color:var(--text-2);font-size:14px;font-variant-numeric:tabular-nums;margin-right:auto}.field{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2)}.field select,.field input[type=number]{font:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 10px}.field input[type=number]{width:96px;font-variant-numeric:tabular-nums}.field input[type=range]{width:120px;accent-color:var(--accent)}.field output{color:var(--text);min-width:3ch;font-variant-numeric:tabular-nums}.field input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px}.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.chips .chip{flex-shrink:0}.chips .chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.preview-box{display:flex;justify-content:center;padding:16px;border-radius:var(--radius-lg);background:var(--surface-2);border:1px solid var(--border)}.preview-box canvas{display:block;max-width:100%;height:auto!important;border-radius:8px;background:repeating-conic-gradient(#8884 0,#8884 25%,#0000 0,#0000 50%) 0 0 / 16px 16px}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}.stat{padding:10px 12px;border-radius:12px;background:var(--surface-2)}.stat small{display:block;color:var(--text-2);font-size:12px}.stat b{font-size:17px;font-variant-numeric:tabular-nums}.stat--good b{color:#1a9d57}.split,.split__main,.split__side{display:flex;flex-direction:column;gap:14px;min-width:0}@media (min-width: 1000px){.split{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}.split__side{position:sticky;top:80px;max-height:calc(100vh - 96px);overflow-y:auto;padding-right:2px;scrollbar-width:thin}.split__side .chips{flex-wrap:wrap;overflow:visible}.split__side .panel__row--actions .btn{flex:1}.split__side .field{flex-wrap:wrap}}@media (max-width: 560px){.tool{padding-top:20px}.panel__row--actions .btn{flex:1}}.search{flex:1 1 220px;font:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 12px}.fontgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:12px;flex:1;min-height:0;overflow-y:auto;padding:2px}.fontitem{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:84px;padding:10px 12px;text-align:left;border:2px solid var(--border);border-radius:12px;background:var(--surface)}.fontitem:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}.fontitem[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.fontitem .sample{font-size:28px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.35;transition:opacity .2s}.fontitem.ready .sample{opacity:1}.fontitem small{color:var(--text-2);font-size:12px}.fontitem[hidden]{display:none}.fontbtn{width:100%;justify-content:flex-start;font-size:22px;line-height:1.2;padding:10px 14px}.frames h2{font-size:22px;letter-spacing:-.02em;margin:0 0 14px}.frames__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}.frame{padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:var(--surface-2);aspect-ratio:1}.frame img{width:100%;height:100%;object-fit:contain;display:block}.frame:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}.frame[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.frames__more{text-align:center;margin:18px 0 0}.fpick__frames{flex:1;min-height:0;overflow-y:auto;align-content:start}.busy{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px;background:#00000059}.busy[hidden]{display:none}.busy__box{display:flex;align-items:center;gap:14px;max-width:360px;padding:18px 22px;border-radius:var(--radius);background:var(--surface, #fff);color:var(--text);font-size:16px;box-shadow:0 10px 40px #0000004d}.busy__spin{flex:none;width:26px;height:26px;border-radius:50%;border:3px solid var(--accent-soft);border-top-color:var(--accent);animation:busy-spin .8s linear infinite}@keyframes busy-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.busy__spin{animation-duration:2.4s}}.fontlabel{margin:0 0 -6px;font-weight:600}#textRows:not([hidden]),#logoRows:not([hidden]){display:flex;flex-direction:column;gap:14px}.field textarea{font:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;resize:vertical;width:100%}.sliders{display:grid;gap:12px 24px;grid-template-columns:1fr}.slider{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text-2)}.slider output{color:var(--text);font-variant-numeric:tabular-nums;margin-left:6px}.slider input[type=range]{width:100%;accent-color:var(--accent);height:28px}.seo figure.shot{margin:18px 0}.seo figure.shot img{display:block;width:100%;max-width:800px;height:auto;border-radius:12px;border:1px solid var(--border)}.seo figure.shot figcaption{margin-top:6px;color:var(--text-2);font-size:13px}
