:root{
    --bg:#0b0e17; --panel:#0f1424; --text:#e7eaf3; --muted:#9aa3b2;
    --accent:#7c5cff; --accent-2:#00d4ff; --card:#121935; --ring:#a996ff; --shadow: rgba(0,0,0,.35);
  }
  [data-theme="light"]{
    --bg:#f7f8fc; --panel:#ffffff; --text:#101424; --muted:#596077;
    --card:#f9faff; --ring:#7c5cff; --shadow: rgba(0,0,0,.18);
  }
  *{box-sizing:border-box} html,body{height:100%}
  body{
    margin:0;
    background:
      radial-gradient(1200px 800px at 90% -10%, rgba(124,92,255,.25), transparent 60%),
      radial-gradient(900px 600px at -10% 110%, rgba(0,212,255,.18), transparent 60%),
      var(--bg);
    color:var(--text);
    font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    transition: background .4s ease, color .25s ease;
  }
  .container{max-width:1100px;margin:0 auto;padding:28px}
  header{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
  .logo{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;box-shadow:0 8px 24px rgba(124,92,255,.35)}
  .logo svg{width:18px;height:18px;fill:#fff}
  .btn{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none;padding:10px 14px;border-radius:12px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(124,92,255,.35)}
  .btn:hover{transform:translateY(-1px)}
  .ghost{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--text)}
  .muted{color:var(--muted)}

ol.custom {
    list-style: decimal;      /* or upper-roman, lower-alpha, etc. */
    font-size: 18px;
    color: #444;
    padding-left: 20px;
  }
  ol.custom li {
      color: var(--muted);
    margin: 6px 0;
  }
  
  
  


  /* Lamp toggle */
  .toggle{display:flex;align-items:center;gap:10px}
  .lamp-btn{position:relative;width:44px;height:44px;border:1px solid rgba(255,255,255,.12);background:var(--panel);border-radius:12px;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 24px var(--shadow)}
  .lamp{position:relative;width:24px;height:24px}
  .lamp:before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:-10px;width:2px;height:10px;background:currentColor;opacity:.6}
  .shade{position:absolute;left:50%;top:2px;transform:translateX(-50%);width:20px;height:9px;background:currentColor;border-radius:6px 6px 2px 2px}
  .bulb{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:#ffe08a}
  .lamp-btn.on::after{content:"";position:absolute;width:130px;height:110px;left:50%;top:48px;transform:translateX(-50%);background:radial-gradient(70% 100% at 50% 0%, rgba(255,230,140,.6), rgba(255,230,140,.12) 70%, transparent 75%);opacity:1;pointer-events:none}

  .hero{margin:34px 0 18px}
  .hero h1{margin:0 0 8px;font-size:clamp(26px,4.5vw,36px)}
  .hero p{margin:0;color:var(--muted);max-width:68ch}
  
  /* eye button on slides */
.eye-btn{
  position:absolute; right:12px; top:12px; width:38px; height:38px;
  border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18);
  transition:transform .15s ease, background .2s ease
}
.eye-btn:hover{ transform:scale(1.06); background:rgba(0,0,0,.5) }
.eye-btn svg{ width:20px; height:20px; fill:#fff; opacity:.95 }

/* modal / lightbox */


/* smoother backdrop fade */
.modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:50; pointer-events:none; }
.modal .backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.72);
  opacity:0; transition: opacity .35s ease;
  backdrop-filter: blur(0px);
}
.modal.show{ pointer-events:auto; }
.modal.show .backdrop{ opacity:1; }

/* zoom-from-thumb animation using CSS vars --ox/--oy */
.modal .panel{
  position:relative; z-index:1; width:min(96vw,1100px); max-height:92vh;
  background:var(--panel); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.5); overflow:hidden;

  /* start slightly scaled + offset from clicked image center */
  transform: translate(var(--ox,0), var(--oy,0)) scale(.88);
  opacity:0;
  transition: transform .35s cubic-bezier(.2,.65,.2,1), opacity .35s ease;
}
.modal.show .panel{
  transform: translate(0,0) scale(1);
  opacity:1;
}

/* subtle content fade-in */
.modal img{ transition: opacity .35s ease; opacity:.85; }
.modal.show img{ opacity:1; }

/* optional: reduce motion */
@media (prefers-reduced-motion: reduce){
  .modal .backdrop, .modal .panel, .modal img { transition: none !important; }
  .modal .panel { transform:none !important; opacity:1 !important; }
}



.modal .img-wrap{ display:grid; place-items:center; background:#0b0f18; }
.modal img{ max-width:100%; max-height:72vh; object-fit:contain; }
.modal .cap{ padding:12px 14px; color:var(--text); background:rgba(0,0,0,.2) }
.modal .cap h4{ margin:0 0 4px; font-size:16px }
.modal .cap p{ margin:0; color:var(--muted); font-size:14px }
.modal .close{
  position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18); cursor:pointer;
}
.modal .close:hover{ background:rgba(0,0,0,.5) }
.modal .close svg{ width:18px; height:18px; fill:#fff }


  /* Slider */
  .slider{position:relative;border-radius:18px;background:var(--card);border:1px solid rgba(255,255,255,.08);overflow:hidden;box-shadow:0 18px 38px var(--shadow)}
  .slides{display:flex;transition:transform .5s ease}
  .slide{min-width:100%;position:relative}
  .slide img{display:block;width:100%;height:460px;object-fit:cover;background:#0b0f18}
  .caption{position:absolute;left:16px;bottom:16px;background:rgba(0,0,0,.45);backdrop-filter: blur(4px);color:#fff;padding:10px 12px;border-radius:10px;max-width:90%}
  .controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 6px;pointer-events:none}
  .arrow{pointer-events:auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);cursor:pointer;transition:transform .15s ease}
  .arrow:hover{transform:scale(1.06)}
  .dots{display:flex;gap:8px;justify-content:center;padding:12px;background:var(--panel)}
  .dot{width:8px;height:8px;border-radius:50%;background:#6e79a4;opacity:.6;cursor:pointer}
  .dot.active{background:#cfd7ff;opacity:1;transform:scale(1.2)}
  .info{margin-top:16px;display:grid;gap:10px}
  @media (max-width:720px){ .slide img{height:320px} }