:root{
      --bg:#f9fafb;
      --section:#e5e7eb;
      --primary:#1d4ed8;
      --text:#111827;
      --white:#ffffff;
      --soft:#eef2ff;
    }
    html,body{
      background:var(--bg);
      color:var(--text);
      font-family:'Inter',sans-serif;
      scroll-behavior:smooth;
    }
    h1,h2,h3,h4,h5{
      font-family:'Cormorant Garamond',serif;
      letter-spacing:.2px;
    }
    .gradient-text{
      background:linear-gradient(90deg,var(--primary),#60a5fa);
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .layout{
      display:flex;
      min-height:100vh;
    }
    .sidebar-wrap{
      width:290px;
      flex:0 0 290px;
      position:sticky;
      top:0;
      height:100vh;
      padding:24px 18px;
      background:var(--bg);
      border-right:1px solid rgba(17,24,39,.08);
    }
    .brand-box{
      background:var(--section);
      border-radius:28px;
      padding:26px 22px;
      margin-bottom:22px;
      box-shadow:0 10px 30px rgba(29,78,216,.06);
      animation:slideInLeft .8s ease;
    }
    .brand-title{
      font-size:2.4rem;
      line-height:1;
      margin:0 0 10px;
    }
    .brand-sub{
      margin:0;
      font-size:.98rem;
      color:rgba(17,24,39,.78);
    }
    .sidebar-card{
      background:var(--white);
      border-radius:24px;
      padding:14px;
      box-shadow:0 8px 24px rgba(17,24,39,.06);
      animation:slideInLeft 1s ease;
    }
    .collection{
      border:none;
      margin:0;
      border-radius:18px;
      overflow:hidden;
    }
    .collection .collection-item{
      border:none;
      background:transparent;
      padding:0;
      margin-bottom:10px;
    }
    .menu-link{
      display:flex;
      align-items:center;
      gap:12px;
      padding:14px 16px;
      color:var(--text);
      border-radius:999px;
      font-weight:600;
      transition:.3s ease;
    }
    .menu-link:hover,
    .menu-link.active{
      background:var(--section);
      color:var(--primary);
      transform:translateX(6px);
    }
    .menu-link i{
      color:var(--primary);
      font-size:20px;
    }
    .sidebar-note{
      margin-top:18px;
      background:var(--section);
      border-radius:22px;
      padding:18px;
      font-size:.95rem;
      line-height:1.7;
      animation:slideInLeft 1.2s ease;
    }
    main{
      flex:1;
      padding:24px;
    }
    .section-shell{
      background:var(--section);
      border-radius:34px;
      padding:24px;
      margin-bottom:26px;
      animation:slideUp .8s ease;
    }
    .hero-shell{
      display:flex;
      gap:22px;
      align-items:stretch;
    }
    .hero-main{
      flex:1 1 70%;
      background:var(--white);
      border-radius:30px;
      overflow:hidden;
      box-shadow:0 12px 34px rgba(17,24,39,.07);
    }
    .slider,
    .slider .slides{
      height:540px !important;
      border-radius:30px;
    }
    .slider .slides li img{
      object-fit:cover;
      filter:brightness(.9);
    }
    .slider .slides li .caption{
      top:12%;
      left:8%;
      width:56%;
      background:rgba(249,250,251,.78);
      border-radius:28px;
      padding:30px;
      color:var(--text);
      backdrop-filter:blur(4px);
    }
    .slider .indicators{
      bottom:18px;
      z-index:3;
    }
    .slider .indicators .indicator-item{
      background-color:rgba(29,78,216,.28);
      width:12px;
      height:12px;
      margin:0 7px;
    }
    .slider .indicators .indicator-item.active{
      background-color:var(--primary);
    }
    .hero-side{
      flex:1 1 30%;
      display:flex;
      flex-direction:column;
      gap:20px;
    }
    .floating-panel{
      background:var(--white);
      border-radius:28px;
      padding:24px;
      box-shadow:0 10px 28px rgba(17,24,39,.06);
      flex:1;
    }
    .pill-btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:12px 22px;
      border-radius:999px;
      background:var(--primary);
      color:#fff;
      font-weight:600;
      transition:.3s ease;
    }
    .pill-btn:hover{
      background:#2563eb;
      transform:translateY(-2px);
    }
    .pill-btn.secondary{
      background:transparent;
      color:var(--primary);
      border:1px solid rgba(29,78,216,.2);
    }
    .split-about{
      display:flex;
      gap:22px;
      align-items:stretch;
      flex-wrap:wrap;
    }
    .about-text{
      flex:1 1 55%;
      background:var(--white);
      border-radius:30px;
      padding:34px;
      box-shadow:0 10px 26px rgba(17,24,39,.05);
    }
    .about-rail{
      flex:1 1 40%;
      display:flex;
      flex-direction:column;
      gap:20px;
    }
    .mini-card{
      background:var(--white);
      border-radius:26px;
      padding:22px;
      box-shadow:0 10px 26px rgba(17,24,39,.05);
    }
    .section-title{
      margin-top:0;
      margin-bottom:12px;
      font-size:3rem;
      line-height:1;
    }
    .content-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:20px;
      margin-bottom:24px;
      flex-wrap:wrap;
    }
    .content-head p{
      max-width:700px;
      margin:0;
      color:rgba(17,24,39,.75);
      font-size:1.03rem;
      line-height:1.8;
    }
    .masonry{
      column-count:3;
      column-gap:22px;
    }
    .masonry-item{
      break-inside:avoid;
      margin-bottom:22px;
      animation:slideUp .9s ease;
    }
    .post-card{
      background:var(--white);
      border-radius:28px;
      padding:16px;
      box-shadow:0 12px 28px rgba(17,24,39,.06);
      transition:.35s ease;
    }
    .post-card:hover{
      transform:translateY(-6px);
      box-shadow:0 18px 34px rgba(29,78,216,.09);
    }
    .polaroid{
      background:#fff;
      padding:10px 10px 18px;
      border-radius:18px;
      transform:rotate(-1.3deg);
      box-shadow:0 8px 18px rgba(17,24,39,.08);
      margin-bottom:18px;
    }
    .masonry-item:nth-child(even) .polaroid{
      transform:rotate(1.2deg);
    }
    .masonry-item:nth-child(3n) .polaroid{
      transform:rotate(-.6deg);
    }
    .polaroid img{
      width:100%;
      border-radius:12px;
      display:block;
    }
    .tag-chip{
      display:inline-block;
      font-size:.82rem;
      font-weight:700;
      color:var(--primary);
      background:rgba(29,78,216,.08);
      padding:8px 14px;
      border-radius:999px;
      margin-bottom:12px;
    }
    .post-title{
      font-size:2rem;
      line-height:1.05;
      margin:0 0 12px;
    }
    .post-excerpt{
      color:rgba(17,24,39,.78);
      line-height:1.75;
      margin-bottom:18px;
    }
    .footer-simple{
      background:var(--section);
      border-radius:30px;
      padding:26px 28px;
    }
    .footer-flex{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
      flex-wrap:wrap;
    }
    .footer-links{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }
    .footer-links a{
      color:var(--text);
      font-weight:600;
      padding:10px 16px;
      border-radius:999px;
      background:rgba(255,255,255,.6);
    }
    .mobile-top{
      display:none;
      margin-bottom:18px;
    }
    .sidenav{
      background:var(--bg);
    }
    .sidenav .user-view{
      background:var(--section);
      margin-bottom:10px;
    }
    .sidenav li>a{
      color:var(--text);
      font-weight:600;
    }
    .sidenav li>a>i.material-icons{
      color:var(--primary);
    }
    @keyframes slideUp{
      from{opacity:0;transform:translateY(24px)}
      to{opacity:1;transform:translateY(0)}
    }
    @keyframes slideInLeft{
      from{opacity:0;transform:translateX(-26px)}
      to{opacity:1;transform:translateX(0)}
    }
    @media (max-width: 1200px){
      .masonry{column-count:2;}
      .hero-shell{flex-direction:column;}
      .hero-side{flex-direction:row;}
    }
    @media (max-width: 992px){
      .layout{display:block;}
      .sidebar-wrap{display:none;}
      .mobile-top{display:block;}
      main{padding:16px;}
      .slider, .slider .slides{height:500px !important;}
      .slider .slides li .caption{width:78%; top:10%; left:6%;}
      .hero-side{flex-direction:column;}
      .section-title{font-size:2.5rem;}
    }
    @media (max-width: 700px){
      .masonry{column-count:1;}
      .slider, .slider .slides{height:480px !important;}
      .slider .slides li .caption{
        width:88%;
        padding:22px;
      }
      .section-shell{padding:16px;border-radius:24px;}
      .about-text,.mini-card,.floating-panel,.hero-main{border-radius:22px;}
      .post-title{font-size:1.75rem;}
      .section-title{font-size:2.15rem;}
    }