/* ===================== ILL SEA :: THE ILLTHY LINE =====================
   Winamp-skin site. Lime (#b6ff1a) + purple (#8a2be2) on near-black,
   bevelled window chrome, LCD readouts, 1999 grunge. Shared by index + byob. */
:root{
  --ink:#07080a; --ink2:#0c0a12;
  --panel:#161022; --panel2:#1d1630;
  --bev-hi:#3a2f56; --bev-lo:#000000;
  --lime:#b6ff1a; --lime-dim:#a6d92e;
  --purple:#8a2be2; --purple-hi:#c39bff; --purple-dim:#4a3a6b;
  --amber:#ffb31a;
  --text:#e4def2; --text-dim:#b4abcc;
  --lcd-glow:rgba(182,255,26,.55);
  --mono:"Lucida Console","Consolas","Courier New",monospace;
  --sans:"Tahoma","Verdana","Geneva",sans-serif;
  --slab:"Impact","Haettenschweiler","Arial Narrow Bold",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--text); line-height:1.5;
  background:
    radial-gradient(1200px 700px at 50% -10%, #1a1030 0%, rgba(26,16,48,0) 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px),
    var(--ink);
  padding:18px 14px 60px; min-height:100vh; position:relative;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:screen;
}
.wrap{max-width:1080px;margin:0 auto;position:relative;z-index:1}
a{color:var(--lime)}

