@import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@600;700;800&family=Hind+Siliguri:wght@400;500;600;700&display=swap');

:root {
  --shella7ed5-ink: #f4f5e9;
  --shella7ed5-muted: #b9c6ba;
  --shella7ed5-bg: #262626;
  --shella7ed5-deep: #102615;
  --shella7ed5-green: #32cd32;
  --shella7ed5-mint: #66cdaa;
  --shella7ed5-lilac: #cc99ff;
  --shella7ed5-line: rgba(102, 205, 170, .32);
  --shella7ed5-panel: rgba(0, 100, 0, .2);
  --shella7ed5-width: 740px;
  --shella7ed5-nav-height: 76px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--shella7ed5-bg); scroll-behavior: smooth; }
body { margin: 0; color: var(--shella7ed5-ink); background: radial-gradient(circle at 90% 0%, rgba(50, 205, 50, .15), transparent 34rem), linear-gradient(145deg, #262626 0%, #18231b 56%, #102615 100%); font: 500 16px/1.62 'Hind Siliguri', sans-serif; }
button, a { font: inherit; }
a { color: inherit; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--shella7ed5-lilac); outline-offset: 3px; }

.shella7ed5-shell { min-height: 100vh; }
.shella7ed5-top { position: fixed; z-index: 20; top: 0; left: 50%; width: min(100%, var(--shella7ed5-width)); transform: translateX(-50%); padding: 12px 14px 10px; background: rgba(38, 38, 38, .96); border-bottom: 1px solid var(--shella7ed5-line); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.shella7ed5-brandrow, .shella7ed5-actrow { display: flex; align-items: center; }
.shella7ed5-brandrow { justify-content: space-between; }
.shella7ed5-brand { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; color: var(--shella7ed5-ink); text-decoration: none; }
.shella7ed5-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 10px; }
.shella7ed5-brandname { font: 800 25px/1 'Baloo Da 2', sans-serif; letter-spacing: .03em; }
.shella7ed5-actrow { position: absolute; top: 17px; right: 61px; gap: 6px; }
.shella7ed5-btn, .shella7ed5-mini, .shella7ed5-xf-promo { min-height: 44px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.shella7ed5-btn { padding: 8px 13px; border-radius: 8px; font-weight: 700; }
.shella7ed5-btn:hover, .shella7ed5-mini:hover, .shella7ed5-xf-promo:hover, .shella7ed5-tile:hover { transform: translateY(-2px); }
.shella7ed5-btn-primary { color: #102615; background: var(--shella7ed5-green); }
.shella7ed5-btn-ghost { color: var(--shella7ed5-mint); background: transparent; border-color: var(--shella7ed5-mint); }
.shella7ed5-menubtn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--shella7ed5-line); border-radius: 7px; background: transparent; cursor: pointer; }
.shella7ed5-menubars, .shella7ed5-menubars i { display: block; width: 20px; }
.shella7ed5-menubars i { height: 2px; margin: 4px 0; background: var(--shella7ed5-mint); transition: transform .2s ease; }
.shella7ed5-menu { display: none; max-height: calc(100vh - 82px); overflow-y: auto; padding: 10px 0 3px; }
.shella7ed5-menu.is-open { display: block; animation: shella7ed5-drop .22s ease-out; }
.shella7ed5-menu-cap { margin: 11px 4px 4px; color: var(--shella7ed5-lilac); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.shella7ed5-menu-link { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 7px 5px; border-bottom: 1px solid rgba(102,205,170,.12); color: var(--shella7ed5-ink); text-decoration: none; }
.shella7ed5-menu-link:hover { color: var(--shella7ed5-green); }
.shella7ed5-menu-cta { display: flex; gap: 8px; padding-top: 12px; }

.shella7ed5-main { width: min(100%, var(--shella7ed5-width)); margin: 0 auto; padding: calc(var(--shella7ed5-nav-height) + 16px) 14px 118px; }
.shella7ed5-carousel { position: relative; overflow: hidden; margin: 0 0 16px; border: 1px solid var(--shella7ed5-line); background: #0a160c; }
.shella7ed5-track { position: relative; min-height: 170px; }
.shella7ed5-slide { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 170px; padding: 0; border: 0; opacity: 0; background: #0a160c; cursor: pointer; transition: opacity .45s ease; }
.shella7ed5-slide.is-on { position: relative; opacity: 1; z-index: 1; }
.shella7ed5-slide img { display: block; width: 100%; height: 190px; object-fit: cover; opacity: .75; }
.shella7ed5-slidecap { position: absolute; right: 10px; bottom: 10px; left: 10px; padding: 8px 10px; color: #fff; background: rgba(16,38,21,.84); border-left: 3px solid var(--shella7ed5-green); font-weight: 700; text-align: left; }
.shella7ed5-dots { display: flex; justify-content: center; gap: 10px; padding: 9px; background: #0a160c; }
.shella7ed5-dot { width: 12px; height: 12px; padding: 0; border: 1px solid var(--shella7ed5-mint); border-radius: 50%; background: transparent; cursor: pointer; }
.shella7ed5-dot.is-on { background: var(--shella7ed5-green); border-color: var(--shella7ed5-green); }

.shella7ed5-hero, .shella7ed5-sec, .shella7ed5-xfoot { margin: 18px 0; padding: 20px 16px; border: 1px solid var(--shella7ed5-line); background: linear-gradient(135deg, rgba(0,100,0,.25), rgba(16,38,21,.52)); }
.shella7ed5-hero { border-left: 4px solid var(--shella7ed5-green); }
.shella7ed5-h1, .shella7ed5-h2 { margin: 0 0 11px; color: #fff; font-family: 'Baloo Da 2', sans-serif; line-height: 1.2; }
.shella7ed5-h1 { font-size: clamp(25px, 7vw, 39px); }
.shella7ed5-h2 { font-size: clamp(22px, 5.4vw, 31px); }
.shella7ed5-lead, .shella7ed5-p, .shella7ed5-catintro, .shella7ed5-note { margin: 0 0 14px; color: var(--shella7ed5-muted); }
.shella7ed5-lead { color: var(--shella7ed5-ink); font-size: 17px; }
.shella7ed5-kicker, .shella7ed5-xf-cap { margin: 0 0 5px; color: var(--shella7ed5-lilac); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.shella7ed5-ctas, .shella7ed5-cta-line, .shella7ed5-catlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 15px; }
.shella7ed5-mini { padding: 7px 12px; border-radius: 6px; color: #102615; background: var(--shella7ed5-mint); font-weight: 700; }
.shella7ed5-textlink { color: var(--shella7ed5-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.shella7ed5-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 11px; border: 1px solid var(--shella7ed5-line); color: var(--shella7ed5-mint); text-decoration: none; }
.shella7ed5-chip:hover { border-color: var(--shella7ed5-green); color: var(--shella7ed5-green); }

.shella7ed5-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.shella7ed5-tile { display: flex; min-width: 0; min-height: 122px; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 5px; border: 1px solid rgba(102,205,170,.38); border-radius: 5px; background: rgba(38,38,38,.68); cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.shella7ed5-tile:hover { border-color: var(--shella7ed5-green); }
.shella7ed5-tile img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.shella7ed5-tile span { display: block; min-height: 33px; padding: 4px 1px 1px; overflow-wrap: anywhere; color: var(--shella7ed5-ink); font-size: 12px; line-height: 1.25; text-align: center; }
.shella7ed5-guard, .shella7ed5-check, .shella7ed5-win { margin: 12px 0 0; padding: 0; list-style: none; }
.shella7ed5-guard-item { display: flex; gap: 9px; padding: 10px 0; border-bottom: 1px solid rgba(102,205,170,.14); color: var(--shella7ed5-muted); }
.shella7ed5-guard-item svg { flex: 0 0 auto; color: var(--shella7ed5-green); margin-top: 3px; }
.shella7ed5-check { counter-reset: shella7ed5-check; }
.shella7ed5-check li { counter-increment: shella7ed5-check; margin: 7px 0; padding: 9px 10px 9px 38px; border-left: 2px solid var(--shella7ed5-lilac); background: rgba(38,38,38,.48); color: var(--shella7ed5-ink); }
.shella7ed5-check li::before { content: counter(shella7ed5-check, decimal-leading-zero); display: inline-block; width: 25px; margin-left: -28px; color: var(--shella7ed5-green); font-weight: 700; }
.shella7ed5-win-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid rgba(102,205,170,.16); }
.shella7ed5-win-who { display: grid; color: var(--shella7ed5-muted); }
.shella7ed5-win-who b { color: var(--shella7ed5-ink); }
.shella7ed5-win-amt { color: var(--shella7ed5-green); font-weight: 700; white-space: nowrap; }
.shella7ed5-quotes { display: grid; gap: 9px; }
.shella7ed5-quote { margin: 0; padding: 13px; border-top: 2px solid var(--shella7ed5-lilac); background: rgba(38,38,38,.5); color: var(--shella7ed5-ink); }
.shella7ed5-stars { display: flex; gap: 2px; margin-bottom: 7px; color: var(--shella7ed5-green); }
.shella7ed5-quote-by { display: block; margin-top: 7px; color: var(--shella7ed5-muted); font-size: 13px; }
.shella7ed5-qa details { border-bottom: 1px solid rgba(102,205,170,.2); }
.shella7ed5-qa summary { min-height: 44px; padding: 11px 4px; color: var(--shella7ed5-ink); cursor: pointer; font-weight: 700; }
.shella7ed5-qa details p { margin: 0 4px 12px; color: var(--shella7ed5-muted); }
.shella7ed5-xfoot { border-color: rgba(204,153,255,.36); }
.shella7ed5-xf-brand { display: flex; gap: 12px; align-items: flex-start; }
.shella7ed5-xf-brand img { flex: 0 0 auto; width: 40px; height: 40px; object-fit: contain; }
.shella7ed5-xf-brand p { margin: 0; color: var(--shella7ed5-muted); }
.shella7ed5-xf-cols, .shella7ed5-xf-promos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 8px 0 17px; }
.shella7ed5-xf-link { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px; border-bottom: 1px solid rgba(102,205,170,.18); color: var(--shella7ed5-mint); text-decoration: none; font-size: 14px; }
.shella7ed5-xf-link svg { flex: 0 0 auto; color: var(--shella7ed5-green); }
.shella7ed5-xf-promo { display: flex; align-items: center; gap: 6px; padding: 7px; border-color: rgba(102,205,170,.3); background: rgba(0,100,0,.26); color: var(--shella7ed5-ink); text-align: left; }
.shella7ed5-xf-promo svg { flex: 0 0 auto; color: var(--shella7ed5-lilac); }
.shella7ed5-xf-note { margin: 0; padding-top: 12px; border-top: 1px solid rgba(204,153,255,.3); color: var(--shella7ed5-muted); font-size: 13px; }
.shella7ed5-copy { padding: 15px 4px; color: var(--shella7ed5-muted); font-size: 13px; text-align: center; }
.shella7ed5-copy p { margin: 0; }
.shella7ed5-bnav { position: fixed; z-index: 19; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, var(--shella7ed5-width)); margin: auto; padding: 7px max(8px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)); border: 1px solid var(--shella7ed5-line); background: rgba(38,38,38,.97); box-shadow: 0 -10px 28px rgba(0,0,0,.24); }
.shella7ed5-bnav-item { display: flex; min-width: 0; min-height: 52px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px; border: 0; background: transparent; color: var(--shella7ed5-muted); text-decoration: none; cursor: pointer; font-size: 11px; }
.shella7ed5-bnav-item svg { color: var(--shella7ed5-mint); }
.shella7ed5-bnav-item.is-here, .shella7ed5-bnav-item:hover { color: var(--shella7ed5-green); }
.shella7ed5-bnav-item.is-here svg, .shella7ed5-bnav-item:hover svg { color: currentColor; }
.shella7ed5-rise { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
.shella7ed5-rise.is-visible { opacity: 1; transform: none; }
@keyframes shella7ed5-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (min-width: 431px) { .shella7ed5-main { padding-right: 18px; padding-left: 18px; } .shella7ed5-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 370px) { .shella7ed5-actrow { right: 57px; } .shella7ed5-actrow .shella7ed5-btn { padding-right: 9px; padding-left: 9px; font-size: 14px; } .shella7ed5-brandname { font-size: 23px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } .shella7ed5-rise { opacity: 1; transform: none; } }
