:root{
    --bg:#ffffff; --fg:#1a1d21; --muted:#5b6570; --line:#e5e8ec;
    --accent:#1a7f4b; --accent2:#0b5cad; --code-bg:#f6f8fa; --code-fg:#24292f;
    --card:#f9fafb; --warn-bg:#fff8e6; --warn-line:#e9c46a; --sidebar:#f7f9fb;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --bg:#0f1216; --fg:#e6e9ee; --muted:#9aa4b0; --line:#242a31;
      --accent:#4cc38a; --accent2:#5aa2e6; --code-bg:#161b22; --code-fg:#d6dde6;
      --card:#151a20; --warn-bg:#2a2410; --warn-line:#7a6320; --sidebar:#0c0f13;
    }
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--fg);
    font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased}
  a{color:var(--accent2);text-decoration:none}
  a:hover{text-decoration:underline}
  .wrap{display:grid;grid-template-columns:260px 1fr;max-width:1200px;margin:0 auto}
  nav.side{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;
    padding:24px 18px;border-right:1px solid var(--line);background:var(--sidebar)}
  nav.side h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:22px 0 8px}
  nav.side a{display:block;color:var(--fg);padding:4px 8px;border-radius:6px;font-size:14.5px}
  nav.side a:hover{background:var(--card);text-decoration:none}
  nav.side .brand{font-weight:700;font-size:16px;margin-bottom:4px}
  nav.side .brand span{color:var(--accent)}
  main{padding:36px 42px;min-width:0;max-width:820px}
  h1{font-size:34px;line-height:1.15;margin:.2em 0 .3em}
  h2{font-size:25px;margin:1.8em 0 .5em;padding-top:.4em;border-top:1px solid var(--line)}
  h3{font-size:19px;margin:1.5em 0 .4em}
  .lede{font-size:18.5px;color:var(--muted)}
  code{background:var(--code-bg);color:var(--code-fg);padding:.15em .4em;border-radius:5px;
    font:13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  pre{background:var(--code-bg);border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow-x:auto}
  pre code{background:none;padding:0;color:var(--code-fg);font-size:13px}
  table{border-collapse:collapse;width:100%;margin:1em 0;font-size:14.5px;display:block;overflow-x:auto}
  th,td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top}
  th{background:var(--card)}
  .badges{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
  .badge{font-size:12.5px;color:var(--muted);border:1px solid var(--line);background:var(--card);border-radius:999px;padding:3px 11px}
  .callout{border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:10px;padding:12px 16px;margin:1.2em 0;font-size:14.5px}
  .callout.tip{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
  .note{color:var(--muted);font-size:14px}
  figure{margin:1.4em 0}
  figure img{width:100%;border:1px solid var(--line);border-radius:10px;display:block}
  figcaption{color:var(--muted);font-size:13.5px;margin-top:6px;text-align:center}
  .steps{counter-reset:step;list-style:none;padding-left:0}
  .steps>li{counter-increment:step;position:relative;padding:2px 0 2px 42px;margin:14px 0}
  .steps>li::before{content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
    background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
  footer{border-top:1px solid var(--line);margin-top:40px;padding:24px 0;color:var(--muted);font-size:13.5px}
  /* language toggle */
  html.lang-en .id, html.lang-id .en{display:none}
  .langtoggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:12px 0 2px}
  .langtoggle button{border:0;background:transparent;color:var(--fg);padding:5px 14px;
    font:600 13px inherit;cursor:pointer}
  html.lang-en .langtoggle button[data-lang="en"],
  html.lang-id .langtoggle button[data-lang="id"]{background:var(--accent);color:#fff}
  @media (max-width:860px){
    .wrap{grid-template-columns:1fr}
    nav.side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}
    main{padding:24px 18px}
    h1{font-size:28px}
  }

/* --- added for the Quarto pages inside this shell --- */
.quarto-container, .page-columns, #quarto-content,
.quarto-title-banner, .content { max-width: none !important; padding: 0 !important; }
main .quarto-title-block { margin-bottom: 1rem; }
main #title-block-header h1 { margin-top: 0; }
main pre { background: var(--code-bg); border: 1px solid var(--line);
           border-radius: 8px; padding: 12px 14px; }
main table { width: 100%; border-collapse: collapse; }
main th { text-align: left; color: var(--muted);
          border-bottom: 2px solid var(--line); padding: 8px 10px; }
main td { border-bottom: 1px solid var(--line); padding: 8px 10px; }
main .callout { border: 1px solid var(--line); border-radius: 10px;
                background: var(--card); margin: 1.3rem 0; }
/* Quarto's own nav must not appear -- the parent's sidebar is the nav. */
.navbar, #quarto-sidebar, .sidebar-navigation, #quarto-margin-sidebar { display: none !important; }