/*
	ΕΛΠΙΣ DNS - main stylesheet

	One palette, two moods. Every colour is a token defined here,
	so the dark theme is a swap and not a second stylesheet.

	Light : paper grey, ember orange
	Dark  : gunmetal grey, ember orange
*/

:root{
	--font-display:"Oswald","Arial Narrow",Segoe UI,sans-serif;
	--font-body:"Inter","Segoe UI",Helvetica,Arial,sans-serif;
	--font-mono:"JetBrains Mono",Consolas,"SF Mono",monospace;

	--radius:2px;
	--speed:.16s;
}

/* ---------- light ---------- */

:root,
:root[data-theme="light"]{
	--bg:#f4f4f5;
	--bg-alt:#ececed;
	--surface:#ffffff;
	--surface-alt:#e4e4e6;

	--text:#1b1c1e;
	--text-soft:#5b5e63;
	--text-faint:#8a8d92;

	--line:#d6d7da;
	--line-strong:#b9bbbf;

	--accent:#f24f2f;
	--accent-strong:#d63c1d;
	--accent-soft:rgba(242,79,47,.12);
	--on-accent:#ffffff;

	--btn-bg:#dedee0;
	--btn-text:#3d3f43;
	--btn-dead-bg:#eaeaec;
	--btn-dead-text:#a6a8ac;

	--shadow:0 1px 2px rgba(15,15,20,.06),0 8px 24px rgba(15,15,20,.05);
	--night:#0b0e13;
}

/* ---------- dark: orange on grey ---------- */

:root[data-theme="dark"]{
	--bg:#131416;
	--bg-alt:#191a1d;
	--surface:#1e2023;
	--surface-alt:#26282c;

	--text:#e9e7e4;
	--text-soft:#a8abb0;
	--text-faint:#7b7f85;

	--line:#2e3135;
	--line-strong:#3d4145;

	--accent:#ff7a2f;
	--accent-strong:#ff9552;
	--accent-soft:rgba(255,122,47,.14);
	--on-accent:#17110c;

	--btn-bg:#26282c;
	--btn-text:#c9ccd0;
	--btn-dead-bg:#1c1e21;
	--btn-dead-text:#5c6065;

	--shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.35);
	--night:#0b0e13;
}

/* ---------- base ---------- */

html{
	color-scheme:light;
}

:root[data-theme="dark"]{
	color-scheme:dark;
}

body{
	background:var(--bg);
	color:var(--text);
	font-family:var(--font-body);
	-webkit-font-smoothing:antialiased;
}

a{
	color:var(--accent);
	text-decoration:none;
}

a:hover{
	color:var(--accent-strong);
	text-decoration:underline;
}

code,
.inline-code{
	font-family:var(--font-mono);
	font-size:.95em;
	color:var(--accent);
}

::selection{
	background:var(--accent);
	color:var(--on-accent);
}

/* ---------- top bar ---------- */

.topbar{
	position:sticky;
	top:0;
	z-index:20;

	background:color-mix(in srgb,var(--bg) 88%,transparent);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--line);
}

.topbar-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:10px 12px;
}

.topbar-brand{
	display:flex;
	align-items:center;
	gap:10px;
	color:var(--text);
	text-decoration:none;
}

.topbar-brand:hover{
	color:var(--text);
	text-decoration:none;
}

.topbar-mark{
	width:30px;
	height:30px;
}

.topbar-name{
	font-family:var(--font-display);
	font-size:20px;
	font-weight:600;
	letter-spacing:3px;
}

.accent{
	color:var(--accent);
}

.topbar-actions{
	display:flex;
	align-items:center;
	gap:6px;
}

.topbar-link{
	display:inline-flex;
	align-items:center;
	gap:7px;

	padding:8px 12px;

	color:var(--text-soft);
	font-size:14px;
	font-weight:500;
	letter-spacing:.4px;

	border:1px solid transparent;
	border-radius:var(--radius);
	transition:var(--speed);
}

.topbar-link:hover{
	color:var(--accent);
	border-color:var(--line);
	background:var(--surface);
	text-decoration:none;
}

.theme-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	width:38px;
	height:38px;

	background:var(--surface);
	color:var(--text-soft);

	border:1px solid var(--line);
	border-radius:var(--radius);
	transition:var(--speed);
}

