<style>
        :root {
            /* Theme Tokens */
            --bg-color: #F6F7F8;
            --card-color: #FFFFFF;
            --text-main: #1F2933;
            --text-muted: #6B7280;
            --border-color: #E5E7EB;
            --primary: #2563EB;
            --secondary: #0EA5A4;
            --header-bg: rgba(246, 247, 248, 0.9);
            --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        [data-theme="dark"] {
            --bg-color: #0F172A;
            --card-color: #111827;
            --text-main: #E5E7EB;
            --text-muted: #94A3B8;
            --border-color: #1E293B;
            --primary: #38BDF8;
            --secondary: #2DD4BF;
            --header-bg: rgba(15, 23, 42, 0.9);
        }

        html { scroll-behavior: smooth; }
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            font-size: 0.9rem;
            line-height: 1.6;
            transition: background-color var(--transition), color var(--transition);
            -webkit-font-smoothing: antialiased;
        }

        .container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; width: 100%; }
        a { text-decoration: none; color: inherit; transition: var(--transition); cursor: pointer; }
        ul { list-style: none; }
        button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; display: flex; align-items: center; justify-content: center; }

        /* Navigation */
        header {
            position: sticky; top: 0; z-index: 1000;
            background: var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-color); height: 72px; display: flex; align-items: center;
        }
        header .container { display: flex; align-items: center; justify-content: space-between; }
        .logo { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.5px; display: flex; align-items: center; gap: 0.6rem; }
        

        .desktop-nav { display: none; }
        .desktop-nav ul { display: flex; gap: 0.5rem; }
        .desktop-nav a { 
            font-size: 0.85rem; font-weight: 600; color: var(--text-muted); 
            padding: 0.6rem 1.1rem; border-radius: 99px;
        }
        .desktop-nav a:hover { color: var(--text-main); background: var(--border-color); }
        .desktop-nav a.active { color: var(--primary); background: rgba(37, 99, 235, 0.08); }

        .header-actions { display: flex; align-items: center; gap: 0.75rem; }
        .theme-toggle, .menu-toggle {
            width: 42px; height: 42px; border-radius: 12px; background: var(--border-color); transition: var(--transition);
        }

        /* Mobile Menu Drawer */
        .mobile-menu {
            position: fixed; top: 0; right: -100%; width: 85%; max-width: 320px; height: 100vh;
            background: var(--card-color); z-index: 1100; padding: 2.5rem 2rem;
            box-shadow: -10px 0 30px rgba(0,0,0,0.1); transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex; flex-direction: column; gap: 3rem;
        }
        .mobile-menu.active { right: 0; }
        .mobile-menu-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.4); z-index: 1050; display: none; backdrop-filter: blur(4px);
        }
        .mobile-menu-overlay.active { display: block; }
        .mobile-nav-list { display: flex; flex-direction: column; gap: 1.5rem; }
        .mobile-nav-list a { font-size: 1.25rem; font-weight: 700; color: var(--text-main); }

        /* UI Blocks */
        .section-padding { padding: 4rem 0; }
        .h1-title { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 700; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 1.5rem; text-align: center; }
        .h2-title { font-size: 1.45rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.5px; text-align: center; }
        
        .intro-p, .section-intro { 
            font-size: 0.95rem; 
            color: var(--text-muted); 
            max-width: 750px; 
            line-height: 1.8; 
            margin: 0 auto 3rem; 
            font-weight: 500; 
            text-align: center; 
        }

        .grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.25rem; justify-content: center; }
        .soft-card {
            background: var(--card-color); border: 1px solid var(--border-color);
            padding: 1.5rem 1.25rem; border-radius: 20px; transition: var(--transition);
            text-align: center;
        }
        .soft-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
        .soft-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; }
        .soft-card p { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }

        /* Quote Cards */
        .quote-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; justify-content: center; }
        .quote-card {
            background: var(--card-color); border: 1px solid var(--border-color);
            padding: 2.5rem; border-radius: 24px; position: relative;
            text-align: center;
        }
        .quote-text { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-main); }
        .quote-author { color: var(--secondary); font-size: 0.85rem; font-weight: 700; display: block; margin-bottom: 1.5rem; }
        
        .quote-actions { display: flex; flex-wrap: wrap; gap: 1.5rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem; justify-content: center; }
        .action-btn { gap: 0.5rem; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); position: relative; }
        .action-btn:hover { color: var(--primary); }
        .action-btn svg { width: 1.05rem; height: 1.05rem; }

        /* Share Menu */
        .share-relative { position: relative; }
        .share-menu {
            position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(10px);
            background: var(--card-color); border: 1px solid var(--border-color); border-radius: 12px;
            padding: 0.5rem; display: none; flex-direction: column; min-width: 140px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1); z-index: 100;
        }
        .share-menu.active { display: flex; transform: translateX(-50%) translateY(0); }
        .share-item { padding: 0.6rem 1rem; font-size: 0.8rem; font-weight: 600; border-radius: 8px; text-align: left; }
        .share-item:hover { background: var(--bg-color); color: var(--primary); }

        /* Recently Added List (Ticker Style) */
        .recent-list { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); max-width: 700px; margin: 0 auto; padding: 1.5rem 0; }
        .recent-item { display: flex; align-items: center; justify-content: center; padding: 0.5rem 0; text-align: center; font-size: 0.85rem; opacity: 0.85; transition: var(--transition); }
        .recent-item:hover { opacity: 1; color: var(--primary); }
        .recent-snippet { font-weight: 600; color: var(--text-main); margin-right: 0.5rem; }
        .recent-author { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

        /* Newsletter */
        .newsletter {
            background: var(--primary); color: #fff; padding: 4rem 2rem; border-radius: 32px;
            text-align: center; margin: 4rem auto; max-width: 900px;
        }
        .newsletter-form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 500px; margin: 0 auto; align-items: center; }
        .newsletter-input { padding: 1rem; border-radius: 12px; border: none; outline: none; font-size: 0.95rem; width: 100%; }
        .newsletter-btn { background: #000; color: #fff; padding: 1rem 2rem; border-radius: 12px; font-weight: 700; width: 100%; font-size: 0.95rem; }

        /* Search Bar */
        .search-container { max-width: 600px; margin: 2rem auto; }
        .search-input-wrapper { display: flex; align-items: center; background: var(--card-color); border: 2px solid var(--border-color); border-radius: 18px; padding: 0 1.25rem; transition: var(--transition); }
        .search-input-wrapper:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); }
        .search-input { width: 100%; padding: 1.1rem 1rem; border: none; background: transparent; font-size: 0.95rem; outline: none; color: var(--text-main); text-align: center; }

        /* Breadcrumbs */
        .breadcrumbs { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); margin-bottom: 1.5rem; display: flex; gap: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; justify-content: center; }
        .breadcrumbs a:hover { color: var(--primary); }

        /* Context Block */
        .context-block { margin: 4rem auto; padding: 3rem; background: var(--card-color); border-radius: 28px; border: 1px solid var(--border-color); max-width: 900px; }
        .context-block p { margin-bottom: 1.5rem; font-size: 0.95rem; line-height: 1.8; color: var(--text-main); text-align: center; }
        .context-block p:last-child { margin-bottom: 0; }

        /* FAQ */
        .faq-section { max-width: 800px; margin: 4rem auto 0; }
        .faq-item { background: var(--card-color); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.5rem; margin-bottom: 1rem; text-align: center; }
        .faq-item h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; }
        .faq-item p { color: var(--text-muted); font-size: 0.9rem; }

        /* Responsive Breakpoints */
        @media (min-width: 640px) {
            .grid { grid-template-columns: repeat(2, 1fr); }
            .newsletter-form { flex-direction: row; }
            .newsletter-btn { width: auto; }
        }

        @media (min-width: 768px) {
            .grid { grid-template-columns: repeat(3, 1fr); }
            .quote-grid { grid-template-columns: repeat(2, 1fr); }
            .desktop-nav { display: block; }
            .menu-toggle { display: none; }
            .grid-10 { grid-template-columns: repeat(5, 1fr) !important; }
        }

        /* Footer Modern Layout */
        footer { padding: 6rem 0 4rem; border-top: 1px solid var(--border-color); background: var(--card-color); margin-top: 6rem; }
        .footer-grid { 
            display: grid; 
            grid-template-columns: 1fr; 
            gap: 4rem; 
            text-align: center; 
            max-width: 1000px; 
            margin: 0 auto; 
        }

        @media (min-width: 1024px) {
            .footer-grid { 
                grid-template-columns: 1.2fr 2.8fr; 
                text-align: left; 
                align-items: start;
            }
        }

        .footer-nav-wrapper { 
            display: grid; 
            grid-template-columns: repeat(2, 1fr); 
            gap: 2rem; 
        }

        @media (min-width: 768px) {
            .footer-nav-wrapper { grid-template-columns: repeat(4, 1fr); }
        }

        .footer-col h4 { margin-bottom: 1.5rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; color: var(--text-muted); letter-spacing: 2px; }
        .footer-col ul { display: flex; flex-direction: column; gap: 0.8rem; }
        .footer-col ul li a { color: var(--text-main); font-size: 0.85rem; font-weight: 500; opacity: 0.7; }
        .footer-col ul li a:hover { opacity: 1; color: var(--primary); }

        .toast {
            position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px);
            background: var(--text-main); color: var(--bg-color); padding: 1rem 2.5rem;
            border-radius: 99px; font-weight: 700; font-size: 0.85rem; opacity: 0; transition: 0.3s; z-index: 2000;
        }
        .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

        svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    </style>