/* ---------- window chrome ---------- */
.win{
  background:var(--panel); border:2px solid;
  border-color:var(--bev-hi) var(--bev-lo) var(--bev-lo) var(--bev-hi);
  box-shadow:0 0 0 1px #000, 0 10px 30px rgba(0,0,0,.6); margin-bottom:16px;
}
.tbar{
  display:flex;align-items:center;gap:8px;padding:4px 6px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, var(--purple) 0%, #5c1c99 55%, #3a1163 100%);
  border-bottom:2px solid var(--bev-lo); color:#fff; font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 0 #000;user-select:none;
}
.tbar .dot{width:9px;height:9px;border-radius:1px;border:1px solid #000;
  background:linear-gradient(180deg,#eee,#999);box-shadow:inset 1px 1px 0 #fff}
.tbar .dot.g{background:linear-gradient(180deg,var(--lime),#5c7a10)}
.tbar .dot.p{background:linear-gradient(180deg,var(--purple-hi),#3a1163)}
.tbar .ttl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbar .wbtn{display:flex;gap:3px;margin-left:auto}
.tbar .wbtn i{width:12px;height:11px;display:block;border:1px solid #000;
  background:linear-gradient(180deg,#c9bfe0,#6b5f88);font-style:normal;
  font-size:8px;line-height:9px;text-align:center;color:#000}
.body{padding:14px}

/* ---------- top nav ---------- */
.nav{display:flex;align-items:center;gap:16px;margin:0 4px 16px;font-family:var(--mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.nav .home{color:var(--purple-hi);text-decoration:none;font-weight:bold}
.nav a{color:var(--text-dim);text-decoration:none;border-bottom:1px dotted transparent}
.nav a:hover{color:var(--lime);border-bottom-color:var(--lime-dim)}
.nav .spacer{flex:1}

/* ---------- hero player ---------- */
.hero .body{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:stretch}
@media(max-width:760px){.hero .body{grid-template-columns:1fr}}
.lcd{
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 2px), #05100a;
  border:2px solid;border-color:#000 #26331a #26331a #000;padding:12px;min-height:150px;
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
}
.lcd .co{font-family:var(--mono);color:var(--lime);text-shadow:0 0 6px var(--lcd-glow);font-size:11px;letter-spacing:.16em}
.lcd .kbps{display:flex;gap:14px;color:var(--lime-dim);font-family:var(--mono);font-size:10px;letter-spacing:.12em;margin-top:2px}
.lcd .kbps b{color:var(--lime)}
.marq{overflow:hidden;white-space:nowrap;border-top:1px solid #16220e;padding-top:6px}
.marq span{display:inline-block;padding-left:100%;font-family:var(--mono);color:var(--lime);
  text-shadow:0 0 6px var(--lcd-glow);font-size:12px;letter-spacing:.1em;animation:marq 40s linear infinite}
@keyframes marq{to{transform:translateX(-100%)}}
#viz{display:block;width:100%;height:56px;margin-top:8px;background:#04120a;border:1px solid #16260e;image-rendering:pixelated}
.brandcol{display:flex;flex-direction:column;justify-content:center;gap:8px}
.co-name{font-family:var(--mono);font-size:11px;letter-spacing:.38em;color:var(--purple-hi);text-transform:uppercase}
.brand{
  font-family:var(--slab);font-weight:400;line-height:.82;letter-spacing:.01em;
  font-size:clamp(52px,11vw,104px);margin:2px 0;color:var(--lime);text-transform:uppercase;text-wrap:balance;
  text-shadow:3px 3px 0 var(--purple), 6px 6px 0 #2a1147, 0 0 24px rgba(138,43,226,.55);filter:contrast(1.05);
}
.brand .sea{color:var(--purple-hi);display:block;font-size:.42em;letter-spacing:.06em;text-shadow:2px 2px 0 #000}
.tag{font-size:13.5px;color:var(--text);margin:2px 0 0}
.tag b{color:var(--lime)}
.transport{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.tbtn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text);background:var(--panel2);
  border:2px solid;border-color:var(--bev-hi) var(--bev-lo) var(--bev-lo) var(--bev-hi);padding:6px 12px;cursor:default}
.tbtn.on{color:var(--ink);background:var(--lime);border-color:#e7ffb0 #3a5209 #3a5209 #e7ffb0;text-shadow:none;font-weight:bold}
.tbtn.grey{color:var(--text-dim)}

/* ---------- BYOB free-beta panel ---------- */
.byob{border-color:var(--lime) var(--bev-lo) var(--bev-lo) var(--lime);
  box-shadow:0 0 0 1px #000, 0 0 26px rgba(182,255,26,.16), 0 10px 30px rgba(0,0,0,.6)}
.byob .tbar{background:
  repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 4px),
  linear-gradient(180deg,#5c7a10 0%,#3f560a 60%,#243206 100%);color:#eaffc4}
.byob .body{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;align-items:center}
@media(max-width:760px){.byob .body{grid-template-columns:1fr}}
.byob h2{font-family:var(--slab);font-size:40px;line-height:.85;color:var(--lime);margin:0 0 4px;
  letter-spacing:.02em;text-transform:uppercase;text-shadow:2px 2px 0 var(--purple)}
.byob .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--purple-hi);text-transform:uppercase;margin-bottom:8px}
.byob p{margin:0 0 10px;font-size:13.5px}
.byob p b{color:var(--lime)}
.byob .credit{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);letter-spacing:.02em;line-height:1.6}
.byob .credit a{color:var(--lime-dim)}
.dlwrap{display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:center}
.dlbtn{display:block;font-family:var(--slab);font-size:26px;letter-spacing:.03em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);background:var(--lime);
  border:2px solid;border-color:#e7ffb0 #3a5209 #3a5209 #e7ffb0;padding:14px 10px 10px;
  box-shadow:0 0 18px rgba(182,255,26,.35);transition:transform .06s}
.dlbtn:hover{background:#c9ff4a}
.dlbtn:active{transform:translate(1px,1px);border-color:#3a5209 #e7ffb0 #e7ffb0 #3a5209}
.dlbtn small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;margin-top:4px;color:#2a3a06}
.dlmeta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--text-dim);text-transform:uppercase}
.dlmeta a{color:var(--lime)}
.freebie{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:bold;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);background:var(--lime);padding:2px 8px;margin-bottom:8px}

/* ---------- section eyebrow ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--purple-hi);
  text-transform:uppercase;margin:26px 4px 10px;display:flex;align-items:center;gap:10px}
.eyebrow::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--purple),transparent)}
.eyebrow .soon{color:var(--amber);font-size:10px;letter-spacing:.14em;border:1px dashed var(--amber);padding:1px 7px}

/* ---------- playlist ---------- */
.pl .body{padding:0}
.plrow{display:grid;grid-template-columns:34px 1fr auto auto;gap:10px;align-items:baseline;
  padding:5px 12px;font-family:var(--mono);font-size:12px;border-bottom:1px solid #0c0a14;color:var(--lime)}
.plrow:nth-child(odd){background:rgba(138,43,226,.06)}
.plrow:hover{background:rgba(182,255,26,.10)}
.plrow .n{color:var(--purple-hi)}
.plrow .nm{color:var(--lime);letter-spacing:.04em}
.plrow .nm small{color:var(--text-dim);letter-spacing:.08em;margin-left:8px;font-size:11px;text-transform:uppercase}
.plrow .cat{color:var(--lime-dim);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.plrow .tm{color:var(--amber);font-size:10px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- flagship feature ---------- */
.flag .body{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.flag .body{grid-template-columns:1fr}}
.flag h2{font-family:var(--slab);font-size:44px;line-height:.9;color:var(--lime);margin:0 0 6px;
  letter-spacing:.02em;text-transform:uppercase;text-shadow:2px 2px 0 var(--purple)}
.flag .sub{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--purple-hi);text-transform:uppercase;margin-bottom:10px}
.flag p{font-size:14px;margin:0 0 12px}
.chain{font-family:var(--mono);font-size:11px;color:var(--lime);line-height:1.9;
  background:#05100a;border:2px solid;border-color:#000 #26331a #26331a #000;padding:10px;letter-spacing:.06em}
.chain b{color:var(--purple-hi)}
.specs{list-style:none;margin:0;padding:0}
.specs li{display:flex;gap:8px;padding:4px 0;font-size:13px;border-bottom:1px dotted #2a2140}
.specs li::before{content:"\25B8";color:var(--lime);font-size:11px;line-height:1.5}

/* ---------- plugin rack ---------- */
.rack{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.card .body{padding:12px}
.card .top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:2px}
.card h3{font-family:var(--slab);font-size:26px;line-height:.9;color:var(--lime);margin:0;letter-spacing:.02em;text-transform:uppercase}
.card .ver{font-family:var(--mono);font-size:10px;color:var(--text-dim)}
.card .badge{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--purple-hi);padding:2px 7px;margin:4px 0 8px;font-weight:bold}
.card .desc{font-size:12.5px;color:var(--text);margin:0 0 10px;min-height:52px}
.card ul{list-style:none;margin:0;padding:0}
.card ul li{font-family:var(--mono);font-size:11.5px;color:var(--lime-dim);padding:2px 0 2px 14px;position:relative;letter-spacing:.02em}
.card ul li::before{content:"\25AA";position:absolute;left:0;color:var(--lime)}
.card ul li b{color:var(--lime);font-weight:normal;text-shadow:0 0 5px var(--lcd-glow)}
.card .minivis{height:5px;margin-top:10px;display:flex;gap:2px;align-items:flex-end}
.card .minivis i{flex:1;background:var(--lime-dim);opacity:.5}

/* ---------- prose / manual (byob page) ---------- */
.prose{max-width:70ch}
.prose p{font-size:14px;margin:0 0 12px}
.prose p b{color:var(--lime)}
.prose h3{font-family:var(--slab);font-size:24px;color:var(--lime);text-transform:uppercase;letter-spacing:.02em;
  margin:22px 0 8px;text-shadow:1px 1px 0 var(--purple)}
.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:8px 0 8px 40px;font-size:14px;border-bottom:1px dotted #2a2140}
.steps li::before{content:counter(s);position:absolute;left:0;top:6px;width:26px;height:26px;line-height:26px;text-align:center;
  font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--lime);border:1px solid #3a5209}
.ctrltbl{width:100%;border-collapse:collapse;font-size:13px}
.ctrltbl th,.ctrltbl td{text-align:left;padding:8px 10px;border-bottom:1px solid #241b34;vertical-align:top}
.ctrltbl th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-hi)}
.ctrltbl td:first-child{font-family:var(--mono);color:var(--lime);white-space:nowrap;font-size:12px}
.ctrltbl tr:hover td{background:rgba(182,255,26,.05)}
.callout{background:#05100a;border:2px solid;border-color:#000 #26331a #26331a #000;padding:12px 14px;margin:14px 0;
  font-size:13px;font-family:var(--mono);color:var(--lime);line-height:1.7}
.callout b{color:var(--purple-hi)}

/* ---------- status bar footer ---------- */
.status{margin-top:22px}
.status .body{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:.06em}
.status .cnt{display:inline-flex;gap:2px;align-items:center}
.status .cnt b{background:#05100a;color:var(--lime);border:1px solid #16260e;padding:1px 4px;text-shadow:0 0 6px var(--lcd-glow)}
.status .soon{color:var(--amber);border:1px dashed var(--amber);padding:2px 8px;letter-spacing:.12em}
.status .llc{color:var(--purple-hi)}
.status a{color:var(--lime);text-decoration:none;border-bottom:1px dotted var(--lime-dim)}

@media(prefers-reduced-motion:reduce){ .marq span{animation:none;padding-left:0} }

/* ---------- logo + screenshot ---------- */
.nav .home{display:inline-flex;align-items:center}
.navlogo{width:24px;height:24px;border-radius:50%;vertical-align:middle;margin-right:9px;display:inline-block}
.herologo{width:66px;height:66px;border-radius:50%;margin-bottom:4px;box-shadow:0 0 20px rgba(138,43,226,.45)}
.shot{display:block;width:100%;height:auto;border:2px solid;border-color:#000 var(--bev-hi) var(--bev-hi) #000;background:#000}
/* standard display sizes for logo + screenshot (override earlier rules) */
.navlogo{width:28px;height:28px}
.herologo{width:64px;height:64px}
.shot{width:330px;max-width:100%}
.shotlink{display:inline-block;line-height:0}
.shotcap{font-family:var(--mono);font-size:10px;color:var(--text-dim);letter-spacing:.12em;margin-top:6px;text-transform:uppercase}
/* hero: logo to the right of Illthy, gap under the wordmark (v3) */
.brandrow{display:flex;align-items:center;gap:.24em;margin-bottom:.14em}
.brand .herologo{height:.8em;width:auto;margin:0;border-radius:50%;box-shadow:0 0 20px rgba(138,43,226,.45)}