.theme-btn:hover{
	color:var(--accent);
	border-color:var(--accent);
}

/* ---------- hero ---------- */

/*
	The banner is an animated SVG night map: orange traffic leaving the
	resolver, a HUD walking the autonomous systems it talks to, and red
	queries dying on the shield ring.

	It lives on ::after rather than on .hero-banner itself because the map
	has to line up with the container that holds everything else on the
	page. The pseudo element repeats Bootstrap's container widths, centres
	itself, and anchors the map to its right content edge - so the map ends
	exactly where the text below it ends, at every breakpoint.
*/

.hero-banner{
	position:relative;

	width:100%;
	height:340px;

	background-color:var(--night);

	overflow:hidden;
}

.hero-banner::after{
	content:"";

	position:absolute;
	inset:0;
	margin:0 auto;

	max-width:1320px;
	padding:0 12px;

	background:url("img/hero-map.svg") no-repeat right center;
	background-origin:content-box;
	background-size:auto 100%;

	pointer-events:none;
	z-index:1;
}

@media (max-width:1399.98px){ .hero-banner::after{ max-width:1140px } }
@media (max-width:1199.98px){ .hero-banner::after{ max-width:960px } }
@media (max-width:991.98px){ .hero-banner::after{ max-width:720px } }
@media (max-width:767.98px){ .hero-banner::after{ max-width:540px } }
@media (max-width:575.98px){ .hero-banner::after{ max-width:none } }

/* SMIL cannot be switched off from CSS, so serve the still frame instead. */
@media (prefers-reduced-motion: reduce){
	.hero-banner::after{
		background-image:url("img/hero-map-static.svg");
	}
}

.hero-video{
	position:absolute;
	top:50%;
	left:50%;
	min-width:100%;
	min-height:100%;
	width:auto;
	height:auto;
	z-index:1;

	transform:translate(-50%,-50%);
	object-fit:cover;
}

/* Dense on the left where the words are, clear on the right where the map is. */
.hero-overlay{
	position:relative;
	z-index:2;

	width:100%;
	height:100%;

	background:linear-gradient(
		90deg,
		var(--night) 0%,
		rgba(11,14,19,.92) 28%,
		rgba(11,14,19,.72) 46%,
		rgba(11,14,19,.28) 68%,
		rgba(11,14,19,0) 88%
	);

	display:flex;
	align-items:center;
}

.hero{
	text-shadow:
		0 1px 4px rgba(0,0,0,.6),
		0 2px 14px rgba(0,0,0,.4);
}

.hero-kicker{
	/* Fixed, not tokenised: this always sits on the night map, never on
	   the page background, in either theme. */
	color:#ffc79f;
	font-family:var(--font-display);
	font-size:13px;
	font-weight:500;
	letter-spacing:5px;
	text-transform:uppercase;
	margin-bottom:10px;
}

.hero-title{
	color:#fff;
	font-family:var(--font-display);
	font-size:66px;
	font-weight:600;
	letter-spacing:6px;
	line-height:1.05;
}

.hero-subtitle{
	color:rgba(255,255,255,.9);
	font-size:18px;
	line-height:1.6;
	margin-top:14px;
	max-width:720px;
}

/* ---------- headings and copy ---------- */

.brand{
	font-family:var(--font-display);
	font-size:46px;
	font-weight:600;
	letter-spacing:3px;
	text-transform:uppercase;
	color:var(--text);
}

.brand::after{
	content:"";
	display:block;
	width:64px;
	height:4px;
	margin-top:12px;
	background:var(--accent);
}

.section-heading{
	font-family:var(--font-display);
	font-size:24px;
	font-weight:500;
	letter-spacing:2px;
	text-transform:uppercase;
	color:var(--text);

	padding-left:12px;
	border-left:4px solid var(--accent);
	margin-bottom:14px;
}

.subtitle{
	color:var(--text-soft);
	line-height:1.75;
	text-align:justify;
}

.note{
	color:var(--text-soft);
	font-size:15px;
}

/* ---------- house rules ---------- */

.rules{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:14px;
}

/* Six cards read better as two rows of three than as five and a stray. */
.rules-3{
	grid-template-columns:repeat(3,1fr);
}

