html{scroll-behavior:smooth}
body{margin:0}
a{color:var(--color-accent)}
a:hover{color:var(--color-accent-700)}
.ph{border:2px dashed var(--color-divider);background:var(--color-surface);padding:20px;display:flex;flex-direction:column;gap:5px;justify-content:flex-end;min-height:190px}
.ph-k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.ph-t{font-family:var(--font-heading);font-weight:800;font-size:17px;line-height:1.15}
.ph-d{font-size:12px;line-height:1.45;max-width:56ch;color:color-mix(in srgb,var(--color-text) 58%,transparent)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.prose{max-width:68ch}
.prose p{font-size:15.5px;line-height:1.62}
.cols{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.rail{flex:1 1 190px;max-width:230px;position:sticky;top:76px}
.body{flex:5 1 460px;min-width:0}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;background:var(--color-divider)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;background:var(--color-divider)}
.scrollx{overflow-x:auto}
.ctr{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;background:var(--color-divider);border-top:2px solid var(--color-divider);border-bottom:2px solid var(--color-divider)}
.ctr>div{background:var(--color-bg);padding:16px 18px}
.navlink{padding:4px 0;display:block;text-decoration:none;color:inherit;font-size:13px;border:0;background:none;text-align:left;cursor:pointer;font-family:var(--font-body)}
.navlink:hover{color:var(--color-accent)}
.accent-range{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--color-divider);cursor:pointer;accent-color:var(--color-accent)}
.accent-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-accent);border:2px solid var(--color-bg);box-shadow:0 0 0 1px var(--color-divider)}
.accent-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-accent);border:2px solid var(--color-bg);box-shadow:0 0 0 1px var(--color-divider)}
.accent-range::-moz-range-track{height:6px;border-radius:3px;background:var(--color-divider)}
.model-tab{flex:1;min-width:80px;padding:10px 8px;font-size:12px;font-weight:700;border:0;background:var(--color-bg);cursor:pointer;font-family:var(--font-body);color:inherit}
.model-tab:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.model-tab.active{background:var(--color-accent);color:var(--color-bg)}
.codebox{border:2px solid var(--color-divider);overflow-x:auto}
.codebox pre{margin:0}
.codebox code.hljs{padding:16px 18px;display:block;font-size:12.5px;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace}