/* Classic community wiki: Arial, blue title bars and bordered panels. */
* { box-sizing:border-box; }
html { scroll-padding-top:16px; }
body { margin:0; background:#e4e4e4; color:#222; font:13px/1.5 Arial,Helvetica,sans-serif; }
a { color:#075aab; text-decoration:none; }
a:hover { text-decoration:underline; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.6; }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #e9a322; outline-offset:3px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:28px; line-height:1.2; }
h2 { font-size:20px; line-height:1.3; }
h3 { font-size:16px; }
input,textarea,select { min-width:0; padding:8px; border:1px solid #999; border-radius:0; background:#fff; color:#222; }
input::placeholder,textarea::placeholder { color:#666; }
.skip { position:absolute; top:-100px; left:10px; padding:10px; background:white; z-index:10; }
.skip:focus { top:10px; }
.header { max-width:1120px; min-height:88px; margin:16px auto 0; padding:12px 22px; display:flex; align-items:center; gap:30px; background:#fff; border:1px solid #999; border-bottom:0; }
.docs-icon { display:inline-block; width:16px; height:16px; flex-shrink:0; vertical-align:-3px; }
.path-icon .docs-icon { width:22px; height:22px; vertical-align:0; }
.brand { display:flex; align-items:center; gap:14px; white-space:nowrap; }
.brand:hover { text-decoration:none; }
.brand-logo { display:block; width:auto; height:36px; flex-shrink:0; }
.brand-light { display:block; border-left:1px solid #ccc; padding-left:14px; color:#333; font:bold 20px/1.2 Arial,sans-serif; }
.brand-light small { display:block; margin-top:4px; color:#666; font:11px/1.3 Arial,sans-serif; }
.top-nav { display:flex; gap:18px; font-weight:bold; }
.account { margin-left:auto; display:flex; align-items:center; gap:14px; }
.user-name { max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.site-bar { max-width:1120px; margin:auto; padding:7px 20px; display:flex; justify-content:space-between; gap:16px; background:linear-gradient(#438bc3,#23659b); border:1px solid #164b78; color:#fff; font-weight:bold; }
.site-bar a { color:#fff; }
.layout { max-width:1120px; min-height:calc(100vh - 180px); margin:0 auto 24px; display:grid; grid-template-columns:210px minmax(0,1fr); border:1px solid #aaa; border-top:0; background:#fff; }
.sidebar { background:#f2f2f2; border-right:1px solid #bbb; padding:14px 10px; }
.search { display:flex; align-items:center; gap:4px; margin-bottom:14px; }
.search>span { display:none; }
.search input { width:100%; padding:6px; font-size:12px; }
.search button { display:flex; align-items:center; justify-content:center; border:1px solid #999; background:linear-gradient(#fff,#ddd); padding:5px 8px; color:#333; }
.side-nav a { display:block; }
.nav-overview { border:1px solid #aaa; padding:7px 8px; font-weight:bold; background:#e5e5e5; }
.nav-group { margin-top:14px; border:1px solid #bbb; background:#fff; }
.nav-category { padding:5px 8px; border-bottom:1px solid #bbb; background:linear-gradient(#f5f5f5,#dedede); font-weight:bold; color:#333; }
.nav-article { padding:5px 9px; line-height:1.4; font-size:12px; overflow-wrap:anywhere; }
.nav-article+.nav-article { border-top:1px solid #eee; }
.side-nav .active { background:#dcebf8; color:#174d7c; font-weight:bold; }
.nav-category.selected { background:#dcebf8; color:#174d7c; }
.sidebar-bottom { margin-top:18px; padding:10px; border:1px solid #bdad76; background:#fff9df; }
.sidebar-bottom p { margin:8px 0; }
.sidebar-bottom small { display:block; margin-top:5px; color:#666; font-size:11px; }
.my-link { display:block; margin-top:10px; }
.main { min-width:0; padding:18px; }
.eyebrow { color:#555; font-size:11px; font-weight:bold; }
.muted { color:#666; font-size:12px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:10px; padding:8px 14px; border:1px solid #38651e; border-radius:3px; background:linear-gradient(#83bd43,#579522); color:#fff; font-weight:bold; text-shadow:0 1px #436b27; box-shadow:inset 0 1px #b3d984; }
.button:hover { background:linear-gradient(#91c953,#64a12e); text-decoration:none; }
.button-small { font-size:12px; padding:6px 10px; }
.button-quiet,.preview-toggle,.copy-code { background:linear-gradient(#fff,#dedede); border:1px solid #999; color:#333; text-shadow:none; box-shadow:inset 0 1px #fff; }
.button-quiet:hover,.preview-toggle:hover,.copy-code:hover { background:#e9f2fa; }
.text-link { font-weight:bold; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:20px; padding:20px; border:1px solid #9bb4c9; border-top:5px solid #3676a7; background:#edf5fb; margin-bottom:18px; }
.hero h1 { margin:9px 0 12px; font-size:30px; }
.hero h1 span { color:#205f93; }
.hero-copy>p { margin-bottom:16px; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.hero-note { display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; color:#53697b; font-size:10px; font-weight:bold; }
.hero-art { align-self:center; min-width:0; }
.studio-window { border:1px solid #718ba2; background:#fff; box-shadow:3px 3px 0 #c6d4df; }
.window-bar { display:flex; align-items:center; justify-content:space-between; background:linear-gradient(#5598cb,#286496); border-bottom:1px solid #234f73; color:#fff; padding:5px 8px; font:bold 11px Arial,sans-serif; }
.window-controls { letter-spacing:3px; }
.window-menu { padding:4px 8px; background:#ece9d8; border-bottom:1px solid #bbb; font-size:10px; color:#444; }
.window-code { padding:16px 8px; font:11px/1.9 Consolas,'Courier New',monospace; white-space:nowrap; }
.line-no { display:inline-block; width:20px; margin-right:8px; border-right:1px solid #ddd; color:#888; }
.code-comment { color:#357b30; }
.code-purple { color:#0000b5; }
.code-yellow { color:#733b8e; }
.code-green { color:#a22b22; }
.window-status { display:flex; justify-content:space-between; padding:4px 7px; border-top:1px solid #bbb; background:#eee; color:#555; font-size:9px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:7px 10px; border:1px solid #aaa; background:linear-gradient(#f9f9f9,#e0e0e0); }
.section-heading h1,.section-heading h2 { margin:0; font-size:18px; }
.section-heading .eyebrow { display:none; }
.section-heading p { margin:5px 0 0; }
.paths { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:10px 0 20px; }
.paths>a { display:block; padding:13px; border:1px solid #b6b6b6; background:#f8f8f8; color:#222; }
.paths>a:hover { border-color:#397db1; background:#edf5fb; text-decoration:none; }
.path-icon { display:inline-flex; width:34px; height:32px; margin-bottom:8px; align-items:center; justify-content:center; border:1px solid #8faac0; background:#d9eaf7; color:#275f8a; font:bold 22px Consolas,monospace; }
.paths>a:nth-child(2) .path-icon { background:#e6efd9; border-color:#9eaf81; color:#54732a; }
.paths>a:nth-child(3) .path-icon { background:#fff0c6; border-color:#c5ac66; color:#8b691b; }
.paths h3 { margin-bottom:6px; }
.paths p { font-size:12px; color:#555; margin-bottom:10px; }
.path-link { font-weight:bold; font-size:12px; color:#075aab; }
.article-list { border:1px solid #bbb; border-top:0; }
.article-row { display:flex; align-items:flex-start; gap:12px; padding:13px; color:#222; }
.article-row+.article-row { border-top:1px solid #ddd; }
.article-row:nth-child(even) { background:#f6f6f6; }
.article-row:hover { background:#edf5fb; text-decoration:none; }
.article-row>div { min-width:0; overflow-wrap:anywhere; }
.article-number { min-width:25px; padding:2px 4px; border:1px solid #bbb; background:#eee; text-align:center; color:#666; font-size:11px; }
.article-row h2,.article-row h3 { color:#075aab; margin:3px 0; font-size:16px; }
.article-row:hover h3,.article-row:hover h2 { text-decoration:underline; }
.article-row p { margin:4px 0 0; color:#555; font-size:12px; }
.article-tags { display:flex; flex-wrap:wrap; gap:8px; color:#666; font-size:11px; }
.community-tag { color:#546e25; }
.row-arrow { margin-left:auto; flex-shrink:0; color:#3676a7; }
.community-banner { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:18px; padding:15px; background:#fff9df; border:1px solid #c4b780; }
.community-banner h2 { font-size:18px; margin:5px 0; }
.community-banner p { margin:0; color:#655e43; font-size:12px; }
.community-banner .button { flex-shrink:0; }
.main>footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:24px; padding:12px 0 0; border-top:1px solid #ccc; color:#666; font-size:11px; }
.notice { padding:10px 12px; margin-bottom:15px; border:1px solid #c2ad68; background:#fff8d9; }
.notice.error { border-color:#bd7777; background:#fff0f0; }
.reading-layout { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:20px; }
.reading { min-width:0; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:17px; font-size:12px; }
.reading h1 { border-bottom:1px solid #aaa; padding-bottom:10px; margin-bottom:12px; overflow-wrap:anywhere; }
.article-lead { color:#444; font-size:15px; }
.article-meta { display:flex; flex-wrap:wrap; gap:12px; padding:8px 0; border-block:1px solid #ddd; color:#666; font-size:11px; }
.prose { font-size:14px; line-height:1.75; overflow-wrap:anywhere; }
.prose h2 { margin:26px 0 12px; padding-bottom:4px; border-bottom:1px solid #ccc; font-size:21px; }
.prose h3,.prose h4,.prose h5 { margin-top:22px; }
.prose p { margin-bottom:14px; }
.prose ul,.prose ol { padding-left:25px; }
.prose li { margin:5px 0; }
.prose a { text-decoration:underline; }
.prose code { padding:1px 4px; border:1px solid #ddd; background:#f4f4f4; color:#333; font:12px/1.7 Consolas,'Courier New',monospace; white-space:break-spaces; }
.prose pre { max-width:100%; margin:16px 0; padding:12px; overflow:auto; border:1px solid #aaa; border-left:4px solid #3676a7; background:#f7f7f7; }
.prose pre code { display:block; padding:0; border:0; background:none; white-space:pre; }
.copy-code { display:block; margin:0 0 8px auto; padding:4px 8px; font-size:11px; }
.toc { position:sticky; top:16px; align-self:start; padding:10px; border:1px solid #aaa; background:#f4f4f4; }
.toc .eyebrow { color:#333; }
.toc nav { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.toc a { font-size:12px; overflow-wrap:anywhere; }
.toc-back { display:block; margin-top:15px; border-top:1px solid #ccc; padding-top:7px; }
.article-end { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:24px; padding-top:12px; border-top:1px solid #ccc; font-size:12px; color:#666; }
.editor-heading { margin-bottom:20px; border-bottom:1px solid #bbb; }
.editor-heading h1 { margin:6px 0 10px; }
.editor-form label { display:block; font-weight:bold; margin-bottom:5px; }
.editor-form>input,.editor-form>textarea { width:100%; margin-bottom:16px; }
.editor-fields { display:grid; grid-template-columns:1fr 2fr; gap:16px; margin-bottom:16px; }
.editor-fields select,.editor-fields textarea { width:100%; }
.editor-toolbar { display:flex; justify-content:space-between; align-items:center; }
.preview-toggle { padding:5px 10px; }
.editor-help { margin:8px 0 12px; color:#666; font-size:12px; }
.editor-form .code-editor { min-height:350px; resize:vertical; tab-size:4; font:13px/1.7 Consolas,'Courier New',monospace; background:#fafafa; }
.preview-pane { min-height:350px; border:1px solid #aaa; padding:15px; margin-bottom:16px; }
.editor-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:14px; }
.delete-area { margin-top:30px; padding-top:15px; border-top:1px solid #ccc; color:#923333; }
.delete-area summary { cursor:pointer; }
.delete-area p { margin-top:12px; }
.button-danger { background:linear-gradient(#cb5656,#a42d2d); border-color:#7d2424; text-shadow:none; box-shadow:none; }
.button-danger:hover { background:#a42d2d; }
.empty { padding:30px 15px; text-align:center; color:#555; }
.empty h2 { font-size:20px; }
.access { max-width:600px; margin:25px auto 60px; padding:20px; border:1px solid #aaa; border-top:5px solid #3676a7; background:#f8f8f8; }
.access h1 { margin:12px 0; }
.access>p { font-size:14px; }
[hidden] { display:none!important; }
@media(max-width:1000px) {
  .header { margin-top:0; }
  .hero { grid-template-columns:minmax(0,1fr); }
  .hero-art { display:none; }
  .reading-layout { grid-template-columns:minmax(0,1fr); }
  .toc { position:static; grid-row:1; }
  .toc nav { flex-direction:row; flex-wrap:wrap; gap:8px 16px; }
  .top-nav { gap:10px; }
  .header { gap:20px; }
}
@media(max-width:700px) {
  .header { flex-wrap:wrap; padding:12px; gap:12px; }
  .brand-logo { height:28px; }
  .brand-light { font-size:17px; }
  .top-nav { order:3; width:100%; border-top:1px solid #ddd; padding-top:8px; }
  .account { font-size:12px; flex-wrap:wrap; gap:8px; }
  .site-bar { padding:7px 12px; font-size:12px; }
  .layout { display:block; }
  .sidebar { border-right:0; border-bottom:1px solid #aaa; padding:10px; }
  .search { margin-bottom:10px; }
  .search input { font-size:14px; }
  .side-nav { display:flex; flex-wrap:wrap; gap:6px; }
  .nav-group { margin:0; border:0; }
  .nav-category,.nav-overview { padding:6px 8px; margin:0; border:1px solid #aaa; font-size:12px; }
  .nav-article,.sidebar-bottom { display:none!important; }
  .main { padding:12px; }
  .hero { padding:15px; }
  .hero h1 { font-size:27px; }
  .paths { grid-template-columns:1fr; gap:8px; }
  .paths>a { display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:12px; padding:12px; }
  .path-icon { grid-row:1/4; }
  .paths p { margin-bottom:5px; }
  .paths br { display:none; }
  .path-link { grid-column:2; }
  .section-heading>.muted { display:none; }
  .community-banner { flex-direction:column; align-items:flex-start; gap:12px; }
  .editor-fields { grid-template-columns:1fr; }
  .article-row { padding:12px 9px; gap:8px; }
  .reading h1 { font-size:25px; }
  .access { margin:10px 0 30px; padding:15px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }