/* Dark theme for subpages - matches index.php */
*,::before,::after{box-sizing:border-box}
:root{color-scheme:dark;--page:#0b0d12;--ink:#d9dce4;--mute:#8a90a0;--blk:#fff;--line:#252a36;--soft:#171a23;--gr:#a3e635;--red:#f87171;--dk:#0b0d12;--r:16px}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:16px/1.6 "Google Sans Flex",system-ui,sans-serif;scrollbar-width:thin}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.1;letter-spacing:-.02em;color:var(--blk)}
h1{font-size:clamp(2.3rem,5vw,3.6rem);font-weight:750}
h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700}
.wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}
.narrow{width:min(760px,calc(100% - 40px));margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.85rem 1.6rem;border-radius:99px;border:1.5px solid var(--blk);color:var(--blk);font-weight:600;text-decoration:none;background:transparent;transition:background .15s,color .15s;cursor:pointer;font-family:inherit;font-size:1rem}
.btn:hover{background:var(--soft)}
.btn.primary{background:var(--gr);border-color:var(--gr);color:var(--dk)}.btn.primary:hover{background:#bef264}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1.8rem;padding:22px 0;font-weight:500;font-size:.95rem}
.links{display:flex;align-items:center;gap:1.8rem}
.topbar a{text-decoration:none}.links a:hover,.links a.on{color:var(--gr)}
.logo{display:inline-flex;align-items:center;gap:.4rem;font:1.35rem/1 "Contrail One",sans-serif;text-transform:uppercase;color:var(--blk);border:3px solid var(--blk);border-radius:5rem;padding:.4rem 1.1rem}
.logo-icon{width:22px;height:22px;rotate:-30deg}

/* page head */
.page-head{padding:clamp(56px,8vw,110px) 0 40px}
.page-head p{margin-top:16px;font-size:1.2rem;color:var(--mute)}
.empty{padding:48px 0;color:var(--mute);text-align:center}

/* codes */
.codes-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.live{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--mute)}
.live::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gr);box-shadow:0 0 0 0 rgba(163,230,53,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(163,230,53,0)}100%{box-shadow:0 0 0 0 rgba(163,230,53,0)}}
.site-select{appearance:none;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238a90a0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center/20px;color:var(--blk);border:1px solid var(--line);border-radius:99px;padding:.7rem 2.6rem .7rem 1.2rem;font:600 .95rem "Google Sans Flex",sans-serif;cursor:pointer}
.code-list{margin-top:8px}
.code-row{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,240px) 110px 40px;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.code-row[hidden]{display:none}
.code-row img{width:32px;height:32px;border-radius:8px;object-fit:contain}
.cr-name{font-weight:600;color:var(--blk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-req{display:block;font-size:.85rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-code{font-family:ui-monospace,monospace;font-weight:700;color:var(--blk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-when{color:var(--mute);font-size:.85rem;text-align:right;white-space:nowrap}
.btn-copy{width:40px;height:40px;padding:0;border-radius:10px;border:1px solid var(--line);background:var(--soft);color:var(--mute);display:grid;place-items:center;cursor:pointer;transition:color .15s,border-color .15s}
.btn-copy:hover{color:var(--gr);border-color:var(--gr)}.btn-copy.copied{color:var(--gr);border-color:var(--gr)}
.btn-copy svg{width:18px;height:18px}
.code-row.fresh{animation:fresh 1.6s ease}
@keyframes fresh{from{background:rgba(163,230,53,.12)}to{background:transparent}}
@media(max-width:720px){.code-row{grid-template-columns:28px minmax(0,1fr) 40px;gap:12px}.cr-code{grid-column:2}.cr-when{display:none}.code-row .btn-copy{grid-row:1/3;grid-column:3}}

/* article list */
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.card{display:flex;flex-direction:column;background:var(--soft);border:1px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--gr);transform:translateY(-3px)}
.card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#11141c}
.card-body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px;flex:1}
.card-date{font-size:.85rem;color:var(--mute)}
.card h3{font-size:1.35rem;font-weight:700}
.card p{color:var(--mute)}
.card-more{margin-top:auto;padding-top:8px;font-weight:600;color:var(--gr)}

/* single article */
.back{display:inline-block;margin-top:clamp(40px,6vw,80px);color:var(--mute);text-decoration:none;font-weight:600}.back:hover{color:var(--gr)}
.art-head{padding:28px 0 36px}
.art-head .standfirst{margin-top:18px;font-size:1.3rem;color:var(--mute)}
.art-date{display:block;margin-top:20px;font-size:.9rem;color:var(--mute)}
.article-body{font-size:1.15rem;line-height:1.75}
.article-body > * + *{margin-top:1.1em}
.article-body h2{margin-top:2em;font-size:1.8rem}
.article-body h3{margin-top:1.6em;font-size:1.35rem}
.article-body b,.article-body strong{color:var(--blk)}
.article-body a{color:var(--gr);text-underline-offset:3px}
.article-body ul,.article-body ol{padding-left:1.3em}.article-body li+li{margin-top:.4em}
.article-body img{display:block;width:100%;height:auto;border-radius:16px}
.article-body .blog-image{margin:2em 0}
.article-body table{width:100%;border-collapse:collapse;font-size:1rem;display:block;overflow-x:auto}
.article-body th,.article-body td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.article-body th{color:var(--blk);font-weight:700;background:var(--soft)}
.article-body blockquote{margin-left:0;padding-left:20px;border-left:3px solid var(--gr);color:var(--blk)}
.article-body .blog-disclaimer{font-size:.9rem;color:var(--mute)}
.art-end{display:flex;flex-wrap:wrap;gap:12px;margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}

footer{padding:160px 0 56px;color:var(--mute);font-size:.85rem;text-align:center}
@media(max-width:980px){.links a:not(:last-child){display:none}}
@media(prefers-reduced-motion:reduce){.live::before,.code-row.fresh{animation:none}}