
/* v0.4.6 — exact original KAGE Desktop icon files, refreshed V2 screenshots, and a consistent sculpted surface system. */
:root{
  --kage-edge:#45454e;
  --kage-edge-low:#17171c;
  --kage-shadow:#020203;
  --kage-highlight:rgba(255,255,255,.15);
}
.topbar{border-bottom:0;box-shadow:0 12px 28px rgba(0,0,0,.26)}
.topbar::after{content:"";position:absolute;left:50%;bottom:0;width:min(210px,24vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(220,220,230,.18),transparent);pointer-events:none}
.hero-trailing{position:relative;border:0;background:none}
.hero-trailing::before,.hero-trailing::after{content:"";position:absolute;left:50%;width:74px;height:2px;transform:translateX(-50%);border-radius:9px;background:linear-gradient(90deg,transparent,rgba(230,230,238,.25),transparent);box-shadow:0 0 12px rgba(220,220,235,.07);pointer-events:none}
.hero-trailing::before{top:0}.hero-trailing::after{bottom:0}

/* One shared beveled material for the site's major panels and information cards. */
:is(.screenshot-gallery,.access-main,.purchase-panel,.download-inner,.community-inner,.subpage-panel,.legal-page,.feature-item){
  position:relative;
  border:1px solid var(--kage-edge);
  border-bottom:2px solid var(--kage-shadow);
  border-radius:12px;
  background:
    radial-gradient(ellipse at 82% 0%,rgba(255,255,255,.085),transparent 42%),
    linear-gradient(155deg,#24242a 0%,#17171b 25%,#101014 64%,#09090c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.43),
    0 5px 0 #030304,
    0 17px 36px rgba(0,0,0,.38);
  transition:transform .24s var(--ease),border-color .24s,box-shadow .24s,filter .24s;
}
:is(.access-main,.purchase-panel,.download-inner,.community-inner,.subpage-panel,.legal-page,.feature-item):hover{
  transform:translateY(-3px);
  border-color:#696971;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.21),inset 0 -2px 0 rgba(0,0,0,.4),0 7px 0 #030304,0 22px 38px rgba(0,0,0,.48),0 0 28px rgba(255,255,255,.025);
}
:is(.access-main,.purchase-panel,.download-inner,.community-inner,.subpage-panel,.legal-page,.feature-item):active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.48),0 1px 0 #030304,0 6px 14px rgba(0,0,0,.3);
}
.access-main,.purchase-panel{overflow:hidden}
.subpage-panel{padding:22px 25px;background:linear-gradient(155deg,#202025,#101014 68%,#09090b)}
.legal-page{padding:clamp(22px,4vw,42px);background:linear-gradient(155deg,#202025,#101014 68%,#09090b)}
.download-inner{border-color:#484850;border-bottom-width:2px}
.download-mark{border-right:0;padding-right:0;position:relative;display:grid;place-items:center;width:98px;height:98px;flex:0 0 98px;border-radius:13px;background:linear-gradient(180deg,#323239,#16161b 76%,#0d0d10);border:1px solid #55555e;border-bottom:2px solid #030304;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 0 #030304,0 12px 23px rgba(0,0,0,.35)}
.download-mark img{width:76px;height:76px;object-fit:contain}
.community-inner{padding:35px 30px;border:1px solid var(--kage-edge);border-bottom:2px solid var(--kage-shadow);background:radial-gradient(ellipse at 78% 10%,rgba(255,255,255,.09),transparent 39%),linear-gradient(150deg,#222228,#111115 65%,#08080b)}
.community-inner::after,.access-main::after,.purchase-panel::after,.download-inner::after,.subpage-panel::after,.legal-page::after{
  content:"";position:absolute;top:0;left:18%;width:64%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.21),transparent);pointer-events:none
}
/* Remove full-width rules; use compact metallic accents, chips and spacing instead. */
.access-header{border-bottom:0!important;position:relative;padding-bottom:17px}
.access-header::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:2px;border-radius:3px;background:linear-gradient(90deg,#e7e7eb,rgba(231,231,235,.08));box-shadow:0 0 12px rgba(255,255,255,.12)}
.purchase-divider{display:none!important}
.purchase-separator{display:flex;align-items:center;margin:18px 0 14px}
.purchase-separator span{display:inline-flex;align-items:center;min-height:25px;padding:0 10px;border:1px solid #42424a;border-bottom:2px solid #030304;border-radius:6px;background:linear-gradient(180deg,#28282e,#141418);box-shadow:inset 0 1px rgba(255,255,255,.09),0 2px 0 #030304;color:#a9a9b2;font-size:8px;font-weight:800;letter-spacing:.13em}
.price-options{gap:10px;margin:23px 0 12px}
.price-options .price-option{min-width:0;min-height:100px;padding:15px 13px;display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px!important;border:1px solid #4a4a53;border-bottom:2px solid #030304;border-radius:9px;background:linear-gradient(155deg,#292930,#151519 72%,#0d0d10);box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 -2px rgba(0,0,0,.4),0 3px 0 #030304,0 10px 18px rgba(0,0,0,.28)}
.price-or{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#44444c,#19191e 70%);border:1px solid #484850;box-shadow:inset 0 1px rgba(255,255,255,.14),0 2px 0 #030304;color:#c4c4cb}
.download-platforms{display:flex;gap:12px;margin-top:18px}
.download-platforms>span{display:flex;align-items:center;gap:8px;min-height:31px;padding:0 12px;border:1px solid #34343b;border-bottom:2px solid #030304;border-radius:7px;background:linear-gradient(180deg,#1d1d22,#0d0d10);box-shadow:inset 0 1px rgba(255,255,255,.08),0 2px 0 #030304;color:#d4d4da;font-size:9px;letter-spacing:.08em}
.download-platforms b{font-size:8px;color:#777780;font-weight:650}

/* Current KAGE Desktop icon set, as referenced in the active desktop frontend. */
.feature-icon-well{width:58px;height:58px;margin-bottom:17px;border-radius:12px;background:linear-gradient(180deg,#3a3a42 0%,#24242a 58%,#151519 100%);border:1px solid #62626b;border-bottom:2px solid #030304;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px rgba(0,0,0,.42),0 4px 0 #030304,0 10px 18px rgba(0,0,0,.4)}
.feature-item .feature-icon{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(255,255,255,.12))}
.feature-item .feature-icon[src$="Shade_Icon.png"]{width:42px;height:42px}
.feature-item .feature-icon[src$="logo.png"]{width:42px;height:42px}
.feature-number{width:max-content;min-width:32px;padding:5px 8px;border:1px solid #3c3c44;border-radius:5px;background:linear-gradient(180deg,#29292f,#111115);box-shadow:inset 0 1px rgba(255,255,255,.08),0 2px 0 #030304;color:#c1c1c9!important}
.feature-item::before{left:15%;width:70%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.features-grid{gap:15px}
.screenshot-gallery{border:1px solid #494951;border-bottom:2px solid #020203}
.gallery-toolbar{position:relative;border:0;background:linear-gradient(180deg,#1b1b20,#101014);padding-bottom:17px}
.gallery-toolbar::after{content:"";position:absolute;left:50%;bottom:0;width:62px;height:2px;transform:translateX(-50%);border-radius:4px;background:linear-gradient(90deg,transparent,#a9a9b2,transparent);box-shadow:0 0 12px rgba(255,255,255,.12)}
.gallery-controls{position:relative;border:0;background:linear-gradient(180deg,#121216,#0b0b0e)}
.gallery-controls::before{content:"";position:absolute;left:50%;top:0;width:46px;height:2px;transform:translateX(-50%);border-radius:4px;background:linear-gradient(90deg,transparent,#85858e,transparent)}
.gallery-tabs{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.gallery-tab{min-height:43px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 8px}
.gallery-tab img{width:17px;height:17px;object-fit:contain;flex:0 0 auto}
.gallery-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gallery-tab.active{border-color:#8a8a93}
.gallery-image-frame{background:linear-gradient(155deg,#232329,#111115 65%,#09090b);box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 0 #030304,0 28px 66px rgba(0,0,0,.62)}
.gallery-status b{border:1px solid #484850;border-bottom:2px solid #030304;background:linear-gradient(180deg,#2b2b32,#121216);box-shadow:inset 0 1px rgba(255,255,255,.1),0 2px 0 #030304}
.subpage-content>h2{position:relative;margin-top:42px;padding-top:4px}
.subpage-content>h2::before{content:"";display:block;width:25px;height:3px;margin-bottom:13px;border-radius:5px;background:linear-gradient(90deg,#eeeef2,rgba(238,238,242,.12));box-shadow:0 0 12px rgba(255,255,255,.1)}
.subpage-content ul{padding-left:22px}
.subpage-content li::marker{color:#a8a8b0}
.footer-last{border-top:0;position:relative;padding-top:18px}
.footer-last::before{content:"";position:absolute;left:50%;top:0;width:90px;height:2px;transform:translateX(-50%);border-radius:4px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}

@media(max-width:780px){
  .gallery-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .gallery-tab{min-height:38px;padding:0 6px;font-size:9px}
  .gallery-tab img{width:15px;height:15px}
  .download-mark{width:72px;height:72px;flex-basis:72px}
  .download-mark img{width:58px;height:58px}
}
@media(max-width:545px){
  .community-inner{padding:23px 18px;align-items:flex-start;flex-direction:column}
  .download-inner{gap:16px}
  .download-platforms{flex-wrap:wrap}
  .price-options{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:6px}
  .price-options .price-option{padding:11px 8px;min-height:88px}
  .price-options strong{font-size:20px}
  .price-options span{font-size:9px}
  .gallery-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .gallery-tab{min-height:36px;font-size:8px;gap:5px}
  .gallery-tab img{width:14px;height:14px}
  .feature-item{min-height:196px;padding:17px 15px}
  .feature-icon-well{width:48px;height:48px}
  .feature-item .feature-icon{width:27px;height:27px}
  .feature-item .feature-icon[src$="Shade_Icon.png"]{width:34px;height:34px}
}
@media(prefers-reduced-motion:reduce){
  :is(.access-main,.purchase-panel,.download-inner,.community-inner,.subpage-panel,.legal-page,.feature-item){transition:none!important;transform:none!important}
}
