footer.site-footer {
        position: relative;
        margin-top: 0;
        padding: 20px 0;
        font-size: 12px;
        color: var(--secondary);
    }
    .site-footer .footer-logo {
        display: block;
        width: 52px;
        height: 36px;
        margin-bottom: 12px;
        color: var(--strong);
    }
    .site-footer .footer-logo svg {
        display: block;
        width: 100%;
        height: 100%;
    }
    footer.site-footer a {
        color: var(--fg);
        text-decoration: none;
    }
    footer.site-footer a:hover {
        text-decoration: underline;
    }
    footer.site-footer a:focus-visible,
    .contact-alt:focus-visible,
    .contact-loading a:focus-visible {
        outline: 1px solid var(--fg);
        outline-offset: 3px;
    }
    .legal-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
        margin-top: 20px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
        font-size: 12px;
    }
    .legal-nav a {
        color: var(--secondary);
        text-decoration: none;
    }
    .legal-nav a:hover {
        color: var(--fg);
        text-decoration: underline;
    }
    .legal-nav a:focus-visible {
        outline: 1px solid var(--fg);
        outline-offset: 3px;
    }
    .contact-panel {
        display: grid;
        grid-template-rows: 1fr;
        border: 1px solid var(--border);
        animation: contact-unfold 360ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .contact-panel[hidden] {
        display: none;
    }
    .contact-inner {
        overflow: hidden;
        min-height: 0;
    }
    @keyframes contact-unfold {
        from {
            grid-template-rows: 0fr;
            opacity: 0;
        }
        to {
            grid-template-rows: 1fr;
            opacity: 1;
        }
    }
    .contact-frame {
        position: relative;
        min-height: 276px;
        background: var(--bg);
    }
    .contact-skeleton {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px 10px;
        animation: sk-pulse 1.1s ease-in-out infinite alternate;
    }
    .contact-skeleton span {
        display: block;
        border: 1px solid var(--border);
        opacity: 0.5;
    }
    .sk-field { height: 38px; }
    .sk-area { height: 96px; }
    .sk-btn { height: 36px; width: 92px; }
    @keyframes sk-pulse {
        from { opacity: 0.4; }
        to { opacity: 1; }
    }
    .contact-loading {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .frame-error .contact-skeleton {
        display: none;
    }
    .contact-frame.frame-error {
        min-height: 48px;
    }
    .frame-error .contact-loading {
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        white-space: normal;
        top: 14px;
        left: 12px;
        font-size: 11px;
        color: var(--secondary);
    }
    .contact-loading a {
        color: inherit;
    }
    .contact-frame iframe {
        position: relative;
        display: block;
        width: 100%;
        border: 0;
        background: transparent;
    }
    .contact-frame iframe:not(.form-active) {
        position: absolute;
        inset: 0;
        visibility: hidden;
    }
    .frame-error iframe {
        display: none;
    }
    .contact-alt {
        display: block;
        border-top: 1px solid var(--border);
        padding: 8px 12px;
        font-size: 11px;
        color: var(--secondary);
        text-decoration: none;
    }
    .contact-alt:hover {
        color: var(--fg);
        text-decoration: underline;
    }
    @media (prefers-reduced-motion: reduce) {
        .contact-panel,
        .contact-skeleton {
            animation: none;
        }
    }
    @media (pointer: coarse) {
        footer.site-footer a {
                    padding: 15px 0;
                }
        .legal-nav a {
                    display: inline-block;
                    min-height: 44px;
                    padding: 12px 0;
                }
        .contact-alt {
                    padding: 14px 12px;
                }
    }

    #say-hello {
        display: inline-grid;
        position: relative;
        box-sizing: border-box;
        inline-size: calc(15ch + 14px);
        white-space: nowrap;
    }
    #say-hello::after {
        content: 'こんにちは aaaaaa ';
        grid-area: 1 / 1;
        visibility: hidden;
        pointer-events: none;
        white-space: pre;
    }
    #say-hello .say-hello-label {
        grid-area: 1 / 1;
    }
    #say-hello.active {
        padding-left: 14px;
    }
    #say-hello.active::before {
        content: '▸';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: var(--fg);
    }

.contact-panel p {
    margin: 0;
}

.skills-page footer.site-footer {
    margin-top: 24px;
}