* {
            box-sizing: border-box;
        }
    
        html {
            scroll-behavior: smooth;
        }
    
        body {
            max-width: 1050px;
            min-height: 100vh;
            margin: 0 auto;
            padding: 2rem;
            color: #111111;
            background: #ffffff;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            line-height: 1.4;
            text-align: center;
        }
    
        a {
            color: #2874b8;
        }
    
        /* Header */
    
        body>nav {
            margin-bottom: 3rem;
        }
    
        body>nav .container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
        }
    
        #logo {
            width: 100%;
            font-size: 2.7rem;
            font-weight: bold;
        }

        #logo a {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            color: #000000;
            text-decoration: none;
        }

        #logo img {
            display: block;
            width: 42px;
            height: 42px;
        }

        #languageSelect {
            padding: 0.25rem;
            font: inherit;
        }

        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            white-space: nowrap;
            border: 0;
            clip: rect(0, 0, 0, 0);
        }
    
        body>nav ul {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin: 0;
            padding: 0;
            list-style: none;
        }
    
        body>nav details {
            font-size: 0.9rem;
        }
    
        body>nav details ul {
            margin-top: 0.5rem;
        }
    
        /* Main recorder */
    
        #recorder {
            max-width: 700px;
            margin: 0 auto 4rem;
            border-radius: 19px;
            -webkit-border-radius: 19px;
            -moz-border-radius: 19px;
                border: 3px dashed #2874b8;
                padding: 1rem;
        }
    
        #recorder h1 {
            margin: 0 0 0.5rem;
            font-size: 2rem;
        }
    
        #recorder header p {
            margin: 0 0 2rem;
        }
    
        #timer {
            margin: 0.5rem 0 1.5rem;
            font-size: 2rem;
        }
    
        button {
            margin: 0.25rem;
            padding: 0.45rem 0.8rem;
            font: inherit;
            cursor: pointer;
        }
    
        button:disabled {
            cursor: default;
        }
    
        #startBtn,
        #shareBtn {
            font-weight: bold;
        }
    
        #errorMessage {
            margin: 1rem auto;
            color: #b00020;
        }
    
        /* Preview */
    
        #previewSection {
            margin-top: 2rem;
            background: #f9f9f9;
            padding: 1rem;
        }
    
        #previewSection h2 {
            margin-bottom: 1rem;
        }
    
        #audioPreview {
            display: block;
            width: 100%;
            max-width: 500px;
            margin: 0 auto 1rem;
        }
    
        .turnstile-wrapper {
            display: flex;
            justify-content: center;
            margin: 1rem 0;
        }
    
        #shareResult {
            max-width: 600px;
            margin: 1.5rem auto 0;
            background: #d2e8fc;
        }
    
        #shareResult label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
        }
    
        #shareResult input {
            width: 70%;
            max-width: 450px;
            padding: 0.45rem;
            font: inherit;
        }
    
        /* Informational sections */
    
        body>div {
            max-width: 800px;
            margin: 0 auto;
        }
    
        body>div section {
            margin: 4rem 0;
        }
    
        body>div h2 {
            margin-bottom: 1rem;
        }
    
        body>div h3 {
            margin-bottom: 0.25rem;
        }
    
        body>div ul,
        body>div ol {
            display: inline-block;
            margin: 0 auto;
            padding-left: 1.5rem;
            text-align: left;
        }
    
        body>div section>div>div {
            margin: 2rem 0;
        }
    
        /* FAQ */
    
        #faqAccordion>div {
            margin: 1rem 0;
        }
    
        #faqAccordion h3 {
            margin: 0;
        }
    
        #faqAccordion button {
            border: 0;
            background: none;
            color: #2874b8;
            font-weight: bold;
            text-decoration: underline;
        }
    
        /* Footer */
    
        footer {
            margin-top: 7rem;
            padding: 1.5rem 0;
            border-top: 2px solid #eeeeee;
            color: #999999;
            font-size: 0.9rem;
        }
    
        footer ul {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin: 0;
            padding: 0;
            list-style: none;
        }
    
        footer li:not(:last-child)::after {
            content: " |";
            color: #999999;
        }
    
        footer a {
            font-weight: bold;
            text-decoration: none;
        }
    
        footer p {
            margin: 0.4rem 0 0;
        }
    
        [hidden] {
            display: none !important;
        }

                #legal-page {
                    max-width: 760px;
                    margin: 3rem auto 6rem;
                    text-align: left;
                }
        
                #legal-page h1 {
                    margin: 0 0 0.5rem;
                    font-size: 2rem;
                }
        
                #legal-page .last-updated {
                    margin-top: 0;
                    color: #888888;
                }
        
                #legal-page h2 {
                    margin: 2.5rem 0 0.5rem;
                    font-size: 1.25rem;
                }
        
                #legal-page p {
                    margin: 0 0 1rem;
                }
        
                @media (max-width: 600px) {
                    #legal-page {
                        margin-top: 2rem;
                    }
                }

                                #contact-page {
                                    max-width: 640px;
                                    margin: 3rem auto 6rem;
                                    text-align: left;
                                }
                
                                #contact-page header {
                                    margin-bottom: 2rem;
                                    text-align: center;
                                }
                
                                #contact-page h1 {
                                    margin: 0 0 0.5rem;
                                    font-size: 2rem;
                                }
                
                                #contact-page header p {
                                    margin: 0;
                                }
                
                                #contactForm {
                                    max-width: 540px;
                                    margin: 0 auto;
                                }
                
                                .form-field {
                                    margin-bottom: 1.25rem;
                                }
                
                                .form-field label {
                                    display: block;
                                    margin-bottom: 0.35rem;
                                    font-weight: bold;
                                }
                
                                .form-field input,
                                .form-field select,
                                .form-field textarea {
                                    width: 100%;
                                    padding: 0.5rem;
                                    border: 1px solid #999999;
                                    border-radius: 0;
                                    background: #ffffff;
                                    color: #111111;
                                    font: inherit;
                                }
                
                                .form-field textarea {
                                    resize: vertical;
                                }
                
                                .form-help {
                                    margin: 0.35rem 0 0;
                                    color: #777777;
                                    font-size: 0.9rem;
                                }
                
                                #contactStatus {
                                    max-width: 540px;
                                    margin: 0 auto 1.25rem;
                                    padding: 0.75rem;
                                    border: 1px solid #999999;
                                }
                
                                #contactSubmitBtn {
                                    display: block;
                                    min-width: 180px;
                                    margin: 1rem auto 0;
                                }
                
                                .contact-footer-note {
                                    margin-top: 1.5rem;
                                    color: #777777;
                                    font-size: 0.9rem;
                                    text-align: center;
                                }
                
                                @media (max-width: 600px) {
                                    #contact-page {
                                        margin-top: 2rem;
                                    }
                                }
    
        @media (max-width: 600px) {
            body {
                padding: 1.25rem;
            }
    
            #logo {
                font-size: 2.2rem;
            }
    
            body>nav ul {
                gap: 0.7rem;
                flex-wrap: wrap;
            }
    
            #recorder h1 {
                font-size: 1.7rem;
            }
    
            #shareResult input {
                width: 100%;
                margin-bottom: 0.5rem;
            }
        }

                #share-page {
                    max-width: 640px;
                    margin: 3rem auto 6rem;
                    text-align: center;
                }
        
                #share-page header {
                    margin-bottom: 2rem;
                }
        
                #share-page h1 {
                    margin: 0 0 0.5rem;
                    font-size: 2rem;
                }
        
                #share-page header p {
                    margin: 0;
                }
        
                #loadingArea,
                #errorArea,
                #deletedArea {
                    margin: 2rem 0;
                }
        
                #loadingArea p,
                #errorArea p,
                #deletedArea p {
                    margin-bottom: 0;
                }
        
                #errorArea h2,
                #deletedArea h2 {
                    margin-bottom: 0.5rem;
                    font-size: 1.25rem;
                }
        
                #audioPlayer {
                    display: block;
                    width: 100%;
                    margin-bottom: 1.25rem;
                }
        
                .share-actions {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 0.75rem;
                    flex-wrap: wrap;
                }
        
                .share-actions a {
                    display: inline-block;
                    padding: 0.45rem 0.8rem;
                    border: 1px solid #999999;
                    color: #111111;
                    text-decoration: none;
                }
        
                .share-actions a:hover {
                    background: #eeeeee;
                }
        
                #deleteRecordingBtn {
                    margin-top: 1rem;
                    border: 0;
                    background: transparent;
                    color: #b00020;
                    text-decoration: underline;
                }
        
                #status {
                    min-height: 1.5rem;
                    margin-top: 1rem;
                    color: #777777;
                    font-size: 0.9rem;
                }
        
                @media (max-width: 600px) {
                    #share-page {
                        margin-top: 2rem;
                    }
        
                    .share-actions {
                        flex-direction: column;
                    }
        
                    .share-actions a,
                    .share-actions button {
                        width: 100%;
                    }
                }