/* qkid.top unified design v3 (2026-10-05) */
:root{--brand:#173c34;--brand2:#245446;--accent:#b88a3b;--bg:#f7f5ef;--card:#fff;--text:#1f2422;--muted:#5d6661;--line:#e4dfd3;--link:#1f5f4d;--r:12px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;display:flex;flex-direction:column;min-height:100vh}
img{max-width:100%;height:auto}
a{color:var(--link)}
a:hover{color:var(--accent)}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:#fff;padding:6px 10px;z-index:10}
/* header */
.hdr{background:var(--brand);color:#fff}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{display:block;width:118px;height:52px}
.nav-btn{display:none;background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:8px;font:inherit;font-size:15px;padding:6px 12px;cursor:pointer}
.nav{display:flex;flex-wrap:wrap;gap:2px 4px;justify-content:flex-end}
.nav a{color:#fff;text-decoration:none;font-size:15px;padding:8px 10px;border-radius:8px;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{background:rgba(255,255,255,.12);color:#fff}
@media (max-width:960px){
 .nav-btn{display:block}
 .nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--brand);flex-direction:column;padding:6px 12px 14px;z-index:20;box-shadow:0 8px 16px rgba(0,0,0,.2)}
 .nav.open{display:flex}
 .nav a{padding:11px 10px;border-bottom:1px solid rgba(255,255,255,.1)}
 .hdr{position:relative}
}
/* main */
main{flex:1 0 auto;padding:18px 0 40px}
.crumbs{font-size:14px;color:var(--muted);margin:0 0 14px}
.crumbs a{color:var(--muted)}
.crumbs span[aria-hidden]{margin:0 6px}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 30px 30px;max-width:820px;margin:0 auto}
h1{font-size:clamp(1.45rem,1.15rem + 1.2vw,2.05rem);line-height:1.25;margin:0 0 10px;font-weight:700;color:#14201c}
h2{font-size:clamp(1.22rem,1.1rem + .5vw,1.45rem);line-height:1.3;margin:1.7em 0 .6em;color:#14201c}
h3{font-size:1.12rem;line-height:1.35;margin:1.4em 0 .5em;color:#14201c}
h4,h5,h6{font-size:1rem;margin:1.2em 0 .4em}
.meta{font-size:14px;color:var(--muted);margin:0 0 16px;display:flex;flex-wrap:wrap;gap:4px 14px}
.meta a{color:var(--muted)}
.lead{font-size:1.05rem;color:#38403c}
.hero{margin:0 0 20px}
.hero img{display:block;width:100%;border-radius:10px;background:#eee}
.hero picture,.tile picture,.card picture,.grid picture{display:block;width:100%}
.hero picture img,.tile picture img,.card picture img{width:100%;height:auto;display:block}

.hero figcaption,.credit{font-size:12px;color:var(--muted);margin-top:5px}
.hero.small{float:right;width:218px;margin:2px 0 12px 20px}
.hero.small img{width:218px;height:150px;object-fit:cover}
@media (max-width:600px){.post{padding:18px 16px 22px;border-radius:0;border-left:0;border-right:0;margin:0 -18px}.hero.small{float:none;margin:0 auto 16px}.hero.small img{margin:0 auto}}
.content{overflow-wrap:break-word}
.content::after{content:"";display:block;clear:both}
.content p{margin:0 0 1em}
.content ul,.content ol{padding-left:1.4em;margin:0 0 1em}
.content li{margin:.25em 0}
.content blockquote{margin:1.1em 0;padding:14px 18px;background:#f6f1e4;border-left:4px solid var(--accent);border-radius:0 10px 10px 0;font-style:normal}
.content blockquote p:last-child{margin-bottom:0}
.content img{display:block;margin:12px auto;border-radius:8px}
.table-wrap{overflow-x:auto;margin:0 0 1em}
.content table{border-collapse:collapse;width:100%;font-size:15px}
.content td,.content th{border:1px solid var(--line);padding:7px 9px;vertical-align:top}
.also{background:#f1f5f2;border-radius:8px;padding:9px 13px;font-size:15.5px}
.note,.editor-note{background:#f1f5f2;border:1px solid #d6e3dc;border-radius:10px;padding:14px 16px;margin:1.2em 0}
.note p:last-child,.editor-note p:last-child{margin-bottom:0}
.toc{background:#faf8f2;border:1px solid var(--line);border-radius:10px;margin:0 0 20px;font-size:15.5px}
.toc details>summary::-webkit-details-marker{display:none}
.toc summary::before{content:"▸ ";margin-right:4px}
.toc details[open] summary::before{content:"▾ "}
.toc summary{cursor:pointer;padding:12px 15px;font-weight:600;min-height:44px;list-style:none;display:flex;align-items:center}
.toc ol{margin:0;padding:0 18px 12px 36px}
.toc li{margin:.2em 0}
.toc .l3{margin-left:16px;list-style:circle}
.yt{position:relative;margin:1.2em 0;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.yt button,.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;cursor:pointer;background:#000}
.yt img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;opacity:.88}
.yt button::after{content:"";position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;background:#e33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M27 14v20l18-10z' fill='%23fff'/%3E%3C/svg%3E") center/68px 48px no-repeat;border-radius:12px}
.author{display:flex;gap:14px;align-items:center;border-top:1px solid var(--line);margin-top:26px;padding-top:18px;font-size:15px;color:var(--muted)}
.author img{width:56px;height:56px;border-radius:50%;flex:0 0 56px}
.author b{color:var(--text)}
/* cards */
.section{max-width:1160px;margin:30px auto 0}
.section-h{font-size:1.3rem;margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--text);transition:box-shadow .15s}
.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);color:var(--text)}
.card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#e9e5da}
.card .t{display:block;padding:11px 14px 4px;font-weight:600;line-height:1.35;font-size:16px}
.card .x{display:block;padding:0 14px 14px;font-size:14px;color:var(--muted);line-height:1.5}
.card .c{display:block;padding:12px 14px 0;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);font-weight:600}
.list-head{max-width:1160px;margin:0 auto 18px}
.list-head p{color:#38403c;max-width:820px;margin:.3em 0 0}
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:26px 0 0}
.pager a,.pager span{min-width:40px;text-align:center;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;text-decoration:none;font-size:15px}
.pager span{background:var(--brand);color:#fff;border-color:var(--brand)}
.links{columns:2 320px;column-gap:28px;padding-left:1.1em}
.links li{break-inside:avoid;margin:.2em 0}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tile{position:relative;border-radius:var(--r);overflow:hidden;display:block;color:#fff;text-decoration:none;min-height:132px;background:var(--brand2)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile span{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.72));font-weight:600;font-size:16.5px;line-height:1.3}
.tile:hover{color:#fff}.tile:hover img{filter:brightness(1.08)}
.home-intro{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 28px;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.home-intro img{width:100%;border-radius:10px;display:block}
@media (max-width:800px){.home-intro{grid-template-columns:1fr;padding:18px 16px}}
/* footer */
.ftr{background:#13302a;color:#cfd8d3;text-align:center;padding:28px 0 22px;font-size:14.5px;line-height:1.7;margin-top:auto}
.ftr a{color:#e8eee9;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 16px;margin:8px auto;max-width:900px}
.ftr .fl{font-size:13px;opacity:.9}
.ftr p{margin:8px auto;max-width:760px}
.ftr .brand{font-size:18px;font-weight:700;color:#fff}