* { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background: #fff8f0;
            color: #2e2b2b;
            line-height: 1.7;
            font-size: 16px;
        }
        a { color:#b4532a; text-decoration:none; transition:color 0.2s ease; }
        a:hover { color:#7b341e; text-decoration:underline; }
        img { max-width:100%; height:auto; display:block; border-radius:12px; }
        .container { max-width:1200px; margin:0 auto; padding:0 20px; }
        header {
            background:#ffffff;
            box-shadow:0 4px 20px rgba(0,0,0,0.04);
            position: sticky; top:0; z-index:1000;
        }
        .header-inner {
            display:flex; align-items:center; justify-content:space-between;
            padding:12px 20px; flex-wrap:wrap; gap:10px;
        }
        .my-logo {
            font-size:1.9rem; font-weight:800; color:#5f3521;
            letter-spacing:-0.5px; background: linear-gradient(135deg,#a0522d,#d27348);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .my-logo a { background:none; -webkit-text-fill-color: currentColor; }
        .my-logo a:hover { text-decoration:none; }
        nav.main-nav { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
        nav.main-nav a { font-weight:600; color:#3d2b1f; }
        nav.main-nav a i { margin-right:6px; }
        .search-box {
            display:flex; align-items:center; background:#f3ede5;
            border-radius:40px; padding:4px 10px;
        }
        .search-box input {
            border:none; background:transparent; padding:8px; font-size:0.9rem; width:120px;
        }
        .search-box button { background:none; border:none; color:#b4532a; cursor:pointer; }
        .hamburger { display:none; background:none; border:none; font-size:1.8rem; cursor:pointer; color:#1e1610; }
        .breadcrumb {
            background:#f7efe5; font-size:0.85rem; padding:8px 0;
            border-bottom:1px solid #e6d7c5;
        }
        .breadcrumb .container { display:flex; flex-wrap:wrap; gap:6px; }
        .hero-image {
            margin:30px 0 15px; border-radius:20px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,0.1);
        }
        h1 {
            font-size:2.7rem; font-weight:800; line-height:1.15; color:#2c1712;
            margin:1rem 0 1.2rem;
        }
        h2 {
            font-size:2rem; font-weight:700; margin:2.8rem 0 1rem; color:#4b2e1d;
            border-left:6px solid #d99e6c; padding-left:20px;
        }
        h3 { font-size:1.5rem; font-weight:600; margin:2rem 0 0.8rem; color:#5e3c26; }
        h4 { font-size:1.2rem; font-weight:600; margin:1.5rem 0 0.6rem; color:#6f4a32; }
        p { margin-bottom:1.2rem; }
        .lead { font-size:1.3rem; font-weight:300; color:#3d322b; }
        .content-grid {
            display:grid; grid-template-columns: 260px 1fr; gap:45px;
            align-items:start; margin-top:30px;
        }
        .toc {
            background:#faf5ef; border-radius:20px; padding:25px 20px;
            top:90px; position:sticky; border:1px solid #ead9ca;
        }
        .toc h4 { font-weight:700; font-size:1.2rem; display:flex; align-items:center; gap:8px; }
        .toc ul { list-style:none; margin-top:10px; }
        .toc li { margin-bottom:10px; }
        .toc a { display:flex; gap:8px; font-size:0.9rem; color:#5b3f2c; }
        .toc a i { color:#c27c4a; width:16px; text-align:center; }
        .article-body { min-width:0; }
        .callout {
            background:#fff0de; border-left:6px solid #d9823f; padding:18px 22px;
            border-radius:10px; margin:30px 0; font-size:1.02rem;
        }
        .callout i { color:#b4532a; margin-right:12px; }
        .friend-link {
            background:#f9f1e9; border:1px dashed #c9a17b; border-radius:20px;
            padding:30px 25px; margin-top:60px; display:block;
        }
        .friend-link a { display:inline-block; margin:8px 15px 0 0; font-weight:600; }
        .user-interactions {
            background:white; border:1px solid #e5d5c3; border-radius:24px;
            padding:30px; margin:35px 0;
        }
        .interact-row { display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; }
        .interact-card { flex:1; min-width:230px; }
        .interact-card h3 { margin:0 0 12px; }
        .interact-card form { background:#faf4ec; padding:20px; border-radius:16px; }
        .interact-card input, .interact-card textarea {
            width:100%; border:1px solid #cfb9a6; border-radius:8px; padding:12px; margin:6px 0;
        }
        .btn {
            background:#b4532a; color:white; padding:12px 22px; border:none; border-radius:30px;
            font-weight:600; cursor:pointer; transition:background 0.2s;
        }
        .btn:hover { background:#923d1c; }
        .rating-stars i { color:#f0b742; font-size:1.7rem; cursor:pointer; }
        .footer {
            background:#1b1511; color:#d8cfc6; padding:40px 0; margin-top:70px;
        }
        .footer a { color:#dba77b; }
        .footer .copyright { 
            border-top:1px solid #302a24; padding-top:20px; margin-top:30px; font-size:0.9rem; text-align:center;
        }
        .footer-links {
            display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center;
        }
        @media (max-width: 960px) {
            .content-grid { grid-template-columns:1fr; }
            .toc { position:static; margin-bottom:30px; }
            .hamburger { display:block; }
            .main-nav { 
                display:none; width:100%; flex-direction:column; background:#fff; margin-top:10px;
                padding:10px 0; border-top:1px solid #eee;
            }
            .main-nav.show { display:flex; }
            .search-box { width:auto; }
            .header-inner { justify-content:space-between; }
        }
        @media (max-width: 600px) {
            h1 { font-size:2.2rem; }
            body { font-size:15px; }
        }
        blockquote.quote-uk {
            border-left:4px solid #cd7b4b; background:#faf1e9; margin:1.5rem 0; padding:1rem 1.8rem;
            font-style: italic; color:#3f2d24;
        }
        hr { border:0; border-top:1px solid #e2cdb8; margin:2.2rem 0; }
        .feature-list i { color:#c88651; margin-right:8px; }
        .stats-badge {
            background:#2a1e16; color:#fff; border-radius:100px; padding:5px 14px; font-size:0.9rem;
        }
        .my-logo i { background: none; -webkit-text-fill-color:#5f3521; margin-right:10px; }