.drft,
.drft-head,
.drft-proof,
.drft-body,
.drft-steps,
.drft-faq,
.drft-related,
.drft-cta,
.drft-hub {
--drft-ink: #1a1c1a;
--drft-ink-soft: #5b6060;
--drft-page: #ffffff;
--drft-tint: #f5f6f3;
--drft-rule: #d9dbd6;
--drft-cloth: #0f4c45;
--drft-cloth-dark: #0a3a34;
--drft-foil: #b98a2e;
--drft-alarm: #a23c2f;
--drft-radius: 10px;
--drft-gap: 20px;
--drft-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
color: var(--drft-ink);
font-family: inherit;
line-height: 1.55;
box-sizing: border-box;
}
.drft *,
.drft *::before,
.drft *::after,
.drft-hub * {
box-sizing: inherit;
} .drft {
background: var(--drft-page);
border: 1px solid var(--drft-rule);
border-radius: var(--drft-radius);
padding: clamp(20px, 4vw, 34px);
max-width: 720px;
margin: 0 0 2.5rem;
position: relative;
} .drft__spine {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 26px;
}
.drft__fmt {
font-family: var(--drft-mono);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--drft-ink-soft);
border: 1px solid var(--drft-rule);
border-radius: 4px;
padding: 4px 9px;
white-space: nowrap;
}
.drft__fmt--out {
color: var(--drft-cloth);
border-color: var(--drft-cloth);
background: color-mix(in srgb, var(--drft-cloth) 5%, transparent);
}
.drft__rule {
flex: 1;
height: 1px;
background: var(--drft-rule);
position: relative;
overflow: visible;
}
.drft__pulse {
position: absolute;
top: 50%;
left: 0;
width: 6px;
height: 6px;
margin-top: -3px;
border-radius: 50%;
background: var(--drft-foil);
opacity: 0;
}
.drft.is-working .drft__pulse {
opacity: 1;
animation: drft-travel 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes drft-travel {
0%   { left: 0; }
100% { left: 100%; }
} .drft__drop {
border: 1.5px dashed var(--drft-rule);
border-radius: var(--drft-radius);
background: var(--drft-tint);
padding: 40px 20px;
text-align: center;
cursor: pointer;
position: relative;
transition: border-color 0.15s ease, background 0.15s ease;
}
.drft__drop:hover,
.drft__drop:focus-visible,
.drft__drop.is-over {
border-color: var(--drft-cloth);
background: color-mix(in srgb, var(--drft-cloth) 4%, var(--drft-tint));
outline: none;
}
.drft__drop:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--drft-cloth) 25%, transparent);
}
.drft__icon {
width: 30px;
height: 30px;
color: var(--drft-cloth);
display: block;
margin: 0 auto 10px;
}
.drft__droptext strong {
display: block;
font-weight: 600;
}
.drft__droptext span {
display: block;
font-size: 0.9rem;
color: var(--drft-ink-soft);
text-decoration: underline;
text-underline-offset: 3px;
}
.drft__file {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.drft__urls {
width: 100%;
border: 1px solid var(--drft-rule);
border-radius: var(--drft-radius);
background: var(--drft-tint);
padding: 14px 16px;
font-family: var(--drft-mono);
font-size: 0.85rem;
line-height: 1.8;
resize: vertical;
color: var(--drft-ink);
}
.drft__urls:focus-visible {
outline: none;
border-color: var(--drft-cloth);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--drft-cloth) 20%, transparent);
}
.drft__help {
font-size: 0.82rem;
color: var(--drft-ink-soft);
margin: 10px 0 0;
}
.drft__filename {
font-family: var(--drft-mono);
font-size: 0.82rem;
margin: 10px 0 0;
color: var(--drft-cloth);
word-break: break-all;
}
.drft__label {
display: block;
font-size: 0.82rem;
font-weight: 600;
margin-bottom: 6px;
}
.drft__input {
width: 100%;
border: 1px solid var(--drft-rule);
border-radius: 6px;
padding: 9px 11px;
font-size: 0.92rem;
font-family: inherit;
background: var(--drft-page);
color: var(--drft-ink);
}
.drft__input:focus-visible {
outline: none;
border-color: var(--drft-cloth);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--drft-cloth) 20%, transparent);
} .drft__options {
margin: 18px 0 0;
border-top: 1px solid var(--drft-rule);
padding-top: 14px;
}
.drft__options > summary {
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
color: var(--drft-ink-soft);
list-style: none;
}
.drft__options > summary::-webkit-details-marker { display: none; }
.drft__options > summary::before {
content: "+";
font-family: var(--drft-mono);
margin-right: 8px;
color: var(--drft-foil);
}
.drft__options[open] > summary::before { content: "\2212"; }
.drft__options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px 18px;
margin-top: 16px;
}
.drft__check {
display: flex;
align-items: center;
gap: 9px;
font-size: 0.88rem;
cursor: pointer;
align-self: end;
padding-bottom: 8px;
}
.drft__check input { accent-color: var(--drft-cloth); width: 16px; height: 16px; }
.drft__hp {
position: absolute;
left: -9999px;
opacity: 0;
height: 0;
width: 0;
} .drft__go {
display: inline-block;
margin-top: 22px;
background: var(--drft-cloth);
color: #fff;
border: 0;
border-radius: 6px;
padding: 13px 26px;
font-size: 0.98rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease;
}
.drft__go:hover,
.drft__go:focus-visible { background: var(--drft-cloth-dark); color: #fff; }
.drft__go:focus-visible { outline: 3px solid color-mix(in srgb, var(--drft-cloth) 40%, transparent); outline-offset: 2px; }
.drft__go[disabled] { opacity: 0.45; cursor: not-allowed; }
.drft__go--download::after {
content: " \2193";
font-family: var(--drft-mono);
}
.drft__link {
display: inline-block;
background: none;
border: 0;
padding: 8px 0;
margin-left: 18px;
font-size: 0.88rem;
font-family: inherit;
color: var(--drft-ink-soft);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.drft__link:hover { color: var(--drft-ink); }
.drft__link--btn { margin-left: 0; white-space: nowrap; }  .drft__meter {
display: flex;
align-items: baseline;
gap: 9px;
margin: 24px 0 0;
padding-top: 18px;
border-top: 1px solid var(--drft-rule);
font-size: 0.84rem;
color: var(--drft-ink-soft);
}
.drft__bytes {
font-family: var(--drft-mono);
font-size: 1.45rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1;
color: var(--drft-cloth);
position: relative;
}
.drft__bytes::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -5px;
height: 2px;
background: var(--drft-foil);
}
.drft__meter--server .drft__meter-label { max-width: 62ch; } .drft__status {
font-size: 0.92rem;
margin: 0 0 12px;
font-weight: 500;
}
.drft__bar {
height: 4px;
background: var(--drft-rule);
border-radius: 2px;
overflow: hidden;
}
.drft__bar > span {
display: block;
height: 100%;
background: var(--drft-cloth);
transition: width 0.25s ease;
}
.drft__done-head {
font-size: 1.05rem;
font-weight: 600;
margin: 0 0 4px;
}
.drft__gate {
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid var(--drft-rule);
position: relative;
}
.drft__gate-row {
display: flex;
gap: 10px;
align-items: stretch;
flex-wrap: wrap;
}
.drft__gate-row .drft__input { flex: 1 1 220px; }
.drft__error {
margin: 20px 0 0;
padding: 12px 14px;
border-left: 3px solid var(--drft-alarm);
background: color-mix(in srgb, var(--drft-alarm) 6%, transparent);
color: var(--drft-alarm);
font-size: 0.9rem;
border-radius: 0 6px 6px 0;
} .drft-steps ol {
counter-reset: drft-step;
list-style: none;
padding: 0;
margin: 0;
}
.drft-steps li {
counter-increment: drft-step;
position: relative;
padding-left: 40px;
margin-bottom: 14px;
}
.drft-steps li::before {
content: counter(drft-step);
position: absolute;
left: 0;
top: 1px;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid var(--drft-rule);
font-family: var(--drft-mono);
font-size: 0.75rem;
display: grid;
place-items: center;
color: var(--drft-cloth);
}
.drft-faq__item {
border-bottom: 1px solid var(--drft-rule);
padding: 14px 0;
}
.drft-faq__item > summary {
cursor: pointer;
font-weight: 600;
list-style: none;
display: flex;
justify-content: space-between;
gap: 16px;
}
.drft-faq__item > summary::-webkit-details-marker { display: none; }
.drft-faq__item > summary::after {
content: "+";
font-family: var(--drft-mono);
color: var(--drft-foil);
flex: none;
}
.drft-faq__item[open] > summary::after { content: "\2212"; }
.drft-faq__a { padding-top: 8px; color: var(--drft-ink-soft); }
.drft-related ul,
.drft-hub__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.drft-related a,
.drft-hub__card a {
display: block;
border: 1px solid var(--drft-rule);
border-radius: var(--drft-radius);
padding: 16px;
text-decoration: none;
color: var(--drft-ink);
transition: border-color 0.15s ease, transform 0.15s ease;
}
.drft-related a:hover,
.drft-hub__card a:hover {
border-color: var(--drft-cloth);
transform: translateY(-1px);
}
.drft-related__pair,
.drft-hub__pair {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--drft-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--drft-cloth);
margin-bottom: 6px;
}
.drft-related__pair i,
.drft-hub__pair i { color: var(--drft-foil); font-style: normal; }
.drft-related__label,
.drft-hub__name { font-size: 0.95rem; font-weight: 600; display: block; }
.drft-hub__badge {
display: inline-block;
margin-top: 8px;
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-family: var(--drft-mono);
color: var(--drft-foil);
border: 1px solid color-mix(in srgb, var(--drft-foil) 40%, transparent);
border-radius: 3px;
padding: 2px 6px;
}
.drft-cta {
border-left: 3px solid var(--drft-foil);
background: var(--drft-tint);
padding: 22px 24px;
border-radius: 0 var(--drft-radius) var(--drft-radius) 0;
margin: 2.5rem 0;
}
.drft-cta h2 { margin-top: 0; font-size: 1.15rem; }
.drft-cta p { color: var(--drft-ink-soft); margin-bottom: 14px; }
.drft-cta__link {
font-weight: 600;
color: var(--drft-cloth);
text-decoration: underline;
text-underline-offset: 3px;
}
.drft-notice {
font-family: var(--drft-mono);
font-size: 0.8rem;
background: color-mix(in srgb, var(--drft-foil) 12%, transparent);
border: 1px dashed var(--drft-foil);
padding: 8px 12px;
border-radius: 6px;
} @media (prefers-reduced-motion: reduce) {
.drft *,
.drft *::before,
.drft *::after {
animation: none !important;
transition: none !important;
}
}
@media (max-width: 520px) {
.drft__spine { gap: 10px; }
.drft__go { width: 100%; text-align: center; }
.drft__link { display: block; margin-left: 0; text-align: center; }
} .drft-head {
max-width: 34em;
margin: 0 0 26px;
}
.drft-head__h1 {
margin: 0 0 10px;
font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--drft-ink);
}
.drft-head__tagline {
margin: 0;
font-size: 1.0625rem;
line-height: 1.55;
color: var(--drft-ink-soft);
} .drft-proof {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--drft-gap);
margin: 26px 0 0;
padding: 0;
list-style: none;
}
.drft-proof__item {
position: relative;
padding: 2px 0 2px 16px;
border-left: 2px solid var(--drft-foil);
}
.drft-proof__title {
display: block;
margin-bottom: 3px;
font-size: 0.9375rem;
letter-spacing: 0.01em;
color: var(--drft-ink);
}
.drft-proof__text {
display: block;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--drft-ink-soft);
} .drft-body {
max-width: 38em;
margin: 52px 0 0;
}
.drft-body__section + .drft-body__section {
margin-top: 40px;
}
.drft-body h2 {
margin: 0 0 14px;
font-size: 1.375rem;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--drft-ink);
}
.drft-body p {
margin: 0 0 16px;
font-size: 1.0625rem;
line-height: 1.65;
color: var(--drft-ink);
}
.drft-body p:last-child {
margin-bottom: 0;
} .drft-body__section > p:first-of-type {
color: var(--drft-ink);
}
@media (max-width: 640px) {
.drft-proof {
gap: 14px;
}
.drft-body {
margin-top: 40px;
}
.drft-body__section + .drft-body__section {
margin-top: 32px;
}
}