:root {
    --bg: #fafaff;
    --ink: #0d0d1f;
    --mut: #4d4d6a;
    --line: rgba(13, 13, 31, .12);
    --dot: rgba(13, 13, 31, .11);
    --hbg: rgba(250, 250, 255, .58);
    --glass: rgba(255, 255, 255, .42);
    --glass2: rgba(255, 255, 255, .78);
    --gbd: rgba(255, 255, 255, .8);
    --gsh: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(13, 13, 31, .05), 0 8px 28px rgba(13, 13, 31, .1);
    --chip: rgba(255, 255, 255, .8);
    --surf: #fff;
    --fbg: #0d0d1f;
    --g: linear-gradient(100deg, #ffb300, #ff7a00 50%, #ff2d2d)
}

:root[data-theme=dark] {
    --bg: #0a0a14;
    --ink: #f4f4fb;
    --mut: #9d9dbb;
    --line: rgba(255, 255, 255, .14);
    --dot: rgba(255, 255, 255, .1);
    --hbg: rgba(10, 10, 20, .55);
    --glass: rgba(255, 255, 255, .08);
    --glass2: rgba(255, 255, 255, .17);
    --gbd: rgba(255, 255, 255, .2);
    --gsh: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 8px 30px rgba(0, 0, 0, .35);
    --chip: rgba(255, 255, 255, .07);
    --surf: #14142a;
    --fbg: #14142a;
    color-scheme: dark
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px
}

body {
    margin: 0;
    background: var(--bg) radial-gradient(var(--dot) 1.2px, transparent 1.3px) 0 0/28px 28px;
    color: var(--ink);
    font: 17px/1.65 "Space Grotesk", system-ui, sans-serif;
    overflow-x: hidden;
    padding-top: 52px
}

a {
    color: inherit
}

h1,
h2,
h3,
p {
    margin: 0
}

.w {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 22px
}

.m,
.btn,
h1,
.chip,
.lb,
.no,
.op,
.mail {
    font-family: "JetBrains Mono", monospace
}

.gt {
    background: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

:focus-visible {
    outline: 3px solid #ff7a00;
    outline-offset: 3px
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--hbg);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    backdrop-filter: blur(20px) saturate(1.8);
    box-shadow: inset 0 -1px 0 var(--gbd)
}

.bar nav {
    margin-left: auto;
    margin-right: 12px
}

.rt {
    display: flex;
    gap: 8px;
    align-items: center
}

#th {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%
}

#th svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round
}

#th .sn {
    display: none
}

:root[data-theme=dark] #th .sn {
    display: block
}

:root[data-theme=dark] #th .mn {
    display: none
}

.bar {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 22px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 600 13px "JetBrains Mono", monospace
}

.logo {
    text-decoration: none;
    font-size: 16px;
    font-weight: 700
}

.logo::after {
    content: ".";
    font-size: 22px;
    line-height: 0;
    background: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

nav {
    display: flex;
    gap: 2px
}

nav a {
    text-decoration: none;
    padding: 5px 13px;
    border-radius: 99px;
    color: var(--mut);
    transition: .25s
}

nav a:hover {
    color: var(--ink)
}

nav a.on {
    background: var(--ink);
    color: var(--bg)
}

.chip,
#mb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: var(--chip);
    backdrop-filter: blur(10px);
    border-radius: 99px;
    padding: 4px 14px;
    font: 600 12px "JetBrains Mono", monospace;
    color: var(--ink)
}

.chip.live::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16c784;
    animation: pu 1.8s infinite
}

@keyframes pu {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 199, 132, .6)
    }

    70%,
    100% {
        box-shadow: 0 0 0 8px rgba(22, 199, 132, 0)
    }
}

#mb {
    display: none;
    height: 34px;
    cursor: pointer
}

#mb.o {
    border-color: var(--ink)
}

#mb .ln {
    position: relative;
    width: 16px;
    height: 8px
}

#mb .ln i {
    position: absolute;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: .45s cubic-bezier(.7, 0, .2, 1)
}

#mb .ln i:nth-child(1) {
    top: 0;
    width: 16px
}

#mb .ln i:nth-child(2) {
    bottom: 0;
    width: 9px
}

#mb.o .ln i:nth-child(1) {
    top: 3px;
    transform: rotate(45deg)
}

#mb.o .ln i:nth-child(2) {
    bottom: 3px;
    width: 16px;
    transform: rotate(-45deg)
}

#gl {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 122, 0, .9), rgba(255, 45, 45, .4) 40%, transparent 68%);
    opacity: .3;
    will-change: transform;
    z-index: -1;
    pointer-events: none
}

@media(hover:hover) {
    #gl {
        display: block
    }
}

.hero {
    padding: 84px 0 60px
}

.hero .w {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "c p" "h p" "l p" "r p";
    column-gap: 48px;
    align-items: center
}

.ht {
    display: contents
}

.ht>.chip {
    grid-area: c;
    justify-self: start
}

.ht>h1 {
    grid-area: h
}

.ht>.lead {
    grid-area: l
}

.ht>.rowb {
    grid-area: r
}

.pf {
    grid-area: p
}

.pf {
    position: relative;
    width: min(320px, 28vw);
    aspect-ratio: 1;
    border-radius: 48px;
    background: var(--g);
    transform: rotate(3deg);
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
    --d: .35s !important;
    box-shadow: 0 30px 60px rgba(13, 13, 31, .14)
}

.pf:hover {
    transform: rotate(0)
}

.pi {
    position: absolute;
    inset: 8px;
    border-radius: 40px;
    overflow: hidden;
    background: var(--surf);
    display: grid;
    place-items: center
}

.pi span {
    font: 700 clamp(40px, 7vw, 84px) "JetBrains Mono", monospace;
    letter-spacing: -.06em
}

.pi img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

h1 {
    font-weight: 700;
    font-size: clamp(38px, 6.4vw, 76px);
    line-height: 1;
    letter-spacing: -.06em;
    margin: 22px 0
}

.wd {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: 0 .04em .1em;
    margin-bottom: -.1em
}

.wd>i {
    display: inline-block;
    font-style: normal;
    transform: translateY(110%);
    animation: up .95s cubic-bezier(.16, 1, .3, 1) calc(.1s + var(--k)*.09s) forwards
}

@keyframes up {
    to {
        transform: none
    }
}

.ty {
    display: inline-block;
    white-space: nowrap;
    animation: pop .9s cubic-bezier(.16, 1, .3, 1) .4s backwards
}

@keyframes pop {
    from {
        opacity: 0;
        transform: translateY(40px)
    }
}

.cur {
    display: inline-block;
    width: .07em;
    height: .84em;
    background: var(--ink);
    margin-left: 6px;
    vertical-align: -.05em;
    animation: bl 1s steps(1) infinite
}

@keyframes bl {
    50% {
        opacity: 0
    }
}

.lead {
    max-width: 48ch;
    font-size: 20px;
    color: var(--mut)
}

.rowb {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px
}

.btn {
    text-decoration: none;
    display: inline-block;
    padding: 14px 26px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    background: var(--g);
    box-shadow: 0 12px 30px rgba(255, 122, 0, .3);
    transition: transform .2s, box-shadow .2s
}

.btn:hover {
    box-shadow: 0 16px 38px rgba(255, 122, 0, .45)
}

.btn.gh {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--ink)
}

.btn.gh:hover {
    background: var(--ink);
    color: var(--bg);
    box-shadow: inset 0 0 0 1.5px var(--ink)
}





.sec {
    display: block;
    padding: 72px 0;
    border-top: 1px solid var(--line)
}

.lb {
    font-weight: 700;
    font-size: 13px;
    color: var(--mut)
}

.lb b {
    background: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-right: 8px
}

.big {
    font-size: clamp(26px, 4.2vw, 46px);
    letter-spacing: -.04em;
    line-height: 1.12;
    font-weight: 700;
    max-width: 22ch
}

.sec p.t {
    color: var(--mut);
    max-width: 54ch;
    margin-top: 18px
}

.tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 22px
}

.tags span {
    font: 700 12px "JetBrains Mono", monospace;
    padding: 6px 14px;
    border-radius: 99px;
    border: 1px solid var(--line);
    transition: .25s
}

.tags span:hover {
    color: #fff;
    border-color: transparent;
    background: var(--g)
}

.cta .big {
    max-width: none;
    font-size: clamp(34px, 7vw, 84px);
    letter-spacing: -.05em;
    line-height: 1.02
}

.mail {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
    padding: 8px 8px 8px 28px;
    border-radius: 99px;
    border: 1.5px solid transparent;
    background: linear-gradient(var(--surf), var(--surf)) padding-box, var(--g) border-box;
    font-weight: 700;
    font-size: clamp(15px, 3vw, 26px);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(255, 122, 0, .18)
}

.mail::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--g);
    transform: translateX(-101%);
    transition: transform .7s cubic-bezier(.16, 1, .3, 1)
}

.mail:hover::before {
    transform: none
}

.mail .me,
.mail .go2 {
    position: relative;
    z-index: 1;
    transition: color .4s, background .4s
}

.mail:hover .me {
    color: #fff
}

.mail .go2 {
    font-size: 13px;
    padding: 12px 20px;
    border-radius: 99px;
    background: var(--g);
    color: #fff
}

.mail:hover .go2 {
    background: #fff;
    color: #0d0d1f
}

@media(max-width:760px) {
    .mail {
        gap: 10px;
        padding: 6px 6px 6px 18px
    }

    .mail .go2 {
        padding: 10px 14px
    }
}

.rv {
    opacity: 0
}

.rv.in {
    opacity: 1;
    animation: rise .95s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(34px)
    }
}

.lead.rv {
    --d: .55s !important
}

.rowb.rv {
    --d: .7s !important
}

footer {
    margin-top: 40px;
    background: var(--fbg);
    color: #b8b8d6;
    border-radius: 30px 30px 0 0;
    position: relative;
    overflow: hidden
}

footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--g)
}





.mp,
#sc {
    display: none
}

#sc {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(13, 13, 31, .22);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility 0s .35s
}

#sc.o {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s
}

.mp {
    position: fixed;
    left: 0;
    right: 0;
    top: 52px;
    z-index: 58;
    padding: 8px 6px 16px;
    border-radius: 0 0 26px 26px;
    background: var(--hbg);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    backdrop-filter: blur(20px) saturate(1.8);
    border-bottom: 1px solid var(--gbd);
    transform-origin: top;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity .35s, transform .55s cubic-bezier(.16, 1, .3, 1), visibility 0s .55s
}

html.mo,
body.mo {
    overflow: hidden;
    overscroll-behavior: none
}

body.mo header {
    background: var(--hbg) !important;
    backdrop-filter: blur(16px) !important
}

#up {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--surf);
    color: var(--ink);
    box-shadow: 0 10px 30px rgba(13, 13, 31, .22);
    cursor: pointer;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.9);
    transition: opacity .4s, transform .5s cubic-bezier(.16, 1, .3, 1), visibility 0s .5s
}

#up.v {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s
}

#up:hover {
    transform: translateY(-3px)
}

#up svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.tr {
    fill: none;
    stroke: var(--line);
    stroke-width: 3
}

.pgc {
    fill: none;
    stroke: url(#fg);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 132;
    stroke-dashoffset: 132;
    transform: rotate(-90deg);
    transform-origin: center
}

#up .ar {
    inset: 11px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round
}

.mp.o {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s
}

.ml a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    padding: 14px 16px;
    border-radius: 18px;
    font: 700 17px "JetBrains Mono", monospace;
    letter-spacing: -.03em;
    color: var(--ink);
    opacity: 0;
    transform: translateX(14px);
    transition: opacity .4s, transform .5s cubic-bezier(.16, 1, .3, 1), background .2s, color .2s
}

.mp.o .ml a {
    opacity: 1;
    transform: none;
    transition-delay: calc(.1s + var(--i)*.06s), calc(.1s + var(--i)*.06s), 0s, 0s
}

.ml a.on {
    background: var(--g);
    color: #fff
}

@media(hover:hover) {
    .ml a:hover {
        background: var(--g);
        color: #fff
    }
}

.mpf {
    margin: 8px 22px 4px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    font: 12px "JetBrains Mono", monospace;
    color: var(--mut)
}

/* liquid glass */
.chip,
#mb,
#up,
.tags span,
.btn.gh,
.pf {
    background: var(--glass);
    border: 1px solid var(--gbd);
    box-shadow: var(--gsh);
    -webkit-backdrop-filter: blur(16px) saturate(1.7);
    backdrop-filter: blur(16px) saturate(1.7)
}

#nav a {
    position: relative
}

#nav a.on {
    background: none;
    color: var(--ink)
}

#nav a:hover {
    color: var(--ink);
    background: none
}

#nav a::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--g);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1)
}

#nav a.on::after,
#nav a:hover::after {
    transform: none
}

