@font-face {

  font-family: 'JetBrains Mono';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjPQ.ttf") format('truetype');

}

@font-face {

  font-family: 'JetBrains Mono';

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxjPQ.ttf") format('truetype');

}

@font-face {

  font-family: 'Onest';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src: url("https://fonts.gstatic.com/s/onest/v11/gNMZW3F-SZuj7zOT0IfSjTS16cPh9R-Zsg.ttf") format('truetype');

}

@font-face {

  font-family: 'Onest';

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url("https://fonts.gstatic.com/s/onest/v11/gNMZW3F-SZuj7zOT0IfSjTS16cPhxx-Zsg.ttf") format('truetype');

}

@font-face {

  font-family: 'Onest';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: url("https://fonts.gstatic.com/s/onest/v11/gNMZW3F-SZuj7zOT0IfSjTS16cPhKxiZsg.ttf") format('truetype');

}


/*

Theme Name: NoScript Chat

Theme URI: https://noscript.info

Author: noscriptinfo

Description: Dark, chat-inspired two-column theme for IT blogs. Sidebar navigation, conversation-style posts, code-friendly typography, responsive off-canvas menu.

Version: 1.0.0

Requires at least: 6.0

Requires PHP: 7.4

License: GPL-2.0-or-later

Text Domain: noscript-chat

Tags: blog, dark, two-columns, left-sidebar, custom-menu, threaded-comments

*/

:root{--bg:#212121;--side:#181818;--bubble:#303030;--hover:#2a2a2a;--line:#2c2c2c;--line2:#3a3a3a;--text:#ececec;--soft:#d6d6d6;--muted:#a8a8a8;--dim:#8f8f8f;--faint:#7a7a7a;--link:oklch(0.74 0.13 250);--link-h:oklch(0.82 0.11 250);--warn:oklch(0.78 0.13 60);--add:oklch(0.72 0.15 150);--del:oklch(0.66 0.17 25);--sans:'Onest',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;--sw:280px}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}

a{color:var(--link);text-decoration:none}a:hover{color:var(--link-h)}

img{max-width:100%;height:auto}

::selection{background:oklch(0.74 0.13 250 / .35)}

::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:8px}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;background:var(--text);color:#1a1a1a;padding:8px 12px;border-radius:8px;clip:auto;width:auto;height:auto}



.app{display:flex;min-height:100vh}

