/* ============================================================
   COMPLEX CHANNEL RECORDS — 1990s style stylesheet
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --bg: #06061a;
  --grid: rgba(60,220,140,.16);
  --panel: #0d1030;
  --panel-2: #101542;
  --border-lt: #6f86c9;
  --border-dk: #262c5e;
  --neon-green: #6dff6d;
  --neon-green-2: #9bffb0;
  --cyan: #7fe9ff;
  --pink: #ff4fc3;
  --yellow: #fff77a;
  --text: #d9e4ff;
  font-family: 'VT323', monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; max-width:100%; overflow-x:hidden; }
img, video, canvas{ max-width:100%; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'VT323', monospace;
  font-size: 19px;
  line-height: 1.35;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 42px 42px;
  overflow-x: hidden;
  position: relative;
}

#starfield{
  position: fixed; inset:0; z-index:0; pointer-events:none;
}
#starfield span{
  position:absolute; width:2px; height:2px; background:#fff; border-radius:50%;
  animation: twinkle 3.2s ease-in-out infinite;
  opacity:.6;
}
@keyframes twinkle{ 0%,100%{opacity:.15;} 50%{opacity:.95;} }

a{ color: var(--neon-green); text-decoration:none; }
a:hover{ text-decoration:underline; filter:brightness(1.3); }

.page{ position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:18px 18px 60px; }

/* ---------- retro beveled panel look ---------- */
.panel, .nav-item, .banner, .tbtn, .chiclet, .email-send, .thumb-frame{
  border-top:2px solid var(--border-lt);
  border-left:2px solid var(--border-lt);
  border-bottom:2px solid var(--border-dk);
  border-right:2px solid var(--border-dk);
}

