:root{
  --bg:#070816;
  --panel:#0f1324;
  --accent1:#ff4ad0;
  --accent2:#54d0ff;
  --muted:#9aa3c0;
  --glass: rgba(255,255,255,0.03);
  --neon-glow: 0 6px 20px rgba(84,208,255,0.08), 0 0 12px rgba(255,74,208,0.06);
  --border: 1px solid rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
.bg-synth{background:
  radial-gradient(1200px 600px at 10% 10%, rgba(84,208,255,0.06), transparent 6%),
  radial-gradient(1000px 500px at 90% 90%, rgba(255,74,208,0.04), transparent 8%),
  var(--bg);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* desktop window - hybrid: landing fixed-width, others responsive */
.desktop-window{
  width:100%;
  max-width:1000px;
  border-radius:12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:18px;
}

/* Tabs */
.tabs{display:flex;gap:8px;margin-bottom:8px;}
.tab{padding:8px 12px;background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));border-radius:6px 6px 0 0;font-family: "Share Tech Mono", monospace;color:var(--muted);text-decoration:none;border:1px solid rgba(255,255,255,0.03);box-shadow: var(--neon-glow);}
.tab.active{color:#fff;background: linear-gradient(180deg, rgba(15,20,36,0.6), rgba(10,12,20,0.8));box-shadow: 0 6px 30px rgba(84,208,255,0.06), 0 0 10px rgba(255,74,208,0.06) inset;}

/* Panel */
.panel{background: linear-gradient(180deg, rgba(11,14,25,0.6), rgba(6,8,14,0.5));border-radius:10px;padding:18px;display:flex;gap:18px;min-height:60vh;color: #dfe9ff;}

/* Landing fixed portion */
.landing-panel{height:60vh; overflow:hidden;}

/* Columns */
.left-col{flex:1;display:flex;flex-direction:column;gap:12px;justify-content:flex-start}
.right-col{width:360px;display:flex;flex-direction:column;gap:12px}

/* Titles */
.site-title{font-family:Orbitron, sans-serif;font-weight:700;font-size:28px;margin:0;color:var(--accent2);text-shadow: 0 2px 18px rgba(84,208,255,0.08);}
.site-sub{margin:0;color:var(--muted);font-weight:400;}

/* Blurb */
.blurb{background:var(--glass);border-radius:8px;padding:12px;border:var(--border);color:#cfe7ff}
.btn{display:inline-block;padding:8px 12px;margin-right:8px;margin-top:6px;background:transparent;border:1px solid rgba(255,255,255,0.06);border-radius:6px;text-decoration:none;color:var(--muted);font-family:Share Tech Mono}
.btn:hover{color:#fff;box-shadow: 0 6px 24px rgba(255,74,208,0.06)}

/* Widgets */
.widget{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));border-radius:8px;border:var(--border);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:160px;}
.widget-title{font-family:Orbitron;font-size:13px;color:var(--accent1);padding:5px}
.widget-footer{margin-left: 6px}

/* posts-scroll */
.posts-scroll{overflow:auto;height: calc(100% - 40px);padding-right:6px;scrollbar-color: transparent;}
.posts-scroll .post-row{padding:8px;border-radius:6px;margin-bottom:6px;background:rgba(255,255,255,0.01);}
.posts-scroll .post-row a{color:#cfe7ff;text-decoration:none;font-weight:600}
.posts-scroll .post-date{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.posts-scroll::-webkit-scrollbar {background-color: transparent;}

/* music widget */
.music-widget{height: calc(50% - 6px); display:flex;flex-direction:column}
.music-container{display:flex;flex-direction:column;gap:8px;flex:1}
.track-info{font-weight:600}
.controls{display:flexbox;align-items:left;}
.small-btn{padding:6px 10px;border-radius:6px;border:1px solid rgba(255,255,255,1); background:transparent; font-family:Share Tech Mono; color:white}
.vol-label{position: relative;font-size:13px;color:var(--muted);top: 5px;}
.playlist{overflow:auto;flex:1;border-radius:6px;padding:6px;background:rgba(255,255,255,0.01)}
.playlist .track-item{padding:6px;border-bottom:1px dashed rgba(255,255,255,0.03);font-size:13px}
.playlist .track-item:last-child{border-bottom:none}

/* Other pages */
.blog-panel, .music-full-panel, .chars-panel{flex-direction:column;min-height:60vh}
.page-heading{font-family:Orbitron;margin:6px 0 12px 0;color:var(--accent2)}
.blog-list{display:flex;flex-direction:column;gap:20px;}
.blog-list .post-entry{padding:12px;background:rgba(255,255,255,0.01);border-radius:8px;border-top:1px solid rgba(255,255,255,0.03)}
.post-title{font-family:Orbitron;margin:0}
.post-meta{color:var(--muted);font-size:13px;margin-bottom:10px}

/* characters grid */
.chars-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.char-card{display:block;position:relative;border-radius:8px;overflow:hidden;text-decoration:none;color:inherit}
.char-card img{display:block;width:100%;height:140px;object-fit:cover;transform:scale(1);transition:transform .25s}
.char-card:hover img{transform:scale(1.06)}
.char-overlay{position:absolute;left:0;right:0;bottom:0;padding:8px;background:linear-gradient(0deg, rgba(0,0,0,0.7), transparent);font-weight:600;font-family:Orbitron;opacity:0;transform:translateY(6px);transition:all .2s}
.char-card:hover .char-overlay{opacity:1;transform:translateY(0)}

/* Character page layout */
.char-page-panel{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}
.char-portrait{width:100%;border-radius:6px;border:1px solid rgba(255,255,255,0.04)}
.char-name{font-family:Orbitron;margin:0}
.char-role{color:var(--muted)}

/* Vertical tabs */
.tab-buttons-vertical{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.tab-buttons-vertical .tab-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px;border-radius:6px;text-align:left;font-family:Share Tech Mono;color:var(--muted)}
.tab-buttons-vertical .tab-btn.active{background:linear-gradient(90deg, rgba(84,208,255,0.04), rgba(255,74,208,0.03));color:#fff}

/* tab contents */
.tab-block{display:none;background:rgba(255,255,255,0.01);padding:12px;border-radius:6px;max-height:305px;overflow-y:scroll}
.tab-block::-webkit-scrollbar{width:1px;}
.tab-block.active{display:block}

/* placeholders */
.placeholder{color:var(--muted);font-style:italic}

/* responsive adjustments */
@media (max-width:878px){
  .desktop-window{padding:12px}
  .panel{flex-direction:column}
  .left-col{order:1}
  .right-col{order:2}
  .landing-panel{height:auto; overflow:visible}
  .char-page-panel{grid-template-columns:1fr;gap:12px}
  .right-col{width:100%}
  margin-left: 40px;
}

.sidebar-widgets1 {
    border: 50px;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--glass); height:200px;
    position: absolute;
    right: 150px;
    top: 150px;
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.sidebar-widgets2 {
    border: 50px;
    border-radius: 12px;
    position: absolute;
    top: 500px;
    right: 150px;
    width: 260px;
    display: block;
    max-height: 100px;
}

#blog-widget {
    height: 250px;
    overflow-y: scroll;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #5ff;
    padding: 10px;
}

#music-player {
    margin-top: 200px;
    height: 180px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #5ff;
    padding: 10px;
}

a {
  color:white
}