:root{
    --bg:#f5f7fb; --card:#fff; --text:#1f2937; --muted:#6b7280; --border:#dbe3ee;
    --accent:#0d6efd; --accent-2:#0b5ed7; --danger:#b42318; --success:#157347;
    --panel:#eef2f8;           /* left "welcome" panel tint */
	--tools:#cfe1fc;
	--port-badge:#083578;	
    --bar-h:56px;
    --radius:16px;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    background:var(--bg); color:var(--text); line-height:1.55;
  }
  a{color:var(--accent)}
  a:hover{color:var(--accent-2)}
.ylcheader {font-size:1.2rem;margin:6px 0 0.5em 0; padding:0 0 5px 0; color:rgb(100,100,100); font-weight:bold;} 
.attribution {border: #333333 1px dotted;color: #333333;background-color: #fef3e7;padding:5px 5px 5px 5px; font-size:small;}
.article-meta {color: var(--muted);font-size: .9rem;margin-bottom: 20px;}
.nolink {text-decoration:none;color: navy;}
.title-border {margin:6px 0 0.5em 0; padding:0 0 5px 0; border-bottom:solid 2px rgb(225,225,225);}  
  /* ---------- Top bar ---------- */
  .topbar{
    position:sticky; top:0; z-index:50;
    height:var(--bar-h); background:var(--card);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:12px; padding:0 16px;
  }
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; flex-shrink:0}
  .brand img{width:36px; height:36px; border-radius:10px; object-fit:contain}
  .brand span{white-space:nowrap}
  .topnav{margin-inline-start:auto; display:flex; align-items:center; gap:4px}
  .topnav a{
    display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px;
    text-decoration:none; color:var(--muted); font-size:.85rem; font-weight:600; letter-spacing:.02em;
  }
  .topnav a:hover{background:var(--bg); color:var(--accent)}
  .topnav svg{width:18px; height:18px; flex-shrink:0}
  /* ---------- Split layout ---------- */
  .split{
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr;
    /*min-height:calc(100vh - var(--bar-h));*/
    background:var(--card);
    border-inline:1px solid var(--border);
  }
   .sub-header{
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr;
    /*min-height:calc(100vh - var(--bar-h));*/
    background:var(--card);
    border-inline:1px solid var(--border);
  } 
  .panel-left{background:var(--panel); padding:40px 44px; border-inline-end:1px solid var(--border)}
  .panel-right{padding:20px 36px 40px}
  /* Left: welcome */
  .eyebrow{font-size:1.1rem; color:var(--muted); margin:0}
  .title{font-size:clamp(1.8rem,3.2vw,2.4rem); font-weight:600; margin:2px 0 6px; letter-spacing:.01em}
  .tagline{font-style:italic; color:var(--muted); margin:0 0 28px}
  .welcome h2{font-size:1.15rem; font-weight:600; color:var(--muted); margin:0 0 8px}
  .welcome p{margin:0 0 12px;}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 30px; padding:0; list-style:none}
  .badges li {background:var(--card); border:1px solid var(--border); border-radius:999px; padding:4px 12px; font-size:.8rem; font-weight:600; color:var(--success)}
  .badges a {color:var(--success); text-decoration:none;}
  .portbadges {display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 30px; padding:0; list-style:none}
  .portbadges li {background:var(--card); border:1px solid var(--border); border-radius:999px; padding:4px 12px; font-size:.8rem; font-weight:600; color:var(--success)}
  .portbadges a {color:var(--port-badge); text-decoration:none;}
  .section-label{font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
  .tools{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:28px}
  .tool{
    display:block; background:var(--card); border:1px solid var(--border); border-radius:14px;
    padding:12px 14px; text-decoration:none; color:var(--text); transition:border-color .15s, transform .15s;
  }
  .tool:hover{border-color:var(--accent); transform:translateY(-1px); color:var(--text)}
  .tool strong{display:block; font-size:.95rem}
  .tool small{color:var(--muted); font-size:.78rem; line-height:1.35; display:block; margin-top:2px}
  .tool.primary{background:var(--accent); border-color:var(--accent); color:#fff}
  .tool.primary small{color:#dbe8ff}
  .tool.second{background:var(--tools); border-color:var(--accent);}
  .tool.second small{color:#595959}
  .portable{
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px;
  }
  .portable p{margin:0; font-size:.9rem}
  .btn{display:inline-block; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; padding:9px 18px; border-radius:999px; font-size:.9rem}
  .btn:hover{background:var(--accent-2); color:#fff}
  /* Right: blog column */
  .pager{display:flex; align-items:center; justify-content:center; margin:0 auto 26px; max-width:280px}
  .pager button{
    border:1px solid var(--border); background:var(--bg); color:var(--accent);
    height:34px; cursor:pointer; font:inherit; font-size:.9rem;
  }
  .pager button:disabled{color:var(--border); cursor:default}
  .pager .prev,.pager .next{width:44px}
  .pager .prev{border-start-start-radius:999px; border-end-start-radius:999px}
  .pager .next{border-start-end-radius:999px; border-end-end-radius:999px}
  .pager .now{flex:1; border-inline:none; font-weight:600}
  .pager button:not(:disabled):hover{background:#e3ecfb}
  .post-meta{font-size:.8rem; color:var(--muted); margin:0 0 4px; text-transform:uppercase; letter-spacing:.06em; font-weight:600}
  .post-title{font-size:1.45rem; margin:0 0 12px; line-height:1.25}
  .post-lede{font-style:italic; margin:0 0 16px; color:var(--text)}
  .post-body p{margin:0 0 14px; font-size:.96rem}
  .read-more{display:inline-flex; align-items:center; gap:6px; font-weight:600; text-decoration:none; margin-top:4px}
  .read-more:hover{text-decoration:underline}
  .blog-footer{margin-top:28px; padding-top:16px; border-top:1px solid var(--border); font-size:.88rem; color:var(--muted)}
  /* ---------- Footer ---------- */
  footer{max-width:1200px; margin:0 auto; padding:20px 16px 36px; font-size:.82rem; color:var(--muted); text-align:center}
  footer nav{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-bottom:8px}
  footer a{color:var(--muted); text-decoration:none}
  footer a:hover{color:var(--accent)}
  /* ---------- Scroll-in-panel layout (wide screens only) ----------
     The page itself stays put: top bar, footer and pager are fixed in
     place, and only the article (and the left panel, if it gets long)
     scroll inside their own boxes. Below 861px this is switched off and
     the whole page scrolls normally, which is friendlier on phones. */
  @media (min-width:861px){
    html,body{height:100%}
    body{
      height:100vh; height:100dvh;          /* dvh = true visible height on mobile browsers */
      display:flex; flex-direction:column;
      overflow:hidden;                      /* the page no longer scrolls */
    }
    .topbar{position:relative; flex:0 0 var(--bar-h)}
    .split{flex:1 1 auto; min-height:0; width:100%}   /* min-height:0 is what lets children scroll */
    .panel-left{overflow-y:auto; min-height:0}
    .panel-right{
      display:flex; flex-direction:column;
      min-height:0; padding-bottom:0;
    }
    .pager{flex:0 0 auto; width:100%}
    #post{
      flex:1 1 auto; min-height:0;
      overflow-y:auto; overscroll-behavior:contain;
      padding-inline-end:12px;              /* keeps text off the scrollbar (either side) */
      scrollbar-width:thin; scrollbar-color:var(--border) transparent;
    }
    #post:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:6px}
    .blog-footer{flex:0 0 auto; margin-top:12px; padding-bottom:14px}
    .blog-footer:empty{display:none}
    footer{flex:0 0 auto; width:100%; padding:10px 16px 12px; border-top:1px solid var(--border)}
    footer nav{margin-bottom:2px}
  }
  /* ---------- Right-to-left (Arabic, Hebrew, Persian, Urdu...) ----------
     Layout flips automatically from dir="rtl" plus the logical
     properties used above. These rules handle what doesn't flip. */
  [dir="rtl"] body{
    font-family:system-ui,"Segoe UI","Geeza Pro","Noto Sans Arabic","Noto Sans Hebrew",Tahoma,Arial,sans-serif;
    line-height:1.8;                         /* Arabic script needs more room above/below */
  }
  /* letter-spacing breaks the joins between Arabic letters, and
     uppercase means nothing in these scripts — switch both off */
  [dir="rtl"] *{letter-spacing:0 !important; text-transform:none !important}
  [dir="rtl"] .topnav a{font-size:.9rem}
  [dir="rtl"] .post-meta{font-size:.85rem}
  /* ‹ › arrows point the reading direction: "older" points right in RTL */
  .pager .arw{display:inline-block}
  [dir="rtl"] .pager .arw{transform:scaleX(-1)}
  /* Links, emails, hashes and code stay left-to-right inside RTL text */
  [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .ltr{direction:ltr; unicode-bidi:isolate}
  [dir="rtl"] pre{text-align:left}
  /* ---------- Top bar: keep everything on one line ---------- */
  .topbar ylc-lang-picker{flex-shrink:0}
  .topnav{min-width:0}
  .topnav a{white-space:nowrap}
  /* ---------- Share / Print links at the end of the article ---------- */
  .post-actions{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px;
    margin:28px 0 24px; padding-top:18px; border-top:1px solid var(--border);
  }
  .post-action{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--bg); border:1px solid var(--border); border-radius:999px;
    padding:8px 16px; font:inherit; font-size:.9rem; font-weight:600; color:var(--accent); cursor:pointer;
  }
  .post-action:hover{border-color:var(--accent); background:#e3ecfb}
  .post-action svg{width:18px; height:18px}
  .share-status{font-size:.85rem; color:var(--success); font-weight:600}
  .print-source{display:none}
  /* ---------- Print: just the article, full length ---------- */
  @media print{
    html,body{height:auto !important; overflow:visible !important; display:block !important; background:#fff}
    .topbar, .panel-left, .pager, .blog-footer, footer, .post-actions{display:none !important}
    .split{display:block; border:none; max-width:none}
    .panel-right{padding:0; display:block}
    #post{overflow:visible !important; height:auto !important; padding:0}
    #post a{color:#000}
    .print-source{display:block; margin-top:24px; padding-top:10px; border-top:1px solid #ccc; font-size:.8rem; color:#555}
    @page{margin:18mm}
  }
  /* ---------- Responsive ---------- */
  @media (max-width:860px){
    .split{grid-template-columns:1fr; min-height:0; border-inline:none}
    .panel-left{border-inline-end:none; border-bottom:1px solid var(--border); padding:28px 16px}
    .panel-right{padding:18px 16px 32px}
	buffering {visibility:hidden;}
  }
  @media (max-width:780px){
    .topnav a span{display:none}          /* icon-only nav on phones */
    .topnav a{padding:8px 10px}
    .brand span{font-size:.95rem}
	buffering {visibility:hidden;}
  }
  @media (max-width:440px){
    .topbar{gap:6px}
    .topnav{gap:0}
    .topnav a{padding:8px}
    .brand span{font-size:.85rem}
		buffering {visibility:hidden;}
  }
  @media (max-width:360px){
    .brand span{display:none}
    .topbar{padding:0 10px}
    .topnav a{padding:8px 6px}
  }