.ui-bevel-t {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
  corner-shape: bevel;
}

.ui-winhead h1,
.ui-winhead h2,
.ui-winhead h3 {
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 800;
  position: relative;
  top: -6px;
  right: 1px;
}

.ui-winhead-text-4xl h1 {
	font-size: 24px;
	text-transform: uppercase;
	font-weight: 800;
  position: relative;
  top: -16px;
  right: 1px;
}

.ui-bevel {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
  corner-shape: bevel;
}

.ui-bevel-t {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
  corner-shape: bevel;
}

.ui-bevel-tl {
	border-top-left-radius: 16px;
  corner-shape: bevel;
}

.ui-bevel-tr {
	border-top-right-radius: 16px;
  corner-shape: bevel;
}

.ui-bevel-b {
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
  corner-shape: bevel;
}

.ui-bevel-bl {
	border-bottom-left-radius: 16px;
  corner-shape: bevel;
}

.ui-bevel-br {
	border-bottom-right-radius: 16px;
  corner-shape: bevel;
}

.ui-btn {
	cursor: pointer;
	color: #FFFFFF;
	border-width: 2px;
	border-color: #FFFFFF;
	border-top-right-radius: 16px;
	border-bottom-left-radius: 16px;
  corner-shape: bevel;
  padding: 8px 16px;
  margin: 0;
  transition-duration: 150ms;
  position: relative;
}

.ui-btn:hover {
	color: #5F5F5F;
	border-color: #5F5F5F;
}

.ui-btn:active {
  transform: translate(2px, 2px);
}

.ui-btn-red {
	cursor: pointer;
	color: #FF0000;
	border-width: 2px;
	border-color: #FF0000;
	border-top-right-radius: 16px;
	border-bottom-left-radius: 16px;
  corner-shape: bevel;
  padding: 8px 16px;
  margin: 0;
  transition-duration: 150ms;
  position: relative;
}

.ui-btn-red:hover {
	color: #000000;
	border-color: #FF0000;
	background-color: #FF0000;
}

.ui-btn-red:active {
  transform: translate(2px, 2px);
}

.link-red {
	color: #FF0000;
}

.link-red:hover {
	color: #5F5F5F;
}

/* Code blocks — override Rouge's github.dark panel color. Pure grey at 1/3 the
   brightness of the BaseCradle Grey #5F5F5F (rgb 95 → 32 = 0x20). Mirrors
   Rouge's compound selector so whitespace spans (.w) inherit the same bg —
   without this, tab characters render with the original navy. */
.highlight, .highlight .w {
	background-color: #202020;
}

/* Inline code chips — any <code> NOT inside a <pre> (i.e. backtick spans in
   prose). Same panel color as block code for consistency; #a5d6ff matches the
   light-blue Rouge applies to string literals (.s and variants). Tight chip
   padding so they don't break line flow. */
:not(pre) > code {
	background-color: #202020;
	color: #a5d6ff;
	padding: 2px 6px;
	font-size: 14px;
}

/* Docs tables — Tailwind preflight strips all default table styling. Scoped to
   .doc-content so app-internal tables (timeline lists, etc.) aren't affected. */
.doc-content table {
	border-collapse: collapse;
	margin-bottom: 32px;
}

.doc-content th,
.doc-content td {
	padding: 8px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #5F5F5F;
}

.doc-content th {
	color: #5F5F5F;
}

div.highlight {
	margin-bottom: 16px;
	padding: 16px;
}

/* Plain-text code blocks (```text fences, or any fence Rouge has no lexer for) —
   Kramdown emits these as bare <pre><code> with NO div.highlight wrapper, so
   none of the panel styling above applies and the text renders invisible
   (default black on the black page). Give them the same panel treatment as
   highlighted blocks: panel grey, Rouge github.dark default text color, same
   spacing. Scoped to :not(.highlight) so Rouge-wrapped <pre class="highlight">
   blocks don't get double padding. */
.doc-content pre:not(.highlight) {
	background-color: #202020;
	color: #c9d1d9;
	margin-bottom: 16px;
	padding: 16px;
}

.doc-content h1,
.doc-content h2,
.doc-content h3,
.doc-content h4,
.doc-content h5,
.doc-content h6 {
	font-weight: 800;
	margin-bottom: 16px;
	margin-top: 48px;
}

.doc-content h1 {
	font-size: 32px;
	margin-top: 16px;
}

.doc-content h2 {
	font-size: 24px;
	border-bottom: 2px solid #5F5F5F;
}

.doc-content h3 {
	font-size: 20px;
}

.doc-content h4,
.doc-content h5,
.doc-content h6 {
	font-size: 16px;
}

/* Blockquotes — Tailwind preflight zeroes the default left margin, leaving the
   element visually indistinguishable from a paragraph. Left bar + interior
   padding gives the standard "quoted block" treatment. */
.doc-content blockquote {
	border-left: 4px solid #5F5F5F;
	padding: 8px 16px;
	margin-bottom: 32px;
}

/* Horizontal rule — Tailwind preflight sets border-top-width: 1px but with
   color: inherit, which resolves to ~black on this page and is invisible.
   Pin an explicit visible border-top in palette Grey. */
.doc-content hr {
	border: 0;
	border-top: 1px solid #5F5F5F;
	margin: 32px 0;
}