.op-post-content .op-code{--oc-bg:#161616;--oc-bar:#0F0F0F;--oc-line:rgba(255,255,255,.07);--oc-text:#D8D8D2;--oc-dim:rgba(255,255,255,.26);position:relative;display:block;margin:0 0 26px;padding:0;background:var(--oc-bg);border:1px solid var(--oc-line);border-radius:12px;overflow:clip;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -18px rgba(0,0,0,.7);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:left;}
.op-post-content > .op-code{max-width:720px;margin:32px auto!important;}
.op-post-content .op-code--flat{border-radius:0 0 12px 12px;box-shadow:none;margin:0;}
.op-post-content .op-code__bar{display:flex;align-items:center;gap:14px;min-height:40px;padding:0 10px 0 14px;background:var(--oc-bar);border-bottom:1px solid var(--oc-line);}
.op-post-content .op-code__dots{display:flex;gap:7px;flex:0 0 auto;}
.op-post-content .op-code__dots i{display:block;width:11px;height:11px;border-radius:50%;background:#3A3A38;transition:background .25s;}
.op-post-content .op-code:hover .op-code__dots i:nth-child(1){background:#FF5F57;}
.op-post-content .op-code:hover .op-code__dots i:nth-child(2){background:#FEBC2E;}
.op-post-content .op-code:hover .op-code__dots i:nth-child(3){background:#28C840;}
.op-post-content .op-code__tab{position:relative;display:flex;align-items:center;gap:7px;align-self:stretch;min-width:0;padding:0 14px;margin-bottom:-1px;background:var(--oc-bg);border-left:1px solid var(--oc-line);border-right:1px solid var(--oc-line);color:rgba(255,255,255,.78);font-size:12px;letter-spacing:.01em;white-space:nowrap;}
.op-post-content .op-code__tab::before{content:"";position:absolute;left:-1px;right:-1px;top:0;height:2px;background:#EB9A01;}
.op-post-content .op-code__tab svg{width:13px;height:13px;flex:0 0 auto;color:#EB9A01;}
.op-post-content .op-code__name{overflow:hidden;text-overflow:ellipsis;}
.op-post-content .op-code__lang{margin-left:auto;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--oc-dim);white-space:nowrap;}
.op-post-content .op-code__copy{display:inline-flex!important;align-items:center;gap:6px;flex:0 0 auto;height:26px;padding:0 10px!important;margin:0!important;background:transparent!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:6px!important;color:rgba(255,255,255,.62)!important;font:500 10px/1 'JetBrains Mono',ui-monospace,Menlo,monospace!important;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:none!important;-webkit-appearance:none;appearance:none;transition:color .2s,border-color .2s,background .2s;}
.op-post-content .op-code__copy svg{width:12px;height:12px;}
.op-post-content .op-code__copy:hover,.op-post-content .op-code__copy:focus-visible{color:#1A1A1A!important;background:#EB9A01!important;border-color:#EB9A01!important;}
.op-post-content .op-code__copy.is-copied{color:#1A1A1A!important;background:#FFF1D1!important;border-color:#FFF1D1!important;}
.op-post-content .op-code__body{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;}
.op-post-content .op-code__body::-webkit-scrollbar{height:8px;}
.op-post-content .op-code__body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px;}
.op-post-content .op-code__ln{position:sticky;left:0;z-index:1;flex:0 0 auto;padding:18px 14px 20px 16px;background:var(--oc-bg);border-right:1px solid var(--oc-line);color:var(--oc-dim);font-size:13px;line-height:1.75;text-align:right;white-space:pre;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums;}
.op-post-content .op-code pre.op-code__pre{flex:1 0 auto;margin:0!important;padding:18px 22px 20px 18px!important;background:none!important;border:0!important;border-radius:0!important;overflow:visible!important;max-width:none!important;white-space:pre!important;}
.op-post-content .op-code pre.op-code__pre code{display:block;padding:0!important;margin:0!important;background:none!important;border:0!important;border-radius:0!important;font-family:inherit!important;font-size:13px!important;line-height:1.75!important;color:var(--oc-text)!important;white-space:pre!important;tab-size:4;font-variant-ligatures:none;}
.op-post-content .op-code--single pre.op-code__pre{padding:16px 20px!important;}
.op-post-content .op-code--single pre.op-code__pre,.op-post-content .op-code--single pre.op-code__pre code{white-space:pre-wrap!important;overflow-wrap:anywhere;}
.op-post-content .op-code code .c{color:#6F6F69;font-style:italic;}
.op-post-content .op-code code .k{color:#C792EA;}
.op-post-content .op-code code .fn{color:#EB9A01;}
.op-post-content .op-code code .cls{color:#FFCB6B;}
.op-post-content .op-code code .s{color:#B5D99C;}
.op-post-content .op-code code .v{color:#82AAFF;}
.op-post-content .op-code code .n{color:#F78C6C;}
.op-post-content .op-code code .p{color:#89DDFF;}
.op-post-content .op-code code .o{color:#89DDFF;opacity:.75;}
.op-post-content .op-code code .t{color:#F07178;}
.op-post-content .op-code code .a{color:#FFCB6B;font-style:italic;}
.op-post-content .op-code ::selection{background:rgba(235,154,1,.28);color:inherit;}
@media (max-width:700px){
.op-post-content .op-code{border-radius:10px;}
.op-post-content .op-code__bar{gap:10px;min-height:38px;padding:0 8px 0 12px;}
.op-post-content .op-code__dots{gap:5px;}
.op-post-content .op-code__dots i{width:9px;height:9px;}
.op-post-content .op-code__tab{padding:0 10px;font-size:11px;}
.op-post-content .op-code__lang{display:none;}
.op-post-content .op-code__copy{margin-left:auto!important;padding:0 8px!important;}
.op-post-content .op-code__copy span{display:none;}
.op-post-content .op-code__ln{padding:14px 10px 16px 10px;font-size:11.5px;}
.op-post-content .op-code pre.op-code__pre{padding:14px 16px 16px 12px!important;}
.op-post-content .op-code pre.op-code__pre code{font-size:12px!important;}
}
@media (hover:none){
.op-post-content .op-code__dots i:nth-child(1){background:#FF5F57;}
.op-post-content .op-code__dots i:nth-child(2){background:#FEBC2E;}
.op-post-content .op-code__dots i:nth-child(3){background:#28C840;}
}
@media (prefers-reduced-motion:reduce){
.op-post-content .op-code__dots i,.op-post-content .op-code__copy{transition:none;}
}