.btn.gh {
    color: var(--ink)
}

.btn.gh:hover {
    background: var(--glass2);
    color: var(--ink);
    box-shadow: var(--gsh), 0 12px 30px rgba(255, 122, 0, .25)
}

.pf {
    box-shadow: var(--gsh), 0 30px 60px rgba(13, 13, 31, .14)
}






/* tools */
.tb {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 30px 0 14px;
    flex-wrap: wrap
}

.sf {
    position: relative;
    flex: 1 1 320px;
    max-width: 520px;
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 8px 0 22px;
    border-radius: 99px;
    border: 1.5px solid var(--gbd);
    background: var(--glass);
    box-shadow: var(--gsh);
    -webkit-backdrop-filter: blur(16px) saturate(1.7);
    backdrop-filter: blur(16px) saturate(1.7);
    transition: box-shadow .4s
}

.sf:focus-within {
    border-color: transparent;
    background: linear-gradient(var(--surf), var(--surf)) padding-box, var(--g) border-box;
    box-shadow: 0 12px 34px rgba(255, 122, 0, .22)
}

.sf input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    font: 500 16px "Space Grotesk", system-ui, sans-serif;
    color: var(--ink)
}

.sf input::placeholder {
    color: var(--mut)
}

.sf input::-webkit-search-cancel-button {
    display: none
}

.sf kbd {
    font: 700 11px "JetBrains Mono", monospace;
    padding: 4px 10px;
    border-radius: 9px;
    border: 1px solid var(--line);
    color: var(--mut);
    margin-right: 10px
}

.sf.has kbd {
    display: none
}

#qc {
    display: none;
    border: 0;
    cursor: pointer;
    font: 700 12px "JetBrains Mono", monospace;
    padding: 9px 16px;
    border-radius: 99px;
    background: var(--g);
    color: #fff
}

.sf.has #qc {
    display: block
}

.cnt {
    font: 600 13px "JetBrains Mono", monospace;
    color: var(--mut)
}

.cats {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    margin-bottom: 6px;
    scrollbar-width: none
}

.cats::-webkit-scrollbar {
    display: none
}

.cats button {
    flex: none;
    cursor: pointer;
    font: 700 13px "JetBrains Mono", monospace;
    padding: 9px 18px;
    border-radius: 99px;
    color: var(--ink);
    background: var(--glass);
    border: 1px solid var(--gbd);
    box-shadow: var(--gsh);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: background .3s, color .3s, box-shadow .3s
}

.cats button.on {
    background: var(--g);
    color: #fff;
    border-color: #ff9b00;
    box-shadow: 0 8px 20px rgba(255, 122, 0, .28)
}

.tl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 8px
}

.tl a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 22px 22px;
    border-radius: 26px;
    text-decoration: none;
    overflow: hidden;
    background: var(--glass);
    border: 1px solid var(--gbd);
    box-shadow: var(--gsh);
    -webkit-backdrop-filter: blur(16px) saturate(1.7);
    backdrop-filter: blur(16px) saturate(1.7);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .4s, background .4s
}

.tl a[hidden] {
    display: none
}

.tl a.ni {
    animation: rise .7s cubic-bezier(.16, 1, .3, 1) calc(var(--k)*.06s) backwards
}

.ct {
    position: absolute;
    top: 18px;
    right: 18px;
    font: 700 11px "JetBrains Mono", monospace;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--glass2);
    color: var(--mut)
}

.tl h3 {
    margin: 0;
    max-width: 100%;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -.03em;
    text-wrap: balance
}

.tl p {
    margin: 6px 0 20px;
    color: var(--mut);
    font-size: 15px;
    line-height: 1.5
}

.op {
    margin-top: auto;
    font: 700 12px "JetBrains Mono", monospace;
    padding: 8px 18px;
    border-radius: 99px;
    box-shadow: inset 0 0 0 1.5px var(--ink);
    transition: background .3s, color .3s, box-shadow .3s
}

@media(hover:hover) {
    .tl a:hover {
        transform: translateY(-5px);
        background: var(--glass2);
        box-shadow: var(--gsh), 0 22px 44px rgba(255, 122, 0, .16)
    }

    .tl a:hover h3 {
        background: var(--g);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

    .tl a:hover .op {
        background: var(--g);
        color: #fff;
        box-shadow: none
    }

    .cats button:not(.on):hover {
        background: var(--glass2)
    }

}

.tl a:active {
    transform: scale(.985)
}

.nf {
    text-align: center;
    color: var(--mut);
    font-size: 18px;
    padding: 56px 0
}

.nf[hidden] {
    display: none
}

.pgn {
    display: flex;
    justify-content: center;
    margin-top: 34px
}

.pgn:empty {
    display: none
}






@media(max-width:980px) {
    .tl {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:620px) {
    .tl {
        grid-template-columns: 1fr
    }

    .tl a {
        padding: 22px 20px 20px
    }

    .tb {
        margin-top: 22px
    }

    .cnt {
        width: 100%
    }
}

@media all {
    :root {
        --glass: rgba(255, 255, 255, .78);
        --glass2: rgba(255, 255, 255, .95);
        --hbg: rgba(250, 250, 255, .78)
    }

    :root[data-theme=dark] {
        --glass: rgba(34, 34, 58, .9);
        --glass2: rgba(52, 52, 84, .95);
        --hbg: rgba(10, 10, 20, .76)
    }

    *,
    *::before,
    *::after {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important
    }


    :root {
        --fg: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .6));
        --hl: rgba(255, 255, 255, .95);
        --ol: rgba(13, 13, 31, .06);
        --sp: rgba(255, 255, 255, .8)
    }

    :root[data-theme=dark] {
        --fg: linear-gradient(145deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05));
        --hl: rgba(255, 255, 255, .22);
        --ol: rgba(255, 255, 255, .07);
        --sp: rgba(255, 255, 255, .1)
    }

    .cats button,
    .sf,
    .chip,
    #mb,
    .tags span,
    .btn.gh,
    .pf {
        background: var(--fg);
        border-color: var(--gbd);
        box-shadow: inset 0 1px 0 var(--hl), 0 0 0 1px var(--ol), 0 4px 12px rgba(13, 13, 31, .06)
    }

    .tl a {
        background: radial-gradient(130% 90% at 0 0, var(--sp), transparent 55%), var(--fg);
        border-color: var(--gbd);
        box-shadow: inset 0 1px 0 var(--hl), 0 0 0 1px var(--ol), 0 6px 16px rgba(13, 13, 31, .07)
    }

    .cats button.on {
        background: var(--g)
    }

    #up {
        background: var(--fg);
        box-shadow: inset 0 1px 0 var(--hl), 0 6px 18px rgba(13, 13, 31, .22)
    }

    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(420px 320px at 100% 0, rgba(255, 122, 0, .2), transparent 70%), radial-gradient(380px 300px at 0 55%, rgba(255, 45, 45, .13), transparent 70%), radial-gradient(360px 300px at 90% 100%, rgba(255, 179, 0, .18), transparent 70%)
    }
}




/* ---- v2 additions ---- */
.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0
}

header,
.mp,
.tl a {
    -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
    backdrop-filter: blur(18px) saturate(1.6) !important
}

.pf {
    transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .6s
}

.pf:hover {
    transform: rotate(0) scale(1.03);
    box-shadow: var(--gsh), 0 30px 70px rgba(255, 122, 0, .32)
}



.tags span {
    cursor: default
}

.tp {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px
}

.ic {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #ff7a00;
    background: linear-gradient(135deg, rgba(255, 179, 0, .18), rgba(255, 45, 45, .14));
    box-shadow: inset 0 0 0 1px rgba(255, 122, 0, .22);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), background .4s, color .4s
}

.ic svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round
}

.bd {
    font: 700 10px "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--g);
    color: #fff
}

.bd.nw {
    background: #16a874
}

.cc {
    font-size: 11px;
    opacity: .55;
    margin-left: 2px
}

.cats button.on .cc {
    opacity: .9
}

.more,
.soc a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 99px;
    font: 700 13px "JetBrains Mono", monospace;
    color: var(--ink);
    background: var(--fg);
    border: 1px solid var(--gbd);
    box-shadow: inset 0 1px 0 var(--hl), 0 0 0 1px var(--ol), 0 4px 12px rgba(13, 13, 31, .06);
    transition: background .3s, color .3s, box-shadow .3s, transform .3s
}

.more {
    padding: 13px 26px
}

.soc {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px
}

.soc a {
    padding: 9px 16px
}

.soc svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

@media(hover:hover) {
    .tl a:hover .ic {
        background: var(--g);
        color: #fff;
        box-shadow: none;
        transform: rotate(-6deg) scale(1.06)
    }

    .more:hover,
    .soc a:hover {
        background: var(--g);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 12px 30px rgba(255, 122, 0, .3);
        transform: translateY(-2px)
    }
}

@media(max-width:760px) {
    .hero {
        padding: 30px 0 40px
    }

    .hero .w {
        grid-template-columns: auto 1fr;
        grid-template-areas: "p c" "h h" "l l" "r r";
        column-gap: 16px
    }

    .pf {
        width: 76px;
        border-radius: 50%;
        transform: none !important
    }

    .pi {
        inset: 4px;
        border-radius: 50%
    }

    h1 {
        margin: 26px 0 22px;
        font-size: clamp(30px, 9vw, 60px)
    }

    .sec {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 52px 0
    }

    header nav {
        display: none
    }

    #mb {
        display: inline-flex
    }

    .mp,
    #sc {
        display: block
    }


}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }

    .rv {
        opacity: 1
    }

    .wd>i {
        transform: none
    }
}

/* ---- multi-page additions ---- */
.ph {
    padding: 84px 0 36px
}

.ph h1 {
    margin: 22px 0 18px
}

.ph .chip {
    justify-self: start
}

.sh {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px
}

.sh a {
    font: 700 13px "JetBrains Mono", monospace;
    color: var(--mut);
    text-decoration: none;
    transition: color .25s
}

.sh a:hover {
    color: var(--ink)
}

.cen {
    display: flex;
    justify-content: center;
    margin-top: 34px
}

.cen:empty {
    display: none
}

.sec p.t+p.t {
    margin-top: 14px
}

.cta .rowb {
    margin-top: 30px
}

@media(max-width:760px) {
    .ph {
        padding: 40px 0 24px
    }
}

/* ==== tool pages (shared by every web app) ==== */
.bc {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font: 600 12px "JetBrains Mono", monospace;
    color: var(--mut)
}

.bc li+li::before {
    content: "/";
    margin-right: 6px;
    opacity: .5
}

.bc a {
    color: var(--mut);
    text-decoration: none;
    transition: color .25s
}

.bc a:hover,
.bc [aria-current] {
    color: var(--ink)
}

.ph.tp2 {
    padding-bottom: 28px
}

.tool {
    padding-bottom: 8px
}

.wc,
.wc2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px
}

.wc {
    align-items: stretch
}

.wc2 {
    margin-top: 18px;
    align-items: start
}

.card,
.ed {
    background: var(--fg);
    border: 1px solid var(--gbd);
    border-radius: 26px;
    box-shadow: inset 0 1px 0 var(--hl), 0 0 0 1px var(--ol), 0 6px 16px rgba(13, 13, 31, .07);
    -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
    backdrop-filter: blur(18px) saturate(1.6) !important
}

.card {
    padding: 20px
}

.pn,
.stack {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.ed {
    display: flex;
    flex-direction: column;
    min-height: 540px;
    overflow: hidden;
    transition: box-shadow .4s, border-color .4s
}

.ed:focus-within {
    border-color: transparent;
    background: linear-gradient(var(--surf), var(--surf)) padding-box, var(--g) border-box;
    box-shadow: 0 14px 40px rgba(255, 122, 0, .18)
}

.edt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 12px;
    border-bottom: 1px solid var(--line)
}

.edt .sp {
    flex: 1
}

.tbn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border-radius: 99px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: 700 12px "JetBrains Mono", monospace;
    cursor: pointer;
    white-space: nowrap;
    transition: background .25s, border-color .25s, color .25s, transform .2s
}

.tbn svg,
.mini svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.tbn:active:not(:disabled) {
    transform: scale(.96)
}

.tbn:disabled {
    opacity: .38;
    cursor: default
}

.tbn input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

.tbn:focus-within {
    outline: 3px solid #ff7a00;
    outline-offset: 2px
}

#tx {
    flex: 1;
    display: block;
    width: 100%;
    min-height: 320px;
    margin: 0;
    padding: 20px 22px;
    border: 0;
    outline: 0;
    resize: vertical;
    background: transparent;
    color: var(--ink);
    font: 400 17px/1.75 "Space Grotesk", system-ui, sans-serif;
    caret-color: #ff7a00
}

#tx::placeholder {
    color: var(--mut);
    opacity: .8
}

