/* Black & white dark mode styles */
:root{
  --bg:#000000;
  --page:#070707;
  --panel:#0d0d0d;
  --card:#101010;
  --border:rgba(255,255,255,0.08);
  --accent:#ffffff;
  --muted:#bfc7cc;
}
*{box-sizing:border-box}
@font-face{
  font-family: 'Basiic';
  src: url('fonts/basiic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
html,body{height:100%}
body{margin:0;font-family:'Basiic',system-ui,Arial,monospace;background:var(--bg);color:var(--muted);-webkit-font-smoothing:antialiased}
.container{max-width:1080px;margin:28px auto;padding:18px;display:grid;grid-template-columns:240px 1fr;gap:18px}
.sidebar{background:var(--panel);padding:16px;border:1px solid var(--border);border-radius:6px}
.avatar{width:100%;height:203px;background:linear-gradient(135deg,#0a0a0a,#141414);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px;border-radius:4px;border:1px solid var(--border);position:relative;margin-top:12px}
.avatar::before{content:"";position:absolute;top:-12px;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#ffffff,transparent);border-radius:2px}
.avatar img{width:100%;height:100%;object-fit:contain;border-radius:4px;display:block}
.site-title{font-size:13px;color:var(--accent);margin:12px 0 8px}
.nav{display:flex;flex-direction:column;gap:10px}
.nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:4px;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03)}
.nav a:hover{background:rgba(255,255,255,0.02);color:var(--accent)}
.content{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:20px;border-radius:6px;border:1px solid var(--border);min-height:400px}
.workspace{background:var(--page);border:2px solid var(--border);padding:16px;border-radius:4px}
.post-list{display:flex;flex-direction:column;gap:14px}
.post{padding:14px;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border:1px solid rgba(255,255,255,0.03)}
.post h2{margin:0 0 6px;font-size:16px;color:var(--accent)}
.post .meta{font-size:11px;color:var(--muted)}
.post p{margin:8px 0 0;color:var(--muted)}
.footer{margin-top:18px;font-size:12px;color:var(--muted)}

/* Decorative large framed area (like the screenshot) */
.frame{background:#ffffff0a;border:1px solid var(--border);padding:12px;border-radius:4px}

/* Patterned page background inspired by the attachment, but monochrome */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(circle at 14px 14px, rgba(255,255,255,0.02) 0 3px, transparent 4px),
    linear-gradient(transparent 0 50%, rgba(255,255,255,0.004) 50% 100%);
  background-size:56px 56px, 56px 56px;
  opacity:0.9;
}

/* Decorative window style (like tiled boxes in screenshot) */
.window{background:linear-gradient(180deg,#0b0b0b,#0f0f0f);border:2px solid var(--border);padding:8px;border-radius:6px}
.window .title{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.window .controls{display:flex;gap:6px}
.ctrl{width:12px;height:12px;border-radius:3px;border:1px solid rgba(255,255,255,0.04)}
.ctrl.red{background:rgba(255,0,0,0.12)}
.ctrl.yellow{background:rgba(255,255,0,0.06)}
.ctrl.green{background:rgba(0,255,0,0.05)}
.canvas{background:#f7f7f7;border:1px dashed rgba(0,0,0,0.08);padding:12px;color:#111;border-radius:4px}

.right-widgets{display:grid;grid-template-columns:1fr;gap:12px}
.widget{background:linear-gradient(180deg,#0c0c0c,#0e0e0e);border:1px solid var(--border);padding:10px;border-radius:6px}
.calendar{background:linear-gradient(180deg,#f7f7f7,#efefef);color:#111;padding:6px;border-radius:4px;border:1px dashed rgba(0,0,0,0.08)}
.thumb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.thumb{background:#151515;border:1px solid rgba(255,255,255,0.03);height:90px;border-radius:4px}

/* tweak typography for the local font */
h1,h2,h3, .site-title{letter-spacing:0.02em}

/* Marquee window for song title */
.marquee-frame{
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:3px;
  padding:4px 6px;
  margin:4px 0 8px;
  height:24px;
  overflow:hidden;
  display:flex;
  align-items:center;
}

@keyframes scrollText{
  0% { transform:translateX(100%); }
  100% { transform:translateX(-100%); }
}

@media(max-width:900px){.container{grid-template-columns:1fr;padding:12px}.avatar{height:110px}}

/* Scrollable posts area */
.posts-scroll{max-height:380px;overflow:auto;padding-right:6px}
.posts-scroll::-webkit-scrollbar{width:10px}
.posts-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
/* Firefox */
@supports (scrollbar-color: auto){
  .posts-scroll{scrollbar-width:auto;scrollbar-color:rgba(255,255,255,0.06) transparent}
}

/* Post image styling */
.post-image{max-width:100%;height:auto;display:block;margin:10px 0;border-radius:4px;border:1px solid rgba(255,255,255,0.04)}

/* Calendar table styling */
#calendar-table th{font-weight:600;color:#000;background:#e8e8e8}
#calendar-table td{border:1px solid #ccc;padding:6px 2px;text-align:center;background:#f7f7f7;color:#000}
#calendar-table td.today{background:#d4e8ff;font-weight:bold}
#calendar-table td.other-month{color:#aaa}