.sidebar{width:var(--sw);flex-shrink:0;background:var(--side);border-right:1px solid #2a2a2a;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}

.admin-bar .sidebar{top:32px;height:calc(100vh - 32px)}

.sb-top{display:flex;align-items:center;gap:8px;padding:16px 14px 10px}

.sb-brand{flex:1;display:flex;align-items:center;gap:8px;font-size:20px;font-weight:600;color:var(--text);letter-spacing:-.01em}

.sb-brand:hover{color:var(--text)}

.sb-brand img{max-height:28px;width:auto}

.icon-btn{width:34px;height:34px;border-radius:8px;border:0;background:transparent;color:#b4b4b4;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:16px}

.icon-btn:hover{background:var(--hover);color:var(--text)}

.sb-close{display:none}

.sb-nav ul,.sb-list{list-style:none;margin:0;padding:0}

.sb-nav{padding:4px 8px 14px}

.sb-nav a,.sb-list a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;color:var(--text);font-size:15px}

.sb-nav a:hover,.sb-list a:hover{background:var(--hover);color:var(--text)}

.sb-nav .current-menu-item>a,.sb-nav .current_page_item>a,.sb-list .current-cat>a,.sb-list .is-current>a{background:#2f2f2f}

.sb-nav .sub-menu{list-style:none;padding-left:18px;margin:0}

.sb-scroll{flex:1;overflow-y:auto;padding:0 8px 12px}

.sb-label{padding:14px 10px 6px;color:var(--dim);font-size:13px}

.sb-list.cats a::before{content:'#';font-family:var(--mono);font-size:12px;color:#9a9a9a;width:18px;text-align:center}

.sb-list.cats li{position:relative}

.sb-list .count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--faint)}

.sb-list.recent a{display:block;padding:8px 10px 8px 40px;font-size:14px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sb-more{display:block;padding:8px 10px 8px 40px;font-size:14px;color:var(--faint)}

.sb-more:hover{color:var(--text)}

.sb-widgets .widget{padding:8px 10px;font-size:14px;color:var(--soft)}

.sb-widgets .widget-title{font-size:13px;color:var(--dim);font-weight:400;margin:6px 0}

.sb-widgets ul{list-style:none;padding:0;margin:0}

.sb-foot{border-top:1px solid #2a2a2a;padding:12px 14px;display:flex;align-items:center;gap:10px}

.avatar-sm{width:30px;height:30px;border-radius:50%;background:#3a3a3a;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#d0d0d0;font-weight:500;overflow:hidden;flex-shrink:0}

.avatar-sm img{width:100%;height:100%;object-fit:cover}

.sb-who{flex:1;min-width:0}

.sb-who b{display:block;font-size:14px;font-weight:500}

.sb-who span{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:14px;border-radius:999px;padding:7px 14px;border:1px solid var(--line2);color:var(--text);cursor:pointer;background:transparent;font-family:inherit}

.pill:hover{background:var(--hover);color:var(--text)}

.pill.sm{font-size:13px;padding:5px 11px}

.pill.solid{background:var(--text);color:#1a1a1a;border-color:var(--text);font-weight:500}

.pill.solid:hover{background:#fff;color:#1a1a1a}

.scrim{display:none}



.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:10px 20px;min-height:56px;border-bottom:1px solid #2a2a2a;background:rgba(33,33,33,.88);backdrop-filter:blur(10px)}

.admin-bar .topbar{top:32px}

.menu-toggle{display:none;border:1px solid #333}

.tb-hash{font-family:var(--mono);font-size:13px;color:#9a9a9a}

.tb-title{flex:1;min-width:0;font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}

.tb-share{color:#c4c4c4;font-size:14px;padding:6px 10px;border-radius:8px;background:none;border:0;cursor:pointer;font-family:inherit}

.tb-share:hover{background:var(--hover);color:var(--text)}



.content{width:100%;max-width:780px;margin:0 auto;padding:36px 24px 180px;display:flex;flex-direction:column;gap:44px}

.bubble{align-self:flex-end;max-width:min(560px,92%);background:var(--bubble);border-radius:22px;padding:14px 20px;font-size:16px;line-height:1.55}

.lead{display:flex;flex-direction:column;gap:18px}

.meta{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;font-size:13px;color:#9a9a9a}

.meta a{color:#c4c4c4}.meta a:hover{color:var(--text)}

.badge{color:var(--text);background:var(--hover);border-radius:999px;padding:3px 10px}

.lead-title{margin:0;font-size:clamp(28px,4vw,38px);line-height:1.15;letter-spacing:-.02em;font-weight:600;text-wrap:balance}

.lead-title a{color:var(--text)}.lead-title a:hover{color:#fff}

.lead-excerpt{margin:0;font-size:17px;line-height:1.7;color:var(--soft);text-wrap:pretty}

.lead-excerpt p{margin:0}

.steps{display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--muted)}

.step{display:flex;gap:10px;align-items:center;min-width:0}

.step span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

.step-ic{font-family:var(--mono);font-size:12px;border:1px solid #444;border-radius:4px;padding:0 5px;color:#b4b4b4;flex-shrink:0}

.thumb{border-radius:14px;overflow:hidden;border:1px solid #333}

.thumb img{display:block;width:100%}

.actions{display:flex;gap:8px;flex-wrap:wrap}

.sep{height:1px;background:var(--line);border:0;margin:0}



.feed-label{font-size:13px;color:var(--dim);margin:0 0 8px}

.feed{display:flex;flex-direction:column;gap:6px}

.card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;padding:18px 16px;margin:0 -16px;border-radius:14px;color:var(--text)}

.card:hover{background:var(--hover);color:var(--text)}

.card-body{display:flex;flex-direction:column;gap:8px;min-width:0}

.card h3{margin:0;font-size:19px;line-height:1.35;font-weight:500;letter-spacing:-.01em;text-wrap:pretty}

.card p{margin:0;font-size:15px;line-height:1.6;color:var(--muted);text-wrap:pretty}

.card .arrow{font-size:18px;color:var(--faint);align-self:center}

.tags{display:flex;gap:6px;flex-wrap:wrap}

.tag,.tags a{font-family:var(--mono);font-size:12px;color:#d0d0d0;background:#2f2f2f;border-radius:6px;padding:2px 8px}

.tags a:hover{background:#3a3a3a;color:var(--text)}

.empty{color:var(--dim);font-size:15px;padding:24px 0}



.pagination .nav-links,.post-nav{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;font-size:14px}

.page-numbers{padding:7px 12px;border-radius:8px;color:var(--muted)}

a.page-numbers:hover{background:var(--hover);color:var(--text)}

.page-numbers.current{background:var(--bubble);color:var(--text)}

.post-nav{justify-content:space-between;gap:12px}

.post-nav a{flex:1 1 240px;border:1px solid var(--line2);border-radius:14px;padding:14px 16px;color:var(--text);display:flex;flex-direction:column;gap:4px}

.post-nav a:hover{background:var(--hover)}

.post-nav small{color:var(--dim);font-size:12px}

.post-nav .next{text-align:right}



.entry{font-size:17px;line-height:1.75;color:var(--soft)}

.entry>*{margin:0 0 1.1em}

.entry h2,.entry h3,.entry h4{color:var(--text);letter-spacing:-.015em;line-height:1.25;margin:1.8em 0 .6em;font-weight:600}

.entry h2{font-size:26px}.entry h3{font-size:21px}.entry h4{font-size:18px}

.entry a{text-decoration:underline;text-decoration-color:oklch(0.74 0.13 250 / .4);text-underline-offset:3px}

.entry ul,.entry ol{padding-left:1.3em}

.entry li{margin:.3em 0}

.entry blockquote{margin:1.4em 0;padding:14px 20px;background:var(--bubble);border-radius:18px;color:var(--text)}

.entry blockquote p{margin:0}

.entry hr{border:0;height:1px;background:var(--line);margin:2em 0}

.entry table{width:100%;border-collapse:collapse;font-size:15px}

.entry th,.entry td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}

.entry th{color:var(--text);font-weight:500}

.entry figure{margin:1.4em 0}

.entry figcaption{font-size:13px;color:var(--dim);margin-top:8px;text-align:center}

.entry img{border-radius:12px}

code,kbd,samp{font-family:var(--mono);font-size:.84em}

:not(pre)>code{background:#2f2f2f;border-radius:6px;padding:2px 7px;color:var(--text)}

.code-wrap{border:1px solid #333;border-radius:14px;overflow:hidden;background:#1a1a1a;margin:1.4em 0}

.code-head{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid #2c2c2c;font-size:13px;color:#b4b4b4}

.code-head .lang{flex:1;font-family:var(--mono)}

.code-copy{font:inherit;font-size:12px;color:#c4c4c4;background:#2a2a2a;border:0;border-radius:6px;padding:4px 10px;cursor:pointer}

.code-copy:hover{background:#353535}

pre{margin:0;padding:14px 18px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.75;color:#d0d0d0;background:#1a1a1a}

.entry>pre{border:1px solid #333;border-radius:14px}

.code-wrap pre{border:0;border-radius:0;margin:0}

pre .line-add{display:block;margin:0 -18px;padding:0 18px;background:oklch(0.72 0.15 150 / .14);box-shadow:inset 3px 0 var(--add);color:oklch(0.85 0.1 150)}

pre .line-del{display:block;margin:0 -18px;padding:0 18px;background:oklch(0.66 0.17 25 / .16);box-shadow:inset 3px 0 var(--del);color:oklch(0.8 0.1 25)}

.alignwide,.alignfull{width:100%}

.wp-block-button__link{background:var(--text);color:#1a1a1a;border-radius:999px;padding:8px 16px;font-size:14px}



.author-box{display:flex;gap:14px;align-items:center;border:1px solid var(--line2);border-radius:18px;padding:16px 18px}

.author-box .avatar-sm{width:44px;height:44px}

.author-box b{display:block}

.author-box p{margin:2px 0 0;font-size:14px;color:var(--muted)}



.comments-area{display:flex;flex-direction:column;gap:18px}

.comments-title{font-size:20px;margin:0;font-weight:600}

.comment-list,.comment-list .children{list-style:none;margin:0;padding:0}

.comment-list .children{padding-left:28px}

.comment-body{padding:14px 0;border-bottom:1px solid var(--line)}

.comment-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dim)}

.comment-meta img{border-radius:50%}

.comment-author .fn{color:var(--text);font-style:normal;font-weight:500}

.comment-author .says{display:none}

.comment-metadata a{color:var(--dim)}

.comment-content{font-size:15px;color:var(--soft)}

.reply a{font-size:13px}

.comment-respond{background:var(--bubble);border:1px solid var(--line2);border-radius:24px;padding:18px 20px}

.comment-reply-title{margin:0 0 10px;font-size:16px}

.comment-form{display:flex;flex-direction:column;gap:10px}

.comment-form p{margin:0}

.comment-form label{display:block;font-size:13px;color:var(--dim);margin-bottom:4px}

input[type=text],input[type=email],input[type=url],input[type=search],textarea{width:100%;background:#262626;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;color:var(--text);font:inherit;font-size:15px;outline:0}

input:focus,textarea:focus{border-color:#555}

.comment-form .submit{background:var(--text);color:#1a1a1a;border:0;border-radius:999px;padding:9px 18px;font:inherit;font-weight:500;cursor:pointer}



.composer-dock{position:sticky;bottom:0;padding:0 16px 18px;background:linear-gradient(to top,var(--bg) 65%,rgba(33,33,33,0));margin-top:-140px}

.composer{max-width:780px;margin:0 auto;background:var(--bubble);border:1px solid var(--line2);border-radius:24px;padding:12px 14px 10px;display:flex;flex-direction:column;gap:8px}

.composer input[type=search]{background:transparent;border:0;padding:4px 6px;font-size:16px}

.composer-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.composer-hint{font-size:13px;color:var(--warn)}

.composer-spacer{flex:1}

.composer-send{width:34px;height:34px;border-radius:50%;border:0;background:var(--text);color:#1a1a1a;font-size:16px;cursor:pointer}

.composer-send:hover{background:#fff}



.site-footer{max-width:780px;margin:0 auto;padding:0 24px 24px;font-size:13px;color:var(--faint);text-align:center}



@media (max-width:900px){

 .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:40;width:min(300px,86vw);height:100%;transform:translateX(-105%);transition:transform .25s ease}

 .admin-bar .sidebar{top:0;height:100%}

 body.nav-open .sidebar{transform:none;box-shadow:0 0 40px rgba(0,0,0,.5)}

 body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:30}

 body.nav-open{overflow:hidden}

 .sb-close,.menu-toggle{display:inline-flex}

 .tb-share{display:none}

}

@media (max-width:782px){.admin-bar .topbar{top:46px}}

@media (max-width:600px){.content{padding:24px 16px 170px;gap:36px}.topbar{padding:10px 14px}}


.related-panel{width:320px;flex:0 0 320px;background:var(--side);border-left:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto}

.related-heading{height:65px;display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);color:var(--muted)}

.related-heading h2{font-size:15px;font-weight:500;color:var(--text);margin:0;flex:1}

.related-count{font:12px var(--mono);background:var(--bubble);padding:3px 7px;border-radius:5px}

.related-list{display:flex;flex-direction:column;padding:8px 0}

.related-item{display:flex;gap:12px;align-items:center;padding:16px 18px;color:var(--text);border-bottom:1px solid var(--line)}

.related-item:hover,.related-item:focus-visible{background:var(--hover);color:var(--text)}

.related-item:focus-visible{outline:2px solid var(--link);outline-offset:-2px}

.related-thumb{width:68px;height:68px;flex:0 0 68px;object-fit:cover;border-radius:8px;background:var(--bubble)}

.related-placeholder{display:grid;place-items:center;font:20px var(--mono);color:var(--muted)}

.related-copy{min-width:0;flex:1}.related-title{display:block;font-size:14px;line-height:1.45;overflow-wrap:anywhere}.related-meta{display:block;font-size:11px;color:var(--dim);margin-top:6px}.related-arrow{color:var(--dim);font-size:13px}

.admin-bar .related-panel{top:32px;height:calc(100vh - 32px)}

@media(min-width:901px) and (max-width:1200px){.related-panel{width:265px;flex-basis:265px}.related-item{padding:13px 12px;gap:9px}.related-thumb{width:52px;height:52px;flex-basis:52px}}

@media(max-width:1100px) and (min-width:901px){:root{--sw:220px}}

@media(max-width:900px){.app{flex-wrap:wrap}.main{width:100%;flex-basis:100%}.related-panel,.admin-bar .related-panel{position:static;width:100%;flex-basis:100%;height:auto;border-left:0;border-top:1px solid var(--line)}.related-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:560px){.related-list{grid-template-columns:1fr}}




 .entry .usefulmix-article{background:transparent;color:inherit}

 .entry .usefulmix-article h1,.entry .usefulmix-article h2,.entry .usefulmix-article h3,.entry .usefulmix-article h4{color:var(--text)}

 .entry .usefulmix-article .short-answer,.entry .usefulmix-article .callout,.entry .usefulmix-article .urgency-now,.entry .usefulmix-article .urgency-soon,.entry .usefulmix-article blockquote,.entry .usefulmix-article th{background:var(--bubble);color:var(--text)}

 .entry .usefulmix-article th,.entry .usefulmix-article td{border-color:var(--line2)}

 
.content{padding-bottom:60px}.archive-article{padding-bottom:30px;border-bottom:1px solid var(--line)}.entry{overflow-wrap:anywhere}.entry pre{overflow:auto}.sidebar .sb-nav span{display:inline}.sb-brand{padding:16px}.sb-scroll{overflow:auto}@media(max-width:900px){body.nav-open .sidebar{transform:translateX(0)}body.nav-open .scrim{display:block}}