#tx::selection {
    background: rgba(255, 122, 0, .25)
}

.edf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    flex-wrap: wrap;
    padding: 11px 18px;
    border-top: 1px solid var(--line);
    font: 600 12px "JetBrains Mono", monospace;
    color: var(--mut)
}

.edf b {
    color: var(--ink);
    font-variant-numeric: tabular-nums
}

.sv::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #16c784;
    vertical-align: 1px;
    transition: background .3s
}

.sv.off::before {
    background: var(--mut)
}

.sv.ing::before {
    background: #ffb300
}

.ch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap
}

.ch h2 {
    margin: 0;
    font: 700 12px "JetBrains Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mut)
}

.mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border-radius: 99px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: 700 11px "JetBrains Mono", monospace;
    cursor: pointer;
    transition: background .25s, border-color .25s
}

.mini svg {
    width: 14px;
    height: 14px
}

@media(hover:hover) {

    .tbn:hover:not(:disabled),
    .mini:hover {
        background: var(--glass2);
        border-color: var(--gbd)
    }

    .tbn.dz:hover:not(:disabled) {
        color: #ff2d2d;
        border-color: rgba(255, 45, 45, .4)
    }
}

.sg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.st {
    min-width: 0;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--glass)
}

.st small {
    display: block;
    font: 600 11px "JetBrains Mono", monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mut);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.st b {
    display: block;
    margin-top: 4px;
    font: 700 22px/1.2 "JetBrains Mono", monospace;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.st.lg {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border: 0;
    background: linear-gradient(135deg, rgba(255, 179, 0, .16), rgba(255, 45, 45, .1));
    box-shadow: inset 0 0 0 1px rgba(255, 122, 0, .22)
}

.st.lg b {
    margin: 0;
    font-size: 46px;
    line-height: 1;
    background: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.fld {
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 6px 0 16px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--glass);
    transition: border-color .25s, box-shadow .25s
}

.fld:focus-within {
    border-color: #ff7a00;
    box-shadow: 0 0 0 4px rgba(255, 122, 0, .14)
}

.fld input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: none;
    color: var(--ink);
    font: 700 15px "JetBrains Mono", monospace;
    -moz-appearance: textfield
}

.fld input::-webkit-outer-spin-button,
.fld input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.fld input::placeholder {
    color: var(--mut);
    font-weight: 600
}

.fld span {
    padding: 0 10px;
    font: 600 12px "JetBrains Mono", monospace;
    color: var(--mut)
}

.pbar {
    height: 8px;
    margin-top: 12px;
    border-radius: 99px;
    background: var(--line);
    overflow: hidden
}

.pbar i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--g);
    transition: width .45s cubic-bezier(.16, 1, .3, 1), background .3s
}

.pbar.done i {
    background: #16c784
}

.pbar.over i {
    background: #ff2d2d
}

.note {
    margin-top: 8px;
    font-size: 14px;
    color: var(--mut)
}

.note b {
    color: var(--ink)
}

.lm {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 13px
}

.lm .r {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    font-weight: 500
}

.lm .n {
    font: 600 12px "JetBrains Mono", monospace;
    color: var(--mut);
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.lm .pbar {
    height: 5px;
    margin-top: 6px
}

.lm li.over .n {
    color: #ff2d2d
}

.seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 99px;
    border: 1px solid var(--line);
    background: var(--glass)
}

.seg button {
    border: 0;
    border-radius: 99px;
    padding: 6px 12px;
    background: none;
    color: var(--mut);
    font: 700 11px "JetBrains Mono", monospace;
    cursor: pointer;
    white-space: nowrap;
    transition: background .25s, color .25s
}

.seg button.on {
    background: var(--g);
    color: #fff
}

@media(hover:hover) {
    .seg button:not(.on):hover {
        color: var(--ink)
    }
}

.kw {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px
}

.kw li {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto 58px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 12px;
    overflow: hidden;
    font-size: 15px
}

.kw li::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: -1;
    width: var(--p, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 179, 0, .15), rgba(255, 45, 45, .08));
    transition: width .5s cubic-bezier(.16, 1, .3, 1)
}

.kw .i {
    font: 700 11px "JetBrains Mono", monospace;
    color: var(--mut)
}

.kw .kt {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.kw .c,
.kw .pc {
    font: 600 12px "JetBrains Mono", monospace;
    color: var(--mut);
    text-align: right;
    font-variant-numeric: tabular-nums
}

.kw .pc {
    color: var(--ink)
}

.empty {
    padding: 22px 8px;
    text-align: center;
    font-size: 14px;
    color: var(--mut)
}

.kdo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.tg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none
}

.tg+.tg {
    border-top: 1px dashed var(--line)
}

.tg input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: none;
    width: 40px;
    height: 24px;
    margin: 0;
    border-radius: 99px;
    background: var(--line);
    cursor: pointer;
    transition: background .3s
}

.tg input::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(13, 13, 31, .25);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1)
}

.tg input:checked {
    background: var(--g)
}

.tg input:checked::after {
    transform: translateX(16px)
}

.tg.inl {
    padding: 0;
    gap: 10px;
    font-size: 13px;
    color: var(--mut)
}

.sl {
    margin: 4px 0 8px;
    font: 600 12px "JetBrains Mono", monospace;
    color: var(--mut)
}

.sc {
    display: flex;
    align-items: baseline;
    gap: 12px
}

.sc b {
    font: 700 42px/1 "JetBrains Mono", monospace;
    letter-spacing: -.05em
}

.sc span {
    font-weight: 700
}

.dl {
    display: grid;
    gap: 9px;
    margin: 16px 0 0
}

.dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 9px;
    border-top: 1px dashed var(--line);
    font-size: 14px
}

.dl dt {
    color: var(--mut)
}

.dl dd {
    margin: 0;
    min-width: 0;
    font: 600 13px "JetBrains Mono", monospace;
    text-align: right;
    overflow-wrap: anywhere
}

.prose {
    max-width: 74ch
}

.prose h2 {
    margin: 46px 0 14px;
    font-size: clamp(24px, 3.2vw, 32px);
    line-height: 1.2;
    letter-spacing: -.03em
}

.prose>h2:first-child {
    margin-top: 0
}

.prose p {
    margin: 0 0 16px
}

.prose ul,
.prose ol {
    margin: 0 0 18px;
    padding-left: 22px
}

.prose li {
    margin-bottom: 9px;
    padding-left: 4px
}

.prose li::marker {
    color: #ff7a00;
    font-weight: 700
}

.prose strong {
    font-weight: 700
}








.toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 32px);
    padding: 8px 8px 8px 18px;
    border-radius: 99px;
    background: var(--ink);
    color: var(--bg);
    font: 600 13px "JetBrains Mono", monospace;
    box-shadow: 0 16px 40px rgba(13, 13, 31, .3);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 16px);
    transition: opacity .3s, transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s .45s
}

.toast.v {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s
}

.toast span {
    padding: 6px 0
}

.toast button {
    border: 0;
    border-radius: 99px;
    padding: 7px 14px;
    background: var(--g);
    color: #fff;
    font: 700 12px "JetBrains Mono", monospace;
    cursor: pointer
}

.toast button[hidden] {
    display: none
}

@media(max-width:900px) {

    .wc,
    .wc2 {
        grid-template-columns: 1fr
    }

    .ed {
        min-height: 0
    }
}

@media(max-width:560px) {
    .edt {
        gap: 4px;
        padding: 10px
    }

    .tbn {
        width: 38px;
        padding: 0
    }

    .tbn span {
        display: none
    }

    #tx {
        min-height: 260px;
        padding: 16px 18px;
        font-size: 16px
    }

    .card {
        padding: 16px;
        border-radius: 22px
    }

    .ed {
        border-radius: 22px
    }

    .st b {
        font-size: 20px
    }

    .st.lg b {
        font-size: 40px
    }

    .kw li {
        grid-template-columns: 20px minmax(0, 1fr) auto 52px;
        gap: 8px;
        padding: 8px 10px;
        font-size: 14px
    }

}

.kw li.empty {
    display: block;
    isolation: auto
}

.sc b.mt {
    color: var(--mut)
}

/* ---- page headers ---- */
.ph h1 {
    margin: 20px 0 20px;
    font-size: clamp(46px, 8.4vw, 100px);
    line-height: .95;
    letter-spacing: -.07em
}

.ph h1 .wd {
    padding-bottom: .14em;
    margin-bottom: -.14em
}

.ph h1 .cur {
    height: .74em;
    vertical-align: -.02em;
    background: #ff7a00
}

.ph .lead {
    max-width: none
}

/* ---- FAQ ---- */
.sec.fq {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    align-items: start
}

.fqh {
    position: sticky;
    top: 92px
}

.fqh .big {
    margin-top: 18px
}

.fqh .btn {
    margin-top: 26px
}

.faq {
    display: grid;
    gap: 12px;
    counter-reset: q
}

.faq details {
    counter-increment: q;
    border-radius: 22px;
    border: 1.5px solid var(--gbd);
    background: var(--fg);
    box-shadow: inset 0 1px 0 var(--hl), 0 0 0 1px var(--ol), 0 4px 12px rgba(13, 13, 31, .05);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s, background .3s
}

.faq details[open] {
    border-color: transparent;
    background: linear-gradient(var(--surf), var(--surf)) padding-box, var(--g) border-box;
    box-shadow: 0 18px 44px rgba(255, 122, 0, .16)
}

.faq summary {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 14px;
    padding: 20px 20px 20px 22px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
    cursor: pointer;
    list-style: none;
    border-radius: 20px;
    -webkit-tap-highlight-color: transparent
}

.faq summary::-webkit-details-marker {
    display: none
}

.faq summary::before {
    content: counter(q, decimal-leading-zero);
    font: 700 13px "JetBrains Mono", monospace;
    color: var(--mut);
    transition: color .3s
}

.faq summary::after {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background:
        linear-gradient(currentColor, currentColor) center/12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center/2px 12px no-repeat,
        var(--glass2);
    color: #ff7a00;
    box-shadow: inset 0 0 0 1px var(--line);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), background-color .3s
}

.faq details[open] summary::before {
    background: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.faq details[open] summary::after {
    transform: rotate(135deg);
    color: #fff;
    background:
        linear-gradient(currentColor, currentColor) center/12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center/2px 12px no-repeat,
        var(--g);
    box-shadow: 0 6px 16px rgba(255, 122, 0, .35)
}

.faq details p {
    margin: 0;
    padding: 0 68px 22px 62px;
    color: var(--mut);
    line-height: 1.7
}

.faq details[open] p {
    animation: fqIn .5s cubic-bezier(.16, 1, .3, 1)
}

@keyframes fqIn {
    from {
        opacity: 0;
        transform: translateY(-8px)
    }
}

@supports (interpolate-size: allow-keywords) {
    .faq details {
        interpolate-size: allow-keywords
    }

    .faq details::details-content {
        height: 0;
        overflow: clip;
        transition: height .45s cubic-bezier(.16, 1, .3, 1), content-visibility .45s allow-discrete
    }

    .faq details[open]::details-content {
        height: auto
    }
}

@media(hover:hover) {
    .faq details:not([open]):hover {
        transform: translateY(-2px);
        background: var(--glass2);
        box-shadow: inset 0 1px 0 var(--hl), 0 0 0 1px var(--ol), 0 12px 26px rgba(13, 13, 31, .08)
    }
}

@media(max-width:900px) {
    .sec.fq {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .fqh {
        position: static
    }
}

@media(max-width:560px) {
    .faq summary {
        grid-template-columns: 22px minmax(0, 1fr) 30px;
        gap: 10px;
        padding: 16px 14px 16px 16px;
        font-size: 16px
    }

    .faq summary::after {
        width: 30px;
        height: 30px
    }

    .faq details p {
        padding: 0 18px 18px 48px
    }

    .ph h1 {
        font-size: clamp(40px, 12vw, 60px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .faq details::details-content {
        transition: none
    }
}

/* ==== shared UI (moved from word counter page) ==== */
.lead,
.ph .lead,
.prose {
    max-width: none
}

/* toolbar buttons */
.tbn {
    overflow: hidden;
    isolation: isolate;
    transition: color .3s, border-color .3s, box-shadow .35s, transform .35s cubic-bezier(.16, 1, .3, 1)
}

.tbn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--g);
    opacity: 0;
    transform: scale(.55);
    transition: opacity .3s, transform .45s cubic-bezier(.16, 1, .3, 1)
}

.tbn.dz::before {
    background: linear-gradient(100deg, #ff6b6b, #ff2d2d)
}

.tbn svg {
    transition: transform .45s cubic-bezier(.16, 1, .3, 1)
}

@media(hover:hover) {

    .tbn:hover:not(:disabled),
    .tbn.dz:hover:not(:disabled) {
        color: #fff;
        background: transparent;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(255, 122, 0, .32)
    }

    .tbn.dz:hover:not(:disabled) {
        box-shadow: 0 10px 22px rgba(255, 45, 45, .3)
    }

    .tbn:hover:not(:disabled)::before {
        opacity: 1;
        transform: none
    }

    .tbn:hover:not(:disabled) svg {
        transform: scale(1.12) rotate(-6deg)
    }
}

.tbn:active:not(:disabled) {
    transform: scale(.95)
}

/* drag & drop + selection */
.ed {
    position: relative
}

.ed::after {
    content: "Drop your text file here";
    position: absolute;
    inset: 61px 0 45px;
    display: grid;
    place-items: center;
    font: 700 14px "JetBrains Mono", monospace;
    color: #ff7a00;
    background: rgba(255, 122, 0, .06);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s
}

.ed.drag {
    border-color: transparent;
    background: linear-gradient(var(--surf), var(--surf)) padding-box, var(--g) border-box;
    box-shadow: 0 0 0 6px rgba(255, 122, 0, .14)
}

.ed.drag::after {
    opacity: 1
}

.ed.drag #tx {
    opacity: .35
}

.sel {
    color: #ff7a00
}

/* "All Web Apps" link */
.sh {
    align-items: center
}

.sh .sha {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 18px;
    border-radius: 99px;
    border: 1px solid var(--gbd);
    background: var(--fg);
    box-shadow: inset 0 1px 0 var(--hl), 0 0 0 1px var(--ol), 0 4px 12px rgba(13, 13, 31, .06);
    font: 700 13px "JetBrains Mono", monospace;
    color: var(--ink);
    text-decoration: none;
    transition: color .35s, box-shadow .35s, transform .35s cubic-bezier(.16, 1, .3, 1)
}

.sha::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--g);
    transform: translateX(-101%);
    transition: transform .6s cubic-bezier(.16, 1, .3, 1)
}