.panel{
  background: linear-gradient(180deg, #10143d, #0a0d29);
  border-radius:2px;
  padding:14px;
  margin-bottom:16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

/* ---------- header banner ---------- */
.banner{
  position:relative;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(140,90,200,.35), transparent 55%),
    repeating-linear-gradient(var(--grid) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 34px),
    #060815;
  padding: 22px 90px;
  text-align:center;
  margin-bottom:14px;
  overflow:hidden;
}
.banner-title{
  font-family:'Press Start 2P', monospace;
  font-size: 30px;
  line-height:1.7;
  color: var(--neon-green);
  text-shadow: 0 0 6px #37ff6b, 0 0 16px #21c04f, 0 0 2px #fff;
  margin:0;
  letter-spacing:1px;
  /* "COMPLEXCHANNEL.COM!!!" has no spaces, so normal word-wrap can't
     break it -- without this, a pixel font that renders a hair wider
     than expected (seen on real iOS Safari, even at widths that fit
     fine in desktop testing) has nowhere to go but clipped off by the
     banner's overflow:hidden. This lets it fall back to wrapping. */
  overflow-wrap: anywhere;
}
.deco-globeHeader{ position:absolute; top:14px; right:120px; width:70px; }
.deco-satellite{ position:absolute; top:22px; right:20px; width:64px; }

/* ---------- layout ---------- */
.layout{ display:flex; gap:16px; align-items:flex-start; }

/* ---------- sidenav ---------- */
.sidenav{
  flex: 0 0 190px;
  background: linear-gradient(180deg, #10143d, #080a24);
  border-top:2px solid var(--border-lt); border-left:2px solid var(--border-lt);
  border-bottom:2px solid var(--border-dk); border-right:2px solid var(--border-dk);
  padding:8px;
  position: sticky; top: 12px;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; margin-bottom:6px;
  background:#0c1030; color: var(--neon-green);
  font-family:'VT323', monospace; font-size:19px; cursor:pointer;
  width:100%; text-align:left; text-decoration:none;
}
.nav-item:hover{ background:#161c52; text-decoration:none; filter:none; }
.nav-item .icon{ font-size:18px; width:22px; text-align:center; }

/* ---------- main column & decorative floating icons ---------- */
.main{ flex:1; min-width:0; position:relative; }
.deco{ image-rendering:pixelated; position:absolute; z-index:2; filter: drop-shadow(0 0 6px rgba(0,0,0,.5)); }
/* Margin decoration offsets: generous enough to clear the panel edge
   (not crowd it), but capped so they stay fully on-screen on common
   ~1366px-wide laptop windows. A wider gap (closer to the original
   mockup's spacing) kicks in on bigger monitors -- see the min-width
   1500px block further down. */
.deco-rocket{ width:70px; left:-115px; top:960px; }
.deco-boombox-left{ width:78px; left:-123px; top:1200px; }
.deco-newsticker{ width:78px; left:-123px; top:1720px; }
.deco-alien{ width:66px; right:-111px; top:520px; }
.deco-pct100{ width:74px; right:-119px; top:850px; }
.deco-cassette{ width:76px; right:-121px; top:1180px; }
.deco-boombox-right{ width:78px; right:-123px; top:1560px; }
.deco-cone{ width:56px; position:static; margin-left:14px; }

/* ---------- hero panel ---------- */
.hero-panel{ padding:0; overflow:hidden; }
.hero-media-wrap{ width:100%; line-height:0; background:#000; }
.hero-media-wrap img, .hero-media-wrap video{ width:100%; display:block; }
.sanctum-bar{
  background: linear-gradient(180deg,#173a4a,#0c2531);
  color: var(--cyan);
  font-family:'Press Start 2P', monospace;
  font-size:15px;
  text-align:center;
  padding:12px 8px;
  letter-spacing:1px;
}
.spotlight-box{ padding:12px 14px 16px; }
.spotlight-titlebar{
  background:#1a2a63; color:var(--cyan); text-align:center;
  font-family:'Press Start 2P', monospace; font-size:14px;
  padding:8px; margin-bottom:12px;
}
.spotlight-body{ display:flex; gap:18px; }
.spotlight-cover-link{ flex:0 0 auto; }
.spotlight-cover{
  width:160px; height:160px; object-fit:cover;
  border-top:2px solid var(--border-lt); border-left:2px solid var(--border-lt);
  border-bottom:2px solid var(--border-dk); border-right:2px solid var(--border-dk);
}
.spotlight-info{ flex:1; min-width:0; }
.spotlight-title{ color: var(--neon-green-2); font-size:26px; margin:2px 0 10px; font-weight:normal; }
.ticker{
  height: 128px; overflow-y:auto; overflow-x:hidden; position:relative;
  background:#050714; border:1px solid #263066; padding:4px 8px;
  margin-bottom:12px;
}
.ticker-track div{ padding:2px 0; color:#e8f0ff; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.buy-link{ color: var(--neon-green); font-size:20px; font-weight:bold; }

/* ---------- WINAMP player ---------- */
.player-panel{ padding:0; overflow:hidden; position:relative; }
.player-titlebar{
  display:flex; justify-content:space-between; align-items:center;
  background: linear-gradient(180deg,#3a4470,#20264a);
  color:#dfe6ff; font-size:16px; padding:6px 10px; letter-spacing:1px;
}
.player-titlebar-lines{ opacity:.5; letter-spacing:-1px; }
.player-body{ display:flex; gap:10px; padding:10px; background:#04060f; }

/* Shown when the browser has blocked automatic playback (its own
   engagement/gesture policy -- unavoidable in JS). Gives the visitor an
   obvious, honest way to start the music instead of silently waiting for
   an arbitrary first click/tap anywhere on the page. */
.autoplay-hint{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:20px;
  background:rgba(4,6,15,.9);
  color: var(--neon-green);
  font-family:'Press Start 2P', monospace; font-size:13px; line-height:1.7;
  letter-spacing:.5px;
  cursor:pointer;
  opacity:0; pointer-events:none;
  transition: opacity .35s ease;
}
.autoplay-hint.show{ opacity:1; pointer-events:auto; }
.autoplay-hint-icon{ font-size:34px; animation: pulsePct 1.4s ease-in-out infinite; }
@media (max-width:900px){
  .autoplay-hint{ font-size:12px; }
}
.player-left{ flex:0 0 235px; }
.player-clock{
  font-family:'Press Start 2P', monospace; color:#7dffb0; font-size:24px;
  background:#000; padding:6px 8px; border:1px solid #163020; margin-bottom:4px;
}
.eq-canvas{ width:100%; height:70px; background:#020402; border:1px solid #163020; display:block; }
.player-mid{ flex:1; min-width:0; }
.player-nowplaying{
  background:#000; color:#8dffb0; padding:8px; border:1px solid #163020;
  font-size:18px; height:52px; overflow:hidden;
}
.eq-canvas-wide{ width:100%; height:46px; margin-top:4px; background:#020402; border:1px solid #163020; display:block; }
.player-format-row{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; font-size:15px; color:#9fb4ff; }
.player-volume{ flex:0 0 60px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.volume-label{ font-size:12px; letter-spacing:1px; color:#9fb4ff; }
#volumeSlider{ writing-mode: vertical-lr; direction: rtl; width:20px; height:110px; accent-color:#6dff6d; }

.player-seek-row{ padding:0 10px; background:#04060f; }
.player-seek-row input[type=range]{ width:100%; accent-color:#6dff6d; }
.player-transport{
  display:flex; align-items:center; gap:6px; padding:8px 10px 12px; background:#04060f;
}
.tbtn{
  background:#232a5c; color:#dfe6ff; min-width:34px; height:30px; cursor:pointer; font-size:15px;
}
.tbtn:active{ filter:brightness(1.4); }
.tbtn-small{ min-width:26px; font-size:12px; }
.tbtn-gap{ width:8px; }
.progress-mini{ flex:1; accent-color:#6dff6d; }
.tbtn-sc{ background:#ff5500; }
.chiclet{ background:#232a5c; color:#dfe6ff; font-size:13px; padding:3px 8px; cursor:pointer; }
.sc-widget-host{ position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.sc-widget-host iframe{ width:1px; height:1px; }

/* ---------- releases list ---------- */
.releases-panel{ padding:10px 14px; }
.release-row{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid #202a5e; align-items:flex-start; }
.release-row:last-child{ border-bottom:none; }
.thumb-frame{ flex:0 0 84px; width:84px; height:84px; overflow:hidden; }
.thumb-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.release-info{ flex:1; min-width:0; }
.release-title{ color: var(--neon-green-2); font-size:22px; margin:0 0 4px; }
.release-artists{ font-size:15px; color:#aebbe8; margin:0 0 8px; }
.release-links{ display:flex; gap:18px; flex-wrap:wrap; font-size:18px; }
.release-links .now-playing{ color: var(--pink); font-weight:bold; }
.release-links a{ font-weight:bold; }
.cc-player-link{ font-weight:bold; cursor:pointer; }
.cc-player-link:hover{ color: var(--neon-green); text-decoration:underline; filter:brightness(1.3); }
.cc-player-link.now-playing{ cursor:default; }
.cc-player-link.now-playing:hover{ color: var(--pink); text-decoration:none; filter:none; }

/* ---------- playlists ---------- */
.playlists-row{ display:flex; gap:16px; }
.playlist-box{ flex:1; }
.playlist-titlebar{ text-align:center; color:var(--neon-green-2); font-size:20px; margin-bottom:10px; letter-spacing:1px; }
.playlist-tiles{ display:flex; gap:10px; justify-content:space-between; }
.playlist-tile{ flex:1; text-align:center; }
.playlist-tile img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  border-top:2px solid var(--border-lt); border-left:2px solid var(--border-lt);
  border-bottom:2px solid var(--border-dk); border-right:2px solid var(--border-dk);
}
.playlist-tile span{ display:block; font-size:15px; margin-top:4px; text-decoration:underline; }

/* ---------- gram snaps ---------- */
.gram-panel{ padding:0; overflow:hidden; }
.gram-titlebar{
  display:flex; justify-content:space-between; align-items:center;
  background: linear-gradient(180deg,#1c4657,#0d2731); color:var(--cyan);
  padding:10px 14px; font-size:20px;
}
.gram-ig-link{ color:#ff9ad1; font-size:16px; }
.gram-body{ display:flex; gap:14px; padding:14px; }
.gram-grid-wrap{
  flex:1; min-width:0; overflow-y:auto; overflow-x:hidden; position:relative;
}
.gram-grid{
  display:grid; grid-template-columns: repeat(5,1fr); gap:6px;
}
.gram-tile{ display:block; aspect-ratio:1/1; overflow:hidden; background:#141a3f; border:1px solid #2a3470; }
.gram-tile:hover{ border-color:#6dff6d; }
.gram-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.gram-side{ flex:0 0 220px; font-size:15px; color:#c4cef2; }
.gram-side h3{ color:var(--neon-green-2); font-size:20px; margin:0 0 8px; }
.gram-side p{ margin:0 0 8px; overflow-wrap:anywhere; }

/* ---------- footer ---------- */
.footer-panel{ padding:10px 16px; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.under-construction{ display:flex; align-items:center; }
.uc-text{ color:var(--yellow); font-size:24px; font-weight:bold; }
.email-group{ display:flex; align-items:center; gap:14px; }
.email-box{ background:#c6c6c6; color:#000; padding:5px; width:280px; max-width:100%; }
.mailbox-icon{ width:52px; flex:0 0 auto; image-rendering:pixelated; filter: drop-shadow(0 0 5px rgba(0,0,0,.5)); }
.email-titlebar{ background:linear-gradient(180deg,#0a246a,#a6caf0); color:#fff; font-size:13px; padding:3px 6px; display:flex; justify-content:space-between; }
.email-winbtns{ opacity:.8; }
#emailText{ width:100%; margin:5px 0 5px; font-family:'VT323',monospace; font-size:16px; line-height:1.15; background:#000; color:#6dff6d; border:1px inset #888; padding:3px 4px; resize:vertical; }
.email-send{ background:#d4d0c8; border:2px outset #fff; padding:3px 12px; cursor:pointer; font-size:14px; }
.email-send:active{ border-style:inset; }
.footer-meta{ text-align:center; margin-top:2px; color:#8ea0d8; font-size:16px; }
.footer-meta p{ margin:2px 0; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .layout{ flex-direction:column; width:100%; min-width:0; }
  .main{ width:100%; min-width:0; }
  .panel{ width:100%; min-width:0; }
  .sidenav{ position:static; width:100%; flex:none; display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
  .nav-item{ flex:1 1 45%; margin-bottom:0; }
  .deco{ display:none; }
  .spotlight-body{ flex-direction:column; }
  .player-body{ flex-direction:column; }
  .player-left{ flex:none; }
  .player-volume{
    flex:none; flex-direction:row; justify-content:center; align-items:center;
    width:100%; gap:10px; padding-top:2px;
  }
  #volumeSlider{ writing-mode:horizontal-tb; direction:ltr; width:70%; height:20px; }
  .playlists-row{ flex-direction:column; }
  .gram-body{ flex-direction:column; }
  .gram-grid-wrap{ height:320px; }
  .banner{ padding:18px 16px; }
  .banner-title{ font-size:18px; }
  .deco-globeHeader,.deco-satellite{ display:none; }
  .note-wrap{ display:none; }

  /* the transport row (prev/play/stop/seek buttons + progress bar +
     soundcloud button) is too wide to fit on one line on narrow phones --
     let it wrap, and push the progress bar onto its own full-width row
     instead of squeezing/overflowing past the edge. */
  .player-transport{ flex-wrap:wrap; }
  .progress-mini{ order:10; flex:1 1 100%; margin-top:6px; }

  /* footer: the fixed-width email box + mailbox icon no longer fit
     side-by-side on narrow phones without pushing the icon off-screen --
     shrink both a bit and let them wrap/center instead of overflowing. */
  .footer-row{ justify-content:center; }
  .email-group{ width:100%; justify-content:center; flex-wrap:wrap; }
  .email-box{ width:230px; }
  .mailbox-icon{ width:42px; }
}

/* Extra safety margin for the header title on the narrowest phones
   (iPhone mini/SE-class, ~375px and under) -- Safari's rendering of the
   pixel font measured a little wider than Chromium's in testing, enough
   to clip "COMPLEXCHANNEL.COM!!!" against the banner edge. Smaller size
   + tighter letter-spacing keeps it comfortably inside the box. */
@media (max-width: 400px){
  .banner-title{ font-size:15px; letter-spacing:0; }
  .banner{ padding:16px 10px; }
}

/* On roomy monitors, push the margin decorations further out to match
   the original mockup's wider spacing -- there's enough room without
   clipping them off the edge of the browser window. */
@media (min-width: 1500px){
  .deco-rocket{ left:-165px; }
  .deco-boombox-left{ left:-173px; }
  .deco-newsticker{ left:-173px; }
  .deco-alien{ right:-161px; }
  .deco-pct100{ right:-169px; }
  .deco-cassette{ right:-171px; }
  .deco-boombox-right{ right:-173px; }
  .note-wrap{ left:-147px; }
}

/* ============================================================
   4-FRAME RETRO ANIMATIONS
   Each animates the REAL cropped artwork purely via transform /
   filter, stepped between 4 discrete poses (steps(1)) so it reads
   as a chunky old-school animated GIF rather than a smooth tween.
   ============================================================ */
.deco{ animation-timing-function: steps(1); animation-iteration-count: infinite; }

@keyframes blinkSat{
  0%   { transform: rotate(0deg);   filter: drop-shadow(0 0 2px #ff3050); }
  25%  { transform: rotate(-3deg);  filter: drop-shadow(0 0 8px #ff3050) drop-shadow(0 0 14px #ff3050); }
  50%  { transform: rotate(0deg);   filter: drop-shadow(0 0 2px #ff3050); }
  75%  { transform: rotate(3deg);   filter: drop-shadow(0 0 1px #ff3050); }
  100% { transform: rotate(0deg);   filter: drop-shadow(0 0 2px #ff3050); }
}
.deco-satellite{ animation-name: blinkSat; animation-duration: 1.6s; }

@keyframes danceAlien{
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-6px) rotate(-6deg); }
  50%  { transform: translateY(0) rotate(0deg); }
  75%  { transform: translateY(-3px) rotate(6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.deco-alien{ animation-name: danceAlien; animation-duration: 1s; }

@keyframes turnGlobe{
  0%{ transform: rotate(0deg); } 25%{ transform: rotate(90deg); }
  50%{ transform: rotate(180deg); } 75%{ transform: rotate(270deg); }
  100%{ transform: rotate(360deg); }
}
.deco-globeHeader{ animation: turnGlobe 4.8s steps(1) infinite; }

@keyframes rocketBlast{
  0%   { transform: translateY(0) scaleY(1);     filter: drop-shadow(0 6px 3px #ff6a00); }
  25%  { transform: translateY(2px) scaleY(1.03); filter: drop-shadow(0 10px 6px #ffb020); }
  50%  { transform: translateY(-1px) scaleY(.98); filter: drop-shadow(0 5px 3px #ff4400); }
  75%  { transform: translateY(1px) scaleY(1.02); filter: drop-shadow(0 9px 5px #ffcf40); }
  100% { transform: translateY(0) scaleY(1);      filter: drop-shadow(0 6px 3px #ff6a00); }
}
.deco-rocket{ animation-name: rocketBlast; animation-duration: .5s; }

@keyframes pulsePct{
  0%{ transform: scale(1); } 25%{ transform: scale(1.15); }
  50%{ transform: scale(1); } 75%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}
.deco-pct100{ animation-name: pulsePct; animation-duration: 1.2s; }

@keyframes wiggleCassette{
  0%{ transform: rotate(0deg) translateX(0); }
  25%{ transform: rotate(-4deg) translateX(-2px); }
  50%{ transform: rotate(0deg) translateX(0); }
  75%{ transform: rotate(4deg) translateX(2px); }
  100%{ transform: rotate(0deg) translateX(0); }
}
.deco-cassette{ animation-name: wiggleCassette; animation-duration: .9s; }

@keyframes expandNew{
  0%{ transform: scale(.85) rotate(0deg); } 25%{ transform: scale(1.05) rotate(-3deg); }
  50%{ transform: scale(1) rotate(0deg); } 75%{ transform: scale(1.12) rotate(3deg); }
  100%{ transform: scale(.85) rotate(0deg); }
}
.deco-newsticker{ animation-name: expandNew; animation-duration: 1.1s; }

@keyframes pulseBoombox{
  0%{ transform: scale(1);    filter: brightness(1); }
  25%{ transform: scale(1.04); filter: brightness(1.25); }
  50%{ transform: scale(1);   filter: brightness(1); }
  75%{ transform: scale(1.06); filter: brightness(1.15); }
  100%{ transform: scale(1);  filter: brightness(1); }
}
.deco-boombox-left, .deco-boombox-right{ animation-name: pulseBoombox; animation-duration: .5s; }

@keyframes wobbleCone{
  0%{ transform: rotate(0deg); filter: brightness(1); }
  25%{ transform: rotate(-6deg); filter: brightness(1.4); }
  50%{ transform: rotate(0deg); filter: brightness(1); }
  75%{ transform: rotate(6deg); filter: brightness(1.4); }
  100%{ transform: rotate(0deg); filter: brightness(1); }
}
.deco-cone{ animation: wobbleCone 1s steps(1) infinite; display:inline-block; }

/* musical note(s) drifting up from the boombox */
.note-wrap{ position:absolute; left:-97px; top:1170px; width:40px; height:60px; pointer-events:none; z-index:2; overflow:visible; }
.note{
  position:absolute; bottom:0; left:10px; font-size:20px; color:#fff37a;
  text-shadow:0 0 6px #fff37a;
  animation: driftNote 2.4s steps(1) infinite;
}
.note.n2{ animation-delay:.8s; left:22px; }
.note.n3{ animation-delay:1.6s; left:2px; }
@keyframes driftNote{
  0%   { transform: translateY(0) rotate(0deg);      opacity:1; }
  25%  { transform: translateY(-16px) rotate(8deg);  opacity:.85; }
  50%  { transform: translateY(-32px) rotate(-6deg); opacity:.55; }
  75%  { transform: translateY(-48px) rotate(10deg); opacity:.25; }
  100% { transform: translateY(-64px) rotate(0deg);  opacity:0; }
}

/* EQ bars fallback bump for the chiclet PL/EQ buttons */
.chiclet:hover{ filter:brightness(1.3); }

/* ============================================================
   Classic Windows 95/98-style scrollbar for the freely-scrollable
   retro panels (New Release Spotlight tracklist + GRAM SNAPS grid) --
   beveled gray track/thumb with up/down arrow buttons, like the
   scrollbar in the original mockup, instead of a modern thin bar.
   Firefox falls back to its own themed scrollbar via scrollbar-color.
   ============================================================ */
.ticker, .gram-grid-wrap{
  scrollbar-width: auto;
  scrollbar-color: #9098c0 #c6c6c6;
}
.ticker::-webkit-scrollbar,
.gram-grid-wrap::-webkit-scrollbar{
  width: 17px;
}
.ticker::-webkit-scrollbar-track,
.gram-grid-wrap::-webkit-scrollbar-track{
  background: #c6c6c6;
  border-radius: 0;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;
}
.ticker::-webkit-scrollbar-thumb,
.gram-grid-wrap::-webkit-scrollbar-thumb{
  background: linear-gradient(135deg, #e4e4f4, #b0b4d8 55%, #8890c0);
  border: 1px solid #5a5e82;
  border-radius: 0;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #4a4a68;
}
.ticker::-webkit-scrollbar-thumb:hover,
.gram-grid-wrap::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(135deg, #eef0ff, #c0c4e8 55%, #9aa2d4);
}
.ticker::-webkit-scrollbar-button,
.gram-grid-wrap::-webkit-scrollbar-button{
  display: block;
  height: 16px;
  background-color: #c6c6c6;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #808080;
  border-top-color: #fff;
  border-left-color: #fff;
  border-radius: 0;
}
.ticker::-webkit-scrollbar-button:vertical:start,
.gram-grid-wrap::-webkit-scrollbar-button:vertical:start{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolygon points='4,1 7,6 1,6' fill='%23333'/%3E%3C/svg%3E");
}
.ticker::-webkit-scrollbar-button:vertical:end,
.gram-grid-wrap::-webkit-scrollbar-button:vertical:end{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolygon points='1,2 7,2 4,7' fill='%23333'/%3E%3C/svg%3E");
}
.ticker::-webkit-scrollbar-button:active,
.gram-grid-wrap::-webkit-scrollbar-button:active{
  border-color: #808080;
  border-top-color: #4a4a4a;
  border-left-color: #4a4a4a;
}