@media (max-width:1199.98px){
	.rules-3{ grid-template-columns:repeat(2,1fr) }
}

.rule{
	background:var(--surface);
	border:1px solid var(--line);
	border-top:3px solid var(--accent);
	border-radius:var(--radius);
	padding:20px;
	transition:var(--speed);
}

.rule:hover{
	border-color:var(--line-strong);
	border-top-color:var(--accent);
	box-shadow:var(--shadow);
	transform:translateY(-2px);
}

.rule-index{
	font-family:var(--font-display);
	font-size:13px;
	letter-spacing:3px;
	color:var(--accent);
	margin-bottom:8px;
}

.rule-title{
	font-family:var(--font-display);
	font-size:19px;
	font-weight:500;
	letter-spacing:.6px;
	margin-bottom:8px;
	color:var(--text);
}

.rule-text{
	color:var(--text-soft);
	font-size:14.5px;
	line-height:1.65;
}

/* ---------- selectors ---------- */

.selector-group{
	border-left:4px solid var(--line-strong);
	margin-bottom:6px;
	transition:border-color var(--speed);
}

.selector-group:hover{
	border-left-color:var(--accent);
}

.selector-label{
	min-width:170px;

	font-family:var(--font-display);
	font-size:15px;
	font-weight:500;
	letter-spacing:2px;
	text-transform:uppercase;
	color:var(--text-soft);

	padding-top:16px;
	padding-left:12px;
}

.selector-options{
	flex:1;
	display:flex;
	gap:4px;
}

.option-btn{
	flex:1;

	border:1px solid transparent;
	border-radius:var(--radius);

	background:var(--btn-bg);
	color:var(--btn-text);

	padding:14px 20px;
	margin:2px;

	font-family:var(--font-body);
	font-size:15px;
	font-weight:500;
	letter-spacing:.3px;

	transition:var(--speed);
}

.option-btn:hover:not(.disabled-option){
	background:var(--accent);
	color:var(--on-accent);
}

.option-btn.active{
	background:var(--accent);
	color:var(--on-accent);
	font-weight:600;
	box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);
}

.option-btn:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:2px;
}

.disabled-option{
	background:var(--btn-dead-bg) !important;
	color:var(--btn-dead-text) !important;
	text-decoration:line-through;
	cursor:not-allowed;
}

/* ---------- endpoint box ---------- */

.command-box{
	flex:1;

	background:var(--surface);
	border:1px solid var(--line);
	border-left:4px solid var(--accent);
	border-radius:var(--radius);

	padding:18px 20px;

	font-family:var(--font-mono);
	font-size:15px;
	word-break:break-word;
}

#endpoint{
	white-space:nowrap;
	overflow-x:auto;
	font-size:16px;
	color:var(--text);
	padding:4px 0;
}

.btn-elpis{
	display:inline-flex;
	align-items:center;
	gap:6px;

	background:var(--accent);
	border:1px solid var(--accent);
	color:var(--on-accent);
	border-radius:var(--radius);

	font-family:var(--font-body);
	font-weight:600;
	letter-spacing:.3px;

	transition:var(--speed);
}

.btn-elpis:hover{
	background:var(--accent-strong);
	border-color:var(--accent-strong);
	color:var(--on-accent);
	text-decoration:none;
}

.btn-elpis-ghost{
	display:inline-flex;
	align-items:center;
	gap:6px;

	background:transparent;
	border:1px solid var(--line-strong);
	color:var(--text-soft);
	border-radius:var(--radius);

	font-family:var(--font-body);
	font-weight:500;

	transition:var(--speed);
}

.btn-elpis-ghost:hover{
	border-color:var(--accent);
	color:var(--accent);
	background:var(--accent-soft);
}

#download-rsc-btn.hidden{
	display:none;
}

/* ---------- summary ---------- */

.selection-summary{
	font-family:var(--font-body);
	font-size:15px;
	color:var(--text-soft);
}

