
.nf-main {
    background: var(--background, #050505);
}

.nf-wrap {
    display: flex;
    justify-content: center;
    padding: 8.5rem 1.25rem 5rem;
}

.nf-sheet {
    width: 100%;
    max-width: 620px;
    padding: 3.25rem 3rem 2.75rem;
    background: var(--surface-elevated, #141414);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 18px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 40px 90px -40px rgba(0, 0, 0, 0.75);
    font-family: 'Hanken Grotesk', 'Inter', sans-serif;
    color: var(--text-primary, #fff);
}

.nf-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 2.25rem;
}
.nf-code {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--text-muted, #71717a);
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 6px;
}
.nf-title {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.nf-figure {
    margin: 0 auto 2.25rem;
    width: min(46%, 236px);
}
.nf-figure img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.35));
}

.nf-copy p {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary, #a1a1aa);
}
.nf-copy em {
    font-style: italic;
    color: var(--text-primary, #fff);
}
.nf-aside {
    color: var(--text-muted, #71717a) !important;
    font-size: 0.95rem !important;
}

.nf-rule {
    border: 0;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    margin: 2rem 0 1.75rem;
}

.nf-ways {
    text-align: right;
}
.nf-ways p {
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-muted, #71717a);
    font-style: italic;
}
.nf-ways p:last-child { margin-bottom: 0; }
.nf-ways a {
    color: var(--text-primary, #fff);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--text-subtle, #52525b);
    transition: text-decoration-color 0.15s ease;
}
.nf-ways a:hover {
    text-decoration-color: var(--text-primary, #fff);
}

@media (max-width: 640px) {
    .nf-wrap { padding-top: 6.5rem; }
    .nf-sheet { padding: 2.25rem 1.5rem 2rem; border-radius: 14px; }
    .nf-head { flex-direction: column; gap: 0.6rem; }
    .nf-figure { width: min(60%, 200px); }
}
