.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;
}

.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;
}

.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;
}