:root{
      --bg0:#0b0b10;
      --bg1:#0f0f15;
      --card: rgba(18,18,24,.72);
      --card2: rgba(18,18,24,.55);
      --stroke: rgba(255,255,255,.08);
      --pink:#F53B6A;
      --pink2:#ff5c88;
      --text:#ffffff;
      --muted: rgba(255,255,255,.72);
      --muted2: rgba(255,255,255,.55);
      --shadowPink: 0 0 18px rgba(245,59,106,.35), 0 0 42px rgba(245,59,106,.18);
      --shadowCard: 0 18px 60px rgba(0,0,0,.55);
      --radius: 18px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; scroll-behavior:smooth; }

    body{
      margin:0;
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
      background:
        radial-gradient(1200px 800px at 15% 10%, rgba(245,59,106,.18), transparent 55%),
        radial-gradient(900px 700px at 80% 30%, rgba(153,71,255,.16), transparent 55%),
        radial-gradient(900px 900px at 35% 100%, rgba(245,59,106,.10), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow-x:hidden;
    }

    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
      background-size:22px 22px;
      opacity:.14;
      mask-image: radial-gradient(2400px 1800px at 50% 10%, black 96%, transparent 100%);
    }

    .top-accent{
      position:fixed;
      left:0;
      top:0;
      height:3px;
      width:100%;
      background: linear-gradient(90deg, transparent, rgba(245,59,106,.9), transparent);
      opacity:.75;
      z-index:50;
    }

    .wrap{
      min-height:100%;
      display:flex;
      flex-direction:column;
    }

    header{
      position:sticky;
      top:0;
      z-index:40;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(10,10,14,.75), rgba(10,10,14,.35));
      border-bottom:1px solid rgba(255,255,255,.06);
    }

    .nav{
      max-width:1100px;
      margin:0 auto;
      padding:14px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      text-decoration:none;
      color:var(--text);
      user-select:none;
    }

    .logo{
      width:38px;
      height:38px;
      border-radius:10px;
      background-image:url("/favicon.png");
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
      background-color:rgba(245,59,106,.2);
      box-shadow:var(--shadowPink);
      border:1px solid rgba(255,255,255,.10);
    }

    .brand-title{
      display:flex;
      flex-direction:column;
      line-height:1.05;
    }

    .brand-title b{
      letter-spacing:.2px;
      font-size:14px;
    }

    .brand-title span{
      font-size:12px;
      color:var(--muted2);
    }

    .navlinks{
      display:flex;
      gap:10px;
      flex-wrap:nowrap;
      justify-content:flex-end;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }

    .navlinks a{
      color:var(--muted);
      text-decoration:none;
      font-weight:600;
      font-size:13px;
      padding:9px 12px;
      border-radius:999px;
      border:1px solid transparent;
      transition:.18s;
      white-space:nowrap;
    }

    .navlinks a:hover,
    .navlinks a.active{
      color:var(--text);
      border-color:rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
    }

    main{
      max-width:1100px;
      margin:0 auto;
      padding:40px 18px 34px;
      width:100%;
      flex:1;
      display:grid;
      grid-template-columns:minmax(0, 1fr) 320px;
      gap:22px;
      align-items:start;
    }

    .hero,
    .panel{
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
        radial-gradient(900px 420px at 10% 0%, rgba(245,59,106,.20), transparent 55%),
        radial-gradient(900px 420px at 90% 20%, rgba(153,71,255,.14), transparent 55%),
        rgba(15,15,20,.65);
      box-shadow:var(--shadowCard);
      overflow:hidden;
      position:relative;
    }

    .hero:before,
    .panel:before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(0deg, rgba(15,15,15,.92) 0%, rgba(15,15,15,.55) 100%);
      opacity:.55;
      pointer-events:none;
    }

    .hero-inner,
    .panel-inner{
      position:relative;
      padding:28px 24px;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(0,0,0,.18);
      color:var(--muted);
      font-size:13px;
      margin-bottom:16px;
    }

    .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--pink);
      box-shadow:var(--shadowPink);
    }

    .title{
      margin:0;
      font-family:'Bebas Neue', sans-serif;
      font-size:clamp(48px, 7vw, 76px);
      letter-spacing:3px;
      line-height:.92;
      transform:skewX(-8deg);
      display:inline-block;
    }

    .title .pink{
      color:var(--pink);
      text-shadow:var(--shadowPink);
    }

    .subtitle{
      margin:14px 0 0;
      color:var(--muted);
      font-size:clamp(16px, 2vw, 20px);
      max-width:55ch;
      line-height:1.4;
    }

    .quick-links{
      margin-top:20px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .quick-links a{
      text-decoration:none;
      color:var(--text);
      padding:10px 14px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      font-weight:800;
      transition:.18s;
      font-size:14px;
    }

    .quick-links a:hover{
      transform:translateY(-1px);
      border-color:rgba(245,59,106,.35);
      background:rgba(245,59,106,.10);
      box-shadow:var(--shadowPink);
    }

    .content{
      display:grid;
      gap:18px;
      margin-top:20px;
    }

    .rule-section{
      border-radius:16px;
      border:1px solid var(--stroke);
      background:var(--card);
      box-shadow:0 12px 40px rgba(0,0,0,.35);
      overflow:hidden;
    }

    .rule-head{
      padding:16px 18px;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
    }

    .rule-head h2{
      margin:0;
      font-size:20px;
      letter-spacing:.2px;
    }

    .rule-body{
      padding:8px 18px 18px;
    }

    .rule-item{
      padding:14px 0;
      border-bottom:1px solid rgba(255,255,255,.06);
    }

    .rule-item:last-child{
      border-bottom:none;
      padding-bottom:0;
    }

    .rule-item h3{
      margin:0 0 8px;
      font-size:15px;
      color:#fff;
      line-height:1.45;
    }

    .rule-item p,
    .rule-item li{
      margin:0;
      color:var(--muted);
      font-size:14px;
      line-height:1.6;
    }

    .rule-item ul{
      margin:10px 0 0;
      padding-left:20px;
      display:grid;
      gap:8px;
    }

    .punish{
      display:inline-block;
      margin-top:8px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(245,59,106,.30);
      background:rgba(245,59,106,.10);
      color:#ffd7e1;
      font-size:12px;
      font-weight:800;
    }

    .side{
      display:flex;
      flex-direction:column;
      gap:16px;
      position:sticky;
      top:86px;
    }

    .panel h2{
      position:relative;
      margin:0 0 12px;
      font-size:16px;
      letter-spacing:.2px;
    }

    .panel p,
    .panel li{
      color:var(--muted);
      font-size:14px;
      line-height:1.55;
    }

    .panel ul{
      margin:0;
      padding-left:18px;
      display:grid;
      gap:8px;
    }

    .small-note{
      color:var(--muted2);
      font-size:12.5px;
      line-height:1.5;
    }

    .btn{
      appearance:none;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      color:var(--text);
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:13px 16px;
      border-radius:14px;
      font-weight:800;
      letter-spacing:.2px;
      cursor:pointer;
      transition:.18s;
      user-select:none;
      width:100%;
      text-align:center;
    }

    .btn:hover{
      transform:translateY(-1px);
      border-color:rgba(255,255,255,.18);
      background:rgba(255,255,255,.06);
    }

    .btn-primary{
      background: linear-gradient(135deg, rgba(245,59,106,.95), rgba(245,59,106,.65));
      border-color: rgba(245,59,106,.55);
      box-shadow: var(--shadowPink);
    }

    footer{
      max-width:1100px;
      margin:0 auto;
      padding:18px 18px 34px;
      color:var(--muted2);
    }

    .footerline{
      border-top:3px dashed rgba(255,255,255,.10);
      padding-top:16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }

    .social{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

    .social a{
      width:40px;
      height:40px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
      color:var(--text);
      text-decoration:none;
      transition:.18s;
      font-weight:900;
    }

    .social a:hover{
      border-color:rgba(245,59,106,.35);
      background:rgba(245,59,106,.10);
      box-shadow:var(--shadowPink);
      transform:translateY(-1px);
    }

    @media (max-width: 920px){
      main{
        grid-template-columns:1fr;
      }
      .side{
        position:relative;
        top:auto;
      }
    }

    @media (max-width: 560px){
      .hero-inner,
      .panel-inner{
        padding:22px 16px;
      }

      .rule-head{
        padding:14px 16px;
      }

      .rule-body{
        padding:6px 16px 16px;
      }

      .title{
        font-size:clamp(40px, 13vw, 60px);
      }

      .quick-links a{
        width:100%;
        justify-content:center;
      }
    }