.sha svg {
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 50%;
    background: var(--g);
    color: #fff;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), background .35s, color .35s
}

@media(hover:hover) {
    .sh .sha:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(255, 122, 0, .3)
    }

    .sha:hover::before {
        transform: none
    }

    .sha:hover svg {
        background: #fff;
        color: #ff5a1f;
        transform: translateX(3px) rotate(-45deg)
    }
}

/* scrollbars */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #ff7a00 transparent
    }
}

::-webkit-scrollbar-track {
    background: transparent
}


::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 99px;
    background: linear-gradient(180deg, #ffb300, #ff7a00 50%, #ff2d2d) padding-box
}

::-webkit-scrollbar-thumb:hover {
    border-width: 2px
}

::-webkit-scrollbar-corner {
    background: transparent
}


/* ==== v3 adjustments ==== */
:root {
    --txt: #33334d
}

:root[data-theme=dark] {
    --txt: #bdbdd3
}

.sec {
    padding-top: 30px
}

@media(min-width:761px) {
    .ph {
        padding-top: 45px
    }
}

.tool {
    padding-bottom: 40px
}

/* section titles: compact with a gradient accent */
.big {
    font-size: clamp(24px, 3.2vw, 36px);
    line-height: 1.15;
    letter-spacing: -.035em
}



/* readable body text in both themes */
.prose p,
.prose li {
    color: var(--txt)
}

.prose strong {
    color: var(--ink)
}

/* FAQ: same stacked layout on every screen */
.sec.fq {
    grid-template-columns: 1fr;
    gap: 28px
}

.fqh {
    position: static
}

/* footer on mobile: menu first, copyright below */
@media(max-width:760px) {

}

/* ==== case converter ==== */
.cg {
    margin: 2px 0 8px;
    font: 700 11px "JetBrains Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mut)
}

.cbs+.cg {
    margin-top: 18px
}

.cbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.cb {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--glass);
    color: var(--ink);
    font: 700 13px "JetBrains Mono", monospace;
    letter-spacing: -.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color .3s, border-color .3s, box-shadow .35s, transform .35s cubic-bezier(.16, 1, .3, 1)
}

.cb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--g);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .3s, transform .45s cubic-bezier(.16, 1, .3, 1)
}

.cb.on {
    border-color: #ff9b00;
    box-shadow: inset 0 0 0 1px #ff9b00, 0 6px 16px rgba(255, 122, 0, .16)
}

.cb.on::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--g)
}

.cb:active {
    transform: scale(.96)
}

@media(hover:hover) {
    .cb:hover {
        color: #fff;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(255, 122, 0, .28)
    }

    .cb:hover::before {
        opacity: 1;
        transform: none
    }

    .cb.on:hover::after {
        background: #fff
    }
}

#scope {
    margin: 0;
    transition: color .3s
}

#scope.on {
    color: #ff7a00
}

.pvc {
    margin-top: 18px
}

.pv {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px
}

.pv li {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 8px 8px 8px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--glass);
    transition: border-color .3s
}

.pk {
    font: 700 11px "JetBrains Mono", monospace;
    color: var(--mut);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.pt {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.pv.off .pt {
    color: var(--mut)
}

.pv .mini:disabled {
    opacity: .4;
    cursor: default
}

@media(hover:hover) {
    .pv li:hover {
        border-color: rgba(255, 122, 0, .45)
    }

    .pv .mini:hover:not(:disabled) {
        background: var(--g);
        border-color: transparent;
        color: #fff
    }
}

@media(max-width:900px) {
    .pv {
        grid-template-columns: 1fr
    }
}

@media(max-width:560px) {
    .cb {
        height: 40px;
        padding: 0 8px;
        font-size: 12px
    }

    .pv li {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "k b" "t b";
        row-gap: 2px
    }

    .pk {
        grid-area: k
    }

    .pt {
        grid-area: t
    }

    .pv .mini {
        grid-area: b;
        width: 34px;
        padding: 0;
        justify-content: center
    }

    .pv .mini span {
        display: none
    }
}

/* ==== v4: headings ==== */
h1 {
    font-size: clamp(38px, 6.2vw, 70px)
}

.ph h1 {
    font-size: clamp(40px, 6.6vw, 70px)
}

h1 .wd {
    padding-left: 0
}

/* section titles: compact, with a glowing gradient marker */
.big {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: clamp(22px, 2.5vw, 30px);
    line-height: 1.2;
    letter-spacing: -.03em
}

.big::before {
    content: "";
    flex: none;
    width: 6px;
    height: .9em;
    margin-top: .15em;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffb300, #ff7a00 55%, #ff2d2d);
    box-shadow: 0 0 14px rgba(255, 122, 0, .55)
}

.cta .big {
    display: block
}

.cta .big::before {
    display: none
}

@media(max-width:560px) {
    .big {
        gap: 11px;
        font-size: 22px
    }

    .big::before {
        width: 5px
    }

    .ph h1 {
        font-size: clamp(36px, 11vw, 48px)
    }
}

/* ==== v4: footer ==== */
footer.ft {
    position: relative;
    isolation: isolate;
    margin-top: 56px;
    border-radius: 34px 34px 0 0;
    background: #0b0b18;
    color: #a9a9c6;
    overflow: hidden
}

footer.ft::before {
    height: 2px;
    z-index: 2
}

.ftg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(600px 260px at 12% 0, rgba(255, 122, 0, .18), transparent 70%),
        radial-gradient(520px 260px at 92% 100%, rgba(255, 45, 45, .16), transparent 70%),
        radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px) 0 0/24px 24px
}

.ftw {
    max-width: 1080px;
    margin: 0 auto;
    padding: 56px 22px 0
}

.ftt {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 36px
}

.ftb .logo {
    color: #fff;
    font: 700 20px "JetBrains Mono", monospace
}

.ftb p {
    max-width: 34ch;
    margin: 14px 0 20px;
    font-size: 15px;
    line-height: 1.6
}

.ftm {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 16px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font: 700 13px "JetBrains Mono", monospace;
    text-decoration: none;
    transition: border-color .3s, box-shadow .35s
}

.ftm::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--g);
    transform: translateX(-101%);
    transition: transform .6s cubic-bezier(.16, 1, .3, 1)
}

.ftm svg {
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 50%;
    background: var(--g);
    color: #fff;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), background .3s, color .3s
}




.fts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.fts a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    color: #e6e6f2;
    transition: background .3s, border-color .3s, transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s
}

.fts svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ftx {
    margin: 34px 0 -.2em;
    text-align: center;
    font: 700 clamp(90px, 23vw, 280px)/.8 "Space Grotesk", system-ui, sans-serif;
    letter-spacing: -.065em;
    background: linear-gradient(180deg, rgba(255, 179, 0, .62), rgba(255, 90, 31, .3) 48%, rgba(255, 45, 45, 0) 86%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    user-select: none;
    pointer-events: none
}

.ftbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    padding: 18px 0 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font: 12px "JetBrains Mono", monospace;
    color: #8c8cab
}

.ftcp i {
    font-style: normal;
    color: #ff4d4d
}

.ftbar nav {
    display: flex;
    gap: 6px;
    margin: 0
}

.ftbar nav a {
    padding: 6px 12px;
    border-radius: 99px;
    color: #c9c9df;
    text-decoration: none;
    transition: background .25s, color .25s
}


@media(hover:hover) {
    .ftm:hover {
        border-color: transparent;
        box-shadow: 0 12px 28px rgba(255, 122, 0, .3)
    }

    .ftm:hover::before {
        transform: none
    }

    .ftm:hover svg {
        background: #fff;
        color: #ff5a1f;
        transform: translateX(3px) rotate(-45deg)
    }



    .fts a:hover {
        background: var(--g);
        border-color: transparent;
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(255, 122, 0, .35)
    }

    .ftbar nav a:hover {
        background: rgba(255, 255, 255, .1);
        color: #fff
    }
}

@media(max-width:900px) {
    .ftt {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px
    }

    .ftb {
        grid-column: 1/-1
    }
}

@media(max-width:560px) {
    footer.ft {
        margin-top: 40px;
        border-radius: 26px 26px 0 0
    }

    .ftw {
        padding-top: 40px
    }


    .ftx {
        margin-top: 28px
    }

    /* menu first, copyright at the very bottom */
    .ftbar {
        flex-direction: column;
        text-align: center;
        gap: 12px
    }

    .ftbar nav {
        order: -1;
        justify-content: center
    }

    .ftcp {
        line-height: 1.7
    }
}


/* ==== v5: article headings get the same gradient marker ==== */
.prose h2 {
    display: flex;
    align-items: flex-start;
    gap: 14px
}

.prose h2::before {
    content: "";
    flex: none;
    width: 6px;
    height: .9em;
    margin-top: .17em;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffb300, #ff7a00 55%, #ff2d2d);
    box-shadow: 0 0 14px rgba(255, 122, 0, .55)
}

@media(max-width:560px) {
    .prose h2 {
        gap: 11px;
        font-size: 22px
    }

    .prose h2::before {
        width: 5px
    }
}

/* ==== v5: slim footer ==== */
footer.ft {
    margin-top: 48px;
    border-radius: 28px 28px 0 0
}

.ftw {
    position: relative;
    padding: 30px 22px 0
}

.ftt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    flex-wrap: wrap
}

.ftb p {
    max-width: none;
    margin: 6px 0 0;
    font-size: 14px
}

.fta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap
}

.fts a {
    width: 40px;
    height: 40px
}

.ftx {
    position: absolute;
    right: -1.5%;
    bottom: -.2em;
    z-index: -1;
    margin: 0;
    font-size: clamp(90px, 15vw, 190px);
    background: linear-gradient(180deg, rgba(255, 179, 0, .32), rgba(255, 90, 31, .14) 50%, rgba(255, 45, 45, 0) 90%);
    -webkit-background-clip: text;
    background-clip: text
}

.ftbar {
    margin-top: 24px;
    padding: 14px 0 16px
}

@media(max-width:760px) {
    .ftw {
        padding-top: 26px
    }

    .ftt {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px
    }

    .ftx {
        font-size: 30vw;
        right: -3%
    }
}

@media(max-width:560px) {
    footer.ft {
        margin-top: 36px;
        border-radius: 22px 22px 0 0
    }

    .ftbar {
        margin-top: 20px;
        gap: 6px;
        padding: 12px 0 14px
    }
}

/* ==== v5: toast on small screens ==== */
.toast span {
    flex: 1;
    min-width: 0;
    line-height: 1.35
}

.toast button {
    flex: none
}

@media(max-width:560px) {
    .toast {
        left: 12px;
        right: 64px;
        bottom: 16px;
        max-width: none;
        min-height: 44px;
        padding: 6px 6px 6px 14px;
        border-radius: 16px;
        font-size: 12px;
        transform: translateY(16px)
    }

    .toast.v {
        transform: none
    }

    .toast span {
        padding: 4px 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }
}

/* ==== v5: floating share button ==== */
.shr {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 41;
    transition: bottom .5s cubic-bezier(.16, 1, .3, 1)
}

