@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');

:root,[data-theme="dark"]{--bg:#0a0a0a;--bg2:#111111;--bg3:#1a1a1a;--border:#2a2a2a;--border2:#333333;--text:#c8c8c8;--text2:#888888;--text3:#555555;--accent:#8a9a7a;--accent2:#6a7a5a;--title:#e0d7c8;--tag-bg:#1a1a1a;--tag-border:#333;--tag-text:#666;--status:#3a4a2a;--now-playing:#6a7a5a}
[data-theme="green"]{--bg:#000800;--bg2:#001200;--bg3:#001a00;--border:#003300;--border2:#004400;--text:#00cc00;--text2:#008800;--text3:#004400;--accent:#00ff00;--accent2:#00cc00;--title:#00ff44;--tag-bg:#001200;--tag-border:#004400;--tag-text:#006600;--status:#004400;--now-playing:#00aa00}
[data-theme="pastel"]{--bg:#f5f0f8;--bg2:#ffffff;--bg3:#ede8f2;--border:#d8cce8;--border2:#c8b8dc;--text:#4a3a5a;--text2:#7a6a8a;--text3:#a898b8;--accent:#b88ab8;--accent2:#9a6a9a;--title:#2a1a3a;--tag-bg:#ede8f2;--tag-border:#d8cce8;--tag-text:#9a7aaa;--status:#c8b8dc;--now-playing:#b88ab8}
[data-theme="light"]{--bg:#f2ede6;--bg2:#faf7f2;--bg3:#e8e2d8;--border:#d4ccc0;--border2:#c0b8aa;--text:#3a3228;--text2:#7a7060;--text3:#a09080;--accent:#7a6a4a;--accent2:#5a4a2a;--title:#1a1208;--tag-bg:#e8e2d8;--tag-border:#d4ccc0;--tag-text:#8a7a60;--status:#c0b8aa;--now-playing:#7a6a4a}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Share Tech Mono','Courier New',monospace;font-size:13px;line-height:1.7;min-height:100vh;transition:background 0.2s,color 0.2s}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--title)}
.wrap{max-width:800px;margin:0 auto;padding:14px}
.site-header{border:1px solid var(--border2);background:var(--bg2);padding:12px 18px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.site-title{font-family:'VT323',monospace;font-size:30px;color:var(--title);letter-spacing:2px}
.site-subtitle{font-size:10px;color:var(--text3);letter-spacing:1px;margin-top:2px}
.site-status{font-size:10px;color:var(--status);text-align:right}
.site-nav{display:flex;border:1px solid var(--border2);margin-bottom:8px;background:var(--bg2);flex-wrap:wrap}
.site-nav a{padding:6px 14px;font-size:12px;color:var(--text2);border-right:1px solid var(--border);transition:background 0.1s}
.site-nav a:hover,.site-nav a.active{background:var(--bg3);color:var(--title)}
.site-layout{display:grid;grid-template-columns:165px 1fr;gap:8px}
.sidebar{display:flex;flex-direction:column;gap:8px}
.box{border:1px solid var(--border);background:var(--bg2);padding:10px 12px}
.box-title{font-size:9px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;border-bottom:1px solid var(--border);padding-bottom:5px;margin-bottom:8px}
.box p{font-size:11px;color:var(--text2);margin-bottom:5px}
.box-links a{display:block;font-size:11px;color:var(--text2);padding:2px 0}
.box-links a::before{content:'→ ';color:var(--text3)}
.box-links a:hover{color:var(--title)}
.now-playing{font-size:10px;color:var(--now-playing)}
.theme-switcher{display:flex;flex-direction:column;gap:4px}
.theme-btn{font-size:10px;font-family:'Share Tech Mono',monospace;background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:3px 8px;cursor:pointer;text-align:left;transition:background 0.1s}
.theme-btn:hover,.theme-btn.active{background:var(--border2);color:var(--title)}
.main{display:flex;flex-direction:column;gap:8px}
.post{border:1px solid var(--border);background:var(--bg2);padding:14px 16px}
.post-date{font-size:10px;color:var(--text3);letter-spacing:1px;margin-bottom:3px}
.post-title{font-family:'VT323',monospace;font-size:22px;color:var(--title);letter-spacing:1px;margin-bottom:6px}
.post-title a{color:var(--title)}.post-title a:hover{color:var(--accent)}
.post-tags{margin-bottom:8px}
.tag{font-size:9px;background:var(--tag-bg);border:1px solid var(--tag-border);color:var(--tag-text);padding:1px 6px;margin-right:4px;display:inline-block}
.post-body{font-size:12px;color:var(--text2);line-height:1.8}
.read-more{font-size:11px;color:var(--accent2);display:inline-block;margin-top:8px}
.read-more:hover{color:var(--accent)}
.page-header{border:1px solid var(--border);background:var(--bg2);padding:12px 16px;margin-bottom:8px}
.page-header h1{font-family:'VT323',monospace;font-size:26px;color:var(--title);letter-spacing:2px}
.page-header p{font-size:11px;color:var(--text3);margin-top:2px}
hr{border:none;border-top:1px solid var(--border);margin:4px 0}
.site-footer{font-size:10px;color:var(--text3);text-align:center;border-top:1px solid var(--border);padding-top:8px;margin-top:4px}
.webring{margin-top:6px}
.statusbar{font-size:9px;color:var(--text3);border-top:1px solid var(--border);padding-top:5px;margin-top:4px}
.blink{animation:blink 1.2s step-end infinite}@keyframes blink{50%{opacity:0}}
.radio-player{border:1px solid var(--border2);background:var(--bg2);padding:20px;text-align:center;margin-bottom:8px}
.radio-title{font-family:'VT323',monospace;font-size:32px;color:var(--title);letter-spacing:3px}
.radio-status{font-size:11px;color:var(--now-playing);margin:8px 0}
.radio-player audio{width:100%;margin-top:12px}
.contact-form{display:flex;flex-direction:column;gap:10px}
.contact-form label{font-size:10px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;display:block;margin-bottom:3px}
.contact-form input,.contact-form textarea{width:100%;background:var(--bg3);border:1px solid var(--border2);color:var(--text);font-family:'Share Tech Mono',monospace;font-size:12px;padding:7px 10px;outline:none;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent2)}
.submit-btn{background:var(--bg3);border:1px solid var(--border2);color:var(--accent);font-family:'Share Tech Mono',monospace;font-size:12px;padding:8px 18px;cursor:pointer;letter-spacing:1px;transition:background 0.1s;align-self:flex-start}
.submit-btn:hover{background:var(--border2);color:var(--title)}
.archive-table{width:100%;border-collapse:collapse}
.archive-table th{font-size:9px;letter-spacing:2px;color:var(--text3);text-transform:uppercase;border-bottom:1px solid var(--border);padding:6px 8px;text-align:left}
.archive-table td{font-size:11px;color:var(--text2);padding:6px 8px;border-bottom:1px solid var(--border)}
.archive-table td a{color:var(--text2)}.archive-table td a:hover{color:var(--title)}
.archive-table tr:hover td{background:var(--bg3)}
@media(max-width:560px){.site-layout{grid-template-columns:1fr}.sidebar{display:none}}