.summary-chips{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.summary-chip{
	display:inline-flex;
	align-items:center;
	gap:6px;

	background:var(--surface-alt);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:5px 10px;

	font-size:13.5px;
}

.summary-chip b{
	color:var(--text);
}

.summary-key{
	font-family:var(--font-display);
	font-size:11px;
	letter-spacing:1.6px;
	text-transform:uppercase;
	color:var(--text-faint);
}

.summary-note{
	margin-top:12px;
	line-height:1.65;
	font-size:14.5px;
}

.summary-meta{
	margin-top:10px;
	font-size:13px;
	color:var(--text-faint);
}

/* ---------- rotation ---------- */

.server-list{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:10px;
}

.server-badge{
	display:inline-block;

	background:var(--surface-alt);
	border:1px solid var(--line);
	border-radius:var(--radius);

	padding:7px 11px;

	font-family:var(--font-mono);
	font-size:13px;
	color:var(--text-soft);

	transition:var(--speed);
}

.server-badge:hover{
	background:var(--accent);
	border-color:var(--accent);
	color:var(--on-accent);
}

/* ---------- gates ---------- */

/*
	Four cards on the front page, each a doorway into the mission page.
	The detail used to sit inline and made the page twice as long; now
	the front page stays about picking an endpoint, and anyone who wants
	the reasoning clicks through.
*/

.gates{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
}

@media (max-width:1199.98px){
	.gates{ grid-template-columns:repeat(2,1fr) }
}

.gate{
	display:flex;
	flex-direction:column;

	background:var(--surface);
	border:1px solid var(--line);
	border-top:3px solid var(--accent);
	border-radius:var(--radius);
	padding:20px;

	color:var(--text);
	text-decoration:none;

	transition:var(--speed);
}

.gate:hover{
	color:var(--text);
	text-decoration:none;
	border-color:var(--line-strong);
	border-top-color:var(--accent);
	box-shadow:var(--shadow);
	transform:translateY(-2px);
}

.gate-icon{
	font-size:22px;
	color:var(--accent);
	margin-bottom:12px;
}

.gate-title{
	font-family:var(--font-display);
	font-size:21px;
	font-weight:500;
	letter-spacing:1px;
	margin-bottom:8px;
	color:var(--text);
}

.gate-text{
	flex:1;

	color:var(--text-soft);
	font-size:14.5px;
	line-height:1.65;
	margin-bottom:14px;
}

.gate-more{
	display:inline-flex;
	align-items:center;
	gap:2px;

	font-family:var(--font-display);
	font-size:12px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:var(--accent);
}

.gate:hover .gate-more{
	color:var(--accent-strong);
}

.gate-more i{
	font-size:18px;
	transition:transform var(--speed);
}

.gate:hover .gate-more i{
	transform:translateX(3px);
}

/* ---------- blacklist ---------- */

/*
	Each entry is a native <details>. Closed, the section is four one-line
	rows; open, it shows the description and the subscription URLs. No
	JavaScript involved - the disclosure widget the browser already ships
	is keyboard accessible and survives having the script blocked.
*/

.blacklist{
	display:flex;
	flex-direction:column;
	gap:8px;
}

.bl-item{
	background:var(--surface);
	border:1px solid var(--line);
	border-left:4px solid var(--accent);
	border-radius:var(--radius);
	transition:var(--speed);
}

.bl-item:hover{
	border-color:var(--line-strong);
	border-left-color:var(--accent);
}

.bl-item[open]{
	box-shadow:var(--shadow);
}

.bl-item > summary{
	display:flex;
	align-items:center;
	gap:14px;

	padding:13px 18px;

	cursor:pointer;
	list-style:none;
	-webkit-user-select:none;
	user-select:none;
}

/* Chrome and Safari draw their own triangle unless told otherwise. */
.bl-item > summary::-webkit-details-marker{
	display:none;
}

.bl-item > summary:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:-2px;
}

.bl-item > summary:hover .bl-name{
	color:var(--accent);
}

.bl-index{
	font-family:var(--font-display);
	font-size:19px;
	letter-spacing:2px;
	color:var(--accent);
	opacity:.7;
	min-width:30px;
}

.bl-name{
	flex:1;

	font-family:var(--font-display);
	font-size:19px;
	font-weight:500;
	letter-spacing:.8px;
	color:var(--text);

	transition:var(--speed);
}

.bl-tag{
	font-family:var(--font-display);
	font-size:10.5px;
	letter-spacing:2px;
	white-space:nowrap;

	color:var(--text-faint);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:2px 7px;
}