#up.v~.shr {
    bottom: 66px
}

.shb {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--g);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(255, 122, 0, .4);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .3s
}

.shb::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255, 122, 0, .45);
    animation: shp 2.6s cubic-bezier(.16, 1, .3, 1) infinite;
    pointer-events: none
}

@keyframes shp {
    0% {
        opacity: .9;
        transform: scale(.85)
    }

    70%,
    100% {
        opacity: 0;
        transform: scale(1.35)
    }
}

.shr.o .shb::before {
    animation: none;
    opacity: 0
}

.shb svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .25s
}

.shb .x {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg)
}

.shr.o .shb .s {
    opacity: 0;
    transform: rotate(90deg)
}

.shr.o .shb .x {
    opacity: 1;
    transform: none
}

@media(hover:hover) {
    .shb:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 14px 30px rgba(255, 122, 0, .5)
    }
}

.shm {
    position: absolute;
    right: 0;
    bottom: 54px;
    width: 264px;
    padding: 12px;
    border-radius: 22px;
    border: 1px solid var(--gbd);
    background: var(--surf);
    box-shadow: 0 24px 60px rgba(13, 13, 31, .28), 0 0 0 1px var(--ol);
    transform-origin: 100% 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.92);
    transition: opacity .25s, transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s .45s
}

.shr.o .shm {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s
}

.shm p {
    margin: 2px 4px 10px;
    font: 700 11px "JetBrains Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mut)
}

.shg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px
}

.shg a,
.shg button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 2px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--ink);
    font: 600 11px "Space Grotesk", system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s
}

.shg i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--c, var(--g));
    color: #fff;
    font: 700 16px "Space Grotesk", system-ui, sans-serif;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1)
}

.shg svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.shl {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 5px 5px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--glass)
}

.shl span {
    flex: 1;
    min-width: 0;
    font: 600 12px "JetBrains Mono", monospace;
    color: var(--mut);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.shl button {
    flex: none;
    border: 0;
    border-radius: 9px;
    padding: 7px 12px;
    background: var(--g);
    color: #fff;
    font: 700 11px "JetBrains Mono", monospace;
    cursor: pointer
}

.shok {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    padding: 6px 12px;
    border-radius: 99px;
    background: var(--ink);
    color: var(--bg);
    font: 600 12px "JetBrains Mono", monospace;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity .25s, transform .35s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none
}

.shm.ok .shok {
    opacity: 1;
    transform: translate(-50%, 0)
}

@media(hover:hover) {

    .shg a:hover,
    .shg button:hover {
        background: var(--glass2)
    }

    .shg a:hover i,
    .shg button:hover i {
        transform: translateY(-2px) scale(1.06)
    }
}

@media(max-width:560px) {
    .shm {
        width: min(280px, calc(100vw - 32px))
    }
}

/* tighter footer on phones: email + icons on one row */
.ftx {
    opacity: .7
}

@media(max-width:560px) {
    .ftt {
        gap: 16px
    }

    .fta {
        flex-wrap: nowrap;
        gap: 8px
    }

    .fts {
        flex-wrap: nowrap;
        gap: 8px
    }

    .fts a {
        width: 38px;
        height: 38px
    }

    .ftm {
        padding-left: 12px;
        gap: 8px;
        font-size: 12px
    }

    .ftm svg {
        width: 28px;
        height: 28px
    }
}

.ftn {
    color: #fff;
    font: 700 20px/1.2 "Space Grotesk", system-ui, sans-serif;
    letter-spacing: -.02em;
    text-decoration: none;
    background: linear-gradient(90deg, #fff, #fff) left bottom/0 2px no-repeat;
    transition: background-size .5s cubic-bezier(.16, 1, .3, 1)
}

@media(hover:hover) {
    .ftn:hover {
        background-image: var(--g);
        background-size: 100% 2px
    }
}

/* extra share options shown by "More" when the device has no share sheet */
.shx {
    display: none;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--line)
}

.shm.mx .shx {
    display: grid;
    animation: fqIn .4s cubic-bezier(.16, 1, .3, 1)
}

.shn.on i {
    background: var(--ink);
    color: var(--bg)
}

@media(min-width:761px) {
    footer.ft {
        margin-top: 15px
    }
}

/* ==== age calculator ==== */
.ag {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 18px;
    align-items: stretch
}

.agf {
    display: flex;
    flex-direction: column
}

.lbl {
    display: flex;
    justify-content: space-between;
    margin: 6px 0 7px;
    font: 700 12px "JetBrains Mono", monospace;
    color: var(--ink)
}

.lbl span {
    font-weight: 600;
    color: var(--mut)
}

.fld.dt {
    height: 50px;
    margin-bottom: 10px
}

.fld.dt input {
    font-size: 15px;
    cursor: text
}

.fld.dt input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .6;
    padding: 6px;
    border-radius: 8px;
    transition: opacity .2s, background .2s
}

.fld.dt input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background: var(--glass2)
}

.fbtn {
    flex: none;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--g);
    color: #fff;
    font: 700 12px "JetBrains Mono", monospace;
    cursor: pointer;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s
}

@media(hover:hover) {
    .fbtn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(255, 122, 0, .3)
    }
}

.err {
    margin: 0 0 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 45, 45, .1);
    color: #e5242b;
    font-size: 14px;
    font-weight: 600
}

:root[data-theme=dark] .err {
    color: #ff7b7b
}

.agb {
    display: flex;
    gap: 8px;
    margin: 8px 0 12px
}

.agb .tbn {
    flex: 1
}

.agf .tg {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed var(--line)
}

.agh {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.agh::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 122, 0, .16), transparent 70%);
    pointer-events: none
}

.agh.hb {
    box-shadow: 0 0 0 2px #ff9b00, 0 20px 50px rgba(255, 122, 0, .25)
}

.agn {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.agn div {
    padding: 16px 16px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 179, 0, .16), rgba(255, 45, 45, .1));
    box-shadow: inset 0 0 0 1px rgba(255, 122, 0, .22)
}

.agn b {
    display: block;
    font: 700 clamp(40px, 5.4vw, 60px)/1 "JetBrains Mono", monospace;
    letter-spacing: -.06em;
    font-variant-numeric: tabular-nums;
    background: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.agn small {
    display: block;
    margin-top: 8px;
    font: 700 11px "JetBrains Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mut)
}

.agn.off b {
    background: none;
    color: var(--line);
    -webkit-text-fill-color: currentColor
}

.ags {
    margin: 14px 0 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--txt, var(--mut))
}

.nb {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px dashed var(--line)
}

.ring {
    position: relative;
    flex: none;
    width: 104px;
    height: 104px
}

.ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg)
}

.ring .rt {
    fill: none;
    stroke: var(--line);
    stroke-width: 9
}

.ring .rp {
    fill: none;
    stroke: url(#rg);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 327;
    stroke-dashoffset: 327;
    transition: stroke-dashoffset 1s cubic-bezier(.16, 1, .3, 1)
}

.ring>div {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center
}

.ring b {
    font: 700 26px/1 "JetBrains Mono", monospace;
    letter-spacing: -.04em
}

.ring small {
    font: 600 11px "JetBrains Mono", monospace;
    color: var(--mut)
}

.nbt h3 {
    margin: 0 0 4px;
    font: 700 12px "JetBrains Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mut)
}

.nbt p {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35
}

.nbt .nbs {
    margin-top: 4px;
    font: 600 13px "JetBrains Mono", monospace;
    color: #ff7a00
}

.agt {
    margin-top: 18px
}

.sg3 {
    grid-template-columns: repeat(6, minmax(0, 1fr))
}

#live {
    color: #16c784
}

.ag2 {
    grid-template-columns: minmax(0, 1fr) 380px
}

.ms {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px
}

.ms li:not(.empty) {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 10px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--glass)
}

.mi {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a00' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l2.5 2'/%3E%3C/svg%3E") center/18px no-repeat,
        rgba(255, 122, 0, .1)
}

.ms li.ok .mi {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat,
        var(--g)
}

.ml {
    font-weight: 700;
    font-size: 15px
}

.md {
    font: 600 12px "JetBrains Mono", monospace;
    color: var(--mut);
    text-align: right
}

.ms li.ok {
    opacity: .75
}

.ms li.nx {
    border-color: transparent;
    background: linear-gradient(var(--surf), var(--surf)) padding-box, var(--g) border-box;
    box-shadow: 0 10px 26px rgba(255, 122, 0, .14)
}

.ms li.nx .md {
    color: #ff7a00
}

.ff dd {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700
}

@media(max-width:980px) {
    .sg3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:900px) {

    .ag,
    .ag2 {
        grid-template-columns: 1fr
    }
}

@media(max-width:560px) {
    .agn {
        gap: 8px
    }

    .agn div {
        padding: 12px 12px 10px;
        border-radius: 14px
    }

    .agn b {
        font-size: 36px
    }

    .agn small {
        font-size: 10px
    }

    .sg3 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .ring {
        width: 88px;
        height: 88px
    }

    .ring b {
        font-size: 22px
    }

    .nbt p {
        font-size: 15px
    }

    .ms li:not(.empty) {
        grid-template-columns: 30px minmax(0, 1fr);
        row-gap: 2px;
        padding: 9px 12px 9px 9px
    }

    .mi {
        grid-row: span 2;
        width: 30px;
        height: 30px
    }

    .md {
        text-align: left
    }
}

.sg3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.sg3 .st b {
    font-size: clamp(18px, 2.3vw, 26px);
    text-overflow: clip
}

@media(max-width:560px) {
    .sg3 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sg3 .st {
        padding: 11px 12px
    }

    .sg3 .st b {
        font-size: 17px;
        letter-spacing: -.05em
    }

    .agb .tbn {
        width: auto;
        padding: 0 12px
    }

    .agb .tbn span {
        display: inline
    }
}

@media(max-width:560px) {
    .sg3 .st:nth-child(n+5) {
        grid-column: 1/-1
    }
}

@media(max-width:360px) {
    .sg3 .st b {
        font-size: 15px
    }
}

@media(max-width:360px) {
    .sg3 .st:nth-child(n+5) {
        grid-column: 1/-1
    }
}

/* ==== css minifier ==== */
.cm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px
}

.cm .ed {
    min-height: 520px
}

.edh {
    padding-left: 8px;
    font: 700 12px "JetBrains Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mut)
}

textarea.code {
    flex: 1;
    display: block;
    width: 100%;
    min-height: 380px;
    margin: 0;
    padding: 18px 20px;
    border: 0;
    outline: 0;
    resize: vertical;
    background: transparent;
    color: var(--ink);
    font: 500 13.5px/1.7 "JetBrains Mono", ui-monospace, monospace;
    tab-size: 2;
    caret-color: #ff7a00;
    white-space: pre;
    overflow: auto
}

textarea.code[wrap=soft] {
    white-space: pre-wrap;
    word-break: break-all
}

textarea.code::placeholder {
    color: var(--mut);
    opacity: .8
}

textarea.code::selection {
    background: rgba(255, 122, 0, .25)
}

.ed.out {
    background: linear-gradient(180deg, rgba(255, 179, 0, .06), rgba(255, 45, 45, .03)), var(--fg)
}

.ed.out:focus-within {
    background: linear-gradient(var(--surf), var(--surf)) padding-box, var(--g) border-box
}

.wn {
    color: #e5242b;
    font-weight: 700
}

:root[data-theme=dark] .wn {
    color: #ff7b7b
}

.cm2 {
    grid-template-columns: minmax(0, 1fr) 380px
}

.sg4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.sg4 .st b {
    font-size: clamp(18px, 2.2vw, 24px)
}

.sav {
    margin-top: 16px
}

.sav .pbar {
    height: 10px;
    margin-top: 0
}

.tg.dis {
    opacity: .45;
    pointer-events: none
}

@media(max-width:980px) {
    .cm2 {
        grid-template-columns: 1fr
    }
}

@media(max-width:860px) {
    .cm {
        grid-template-columns: 1fr
    }

    .cm .ed {
        min-height: 0
    }

    textarea.code {
        min-height: 280px
    }
}

@media(max-width:560px) {
    textarea.code {
        min-height: 240px;
        padding: 14px 16px;
        font-size: 13px
    }

    .sg4 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .cm .edt .seg button {
        padding: 6px 10px
    }
}

/* icon-only toolbar buttons */
.tbn.io {
    width: 36px;
    padding: 0
}

.tbn.io span {
    display: none
}

.prose code {
    padding: 2px 7px;
    border-radius: 7px;
    background: var(--glass2);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink);
    font: 600 .86em "JetBrains Mono", monospace;
    white-space: nowrap
}

#tx.code {
    padding: 18px 20px;
    font: 500 13.5px/1.7 "JetBrains Mono", ui-monospace, monospace
}

@media(max-width:560px) {
    #tx.code {
        padding: 14px 16px;
        font-size: 13px
    }
}

