* { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Segoe UI', Roboto, system-ui, sans-serif; background: #f3efe7; color: #1e1a17; line-height: 1.68; }
    .my-logo { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(145deg, #740001, #c37e00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; }
    .my-logo span { background: none; }
    header { background: #fffaf3; box-shadow: 0 8px 16px rgba(0,0,0,0.03); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #e5d9cc; }
    .topbar { max-width: 1400px; margin: auto; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
    .menu-icon { display: none; font-size: 2rem; cursor: pointer; color: #740001; background: none; border: none; }
    .nav-links { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
    .nav-links a { text-decoration: none; color: #3a2a20; font-weight: 500; padding: 0.5rem 0.75rem; border-radius: 40px; transition: all 0.2s; }
    .nav-links a:hover { background: #740001; color: #fff; }
    .search-form { display: flex; gap: 0.5rem; background: #fff; border: 1.5px solid #dccfc0; border-radius: 44px; padding: 0.25rem 0.25rem 0.25rem 1rem; }
    .search-form input { border: none; background: transparent; outline: none; width: 180px; font-size: 0.95rem; }
    .search-form button { background: #740001; border: none; color: white; width: 36px; border-radius: 40px; cursor: pointer; height: 36px; }
    .search-form i { font-size: 1rem; }
    .breadcrumb { width: 100%; padding: 0.9rem 4vw 0.3rem; font-size: 0.9rem; color: #685b4b; max-width: 1400px; margin: auto; }
    .breadcrumb a { color: #740001; text-decoration: none; }
    .wrapper { max-width: 1400px; margin: auto; display: flex; gap: 2.5rem; padding: 2rem; align-items: flex-start; }
    article { flex: 1; min-width: 0; background: #fffdf8; border-radius: 36px; padding: 2.5rem 3rem; box-shadow: 0 20px 40px rgba(0,0,0,0.02); border: 1px solid #eee3d7; }
    aside { width: 360px; background: #fffbf4; border-radius: 28px; padding: 1.8rem 1.6rem; position: sticky; top: 90px; border: 1px solid #e7dbcc; }
    h1 { font-size: 2.9rem; font-weight: 800; line-height: 1.15; color: #2a1b12; margin: 0.8rem 0 1.5rem; }
    h2 { font-size: 2rem; color: #4c1d0e; margin: 2.5rem 0 1rem; border-left: 8px solid #740001; padding-left: 1.2rem; }
    h3 { font-size: 1.5rem; color: #3b271b; margin: 1.8rem 0 0.8rem; }
    h4 { font-size: 1.15rem; color: #574437; margin: 1.2rem 0 0.3rem; }
    p { margin-bottom: 1.2rem; }
    img { max-width: 100%; height: auto; border-radius: 24px; box-shadow: 0 8px 18px rgba(0,0,0,0.1); margin: 1.8rem 0; }
    .img-caption { font-size: 0.8rem; color: #7a6a5a; text-align: center; margin-top: -0.9rem; margin-bottom: 2rem; }
    .highlight { background: #f3e9db; padding: 1rem 1.4rem; border-radius: 18px; border-left: 6px solid #c78d2d; }
    ul, ol { padding-left: 1.9rem; margin: 0.6rem 0 1.4rem; }
    li { margin-bottom: 0.4rem; }
    a { color: #740001; text-decoration-thickness: 0.15em; text-underline-offset: 3px; font-weight: 500; }
    .aside-header { display: flex; align-items: center; gap: 10px; font-size: 1.55rem; font-weight: 700; margin-bottom: 1.6rem; border-bottom: 3px dashed #d6c4ad; padding-bottom: 1rem; }
    .aside-links { display: flex; flex-direction: column; gap: 0.8rem; }
    .aside-links a { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0.9rem; background: #fff; border-radius: 18px; border: 1px solid #eadbcb; transition: 0.15s; }
    .aside-links a i { color: #b36b00; }
    .aside-links a:hover { transform: translateY(-2px); background: #f7ede1; box-shadow: 0 6px 12px rgba(0,0,0,0.04); }
    .stars { display: inline-flex; direction: rtl; justify-content: flex-end; unicode-bidi: bidi-override; font-size: 1.8rem; }
    .stars input { display: none; }
    .stars label { color: #d1c7bb; transition: 0.15s; cursor: pointer; padding: 0 0.1rem; }
    .stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: #e9a800; }
    .score-form, .comment-form { background: #f6efe5; padding: 1.5rem; border-radius: 24px; margin: 2.5rem 0 1.5rem; }
    .score-form select, .comment-form textarea, .comment-form input[type="text"] { width: 100%; padding: 0.7rem 1rem; border-radius: 40px; border: 1px solid #d8c8b8; background: #fff; margin-bottom: 0.8rem; }
    .btn { background: #740001; border: none; color: white; padding: 0.8rem 2rem; border-radius: 44px; font-weight: 600; cursor: pointer; transition: 0.15s; width: fit-content; font-size: 1rem; }
    .btn:hover { background: #541d0e; }
    .footer { background: #23180f; color: #d9cdbf; padding: 3rem 2rem 1.5rem; margin-top: 3rem; }
    .footer-inner { max-width: 1200px; margin: auto; }
    friend-link { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; font-size: 0.95rem; }
    friend-link a { color: #f9d48b; text-decoration: none; }
    .copyright { border-top: 1px solid #544535; padding-top: 2rem; font-size: 0.85rem; opacity: 0.85; }
    .logo-wrap { display: flex; flex-direction: column; }
    .small-sub { font-size: 0.8rem; color: #a52a2a; margin-top: -0.5rem; letter-spacing: 1px; }
    @media (max-width: 1024px) { .wrapper { flex-direction: column; padding: 1rem; } aside { width: 100%; position: static; order: 2; } article { padding: 1.8rem; } h1 { font-size: 2.2rem; } }
    @media (max-width: 680px) { .topbar { padding: 0.8rem 1.2rem; } .menu-icon { display: block; } .nav-links { display: none; width: 100%; flex-direction: column; align-items: flex-start; } .nav-links.open { display: flex; } .nav-links a { padding: 0.8rem 1rem; } .search-form input { width: 100px; } .breadcrumb {padding-left: 1rem;} article { padding: 1.2rem; border-radius: 26px; } .score-form select {width: 100%;} }