/* GAMA documentation. Colours follow the app: paper and ink with an oxblood accent; the dark theme follows GamaScan's neutrals. The theme is set on by theme.js before first paint. */ :root { color-scheme: light; --page: #f6f3ed; --paper: #fffcf8; --ink: #2a2521; --muted: #6b645a; --border: #e6ded2; --accent: #982f25; --accent-soft: #f5ece5; --code: #f1ece4; --warn: #8a5a00; --warn-soft: #fbf3e2; --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif; --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --topbar: 56px; } :root[data-theme='dark'] { color-scheme: dark; --page: #0f131c; --paper: #141925; --ink: #e6e9ef; --muted: #98a1b3; --border: #2a3242; --accent: #ef9b91; --accent-soft: #351e24; --code: #1b2130; --warn: #f0c36b; --warn-soft: #2b2415; } * { box-sizing: border-box; } html { scroll-padding-top: calc(var(--topbar) + 16px); } body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.65 var(--sans); -webkit-text-size-adjust: 100%; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; height: var(--topbar); padding: 0 20px; background: var(--paper); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: 0.08em; } .brand-docs { font-weight: 400; letter-spacing: 0; color: var(--muted); } .search { position: relative; margin-left: auto; width: min(320px, 40vw); } .search input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--page); color: var(--ink); font: inherit; font-size: 14px; } #search-results { position: absolute; top: 42px; right: 0; width: min(420px, 90vw); max-height: 60vh; overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--paper); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); } #search-results a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14px; } #search-results a:hover, #search-results a:focus { background: var(--accent-soft); } #search-results small { display: block; color: var(--muted); } .theme-toggle, .menu-toggle { height: 36px; min-width: 36px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; } .menu-toggle { display: none; padding: 0 10px; } .shell { display: grid; grid-template-columns: 260px minmax(0, 1fr) 220px; max-width: 1320px; margin: 0 auto; } .sidebar, .toc { position: sticky; top: var(--topbar); align-self: start; max-height: calc(100vh - var(--topbar)); overflow: auto; padding: 28px 20px; font-size: 14px; } .nav-title { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .nav-section + .nav-section { margin-top: 22px; } .sidebar ul, .toc ul { margin: 0; padding: 0; list-style: none; } .sidebar a, .toc a { display: block; padding: 4px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; } .sidebar a:hover, .toc a:hover { color: var(--accent); } .sidebar a[aria-current='page'] { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .toc a { padding: 3px 0; color: var(--muted); } main { min-width: 0; padding: 36px 40px 56px; background: var(--paper); border-left: 1px solid var(--border); border-right: 1px solid var(--border); min-height: calc(100vh - var(--topbar)); } article { max-width: 760px; } .eyebrow { margin: 0 0 4px; color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } h1 { margin: 0 0 12px; font-size: 34px; line-height: 1.2; letter-spacing: -0.02em; } h1 + p { color: var(--muted); font-size: 18px; } h2 { margin: 44px 0 12px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 23px; line-height: 1.3; } h3 { margin: 30px 0 8px; font-size: 18px; } h4 { margin: 24px 0 6px; font-size: 16px; } h1, h2, h3, h4 { position: relative; overflow-wrap: anywhere; } .anchor { position: absolute; left: -1.1em; color: var(--muted); text-decoration: none; opacity: 0; } h2:hover .anchor, h3:hover .anchor, h4:hover .anchor { opacity: 1; } code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--code); font: 0.88em/1.5 var(--mono); overflow-wrap: break-word; } pre { overflow: auto; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--code); } pre code { padding: 0; background: none; overflow-wrap: normal; } .table-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--border); border-radius: 8px; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } th { background: var(--page); font-weight: 600; } tr:last-child td { border-bottom: 0; } blockquote { margin: 20px 0; padding: 12px 16px; border-left: 3px solid var(--warn); border-radius: 0 8px 8px 0; background: var(--warn-soft); } blockquote p { margin: 0.4em 0; } hr { margin: 36px 0; border: 0; border-top: 1px solid var(--border); } .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; margin-top: 56px; } .pager a { padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; } .pager a:hover { border-color: var(--accent); } .pager span { display: block; color: var(--muted); font-size: 12px; font-weight: 400; } .pager .next { text-align: right; } .footer { max-width: 760px; margin-top: 40px; color: var(--muted); font-size: 13px; } @media (max-width: 1100px) { .shell { grid-template-columns: 240px minmax(0, 1fr); } .toc { display: none; } main { border-right: 0; } } @media (max-width: 760px) { .shell { display: block; } .menu-toggle { display: block; } .brand-docs { display: none; } .sidebar { position: fixed; inset: var(--topbar) 0 0 0; z-index: 9; max-height: none; background: var(--paper); display: none; } body.menu-open .sidebar { display: block; } main { padding: 24px 18px 40px; border: 0; } h1 { font-size: 28px; } .pager { grid-template-columns: 1fr; } .anchor { display: none; } }