:root{
  --bg:#eef0f4;
  --bar:#ffffff;
  --line:#d8dce4;
  --ink:#1f2328;
  --accent:#1f6feb;
  --btn:#ffffff;
  --btn-hover:#f6f7f9;
  --editor-bg:#fbfbfc;
  --editor-ink:#24292f;
  --sheet:#ffffff;
  --sheet-shadow:0 2px 14px rgba(16,22,38,.12);
  --page-w:210mm;
  --page-pad:20mm;

  /* document ki apni settings — theme se alag, PDF me bhi yehi jati hain */
  --md-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
  --paper-bg:#ffffff;
  --page-h:297mm;
  --doc-scale:1;
}

html[data-theme="dark"]{
  --bg:#0d1117;
  --bar:#161b22;
  --line:#30363d;
  --ink:#e6edf3;
  --accent:#2f81f7;
  --btn:#21262d;
  --btn-hover:#30363d;
  --editor-bg:#0d1117;
  --editor-ink:#c9d1d9;
  --sheet:#161b22;
  --sheet-shadow:0 2px 14px rgba(0,0,0,.5);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.5 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Tool apne aap me ek viewport-height "app" hai (toolbar + editor + preview).
   Marketing/FAQ content iske bahar normal document scroll me aata hai —
   is se tool ka fixed-height UX bhi bacha rehta hai aur SEO content bhi. */
.app-shell{
  height:100vh;
  display:flex;flex-direction:column;
}

/* ---------- toolbar ---------- */
.toolbar{
  padding:10px 14px;
  background:var(--bar);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.toolbar .row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.toolbar .row + .row{
  margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
}
.brand{font-weight:700;letter-spacing:.3px;margin-right:6px}
.spacer{flex:1}
.hint{font-size:12px;opacity:.7}

.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border:1px solid var(--line);border-radius:6px;
  background:var(--btn);color:var(--ink);cursor:pointer;font-size:13px;
}
.btn:hover{background:var(--btn-hover)}
.btn.icon{padding:7px 11px}
.btn.ghost{padding:7px 10px;font-size:14px;line-height:1}
.theme-icon{font-size:14px;line-height:1}

.swatch{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px 4px 5px;border:1px solid var(--line);border-radius:6px;
  background:var(--btn);font-size:13px;cursor:pointer;
}
.swatch input[type="color"]{
  width:26px;height:22px;padding:0;border:1px solid var(--line);border-radius:4px;
  background:none;cursor:pointer;
}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.07)}
.btn[disabled]{opacity:.55;cursor:default}

.field{
  padding:7px 8px;border:1px solid var(--line);border-radius:6px;
  background:var(--btn);font-size:13px;color:var(--ink);
}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;user-select:none}

/* ---------- layout ---------- */
.layout{
  display:grid;
  grid-template-columns:minmax(280px,38%) 1fr;
  flex:1;min-height:0;
}
.layout.solo{grid-template-columns:1fr}
.layout.solo #src{display:none}

#src{
  border:0;border-right:1px solid var(--line);
  padding:18px;resize:none;outline:none;
  font:13px/1.65 ui-monospace,"Cascadia Code",Consolas,monospace;
  background:var(--editor-bg);color:var(--editor-ink);
}

.preview-pane{overflow:auto;padding:24px}

/* on-screen A4 sheet */
.page{
  position:relative;
  width:var(--page-w);
  min-height:var(--page-h);
  margin:0 auto 24px;
  padding:var(--page-pad);
  /* default: sheet UI theme follow karti hai. Color chunte hi paper jeet jata hai. */
  background:var(--sheet);
  box-shadow:var(--sheet-shadow);
  border-radius:2px;
}

.markdown-body{
  font-size:calc(11pt * var(--doc-scale));
  font-family:var(--md-font);
  background:transparent;
}
/* code hamesha monospace rehta hai, chahe document font kuch bhi ho */
.markdown-body code,.markdown-body kbd,.markdown-body pre,.markdown-body samp,
.markdown-body tt{font-family:ui-monospace,"Cascadia Code",Consolas,"Courier New",monospace}
.markdown-body img{max-width:100%}
.markdown-body pre{white-space:pre-wrap;word-wrap:break-word}
.markdown-body table{width:100%;display:table}
.markdown-body .mermaid{text-align:center;margin:16px 0}
.markdown-body .mermaid svg,
.markdown-body .mermaid img{max-width:100%;height:auto}
/* diagram ka background hamesha safed — dark mode me bhi readable rahe */
.markdown-body .mermaid{background:#fff;border-radius:4px;padding:8px}

html.has-paper .page{background:var(--paper-bg)}

/* light paper pe text hamesha kaala — chahe UI dark theme me ho */
.paper-light.markdown-body,
.paper-light .markdown-body,
.paper-light h1,.paper-light h2,.paper-light h3,
.paper-light h4,.paper-light h5,.paper-light h6,
.paper-light p,.paper-light li,.paper-light strong,
.paper-light td,.paper-light th{color:#1f2328}
.paper-light h1,.paper-light h2{border-bottom-color:rgba(31,35,40,.18)}
.paper-light a{color:#0969da}
.paper-light hr{background-color:rgba(31,35,40,.18)}
.paper-light blockquote{color:#59636e;border-left-color:rgba(31,35,40,.22)}
.paper-light table td,.paper-light table th{border-color:rgba(31,35,40,.2)}
.paper-light table tr{background-color:transparent;border-top-color:rgba(31,35,40,.2)}
.paper-light table tr:nth-child(2n){background-color:rgba(31,35,40,.04)}
.paper-light pre,.paper-light code,.paper-light tt{
  background-color:rgba(31,35,40,.06);color:#1f2328;
}
.paper-light pre code{background:transparent;color:inherit}

/* ---------- dark page color pe text readable rakho ----------
   github-markdown-css hardcoded colors use karta hai, is liye override zaroori hai. */
.paper-dark.markdown-body,
.paper-dark .markdown-body{color:#e8edf3}
.paper-dark h1,.paper-dark h2,.paper-dark h3,
.paper-dark h4,.paper-dark h5,.paper-dark h6,
.paper-dark strong,.paper-dark li,.paper-dark p,
.paper-dark td,.paper-dark th{color:#e8edf3}
.paper-dark h1,.paper-dark h2{border-bottom-color:rgba(255,255,255,.22)}
.paper-dark a{color:#7cb7ff}
.paper-dark hr{background-color:rgba(255,255,255,.22)}
.paper-dark blockquote{color:#b7c0cc;border-left-color:rgba(255,255,255,.28)}
.paper-dark table td,.paper-dark table th{border-color:rgba(255,255,255,.24)}
.paper-dark table tr{background-color:transparent;border-top-color:rgba(255,255,255,.24)}
.paper-dark table tr:nth-child(2n){background-color:rgba(255,255,255,.05)}
.paper-dark pre,.paper-dark code,.paper-dark tt{
  background-color:rgba(255,255,255,.08);color:#e8edf3;
}
.paper-dark pre code{background:transparent}

/* ---------- cover page ---------- */
.doc-cover{
  min-height:60vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;gap:10px;
  border-bottom:0;
}
.doc-cover .cover-title{
  font-size:30pt;font-weight:700;line-height:1.2;margin:0;border:0;padding:0;
}
.doc-cover .cover-subtitle{font-size:15pt;opacity:.75;margin:0}
.doc-cover .cover-meta{font-size:11pt;opacity:.7;margin:0}
.doc-cover .cover-rule{
  width:70px;height:3px;background:currentColor;opacity:.35;margin:14px 0;border:0;
}

/* ---------- table of contents ---------- */
.doc-toc .toc-title{
  font-size:16pt;font-weight:700;margin:0 0 14px;padding-bottom:6px;
  border-bottom:1px solid currentColor;border-color:inherit;opacity:.95;
}
.doc-toc ul{list-style:none;padding:0;margin:0}
.doc-toc li{margin:5px 0}
.doc-toc .lvl-1{font-weight:600}
.doc-toc .lvl-2{padding-left:16px;font-size:.96em}
.doc-toc .lvl-3{padding-left:34px;font-size:.92em;opacity:.85}
.doc-toc a{text-decoration:none}
.doc-toc a:hover{text-decoration:underline}

/* ---------- footnotes ---------- */
.doc-footnotes{margin-top:28px;padding-top:10px;border-top:1px solid currentColor;border-color:inherit}
.doc-footnotes .fn-heading{font-size:11pt;font-weight:600;margin:0 0 8px;opacity:.8}
.doc-footnotes ol{padding-left:20px;margin:0}
.doc-footnotes li{font-size:9.5pt;margin:4px 0}
.doc-footnotes li p{margin:0;display:inline}
.markdown-body img[data-missing]{
  min-width:120px;padding:10px 14px;
  border:1px dashed currentColor;border-radius:4px;opacity:.6;font-size:9pt;
}

sup.fn-ref{font-size:.72em;line-height:0}
sup.fn-ref a{text-decoration:none;padding:0 1px}

/* ---------- heading numbering ---------- */
.heading-num{opacity:.65;font-variant-numeric:tabular-nums;margin-right:.5em}
.doc-toc .heading-num{margin-right:.4em}

/* ---------- watermark ---------- */
.wm-mark{
  position:absolute;inset:0;
  display:none;
  align-items:center;justify-content:center;
  pointer-events:none;z-index:0;
  font-size:64pt;font-weight:800;letter-spacing:.08em;
  color:currentColor;opacity:.09;
  transform:rotate(-32deg);
  white-space:nowrap;overflow:hidden;
}
.wm-mark.on{display:flex}
/* fixed element Chrome me har printed page pe repeat hota hai */
.wm-fixed{position:fixed}
.markdown-body > *:not(.wm-mark){position:relative;z-index:1}

/* toolbar ka watermark input */
.wm{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.wm input{width:110px}

.print-only{display:none}

/* ---------- print / PDF ---------- */
@page{size:A4;margin:20mm}

@media print{
  /* page color margins tak jaye — is ke liye Chrome me
     "Background graphics" on hona chahiye */
  html,body{
    background:var(--paper-bg);margin:0;padding:0;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .no-print,.toolbar,.layout{display:none !important}

  .print-only{
    display:block !important;
    width:auto;margin:0;padding:0;
    background:var(--paper-bg);font-size:11pt;
    font-family:var(--md-font);
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }

  /* nothing should get sliced in half */
  .print-only h1,.print-only h2,.print-only h3,
  .print-only h4,.print-only h5,.print-only h6{
    break-after:avoid-page;page-break-after:avoid;
  }
  .print-only pre,.print-only blockquote,.print-only table,
  .print-only figure,.print-only img,.print-only .mermaid,
  .print-only li{
    break-inside:avoid;page-break-inside:avoid;
  }
  .print-only thead{display:table-header-group}
  .print-only tr{break-inside:avoid}
  .print-only a{color:inherit;text-decoration:underline}

  .print-only .page-break{
    break-before:page;page-break-before:always;
  }
  .print-only .doc-cover,
  .print-only .doc-toc{
    break-after:page;page-break-after:always;
  }
  .print-only .doc-cover{min-height:0;height:80vh;justify-content:center}
  .print-only .doc-footnotes{break-inside:avoid;page-break-inside:avoid}

  /* link ke baad uska URL */
  .print-only.show-urls a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:.82em;opacity:.65;word-break:break-all;
  }
}

/* preview me bhi wahi dikhe jo PDF me jayega */
.page.show-urls a[href^="http"]::after,
.pdf-mode.show-urls a[href^="http"]::after{
  content:" (" attr(href) ")";
  font-size:.82em;opacity:.65;word-break:break-all;
}
/* raster route me watermark jsPDF se lagta hai, DOM se nahi */
.pdf-mode .wm-mark{display:none !important}

/* html2pdf ke liye same rules screen context me chahiye */
.pdf-mode .page-break{break-before:page;page-break-before:always}
.pdf-mode .doc-cover,.pdf-mode .doc-toc{break-after:page;page-break-after:always}
.pdf-mode .doc-cover{min-height:0;height:230mm}
.pdf-mode pre,.pdf-mode table,.pdf-mode blockquote,
.pdf-mode img,.pdf-mode .mermaid,.pdf-mode li{
  break-inside:avoid;page-break-inside:avoid;
}
.pdf-mode h1,.pdf-mode h2,.pdf-mode h3{break-after:avoid;page-break-after:avoid}

@media (max-width:900px){
  /* choti screen pe toolbar 3 rows me phail jata hai, is liye
     poora page normal tarah scroll karta hai */
  .app-shell{height:auto}
  .toolbar{position:static}
  .layout{grid-template-columns:1fr;height:auto}
  .preview-pane{overflow:visible;padding:14px}
  #src{border-right:0;border-bottom:1px solid var(--line);min-height:40vh}
  .page{width:100%;min-height:0;padding:16px}
}

/* ---------- intro strip (SEO H1, ek line) ---------- */
.intro{
  padding:10px 16px;
  background:var(--bar);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.intro h1{font-size:15px;margin:0 0 2px;font-weight:700}
.intro p{margin:0;font-size:12.5px;opacity:.75}
.intro code{font-family:ui-monospace,Consolas,monospace;background:var(--btn);padding:1px 4px;border-radius:3px}

/* ---------- marketing / FAQ content (SEO + AdSense) ---------- */
.marketing{background:var(--sheet);border-top:1px solid var(--line)}
.marketing-inner{max-width:760px;margin:0 auto;padding:48px 20px;color:var(--ink)}
.marketing h2{font-size:20px;margin:32px 0 14px}
.marketing h2:first-child{margin-top:0}
.marketing p{line-height:1.65;opacity:.9}

.feature-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;
  list-style:none;padding:0;margin:0;
}
.feature-grid li{line-height:1.5;font-size:14px}

.steps{padding-left:22px;line-height:1.8}

.faq dt{font-weight:600;margin-top:16px}
.faq dd{margin:4px 0 0;opacity:.85;line-height:1.6}

.site-footer{
  display:flex;justify-content:center;gap:20px;
  padding:20px;font-size:13px;opacity:.75;
  background:var(--sheet);border-top:1px solid var(--line);
}
.site-footer a{color:inherit}

@media (max-width:600px){
  .feature-grid{grid-template-columns:1fr}
}