@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');
:root { color-scheme:dark; font-family:Kanit,sans-serif; color:#edf2fa; background:#101923; font-synthesis:none; }
* { box-sizing:border-box; }body { margin:0; background:radial-gradient(ellipse at 85% 0%,#30475d55,transparent 35%),#101923; }a { color:inherit; text-underline-offset:5px; }a:hover { color:#e6cf9f; }a:focus-visible,summary:focus-visible { outline:2px solid #d8bd87; outline-offset:5px; }p { margin:0 0 18px; }h1,h2,h3 { font-weight:400; }h1 { font-size:clamp(31px,4.5vw,50px); line-height:1.5; letter-spacing:-.5px; margin:23px 0; }h2 { font-size:27px; line-height:1.6; margin:0 0 20px; }h3 { font-size:20px; line-height:1.7; margin:24px 0 12px; }strong { color:#edf2fa; font-weight:500; }
.guide-header { max-width:1200px; padding:25px 40px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:20px; }.guide-brand { width:230px; height:39px; border:0; }.guide-logo { display:block; width:230px; height:39px; border:0; }.guide-header nav { display:flex; gap:25px; align-items:center; font-size:13px; }.guide-header nav>a { min-height:44px; display:flex; align-items:center; text-decoration:none; }.guide-button { display:inline-flex; justify-content:center; align-items:center; min-height:46px; padding:10px 20px; border:1px solid #aec5dd4d; border-radius:7px; text-decoration:none; font-size:14px; color:#e7eef6; }.guide-button.is-primary { background:#d3dce8; color:#14212f; border-color:#d3dce8; }.guide-button:hover { filter:brightness(1.1); }
.guide-layout { max-width:1100px; margin:0 auto; padding:30px 40px 70px; }.guide-breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; color:#9db1c6; font-size:12px; line-height:1.9; margin-bottom:32px; }.guide-breadcrumbs a { text-decoration:none; }.guide-eyebrow { color:#d8bd87; font-size:12px; letter-spacing:.04em; }.guide-intro { max-width:800px; }.guide-intro>p { font-size:18px; line-height:1.95; color:#b4c4d4; }.guide-meta { display:block; font-size:12px; color:#9db1c6; margin-top:22px; }.guide-toc { margin:34px 0 44px; background:#172635; border:1px solid #aac5df2c; border-radius:12px; padding:24px 28px; }.guide-toc>strong { display:block; margin-bottom:12px; font-size:14px; }.guide-toc ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 25px; padding-left:20px; margin:0; color:#b7c9db; font-size:13px; line-height:1.8; }.guide-toc a { text-decoration:none; }
.guide-body { max-width:780px; margin:0 auto; }.guide-body section { margin:45px 0; scroll-margin-top:24px; }.guide-body p,.guide-body li { color:#b4c4d4; font-size:16px; line-height:2; }.guide-body ul,.guide-body ol { padding-left:24px; }.guide-body li { padding-left:5px; margin-bottom:10px; }.guide-note { padding:20px 23px; background:#d8bd8708; border:1px solid #d8bd8733; border-left:3px solid #d8bd87; border-radius:8px; }.guide-note p:last-child { margin-bottom:0; }.guide-example { border:1px solid #adc6de33; background:#142332; border-radius:11px; padding:25px; margin:24px 0; }.guide-example>span { display:block; color:#d8bd87; font-size:12px; margin-bottom:16px; }.guide-example .guide-long-caption { font-size:15px; color:#a7b7c9; overflow-wrap:anywhere; padding:16px; background:#101923; border-radius:7px; }.guide-caption-groups { display:flex; flex-wrap:wrap; gap:10px; }.guide-caption-groups>span { padding:12px 17px; border:1px solid #acc6de55; background:#25394b; border-radius:6px; font-size:18px; }.guide-example small { display:block; margin-top:18px; color:#9db1c6; font-size:12px; line-height:1.9; }.guide-table-scroll { overflow-x:auto; border:1px solid #aac5df2c; border-radius:9px; margin:24px 0; }table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; line-height:1.9; }th { background:#203345; font-weight:400; color:#e1eaf4; }th,td { padding:16px; border-bottom:1px solid #aac5df1c; }td { color:#b4c4d4; }tr:last-child td { border:0; }caption { text-align:left; padding:14px 16px; color:#d8bd87; background:#172635; font-size:12px; }
.guide-body details { border-bottom:1px solid #acc6de26; padding:19px 0; }.guide-body summary { cursor:pointer; font-size:16px; min-height:32px; line-height:1.9; }.guide-body details p { padding-top:15px; font-size:15px; margin-bottom:8px; }.guide-cta { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:28px; border:1px solid #aac5df40; border-radius:12px; background:linear-gradient(130deg,#2b4054,#172635); }.guide-cta h2 { margin-bottom:4px; }.guide-cta p { margin-bottom:4px; }.guide-cta small { color:#a7b7c9; font-size:12px; line-height:1.9; }.guide-related { display:block; padding:22px 0; border-top:1px solid #aac5df33; text-decoration:none; font-size:17px; line-height:1.9; }.guide-related>small { display:block; color:#d8bd87; font-size:12px; margin-bottom:7px; }.guide-footer { max-width:1020px; border-top:1px solid #acc6de26; margin:0 auto; padding:25px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; color:#9db1c6; font-size:12px; }.guide-footer nav { display:flex; flex-wrap:wrap; gap:20px; }.guide-footer a { text-decoration:none; }.skip-link { position:absolute; top:8px; left:15px; padding:12px; background:#d3dce8; color:#101923; transform:translateY(-200%); z-index:10; }.skip-link:focus { transform:none; }
@media(max-width:767px) { .guide-header { padding:20px; }.guide-brand,.guide-logo { width:180px; height:30px; }.guide-header nav { gap:0; }.guide-header .guide-home-link { display:none; }.guide-header .guide-button { font-size:12px; padding:8px 12px; min-height:44px; }.guide-layout { padding:22px 20px 45px; }.guide-intro>p { font-size:16px; }h1 { font-size:33px; }h2 { font-size:25px; }.guide-toc { padding:22px; }.guide-toc ol { grid-template-columns:minmax(0,1fr); }.guide-example { padding:19px; }.guide-caption-groups { gap:7px; }.guide-caption-groups>span { font-size:16px; padding:10px 12px; }.guide-body p,.guide-body li { font-size:15px; }.guide-cta { padding:23px; }.guide-footer { margin:0 20px; }th,td { padding:13px; min-width:100px; } }
.guide-theme-toggle { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; padding:10px; background:#152433; color:#edf2fa; border:1px solid #304256; border-radius:9px; cursor:pointer; }.guide-theme-toggle svg { width:20px; height:20px; }.guide-theme-toggle:focus-visible { outline:2px solid #8ca8c3; outline-offset:3px; }
/* Approved silver/pearl Light Mode, shared with the workspace's visual direction. */
:root[data-theme=light] {
  --guide-bg:#e6e8e6; --guide-text:#293139; --guide-muted:#59636b; --guide-line:#d7dcdf;
  --guide-pearl:linear-gradient(145deg,#ffffffed,#ffffffc9 48%,#f1f3f1b8);
  --guide-shadow:0 24px 50px -30px #333f4c47,0 5px 16px -8px #252e3529;
  color:var(--guide-text); background:var(--guide-bg);
}
[data-theme=light] body { background:radial-gradient(ellipse at 12% 4%,#ffffff73,transparent 42%),radial-gradient(ellipse at 90% 12%,#d4dada55,transparent 46%),var(--guide-bg); }
[data-theme=light] :is(strong,th,.guide-supported-formats dt) { color:var(--guide-text); }
[data-theme=light] :is(.guide-breadcrumbs,.guide-intro>p,.guide-meta,.guide-toc ol,.guide-body p,.guide-body li,.guide-example small,.guide-cta small,.guide-footer,td) { color:var(--guide-muted); }
[data-theme=light] :is(.guide-eyebrow,.guide-example>span,caption,.guide-related small) { color:#806326; }
[data-theme=light] :is(.guide-toc,.guide-example,.guide-cta,.guide-table-scroll) { background:var(--guide-pearl); border-color:#ffffffb3; box-shadow:var(--guide-shadow); }
[data-theme=light] :is(th,caption,.guide-example .guide-long-caption) { background:#d4dbd8; color:#35414a; }
[data-theme=light] :is(.guide-caption-groups>span,.guide-button,.guide-theme-toggle) { background:#ffffffb3; color:#304e6b; border-color:#c4cdd4; }
[data-theme=light] .guide-button.is-primary { background:#304e6b; color:#fff; border-color:#304e6b; }
[data-theme=light] :is(th,td,.guide-body details,.guide-related,.guide-footer) { border-color:var(--guide-line); }
[data-theme=light] .guide-note { background:#fbf3df; border-color:#dbc797; }
[data-theme=light] a:hover { color:#806326; }
[data-theme=light] .guide-logo { filter:brightness(.38) saturate(1.2); }
@media(max-width:767px) { .guide-header { flex-wrap:wrap; gap:12px; }.guide-header nav { gap:8px; margin-left:auto; } }