@font-face { font-family: "Quibble Display"; src: url("../assets/fonts/PixelOperatorHB.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Quibble Text"; src: url("../assets/fonts/PixelOperator.ttf") format("truetype"); font-display: swap; }
:root { color-scheme: dark; font-family: "Quibble Text", "Courier New", Courier, monospace; background: #06152e; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: #e7f6ff; background: #06152e; }
a { color: inherit; }
.docs-background, .docs-vignette { position: fixed; inset: 0; pointer-events: none; }
.docs-background { z-index: -2; background: #091b36 url("../assets/landing-background-desert.png") center / cover no-repeat; filter: blur(4px) brightness(.31) saturate(.72); transform: scale(1.04); }
.docs-vignette { z-index: -1; background: radial-gradient(ellipse at center, rgba(4, 25, 52, .52), rgba(2, 8, 26, .93)); }
.docs-layout { display: grid; grid-template-columns: 286px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 30px 20px 22px; border-right: 2px solid rgba(124, 212, 243, .34); background: rgba(4, 21, 46, .9); box-shadow: 10px 0 30px rgba(0,0,0,.22); backdrop-filter: blur(10px); }
.brand { display: grid; justify-items: start; gap: 8px; margin: 0 8px 34px; text-decoration: none; }
.brand img { width: 190px; height: auto; filter: drop-shadow(0 5px 3px rgba(0,0,0,.45)); }
.brand span { color: #68e0ff; font-size: 11px; font-weight: bold; letter-spacing: .18em; }
.docs-nav { display: grid; gap: 7px; }
.docs-nav a { padding: 12px 14px; border: 1px solid transparent; border-radius: 6px; color: #b5d7e6; font-size: 12px; font-weight: bold; letter-spacing: .06em; text-decoration: none; transition: background 160ms ease, color 160ms ease, transform 160ms ease, border-color 160ms ease; }
.docs-nav a:hover, .docs-nav a:focus-visible, .docs-nav a.is-active { border-color: rgba(104, 224, 255, .48); outline: none; color: #fff4bd; background: linear-gradient(90deg, rgba(25, 174, 221, .26), rgba(25, 174, 221, .04)); transform: translateX(3px); }
.sidebar-footer { margin-top: auto; padding: 20px 8px 0; }
.sidebar-footer a { color: #f3cb6c; font-size: 11px; font-weight: bold; letter-spacing: .08em; text-decoration: none; }
.sidebar-footer a:hover { color: #fff4bd; }
.docs-content { width: min(100%, 960px); padding: 72px clamp(28px, 7vw, 88px) 100px; }
.doc-section { scroll-margin-top: 28px; margin-top: 36px; padding: clamp(24px, 4vw, 38px); border: 2px solid rgba(105, 203, 238, .38); border-radius: 12px; background: linear-gradient(145deg, rgba(13, 50, 84, .9), rgba(4, 20, 46, .92)); box-shadow: inset 0 0 0 3px rgba(114, 222, 255, .07), 0 13px 35px rgba(0,0,0,.22); }
.doc-section--hero { margin-top: 0; padding: clamp(34px, 7vw, 66px); border-color: #e7c768; background: radial-gradient(circle at 24% 4%, rgba(47, 213, 255, .22), transparent 38%), linear-gradient(145deg, rgba(17, 68, 105, .95), rgba(4, 24, 55, .96)); }
.eyebrow { margin: 0 0 11px; color: #57ddff; font-size: 12px; font-weight: bold; letter-spacing: .17em; }
h1, h2, h3 { margin: 0; color: #fff1bd; font-family: "Quibble Display", Impact, "Arial Black", sans-serif; letter-spacing: .015em; overflow-wrap: anywhere; }
h1 { max-width: 100%; font-size: clamp(36px, 5vw, 54px); line-height: 1.08; text-shadow: 4px 4px 0 #071b39; }
h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; text-shadow: 3px 3px 0 #071b39; }
h3 { font-size: 20px; }
p { color: #d2eaf4; font-size: 15px; line-height: 1.7; }
.lead { max-width: 650px; margin: 22px 0 28px; color: #d9f8ff; font-size: clamp(16px, 2vw, 20px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.doc-button { min-width: 150px; padding: 14px 18px; border: 2px solid #f3ce70; border-radius: 7px; background: linear-gradient(#18bfe9, #096aa6); box-shadow: inset 0 0 0 3px #07507d, 0 4px 0 #031a35; color: #fff4c9; font-family: "Quibble Display", Impact, "Arial Black", sans-serif; font-size: 13px; font-weight: bold; letter-spacing: .09em; text-align: center; text-decoration: none; transition: transform 150ms ease, filter 150ms ease; }
.doc-button--secondary { border-color: #87c8e2; background: linear-gradient(#215889, #0b294e); }
.doc-button:hover, .doc-button:focus-visible { outline: none; filter: brightness(1.14); transform: translateY(-3px); }
.callout { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; margin-top: 22px; padding: 15px 17px; border: 2px solid #f0c46c; border-radius: 8px; background: rgba(83, 48, 50, .5); }
.callout--cyan { border-color: #5cdaef; background: rgba(16, 77, 105, .45); }
.callout-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid currentColor; border-radius: 5px; color: #ffe486; font-weight: bold; }
.callout p { margin: 0; font-size: 13px; }
.control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.control-card { display: grid; gap: 8px; min-height: 92px; padding: 15px; border: 2px solid rgba(94, 190, 221, .45); border-radius: 8px; background: rgba(5, 24, 53, .56); }
kbd { width: max-content; padding: 6px 8px; border: 1px solid #efd379; border-radius: 4px; background: #102d55; color: #fff0b8; font: bold 13px/1 "Quibble Text", "Courier New", monospace; box-shadow: 0 2px 0 #020d20; }
.control-card span { color: #8eddec; font-size: 11px; font-weight: bold; letter-spacing: .1em; }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.mini-card { padding: 19px; border: 2px solid rgba(90, 180, 216, .44); border-radius: 8px; background: rgba(4, 25, 52, .55); }
.mini-card p { margin: 9px 0 0; font-size: 13px; line-height: 1.55; }
details { margin-top: 12px; border: 2px solid rgba(95, 190, 222, .4); border-radius: 7px; background: rgba(4, 24, 50, .56); }
summary { padding: 15px 17px; color: #fff0b9; cursor: pointer; font-size: 13px; font-weight: bold; letter-spacing: .04em; }
details p { margin: 0; padding: 0 17px 16px; font-size: 13px; }
.mobile-header { display: none; }
@media (max-width: 760px) { .docs-layout { display: block; } .mobile-header { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: 10px 16px; border-bottom: 1px solid rgba(124,212,243,.35); background: rgba(4,21,46,.93); backdrop-filter: blur(10px); } .brand--mobile { display: block; margin: 0; } .brand--mobile img { width: 116px; } .menu-toggle { border: 2px solid #76cde7; border-radius: 5px; padding: 9px 11px; background: #10375f; color: #fff0b9; font: bold 11px/1 "Quibble Text","Courier New",monospace; letter-spacing: .08em; } .sidebar { position: fixed; z-index: 7; top: 70px; left: 0; width: min(300px, 86vw); height: calc(100vh - 70px); padding-top: 24px; transform: translateX(-105%); transition: transform 220ms ease; } .sidebar.is-open { transform: translateX(0); } .sidebar .brand { display: none; } .docs-content { width: 100%; padding: 32px 18px 70px; } .doc-section { margin-top: 22px; } .control-grid, .two-column { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }