/* gethop.lol: one stylesheet for the home page, the download page and the docs. */
@font-face {
  font-family: "Pretendard Std"; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url("/fonts/PretendardStdVariable.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-weight: 100 800; font-style: normal; font-display: swap;
  src: url("/fonts/JetBrainsMono.woff2") format("woff2");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: color-mix(in srgb, var(--brand) 60%, transparent); }
html { color-scheme: dark; }
html, body {
  --header-height: 72px; --footer-height: 87px;
  --brand: #3551f3;
  --gray-0: #0f0f11; --gray-1: #16161a; --gray-2: #242428; --gray-3: #4c4c50; --gray-4: #828286;
  --gray-5: #959597; --gray-6: #c3c3c4; --gray-7: #dbdbdc; --gray-8: #eaeaeb; --gray-9: #f0f0f4;
  --note: #61aeee; --tip: #98c379; --important: #c678dd; --warning: #e6c07b; --caution: #e06c75;
  --code-fg: #abb2bf;
  --sans: "Pretendard Std", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--gray-0); max-width: 100vw;
}
body { font-family: var(--sans); font-size: 16px; color: #fff; -webkit-font-smoothing: antialiased; }
body.noScroll { overflow: hidden; }
a { color: var(--gray-9); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.grid { width: 100%; max-width: 1700px; margin: 0 auto; padding: 0 40px; position: relative; }

/* ---- navbar ---- */
.navbar {
  z-index: 5; height: var(--header-height); background: var(--gray-0);
  border-bottom: 1px solid var(--gray-2); position: sticky; top: 0;
}
.navbar .grid { height: 100%; display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 26px; font-weight: 500; letter-spacing: -0.01em; }
.logo img { width: 32px; height: 32px; display: block; }
.desktopLinks { display: flex; align-items: center; }
.desktopLinks ul { display: flex; gap: 30px; list-style: none; }
.link { display: flex; align-items: center; text-decoration: none; }
.link svg { margin-left: 4px; }
.link svg path { transition: transform .1s ease-in-out; }
.link:hover svg path:not(:first-of-type) { transform: translate(2px, -2px); }
.desktopLinks ul a, .footer ul a { color: var(--gray-5); }
.desktopLinks ul a:hover, .footer ul a:hover { color: var(--gray-9); }
.desktopLinks ul a.active { text-decoration: underline; }
.button {
  display: flex; justify-content: center; align-items: center; text-decoration: none;
  --button-color: var(--gray-3); border: 1px solid var(--button-color); border-radius: 6px;
  padding: 10px 34px; font-size: 16px; transition: background-color .15s;
}
.button.brand { --button-color: var(--brand); }
button.button { font-family: inherit; color: var(--gray-9); background: none; cursor: pointer; }
.button:hover { background-color: var(--button-color); }
.button.medium { padding: 6px 18px; font-size: 15px; }
.desktopLinks .button { margin-left: 30px; }

.menuToggle {
  display: none; appearance: none; cursor: pointer; touch-action: manipulation; height: var(--header-height);
  background: none; border: none; margin: 0 -24px 0 0; padding: 0 24px; font-size: 16px;
}
.hamburger { width: 24px; height: 1em; position: relative; }
.hamburger i { background: #fff; border-radius: 1px; width: 100%; height: 2px; position: absolute; left: 0; transition: transform .1s ease-in-out, opacity .1s ease-in-out; }
.hamburger i:nth-child(1) { transform: translateY(0); }
.hamburger i:nth-child(2) { transform: translateY(calc(.5em - 1px)); }
.hamburger i:nth-child(3) { transform: translateY(calc(1em - 2px)); }
.menuToggle[aria-expanded=true] i:nth-child(1) { transform: translateY(.5em) rotate(45deg); }
.menuToggle[aria-expanded=true] i:nth-child(2) { opacity: 0; }
.menuToggle[aria-expanded=true] i:nth-child(3) { transform: translateY(.5em) rotate(-45deg); }
.mobileContent {
  display: none; overflow: auto; background: var(--gray-0); height: calc(100dvh - var(--header-height));
  border-top: 1px solid var(--gray-2); padding: 24px;
}
.mobileContent[data-open=true] { display: block; }

/* ---- nav tree (sidebar and mobile menu) ---- */
.navTree ul { display: flex; flex-direction: column; list-style: none; }
.navTree li { width: 100%; margin-bottom: 2px; }
.navTree a, .navTree summary {
  display: block; font-size: 16px; line-height: 16px; padding: 12px 6px; border-radius: 5px; text-decoration: none;
}
.navTree a { color: var(--gray-5); font-weight: 400; }
.navTree a:hover { background: var(--gray-2); color: var(--gray-9); }
.navTree a.active { background: var(--brand); color: var(--gray-9); }
.navTree summary {
  display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none;
  color: var(--gray-6); font-weight: 500; margin-bottom: 2px;
}
.navTree summary::-webkit-details-marker { display: none; }
.navTree summary:hover { color: var(--gray-9); background: var(--gray-2); }
.navTree summary svg { transition: transform .2s; }
.navTree details[open] > summary svg { transform: rotate(-180deg); }
.navTree details > ul { margin-left: 12px; }
.navTree hr { border: none; border-bottom: 1px solid var(--gray-2); margin: 20px 0; }

/* ---- docs layout ---- */
.docsPage { display: flex; justify-content: center; max-width: 100%; }
.sidebar {
  width: 320px; flex: none; scrollbar-gutter: stable; border-right: 1px solid var(--gray-2);
  position: sticky; top: var(--header-height); overflow: hidden auto;
  max-height: calc(100vh - var(--header-height)); min-height: calc(100vh - var(--header-height) - var(--footer-height));
}
.sidebar > div { padding: 26px 16px; }
.contentWrapper { display: flex; flex-grow: 1; margin: 24px auto 88px; max-width: min(1083px, calc(100vw - 320px)); }
.docsContent { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; padding: 0 24px; max-width: min(800px, calc(100vw - 603px)); }
.breadcrumbsBar { border-bottom: 1px solid var(--gray-2); padding: 12px 0 30px; }
.breadcrumbs { display: flex; flex-wrap: wrap; list-style: none; }
.breadcrumbs li { display: flex; align-items: center; color: var(--gray-5); }
.breadcrumbs a { text-decoration: none; font-weight: 400; }
.breadcrumbs a:hover, .breadcrumbs a.active { text-decoration: underline; }
.breadcrumbs svg { margin: 0 10px; color: var(--gray-5); }
.heading { border-bottom: 1px solid var(--gray-2); padding: 30px 0; }
.heading h1 { font-size: 35px; font-weight: 500; line-height: 1.2em; color: var(--gray-9); }
.heading p { color: var(--gray-5); max-width: 70%; margin-top: 8px; line-height: 1.4em; }

.sidecar {
  flex: none; width: 235px; margin: 84px 24px 0; position: sticky; top: calc(var(--header-height) + 24px);
  height: min(600px, 100vh - var(--header-height) - 132px); overflow-y: auto;
}
.sidecar ul { list-style: none; }
.sidecar li { --item: var(--gray-4); border-left: 2px solid var(--item); padding: 2px 0 2px 20px; line-height: 1.4em; overflow-wrap: break-word; }
.sidecar li.d3 { padding-left: 28px; }
.sidecar li:hover { --item: var(--gray-6); }
.sidecar li.active { --item: var(--gray-8); }
.sidecar a { color: var(--item); text-decoration-line: none; }
.sidecar a:hover, .sidecar li.active a { text-decoration-line: underline; }

/* ---- docs prose ---- */
.mdx > p { margin: .8em 0; }
.mdx p, .mdx li { color: var(--gray-5); font-size: 16px; line-height: 1.6em; }
.mdx strong { color: var(--gray-6); font-weight: 500; }
.mdx a { font-weight: 500; text-underline-offset: 2px; }
.mdx > ul, .mdx > ol { margin: 16px 0; padding-left: 42px; }
.mdx h2, .mdx h3 { color: var(--gray-9); font-weight: 500; line-height: 1.2em; scroll-margin-top: calc(var(--header-height) + 16px); }
.mdx h2 { font-size: 25px; margin: 52px 0 20px; }
.mdx h3 { font-size: 18px; margin: 39px 0 15px; }
.mdx h2 + h3 { margin-top: 0; }
.mdx hr { border: none; border-bottom: 1px solid var(--gray-2); margin: 42px 0; }
.mdx :not(pre) > code {
  font-family: var(--mono); font-size: 15px; line-height: 1.25em; border: 1px solid var(--gray-3);
  background: var(--gray-2); color: var(--gray-9); border-radius: 4px; margin: -1px 0; padding: 1px 6px;
}
.codeBlock { border: 1px solid var(--gray-3); border-radius: 5px; margin: 16px 0; font-size: 16px; position: relative; overflow: hidden; }
.codeBlock code { display: block; overflow-x: auto; font-family: var(--mono); padding: 16px; color: var(--code-fg); background: var(--gray-1); }
.codeBlock .c { color: #5c6370; font-style: italic; }
.copyButton {
  display: flex; background-color: var(--gray-2); cursor: pointer; color: var(--gray-6); opacity: 0; border: none; border-radius: 5px;
  padding: 4px; transition: background-color .25s ease-in-out, opacity .25s ease-in-out; position: absolute; top: 12px; right: 12px;
}
.codeBlock:hover .copyButton, .copyButton:focus { opacity: 1; }
.copyButton:hover { background-color: var(--gray-3); }
.copyButton.done { color: var(--tip); }

.callout { border-left: 3px solid var(--callout); margin: 32px 0; padding: 6px 20px; }
.callout.note { --callout: var(--note); }
.callout.tip { --callout: var(--tip); }
.callout.important { --callout: var(--important); }
.callout.warning { --callout: var(--warning); }
.callout.caution { --callout: var(--caution); }
.callout .calloutHeader { display: flex; align-items: center; color: var(--callout); font-weight: 500; margin-bottom: 14px; line-height: 1.4em; }
.callout .calloutHeader svg { margin-right: 8px; }

.mdx table { table-layout: auto; border-collapse: collapse; margin: 32px 0; display: block; overflow: auto; }
.mdx th, .mdx td { color: var(--gray-5); text-align: start; padding: 10px 16px 10px 2px; line-height: 1.4em; }
.mdx th { color: var(--gray-7); vertical-align: bottom; font-weight: 600; }
.mdx tr { border-bottom: 1px solid var(--gray-2); }
.mdx thead tr { border-bottom-color: var(--gray-3); }

.cardLinks { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 16px 0; list-style: none; padding: 0 !important; }
.cardLinks li { border: 1px solid var(--gray-2); border-radius: 10px; }
.cardLinks li:hover { background-color: var(--gray-2); }
.cardLinks a { display: block; padding: 20px; text-decoration: none; font-weight: 400; }
.cardLinks b { display: block; color: var(--gray-9); font-weight: 500; margin-bottom: 10px; }
.cardLinks span { color: var(--gray-4); line-height: 1.4em; }

.scrollTop {
  display: none; background: var(--gray-2); color: var(--gray-9); cursor: pointer; z-index: 10; border: none; border-radius: 5px;
  justify-content: center; align-items: center; width: 40px; height: 40px; position: fixed; bottom: 20px; right: 20px;
}
.scrollTop.show { display: flex; }
.scrollTop:hover { background: var(--gray-3); }

/* ---- footer ---- */
.footer { background: var(--gray-0); border-top: 1px solid var(--gray-2); padding: 32px 0; }
.footer .grid { display: flex; justify-content: space-between; align-items: center; }
.footer ul { display: flex; gap: 40px; list-style: none; }
.footer p { color: var(--gray-5); }
.footer p a { color: var(--gray-6); text-underline-offset: 2px; }
.footer p a:hover { color: var(--gray-9); }

/* ---- home ---- */
.homePage {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
  min-height: calc(100dvh - var(--header-height)); padding: 32px 16px;
}
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: min(1280px, 100%, calc((100svh - 400px) * 32 / 9 + 20px)); }
.window { min-width: 0; border: 1px solid var(--gray-3); border-radius: 10px; overflow: hidden; background: var(--gray-0); }
.titlebar {
  position: relative; height: 36px; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--gray-2); font-size: 14px; color: var(--gray-5); user-select: none;
}
.titlebar img { width: 16px; height: 16px; margin-right: 6px; }
.caption { position: absolute; right: 0; top: 0; bottom: 0; display: flex; }
.caption span { width: 44px; display: grid; place-items: center; color: var(--gray-3); }
.caption svg { width: 10px; height: 10px; }
.screen { position: relative; aspect-ratio: 16 / 9; background: #000; }
.screen video, .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tagline { max-width: 62ch; text-align: center; color: var(--gray-5); line-height: 1.4em; text-wrap: balance; }
.tagline b { color: var(--gray-6); font-weight: 500; }
.buttonsList { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.meta { font-size: 14px; color: var(--gray-4); text-align: center; font-variant-numeric: tabular-nums; }

/* ---- download ---- */
.downloadPage { min-height: calc(100vh - var(--header-height) - var(--footer-height)); padding: 80px 0; }
.downloadPage header { display: flex; flex-direction: column; align-items: center; }
.downloadPage header img { width: 80px; height: 80px; margin-bottom: 20px; }
.downloadPage h1 { text-align: center; margin-bottom: 12px; font-size: 45px; font-weight: 500; line-height: 1.2em; color: var(--gray-9); }
.downloadPage .versionInfo { color: var(--gray-6); margin-bottom: 80px; text-align: center; }
.card { border: 1px solid var(--gray-2); border-radius: 10px; padding: 32px; max-width: 640px; margin: 0 auto; }
.card h2 { font-size: 25px; font-weight: 500; color: var(--gray-9); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.card p { color: var(--gray-5); line-height: 1.6em; margin-bottom: 16px; }
.card .row { display: flex; flex-wrap: wrap; gap: 10px; }
.card .callout { margin: 24px 0 0; }
.card .callout p:not(.calloutHeader) { margin: 0; }

@media (prefers-reduced-motion: reduce) { .screen video { display: none; } * { transition: none !important; } }
@media (max-width: 1276px) {
  .sidecar { display: none; }
  .docsContent { max-width: min(800px, calc(100vw - 320px)); }
}
@media (max-width: 1100px) { .heading p { max-width: unset; } .downloadPage h1 { font-size: 38px; } .downloadPage .versionInfo { margin-bottom: 48px; } }
@media (max-width: 784px) {
  .sidebar { display: none; }
  .contentWrapper { max-width: 100%; margin: 24px auto 54px; }
  .docsContent { max-width: 100%; }
  .cardLinks { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .grid { padding: 0 28px; }
  .desktopLinks { display: none; }
  .menuToggle { display: block; }
  .heading h1 { font-size: 30px; }
  .mdx h2 { font-size: 22px; }
  .mdx h3 { font-size: 16px; }
  .footer .grid { flex-direction: column; align-items: flex-start; }
  .footer ul { flex-wrap: wrap; gap: 32px; margin-bottom: 38px; }
  .shots { grid-template-columns: 1fr; width: min(560px, 100%); }
  .downloadPage { padding: 48px 0; }
}
@media (max-width: 520px) { .caption { display: none; } .card { padding: 24px; } }
@media print { .navbar, .sidebar, .sidecar, .footer, .scrollTop { display: none; } }

/* ---- search ---- */
.searchOpen {
  display: flex; align-items: center; gap: 8px; height: 36px; margin-right: 30px; padding: 0 10px; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--gray-5); background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 6px;
  transition: border-color .15s, color .15s;
}
.searchOpen:hover { border-color: var(--gray-3); color: var(--gray-9); }
.searchOpen span { min-width: 110px; text-align: left; }
.searchOpen.icon { margin: 0; padding: 0; width: 40px; height: 40px; justify-content: center; background: none; border: none; color: var(--gray-9); }
kbd { font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--gray-5); border: 1px solid var(--gray-3); border-radius: 4px; padding: 3px 5px; }
.mobileButtons { display: none; align-items: center; gap: 4px; }
dialog.search {
  width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 96px)); margin: 72px auto auto; padding: 0; overflow: hidden;
  color: #fff; background: var(--gray-1); border: 1px solid var(--gray-3); border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
dialog.search[open] { display: flex; flex-direction: column; }
dialog.search::backdrop { background: rgba(0, 0, 0, .6); }
.searchBox { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--gray-2); color: var(--gray-5); flex: none; }
.searchBox input { flex: 1; min-width: 0; height: 54px; font: inherit; color: var(--gray-9); background: none; border: none; outline: none; }
.searchBox input::-webkit-search-cancel-button { display: none; }
.searchBox input::placeholder { color: var(--gray-4); }
.searchResults { list-style: none; overflow-y: auto; padding: 8px; }
.searchResults:empty { display: none; }
.searchResults a { display: block; padding: 10px 12px; border-radius: 6px; text-decoration: none; }
.searchResults a.picked, .searchResults a:hover { background: var(--gray-2); }
.searchResults a.picked { box-shadow: inset 2px 0 0 var(--brand); }
.searchResults b { font-weight: 500; color: var(--gray-9); }
.searchResults i { font-style: normal; font-size: 13px; color: var(--gray-4); margin-left: 10px; }
.searchResults span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4em; color: var(--gray-5); overflow-wrap: anywhere; }
.searchResults mark { background: none; color: #fff; text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.searchHint { padding: 16px; font-size: 14px; color: var(--gray-4); }
.searchHint:empty { display: none; }

/* ---- heading links ---- */
.jumplink {
  display: inline-flex; vertical-align: middle; margin-left: 16px; padding: 4px; cursor: pointer; opacity: 0;
  color: var(--gray-9); background: none; border: 1px solid var(--gray-4); border-radius: 3px; transition: opacity .2s, color .2s, border-color .2s;
}
h2:hover .jumplink, h3:hover .jumplink, .jumplink:focus-visible { opacity: 1; }
.jumplink.done { opacity: 1; color: var(--tip); border-color: var(--tip); }
@media (hover: none) { .jumplink { opacity: .6; } }

/* ---- pictures and clips in the docs ---- */
.mdx figure { margin: 24px 0; }
.mdx figure img, .mdx figure video { display: block; max-width: 100%; height: auto; border: 1px solid var(--gray-3); border-radius: 10px; }
.mdx figcaption { margin-top: 10px; font-size: 14px; line-height: 1.4em; color: var(--gray-4); }
.mdx .shots2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.mdx .shots2 figure { margin: 0; min-width: 0; }
.mdx .shots2 img { width: 100%; }
.mdx .window { margin: 24px 0; max-width: 640px; }
.mdx h4 { font-size: 16px; font-weight: 500; color: var(--gray-9); margin: 34px 0 13px; }
.mdx section > p { margin: .8em 0; }
.mdx section > ul, .mdx section > ol, .mdx details > ul { margin: 16px 0; padding-left: 42px; }
.mdx blockquote.quote { border-left: 3px solid var(--gray-9); margin: 32px 0; padding: 6px 20px; }
.mdx .releaseMeta { font-size: 14px; color: var(--gray-4); margin-top: -8px; }
.mdx .release + .release { border-top: 1px solid var(--gray-2); margin-top: 52px; }
.mdx .release code { overflow-wrap: anywhere; }

/* ---- 404 ---- */
.notFound {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; text-align: center;
  min-height: calc(100vh - var(--header-height) - var(--footer-height)); padding: 64px 16px;
}
.notFound img { width: 96px; height: 96px; }
.notFound h1 { font-size: 45px; font-weight: 500; line-height: 1.2em; color: var(--gray-9); }
.notFound p { color: var(--gray-5); line-height: 1.6em; max-width: 46ch; }
.notFound .buttonsList { margin-top: 14px; }

@media (max-width: 1000px) { .searchOpen span { display: none; } .searchOpen:not(.icon) { margin-right: 24px; } }
@media (max-width: 768px) { .mobileButtons { display: flex; } .menuToggle { margin: 0 -24px 0 0; } .mdx .shots2 { grid-template-columns: 1fr; } }