@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/google-sans-400.ttf) format('truetype');
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/google-sans-500.ttf) format('truetype');
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/google-sans-600.ttf) format('truetype');
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/google-sans-700.ttf) format('truetype');
}

/* Dimasclient reference: neutral surfaces, muted green and Google Sans. */
:root{--bg:#0a0b0c;--panel:#0d0e0f;--sidebar:#0d0e0f;--raised:#171819;--hover:#171819;--line:#242527;--line-soft:#171819;--ink:#dddddf;--text:#dddddf;--body:#b6b6b8;--muted:#909093;--accent:#86bf95;--accent-ink:#0a1a10;--soft:#16201a;--accent-soft:#16201a;--accent-line:#354c3b;--code:#0a0b0c;--font:'Google Sans','Segoe UI',sans-serif;font-family:var(--font);color-scheme:dark}
body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:var(--font)}
::selection{background:#354c3b;color:#f4f4f6}
a,button,input,textarea,select{transition:background-color .18s,border-color .18s,color .18s}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.brand img{width:22px;height:22px;border-radius:6px;object-fit:cover}.brand strong{font-size:15px;font-weight:600;letter-spacing:-.45px}.brand{gap:7px}.brand-docs,.brand-sub{font-family:var(--font);font-size:12px;letter-spacing:0;color:var(--muted)}
button{border-radius:100px}dialog{border-radius:16px;background:var(--panel);border:1px solid var(--line)}dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}
input::placeholder,textarea::placeholder{color:#808083}
footer{color:var(--muted);border-color:var(--line-soft)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.header{position:fixed;top:30px;left:50%;transform:translateX(-50%);height:60px;width:calc(100% - 48px);max-width:850px;border:1px solid #ffffff0d;border-radius:16px;background:#111213e8;backdrop-filter:blur(24px);box-shadow:0 12px 48px #0002}
.header-inner{padding:0 16px 0 20px;gap:24px}.brand{flex:0 0 auto}.header-actions{gap:10px}.header-studio{font-size:13px}.header-divider{display:none}
.search-trigger{width:290px;min-height:36px;background:#ffffff05;border-color:#ffffff0d;border-radius:100px;font-size:12px;margin-left:auto}.search-trigger:hover{border-color:var(--accent-line)}.search-trigger svg{width:16px;height:16px}.search-trigger kbd{font-size:10px;border:0}#language{font-size:12px;min-height:40px;min-width:40px;background:#ffffff08;border:1px solid #ffffff0d}
.portal-intro{max-width:1250px;margin:150px auto 26px;padding:0 0}.portal-intro .intro-label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:550;color:var(--muted);margin:0 0 12px}.intro-label svg{width:16px;height:16px}.portal-intro h1{font-size:30px;font-weight:500;letter-spacing:-.6px;line-height:1.15;margin:0 0 12px}.portal-intro>p:last-child{font-size:14px;color:var(--muted);margin:0;line-height:1.6}
.layout{grid-template-columns:260px minmax(0,1fr) 185px;gap:20px;max-width:1250px;margin:0 auto 50px;align-items:start;min-height:0}
#sidebar{top:118px;height:calc(100dvh - 148px);border:1px solid var(--line-soft);border-radius:16px;padding:20px 16px;background:var(--panel)}.sidebar-product{padding:0 8px 17px;gap:8px}.sidebar-product>svg{width:19px;height:19px}.sidebar-product strong{font-size:13px;font-weight:550}.version{border-radius:6px}.nav-group{margin:22px 0}.nav-group h2{font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);padding-inline:10px}.nav-group a{background:#141516;min-height:36px;padding:9px 12px;border-radius:10px;margin:6px 0;font-size:12px;line-height:1.45;color:#a3a3a4}.nav-group a.active{color:var(--accent);background:var(--accent-soft)}.nav-group a.active:before{display:none}.nav-group a:hover{background:#1b1c1d}.sidebar-bottom{padding:16px 8px 0;font-size:10px}.dot{color:var(--muted)}
main{max-width:none;margin:0;padding:26px 28px;background:var(--panel);border:1px solid var(--line-soft);border-radius:16px}.article-tools{margin-bottom:26px;flex-wrap:wrap}.crumb{font-size:11px}.crumb span{color:var(--muted)}.download-all{font-size:11px;background:#141516;padding:6px 10px;border:1px solid var(--line);border-radius:100px}.download-all svg{color:var(--accent)}
article h1{font-size:28px;font-weight:550;letter-spacing:-.6px;line-height:1.2}article>p:first-of-type{font-size:14px;line-height:1.75}article p,article li{font-size:14px;line-height:1.85}article h2{font-size:19px;font-weight:550;margin-top:32px;padding-left:14px;border-left:3px solid var(--accent);scroll-margin-top:125px}article h3{font-size:16px;font-weight:550;scroll-margin-top:125px}.article-meta{margin:20px 0}.article-meta span{border-radius:6px;font-size:10px}.quick-links{gap:8px;margin:22px 0}.quick-links a{border-radius:100px;padding:10px 14px;font-size:12px;min-height:40px}.quick-links a:first-child{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}article a{text-decoration-color:var(--accent-line)}
.codeblock,pre{border-radius:12px}pre{background:#0a0b0c;color:#b6b6b8}.codebar{background:#111213;border-color:var(--line);font-size:11px}.codebar button{border-radius:100px;background:#1b1c1d}.codeblock{border-color:var(--line)}article code:not(pre code){background:#171819;color:#a4c7ad;border-color:var(--line)}.tok-keyword{color:#86bf95}.tok-string{color:#c2c98b}.tok-comment{color:#808083}.callout,blockquote{background:#121a15;border-color:var(--accent-line);border-radius:12px}th{background:#141516}td,th{border-color:var(--line)}
.toc{top:118px;padding:20px 0;max-height:calc(100dvh - 148px)}.toc-heading{font-size:11px;text-transform:none;letter-spacing:0}.toc a{font-size:11px}.toc a.active{color:var(--accent);border-color:var(--accent)}.studio-note{background:#101612;border:1px solid #202a23;border-radius:16px;padding:18px 16px;margin-top:26px}.studio-note strong{font-size:15px;font-weight:500}.studio-note p{font-size:12px}.studio-note .eyebrow{font-size:10px;letter-spacing:0;color:var(--accent)}.studio-note>a{background:var(--accent-soft);padding:8px 10px;border-radius:10px;font-size:11px;color:var(--accent)}
#page-navigation a{border-radius:12px;background:#111213;border-color:var(--line)}#page-navigation a:hover{background:var(--accent-soft);border-color:var(--accent-line)}#results a{border-radius:10px}.search-field{border-color:var(--line)}#search-close{border-radius:100px}#inline-toc{color:var(--muted)}
@media(max-width:1320px){.layout,.portal-intro{margin-left:28px;margin-right:28px}}
@media(max-width:1190px){.layout{grid-template-columns:250px minmax(0,1fr)}.toc{display:none}main{padding:24px}.portal-intro{margin-top:138px}}
@media(max-width:760px){.header{top:14px;width:calc(100% - 28px);height:60px}.header-inner{padding:0 12px;gap:10px}.header-actions{margin-left:0;gap:4px}.brand img{width:22px;height:22px}.brand strong{font-size:15px}.brand-docs{font-size:12px}.search-trigger{width:44px;min-height:44px;border:0;background:none;padding:12px}.header-studio{display:none}.portal-intro{margin:108px 20px 22px}.portal-intro h1{font-size:27px;line-height:1.2}.portal-intro>p:last-child{font-size:13px}.layout{display:block;margin:0 14px 28px}main{padding:22px 18px}#sidebar{display:none}article h1{font-size:25px}article p,article li{font-size:14px}.quick-links a{min-height:44px}.download-all{min-height:44px}.brand-docs{display:none}#nav-dialog{background:var(--panel);border-radius:0 16px 16px 0}#mobile-nav .nav-group a{min-height:44px}#search-dialog{margin-top:20px}.article-tools{margin-bottom:20px}#page-navigation a{padding:12px}.codebar button{min-height:44px}}

.token-keyword{color:#86bf95}.token-string{color:#c2c98b}.token-comment{color:#808083}.token-type{color:#9ebbc6}
