<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' expr:dir='data:blog.languageDirection'
      xmlns='http://www.w3.org/1999/xhtml'
      xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data'
      xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <meta content='width=device-width, initial-scale=1' name='viewport'/>
  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
  <title><data:view.title.escaped/></title>
  <b:include data='blog' name='all-head-content'/>
  <b:skin><![CDATA[
    /* =====================================================
       ToolKuy — Magazine (Blogger Template)
       Theme by ToolKuy — https://github.com/adi805
       Palette: paper white / ink black / deep red accent
       Serif display for headings, card grid for posts
       ===================================================== */
    :root{
      --bg:#fafafa;
      --surface:#ffffff;
      --text:#111111;
      --muted:#6b7280;
      --border:#e5e5e5;
      --accent:#b91c1c;
      --accent-hover:#991b1b;
      --font-display:Georgia,"Times New Roman",serif;
      --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{-webkit-text-size-adjust:100%}
    body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
    img{max-width:100%;height:auto}
    a{color:var(--accent);text-decoration:none}
    a:hover{color:var(--accent-hover);text-decoration:underline}
    :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    ::selection{background:var(--accent);color:#fff}
    .container{max-width:1080px;margin:0 auto;padding:0 24px}

    /* Masthead */
    .site-header{text-align:center;padding:56px 0 32px;border-bottom:2px solid var(--text)}
    .site-title{font-family:var(--font-display);font-size:2.6rem;font-weight:700;letter-spacing:-0.02em;line-height:1.15}
    .site-title a{color:var(--text)}
    .site-title a:hover{color:var(--accent);text-decoration:none}
    .site-description{color:var(--muted);font-family:var(--font-display);font-style:italic;font-size:1.05rem;margin-top:10px}

    /* Posts — card grid */
    .blog-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;padding:40px 0 24px}
    .post{background:var(--surface);border:1px solid var(--border);padding:28px;display:flex;flex-direction:column}
    .post:hover{border-color:var(--accent)}
    .post-date{color:var(--accent);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em}
    .post-title{font-family:var(--font-display);font-size:1.35rem;line-height:1.3;margin:10px 0 14px}
    .post-title a{color:var(--text)}
    .post-title a:hover{color:var(--accent);text-decoration:none}
    .post-body{color:#3f3f46;font-size:.95rem}
    .post-body p{margin-bottom:1em}
    .post-body a{border-bottom:1px solid var(--accent)}
    .post-labels{margin-top:auto;padding-top:18px}
    .label{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin-right:12px}
    .label:hover{color:var(--accent);text-decoration:none}

    /* Pager */
    .blog-pager{display:flex;justify-content:space-between;gap:16px;padding:8px 0 48px}
    .blog-pager a{border:1px solid var(--border);padding:10px 16px;color:var(--text);font-size:.9rem}
    .blog-pager a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
    .older{margin-right:auto}
    .newer{margin-left:auto}

    /* Footer */
    .site-footer{border-top:1px solid var(--border);padding:24px 0}
    .attribution{color:var(--muted);font-size:.82rem;text-align:center}
    .attribution a{color:var(--muted)}
    .attribution a:hover{color:var(--accent)}

    @media (max-width:640px){
      .site-header{padding:40px 0 24px}
      .site-title{font-size:2rem}
      .blog-posts{grid-template-columns:1fr}
      .blog-pager{flex-direction:column}
      .blog-pager a{text-align:center}
      .post{padding:22px}
    }
  ]]></b:skin>
</head>
<body expr:class='data:blog.pageType'>
  <header class='site-header'>
    <div class='container'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='ToolKuy (Header)' type='Header'>
          <b:includable id='main'>
            <b:if cond='data:blog.url == data:blog.homepageUrl'>
              <h1 class='site-title'><data:title/></h1>
            <b:else/>
              <h2 class='site-title'><a expr:href='data:blog.homepageUrl'><data:title/></a></h2>
            </b:if>
            <b:if cond='data:description != &quot;&quot;'>
              <p class='site-description'><data:description/></p>
            </b:if>
          </b:includable>
        </b:widget>
      </b:section>
    </div>
  </header>

  <main class='main-content'>
    <div class='container'>
      <b:section class='content' id='content' name='content' showaddelement='yes'>
        <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
          <b:includable id='main' var='top'>
            <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
              <div class='blog-posts'>
                <b:loop values='data:posts' var='post'>
                  <b:include data='post' name='post'/>
                </b:loop>
              </div>
              <b:include name='nextprev'/>
            </b:if>
          </b:includable>
          <b:includable id='post' var='post'>
            <article class='post'>
              <div class='post-meta'>
                <span class='post-date'><data:post.dateHeader/></span>
              </div>
              <h2 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h2>
              <div class='post-body entry-content'>
                <data:post.body/>
              </div>
              <b:include data='post' name='labels'/>
            </article>
          </b:includable>
          <b:includable id='labels' var='post'>
            <b:if cond='data:post.labels'>
              <div class='post-labels'>
                <b:loop values='data:post.labels' var='label'>
                  <a class='label' expr:href='data:label.url' rel='tag'><data:label.name/></a>
                </b:loop>
              </div>
            </b:if>
          </b:includable>
          <b:includable id='nextprev'>
            <nav class='blog-pager'>
              <b:if cond='data:olderPageUrl'>
                <a class='older' expr:href='data:olderPageUrl'>← <data:olderPageTitle/></a>
              </b:if>
              <b:if cond='data:newerPageUrl'>
                <a class='newer' expr:href='data:newerPageUrl'><data:newerPageTitle/> →</a>
              </b:if>
            </nav>
          </b:includable>
          <b:includable id='status-message'/>
        </b:widget>
      </b:section>
    </div>
  </main>

  <footer class='site-footer'>
    <div class='container'>
      <b:section class='attribution-section' id='attribution' maxwidgets='1' showaddelement='no'>
        <b:widget id='Attribution1' locked='true' title='' type='Attribution'>
          <b:includable id='main'>
            <div class='attribution'>
              <span>Powered by <a href='https://www.blogger.com'>Blogger</a> · Theme by ToolKuy</span>
            </div>
          </b:includable>
        </b:widget>
      </b:section>
    </div>
  </footer>
</body>
</html>
