:root {
            --bg-color: #121212;
            --text-color: #fdfaf1;
            --accent-color: #ff8820;
            --secondary-text: #c0beb4;
            --font-main: 'Inter', sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
            --font-serif: 'Fraunces', serif;
            --transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
        }

        html { background-color: var(--bg-color); color-scheme: dark; }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background-color: transparent; color: var(--text-color); font-family: var(--font-main); line-height: 1.6; display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100svh; margin: 0; overflow-x: hidden; }
        #vanta-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; background-color: var(--bg-color); }
        #vanta-bg canvas { display: block; width: 100% !important; height: 100% !important; }
        .container { position: relative; max-width: 800px; width: 90%; text-align: center; padding: 2rem; z-index: 1; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }

        .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 999; padding: 0.6rem 1rem; border-radius: 4px; background: var(--accent-color); color: #121212; font-family: var(--font-mono); font-weight: 700; text-decoration: none; transform: translateY(-200%); transition: transform 0.15s ease; }
        .skip-link:focus { transform: translateY(0); outline: 3px solid #121212; outline-offset: 2px; }
        .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

        .dictionary-entry { text-align: left; max-width: 330px; background: var(--bg-color); backdrop-filter: blur(12px); padding: 1.5rem; border-left: 4px solid var(--accent-color); margin: 0 0 2rem; border-radius: 0 8px 8px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
        .word-group { margin-bottom: 0.5rem; }
        .word { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; margin: 0; color: var(--text-color); }
        .part-of-speech { font-family: var(--font-mono); font-style: italic; font-size: 0.8rem; color: var(--accent-color); margin-right: 0.5rem; }
        .phonetic { font-family: var(--font-mono); font-size: 0.8rem; color: var(--secondary-text); }
        .definition { font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.5; color: var(--secondary-text); margin: 0; }

        header { margin-bottom: 4rem; }
        nav > ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }
        nav a { display: inline-block; padding: 0.45rem 0.25rem; text-decoration: none; color: var(--text-color); font-family: inherit; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; transition: var(--transition); opacity: 0.78; }
        nav a:hover, nav a[aria-current] { opacity: 1; color: var(--accent-color); }
        nav a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 4px; color: var(--accent-color); opacity: 1; border-radius: 2px; }

        .hero h1 { font-family: var(--font-mono); font-size: clamp(2.2rem, 7vw, 3.5rem); font-weight: 800; margin-bottom: 0.5rem; letter-spacing: -0.02em; text-wrap: balance; }
        .tagline { font-family: var(--font-mono); color: var(--accent-color); font-size: clamp(0.95rem, 2vw, 1.1rem); margin-bottom: 2rem; font-weight: 500; text-wrap: balance; }
        .social-links { margin-top: 2rem; }
        .social-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text-color); transition: var(--transition); padding: 0.5rem; border-radius: 50%; }
        .social-icon:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 4px; color: var(--accent-color); }
        .social-icon:hover { color: var(--accent-color); transform: translateY(-3px); }

        footer { width: 100%; text-align: center; padding: 2rem 2rem calc(2rem + env(safe-area-inset-bottom)); font-size: 0.8rem; color: var(--secondary-text); font-family: var(--font-mono); z-index: 1; }

        @media (min-width: 1200px) {
            .dictionary-entry { position: fixed; top: 3rem; left: 3rem; margin-bottom: 0; }
        }
        @media (max-width: 768px) {
            body { padding: 2rem 0; align-items: flex-start; }
            .container { width: 100%; padding: 1.5rem; }
            header { margin-bottom: 3rem; }
            nav > ul { gap: 0.25rem 1rem; }
            .dictionary-entry { max-width: 100%; margin: 0 0 3rem; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
        }