@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --bg:#050505;
    --surface:#111111;
    --border:#222222;
    --border-hover:#3a3a3a;
    --text:#ffffff;
    --muted:#8b8b8b;
}

body{
    font-family:Inter,sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    position:relative;
}

/* background grid */

body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(circle,#000 30%,transparent 90%);
    pointer-events:none;
}

.container{
    width:min(680px,92%);
    position:relative;
    z-index:1;
}

.logo{
    font-size:58px;
    font-weight:800;
    text-align:center;
    margin-bottom:48px;
    letter-spacing:-2px;
}

.shortener{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.row{
    display:flex;
    gap:12px;
}

.field{
    width:100%;
    height:58px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    padding:0 18px;
    font-size:16px;
    transition:.2s;
}

.field::placeholder{
    color:var(--muted);
}

.field:focus{
    outline:none;
    border-color:var(--border-hover);
}

.button{
    height:58px;
    padding:0 28px;
    border:none;
    border-radius:14px;
    background:#ffffff;
    color:#000000;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:nowrap;
}

.button:hover{
    opacity:.88;
}

.button:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.secondary{
    background:#181818;
    color:#ffffff;
    border:1px solid var(--border);
}

.secondary:hover{
    background:#202020;
}

.spinner{
    animation:spin .8s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

.error{
    color:#ff7b7b;
    font-size:14px;
}

.hidden{
    display:none;
}

@media (max-width:640px){

    .logo{
        font-size:42px;
        margin-bottom:36px;
    }

    .row{
        flex-direction:column;
    }

    .button{
        width:100%;
    }

}