:root{
      --bg:#07101e;
      --bg2:#0b1627;
      --panel:#0d1728cc;
      --panel-strong:#101d31;
      --line:rgba(255,255,255,.08);
      --line-soft:rgba(255,255,255,.05);
      --text:#edf4ff;

      --soft:#c8d7ea;
      --accent:#43d6b5;
      --accent-2:#6bb7ff;
      --accent-3:#f0b35a;
      --shadow:0 30px 80px rgba(0,0,0,.35);
      --radius:24px;
      --radius-sm:16px;
      --max:1880px;
    }

    
body {
	font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
	font-weight:300;
	color: var(--color-primary);
    display: block;
    line-height:1.6em;
}

    a{
      color:inherit;
      text-decoration:none;
    }

    .page-shell{
      width:min(var(--max), calc(100% - 48px));
      margin:28px auto 60px;
     
    }



    .hero{
      position:relative;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:32px;
      background:
        linear-gradient(135deg, rgba(15,25,42,.95), rgba(9,18,31,.88)),
        radial-gradient(circle at 85% 20%, rgba(107,183,255,.12), transparent 30%);
      box-shadow:var(--shadow);
      min-height:520px;
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:24px;
      padding:34px;
      isolation:isolate;
    }

    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 18% 20%, rgba(67,214,181,.08), transparent 25%),
        radial-gradient(circle at 82% 75%, rgba(240,179,90,.09), transparent 24%);
      pointer-events:none;
      z-index:-1;
    }

    .hero-left{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-width:0;
    }

     .hero-left h2{
          font-size: 34px;
    letter-spacing: .2px;
    }




    .hero-tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:54px;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      color:var(--soft);
      font-size:.8rem;
      backdrop-filter: blur(10px);
    }

    .hero h1{
      margin:0;
      font-size:clamp(2.2rem, 4.5vw, 4.5rem);
      line-height:1.02;
      letter-spacing:-.03em;
      max-width:760px;
    }

    .hero-lead{
      margin:18px 0 0;
      max-width:760px;
      color: #d6d7d8;
      font-size:1.05rem;
      line-height:1.75;
    }

    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin-top:30px;
    }

    .btn{
      height:48px;
      padding:0 18px;
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:var(--text);
      display:inline-flex;
      align-items:center;
      gap:10px;
      cursor:pointer;
      transition:.25s ease;
      font-weight:600;
    }

    .btn:hover{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.16);
      background:rgba(255,255,255,.07);
    }

    .btn-primary{
      background:linear-gradient(135deg, rgba(67,214,181,.22), rgba(67,214,181,.10));
      border-color:rgba(67,214,181,.35);
      color:#eafff9;
      box-shadow:0 14px 40px rgba(67,214,181,.12);
    }

    .hero-mini-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
      margin-top:74px;
      max-width:880px;
    }

    .mini-card{
      border:1px solid var(--line-soft);
      background:rgba(255,255,255,.03);
      border-radius:18px;
      padding:16px 16px 15px;
      min-height:100px;
    }

    .mini-card .label{
      color:var(--muted);
      font-size:.76rem;
      text-transform:uppercase;
      letter-spacing:.05em;
      margin-bottom:8px;
    }

    .mini-card strong{
      display:block;
      font-size:1.02rem;
      margin-bottom:6px;
    }

    .mini-card p{
      margin:0;
      color:#b7c6da;
      font-size:.9rem;
      line-height:1.5;
    }

    .hero-right{
      position:relative;
      display:flex;
      align-items:stretch;
      min-width:0;
    }


    .worlds{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:18px;
    }

    .info-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:18px;
    }

    .panel{
      border-radius:24px;
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(14,23,39,.92), rgba(10,17,30,.9));
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .panel-inner{
      padding:22px;
    }

    .panel h3{
      margin:0 0 12px;
      font-size:1.15rem;
      letter-spacing:-.02em;
    }

    .panel p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
    }

    .routes{
      display:grid;
      gap:12px;
      margin-top:18px;
    }

    .route{
      display:grid;
      grid-template-columns:auto 1fr auto;
      gap:14px;
      align-items:center;
      padding:14px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(255,255,255,.03);
    }

    .route i{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      font-size:1.15rem;
      color:#f2f7ff;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
    }

    .route strong{
      display:block;
      margin-bottom:4px;
      font-size:.98rem;
    }

    .route span{
      color:var(--muted);
      font-size:.9rem;
      line-height:1.5;
    }

    .route em{
      color:#cfe0f6;
      font-style:normal;
      font-size:.82rem;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.07);
      background:rgba(255,255,255,.03);
    }

    .mood-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
      margin-top:14px;
    }

    .mood{
      min-height:120px;
      border-radius:18px;
      padding:16px;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(255,255,255,.03);
    }

    .mood strong{
      display:block;
      margin-bottom:8px;
      font-size:1rem;
    }

    .mood p{
      font-size:.92rem;
      line-height:1.6;
    }

    .footer-note{
      margin-top:24px;
      padding:18px 20px;
      border-radius:20px;
      border:1px dashed rgba(255,255,255,.12);
      color:var(--muted);
      background:rgba(255,255,255,.025);
      line-height:1.7;
    }

    @keyframes spin{
      from{ transform:rotate(0deg); }
      to{ transform:rotate(360deg); }
    }

    @media (max-width: 1200px){
      .hero,
      .info-grid{
        grid-template-columns:1fr;
      }

      .hero{
        min-height:auto;
      }
    }

    @media (max-width: 920px){
      .worlds{
        grid-template-columns:1fr;
      }

      .hero-mini-grid,
      .scene-bottom{
        grid-template-columns:1fr;
      }

      .world-bottom{
        grid-template-columns:1fr;
        align-items:start;
      }

      .mood-grid{
        grid-template-columns:1fr;
      }
    }

    @media (max-width: 640px){
      .page-shell{
        width:min(var(--max), calc(100% - 24px));
        margin:16px auto 40px;
      }

      .hero{
        padding:20px;
        border-radius:24px;
      }

      .world-card{
        min-height:auto;
      }

      .world-main h3{
        font-size:1.6rem;
      }

      .hero-actions{
        flex-direction:column;
        align-items:stretch;
      }

      .btn,
      .world-link{
        justify-content:center;
      }
    }