/* dev.coreinto.com: a dark, terminal-like developer hub. */
body.site-dev { background: #0a1424; color: #c9d6e3; }
.site-dev h1, .site-dev h2, .site-dev h3, .site-dev h4 { color: #fff; }
.site-dev a { color: var(--teal-3); text-decoration-color: rgba(143, 227, 218, .35); }
.site-dev .muted, .site-dev .lead { color: #93a6ba; }
.site-dev .crumbs a, .site-dev .crumbs { color: #7d92a8; } .site-dev .crumbs [aria-current] { color: #fff; }
.xhead { position: sticky; top: 0; z-index: 40; background: #071528; border-bottom: 2px solid var(--teal-2); }
.xhead-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 62px; }
.xtag { font: 400 .82rem var(--mono); color: var(--teal-2); margin-left: .6rem; }
.xhead .logo-word { font-size: 1.2rem; }
.xnav { display: flex; gap: .2rem; }
.xnav a { color: #c9d6e3; padding: .5rem .7rem; font: 500 .9rem var(--mono); text-decoration: none; }
.xnav a:hover, .xnav a[aria-current] { color: var(--ink); background: var(--teal-2); }
@media (max-width: 860px) { .xnav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: #071528; padding: 1rem 16px; border-bottom: 2px solid var(--teal-2); } .xnav.open { display: flex; } .site-dev .navtoggle { display: inline-flex; color: #fff; } }
.xhero { padding: 4.5rem 0; background-image: linear-gradient(rgba(46, 196, 182, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 196, 182, .07) 1px, transparent 1px); background-size: 26px 26px; border-bottom: 1px solid #1c2f4a; }
.xhero-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.xhero .btn-ghost { color: #fff; }
.xmeta { color: #7d92a8; font-family: var(--mono); }
.term { background: #050d1a; border: 2px solid var(--teal-2); box-shadow: 10px 10px 0 rgba(46, 196, 182, .25); }
.term-bar { display: flex; gap: 6px; align-items: center; padding: .5rem .7rem; background: #0f1f36; }
.term-bar span { width: 10px; height: 10px; background: #2b4566; } .term-bar span:first-child { background: var(--teal-2); }
.term-bar em { margin-left: auto; font: 400 .75rem var(--mono); color: #7d92a8; font-style: normal; }
.term pre { margin: 0; padding: 1.1rem 1.2rem; font-size: .84rem; line-height: 1.7; color: #c9d6e3; overflow-x: auto; }
.c-p { color: var(--teal-2); } .c-s { color: #f5c46b; } .c-k { color: #8fb3ff; }
.cursor { display: inline-block; width: 8px; height: 1.1em; background: var(--teal-2); vertical-align: -.2em; animation: blink 1.1s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.xsec { background: #0a1424; } .xsec-alt { background: #0d1a2e; border-block: 1px solid #1c2f4a; }
.xgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #1c2f4a; border: 1px solid #1c2f4a; }
.xgrid-3 { grid-template-columns: repeat(3, 1fr); }
.xcard { display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem; background: #0a1424; color: #93a6ba; text-decoration: none; font-size: .9rem; }
.xcard strong { color: #fff; font: 700 1.05rem var(--display); }
.xcard code { margin-top: auto; padding-top: .6rem; color: var(--teal-2); font-size: .78rem; }
.xcard:hover { background: #10223b; box-shadow: inset 0 -3px 0 var(--teal-2); }
.xic { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--teal-2); color: var(--teal-2); margin-bottom: .4rem; }
@media (max-width: 1000px) { .xgrid, .xgrid-3 { grid-template-columns: 1fr 1fr; } .xhero-in { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .xgrid, .xgrid-3 { grid-template-columns: 1fr; } }
/* reference pages */
.xframe { display: grid; grid-template-columns: 250px minmax(0, 1fr) 220px; max-width: 1480px; margin: 0 auto; }
.xside { border-right: 1px solid #1c2f4a; background: #071528; }
.xside-in { position: sticky; top: 64px; max-height: calc(100vh - 64px); overflow-y: auto; padding: 1.4rem .8rem 2rem; font-size: .88rem; }
.xside strong { display: block; margin: 1.2rem .6rem .4rem; font: 700 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #5f7590; }
.xside strong:first-child { margin-top: 0; }
.xside a { display: flex; gap: .5rem; align-items: center; padding: .42rem .6rem; color: #c9d6e3; text-decoration: none; }
.xside a:hover { background: #10223b; }
.xside a[aria-current] { background: var(--teal-2); color: var(--ink); font-weight: 600; }
.xcontent { padding: 2rem 3rem 4rem; min-width: 0; }
.xtoc { padding: 2rem 1rem; border-left: 1px solid #1c2f4a; }
.xtoc .sticky { position: sticky; top: 90px; }
.site-dev .toc ol { border-left-color: #1c2f4a; } .site-dev .toc li a { color: #93a6ba; } .site-dev .toc li a.on, .site-dev .toc li a:hover { color: var(--teal-2); border-left-color: var(--teal-2); }
.xprose { color: #c9d6e3; }
.xprose h2 { border-bottom: 1px solid #1c2f4a; padding-bottom: .4rem; }
.xprose :not(pre) > code { background: #13253f; color: #f5c46b; }
.xprose th { background: #10223b !important; color: #fff !important; }
.xprose td, .xprose th { border-bottom-color: #1c2f4a !important; }
.site-dev .table-wrap { border-color: #1c2f4a; }
.site-dev .code pre { background: #050d1a; border-left-color: var(--teal-2); }
.site-dev .callout { background: #10223b; border-color: var(--teal-2); color: #c9d6e3; }
.site-dev .faq { border-top-color: var(--teal-2); } .site-dev .faq details { background: transparent; border-bottom-color: #1c2f4a; } .site-dev .faq summary { color: #fff; } .site-dev .faq .answer { color: #c9d6e3; }
.site-dev .faq summary::after { background: linear-gradient(#fff, #fff) center/14px 2px no-repeat, linear-gradient(#fff, #fff) center/2px 14px no-repeat; }
@media (max-width: 1100px) { .xframe { grid-template-columns: 220px minmax(0, 1fr); } .xtoc { display: none; } }
@media (max-width: 760px) { .xframe { grid-template-columns: 1fr; } .xside { display: none; } .xcontent { padding: 1.5rem 16px 3rem; } }
.site-dev .foot { background: #050d1a; }