html, body { margin:0; padding:0; background:#020703; }
body { min-height:100vh; color:#33ff66; font-family:'Share Tech Mono', monospace; position:relative; overflow-x:hidden; }
::selection { background:#00ff41; color:#020703; }
a { color:inherit; }
input:focus { outline:none; }
.hidden { display:none !important; }

@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes glitch {
  0% { text-shadow: 2px 0 #ff2a6d, -2px 0 #05d9e8; transform: translateX(0); }
  25% { text-shadow: -2px 0 #ff2a6d, 2px 0 #05d9e8; transform: translateX(1px); }
  50% { text-shadow: 2px 1px #ff2a6d, -1px -1px #05d9e8; transform: translateX(-1px); }
  100% { text-shadow: -1px 0 #ff2a6d, 1px 0 #05d9e8; transform: translateX(0); }
}
@keyframes flicker { 0%,100%{opacity:1} 92%{opacity:1} 93%{opacity:.6} 94%{opacity:1} 97%{opacity:.8} 98%{opacity:1} }

.blink { animation: blink 1s steps(1) infinite; }
.cursor-block { display:inline-block; width:11px; height:20px; background:#33ff66; animation:blink 1s steps(1) infinite; box-shadow:0 0 8px rgba(0,255,65,0.8); }

/* Matrix rain + CRT overlays */
#rain { position:fixed; inset:0; width:100vw; height:100vh; z-index:0; opacity:0.55; }
#scanlines { position:fixed; inset:0; z-index:50; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0px, rgba(0,0,0,0.28) 1px, transparent 1px, transparent 3px); }
#vignette { position:fixed; inset:0; z-index:51; pointer-events:none; background:radial-gradient(ellipse at center, transparent 55%, rgba(0,10,2,0.55) 100%); }

/* Boot screen */
#boot { position:fixed; inset:0; z-index:100; background:#010401; padding:48px 56px; cursor:pointer; font-family:'VT323', monospace; font-size:22px; line-height:1.5; color:#33ff66; animation:flicker 4s infinite; }
#boot div { white-space:pre-wrap; text-shadow:0 0 6px rgba(0,255,65,0.6); }
#boot .skip-hint { position:fixed; bottom:24px; right:32px; font-size:16px; color:#0f7a33; text-shadow:none; }

/* Header */
header { position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 36px; border-bottom:1px solid #0d3d1c; background:rgba(2,7,3,0.82); backdrop-filter:blur(2px); flex-wrap:wrap; }
#logo { cursor:pointer; line-height:1.1; }
#logo .prompt { color:#00ff41; font-size:14px; }
#logo .title { font-size:26px; font-weight:bold; color:#00ff41; letter-spacing:2px; text-shadow:0 0 12px rgba(0,255,65,0.7); }
#logo:hover .title { animation:glitch 0.3s steps(2) infinite; }
nav { display:flex; gap:6px; flex-wrap:wrap; }
nav button { background:transparent; border:1px solid #0d3d1c; color:#1fbf52; font-family:'Share Tech Mono', monospace; font-size:14px; letter-spacing:1.5px; padding:8px 16px; cursor:pointer; border-radius:4px; }
nav button:hover { animation:glitch 0.35s steps(2) infinite; color:#00ff41; border-color:#00ff41; }
nav button.active { color:#00ff41; border-color:#00ff41; text-shadow:0 0 10px rgba(0,255,65,0.8); }

main { position:relative; z-index:10; max-width:1060px; margin:0 auto; padding:40px 28px 90px; }

.panel { border:1px solid #0d3d1c; border-radius:8px; background:rgba(1,10,4,0.9); padding:28px 32px; }

/* Shared text tones */
.dim { color:#0f7a33; }
.mid { color:#1fbf52; }
.lit { color:#7dffa4; }
.body-text { color:#a8ffc4; }

/* Home */
#hero { font-family:'VT323', monospace; font-size:clamp(34px, 5vw, 58px); color:#00ff41; text-shadow:0 0 18px rgba(0,255,65,0.55); min-height:1.2em; }
#hero .caret { display:inline-block; width:0.5em; height:0.9em; background:#00ff41; margin-left:4px; vertical-align:baseline; animation:blink 1s steps(1) infinite; }
.tagline { color:#1fbf52; font-size:16px; max-width:640px; margin:10px 0 36px; }
.terminal { border:1px solid #0d3d1c; border-radius:8px; background:rgba(1,10,4,0.88); box-shadow:0 0 30px rgba(0,255,65,0.08); }
.term-bar { display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid #0d3d1c; background:rgba(0,40,12,0.35); border-radius:8px 8px 0 0; }
.term-bar .dot { width:11px; height:11px; border-radius:50%; }
.term-bar .path { margin-left:auto; color:#00ff41; font-size:13px; }
.term-body { padding:18px 22px; font-size:15px; }
.post-row { display:grid; grid-template-columns:110px 70px 96px 1fr; gap:16px; align-items:baseline; padding:9px 10px; cursor:pointer; border-radius:4px; border-left:2px solid transparent; }
.post-row:hover { background:rgba(0,255,65,0.07); border-left:2px solid #00ff41; }
.post-row:hover .fname { text-shadow:0 0 8px rgba(0,255,65,0.8); }

/* Post view */
.back-btn { background:transparent; border:1px solid #0d3d1c; color:#1fbf52; font-family:'Share Tech Mono', monospace; font-size:13px; padding:7px 14px; cursor:pointer; border-radius:4px; margin-bottom:20px; }
.back-btn:hover { border-color:#00ff41; color:#00ff41; }
#post-title { font-family:'VT323', monospace; font-size:40px; color:#00ff41; margin:14px 0 4px; text-shadow:0 0 14px rgba(0,255,65,0.5); }
#post-body { color:#a8ffc4; font-size:16px; line-height:1.75; white-space:pre-wrap; max-width:70ch; }

/* Shell */
#shell-box { border:1px solid #0d3d1c; border-radius:8px; background:rgba(0,3,1,0.95); padding:22px 26px; font-size:15px; line-height:1.7; min-height:420px; cursor:text; box-shadow:inset 0 0 60px rgba(0,255,65,0.05); }
#shell-history div { white-space:pre-wrap; }
#shell-line { display:flex; gap:8px; align-items:baseline; }
#shell-input { flex:1; background:transparent; border:none; color:#7dffa4; font-family:'Share Tech Mono', monospace; font-size:15px; caret-color:#00ff41; }

footer { position:relative; z-index:10; text-align:center; padding:26px; color:#0f7a33; font-size:13px; border-top:1px solid #0d3d1c; }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  header { padding:14px 16px; gap:12px; }
  #logo .title { font-size:20px; letter-spacing:1px; }
  nav { gap:5px; }
  nav button { padding:7px 12px; font-size:12px; letter-spacing:1px; }

  main { padding:24px 14px 60px; }

  #boot { padding:22px 16px; font-size:16px; }
  #boot .skip-hint { bottom:12px; right:14px; font-size:13px; }

  .panel { padding:18px 16px; }
  .tagline { font-size:15px; margin-bottom:26px; }

  .term-bar .path { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .term-body { padding:14px 12px; font-size:14px; }
  /* hide perms + size columns, keep date + filename */
  .post-row { grid-template-columns:82px 1fr; gap:10px; padding:10px 8px; }
  .post-row span:nth-child(1),
  .post-row span:nth-child(2) { display:none; }

  #post-title { font-size:30px; }
  #post-body { font-size:15px; }

  #shell-box { padding:14px 12px; min-height:320px; font-size:14px; }
  /* 16px stops iOS zooming the page when input gets focus */
  #shell-input { font-size:16px; }

  footer { padding:18px 14px; font-size:12px; }
}

@media (max-width: 380px) {
  /* very narrow: stack date above filename */
  .post-row { grid-template-columns:1fr; gap:2px; }
  nav button { padding:6px 9px; }
}