:root{
    --bg: #F6F0E6;
    --panel: #F2E8DA;  
    --card: hsl(35deg 45% 62% / 60%);
    --border: #E6DCCD;
    --text: #2B2118;
    --muted: #7A6A5B;

    --accent: #F4A261;   
    --accent-2: #6F4929; 
    --accent-3: #F4A261; 

    --ok: #2F7D32;
    --warn: #B5882C;
    --danger: #B34A36;

    --field: hsl(35deg 45% 62% / 26%);
    --soft: #E9D8C7;  

    --radius: 14px;
    --shadow: 0 8px 24px rgba(111, 73, 41, 0.12);
    --focus: 0 0 0 3px rgba(139, 94, 52, 0.25);

    --max: 1120px;

    --text-strong: #1c140e;
    --code-fg: #3b2f28;

    --toc: 300px;  
    --gap: 28px;

    --code-block-bg: #0f172a;   
    --code-block-fg: #e5e7eb;   
    --code-block-border: #1f2937; 
    --code-inline-bg: #111827;
    --code-inline-fg: #e5e7eb;
    --code-accent: #4f46e5;   
    --code-token-comment: #94a3b8; 
    --code-token-keyword: #c084fc;
    --code-token-string:  #22c55e;
    --code-token-number:  #f59e0b;
    --code-token-func:    #60a5fa;
    --code-token-type:    #f472b6;
}

  /* ---------- Dark aliases (class-based) ---------- */
  body.dark,
  .body.dark,
  :root.dark,
  html.dark{
    --bg: #F6F0E6; 
    --panel: #424e5b;
    --card: #caa674;
    --border: #E6DCCD;

    --text: #c6bbb0;
    --muted: #a3a3ab;

    --accent: #7bb5f3; 
    --accent-2: #c6bbb0;
    --accent-3: #424e5b;
    
    --ok: #2F7D32;
    --warn: rgb(233 114 12);
    --danger: #B34A36;

    --field: hsl(35deg 45% 62% / 26%);
    --soft: #E9D8C7;

    --radius: 14px;
    --shadow: 0 8px 24px rgba(111, 73, 41, 0.12);

    --text-strong: #e7e2dd;
    --code-fg: #e6e0db;
  }

  /* ---------- Global Reset / Base ---------- */
  *{ box-sizing:border-box; }
  
  html,body{ height:100%; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family: Manrope, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .wrap{
    max-width: calc(var(--max) + var(--toc) + var(--gap));
    margin: 0 auto;
    padding: 24px 20px 80px;
  }
  a{ color: var(--accent); text-decoration: none; }
  a:hover{ text-decoration: underline; }

.breadcrumbs{ margin: 16px 0 24px; font-size: 14px; color: var(--muted); }
.breadcrumbs ol{ list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; flex-wrap: wrap; }
.breadcrumbs li{ display: inline-flex; align-items: center; }
.breadcrumbs li+li::before{
  content: "›"; /* or "·" if you prefer */
  margin: 0 8px; color: var(--muted);
}
.breadcrumbs a{ color: inherit; text-decoration: none; }
.breadcrumbs a:hover{ text-decoration: underline; }


  /* Hero */
  .hero{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
  .hero__media{ display:block; width:100%; max-height:360px; object-fit:cover; background:#000; }
  .hero__body{ padding:24px 24px 10px; }
  .title{ margin:0 0 8px; font-size: clamp(28px, 3.2vw, 40px); line-height:1.2; letter-spacing:.1px; color:var(--text-strong); }
  .summary{ color:var(--muted); font-size:18px; margin:6px 0 14px; }
  .meta{ display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:14px; }
  .site-header{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
  background: color-mix(in oklab, var(--panel) 70%, var(--bg));
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(1.1) blur(4px);
  }
  .wrap{ padding-top: 12px; } 


  /* Layout */
  .main{ display:grid; grid-template-columns:1fr; gap: var(--gap); margin-top:28px; }
  @media (min-width: 980px){
    .main{
      grid-template-columns: var(--max) var(--toc); /* article keeps full editor width */
      column-gap: var(--gap);
    }
    .toc{ position:sticky; top:20px; align-self:start; max-height: calc(100vh - 40px); overflow:auto; }
  }


  /* Article */
  .article{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; text-align: left; }
  .article img{ max-width:100%; height:auto; border-radius:12px; }
  .article figure{ margin:20px 0; }
  .article figcaption{ color:var(--muted); font-size:13px; text-align:center; margin-top:8px; }
  .article h2{ margin-top:36px; margin-bottom:10px; font-size:26px; color:var(--text-strong); }
  .article h3{ margin-top:24px; margin-bottom:8px; font-size:20px; color:var(--text-strong); }
  .article p{ margin:12px 0; }
/* Markdown lists inside the article body */
.article #articleBody ul,
.article #articleBody ol {
  /* visible indent so bullets sit in and text lines up */
  padding-left: 1.25rem;          /* main fix */
  margin: .75rem 0 .75rem 1rem;   /* little extra left offset + vertical rhythm */
  list-style-position: outside;
}

/* restore bullet/number styles even if a global reset nuked them */
.article #articleBody ul { list-style-type: disc; }
.article #articleBody ol { list-style-type: decimal; }

/* spacing between items */
.article #articleBody li { margin: .25rem 0; }

/* nested lists get a touch more indent */
.article #articleBody li > ul,
.article #articleBody li > ol {
  margin-left: 1rem;
}

  /* Callouts */
  .article blockquote{ margin:18px 0; padding:14px 16px; background:var(--field); border-left:4px solid var(--warn); border-radius:10px; }
  .article blockquote.warning{ background:var(--soft); border-left-color:var(--warn); }


  /* Force left alignment & legible monospace */
.article pre,
.article pre code,
.article :not(pre) > code{
  text-align: left !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 12px;
}



  .article pre{
  background: var(--code-block-bg) !important; 
  color: var(--code-block-fg) !important;
  border: 1px solid var(--code-block-border);
  border-radius: 12px;
  padding: 14px 16px;
  overflow: auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.article pre code.hljs{
  background: transparent !important;
  color: inherit !important;
  display: block;
  line-height: 1.55;
  tab-size: 2;
}

/* Inline `code` */
.article :not(pre) > code{
  background: var(--code-inline-bg);
  color: var(--code-inline-fg);
  border: 1px solid var(--code-block-border);
  border-radius: 8px;
  padding: .15em .35em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .92em;
}

/* Optional: nicer scrollbar inside code blocks */
.article pre::-webkit-scrollbar{ height: 10px; }
.article pre::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--code-accent) 35%, transparent);
  border-radius: 20px;
}

/* Token colors (highlight.js classnames) */
.hljs-comment,.hljs-quote{ color: var(--code-token-comment) !important; font-style: italic; }
.hljs-keyword,.hljs-selector-tag,.hljs-doctag{ color: var(--code-token-keyword) !important; font-weight: 600; }
.hljs-string,.hljs-attr,.hljs-template-tag,.hljs-template-variable{ color: var(--code-token-string) !important; }
.hljs-number,.hljs-literal,.hljs-symbol,.hljs-bullet{ color: var(--code-token-number) !important; }
.hljs-title.function_, .hljs-function .hljs-title, .hljs-attr-name{ color: var(--code-token-func) !important; }
.hljs-type,.hljs-built_in,.hljs-class .hljs-title{ color: var(--code-token-type) !important; }
.hljs-meta,.hljs-operator,.hljs-punctuation{ color: color-mix(in oklab, var(--code-block-fg) 75%, var(--code-accent)); }

/* “Language” label chip on each block */
.article pre.codeblock[data-lang]{
  position: relative;
  padding-top: 34px; /* room for the chip */
}
.article pre.codeblock[data-lang]::before{
  content: attr(data-lang);
  position: absolute; top: 6px; right: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: color-mix(in oklab, var(--code-block-fg) 75%, var(--code-accent));
  background: color-mix(in oklab, var(--code-block-bg) 75%, var(--code-accent));
  border: 1px solid var(--code-block-border);
  border-radius: 999px;
  padding: 4px 8px;
  text-transform: uppercase;
  user-select: none;
}

  /* TOC */
  .toc{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 18px 14px; }
  .toc h3{ margin:0 0 10px; font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
  .toc nav a{ display:block; font-size:14px; color:var(--muted); padding:6px 2px; border-radius:8px; text-align: left; }
  .toc nav a:hover{ color:var(--text); background: color-mix(in oklab, var(--field) 45%, transparent); }
  .toc nav a.depth-3{ padding-left:14px; font-size:13px; }

  /* Tags & Share */
  .tags{ margin-top:22px; display:flex; gap:8px; flex-wrap:wrap; }
  .tag{ padding:6px 10px; border:1px solid var(--border); border-radius:999px; font-size:13px; background:var(--soft); color:var(--accent-2); font-weight:600; }
  .share{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; border-top:1px dashed var(--border); padding-top:18px; }
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--accent); color:#fff; cursor:pointer; font-weight:600; transition: filter .18s ease, transform .06s ease; }
  .btn:hover{ filter:brightness(1.06); transform:translateY(1px); }
  .btn[aria-variant="ghost"]{ background:transparent; color:var(--text); }

  /* Tables */
  .article table{ width:100%; border-collapse:collapse; margin:18px 0; }
  .article thead th{ background: color-mix(in oklab, var(--field) 70%, transparent); color:var(--text-strong); }
  .article th, .article td{ border:1px solid var(--border); padding:10px 12px; text-align:left; }
  .article tr:nth-child(even) td{ background: color-mix(in oklab, var(--field) 45%, transparent); }
  
  /* Images */
.article figure.align-center > img{ display:block; margin:0 auto; }
.article figure.align-right  > img{ display:block; margin-left:auto; }
.article figure.align-center{ margin-left:auto; margin-right:auto; }
.article figure.align-right{  margin-left:auto; margin-right:0; text-align:right; }
.align-right{ float:none; margin-left:0; }
.article figure.align-right{ float:none; margin-left:auto; }
/* === Absolute/free placement (match editor) === */
.article{ position: relative; }

.article figure.free{
  position:absolute;
  inset:auto;
  margin:0;
  z-index:10;
  float:none !important;
  clear:none !important;
}
.article figure.free img{ display:block; }

@media (max-width:820px){
  .article:not(.scale-mode) figure.free{
    position:static !important;
    left:auto !important;
    top:auto !important;
    z-index:auto !important;
  }
}


  /* Utilities */
  .footer-note{ color:var(--muted); font-size:13px; margin-top:10px; }
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1,1); white-space:nowrap; border:0; }
  .heading-anchor{ margin-left:8px; opacity:.55; text-decoration:none; }
  .article h2:hover .heading-anchor, .article h3:hover .heading-anchor{ opacity:.9 }
  .article mark{ padding:0 .2em; border-radius:.25em; background: color-mix(in oklab, var(--accent) 25%, var(--soft)); }
  .spoiler{ background:var(--field); color:transparent; border-radius:.25em; padding:0 .2em; cursor:pointer; }
  .spoiler.revealed{ color:inherit; }
  .embed{ position:relative; width:100%; }
  .embed-16x9{ padding-top:56.25%; }
  .embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:12px; box-shadow:var(--shadow); }
  .gallery{ display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .gallery img{ width:100%; height:auto; border-radius:12px; }
  .article figure.wrap-left,
.article img.wrap-left{
  float:left; margin:0 16px 12px 0;
  max-width:min(50%, 420px);
}
.article figure.wrap-right,
.article img.wrap-right{
  float:right; margin:0 0 12px 16px;
  max-width:min(50%, 420px);
}

/* Headings / galleries clear floats so later sections don’t collide */
.article h2, .article h3, .article .gallery, .article .clear { clear: both; }

/* Optional “circle” wrapping using CSS Shapes */
.article figure.shape-circle > img{ border-radius:50%; }
@media (min-width: 821px){
  .article figure.shape-circle.wrap-left  > img,
  .article figure.shape-circle.wrap-right > img{
    /* Gives a nicer curve to the wrapped text around a circle image */
    shape-outside: circle(50% at 50% 50%);
    -webkit-shape-outside: circle(50% at 50% 50%);
  }
}

/* Rounded shape helper (keeps your existing border-radius but makes it explicit) */
.article figure.shape-rounded > img{ border-radius:16px; }

@media (max-width: 820px){
  /* Default: stack on small screens */
  .article:not(.scale-mode) figure.wrap-left,
  .article:not(.scale-mode) figure.wrap-right,
  .article:not(.scale-mode) img.wrap-left,
  .article:not(.scale-mode) img.wrap-right{
    float:none; display:block; margin:14px auto; max-width:100%;
  }

  /* When scaling, preserve original float/margins (they’ll be scaled down) */
  .article.scale-mode figure.wrap-left{
    float:left; margin:0 16px 12px 0; max-width:none;
  }
  .article.scale-mode figure.wrap-right{
    float:right; margin:0 0 12px 16px; max-width:none;
  }
}

.article.scale-mode{ overflow: visible; }

.scale-root{ display: inline-block; will-change: transform; }



/* Minimal lightbox UI */
.lightbox{ position:fixed; inset:0; z-index:100;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.78);
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:12px; box-shadow:var(--shadow); }
.lightbox .ui{ position:absolute; inset:0; pointer-events:none; }
.lightbox .btn{
  pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; padding:8px 10px; border-radius:10px; cursor:pointer;
}
.lightbox .btn.prev{ left:16px; }
.lightbox .btn.next{ right:16px; }
.lightbox .btn.close{ top:12px; right:12px; transform:none; }

  /* Smooth theme switching */
  :root { --theme-tt: .35s; }
  body, .article, .toc, .hero, .btn, .tag, .breadcrumbs, .title, .summary, .meta, .wrap{
    transition:
      background-color var(--theme-tt) ease,
      color            var(--theme-tt) ease,
      border-color     var(--theme-tt) ease,
      box-shadow       var(--theme-tt) ease;
  }

  /* OS dark fallback (kept minimal) */
  @media (prefers-color-scheme: dark){
    :root:not(.dark){
      --bg:#F6F0E6; --panel:#F2E8DA; --card:#caa674; --border:#E6DCCD;
      --text:#c6bbb0; --muted:#a3a3ab;
      --accent:#424e5b; --accent-2:#c6bbb0; --accent-3:#424e5b;
      --ok:#2F7D32; --warn:#B5882C; --danger:#B34A36;
      --field:hsl(35deg 45% 62% / 26%); --soft:#E9D8C7;
      --text-strong:#e7e2dd; --code-fg:#e6e0db;
    }
  }




  @media (max-width: 640px){

    .breadcrumbs ol {
        gap: 0;
    }

    .title {
        font-size: 20px;
    }

    .summary {
        font-size: 15px;
    }

    .meta {
        font-size: 9px;
    }
  }


  @media (min-width: 641px) and (max-width: 979px){
  .main{ grid-template-columns: 1fr; gap: 18px; }
  .article{ padding: 22px; }
  .toc{ order: 2; margin-top: 4px; }
  .title{ font-size: clamp(24px, 3.2vw, 30px); }
  .summary{ font-size: 16px; }
  .meta{ font-size: 12px; gap: 10px; }
  .gallery{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
  .article pre{ font-size: 12px; padding: 12px; }
  .article pre.codeblock[data-lang]::before{ top: 6px; right: 8px; font-size: 11px; padding: 3px 6px; }
}

/* Phones (≤640px): everything compact */
@media (max-width: 640px){

  /* Global spacing */
  .wrap{ padding: 16px 14px 56px; }
  .breadcrumbs{ margin: 10px 0 14px; font-size: 12px; }
  .breadcrumbs ol{ gap: 4px; }

  /* Hero */
  .hero{ border-radius: 12px; }
  .hero__media{ max-height: 200px; }
  .hero__body{ padding: 14px 14px 8px; }
  .title{ margin: 0 0 6px; font-size: 20px; line-height: 1.25; }
  .summary{ font-size: 14px; margin: 4px 0 10px; }
  .meta{ font-size: 11px; gap: 8px; }

  /* Layout */
  .main{ grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }

  /* Article card */
  .article{
    padding: 16px;
    border-radius: 12px;
  }
  .article h2{ font-size: 20px; margin-top: 22px; margin-bottom: 8px; }
  .article h3{ font-size: 17px; margin-top: 14px; margin-bottom: 6px; }
  .article p{ margin: 10px 0; }

  /* Code blocks & inline code */
  .article pre{
    padding: 10px 12px;
    font-size: 11px;
    border-radius: 10px;
  }
  .article pre code.hljs{ line-height: 1.5; }
  .article pre.codeblock[data-lang]{ padding-top: 28px; }
  .article pre.codeblock[data-lang]::before{
    font-size: 10px; padding: 2px 6px; top: 4px; right: 6px;
  }
  .article :not(pre) > code{
    font-size: .9em; padding: .12em .32em; border-radius: 6px;
  }

  /* Tables: scroll instead of squishing */
  .article table{
    display: block; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-spacing: 0; border-collapse: separate;
  }
  .article th, .article td{ white-space: nowrap; padding: 8px 10px; }
  .article thead th{ position: sticky; left: 0; }

  /* Galleries */
  .gallery{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
  @media (max-width: 420px){ .gallery{ grid-template-columns: 1fr; } }

  /* Tags & share buttons: stack and enlarge touch targets */
  .tags{ gap: 6px; }
  .tag{ font-size: 12px; padding: 5px 8px; }
  .share{ flex-direction: row; gap: 8px; }
  .share .btn{
    min-width: 150px; justify-content: center;
    padding: 10px 12px; border-radius: 10px;
  }

  /* Heading anchors: hide the inline “#” on mobile */
  .heading-anchor{ display: none; }

  /* TOC below content, full-width */
  .toc{
    order: 2;
    margin-top: 8px;
    padding: 14px;
    border-radius: 12px;
  }
  .toc h3{ font-size: 12px; margin-bottom: 6px; }
  .toc nav a{ font-size: 13px; padding: 6px; }

  /* Images */
  .article figure{ margin: 14px 0; }
  .article figcaption{ font-size: 12px; margin-top: 6px; }

  /* Lightbox controls smaller */
  .lightbox .btn{ padding: 6px 8px; border-radius: 8px; }
  .lightbox img{ max-width: 92vw; max-height: 82vh; }
}


/* --- MOBILE WIDTH + WRAPPING FIXES --- */

/* Let grid children actually shrink instead of forcing overflow */
.main > * { min-width: 0; }

/* Keep the article within the viewport and wrap long strings */
.article{
  max-width: 100%;
  overflow-wrap: anywhere;   /* modern, wraps long words/urls */
  word-break: break-word;    /* older fallback */
}

/* Don’t let figures sized by the editor exceed the card */
.article figure { max-width: 100%; }

/* Make sure inline code and links won’t blow out the width */
.article :not(pre) > code,
.article a{
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* Slightly smaller body text on phones (your headings already scale) */
@media (max-width: 640px){
  .article{ font-size: 15px; }
}

/* Optional: as a last resort, hide tiny residual x-overflow (e.g., sub-pixel) */
html, body { overflow-x: hidden; }


/* Share Hub (collapsed buttons + expandable panel) */
.share { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:1.25rem; }
.share .btn { display:inline-flex; align-items:center; gap:.4rem; }

.share-panel[hidden]{ display:none; }
.share-panel { width:100%; }

.share-grid, .share-advanced {
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem;
}

.share-advanced .btn.ghost { opacity:.9; }

@media (min-width:700px){
  .share-panel {
    padding:.75rem; border:1px solid var(--border,#e5e5e5);
    border-radius:.75rem; background:var(--bg,#fff);
    box-shadow:0 6px 24px rgba(0,0,0,.08);
  }
}


/* Make 'free' images stack and fit the card on mobile */
@media (max-width: 820px){
  .article:not(.scale-mode) figure.free{
    position: static !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;

    /* Kill inline sizes from the renderer so they can't overflow */
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  .article:not(.scale-mode) figure.free img{
    display: block;
    width: 100% !important;
    height: auto !important;
  }
}