*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#ffffff;--bg2:#f6f8fa;--bg3:#eef1f5;--bg4:#dde3ea;
  --bd:#d1d9e0;--tx:#1f2328;--tx2:#59636e;--tx3:#8b949e;
  --lk:#0969da;--ac:#0969da;--ac2:#0550ae;
  --grn:#1a7f37;--ylw:#9a6700;--red:#cf222e;--pur:#8250df;
  --code:#f6f8fa;
  --w:1120px;
}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans CJK SC','PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--tx);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--lk);text-decoration:none;transition:color .15s}
a:hover{color:var(--ac2);text-decoration:underline}
code{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.88em;background:var(--code);border:1px solid var(--bd);border-radius:5px;padding:1px 6px;color:var(--tx)}
pre{background:var(--code);border:1px solid var(--bd);border-radius:10px;padding:20px 22px;overflow-x:auto;margin:16px 0;line-height:1.6}
pre code{background:0 0;border:0;padding:0;font-size:.88em;color:var(--tx)}

/* ---- Language toggle ---- */
.lang-toggle{position:fixed;top:16px;right:24px;z-index:100;display:flex;border-radius:20px;border:1px solid var(--bd);background:var(--bg);overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.lang-btn{padding:6px 14px;border:none;background:transparent;color:var(--tx3);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.lang-btn.active{background:var(--ac);color:#fff}

/* ---- Hero ---- */
.hero{padding:60px 0 48px;text-align:center;position:relative;overflow:hidden;background:linear-gradient(180deg,#f0f6ff 0%,#ffffff 100%)}
.hero::before{content:'';position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:800px;height:500px;background:radial-gradient(ellipse,rgba(9,105,218,.07) 0%,transparent 70%);pointer-events:none}
.hero-inner{position:relative;max-width:var(--w);margin:0 auto;padding:0 24px}
.logo{display:inline-flex;align-items:center;gap:14px;margin-bottom:20px}
.logo svg{width:48px;height:48px;color:var(--ac);flex-shrink:0;transform:translateY(4px)}
.logo span{font-size:40px;font-weight:700;background:linear-gradient(135deg,#0969da 0%,#8250df 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.hero h1{font-size:22px;font-weight:400;color:var(--tx2);max-width:700px;margin:0 auto 28px;line-height:1.6}
.hero-badges{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:20px;font-size:14px;font-weight:500;border:1px solid var(--bd);background:var(--bg);color:var(--tx2)}
.badge .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.badge .dot.c{background:var(--grn)}.badge .dot.k{background:var(--ylw)}.badge .dot.p{background:var(--pur)}
.hero-actions{display:flex;justify-content:center;gap:12px;margin-top:24px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 26px;border-radius:8px;font-size:16px;font-weight:500;text-decoration:none!important;transition:all .2s}
.btn-primary{background:var(--ac);color:#fff;border:1px solid var(--ac)}.btn-primary:hover{background:var(--ac2);color:#fff}
.btn-outline{background:var(--bg);color:var(--tx);border:1px solid var(--bd)}.btn-outline:hover{border-color:var(--tx3);background:var(--bg2)}

/* ---- Section ---- */
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
section{padding:56px 0}
section:nth-child(even){background:var(--bg2)}
.section-title{font-size:28px;font-weight:700;margin-bottom:10px;color:var(--tx)}
.section-sub{color:var(--tx2);font-size:16px;margin-bottom:36px;max-width:900px}

/* ---- Framework image ---- */
.framework-img{margin:32px 0;text-align:center}
.framework-img img{max-width:80%;border-radius:12px;border:1px solid var(--bd);background:var(--bg);padding:12px}

/* ---- Feature cards ---- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.feat{background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:24px;transition:border-color .2s,box-shadow .2s}
.feat:hover{border-color:var(--ac);box-shadow:0 2px 12px rgba(9,105,218,.08)}
.feat-header{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.feat-icon{font-size:20px;line-height:1;flex-shrink:0}
.feat h3{font-size:17px;font-weight:600;color:var(--tx)}
.feat p{font-size:15px;color:var(--tx2);line-height:1.6}

/* ---- Profiler table ---- */
.tbl-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--bd);background:var(--bg)}
table{width:100%;border-collapse:collapse;font-size:15px}
th{background:var(--bg2);font-weight:600;text-align:left;padding:12px 16px;border-bottom:1px solid var(--bd);white-space:nowrap;color:var(--tx2);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
td{padding:11px 16px;border-bottom:1px solid var(--bg3);vertical-align:top}
tr:last-child td{border-bottom:0}
tr:hover{background:var(--bg2)}
td:first-child{font-weight:600;white-space:nowrap;color:var(--lk)}
.tag{display:inline-block;padding:2px 10px;border-radius:4px;font-size:12px;font-weight:600;margin-left:4px}
.tag-cpu{background:#ddf4e4;color:var(--grn)}
.tag-mem{background:#eddeff;color:var(--pur)}
.tag-io{background:#fef3d3;color:var(--ylw)}
.tag-sched{background:#ddf4ff;color:var(--lk)}
.tag-vm{background:#ffebe9;color:var(--red)}
.tag-trace{background:var(--bg3);color:var(--tx2)}

/* ---- Workflow ---- */
.workflows{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.wf{background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:24px;transition:border-color .2s;min-width:0;overflow:hidden}
.wf:hover{border-color:var(--ac)}
.wf h3{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--tx)}
.wf pre{margin:0;font-size:.85em;border-radius:8px}

/* ---- Problem guide ---- */
.guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.guide-item{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:18px 20px;transition:border-color .2s,box-shadow .2s}
.guide-item:hover{border-color:var(--ac);box-shadow:0 2px 8px rgba(9,105,218,.06)}
.guide-item h4{font-size:15px;font-weight:600;margin-bottom:6px;color:var(--tx)}
.guide-item p{font-size:14px;color:var(--tx2);margin-bottom:8px}
.guide-item code{font-size:13px;margin-right:4px;margin-bottom:4px;display:inline-block}

/* ---- Comparison ---- */
.cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:24px}
.cmp-item{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:20px 22px;text-align:center;transition:border-color .2s}
.cmp-item.highlight{border-color:var(--ac);background:linear-gradient(180deg,#f0f6ff 0%,var(--bg) 100%)}
.cmp-item h4{font-size:16px;font-weight:600;margin-bottom:4px;color:var(--tx)}
.cmp-item .sub{font-size:13px;color:var(--tx3);margin-bottom:10px}
.cmp-item ul{text-align:left;list-style:none;padding:0;font-size:14px;color:var(--tx2)}
.cmp-item li{padding:3px 0}
.cmp-item li::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--bd);margin-right:8px;vertical-align:middle}
.cmp-item.highlight li::before{background:var(--ac)}

/* ---- Inline card helpers ---- */
.card{background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:24px 28px}
.card-accent{background:#f0f6ff;border-color:var(--ac)}
.card h3{font-size:17px;font-weight:600;margin-bottom:10px;color:var(--tx)}
.card p{font-size:15px;color:var(--tx2);line-height:1.65;margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.card ul{list-style:none;padding:0;font-size:14px;color:var(--tx2);margin:0}
.card li{padding:4px 0}

/* ---- Flow bar ---- */
.flow{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;font-size:15px;overflow-x:auto}
.flow-step{background:var(--bg2);border:1px solid var(--bd);padding:14px 16px;text-align:center;min-width:0;display:flex;flex-direction:column;justify-content:center}
html[lang="en"] .flow-step{flex:1}
.flow-step:first-child{border-radius:8px 0 0 8px}
.flow-step:last-child{border-radius:0 8px 8px 0}
.flow-step.accent{background:#f0f6ff;border-color:var(--ac)}
.flow-step strong{display:block;font-size:15px;color:var(--tx);margin-bottom:2px}
.flow-step span{font-size:13px;color:var(--tx3)}
.flow-arrow{color:var(--tx3);padding:0 6px;font-size:22px;display:flex;align-items:center}

/* ---- Footer ---- */
footer{border-top:1px solid var(--bd);padding:36px 0;margin-top:48px;text-align:center;color:var(--tx3);font-size:14px}
footer a{color:var(--tx2)}

/* ---- Responsive ---- */
@media(max-width:640px){
  .hero{padding:40px 0 32px}
  .logo span{font-size:30px}
  .hero h1{font-size:18px}
  section{padding:36px 0}
  .section-title{font-size:24px}
  .features{grid-template-columns:1fr}
  .cmp{grid-template-columns:1fr}
  .flow{font-size:12px;overflow-x:auto}
  .flow-step{min-width:80px;padding:8px 8px}
  .flow-arrow{padding:0 3px;font-size:18px}
  .workflows{grid-template-columns:1fr}
  pre{padding:14px 12px;font-size:13px}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:600px}
  .guide{grid-template-columns:1fr 1fr}
  .framework-img img{max-width:100%}
  .lang-toggle{top:10px;right:10px}
  .card{padding:18px 16px}
}