*{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.6;
    letter-spacing:-0.011em;
    font-feature-settings:"cv11","ss01";
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
  h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em;}
  h1{font-size:clamp(2rem, 5vw, 3.2rem); line-height:1.12; font-weight:800; letter-spacing:-0.035em;}
  h2{font-size:clamp(1.4rem, 3vw, 1.9rem); line-height:1.25; letter-spacing:-0.025em;}
  h3{font-size:1.1rem; font-weight:600; letter-spacing:-0.015em;}

  /* ===== HEADER ===== */
  header{
    background:var(--ink);
    border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:50;
  }
  .header-top{
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; padding:16px 0;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
  }
  .brand img.logo{
    width:150px; height:150px; object-fit:contain;
  }
  .brand span{
    font-family:var(--font-display); font-size:1.6rem; letter-spacing:1px;
  }
  nav.main-nav{display:flex; align-items:center; gap:28px;}
  nav.main-nav a{
    font-size:0.92rem; color:var(--muted); font-weight:500;
    transition:color .2s;
  }
  nav.main-nav a:hover{color:var(--crimson);}
  .menu-toggle{
    display:none; background:none; border:1px solid var(--border);
    color:var(--text); border-radius:var(--radius); padding:8px 12px;
    font-size:1.2rem; cursor:pointer;
  }

  .search-row{padding:0 0 22px; display:flex; justify-content:center;}
  form.search-bar{
    position:relative;
    display:flex; align-items:center; gap:8px; width:100%; max-width:560px;
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    border:1px solid var(--border);
    border-radius:14px; padding:7px 7px 7px 44px;
    backdrop-filter:blur(12px);
    box-shadow:0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.8);
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  form.search-bar::before{
    content:"";
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; pointer-events:none; opacity:.55;
    background-color:var(--text);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>") center/contain no-repeat;
    transition:opacity .2s ease;
  }
  form.search-bar:focus-within{
    border-color:rgba(230,67,46,0.55);
    background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    box-shadow:0 0 0 3px rgba(230,67,46,0.14), 0 10px 30px -14px rgba(230,67,46,0.5);
  }
  form.search-bar:focus-within::before{opacity:.9;}
  form.search-bar input{
    flex:1; background:none; border:none; outline:none; min-width:0;
    color:var(--text); font-family:var(--font-body); font-size:0.95rem;
    letter-spacing:-0.01em; padding:8px 0;
  }
  form.search-bar input::placeholder{color:var(--muted); letter-spacing:-0.01em;}
  form.search-bar button{
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--crimson); color:#fff; border:none;
    height:36px; min-width:36px; padding:0 12px; border-radius:10px; cursor:pointer;
    font-size:0.95rem; line-height:1; flex-shrink:0;
    transition:background .2s ease, transform .15s ease;
  }
  form.search-bar button:hover{background:var(--crimson-dark);}
  form.search-bar button:active{transform:scale(.96);}

  .header-social{
    border-top:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; gap:18px;
    padding:12px 0; font-family:var(--font-mono); font-size:0.78rem;
    color:var(--muted); letter-spacing:1px;
  }
  .header-social a{
    width:32px; height:32px; border-radius:50%;
    border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
    font-size:0.85rem; color:var(--text); transition:.2s;
  }
  .header-social a:hover{border-color:var(--crimson); color:var(--crimson);}

  /* ===== HERO ===== */
  .hero{
    position:relative; min-height:30vh; display:flex; align-items:center;
  }
  .hero-inner{max-width:680px; padding:80px 0;}
  .eyebrow{
    font-family:var(--font-mono); color:var(--crimson); font-size:0.8rem;
    letter-spacing:2px; text-transform:uppercase; margin-bottom:14px; display:block;
  }
  .hero h1{margin-bottom:18px;}
  .hero blockquote{
    border-left:3px solid var(--crimson);
    padding:8px 0 8px 18px; margin:22px 0; color:var(--muted);
    font-style:italic; font-size:1.05rem;
  }
  .hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 26px; border-radius:999px; font-weight:600; font-size:0.95rem;
    cursor:pointer; border:1px solid transparent;
  }
  .btn-primary{background:var(--crimson); color:#fff;}
  .btn-primary:hover{background:var(--crimson-dark);}
  .btn-ghost{background:transparent; border-color:var(--border); color:var(--text);}
  .btn-ghost:hover{border-color:var(--text);}

  /* ===== TICKER ===== */
  .ticker{
    background:var(--crimson); color:#fff; overflow:hidden; white-space:nowrap;
    padding:9px 0; font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.5px;
  }
  .ticker-track{display:inline-flex; animation:scroll-left 28s linear infinite;}
  .ticker-track span{padding:0 28px;}
  @keyframes scroll-left{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
  }

  /* ===== SECTIONS ===== */
  section{padding:64px 0;}
  .section-head{
    display:flex; align-items:baseline; justify-content:space-between;
    margin-bottom:28px; gap:16px; flex-wrap:wrap;
  }
  .section-head a{font-size:0.85rem; color:var(--crimson); font-weight:600;}

  .card-row{
    display:flex; gap:18px; overflow-x:auto; padding-bottom:10px;
    scrollbar-width:thin;
  }
  .card-row::-webkit-scrollbar{height:6px;}
  .card-row::-webkit-scrollbar-thumb{background:var(--border); border-radius:4px;}
  .anime-card{
    flex:0 0 190px; background:var(--panel); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden;
  }
  .anime-card img{height:250px; width:100%; object-fit:cover;}
  .anime-card .info{padding:12px;}
  .anime-card .rank{
    font-family:var(--font-mono); color:var(--gold); font-size:0.75rem; margin-bottom:4px; display:block;
  }
  .anime-card h3{font-size:0.95rem; margin-bottom:4px;}
  .tag{
    display:inline-block; font-size:0.72rem; color:var(--violet);
    border:1px solid rgba(123,111,209,0.35); border-radius:6px; padding:2px 8px; margin-top:4px;
  }

  .popular-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px;
  }
  .popular-grid li{
    display:flex; gap:14px; background:var(--panel); border:1px solid var(--border);
    border-radius:var(--radius); padding:14px; align-items:center;
  }
  .popular-grid img{width:64px; height:88px; object-fit:cover; border-radius:6px; flex-shrink:0;}
  .popular-grid h3{font-size:0.95rem; margin-bottom:4px;}
  .popular-grid p{font-size:0.82rem; color:var(--muted);}

  table.rating-table{
    width:100%; border-collapse:collapse; background:var(--panel);
    border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  }
  table.rating-table th, table.rating-table td{
    padding:14px 16px; text-align:left; font-size:0.9rem; border-bottom:1px solid var(--border);
  }
  table.rating-table th{
    font-family:var(--font-mono); font-size:0.75rem; text-transform:uppercase;
    letter-spacing:1px; color:var(--muted);
  }
  table.rating-table tr:last-child td{border-bottom:none;}
  table.rating-table td.rank-cell{font-family:var(--font-mono); color:var(--gold); width:40px;}
  table.rating-table td.score{color:var(--gold); font-weight:600;}

  /* ===== ARTICLE ===== */
  .article-section{background:var(--panel-2);}
  .article-section .wrap{max-width:820px;}
  .article-section .section-head{
    display:block; margin-bottom:8px;
  }
  .article-section .section-head h1{margin-bottom:20px;}
  .article-section .section-head h2{margin:36px 0 14px;}
  .article-section .section-head p{
    font-size:1.075rem; line-height:1.8; color:#CFCDC6; margin-bottom:18px;
    max-width:70ch;
  }
  article{
    max-width:70ch; margin:0 auto;
    font-size:1.05rem; line-height:1.8;
  }
  article .article-meta{
    display:inline-block;
    font-family:var(--font-mono); font-size:0.72rem; color:var(--muted);
    margin-bottom:18px; letter-spacing:0.08em; text-transform:uppercase;
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
    border-radius:999px; padding:5px 12px; line-height:1;
  }
  article h2{
    margin:44px 0 14px; padding-top:8px;
  }
  article h3{
    margin:28px 0 8px; font-size:1.05rem; color:#EDEBE4;
  }
  article img.article-img{
    margin:32px auto; border-radius:var(--radius); max-width:100%;
    border:1px solid var(--border);
  }
  article blockquote{
    border-left:3px solid var(--violet); padding:4px 0 4px 22px;
    margin:32px 0; color:#BDBAC9; font-style:italic; font-size:1.06rem;
  }
  article blockquote p{margin-bottom:0; color:inherit;}
  article p{margin-bottom:20px; color:#D3D1CA;}
  article ul{
    margin:0 0 24px; padding-left:4px;
  }
  article ul li{
    position:relative; padding-left:22px; margin-bottom:10px; color:#D3D1CA;
  }
  article ul li::before{
    content:""; position:absolute; left:4px; top:0.75em;
    width:6px; height:6px; border-radius:50%; background:var(--crimson);
  }
  article ul li strong{color:var(--text); font-weight:600;}
  article em, article i{color:#C9C6BE;}
  article .read-more{
    color:var(--crimson); font-weight:600; font-size:0.9rem;
  }
  @media (max-width:600px){
    article{font-size:1rem; line-height:1.75;}
    .article-section .section-head p{font-size:1rem; line-height:1.75;}
  }

  /* ===== FOOTER ===== */
  footer{border-top:1px solid var(--border); padding:40px 0 24px;}
  .footer-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:24px;
    margin-bottom:28px;
  }
  footer h3{font-size:0.85rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:12px;}
  footer ul li{margin-bottom:8px;}
  footer a{font-size:0.88rem; color:var(--text);}
  footer a:hover{color:var(--crimson);}
  .footer-bottom{
    border-top:1px solid var(--border); padding-top:18px;
    font-size:0.8rem; color:var(--muted); text-align:center;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width:860px){
    nav.main-nav{
      position:fixed; inset:0 0 0 auto; height:100vh; width:min(78vw,320px);
      background:var(--panel); flex-direction:column; align-items:flex-start;
      padding:90px 28px; gap:22px; transform:translateX(100%);
      transition:transform .3s ease; border-left:1px solid var(--border);
    }
    nav.main-nav.open{transform:translateX(0);}
    .menu-toggle{display:block;}
    .header-top{position:relative;}
  }
  @media (max-width:600px){
    .header-top{flex-direction:column; text-align:center;}
    .brand{flex-direction:column; justify-content:center; width:100%;}
    .brand img.logo{width:110px; height:110px; margin:0 auto;}
    .hero-inner{padding:56px 0; text-align:left;}
    .anime-card{flex:0 0 150px;}
    .anime-card img{height:200px;}
  }