/* Weird Text Generator v1.4.0 | design theme matched to Font Generator Tool | GPL-2.0 */

.wtg-app{
--wp:#4460ec;
--wh:#3346cc;
--wl:#e8ecfd;
--wg:#fff;
--ws:#f7f8fe;
--wb:#d9def7;
--wi:#1a1828;
--wm:#6b6480;
--wt:#e05b9e;
--wr:10px;
--wo:0 2px 10px rgba(68,96,236,.12);
--wtg-output-size:18px;
--wtg-sticky-extra:0px;
font-family:inherit;
color:var(--wi);
padding:0 12px 48px;
max-width:860px;
margin:0 auto;
position:relative;
box-sizing:border-box;
}
.wtg-app *,
.wtg-app *::before,
.wtg-app *::after{
box-sizing:inherit;
}
.wtg-app .wtg-sr{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
border:0;
}
.wtg-app .wtg-sticky{
position:sticky;
top:calc(var(--wp-admin--admin-bar--height,0px) + var(--wtg-sticky-extra,0px));
z-index:100;
background:var(--wg);
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px);
border-bottom:1px solid var(--wb);
padding:12px 0 8px;
margin-bottom:10px;
}
.wtg-app .wtg-input-row{
display:flex;
align-items:flex-start;
gap:8px;
margin-bottom:8px;
}
.wtg-app .wtg-input{
flex:1;
min-width:0;
border:2px solid var(--wb);
border-radius:var(--wr);
padding:10px 14px;
font-size:16px;
font-family:inherit;
color:var(--wi);
background:var(--wg);
transition:border-color .2s;
min-height:48px;
line-height:1.5;
outline:0;
box-shadow:none;
margin:0;
}
.wtg-app .wtg-input:focus{
outline:none;
border-color:var(--wp);
}
.wtg-app .wtg-input:focus-visible{
outline:3px solid var(--wp);
outline-offset:1px;
}
.wtg-app .wtg-clear{
flex:0 0 auto;
background:none;
border:1px solid var(--wb);
border-radius:8px;
padding:6px 10px;
cursor:pointer;
color:var(--wm);
font-size:14px;
line-height:1;
transition:background .15s,color .15s;
min-height:40px;
font-family:inherit;
}
.wtg-app .wtg-clear:hover{
background:var(--wl);
color:var(--wh);
}
.wtg-app .wtg-clear:focus-visible{
outline:3px solid var(--wp);
outline-offset:2px;
}
.wtg-app .wtg-hint{
margin:0;
font-size:13px;
font-style:italic;
color:var(--wm);
line-height:1.4;
}
.wtg-app .wtg-heart{
color:var(--wt);
}
.wtg-app .wtg-count{
font-weight:600;
font-style:normal;
letter-spacing:.02em;
color:var(--wh);
font-variant-numeric:tabular-nums;
}
.wtg-app .wtg-search-row{
position:relative;
display:flex;
align-items:center;
margin-top:8px;
}
.wtg-app .wtg-search{
width:100%;
border:1px solid var(--wb);
border-radius:8px;
padding:7px 34px 7px 12px;
font-size:14px;
font-family:inherit;
color:var(--wi);
background:var(--ws);
transition:border-color .2s,box-shadow .2s;
outline:0;
margin:0;
}
.wtg-app .wtg-search:focus{
outline:none;
border-color:var(--wp);
box-shadow:0 0 0 3px rgba(124,92,191,.12);
}
.wtg-app .wtg-search:focus-visible{
outline:3px solid var(--wp);
outline-offset:1px;
}
.wtg-app .wtg-search::-webkit-search-cancel-button{
display:none;
}
.wtg-app .wtg-search-clear{
position:absolute;
right:6px;
top:50%;
transform:translateY(-50%);
border:0;
background:none;
color:var(--wm);
font-size:13px;
line-height:1;
font-family:inherit;
padding:4px 6px;
border-radius:6px;
cursor:pointer;
transition:background .15s,color .15s;
}
.wtg-app .wtg-search-clear:hover{
background:var(--wl);
color:var(--wh);
}
.wtg-app .wtg-search-clear:focus-visible{
outline:3px solid var(--wp);
outline-offset:2px;
}
.wtg-app .wtg-h3{
font-size:16px;
font-weight:700;
color:var(--wh);
margin:0 0 8px;
padding:4px 0 4px 10px;
border-left:3px solid var(--wp);
background:var(--wl);
border-radius:0 4px 4px 0;
line-height:1.4;
}
.wtg-app .wtg-h4{
font-size:16px;
font-weight:700;
color:var(--wt);
margin:0 0 4px;
padding:4px 0 4px 10px;
border-left:3px solid var(--wt);
background:#fff9fe;
border-radius:0 4px 4px 0;
line-height:1.4;
}
.wtg-app .wtg-favs{
background:#fff9fe;
border:2px dashed var(--wt);
border-radius:var(--wr);
padding:14px;
margin-bottom:20px;
}
.wtg-app .wtg-favs-note{
margin:0 0 8px;
font-size:13px;
color:var(--wm);
font-style:italic;
}
.wtg-app .wtg-card{
background:var(--ws);
border:1px solid var(--wb);
border-radius:var(--wr);
padding:10px 14px;
margin-bottom:6px;
transition:box-shadow .15s,border-color .15s;
}
.wtg-app .wtg-card:hover{
border-color:var(--wp);
box-shadow:var(--wo);
}
.wtg-app .wtg-card-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:6px;
flex-wrap:wrap;
gap:4px;
}
.wtg-app .wtg-name{
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.05em;
color:var(--wm);
font-variant-numeric:tabular-nums;
-webkit-hyphens:none;
hyphens:none;
}
.wtg-app .wtg-actions{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
flex-shrink:0;
}
.wtg-app .wtg-preview{
margin:0;
font-size:var(--wtg-output-size,18px);
line-height:1.6;
word-break:break-word;
overflow-wrap:anywhere;
color:var(--wi);
-webkit-user-select:text;
user-select:text;
max-height:5.5em;
overflow:hidden;
}
.wtg-app .wtg-copy{
background:var(--wp);
color:#fff;
border:none;
border-radius:6px;
padding:4px 12px;
font-size:12px;
font-weight:600;
cursor:pointer;
transition:background .15s,transform .1s;
font-family:inherit;
line-height:1.5;
}
.wtg-app .wtg-copy:hover{
background:var(--wh);
}
.wtg-app .wtg-copy:active{
transform:scale(.96);
}
.wtg-app .wtg-copy:focus-visible{
outline:3px solid var(--wh);
outline-offset:2px;
}
.wtg-app .wtg-fav{
background:none;
border:1px solid #c4b8e8;
border-radius:6px;
font-size:18px;
cursor:pointer;
color:#7c6aad;
transition:color .15s,transform .15s,background .15s,border-color .15s;
padding:2px 6px;
line-height:1;
font-family:inherit;
}
.wtg-app .wtg-fav:hover{
color:var(--wt);
border-color:var(--wt);
background:#fff0f8;
transform:scale(1.15);
}
.wtg-app .wtg-fav.is-on{
color:var(--wt);
border-color:var(--wt);
background:#fff0f8;
}
.wtg-app .wtg-fav:focus-visible{
outline:3px solid var(--wp);
outline-offset:2px;
border-radius:6px;
}
.wtg-app .wtg-empty{
text-align:center;
padding:24px 12px;
color:var(--wm);
font-size:14px;
font-style:italic;
background:var(--ws);
border:1px dashed var(--wb);
border-radius:var(--wr);
margin:12px 0;
}
.wtg-app .wtg-more{
display:block;
margin:18px auto 0;
border:1px solid var(--wp);
background:var(--wg);
color:var(--wp);
font-weight:600;
font-size:14px;
font-family:inherit;
padding:10px 24px;
border-radius:var(--wr);
cursor:pointer;
transition:background .15s,color .15s;
}
.wtg-app .wtg-more:hover{
background:var(--wp);
color:#fff;
}
.wtg-app .wtg-more:focus-visible{
outline:3px solid var(--wh);
outline-offset:2px;
}
.wtg-app .wtg-loading{
height:3px;
border-radius:999px;
overflow:hidden;
background:var(--wl);
margin:0 0 10px;
position:relative;
}
.wtg-app .wtg-loading::after{
content:'';
position:absolute;
inset:0;
width:40%;
border-radius:999px;
background:var(--wp);
animation:wtg-slide 1.1s ease-in-out infinite;
}
@keyframes wtg-slide{
0%{transform:translateX(-100%)}
100%{transform:translateX(250%)}
}
.wtg-app .wtg-list.is-loading{
opacity:.55;
transition:opacity .2s;
}
.wtg-app .wtg-toast{
position:fixed;
bottom:28px;
left:50%;
transform:translateX(-50%) translateY(12px);
background:#1e1b38;
color:#fff;
font-size:14px;
font-weight:600;
padding:10px 22px;
border-radius:999px;
box-shadow:0 4px 20px rgba(0,0,0,.22);
opacity:0;
pointer-events:none;
transition:opacity .22s ease,transform .22s ease;
z-index:999999;
white-space:nowrap;
font-family:inherit;
}
.wtg-app .wtg-toast.is-on{
opacity:1;
transform:translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion:reduce){
.wtg-app .wtg-loading::after{
animation:none;
width:100%;
opacity:.5;
}
}
@media (max-width:600px){
.wtg-app .wtg-sticky{
max-width:100%;
overflow-x:hidden;
}
}
@media (max-width:480px){
.wtg-app .wtg-card{
padding:7px 10px;
}
.wtg-app .wtg-card-top{
flex-direction:row;
align-items:center;
flex-wrap:nowrap;
margin-bottom:4px;
gap:4px;
}
.wtg-app .wtg-name{
flex:1;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.wtg-app .wtg-actions{
flex-shrink:0;
}
}
@media (max-width:360px){
.wtg-app{
padding:0 8px 32px;
}
.wtg-app .wtg-preview{
font-size:15px;
}
}
@media print{
.wtg-app .wtg-sticky{
position:static;
}
.wtg-app .wtg-input-row,
.wtg-app .wtg-hint,
.wtg-app .wtg-search-row,
.wtg-app .wtg-copy,
.wtg-app .wtg-fav,
.wtg-app .wtg-more,
.wtg-app .wtg-toast{
display:none !important;
}
.wtg-app .wtg-card{
break-inside:avoid;
border:1px solid #ccc;
box-shadow:none;
}
.wtg-app .wtg-preview{
font-size:14pt;
max-height:none;
}
.wtg-app .wtg-favs{
border:1px solid #e05b9e;
}
}