/* equal-height cards in the size savings / options row */
@media(min-width:981px) {
    .cm2 {
        align-items: stretch
    }

    .cm2>.card {
        display: flex;
        flex-direction: column
    }

    .cm2 .sav {
        margin-top: auto;
        padding-top: 16px
    }
}

@media(min-width:981px) {
    .cm2 .sg4 {
        flex: 1;
        align-content: stretch
    }

    .cm2 .sg4 .st {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 92px;
        padding: 14px 16px
    }

    .cm2 .sg4 .st b {
        font-size: clamp(22px, 2.6vw, 32px)
    }
}

@media(min-width:981px) {
    .cm2 .sg4 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .cm2 .sg4 .st {
        min-height: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }

    .cm2 .sg4 .st b {
        margin: 0
    }
}

/* ==== text reverser ==== */
#out:not(.code) {
    flex: 1;
    display: block;
    width: 100%;
    min-height: 320px;
    margin: 0;
    padding: 20px 22px;
    border: 0;
    outline: 0;
    resize: vertical;
    background: transparent;
    color: var(--ink);
    font: 400 17px/1.75 "Space Grotesk", system-ui, sans-serif
}

.tr2 .card:first-child {
    display: flex;
    flex-direction: column
}

.rms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px
}

.rm {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--glass);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: color .3s, border-color .3s, box-shadow .35s, transform .35s cubic-bezier(.16, 1, .3, 1)
}

.rm b {
    font: 700 14px "Space Grotesk", system-ui, sans-serif
}

.rm small {
    max-width: 100%;
    font: 600 12px "JetBrains Mono", monospace;
    color: var(--mut);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .3s
}

.rm::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--g);
    opacity: 0;
    transition: opacity .3s
}

.rm.on {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(255, 122, 0, .28)
}

.rm.on::before {
    opacity: 1
}

.rm.on small {
    color: rgba(255, 255, 255, .85)
}

.rm:active {
    transform: scale(.97)
}

@media(hover:hover) {
    .rm:not(.on):hover {
        border-color: rgba(255, 122, 0, .5);
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(255, 122, 0, .14)
    }
}

.pck {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px dashed var(--line);
    transition: background .3s, border-color .3s
}

.tr2 .card:last-child {
    display: flex;
    flex-direction: column
}

.tr2 .card:last-child .pck {
    margin-top: 14px
}

.pcki {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h15l-3.5-3.5M20 16H5l3.5 3.5'/%3E%3C/svg%3E") center/18px no-repeat, rgba(255, 122, 0, .1)
}

.pck b {
    display: block;
    font-size: 14px
}

.pck small {
    display: block;
    font-size: 13px;
    color: var(--mut);
    line-height: 1.4
}

.pck.yes {
    border-style: solid;
    border-color: rgba(22, 199, 132, .5);
    background: rgba(22, 199, 132, .08)
}

.pck.yes .pcki {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat, #16c784
}

.pal {
    color: #16c784;
    font-weight: 700
}

@media(max-width:560px) {
    #out:not(.code) {
        min-height: 200px;
        padding: 16px 18px;
        font-size: 16px
    }

    .rm {
        padding: 10px 12px
    }

    .rm b {
        font-size: 13px
    }
}

/* ==== html viewer ==== */
.hv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 18px
}

.hv .ed {
    min-height: 600px
}

.stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 460px;
    overflow: hidden;
    background:
        linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%) 0 0/16px 16px,
        linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%) 8px 8px/16px 16px
}

.frm {
    position: absolute;
    inset: 0;
    overflow: hidden
}

.frm iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    transform-origin: 0 0
}

.frm.dev {
    position: relative;
    inset: auto;
    margin: 12px auto;
    border-radius: 14px;
    box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(13, 13, 31, .18);
    transition: width .45s cubic-bezier(.16, 1, .3, 1)
}

.pe {
    margin: auto;
    padding: 24px;
    text-align: center;
    color: var(--mut);
    font-size: 15px
}

.pvw .edt .seg button {
    padding: 6px 11px
}

#pTitle {
    min-width: 0;
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink)
}

.pvw:fullscreen,
.pvw.fs {
    position: fixed;
    inset: 0;
    z-index: 90;
    border-radius: 0;
    min-height: 100vh;
    background: var(--surf)
}

.pvw:fullscreen .stage,
.pvw.fs .stage {
    min-height: 0
}

.hv2 .dl {
    margin-top: 14px
}

.dl dd.bad {
    color: #e5242b
}

:root[data-theme=dark] .dl dd.bad {
    color: #ff7b7b
}

#wn.warn {
    color: #e5242b
}

#wn.good {
    color: #16c784
}

@media(max-width:980px) {
    .hv {
        grid-template-columns: 1fr
    }

    .hv .ed {
        min-height: 0
    }

    .stage {
        min-height: 420px
    }
}

@media(max-width:560px) {
    .stage {
        min-height: 360px
    }

    .pvw .edt .seg button {
        padding: 6px 8px;
        font-size: 10.5px
    }
}

.vf {
    color: #16c784;
    font-weight: 700
}

@media(max-width:560px) {
    .pvw .edt {
        row-gap: 8px
    }

    .pvw .edt .seg {
        flex: 1 1 100%;
        justify-content: space-between
    }

    .pvw .edt .seg button {
        flex: 1
    }

    .pvw .edt .sp {
        display: none
    }
}

/* ==== support / buy me a coffee ==== */
.sp2 {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 18px;
    align-items: stretch
}

.cfp,
.pay {
    display: flex;
    flex-direction: column
}

.cups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px
}

.cup {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 8px 14px;
    border-radius: 18px;
    border: 1.5px solid var(--line);
    background: var(--glass);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .3s, box-shadow .35s, transform .35s cubic-bezier(.16, 1, .3, 1), color .3s
}

.cup::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--g);
    opacity: 0;
    transition: opacity .3s
}

.cic {
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -.12em;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1)
}

.cup b {
    font: 700 14px "Space Grotesk", system-ui, sans-serif
}

.cup small {
    font: 700 13px "JetBrains Mono", monospace;
    color: var(--mut);
    transition: color .3s
}

.cup.on {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 28px rgba(255, 122, 0, .32);
    transform: translateY(-2px)
}

.cup.on::before {
    opacity: 1
}

.cup.on small {
    color: rgba(255, 255, 255, .9)
}

.cup.on .cic {
    transform: scale(1.12) rotate(-6deg)
}

@media(hover:hover) {
    .cup:not(.on):hover {
        border-color: rgba(255, 122, 0, .55);
        transform: translateY(-2px)
    }
}

.fld.amt input {
    font-size: 17px
}

.cur2 {
    padding: 0 6px 0 0 !important;
    font: 700 17px "JetBrains Mono", monospace !important;
    color: var(--ink) !important
}

.cfp .fld {
    margin-bottom: 10px
}

.tot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 179, 0, .16), rgba(255, 45, 45, .1));
    box-shadow: inset 0 0 0 1px rgba(255, 122, 0, .22)
}

.tot span {
    font-size: 14px;
    font-weight: 600;
    color: var(--mut)
}

.tot b {
    font: 700 32px/1 "JetBrains Mono", monospace;
    letter-spacing: -.04em;
    background: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.pyt {
    display: flex;
    margin-bottom: 16px
}

.pyt button {
    flex: 1;
    padding: 9px 8px
}

.pm[hidden] {
    display: none
}

.upi {
    display: flex;
    align-items: center;
    gap: 20px
}

.qr {
    flex: none;
    width: 190px;
    aspect-ratio: 1;
    padding: 6px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--line), 0 12px 30px rgba(13, 13, 31, .12);
    display: grid;
    place-items: center
}

.qr svg {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px
}

.qre {
    margin: 0;
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: #666
}

.pmh {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700
}

.pms {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--mut)
}

.upt .btn {
    margin-top: 14px
}

.btn.dis {
    opacity: .45;
    pointer-events: none
}

.uid {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 8px 8px 8px 14px;
    border-radius: 14px;
    border: 1px dashed var(--line)
}

.uid span {
    flex: 1;
    min-width: 0;
    font: 700 14px "JetBrains Mono", monospace;
    overflow-wrap: anywhere
}

.pnote {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--mut)
}

.pmb {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px
}

.pmi {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #fff;
    background: #2b6cf6
}

.pmi.pp {
    background: #0b3a8c
}

.pmi svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.stp {
    margin: 0 0 18px;
    padding-left: 22px;
    font-size: 15px;
    color: var(--txt, var(--mut))
}

.stp li {
    margin-bottom: 6px
}

.stp li::marker {
    color: #ff7a00;
    font-weight: 700
}

.ppa {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px
}

.ppc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 6px;
    border-radius: 14px;
    border: 1.5px solid var(--line);
    background: var(--glass);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .3s, background .3s
}

.ppc b {
    font: 700 18px "JetBrains Mono", monospace
}

.ppc small {
    font-size: 12px;
    letter-spacing: -.1em
}

.ppc.on {
    border-color: #ff9b00;
    background: rgba(255, 122, 0, .1)
}

.pm .btn {
    align-self: flex-start;
    text-align: center
}

.sec2 {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
    font-size: 13px;
    color: var(--mut)
}

.pay .pm {
    margin-bottom: 16px
}

.sec2 svg {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #16c784;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.gv {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px
}

.gvn {
    font: 700 13px "JetBrains Mono", monospace;
    background: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.gvi h3 {
    margin: 6px 0 6px;
    font-size: 18px;
    letter-spacing: -.02em
}

.gvi p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mut)
}

/* footer coffee pill */
.ftc2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 99px;
    background: var(--g);
    color: #fff;
    font: 700 13px "JetBrains Mono", monospace;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(255, 122, 0, .3);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s
}

@media(hover:hover) {
    .ftc2:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(255, 122, 0, .45)
    }
}

/* share panel coffee row */
.shcf {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 179, 0, .16), rgba(255, 45, 45, .1));
    color: var(--ink);
    font: 600 13px "Space Grotesk", system-ui, sans-serif;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1)
}

.shcf b {
    margin-left: auto;
    font: 700 12px "JetBrains Mono", monospace;
    color: #ff6a10
}

@media(hover:hover) {
    .shcf:hover {
        transform: translateY(-1px)
    }
}

@media(max-width:900px) {
    .sp2 {
        grid-template-columns: 1fr
    }
}

@media(max-width:760px) {
    .gv {
        grid-template-columns: 1fr;
        gap: 12px
    }
}

@media(max-width:560px) {
    .cups {
        gap: 8px
    }

    .cup {
        padding: 12px 4px 10px
    }

    .cic {
        font-size: 18px
    }

    .cup b {
        font-size: 12.5px
    }

    .upi {
        flex-direction: column;
        align-items: stretch;
        text-align: left
    }

    .qr {
        width: min(220px, 70vw);
        margin: 0 auto
    }

    .pm .btn,
    .upt .btn {
        display: block;
        width: 100%
    }

    .pyt button {
        padding: 8px 4px;
        font-size: 10.5px
    }

    .tot b {
        font-size: 26px
    }
}

.btn[hidden] {
    display: none !important
}

.shcf b {
    white-space: nowrap
}

.upi.mob .qr {
    order: 2;
    width: min(180px, 55vw);
    margin-top: 6px
}

.upi.mob .upt .btn {
    margin-top: 12px
}

.shcf {
    white-space: nowrap
}

/* footer actions on phones: coffee + icons on one row, email below */
@media(max-width:560px) {
    .fta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        width: 100%
    }

    .ftc2 {
        grid-column: 1;
        justify-self: start;
        white-space: nowrap;
        gap: 6px;
        padding: 8px 14px;
        font-size: 12px;
        box-shadow: 0 6px 16px rgba(255, 122, 0, .28)
    }

    .fts {
        grid-column: 2;
        gap: 6px
    }

    .fts a {
        width: 34px;
        height: 34px
    }

    .fts svg {
        width: 16px;
        height: 16px
    }

    .ftm {
        grid-column: 1/-1;
        justify-self: start
    }
}

@media(max-width:560px) {
    .ftc2 {
        grid-row: 1
    }

    .fts {
        grid-row: 1
    }

    .ftm {
        grid-row: 2
    }
}

/* ==== json formatter ==== */
.tree {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 380px;
    overflow: hidden
}

.tree[hidden],
.out textarea[hidden] {
    display: none
}

.trb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px dashed var(--line)
}

.tpath {
    flex: 1;
    min-width: 0;
    margin-left: 6px;
    font: 600 12px "JetBrains Mono", monospace;
    color: var(--mut);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right
}

.trv {
    flex: 1;
    overflow: auto;
    max-height: 520px;
    padding: 12px 16px 16px;
    font: 500 13.5px/1.75 "JetBrains Mono", ui-monospace, monospace
}

.trv details>summary {
    list-style: none;
    cursor: pointer;
    border-radius: 6px;
    white-space: nowrap
}

