/* Foxy-IT Font Studio. All styles are scoped to the shortcode instance. */
.ufg {
    --ufg-ink: #202735;
    --ufg-muted: #647082;
    --ufg-line: #e0e4e9;
    --ufg-soft: #f6f7f9;
    --ufg-accent: #bd512d;
    --ufg-accent-soft: #fff1e9;
    --ufg-shadow: 0 8px 28px rgba(32, 39, 53, .045);
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 1240px;
    min-width: 0;
    margin: 28px auto;
    padding: clamp(20px, 4.5vw, 54px);
    border: 1px solid #e8eaed;
    border-radius: 30px;
    background: linear-gradient(145deg, #f5f6f7, #eff1f3 62%, #f5f6f7);
    color: var(--ufg-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    text-align: start;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.ufg, .ufg *, .ufg *::before, .ufg *::after { box-sizing: border-box; }
.ufg [hidden] { display: none !important; }
.ufg :is(h2, h3, p, ul, ol) { margin: 0; padding: 0; }
.ufg :is(h2, h3, strong) { color: var(--ufg-ink); }
.ufg :is(button, textarea, input) { font: inherit; }
.ufg button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ufg :is(button, textarea, input, a):focus-visible {
    outline: 3px solid #b95633;
    outline-offset: 4px;
}

.ufg .ufg__hero { position: relative; padding: 0 140px 30px 0; }
.ufg .ufg__hero::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 0;
    width: 120px;
    height: 120px;
    background: url("fox.webp") center / contain no-repeat;
    opacity: .62;
    filter: saturate(.5);
    pointer-events: none;
}
.ufg .ufg__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: #6b5146;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.ufg .ufg__eyebrow::before {
    content: "";
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ce7653;
    box-shadow: 0 0 0 5px rgba(206, 118, 83, .08);
}
.ufg .ufg__hero h2 {
    max-width: 770px;
    margin: 0 0 13px;
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 760;
    line-height: 1.12;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
}
.ufg .ufg__intro { max-width: 640px; color: var(--ufg-muted); font-size: 16px; line-height: 1.7; }
.ufg .ufg__hero-action { margin-top: 20px; padding-inline: 22px; }

.ufg .ufg__workspace { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 20px; }
.ufg :is(.ufg__editor, .ufg__preview) {
    min-width: 0;
    padding: clamp(20px, 2.5vw, 28px);
    border: 1px solid rgba(222, 226, 232, .9);
    border-radius: 23px;
    background: #fff;
    box-shadow: var(--ufg-shadow);
}
.ufg .ufg__editor { display: flex; flex-direction: column; }
.ufg .ufg__field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ufg .ufg__field-head .ufg__label { margin: 0; }
.ufg .ufg__field-head .ufg__button { flex-shrink: 0; }
.ufg :is(.ufg__label, .ufg__preview-heading) {
    display: block;
    margin: 0 0 15px;
    color: var(--ufg-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.02em;
}
.ufg .ufg__input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 155px;
    max-height: 400px;
    margin: 0;
    padding: 17px 18px;
    border: 1px solid #dbe0e7;
    border-radius: 14px;
    background: #fafbfc;
    box-shadow: inset 0 1px 2px rgba(32, 39, 53, .015);
    color: var(--ufg-ink);
    font-size: 20px;
    line-height: 1.6;
    resize: vertical;
    transition: border-color .18s ease, background-color .18s ease;
}
.ufg .ufg__input::placeholder { color: #7e8897; opacity: 1; }
.ufg .ufg__input:focus { border-color: #c08267; background: #fff; }
.ufg :is(.ufg__editor-footer, .ufg__editor-meta) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 12px; margin: 9px 0 7px; color: var(--ufg-muted); font-size: 12px; }
.ufg .ufg__counter { color: var(--ufg-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ufg .ufg__translit {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: auto 0 0;
    color: #384354;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.ufg .ufg__translit input {
    flex: 0 0 19px;
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 19px;
    height: 19px;
    margin: 0;
    accent-color: #b95633;
    cursor: pointer;
}
.ufg .ufg__hint { margin-top: 4px; color: var(--ufg-muted); font-size: 12px; line-height: 1.6; }

.ufg .ufg__preview { display: flex; flex-direction: column; background: linear-gradient(160deg, #fff 60%, #fbfaf9); }
.ufg .ufg__preview-kicker { margin-bottom: 5px; color: #846958; font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .11em; text-transform: uppercase; }
.ufg .ufg__preview-title { margin: 0 0 16px; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.025em; }
.ufg .ufg__profile { flex: 1; min-width: 0; padding: 20px; border: 1px solid #e7e9ed; border-radius: 17px; background: #fff; }
.ufg .ufg__profile-top { display: flex; align-items: center; gap: 12px; margin-bottom: 21px; }
.ufg .ufg__avatar {
    display: grid;
    flex: 0 0 45px;
    place-items: center;
    width: 45px;
    height: 45px;
    border: 1px solid #ede3dc;
    border-radius: 50%;
    background: #f8ede6;
    color: #965336;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
}
.ufg .ufg__profile-meta { min-width: 0; }
.ufg :is(.ufg__profile-name, .ufg__profile-handle) { display: block; overflow-wrap: anywhere; }
.ufg .ufg__profile-name { font-size: 14px; font-weight: 700; }
.ufg .ufg__profile-handle { margin-top: 1px; color: var(--ufg-muted); font-size: 12px; }
.ufg .ufg__preview-label { display: block; margin-bottom: 7px; color: var(--ufg-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ufg :is(.ufg__preview-output, .ufg__output) {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #283242;
    font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Math", "Noto Sans", "Arial Unicode MS", Georgia, serif;
    font-variant-ligatures: none;
    line-height: 1.75;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    resize: none;
    -webkit-text-fill-color: currentColor;
    opacity: 1;
}
.ufg .ufg__preview-output { min-height: 100px; padding: 0 2px; background: transparent; font-size: 24px; }
.ufg .ufg__preview-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 13px 0; color: var(--ufg-muted); font-size: 12px; }
.ufg .ufg__selected-name { color: #4d596a; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.ufg .ufg__preview > .ufg__button { width: 100%; margin-top: 14px; }
.ufg .ufg__output-count { margin: 4px 0 7px; color: var(--ufg-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ufg .ufg__cyr-note { margin-top: 13px; padding: 11px 13px; border: 1px solid #ecdccf; border-radius: 10px; background: #fff8f3; color: #805b42; font-size: 12px; line-height: 1.65; }

.ufg .ufg__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid #dde2e8;
    border-radius: 11px;
    background: #fff;
    box-shadow: none;
    color: #4b5667;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: normal;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ufg .ufg__button--primary { border-color: #293343; background: #293343; color: #fff; }
.ufg .ufg__button--copy { border-color: #ead8cc; background: var(--ufg-accent-soft); color: #884226; }
.ufg .ufg__button--text { padding: 10px 4px; border-color: transparent; background: transparent; color: var(--ufg-muted); font-size: 12px; }
.ufg .ufg__button:disabled { cursor: not-allowed; opacity: .5; }

.ufg :is(.ufg__controls, .ufg__toolbar) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 13px 20px; margin: 32px 0 17px; }
.ufg .ufg__section-head { min-width: 0; }
.ufg .ufg__section-head p { margin-top: 6px; color: var(--ufg-muted); font-size: 12px; line-height: 1.6; }
.ufg .ufg__results-heading { color: var(--ufg-ink); font-size: 21px; font-weight: 730; line-height: 1.3; letter-spacing: -.03em; }
.ufg .ufg__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; padding: 4px; border: 1px solid #e0e4e9; border-radius: 14px; background: #e9edf0; }
.ufg :is(.ufg__filter, [data-filter]) {
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: #596577;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color .18s ease, color .18s ease;
}
.ufg [data-filter][aria-pressed="true"] { border-color: #e1e5e9; background: #fff; box-shadow: 0 2px 5px rgba(30, 39, 54, .04); color: #253143; }
.ufg .ufg__results-count { width: 100%; margin-bottom: 12px; color: var(--ufg-muted); font-size: 12px; }
.ufg .ufg__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ufg .ufg__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 18px;
    border: 1px solid #e0e4e9;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(30, 39, 54, .025);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.ufg .ufg__card[data-selected="true"] { border-color: #c48d70; box-shadow: 0 0 0 2px rgba(196, 141, 112, .12), var(--ufg-shadow); }
.ufg .ufg__card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 9px; min-height: 26px; margin-bottom: 9px; }
.ufg .ufg__card-name { color: #384354; font-size: 12px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.ufg .ufg__badge { max-width: 100%; padding: 3px 7px; border: 1px solid #e8eaed; border-radius: 6px; background: #f7f8fa; color: #626d7d; font-size: 10px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ufg .ufg__output { flex: 1 0 auto; height: 100px; min-height: 100px; padding: 6px 1px 10px; background: #fff; font-size: 22px; }
.ufg .ufg__card-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; padding-top: 13px; border-top: 1px solid #edf0f3; }
.ufg .ufg__card-actions .ufg__button { padding: 9px 8px; font-size: 12px; }
.ufg .ufg__status { min-height: 27px; margin-top: 14px; color: #675346; font-size: 13px; line-height: 1.6; }
.ufg .ufg__status:empty { min-height: 12px; margin-top: 0; }
.ufg .ufg__empty { padding: 26px 20px; border: 1px dashed #cfd6df; border-radius: 17px; background: rgba(255, 255, 255, .55); color: var(--ufg-muted); font-size: 14px; text-align: center; }
.ufg .ufg__more { display: flex; width: fit-content; max-width: 100%; min-width: min(240px, 100%); margin: 23px auto 0; padding-inline: 28px; background: rgba(255, 255, 255, .9); }

.ufg :is(.ufg__guide, .ufg__help) { margin-top: 27px; padding-top: 26px; border-top: 1px solid #dce1e6; }
.ufg :is(.ufg__guide-title, .ufg__help h3) { margin-bottom: 20px; font-size: 20px; font-weight: 720; line-height: 1.3; letter-spacing: -.025em; }
.ufg .ufg__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; }
.ufg .ufg__steps li { position: relative; min-width: 0; margin: 0; padding: 0 0 0 42px; list-style: none; }
.ufg .ufg__step-number { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #d7dce3; border-radius: 9px; background: rgba(255, 255, 255, .7); color: #657080; font-size: 12px; font-weight: 650; }
.ufg .ufg__steps strong { display: block; margin: 3px 0 5px; color: #3a4555; font-size: 13px; line-height: 1.6; }
.ufg .ufg__steps p { color: var(--ufg-muted); font-size: 12px; line-height: 1.7; }
.ufg .ufg__notice { margin-top: 28px; padding: 17px 20px; border: 1px solid #dfe3e8; border-radius: 13px; background: rgba(255, 255, 255, .5); color: var(--ufg-muted); font-size: 12px; line-height: 1.7; }
.ufg .ufg__notice strong { display: block; margin-bottom: 3px; color: #566172; font-size: 12px; font-weight: 700; }
.ufg .ufg__notice p + p { margin-top: 8px; }

/* Long-form guide stays readable without letting wide tables widen the page. */
.ufg .ufg__article {
    min-width: 0;
    margin-top: 36px;
    padding: clamp(22px, 3.8vw, 40px);
    border: 1px solid #e0e4e9;
    border-radius: 23px;
    background: rgba(255, 255, 255, .85);
    color: #4a5565;
    font-size: 15px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
.ufg .ufg__article :is(h2, h3, h4) { max-width: 800px; margin: 30px 0 13px; color: #293343; font-weight: 730; line-height: 1.3; letter-spacing: -.025em; }
.ufg .ufg__article h2 { font-size: clamp(23px, 2.8vw, 30px); }
.ufg .ufg__article h3 { font-size: 21px; }
.ufg .ufg__article h4 { font-size: 17px; }
.ufg .ufg__article > :first-child { margin-top: 0; }
.ufg .ufg__article p { max-width: 76ch; margin: 12px 0; font-size: 15px; line-height: 1.8; }
.ufg .ufg__article :is(ul, ol) { max-width: 76ch; margin: 13px 0 20px; padding-left: 24px; }
.ufg .ufg__article ul { list-style: disc; }
.ufg .ufg__article ol { list-style: decimal; }
.ufg .ufg__article li { margin: 7px 0; padding-left: 3px; }
.ufg .ufg__article li::marker { color: #92745f; }
.ufg .ufg__article strong { color: #384353; font-weight: 700; }
.ufg .ufg__article a:not(.ufg__button) { color: #984425; text-decoration: underline; text-decoration-color: #c8967b; text-underline-offset: 3px; }
.ufg .ufg__article a:focus-visible { outline: 3px solid #b95633; outline-offset: 4px; }
.ufg .ufg__article blockquote { margin: 20px 0; padding: 8px 0 8px 18px; border-left: 3px solid #c48d70; color: #667081; }
.ufg .ufg__article blockquote p { margin: 0; }
.ufg .ufg__table-wrap { max-width: 100%; margin: 22px 0; overflow-x: auto; border: 1px solid #dfe4ea; border-radius: 13px; background: #fff; -webkit-overflow-scrolling: touch; }
.ufg .ufg__table-wrap:focus-visible { outline: 3px solid #b95633; outline-offset: 4px; }
.ufg .ufg__table-wrap table { width: 100%; min-width: 580px; margin: 0; border: 0; border-collapse: collapse; border-spacing: 0; font-size: 13px; line-height: 1.65; text-align: start; }
.ufg .ufg__table-wrap :is(th, td) { padding: 13px 16px; border: 0; border-bottom: 1px solid #e6eaf0; color: #4a5565; text-align: start; vertical-align: top; }
.ufg .ufg__table-wrap th { background: #f2f4f7; color: #374353; font-weight: 700; }
.ufg .ufg__table-wrap tbody tr:last-child td { border-bottom: 0; }
.ufg .ufg__table-wrap tbody tr:nth-child(even) td { background: #fafbfc; }
.ufg .ufg__example { margin: 18px 0; padding: 20px; border: 1px solid #e0e4e9; border-radius: 15px; background: #fafbfc; }
.ufg .ufg__example > :is(h3, h4, strong) { display: block; margin: 0 0 10px; color: #414d5d; font-size: 14px; font-weight: 700; }
.ufg .ufg__example-text {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 108px;
    margin: 0 0 13px;
    padding: 12px 14px;
    border: 1px solid #e0e4ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    color: #344052;
    font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Math", "Noto Sans", "Arial Unicode MS", Georgia, serif;
    font-size: 20px;
    line-height: 1.8;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    resize: vertical;
}
.ufg .ufg__example [data-copy-example] { min-height: 44px; }

@media (hover: hover) {
    .ufg .ufg__button:not(:disabled):hover { border-color: #b6c0cd; background: #f5f7f9; color: #283343; }
    .ufg .ufg__button--primary:not(:disabled):hover { border-color: #172131; background: #172131; color: #fff; }
    .ufg .ufg__button--copy:not(:disabled):hover { border-color: #d5af96; background: #fce7d9; color: #78381e; }
    .ufg .ufg__button--text:not(:disabled):hover { border-color: transparent; background: transparent; color: #7d422e; }
    .ufg [data-filter]:hover { background: rgba(255, 255, 255, .65); color: #253143; }
    .ufg .ufg__card:hover { border-color: #c6cdd7; box-shadow: 0 7px 22px rgba(30, 39, 54, .055); }
    .ufg .ufg__card[data-selected="true"]:hover { border-color: #ba8063; }
}

@media (max-width: 1000px) {
    .ufg .ufg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ufg .ufg__filters { width: fit-content; }
    .ufg :is(.ufg__controls, .ufg__toolbar) { align-items: flex-start; }
}

@media (max-width: 740px) {
    .ufg { margin: 16px auto; padding: 25px 20px; border-radius: 23px; }
    .ufg .ufg__hero { padding: 0 0 25px; }
    .ufg .ufg__hero::after { display: none; }
    .ufg .ufg__intro { font-size: 14px; }
    .ufg .ufg__workspace { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ufg .ufg__input { min-height: 140px; font-size: 18px; }
    .ufg .ufg__preview-output { min-height: 86px; }
    .ufg .ufg__profile { padding: 18px; }
    .ufg .ufg__profile-top { margin-bottom: 14px; }
    .ufg :is(.ufg__controls, .ufg__toolbar) { margin-top: 26px; gap: 12px; }
    .ufg .ufg__results-heading { width: 100%; }
    .ufg .ufg__steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .ufg .ufg__steps p { font-size: 13px; }
}

@media (max-width: 480px) {
    .ufg { padding: 24px 14px; border-radius: 18px; }
    .ufg .ufg__hero h2 { font-size: 31px; }
    .ufg :is(.ufg__editor, .ufg__preview) { padding: 18px; border-radius: 18px; }
    .ufg .ufg__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ufg .ufg__filters { gap: 2px; padding: 3px; border-radius: 12px; }
    .ufg [data-filter] { padding-inline: 9px; font-size: 11px; }
    .ufg .ufg__card { padding: 17px; }
    .ufg .ufg__output { height: 92px; min-height: 92px; font-size: 23px; }
    .ufg .ufg__notice { padding: 15px; }
    .ufg .ufg__article { padding: 22px 16px; border-radius: 17px; }
    .ufg .ufg__article h3 { font-size: 19px; }
    .ufg .ufg__article p { font-size: 14px; }
    .ufg .ufg__example { padding: 14px; }
    .ufg .ufg__example-text { font-size: 18px; padding: 10px; }
    .ufg .ufg__example [data-copy-example] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ufg *, .ufg *::before, .ufg *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
    .ufg .ufg__card[data-selected="true"], .ufg [data-filter][aria-pressed="true"] { outline: 2px solid Highlight; }
    .ufg .ufg__hero::after { display: none; }
}