/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 15 2025 | 15:05:03 */
#spx-sideprojects{
  --lava:#fa681f;--gold:#ffe392;--ink:#e8eef7;--ink2:#a8b2c4;--edge:#2a3246;
  --panel:#0f1421;--panel2:#0c101a;--m1:#e3eaee;--m3:#7b8890;--r:16px;
  --gap:16px;--pad:16px;
  color:var(--ink);font-family:Montserrat,system-ui,sans-serif;
  background:transparent;padding:42px 0
}
#spx-sideprojects .spx-wrap{width:min(1240px,94vw);margin-inline:auto}
#spx-sideprojects .spx-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:0 0 10px}
#spx-sideprojects .spx-title{margin:0;font-family:Cinzel,serif;font-weight:900;letter-spacing:.06em;font-size:clamp(26px,4.5vw,48px);background:linear-gradient(180deg,var(--m1),var(--m3));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(94,106,112,.35)}
#spx-sideprojects .spx-sub{color:#dfe5ef;font-weight:700}
#spx-sideprojects .spx-bar{height:3px;margin:12px 0 22px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--lava),var(--gold),var(--lava),transparent);box-shadow:0 0 26px rgba(250,104,31,.28)}
#spx-sideprojects .spx-grid{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media (min-width:980px){#spx-sideprojects .spx-grid{grid-template-columns:repeat(12,1fr)}}
#spx-sideprojects .spx-card{background:linear-gradient(180deg,#111725,#0d121e);border:1px solid var(--edge);border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 16px 38px rgba(0,0,0,.36)}
#spx-sideprojects .spx-pad{padding:var(--pad)}
#spx-sideprojects .spx-kicker{display:inline-flex;gap:10px;align-items:center;color:var(--gold);font-weight:900;letter-spacing:.08em;text-transform:uppercase}
#spx-sideprojects .spx-kicker i{width:8px;height:8px;background:linear-gradient(180deg,var(--gold),var(--lava));border-radius:50%}
#spx-sideprojects .spx-h3{margin:6px 0 8px;font:900 clamp(20px,2.4vw,30px)/1.1 Cinzel,serif;background:linear-gradient(180deg,var(--m1),var(--m3));-webkit-background-clip:text;background-clip:text;color:transparent}
#spx-sideprojects .spx-lead{color:#e9edf7;font-weight:700}
#spx-sideprojects .spx-row{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media (min-width:980px){#spx-sideprojects .spx-row{grid-column:span 12;grid-template-columns:420px 340px 1fr}}
@media (min-width:1200px){#spx-sideprojects .spx-row{grid-template-columns:460px 360px 1fr}}
#spx-sideprojects .spx-cover{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#0b1018,#0a0e16);border:1px solid var(--edge);box-shadow:0 18px 40px rgba(0,0,0,.45)}
#spx-sideprojects .spx-cover::before{content:"";position:absolute;inset:-12%;background:radial-gradient(60% 60% at 30% 20%,rgba(255,227,146,.08),transparent 60%),radial-gradient(60% 60% at 80% 80%,rgba(250,104,31,.08),transparent 60%);filter:blur(18px);pointer-events:none}
#spx-sideprojects .spx-cover img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;filter:contrast(1.02) saturate(1.02)}
#spx-sideprojects .spx-frame{display:grid;grid-template-rows:auto 1fr;gap:12px}
#spx-sideprojects .spx-meta{display:grid;gap:6px}
#spx-sideprojects .spx-title3{margin:0;font:900 clamp(20px,2.6vw,34px)/1.12 Cinzel,serif;background:linear-gradient(180deg,var(--m1),var(--m3));-webkit-background-clip:text;background-clip:text;color:transparent}
#spx-sideprojects .spx-subline{color:#ffd2a8;font-weight:900}
#spx-sideprojects .spx-desc{color:#dfe6f4;font-weight:700}
#spx-sideprojects .spx-cta{display:grid;grid-template-columns:1fr;gap:14px;align-content:start}
@media (min-width:560px){#spx-sideprojects .spx-cta{grid-template-columns:1fr 1fr}}
#spx-sideprojects .spx-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 14px;border-radius:16px;text-decoration:none;cursor:pointer;font-weight:900;letter-spacing:.04em}
#spx-sideprojects .spx-btn-primary{border:1px solid color-mix(in oklab,var(--lava) 58%,#793019);background:linear-gradient(180deg,#ffe392,#fa681f);color:#111;box-shadow:0 10px 28px rgba(250,104,31,.22)}
#spx-sideprojects .spx-btn-secondary{border:1px solid var(--edge);background:linear-gradient(180deg,#111a28,#0d131f);color:#f3f6fa}
#spx-sideprojects .spx-btn-secondary:hover{border-color:var(--lava);box-shadow:0 10px 26px rgba(250,104,31,.2)}
#spx-sideprojects .spx-player{display:none;grid-column:1/-1;border:1px solid var(--edge);border-radius:16px;background:linear-gradient(180deg,#101624,#0c111b);padding:10px}
#spx-sideprojects .spx-player.open{display:block}
#spx-sideprojects .spx-player iframe{width:100%;height:clamp(220px,40vw,360px);border:0;border-radius:10px;display:block}
#spx-sideprojects .spx-spec{display:grid;gap:10px;align-content:start}
#spx-sideprojects .spx-badges{display:flex;flex-wrap:wrap;gap:8px}
#spx-sideprojects .spx-badge{padding:7px 10px;border-radius:999px;border:1px solid var(--edge);background:linear-gradient(180deg,#121b2a,#0d121d);color:#e9eef7;font-weight:800}
#spx-sideprojects .spx-list{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:6px}
#spx-sideprojects .spx-toggle{display:flex;align-items:center;gap:10px;margin-top:6px}
#spx-sideprojects .spx-toggle button{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;border:1px solid var(--edge);background:linear-gradient(180deg,#151a25,#0f1421);color:#f5efe0;font-weight:900;cursor:pointer}
#spx-sideprojects .spx-tracks{display:none;margin-top:8px;border:1px solid var(--edge);border-radius:12px;background:linear-gradient(180deg,#121a2a,#0d121d);padding:10px}
#spx-sideprojects .spx-tracks.open{display:block}
#spx-sideprojects .spx-vo{grid-column:span 12}
#spx-sideprojects .spx-split{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:980px){#spx-sideprojects .spx-split{grid-template-columns:1.05fr .95fr}}
#spx-sideprojects .spx-vo-pic{position:relative;border-radius:18px;border:1px solid var(--edge);overflow:hidden;background:linear-gradient(180deg,#0b1018,#0a0e16);box-shadow:0 18px 40px rgba(0,0,0,.45)}
#spx-sideprojects .spx-vo-pic::before{content:"";position:absolute;inset:-12%;background:radial-gradient(60% 60% at 30% 20%,rgba(255,227,146,.08),transparent 60%),radial-gradient(60% 60% at 80% 80%,rgba(250,104,31,.08),transparent 60%);filter:blur(18px);pointer-events:none}
#spx-sideprojects .spx-vo-pic img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
#spx-sideprojects .spx-vo-caption{margin:.6rem 0 0;color:var(--ink2);font-weight:800;text-align:center}
#spx-sideprojects .spx-vo-box{background:linear-gradient(180deg,#121824,#0e1420);border:1px solid var(--edge);border-radius:12px;padding:14px}
#spx-sideprojects .spx-vo-title{margin:0;font-family:Cinzel,serif;font-weight:900;letter-spacing:.04em;background:linear-gradient(180deg,var(--m1),var(--m3));-webkit-background-clip:text;background-clip:text;color:transparent}
#spx-sideprojects .spx-vo-meta{color:var(--lava);font-weight:900;margin-bottom:8px}
#spx-sideprojects .spx-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
#spx-sideprojects .spx-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#spx-sideprojects .spx-toggle button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.spx-sideprojects .spx-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.spx-sideprojects .spx-links .spx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--spx-edge, #2a3246);
  background: linear-gradient(180deg, #151a25, #0f1421);
  color: var(--spx-ink, #f5efe0);
  font-weight: 900;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.spx-sideprojects .spx-links .spx-btn:hover {
  border-color: var(--spx-lava, #fa681f);
  box-shadow: 0 10px 24px rgba(250,104,31,.18);
  transform: translateY(-1px);
  color: var(--spx-gold, #ffe392);
}

.spx-sideprojects .spx-links .spx-btn:focus-visible {
  outline: 2px solid var(--spx-gold, #ffe392);
  outline-offset: 2px;
}