.bl-tag-ours{
	color:var(--accent);
	border-color:var(--accent);
	background:var(--accent-soft);
}

.bl-chev{
	color:var(--text-faint);
	font-size:13px;
	transition:transform var(--speed);
}

.bl-item[open] .bl-chev{
	transform:rotate(180deg);
}

/* Indented to line up under the name, not under the number. */
.bl-body{
	padding:0 18px 16px 62px;
	animation:bl-reveal .18s ease-out;
}

@keyframes bl-reveal{
	from{ opacity:0; transform:translateY(-4px) }
	to{ opacity:1; transform:none }
}

@media (prefers-reduced-motion: reduce){
	.bl-body{ animation:none }
}

.bl-text{
	color:var(--text-soft);
	font-size:14.5px;
	line-height:1.7;
	margin-bottom:10px;
}

.bl-url,
.copy-row{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;

	background:var(--bg-alt);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:8px 10px;
	margin-top:6px;
}

.bl-url code,
.copy-row code{
	flex:1;
	min-width:0;

	font-size:12.5px;
	color:var(--text-soft);
	overflow-x:auto;
	white-space:nowrap;
}

.bl-note{
	font-size:12px;
	color:var(--text-faint);
	letter-spacing:.4px;
	white-space:nowrap;
}

.bl-src{
	display:inline-flex;
	align-items:center;
	gap:6px;

	margin-top:12px;
	font-size:13px;
	color:var(--text-faint);
}

.bl-src:hover{
	color:var(--accent);
	text-decoration:none;
}

.address-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:10px;
}

@media (max-width:1399.98px){
	.address-grid{ grid-template-columns:repeat(2,1fr) }
}

.address-grid .copy-row{
	margin-top:0;
}

.address-grid code{
	font-size:14px;
	color:var(--text);
}

/* ---------- call to action ---------- */

.cta{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;

	background:var(--surface);
	border:1px solid var(--line);
	border-left:4px solid var(--accent);
	border-radius:var(--radius);
	padding:24px;
}

.cta-title{
	font-family:var(--font-display);
	font-size:22px;
	font-weight:500;
	letter-spacing:1px;
	margin-bottom:6px;
	color:var(--text);
}

.cta-text{
	color:var(--text-soft);
	font-size:15px;
	line-height:1.6;
}

.cta .btn-elpis{
	white-space:nowrap;
	padding:12px 20px;
}

/* ---------- tables ---------- */

.table{
	--bs-table-bg:transparent;
	--bs-table-color:var(--text);
	--bs-table-border-color:var(--line);
	--bs-table-hover-bg:var(--accent-soft);
	--bs-table-hover-color:var(--text);

	font-family:var(--font-mono);
	font-size:14px;
}

.table thead th{
	font-family:var(--font-display);
	font-weight:500;
	letter-spacing:2px;
	text-transform:uppercase;
	color:var(--text-faint);
	font-size:12px;
}

/* ---------- footer ---------- */

footer{
	background:var(--bg-alt);
	border-top:1px solid var(--line) !important;
	text-align:justify;
}

.footer-title{
	font-family:var(--font-display);
	font-size:19px;
	font-weight:500;
	letter-spacing:2px;
	text-transform:uppercase;
	margin-bottom:14px;
	color:var(--text);
}

.footer-text{
	color:var(--text-soft);
	line-height:1.7;
	font-size:15px;
}

.footer-links{
	display:flex;
	flex-direction:column;
	gap:8px;
}

.footer-bottom{
	color:var(--text-faint);
	font-size:14px;
	text-align:center;
	border-color:var(--line) !important;
}

footer .border-top{
	border-color:var(--line) !important;
}

#footer-quote{
	font-family:var(--font-body);
	font-style:italic;
	font-size:15px;
	color:var(--text-soft);
	cursor:pointer;
	transition:opacity .25s;
	max-width:720px;
	margin:0 auto;
}

#footer-quote:hover{
	color:var(--text);
}

.quote-by{
	display:block;
	margin-top:6px;

	font-family:var(--font-display);
	font-style:normal;
	font-size:12.5px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:var(--accent);
}

/* ---------- setup page ---------- */