.trv details>summary::-webkit-details-marker {
    display: none
}

.trv details>summary::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0 8px 1px 2px;
    border-left: 5px solid var(--mut);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .2s
}

.trv details[open]>summary::before {
    transform: rotate(90deg)
}

.trv details[open]>summary .jcnt,
.trv details[open]>summary .jcl {
    display: none
}

.trv summary:hover {
    background: var(--glass2)
}

.tch {
    margin-left: 7px;
    padding-left: 14px;
    border-left: 1px dashed var(--line)
}

.tl0 {
    padding-left: 15px;
    white-space: nowrap
}

.jk {
    color: #c2410c;
    cursor: copy;
    border-radius: 4px
}

.jk:hover {
    background: rgba(255, 122, 0, .14)
}

:root[data-theme=dark] .jk {
    color: #ffa45c
}

.js {
    color: #0f8a5f
}

:root[data-theme=dark] .js {
    color: #5ee0a8
}

.jn {
    color: #2563eb
}

:root[data-theme=dark] .jn {
    color: #7fb0ff
}

.jb {
    color: #9333ea
}

:root[data-theme=dark] .jb {
    color: #c99bff
}

.jz {
    color: var(--mut);
    font-style: italic
}

.jc,
.jbr {
    color: var(--mut)
}

.jcnt {
    margin: 0 6px;
    padding: 1px 8px;
    border-radius: 99px;
    background: var(--glass2);
    font-size: 11px;
    color: var(--mut)
}

.tmore {
    color: var(--mut);
    font-style: italic
}

.jerr {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1.5px solid rgba(255, 45, 45, .45);
    background: rgba(255, 45, 45, .06)
}

.jerr[hidden] {
    display: none
}

.jei {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ff2d2d;
    color: #fff;
    font: 700 18px "JetBrains Mono", monospace
}

.jet {
    flex: 1;
    min-width: 200px
}

.jet b {
    display: block;
    font-size: 16px
}

.jet small {
    display: block;
    font: 600 12px "JetBrains Mono", monospace;
    color: #e5242b;
    margin-top: 2px
}

:root[data-theme=dark] .jet small {
    color: #ff7b7b
}

.jet code {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--glass2);
    font: 500 12.5px/1.5 "JetBrains Mono", monospace;
    white-space: pre;
    overflow-x: auto
}

.jea {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.jea .btn {
    padding: 10px 18px;
    font-size: 12px
}

.jea .btn[hidden] {
    display: none
}

@media(max-width:560px) {
    .trv {
        font-size: 12.5px;
        padding: 10px 12px
    }

    .tpath {
        flex-basis: 100%;
        margin: 4px 0 0;
        text-align: left
    }

    .jea {
        width: 100%
    }

    .jea>* {
        flex: 1
    }
}

/* ==== bmi calculator ==== */
.bm {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr)
}

.unit,
.scl {
    display: flex;
    margin-bottom: 12px
}

.unit button,
.scl button {
    flex: 1
}

.fl2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.bm .fld {
    margin-bottom: 10px
}

.ui[hidden],
.um[hidden] {
    display: none
}

.bmv {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 6px 0 22px
}

.bmv>b {
    font: 700 clamp(56px, 7vw, 80px)/1 "JetBrains Mono", monospace;
    letter-spacing: -.06em;
    color: var(--line);
    transition: color .4s
}

.bmc {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 99px;
    background: var(--glass2);
    font-weight: 700;
    font-size: 15px;
    color: var(--mut);
    transition: background .4s, color .4s
}

.bmc.on {
    color: #fff
}

.bmv small {
    display: block;
    margin: 6px 0 0 4px;
    font: 600 12px "JetBrains Mono", monospace;
    color: var(--mut)
}

.gau {
    position: relative;
    margin: 4px 0 30px
}

.gbar {
    height: 14px;
    border-radius: 99px
}

.gpin {
    position: absolute;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    top: 7px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid #16c784;
    box-shadow: 0 4px 12px rgba(13, 13, 31, .3);
    transition: left .6s cubic-bezier(.16, 1, .3, 1), border-color .4s
}

.gtk span {
    position: absolute;
    top: 20px;
    transform: translateX(-50%);
    font: 600 11px "JetBrains Mono", monospace;
    color: var(--mut)
}

.bmd {
    margin-top: 0
}

.kid {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(59, 130, 246, .1);
    color: var(--txt, var(--ink));
    font-size: 14px;
    line-height: 1.5
}

.bmt {
    margin-top: 18px
}

.ctb {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 12px
}

.ctr {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px 12px 34px;
    position: relative;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--glass);
    font-size: 14px;
    font-weight: 700;
    transition: border-color .3s, box-shadow .3s, transform .3s
}

.ctd {
    position: absolute;
    left: 14px;
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%
}

.ctv {
    font: 600 12px "JetBrains Mono", monospace;
    color: var(--mut)
}

.ctr.on {
    border-color: #ff9b00;
    box-shadow: 0 8px 20px rgba(255, 122, 0, .18);
    transform: translateY(-2px)
}

@media(max-width:560px) {
    .bmv {
        gap: 14px
    }

    .bmv>b {
        font-size: 54px
    }

    .unit button,
    .scl button {
        padding: 7px 6px;
        font-size: 10.5px
    }

    .ctb {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:900px) {
    .ag.bm {
        grid-template-columns: 1fr
    }
}

/* footer: coffee button and email button share one height */
.ftc2,
.ftm {
    box-sizing: border-box;
    height: 44px
}

.ftc2 {
    padding: 0 18px
}

.ftm {
    padding: 0 6px 0 16px
}

@media(max-width:560px) {

    .ftc2,
    .ftm {
        height: 40px
    }

    .ftc2 {
        padding: 0 14px
    }

    .ftm {
        padding: 0 5px 0 12px
    }

    .ftm svg {
        width: 28px;
        height: 28px
    }
}

/* ==== gradient generator ==== */
.gg {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 18px;
    align-items: stretch
}

.ggp {
    display: flex;
    flex-direction: column;
    padding: 14px
}

.gpv {
    position: relative;
    flex: 1;
    min-height: 380px;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
    background-color: #fff
}

.gpv:fullscreen {
    border-radius: 0
}

.gpv:fullscreen .gsb {
    display: none
}

.gsb {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    height: 26px;
    border-radius: 10px;
    border: 3px solid #fff;
    box-shadow: 0 6px 20px rgba(13, 13, 31, .25);
    cursor: copy;
    touch-action: none
}

.gsh {
    position: absolute;
    top: 50%;
    width: 22px;
    height: 34px;
    margin: -17px 0 0 -11px;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 8px;
    background: var(--c);
    box-shadow: 0 3px 10px rgba(13, 13, 31, .35);
    cursor: grab;
    touch-action: none;
    transition: transform .2s
}

.gsh.on {
    transform: scale(1.18);
    border-color: #0d0d1f;
    box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(13, 13, 31, .4)
}

.gpa {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px
}

.gpa .sp {
    flex: 1
}

.ggc {
    display: flex;
    flex-direction: column
}

.gty {
    display: flex;
    margin-bottom: 14px
}

.gty button {
    flex: 1
}

.gro {
    margin-bottom: 12px
}

.gro[hidden] {
    display: none
}

.angw {
    display: flex;
    align-items: center;
    gap: 14px
}

.dial {
    position: relative;
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--glass);
    cursor: grab;
    touch-action: none
}

.dial:focus-visible {
    outline: 3px solid #ff7a00;
    outline-offset: 2px
}

.dial i {
    position: absolute;
    left: 50%;
    top: 6px;
    bottom: 50%;
    width: 4px;
    margin-left: -2px;
    border-radius: 4px;
    background: var(--g);
    transform-origin: 50% 100%
}

.dial::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--ink)
}

.angw input[type=range],
.spd input[type=range] {
    flex: 1;
    accent-color: #ff7a00
}

.pos {
    display: grid;
    grid-template-columns: repeat(3, 30px);
    gap: 6px
}

.pos button {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--glass);
    cursor: pointer;
    transition: background .2s
}

.pos button.on {
    background: var(--g);
    border-color: transparent
}

.stp2 {
    margin-top: 6px
}

.gsl {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    max-height: 290px;
    overflow: auto
}

.gsi {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 70px 64px 30px;
    gap: 6px;
    align-items: center;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--glass);
    transition: border-color .2s
}

.gsi.on {
    border-color: #ff9b00
}

.sw {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
    cursor: pointer;
    overflow: hidden
}

.sw input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
}

.hx,
.nf2 input {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surf);
    color: var(--ink);
    font: 600 13px "JetBrains Mono", monospace;
    outline: 0
}

.hx:focus,
.nf2 input:focus {
    border-color: #ff7a00
}

.nf2 {
    position: relative
}

.nf2 input {
    padding-right: 22px;
    -moz-appearance: textfield
}

.nf2 input::-webkit-inner-spin-button {
    -webkit-appearance: none
}

.nf2 span {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font: 600 11px "JetBrains Mono", monospace;
    color: var(--mut);
    pointer-events: none
}

.rmv {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--mut);
    cursor: pointer
}

.rmv svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round
}

.rmv:hover:not(:disabled) {
    background: rgba(255, 45, 45, .12);
    color: #ff2d2d
}

.rmv:disabled {
    opacity: .3;
    cursor: default
}

.ggx,
.ggr {
    margin-top: 18px
}

.gcode {
    position: relative
}

.gcode pre {
    margin: 0;
    padding: 18px 20px;
    border-radius: 16px;
    background: #0d0d1f;
    color: #e6e6f2;
    font: 500 13.5px/1.75 "JetBrains Mono", monospace;
    overflow-x: auto;
    white-space: pre
}

.gcode .btn {
    position: absolute;
    right: 12px;
    top: 12px;
    padding: 10px 18px;
    font-size: 12px
}

.ck {
    color: #7fb0ff
}

.cs {
    color: #ffa45c
}

.cc2 {
    color: #5ee0a8
}

.cc2::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 3px;
    background: var(--c);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
    vertical-align: -1px
}

.prs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px
}

.pr {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
    text-align: left
}

.pr span {
    display: block;
    height: 64px;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s
}

.pr b {
    font-size: 13px
}

@media(hover:hover) {
    .pr:hover span {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(13, 13, 31, .18)
    }
}

@media(max-width:980px) {
    .gg {
        grid-template-columns: 1fr
    }

    .prs {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media(max-width:560px) {
    .gpv {
        min-height: 260px
    }

    .gsi {
        grid-template-columns: 36px minmax(0, 1fr) 62px 56px 28px;
        gap: 4px
    }

    .hx,
    .nf2 input {
        padding: 0 7px;
        font-size: 12px
    }

    .nf2 input {
        padding-right: 18px
    }

    .prs {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .gcode pre {
        padding-top: 60px;
        font-size: 12.5px
    }

    .gpa .tbn span {
        display: none
    }

    .gpa .tbn {
        width: 38px;
        padding: 0
    }
}

/* ==== fancy font generator ==== */
.ffi {
    position: sticky;
    top: 62px;
    z-index: 5
}

.ffw {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 18px;
    border-radius: 18px;
    border: 1.5px solid var(--line);
    background: var(--surf);
    transition: border-color .3s, box-shadow .3s
}

.ffw:focus-within {
    border-color: #ff7a00;
    box-shadow: 0 0 0 4px rgba(255, 122, 0, .14)
}

.ffw textarea {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 9px 0;
    border: 0;
    outline: 0;
    resize: none;
    background: none;
    color: var(--ink);
    font: 500 18px/1.4 "Space Grotesk", system-ui, sans-serif
}

.ffb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px
}

.ffb .cats {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 2px 2px 4px
}

.ffb .cnt {
    flex: none
}

.ffl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px
}

.ffc {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid var(--gbd);
    background: var(--fg);
    box-shadow: inset 0 1px 0 var(--hl), 0 0 0 1px var(--ol), 0 4px 12px rgba(13, 13, 31, .05);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, border-color .3s
}

.ffc.fv {
    border-color: rgba(255, 155, 0, .6)
}

.ffc.ok {
    border-color: #16c784;
    box-shadow: 0 0 0 3px rgba(22, 199, 132, .2)
}

.ffh {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.ffn {
    font: 700 11px "JetBrains Mono", monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mut)
}

.ffs {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #ff9b00;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: transform .3s, background .2s
}

.ffs:hover {
    background: rgba(255, 155, 0, .12);
    transform: scale(1.12)
}

.fft {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: 400 21px/1.45 "Space Grotesk", system-ui, sans-serif;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: copy
}

.ffc.ph2 .fft {
    opacity: .55
}

.ffcp {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 99px;
    background: var(--g);
    color: #fff;
    font: 700 11px "JetBrains Mono", monospace;
    cursor: pointer;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s, transform .3s
}

.ffcp svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ffc:hover .ffcp,
.ffc:focus-within .ffcp {
    opacity: 1;
    transform: none
}

@media(hover:hover) {
    .ffc:hover {
        transform: translateY(-2px);
        box-shadow: inset 0 1px 0 var(--hl), 0 0 0 1px var(--ol), 0 14px 30px rgba(255, 122, 0, .12)
    }
}

@media(hover:none) {
    .ffcp {
        position: static;
        align-self: flex-start;
        opacity: 1;
        transform: none
    }
}

@media(max-width:760px) {
    .ffl {
        grid-template-columns: 1fr
    }

    .ffi {
        top: 56px
    }
}

@media(max-width:560px) {
    .ffw textarea {
        font-size: 16px
    }

    .fft {
        font-size: 19px
    }

    .ffb .cnt {
        display: none
    }
}

.ffw #tx {
    flex: 1;
    min-height: 44px;
    height: 44px;
    padding: 9px 0;
    resize: none;
    font: 500 18px/1.4 "Space Grotesk", system-ui, sans-serif
}

