:where(html[data-datakar-ui="legacy"]) .app-page { padding-block:var(--dk-space-5) 0 } :where(html[data-datakar-ui="legacy"]) .app-hero { padding-block:0 var(--dk-space-2) } :where(html[data-datakar-ui="legacy"]) .app-hero-topline { display:flex;align-items:center;justify-content:space-between;gap:var(--dk-space-4);flex-wrap:wrap } :where(html[data-datakar-ui="legacy"]) .app-heading { display:flex;align-items:center;gap:var(--dk-space-2);margin:0;font-size:1.25rem;line-height:1.6;font-weight:var(--dk-font-weight-bold) } :where(html[data-datakar-ui="legacy"]) .app-heading::before { content:"";flex:0 0 auto;width:5px;height:16px;border-radius:var(--dk-radius-pill);background:var(--dk-color-primary) } :where(html[data-datakar-ui="legacy"]) .app-intro, :where(html[data-datakar-ui="legacy"]) .app-about p { max-width:64ch;margin:var(--dk-space-3) 0 0;color:var(--dk-color-text-soft);line-height:1.9 } :where(html[data-datakar-ui="legacy"]) .app-text-link { color:var(--dk-color-link);text-decoration:none;font-size:var(--dk-font-size-sm);font-weight:var(--dk-font-weight-bold);white-space:nowrap } :where(html[data-datakar-ui="legacy"]) .app-text-link:hover, :where(html[data-datakar-ui="legacy"]) .app-text-link:focus-visible { text-decoration:underline;text-underline-offset:.18em } :where(html[data-datakar-ui="legacy"]) .app-docs-link { display:inline-block;margin-top:var(--dk-space-3) } :where(html[data-datakar-ui="legacy"]) .app-section { margin-top:var(--dk-space-7);scroll-margin-top:92px } :where(html[data-datakar-ui="legacy"]) .app-form { display:grid;gap:var(--dk-space-4);margin-top:var(--dk-space-4);padding:1.1rem } :where(html[data-datakar-ui="legacy"]) .app-form textarea.dk-input { min-height:120px;resize:vertical;border-radius:var(--dk-radius-lg) } :where(html[data-datakar-ui="legacy"]) .app-actions { display:flex;flex-wrap:wrap;gap:var(--dk-space-2) } :where(html[data-datakar-ui="legacy"]) .app-result { margin-top:var(--dk-space-4);padding:1.1rem } :where(html[data-datakar-ui="legacy"]) .app-preview { min-width:0;min-height:260px;display:grid;place-items:center;padding:var(--dk-space-5);border:1px dashed var(--dk-color-border);border-radius:var(--dk-radius-lg);background:var(--dk-color-surface-soft);overflow:auto } :where(html[data-datakar-ui="legacy"]) .app-preview p { margin:0;color:var(--dk-color-muted);text-align:center } :where(html[data-datakar-ui="legacy"]) .app-preview canvas, :where(html[data-datakar-ui="legacy"]) .app-preview svg { display:block;max-width:100%;height:auto;background:#fff;border-radius:var(--dk-radius-sm) } :where(html[data-datakar-ui="legacy"]) .app-download-actions { display:flex;flex-wrap:wrap;gap:var(--dk-space-2);margin-top:var(--dk-space-4) } :where(html[data-datakar-ui="legacy"]) .app-about { padding-bottom:var(--dk-space-2) } :where(html[data-datakar-ui="legacy"]) .app-result.is-updated { animation:dk-generator-pop 360ms var(--dk-ease-standard) } @keyframes dk-generator-pop{0%{transform:translateY(2px);opacity:.82}100%{transform:none;opacity:1}} @media(max-width:620px){ :where(html[data-datakar-ui="legacy"]) .app-page { padding-block-start:var(--dk-space-4) } :where(html[data-datakar-ui="legacy"]) .app-hero-topline { align-items:flex-start } :where(html[data-datakar-ui="legacy"]) .app-section { margin-top:var(--dk-space-6) } :where(html[data-datakar-ui="legacy"]) .app-preview { min-width:0;min-height:220px;padding:var(--dk-space-4) } } @media(prefers-reduced-motion:reduce){ :where(html[data-datakar-ui="legacy"]) .app-result.is-updated { animation:none } } :where(html[data-datakar-ui="legacy"]) h1.app-heading { font-size:clamp(1.5rem,3vw,1.75rem) } :where(html[data-datakar-ui="legacy"]) .app-form, :where(html[data-datakar-ui="legacy"]) .app-result { min-width:0;overflow-wrap:anywhere } @media (max-width:380px) { :where(html[data-datakar-ui="legacy"]) .app-text-link { white-space:normal;overflow-wrap:anywhere; } :where(html[data-datakar-ui="legacy"]) .app-heading { min-width:0;max-width:100%;overflow-wrap:anywhere; } :where(html[data-datakar-ui="legacy"]) .app-actions .dk-button, :where(html[data-datakar-ui="legacy"]) .app-download-actions .dk-button { min-width:0;max-width:100%; } } :where(html[data-datakar-ui="legacy"]) [data-tool-first] :is(.app-hero-topline) { flex-wrap:wrap; row-gap:.5rem; } :where(html[data-datakar-ui="legacy"]) [data-tool-first] :is(.app-hero-topline) > a { flex:0 0 auto; max-width:100%; overflow-wrap:anywhere; white-space:normal; } :where(html[data-datakar-ui="legacy"]) [data-tool-first] .tool-essential { margin-block:.75rem 0; max-width:70ch; line-height:1.75; } :where(html[data-datakar-ui="legacy"]) [data-tool-first] :is(.app-hero) + section { margin-block-start:1.25rem; }