@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-normal-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-italic-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/hanken-normal-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/hanken-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spacemono-400-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spacemono-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

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

:root{
    --bg:#F7F5F0;
    --paper:#FFFFFF;
    --ink:#1A1814;
    --ink-2:#4A4640;
    --ink-3:#918B80;
    --line:#E4DFD4;
    --accent:#D9501C;
    --accent-tint:#FBE9E2;
    --font-display:'Fraunces',Georgia,'Times New Roman',serif;
    --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
    --font-mono:'Space Mono',Consolas,monospace;
    --ease:cubic-bezier(.22,.61,.36,1);
}

html{font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

body{
    font-family:var(--font-body);
    background:var(--bg);
    color:var(--ink);
    line-height:1.55;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.grain{
    position:fixed;inset:0;z-index:9999;pointer-events:none;
    opacity:.03;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a{color:inherit;text-decoration:none}
button{font-family:inherit}
input{font-family:inherit}

.page{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px 24px;
}

.logo{
    font-family:var(--font-display);
    font-size:1.375rem;font-weight:600;
    letter-spacing:-.02em;margin-bottom:44px;
    font-variation-settings:'opsz' 24,'SOFT' 0;
}
.logo-dot{color:var(--accent)}

.intro{margin-bottom:36px;animation:fadeUp .7s var(--ease) both}
.intro h1{
    font-family:var(--font-display);
    font-size:clamp(1.75rem,4vw,2.5rem);
    font-weight:500;line-height:1.1;
    letter-spacing:-.03em;margin-bottom:10px;
    font-variation-settings:'opsz' 96,'SOFT' 30;
}
.intro p{
    font-size:1.0625rem;color:var(--ink-2);
}

@keyframes fadeUp{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:translateY(0)}
}

.shortener{width:100%;max-width:520px;animation:fadeUp .7s var(--ease) .1s both}

.step{display:none}
.step.is-active{display:block;animation:stepIn .4s var(--ease) both}
@keyframes stepIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}

.field{
    display:flex;align-items:center;
    background:var(--paper);
    border:1.5px solid var(--line);
    border-radius:10px;
    padding:5px 5px 5px 4px;
    transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field:focus-within{
    border-color:var(--ink);
    box-shadow:0 0 0 4px rgba(217,80,28,.06);
}

.field input{
    flex:1;min-width:0;
    border:none;background:transparent;outline:none;
    font-size:1rem;color:var(--ink);
    padding:14px 16px;font-weight:400;
}
.field input::placeholder{color:var(--ink-3)}

.btn-primary{
    background:var(--ink);color:var(--paper);
    border:none;border-radius:7px;
    padding:14px 26px;
    font-size:.9375rem;font-weight:600;
    cursor:pointer;white-space:nowrap;flex-shrink:0;
    transition:background .2s var(--ease),transform .15s var(--ease);
}
.btn-primary:hover{background:var(--accent);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}

.field-error{
    font-size:.8125rem;color:var(--accent);
    margin-top:10px;text-align:left;padding-left:4px;
    min-height:1.2em;
    animation:shake .35s var(--ease);
}
@keyframes shake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-3px)}
    75%{transform:translateX(3px)}
}

.step-hint{
    font-family:var(--font-display);
    font-size:1.1875rem;font-weight:400;
    color:var(--ink);margin-bottom:14px;
    font-variation-settings:'opsz' 24,'SOFT' 20;
    letter-spacing:-.01em;
}

.url-chip{
    display:inline-block;max-width:100%;
    font-family:var(--font-mono);font-size:.8125rem;
    color:var(--ink-2);background:var(--bg);
    border:1px solid var(--line);border-radius:5px;
    padding:6px 12px;margin-bottom:20px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.btn-text{
    background:none;border:none;cursor:pointer;
    font-size:.8125rem;color:var(--ink-3);
    margin-top:18px;padding:4px;
    transition:color .2s var(--ease);
}
.btn-text:hover{color:var(--accent)}

.loader-block{
    display:flex;flex-direction:column;align-items:center;
    gap:20px;padding:20px 0;
}
.loader{display:flex;gap:9px}
.loader span{
    width:9px;height:9px;border-radius:50%;
    background:var(--accent);
    animation:dotBounce 1.3s var(--ease) infinite;
}
.loader span:nth-child(2){animation-delay:.15s}
.loader span:nth-child(3){animation-delay:.3s}
@keyframes dotBounce{
    0%,70%,100%{transform:translateY(0);opacity:.3}
    35%{transform:translateY(-11px);opacity:1}
}
.loader-text{
    font-family:var(--font-display);
    font-size:1.1875rem;font-weight:400;
    color:var(--ink-2);
    font-variation-settings:'opsz' 24,'SOFT' 20;
}
.loader-text::after{content:'…';animation:dots 1.5s steps(4) infinite}
@keyframes dots{
    0%{content:''}
    25%{content:'.'}
    50%{content:'..'}
    75%{content:'…'}
}

.success-wrap{
    background:var(--paper);
    border:1.5px solid var(--line);
    border-radius:10px;
    padding:40px 36px;
    position:relative;overflow:hidden;
    animation:stepIn .4s var(--ease) both;
}
.success-wrap::before{
    content:'';position:absolute;top:0;left:0;right:0;
    height:3px;background:var(--accent);
}

.success-check{
    width:52px;height:52px;border-radius:50%;
    background:var(--accent-tint);color:var(--accent);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 22px;
}
.success-check svg{
    width:26px;height:26px;
    stroke-dasharray:30;stroke-dashoffset:30;
    animation:drawCheck .5s var(--ease) .15s forwards;
}
@keyframes drawCheck{to{stroke-dashoffset:0}}

.success-title{
    font-family:var(--font-display);
    font-size:1.5rem;font-weight:500;
    letter-spacing:-.02em;margin-bottom:8px;
    font-variation-settings:'opsz' 48,'SOFT' 30;
}
.success-msg{
    font-size:.9375rem;color:var(--ink-2);margin-bottom:28px;
    line-height:1.55;
}
.success-msg strong{color:var(--ink);font-weight:600}

.site-footer{
    text-align:center;padding:24px;
    font-family:var(--font-mono);font-size:.6875rem;
    color:var(--ink-3);letter-spacing:.05em;
}

@media (max-width:560px){
    .field{flex-wrap:wrap;padding:5px}
    .field input{width:100%;padding:13px 14px}
    .btn-primary{width:100%;padding:14px}
    .intro h1{font-size:1.75rem}
    .success-wrap{padding:32px 24px}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        transition-duration:.01ms!important;
    }
}