*{margin:0;padding:0;box-sizing:border-box;image-rendering:pixelated;image-rendering:crisp-edges}

/* ─── PALETTE ─── */
:root{
  --px-bg:#0d0f1a;--px-surface:#1a1f35;--px-surface2:#222844;
  --px-red:#e94560;--px-gold:#ffd700;--px-green:#00e676;
  --px-cyan:#57c7ff;--px-purple:#b48eff;--px-white:#e8e8e8;
  --px-gray:#6a6a8a;--px-border:3px solid var(--px-red);
  --px-font:'Press Start 2P',monospace;--px-body:'Fira Code',monospace;
}

/* ─── SCANLINES ─── */
body::after{content:'';position:fixed;top:0;left:0;right:0;bottom:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.07) 2px,rgba(0,0,0,0.07) 4px);
  pointer-events:none;z-index:9990}

body{background:var(--px-bg);color:var(--px-white);font-family:var(--px-body);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;font-smooth:never}
a{color:var(--px-cyan);text-decoration:none;cursor:pointer}
a:hover{color:var(--px-gold);text-shadow:0 0 0 transparent}
#app{max-width:1100px;margin:0 auto;padding:0 20px;overflow-x:hidden}
img,svg,video,iframe{max-width:100%;height:auto}

/* ─── HEADER ─── */
header{padding:10px 0 10px;border-bottom:4px solid var(--px-red);display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:8px;position:sticky;top:0;background:var(--px-bg);z-index:100;box-shadow:0 4px 0 var(--px-surface2)}
header.hidden{transform:translateY(-110%)}
header{transition:transform .1s steps(3)}

.logo{font-family:var(--px-font);font-size:11px;white-space:nowrap;cursor:pointer;color:var(--px-gold);text-shadow:2px 2px 0 #7a3d00;letter-spacing:1px}
.blink{display:inline-block;width:8px;height:14px;background:var(--px-red);animation:blink .8s steps(1) infinite;vertical-align:text-bottom;margin-left:2px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

nav{display:flex;gap:2px;flex-wrap:nowrap;flex:1;min-width:0;overflow:hidden}
nav a{padding:4px 10px;font-family:var(--px-body);font-size:11px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;color:var(--px-gray);border:2px solid transparent;transition:none}
nav a:hover{color:var(--px-white);border:2px solid var(--px-red);background:var(--px-surface);text-shadow:2px 2px 0 var(--px-red)}
nav a.active{color:var(--px-gold);border:2px solid var(--px-gold);background:var(--px-surface2);text-shadow:2px 2px 0 #7a3d00}

/* ─── SEARCH ─── */
.search-bar{display:flex;gap:4px;align-items:center;flex:0 0 auto;margin-left:12px}
.search-bar input{background:var(--px-surface);border:3px solid var(--px-gray);color:var(--px-white);padding:4px 8px;font-family:var(--px-body);font-size:11px;width:140px;outline:none}
.search-bar input::placeholder{color:var(--px-gray)}
.search-bar input:focus{border-color:var(--px-cyan)}
.search-bar button{background:var(--px-red);border:3px solid #ff6b81;color:#fff;padding:5px 12px;font-family:var(--px-font);font-size:7px;cursor:pointer;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,0.4),inset 3px 3px 0 rgba(255,255,255,0.15)}
.search-bar button:hover{background:#ff6b81;box-shadow:inset -3px -3px 0 rgba(0,0,0,0.3),inset 3px 3px 0 rgba(255,255,255,0.2)}
.search-bar button:active{box-shadow:inset 3px 3px 0 rgba(0,0,0,0.4),inset -3px -3px 0 rgba(255,255,255,0.1);transform:translate(2px,2px)}
.hamburger{display:none;font-size:20px;cursor:pointer;color:var(--px-gold)}

/* ─── POSTS LIST ─── */
.posts-list,.search-results{padding:40px 0;min-height:60vh}
.page-title{font-family:var(--px-font);font-size:10px;color:var(--px-gray);margin-bottom:20px;padding-left:2px;text-transform:uppercase;letter-spacing:2px}
.page-title .count{color:var(--px-cyan)}

.post-card{padding:16px;margin-bottom:12px;border:3px solid var(--px-surface2);background:var(--px-surface);cursor:pointer;
  box-shadow:4px 4px 0 #0a0c14;transition:none;display:flex;align-items:flex-start;gap:12px;overflow:hidden}
.post-card:hover{border-color:var(--px-red);box-shadow:4px 4px 0 var(--px-red);transform:translate(-2px,-2px)}
.post-card h2{font-family:var(--px-font);font-size:11px;margin-bottom:6px;font-weight:400;color:var(--px-white);line-height:1.8}
.post-card:hover h2{color:var(--px-gold)}
.post-card .meta{font-size:10px;color:var(--px-gray);margin-bottom:6px}
.post-card .post-tags{margin-top:6px}
.post-card .tag{display:inline-block;font-family:var(--px-font);font-size:7px;background:var(--px-surface2);border:2px solid var(--px-purple);color:var(--px-purple);padding:2px 6px;margin-right:4px;cursor:pointer}
.post-card .tag:hover{background:var(--px-purple);color:#000}
.post-card .excerpt{font-size:12px;color:rgba(232,232,232,0.6);line-height:1.6}
.post-card .post-card-body{flex:1;min-width:0}
.post-card .post-card-ascii{font-size:10px;line-height:1.3;color:var(--px-green);white-space:pre;min-width:80px;max-width:130px;flex-shrink:0;padding:4px 8px;background:rgba(0,230,118,0.05);border:2px solid rgba(0,230,118,0.3);overflow:hidden}

/* ─── WHOAMI ─── */
.whoami-page{padding:40px 0;min-height:60vh}
.whoami-page h1{font-family:var(--px-font);font-size:16px;margin-bottom:20px;border-bottom:4px solid var(--px-red);padding-bottom:12px;color:var(--px-gold);line-height:1.8}
.whoami-page .content{line-height:1.8;font-size:14px;max-width:800px}
.whoami-page .content h2{font-family:var(--px-font);font-size:11px;margin-top:30px;margin-bottom:10px;color:var(--px-cyan);line-height:1.8}
.whoami-page .content p{margin-bottom:15px;line-height:1.8}
.whoami-page .content ul{margin:10px 0 10px 20px}
.whoami-page .content li{margin-bottom:8px}
.whoami-page .content pre{background:var(--px-surface);padding:15px;margin:15px 0;overflow-x:auto;border-left:4px solid var(--px-cyan)}
.whoami-page .content code{font-family:var(--px-body);font-size:12px;color:var(--px-gold)}
.whoami-page .content a{text-decoration:underline}
.terminal-block{background:var(--px-surface);padding:16px;margin:20px 0;border-left:4px solid var(--px-green);border:3px solid var(--px-green);background:rgba(0,230,118,0.04)}
.terminal-block .prompt{color:var(--px-green);opacity:.7}
.terminal-block .output{margin-top:10px;color:var(--px-green)}

/* ─── POST SINGLE ─── */
.post-single{padding:40px 0;min-height:60vh;word-wrap:break-word;overflow-x:hidden}
.post-single h1{font-family:var(--px-font);font-size:14px;margin-bottom:15px;border-bottom:4px solid var(--px-red);padding-bottom:12px;color:var(--px-gold);line-height:2}
.post-single .meta{font-size:11px;color:var(--px-gray);margin-bottom:20px}
.post-single .content{line-height:1.8;font-size:14px}
.post-single .content h2{font-family:var(--px-font);font-size:11px;margin-top:30px;margin-bottom:10px;color:var(--px-cyan);line-height:2;
  border-left:4px solid var(--px-cyan);padding-left:10px}
.post-single .content h3{font-family:var(--px-font);font-size:9px;margin-top:25px;margin-bottom:8px;color:var(--px-purple);line-height:2}
.post-single .content pre{background:var(--px-surface);padding:15px;margin:15px 0;overflow-x:auto;border-left:4px solid var(--px-green);max-width:100%;white-space:pre;word-break:normal;border:3px solid var(--px-surface2)}
.post-single .content code{font-family:var(--px-body);font-size:13px;word-break:break-all;color:var(--px-gold)}
.post-single .content p{margin-bottom:12px}
.post-single .content ul,.post-single .content ol{margin:10px 0 10px 20px}
.post-single .content a{text-decoration:underline;color:var(--px-cyan)}
.post-single .back{display:inline-block;margin-bottom:20px;color:var(--px-gray);font-family:var(--px-font);font-size:8px}
.post-single .back:hover{color:var(--px-white)}
.post-single .post-tags{margin:10px 0 20px}
.post-single .post-title-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.post-single .post-title-row pre{font-size:12px;line-height:1.3;color:var(--px-green);white-space:pre;min-width:130px;flex-shrink:0;padding:6px 10px;background:rgba(0,230,118,0.04);border:3px solid rgba(0,230,118,0.3)}
.post-single .post-tags{flex-basis:100%;width:100%;margin:6px 0 14px;order:10}

.post-single .tag{display:inline-block;font-family:var(--px-font);font-size:7px;background:var(--px-surface2);border:2px solid var(--px-purple);color:var(--px-purple);padding:2px 8px;margin-right:4px;cursor:pointer}
.post-single .tag:hover{background:var(--px-purple);color:#000}

/* ─── TABLES ─── */
.post-single table{font-family:var(--px-body);border-collapse:collapse;margin:16px 0;width:100%;border:3px solid var(--px-cyan);display:block;max-width:100%;overflow-x:auto}
.post-single thead th{background:var(--px-blue, #0f3460);color:var(--px-cyan);font-family:var(--px-font);font-weight:400;font-size:9px;text-transform:uppercase;letter-spacing:1px;border-bottom:3px solid var(--px-cyan);padding:8px 14px;text-align:left}
.post-single tbody td{border-bottom:2px solid var(--px-surface2);padding:8px 14px;font-size:13px;line-height:1.55;vertical-align:top;word-break:break-word}
.post-single tbody tr:nth-child(even) td{background:var(--px-surface)}
.post-single tbody tr:hover td{background:rgba(87,199,255,0.06)}
.post-single td code,.post-single th code{background:var(--px-surface2);border:2px solid var(--px-surface2);padding:2px 6px;font-family:var(--px-body)}

/* ─── COMMENTS ─── */
.comments{margin-top:30px;padding-top:20px;border-top:3px solid var(--px-surface2)}
.comments h3{font-family:var(--px-font);font-size:10px;margin-bottom:15px;color:var(--px-cyan)}
.comment{padding:10px 0;border-bottom:2px solid var(--px-surface2);font-size:13px}
.comment .author{color:var(--px-gold);font-family:var(--px-font);font-size:8px;margin-bottom:4px}
.comment-form{margin-top:20px}
.comment-form input,.comment-form textarea{width:100%;background:var(--px-surface);border:3px solid var(--px-surface2);color:var(--px-white);padding:8px 12px;font-family:var(--px-body);font-size:13px;margin-bottom:10px;resize:vertical;outline:none}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--px-cyan)}
.comment-form button{background:var(--px-red);border:3px solid #ff6b81;color:#fff;padding:8px 20px;font-family:var(--px-font);font-size:8px;cursor:pointer;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,0.4),inset 3px 3px 0 rgba(255,255,255,0.15)}
.comment-form button:hover{background:#ff6b81}
.comment-form button:active{box-shadow:inset 3px 3px 0 rgba(0,0,0,0.4);transform:translate(2px,2px)}
.comment-form button:disabled{opacity:.4;cursor:not-allowed}
.comment-msg{margin-top:8px;font-size:11px;font-family:var(--px-font);padding:6px 10px;display:none;border:2px solid}
.comment-msg.ok{display:block;color:var(--px-green);border-color:var(--px-green)}
.comment-msg.err{display:block;color:var(--px-red);border-color:var(--px-red)}

/* ─── PAGINATION ─── */
.pagination{display:flex;justify-content:center;align-items:center;gap:10px;padding:20px 0}
.pagination button{background:var(--px-surface);border:3px solid var(--px-surface2);color:var(--px-white);padding:6px 14px;font-family:var(--px-font);font-size:8px;cursor:pointer;
  box-shadow:3px 3px 0 #0a0c14}
.pagination button:disabled{opacity:.3;cursor:not-allowed}
.pagination button:hover:not(:disabled){border-color:var(--px-gold);color:var(--px-gold);transform:translate(-1px,-1px);box-shadow:4px 4px 0 #0a0c14}
.pagination .info{font-size:11px;color:var(--px-gray)}

/* ─── TAG CLOUD ─── */
.tag-cloud{padding:20px 0;margin-top:15px;border-top:3px solid var(--px-surface2)}
.tag-cloud h3{font-family:var(--px-font);font-size:8px;color:var(--px-gray);margin-bottom:10px;text-transform:uppercase;letter-spacing:2px}
.tag-cloud .tags{display:flex;flex-wrap:wrap;gap:6px}
.tag-cloud .tag{display:inline-block;font-family:var(--px-font);font-size:7px;background:var(--px-surface2);border:2px solid var(--px-purple);color:var(--px-purple);padding:3px 8px;cursor:pointer}
.tag-cloud .tag:hover{background:var(--px-purple);color:#000}
.tag-cloud .tag .cnt{opacity:.5;margin-left:4px}
.highlight{background:rgba(255,215,0,0.2);color:var(--px-gold);padding:0 2px}

/* ─── FOOTER ─── */
footer{border-top:4px solid var(--px-red);padding:15px 0;margin-top:40px;font-size:10px;color:var(--px-gray);text-align:center;font-family:var(--px-font)}

/* ─── TOAST ─── */
#toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{font-family:var(--px-font);font-size:9px;padding:10px 14px;pointer-events:auto;opacity:0;transform:translateY(10px);transition:opacity .15s steps(3),transform .15s steps(3);max-width:280px;word-break:break-word;border:3px solid}
.toast.show{opacity:1;transform:translateY(0)}
.toast.toast-ok{background:var(--px-surface);border-color:var(--px-green);color:var(--px-green)}
.toast.toast-err{background:var(--px-surface);border-color:var(--px-red);color:var(--px-red)}
.toast.toast-info{background:var(--px-surface);border-color:var(--px-cyan);color:var(--px-cyan)}

/* ─── RELATED POSTS ─── */
.related-posts{margin:2.5rem 0 1.5rem;border-top:3px solid var(--px-surface2);padding-top:1.5rem}
.related-posts h3{font-family:var(--px-font);color:var(--px-cyan);font-size:8px;margin-bottom:1rem;text-transform:uppercase}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.related-card{display:block;background:var(--px-surface);border:3px solid var(--px-surface2);padding:1rem;text-decoration:none;
  box-shadow:4px 4px 0 #0a0c14;transition:none}
.related-card:hover{border-color:var(--px-red);box-shadow:4px 4px 0 var(--px-red);transform:translate(-2px,-2px)}
.related-cat{font-family:var(--px-font);color:var(--px-gold);font-size:7px;margin-bottom:.5rem}
.related-title{color:var(--px-white);font-family:var(--px-font);font-size:8px;font-weight:400;margin-bottom:.4rem;line-height:1.8}
.related-excerpt{color:var(--px-gray);font-size:11px;line-height:1.4}

/* ─── THEME BTN ─── */
.theme-btn{background:none;border:2px solid var(--px-gray);color:var(--px-gray);padding:3px 6px;font-family:var(--px-font);font-size:7px;cursor:pointer;white-space:nowrap;transition:none;flex:0 0 auto}
.theme-btn:hover{border-color:var(--px-gold);color:var(--px-gold)}

/* ─── SHARE BAR ─── */
.share-bar{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0;padding:1rem;border:3px solid var(--px-surface2);flex-wrap:wrap;background:var(--px-surface)}
.share-bar .share-label{font-family:var(--px-font);color:var(--px-gray);font-size:8px;margin-right:.25rem}
.share-btn{background:none;border:2px solid var(--px-surface2);color:var(--px-gray);padding:.3rem .8rem;font-family:var(--px-font);font-size:7px;cursor:pointer;text-decoration:none;display:inline-block;
  box-shadow:2px 2px 0 #0a0c14;transition:none}
.share-btn:hover{border-color:var(--px-cyan);color:var(--px-cyan);transform:translate(-1px,-1px);box-shadow:3px 3px 0 #0a0c14}
.share-btn.copied{border-color:var(--px-green);color:var(--px-green)}

/* ─── CHAT ─── */
#chatBtn{position:fixed;bottom:1.5rem;right:1.5rem;z-index:500;display:none;
  background:var(--px-surface);border:3px solid var(--px-red);color:var(--px-red);
  height:auto;width:auto;padding:.6rem 1rem .6rem .8rem;
  font-family:var(--px-font);font-size:.65rem;cursor:pointer;
  align-items:center;gap:.55rem;flex-direction:row;
  box-shadow:4px 4px 0 #0a0c14}
#chatBtn:hover{background:var(--px-red);color:#fff;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #0a0c14}
#chatBtn.open{background:var(--px-red);color:#fff}
#chatBtn .bot-icon{font-size:1.2rem;line-height:1;flex-shrink:0}
#chatBtn .bot-label{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
#chatBtn .bot-name{font-size:.6rem;font-weight:400;color:inherit;white-space:nowrap}
#chatBtn .bot-hint{font-size:.55rem;opacity:.7;white-space:nowrap}
#chatBtn::after{content:'';position:absolute;top:-4px;right:-4px;width:10px;height:10px;
  background:var(--px-green);border:2px solid var(--px-bg);
  animation:botPulse 1s steps(2) infinite}
@keyframes botPulse{0%,100%{opacity:1}50%{opacity:0}}
#chatPanel{position:fixed;bottom:5.5rem;right:1.5rem;z-index:499;
  width:460px;max-width:calc(100vw - 2rem);
  background:var(--px-bg);border:3px solid var(--px-red);
  display:none;flex-direction:column;box-shadow:6px 6px 0 #0a0c14}
#chatPanel.open{display:flex}
#chatHeader{padding:.7rem 1rem;border-bottom:3px solid var(--px-surface2);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--px-red)}
#chatHeader .ch-title{color:#fff;font-family:var(--px-font);font-size:.7rem}
#chatHeader .ch-sub{color:rgba(255,255,255,.7);font-size:.6rem;margin-top:2px}
#chatHeader .ch-close{color:rgba(255,255,255,.7);cursor:pointer;font-size:1rem;line-height:1;padding:0 2px}
#chatHeader .ch-close:hover{color:#fff}
#chatMessages{flex:1;overflow-y:auto;padding:.85rem;display:flex;flex-direction:column;gap:.7rem;max-height:400px;min-height:160px}
.chat-msg{font-size:.8rem;line-height:1.65;padding:.55rem .85rem;font-family:var(--px-body);word-break:break-word;white-space:pre-wrap;border:2px solid var(--px-surface2)}
.chat-msg.user{background:var(--px-surface2);border-color:var(--px-cyan);color:var(--px-white);align-self:flex-end;max-width:90%}
.chat-msg.assistant{background:var(--px-surface);border-color:var(--px-surface2);color:var(--px-white);align-self:flex-start;max-width:95%}
.chat-msg.assistant code{background:var(--px-surface2);padding:1px 4px;font-size:.75rem;color:var(--px-gold)}
.chat-msg.assistant pre{background:var(--px-bg);border:2px solid var(--px-surface2);padding:.5rem;margin:.4rem 0;overflow-x:auto}
.chat-msg.typing{color:var(--px-gray);font-style:italic}
#chatInputRow{border-top:3px solid var(--px-surface2);display:flex;padding:.6rem;gap:.5rem;flex-shrink:0}
#chatInput{flex:1;background:var(--px-surface);border:2px solid var(--px-surface2);color:var(--px-white);
  padding:.5rem .7rem;font-family:var(--px-body);font-size:.8rem;outline:none;resize:none;
  min-height:36px;max-height:100px;line-height:1.4}
#chatInput:focus{border-color:var(--px-cyan)}
#chatInput::placeholder{color:var(--px-gray)}
#chatSend{background:var(--px-red);border:3px solid #ff6b81;color:#fff;
  padding:.5rem .9rem;font-family:var(--px-font);font-size:.6rem;cursor:pointer;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,0.4);align-self:flex-end;white-space:nowrap}
#chatSend:hover:not(:disabled){background:#ff6b81}
#chatSend:disabled{opacity:.4;cursor:not-allowed}
#chatFooter{padding:.4rem .85rem;border-top:2px solid var(--px-surface2);
  font-size:.6rem;color:var(--px-gray);font-family:var(--px-font);text-align:center}
@media(max-width:520px){#chatPanel{width:calc(100vw - 1.5rem);right:.75rem;bottom:5rem}#chatBtn{right:.75rem;bottom:.75rem}}

/* ─── COPY BTN ─── */
.code-wrap{position:relative}
.code-wrap .copy-btn{position:absolute;top:6px;right:8px;
  background:var(--px-surface2);border:2px solid var(--px-cyan);
  color:var(--px-cyan);font-family:var(--px-font);font-size:7px;padding:3px 8px;cursor:pointer;opacity:0;transition:none}
.code-wrap:hover .copy-btn{opacity:1}
.code-wrap .copy-btn.copied{color:var(--px-green);border-color:var(--px-green)}

/* ─── READ PROGRESS ─── */
#readProgress{position:fixed;top:0;left:0;height:4px;width:0%;
  background:var(--px-gold);z-index:9999;transition:width .1s steps(10);pointer-events:none}

/* ─── TOC ─── */
.toc-wrap{display:block;width:100%;margin:0 0 1.8rem;border:3px solid var(--px-surface2);background:var(--px-surface);font-size:.78rem;overflow:hidden}
.toc-wrap summary.toc-title{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;user-select:none;padding:.65rem 1rem;font-family:var(--px-font);color:var(--px-cyan);font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:2px solid transparent}
.toc-wrap summary.toc-title::-webkit-details-marker{display:none}
.toc-wrap summary.toc-title::after{content:'►';font-size:.6rem;opacity:.7}
.toc-wrap[open] summary.toc-title::after{content:'▼'}
.toc-wrap[open] summary.toc-title{border-bottom:2px solid var(--px-surface2);background:var(--px-surface2)}
.toc-wrap summary.toc-title:hover{background:var(--px-surface2)}
.toc-links{padding:.6rem 1rem .8rem;column-count:1}
@media(min-width:600px){.toc-links{column-count:2;column-gap:2rem}}
.toc-links a{display:block;color:var(--px-gray);padding:4px 0;line-height:1.4;text-decoration:none;break-inside:avoid;border-left:3px solid transparent;padding-left:6px}
.toc-links a:hover{color:var(--px-white);border-left-color:var(--px-red)}
.toc-links a.toc-h3{padding-left:1.2rem;font-size:.7rem}

/* ─── COFFEE ─── */
.coffee-section{margin:2.5rem 0 1rem;padding:1.4rem 1.2rem;border:3px solid rgba(255,215,0,0.4);background:rgba(255,215,0,0.03);text-align:center}
.coffee-section p{color:rgba(255,215,0,0.6);font-size:.8rem;margin-bottom:.9rem;line-height:1.5}
.coffee-section a{display:inline-flex;align-items:center;gap:.5rem;border:3px solid var(--px-gold);color:var(--px-gold);padding:.45rem 1.2rem;font-family:var(--px-font);font-size:.65rem;text-decoration:none;
  box-shadow:3px 3px 0 #0a0c14}
.coffee-section a:hover{background:rgba(255,215,0,0.1);transform:translate(-2px,-2px);box-shadow:5px 5px 0 #0a0c14}
.post-single .coffee-section{flex-basis:100%;width:100%}
.cafe-section{border-top:3px solid rgba(255,215,0,0.2);border-bottom:3px solid rgba(255,215,0,0.2);margin:2rem 0 0;padding:1.1rem 0;text-align:center;background:rgba(255,215,0,0.02)}
.cafe-section a{display:inline-flex;align-items:center;gap:.55rem;border:3px solid var(--px-gold);color:var(--px-gold);padding:.5rem 1.3rem;font-family:var(--px-font);font-size:.65rem;text-decoration:none;
  box-shadow:3px 3px 0 #0a0c14}
.cafe-section a:hover{background:rgba(255,215,0,0.1);transform:translate(-2px,-2px);box-shadow:5px 5px 0 #0a0c14}
.cafe-section small{display:block;margin-top:.45rem;color:rgba(255,215,0,0.4);font-size:.65rem;font-family:var(--px-font)}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  .hamburger{display:block}
  header{flex-direction:column;align-items:flex-start;gap:8px}
  .logo{font-size:10px}
  nav{display:none;flex-direction:column;width:100%;gap:0}
  nav.open{display:flex}
  nav a{padding:10px 12px;font-size:8px;border-bottom:2px solid var(--px-surface2)}
  .search-bar{display:none;width:100%}
  .search-bar.open{display:flex}
  .search-bar input{flex:1;width:auto}
  .post-card{flex-direction:column;gap:8px;padding:12px}
  .post-card h2{font-size:9px}
  .post-card .post-card-ascii{width:100%;text-align:center;min-width:auto;max-width:200px}
  .post-single{padding:20px 0}
  .post-single h1{font-size:11px}
  .post-single .post-title-row{flex-direction:column;gap:6px}
  .post-single .post-title-row pre{width:100%;text-align:center;min-width:auto}
  .post-single .content{font-size:13px}
  .post-single .content h2{font-size:9px}
  .post-single .content h3{font-size:8px}
  .post-single .content pre{padding:8px;font-size:11px;max-width:calc(100vw - 40px);overflow-x:auto}
  .post-single table{font-size:11px}
  .post-single thead th{padding:5px 8px;font-size:8px}
  .post-single tbody td{padding:5px 8px;font-size:11px}
  .whoami-page{padding:20px 0}
  .whoami-page h1{font-size:12px;padding-bottom:10px}
  .whoami-page .content{font-size:13px}
  .whoami-page .content h2{font-size:9px}
  .tag-cloud .tag{font-size:7px}
  .pagination button{padding:5px 10px;font-size:7px}
  footer{font-size:8px;padding:10px 0}
  #toast-container{bottom:12px;right:12px;left:12px}
  .toast{max-width:100%}
}

/* ─── FISH-THEME: green pixel variant ─── */
body.fish-theme{--px-red:#00e676;--px-gold:#00ff41;--px-cyan:#5af78e;--px-purple:#39c5b8;--px-bg:#0a0f0a;--px-surface:#0f1a0f;--px-surface2:#162416}
body.fish-theme .logo{color:var(--px-gold);text-shadow:3px 3px 0 #003d1a,2px 2px 0 #005225}
body.fish-theme header{border-bottom-color:var(--px-gold)}
body.fish-theme footer{border-top-color:var(--px-gold)}