.page-head{
	border-bottom:1px solid var(--line);
	padding:56px 0 34px;
	margin-bottom:34px;
}

.page-kicker{
	font-family:var(--font-display);
	font-size:12px;
	letter-spacing:5px;
	text-transform:uppercase;
	color:var(--accent);
	margin-bottom:10px;
}

.page-title{
	font-family:var(--font-display);
	font-size:52px;
	font-weight:600;
	letter-spacing:4px;
	text-transform:uppercase;
	line-height:1.05;
	color:var(--text);
}

.page-lead{
	color:var(--text-soft);
	font-size:17px;
	line-height:1.75;
	max-width:760px;
	margin-top:16px;
}

.doc-jump{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:40px;
}

.doc-jump a{
	display:inline-flex;
	align-items:center;
	gap:8px;

	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:10px 14px;

	color:var(--text-soft);
	font-size:14px;
	font-weight:500;

	transition:var(--speed);
}

.doc-jump a:hover{
	border-color:var(--accent);
	color:var(--accent);
	background:var(--accent-soft);
	text-decoration:none;
}

.doc-section{
	background:var(--surface);
	border:1px solid var(--line);
	border-left:4px solid var(--accent);
	border-radius:var(--radius);
	padding:26px 28px;
	margin-bottom:20px;
	scroll-margin-top:80px;
}

.doc-title{
	display:flex;
	align-items:center;
	gap:12px;

	font-family:var(--font-display);
	font-size:26px;
	font-weight:500;
	letter-spacing:1.6px;
	color:var(--text);
	margin-bottom:6px;
}

.doc-title i{
	color:var(--accent);
}

.doc-tag{
	display:inline-block;
	margin-left:auto;

	font-family:var(--font-display);
	font-size:11px;
	letter-spacing:2px;
	text-transform:uppercase;

	background:var(--accent-soft);
	color:var(--accent);
	border:1px solid var(--accent);
	border-radius:var(--radius);
	padding:3px 8px;
}

.doc-text{
	color:var(--text-soft);
	font-size:15px;
	line-height:1.75;
	margin-bottom:14px;
}

/* A list that continues after a code block carries style="--start:3",
   because the CSS counter cannot read the start attribute. */
.doc-steps{
	counter-reset:step var(--start,0);
	list-style:none;
	padding-left:0;
	margin:0;
}

.doc-steps li{
	counter-increment:step;
	position:relative;

	padding-left:44px;
	padding-bottom:16px;

	color:var(--text-soft);
	font-size:15px;
	line-height:1.7;
}

.doc-steps li::before{
	content:counter(step,decimal-leading-zero);

	position:absolute;
	left:0;
	top:1px;

	font-family:var(--font-display);
	font-size:13px;
	letter-spacing:1px;

	background:var(--surface-alt);
	border:1px solid var(--line);
	border-radius:var(--radius);
	color:var(--accent);

	width:30px;
	height:24px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.doc-steps li b,
.doc-text b{
	color:var(--text);
}

.code-block{
	position:relative;

	background:var(--bg-alt);
	border:1px solid var(--line);
	border-radius:var(--radius);

	margin:12px 0 18px;
	padding:16px 18px;

	overflow-x:auto;
}

.code-block pre{
	margin:0;

	font-family:var(--font-mono);
	font-size:13.5px;
	line-height:1.7;
	color:var(--text);

	white-space:pre;
}

.copy-code{
	position:absolute;
	top:8px;
	right:8px;

	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	color:var(--text-faint);

	font-size:12px;
	padding:4px 9px;

	opacity:0;
	transition:var(--speed);
}

.code-block:hover .copy-code,
.copy-code:focus{
	opacity:1;
}

.copy-code:hover{
	color:var(--accent);
	border-color:var(--accent);
}

.doc-note{
	display:flex;
	gap:12px;

	background:var(--accent-soft);
	border:1px solid var(--accent);
	border-radius:var(--radius);
	padding:14px 16px;
	margin-top:6px;

	color:var(--text-soft);
	font-size:14.5px;
	line-height:1.7;
}

.doc-note i{
	color:var(--accent);
	font-size:18px;
	line-height:1.4;
}

.picked{
	font-family:var(--font-mono);
	color:var(--accent);
	word-break:break-all;
}