@media(max-width:560px) {
    .ffw #tx {
        font-size: 16px
    }
}

/* ==== speedometer ==== */
.sm {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 18px;
    align-items: stretch
}

.smg {
    display: flex;
    flex-direction: column;
    transition: box-shadow .3s
}

.smg.over {
    box-shadow: 0 0 0 3px #ff2d2d, 0 20px 50px rgba(255, 45, 45, .3)
}

.smr {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.gps {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 700 12px "JetBrains Mono", monospace;
    color: var(--mut)
}

.gps i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line)
}

.gps.good i {
    background: #16c784;
    box-shadow: 0 0 0 4px rgba(22, 199, 132, .2)
}

.gps.ok i {
    background: #ffb300
}

.gps.bad i {
    background: #ff2d2d;
    animation: pu 1.6s infinite
}

.dialw {
    position: relative;
    width: min(100%, 380px);
    margin: 0 auto
}

.sdial {
    display: block;
    width: 100%;
    height: auto
}

.strk,
.sfill {
    fill: none;
    stroke-width: 16;
    stroke-linecap: round
}

.strk {
    stroke: var(--line)
}

.sfill {
    stroke: url(#sg);
    stroke-dasharray: 502.65;
    stroke-dashoffset: 502.65
}

.tb2,
.ts {
    stroke: var(--mut);
    stroke-linecap: round
}

.tb2 {
    stroke-width: 2.5
}

.ts {
    stroke-width: 1.4;
    opacity: .5
}

#sticks text {
    fill: var(--mut);
    font: 700 12px "JetBrains Mono", monospace;
    text-anchor: middle
}

.sndl {
    transform-origin: 150px 150px;
    transform: rotate(-120deg);
    fill: var(--ink)
}

.sndl circle {
    fill: var(--ink);
    stroke: #ff7a00;
    stroke-width: 4
}

.sread {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6%;
    text-align: center
}

.sread b {
    display: block;
    font: 700 clamp(48px, 8vw, 72px)/1 "JetBrains Mono", monospace;
    letter-spacing: -.06em;
    font-variant-numeric: tabular-nums
}

.sread span {
    font: 700 13px "JetBrains Mono", monospace;
    color: var(--mut);
    text-transform: uppercase;
    letter-spacing: .08em
}

.slim {
    position: absolute;
    left: 50%;
    top: 34%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 99px;
    background: #ff2d2d;
    color: #fff;
    font: 700 12px "JetBrains Mono", monospace;
    white-space: nowrap;
    animation: pu 1.2s infinite
}

.slim[hidden] {
    display: none
}

.smb {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px
}

#bStart {
    min-width: 180px;
    text-align: center;
    border: 0;
    cursor: pointer
}

#bStart.on {
    background: #0d0d1f;
    box-shadow: inset 0 0 0 1.5px var(--line)
}

:root[data-theme=dark] #bStart.on {
    background: #2a2a44
}

.smn {
    margin: 14px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--mut)
}

.sl.live {
    color: #16c784
}

.sun {
    display: flex;
    margin-bottom: 12px
}

.sun button {
    flex: 1
}

.smr .fld {
    margin-bottom: 10px
}

.safe {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 18px 0 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 179, 0, .1);
    font-size: 14px;
    color: var(--txt, var(--ink))
}

.safe svg {
    flex: none;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #ff7a00;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.hud {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    background: #000;
    color: #fff
}

.hud[hidden] {
    display: none
}

.hudi {
    text-align: center;
    transition: transform .3s
}

.hudi.mir {
    transform: scaleX(-1)
}

.hudi b {
    display: block;
    font: 700 min(42vw, 60vh)/1 "JetBrains Mono", monospace;
    letter-spacing: -.06em;
    color: #39ff88;
    font-variant-numeric: tabular-nums
}

.hud.over .hudi b {
    color: #ff3b3b
}

.hudi span {
    font: 700 min(7vw, 9vh) "JetBrains Mono", monospace;
    color: #9effc3
}

.hudb {
    position: absolute;
    left: 50%;
    bottom: 20px;
    display: flex;
    gap: 10px;
    transform: translateX(-50%)
}

.hudb button {
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 99px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font: 700 13px "JetBrains Mono", monospace;
    cursor: pointer
}

@media(max-width:900px) {
    .sm {
        grid-template-columns: 1fr
    }
}

@media(max-width:560px) {
    .sun button {
        padding: 6px 6px;
        font-size: 11px
    }

    #bStart {
        flex: 1 1 100%
    }
}

.smg .dialw {
    margin-top: auto
}

.smg .smn {
    margin-bottom: auto
}

/* ==== about ==== */
.abt {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 44px;
    align-items: center
}

.abp {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px
}

.abf {
    position: relative;
    width: min(100%, 400px);
    aspect-ratio: 1;
    border-radius: 44px;
    padding: 8px;
    background: var(--g);
    transform: rotate(-2deg);
    box-shadow: 0 30px 60px rgba(255, 122, 0, .22);
    transition: transform .6s cubic-bezier(.16, 1, .3, 1)
}

.abf:hover {
    transform: rotate(0) scale(1.01)
}

.abf>span {
    position: absolute;
    inset: 8px;
    display: grid;
    place-items: center;
    border-radius: 36px;
    background: var(--surf);
    font: 700 clamp(64px, 9vw, 110px) "JetBrains Mono", monospace;
    letter-spacing: -.06em
}

.abf img {
    position: absolute;
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border-radius: 36px;
    object-fit: cover
}

.abh {
    margin: 0 0 6px;
    font: 700 clamp(28px, 3.6vw, 44px)/1.12 "Space Grotesk", system-ui, sans-serif;
    letter-spacing: -.04em
}

.abi .t {
    margin-top: 14px;
    max-width: 60ch;
    color: var(--txt, var(--mut))
}

.abq {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 40px
}

.abq .card {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.abq small {
    font: 700 11px "JetBrains Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mut)
}

.abq b {
    font-size: 20px;
    letter-spacing: -.02em;
    margin-top: 4px
}

.abq span {
    font-size: 14px;
    color: var(--mut)
}

.abw {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px
}

.abw h3 {
    margin: 6px 0 8px;
    font-size: 20px;
    letter-spacing: -.02em
}

.abw p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--txt, var(--mut))
}

.abn {
    font: 700 13px "JetBrains Mono", monospace;
    background: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.abv .card {
    border-top: 3px solid transparent;
    background: linear-gradient(var(--fg), var(--fg)) padding-box, var(--g) border-box
}

.abv .card h3 {
    margin-top: 0
}

.nsl {
    margin: 0;
    padding-left: 20px;
    line-height: 1.9
}

@media(max-width:900px) {
    .abt {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .abf {
        width: min(100%, 300px)
    }

    .abq {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .abw {
        grid-template-columns: 1fr
    }
}

@media(max-width:560px) {
    .abq {
        gap: 10px;
        margin-top: 28px
    }

    .abq b {
        font-size: 17px
    }

    .abf {
        width: min(100%, 240px);
        border-radius: 34px
    }

    .abf>span,
    .abf img {
        border-radius: 28px
    }
}

/* ==== contact ==== */
.ct2 {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 18px;
    align-items: start
}

.ctf,
.cfd {
    grid-column: 1;
    grid-row: 1
}

.ctf[hidden],
.cfd[hidden] {
    display: none
}

.ctx {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 18px
}

.cfg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px
}

.cfi {
    min-width: 0
}

.ctf .fld {
    height: 50px;
    margin-bottom: 12px
}

.ctf .fld input {
    font: 500 15px "Space Grotesk", system-ui, sans-serif
}

.ctf .fld.cfm {
    height: auto;
    padding: 0
}

.cfm textarea {
    flex: 1;
    width: 100%;
    min-height: 150px;
    padding: 14px 16px;
    border: 0;
    outline: 0;
    resize: vertical;
    background: none;
    color: var(--ink);
    font: 400 16px/1.6 "Space Grotesk", system-ui, sans-serif
}

.cfm textarea::placeholder,
.ctf .fld input::placeholder {
    color: var(--mut);
    opacity: .8;
    font-weight: 400
}

.fld.bad {
    border-color: #ff2d2d;
    box-shadow: 0 0 0 4px rgba(255, 45, 45, .12)
}

.cfe {
    margin: -6px 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #e5242b
}

:root[data-theme=dark] .cfe,
:root[data-theme=dark] .cfx {
    color: #ff7b7b
}

#cCount {
    font-weight: 600;
    color: var(--mut)
}

.cft {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px
}

.cft label {
    position: relative;
    cursor: pointer
}

.cft input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.cft span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1.5px solid var(--line);
    background: var(--glass);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    transition: border-color .25s, background .25s, color .25s, box-shadow .3s
}

.cft input:checked+span {
    border-color: transparent;
    background: var(--g);
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 122, 0, .28)
}

.cft input:focus-visible+span {
    outline: 3px solid #ff7a00;
    outline-offset: 2px
}

@media(hover:hover) {
    .cft label:hover input:not(:checked)+span {
        border-color: rgba(255, 122, 0, .5)
    }
}

.hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0
}

.cfs {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px
}

#cSend {
    position: relative;
    min-width: 190px;
    border: 0;
    cursor: pointer;
    text-align: center
}

#cSend:disabled {
    opacity: .7;
    cursor: progress
}

.csp {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2.5px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite
}

#cSend.ing .cst {
    visibility: hidden
}

#cSend.ing .csp {
    display: block
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.cfn {
    margin: 0;
    font-size: 13px;
    color: var(--mut)
}

.cfx {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 45, 45, .1);
    color: #e5242b;
    font-size: 14px;
    font-weight: 600
}

.cfx a {
    color: inherit
}

.cfd {
    padding: 48px 28px;
    text-align: center;
    outline: 0
}

.cdi {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--g);
    box-shadow: 0 14px 34px rgba(255, 122, 0, .35);
    animation: rise .7s cubic-bezier(.16, 1, .3, 1)
}

.cdi svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round
}

.cfd h2 {
    margin: 18px 0 8px;
    font-size: 28px;
    letter-spacing: -.03em
}

.cfd p {
    max-width: 44ch;
    margin: 0 auto 22px;
    color: var(--txt, var(--mut))
}

.cxt {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--mut)
}

.ftm.cxm {
    height: 44px;
    padding: 0 6px 0 16px;
    border-color: var(--line);
    background: var(--glass);
    color: var(--ink)
}

.ftm.cxm:hover {
    color: #fff
}

.cxs {
    display: grid;
    gap: 8px
}

.cxs a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--glass);
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: border-color .25s, transform .3s cubic-bezier(.16, 1, .3, 1)
}

.cxs svg {
    flex: none;
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 11px;
    background: var(--g);
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.cxs small {
    display: block;
    font: 600 12px "JetBrains Mono", monospace;
    color: var(--mut)
}

@media(hover:hover) {
    .cxs a:hover {
        border-color: rgba(255, 122, 0, .5);
        transform: translateX(3px)
    }
}

.cxc {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--ink);
    background: linear-gradient(135deg, rgba(255, 179, 0, .16), rgba(255, 45, 45, .1)), var(--fg)
}

.cxc>span:first-child {
    font-size: 30px
}

.cxc b {
    display: block;
    font-size: 16px
}

.cxc small {
    font: 700 13px "JetBrains Mono", monospace;
    color: #ff6a10
}

@media(max-width:900px) {
    .ct2 {
        grid-template-columns: 1fr
    }

    .ctx {
        grid-column: 1;
        grid-row: 2
    }
}

@media(max-width:560px) {
    .cfg {
        grid-template-columns: 1fr
    }

    .cft {
        grid-template-columns: 1fr 1fr
    }

    .cft span {
        font-size: 13px
    }

    #cSend {
        width: 100%
    }

    .cfn {
        width: 100%;
        text-align: center
    }
}