/* linksite site styles (dark Aero). Loaded after 7.css on every page (landing, terms, privacy, advertise, admin).
   7.css docs: https://khang-nd.github.io/7.css/ */

:root {
	color-scheme: dark;
	--page-font: "Segoe UI", "SegoeUI", "Noto Sans", system-ui, -apple-system, sans-serif;
	--mono: Consolas, "Lucida Console", "Courier New", monospace;
	--night: #03102a;
	--aero: #1f74e0;
	--sky: #7fd3ff;
	--green: #2fc25a;
	--surface: #0b1322;
	--surface-2: #111b2e;
	--text: #eef4fb;
	--muted: #95a5ba;
	--rule: #22304a;
	--field: #060b15;
	--field-bd: #2e4264;
	--heading: #9fd4ff;
	--link: #7cc4ff;
	--note-bg: #1b1a10;
	--note-bd: #3b3721;
	--note-text: #e8e2c4;
	/* X (dark mode) */
	--x-bg: #000;
	--x-text: #e7e9ea;
	--x-muted: #71767b;
	--x-border: #2f3336;
	--x-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Desktop ---------- */
html { min-height: 100%; background: var(--night); }
body {
	margin: 0;
	min-height: 100vh;
	padding: clamp(.75rem, 5vw, 3.5rem) clamp(.5rem, 3vw, 1.5rem) 2rem;
	font: 15px/1.6 var(--page-font);
	color: var(--text);
	-webkit-tap-highlight-color: transparent;
}
/* The wallpaper sits on a fixed layer so it never scrolls or repaints, on phones too. */
body::before {
	content: ""; position: fixed; inset: 0; z-index: -1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E %3ClinearGradient id='bg' x1='0' y1='0' x2='.3' y2='1'%3E%3Cstop offset='0' stop-color='%23020a1c'/%3E%3Cstop offset='.55' stop-color='%2305204f'/%3E%3Cstop offset='1' stop-color='%230a3c8c'/%3E%3C/linearGradient%3E %3CradialGradient id='pool' cx='.2' cy='.95' r='.65'%3E%3Cstop offset='0' stop-color='%232a9bff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%232a9bff' stop-opacity='0'/%3E%3C/radialGradient%3E %3CradialGradient id='pool2' cx='.92' cy='.05' r='.5'%3E%3Cstop offset='0' stop-color='%233fe0c5' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%233fe0c5' stop-opacity='0'/%3E%3C/radialGradient%3E %3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%238fdcff' stop-opacity='0'/%3E%3Cstop offset='.45' stop-color='%23bfeaff'/%3E%3Cstop offset='1' stop-color='%238fdcff' stop-opacity='0'/%3E%3C/linearGradient%3E %3ClinearGradient id='t' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%233fe0c5' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%237ff5df'/%3E%3Cstop offset='1' stop-color='%233fe0c5' stop-opacity='0'/%3E%3C/linearGradient%3E %3CradialGradient id='bub' cx='.35' cy='.3' r='.7'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.22'/%3E%3Cstop offset='.6' stop-color='%239fdcff' stop-opacity='.05'/%3E%3Cstop offset='1' stop-color='%239fdcff' stop-opacity='.16'/%3E%3C/radialGradient%3E %3Cfilter id='w' x='-20%25' y='-50%25' width='140%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='26'/%3E%3C/filter%3E %3Cfilter id='s' x='-20%25' y='-50%25' width='140%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E %3C/defs%3E %3Crect width='1600' height='1000' fill='url(%23bg)'/%3E %3Crect width='1600' height='1000' fill='url(%23pool)'/%3E %3Crect width='1600' height='1000' fill='url(%23pool2)'/%3E %3Cg fill='none' stroke-linecap='round'%3E %3Cpath d='M-80 900C320 700 640 960 1000 700S1500 330 1700 260' stroke='url(%23a)' stroke-width='120' opacity='.22' filter='url(%23w)'/%3E %3Cpath d='M-80 900C320 700 640 960 1000 700S1500 330 1700 260' stroke='url(%23a)' stroke-width='10' opacity='.45' filter='url(%23s)'/%3E %3Cpath d='M-80 900C320 700 640 960 1000 700S1500 330 1700 260' stroke='url(%23a)' stroke-width='1.6' opacity='.9'/%3E %3Cpath d='M-60 980C380 820 700 1000 1080 760S1520 470 1700 420' stroke='url(%23a)' stroke-width='70' opacity='.16' filter='url(%23w)'/%3E %3Cpath d='M-60 980C380 820 700 1000 1080 760S1520 470 1700 420' stroke='url(%23a)' stroke-width='1.2' opacity='.6'/%3E %3Cpath d='M100 1040C520 860 760 880 1120 600S1460 200 1720 120' stroke='url(%23t)' stroke-width='90' opacity='.13' filter='url(%23w)'/%3E %3Cpath d='M100 1040C520 860 760 880 1120 600S1460 200 1720 120' stroke='url(%23t)' stroke-width='1.4' opacity='.55'/%3E %3Cpath d='M-100 760C260 620 560 820 900 640S1300 380 1700 360' stroke='url(%23a)' stroke-width='1' opacity='.35'/%3E %3C/g%3E %3Cg stroke='%23bfe8ff' stroke-opacity='.18' fill='url(%23bub)'%3E %3Ccircle cx='1340' cy='770' r='46'/%3E%3Ccircle cx='1418' cy='690' r='18'/%3E%3Ccircle cx='1270' cy='860' r='12'/%3E %3Ccircle cx='210' cy='180' r='30'/%3E%3Ccircle cx='262' cy='240' r='10'/%3E %3C/g%3E %3C/svg%3E") center / cover no-repeat, var(--night);
}

/* ---------- Window ---------- */
.main-window { max-width: 46rem; margin: 0 auto; }
.main-window.app { max-width: 722px; } /* sized so the post preview comes out exactly 600px wide, like on X */
.window.glass { box-shadow: 0 28px 80px -18px #000000e0, 0 0 0 1px #000a, inset 0 0 0 1px #fffa; }
.window.glass:after { backdrop-filter: blur(10px) saturate(1.5); -webkit-backdrop-filter: blur(10px) saturate(1.5); }
.title-bar-controls button { pointer-events: none; }
.title-bar-text { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.title-icon { width: 16px; height: 16px; flex: none; }
.window-body.doc {
	padding: clamp(1rem, 4vw, 2rem);
	background: linear-gradient(#0e1829f2, #0a1220f5 240px);
	color: var(--text);
	font: 15px/1.6 var(--page-font);
	border: 1px solid #000;
}
.doc > :first-child { margin-top: 0; }
.doc > :last-child { margin-bottom: 0; }
.main-window .status-bar { background: var(--surface-2); border-top: 1px solid var(--rule); color: var(--muted); }
.main-window .status-bar-field { border-color: var(--rule); }
.status-bar-field:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-bar-field.status-site, .status-bar-field.status-busy { flex: none; }
.status-bar-field[hidden] { display: none; }

/* ---------- Type ---------- */
.doc h1 { font: 300 clamp(1.7rem, 5vw, 2.4rem)/1.15 var(--page-font); color: var(--heading); margin: 0 0 .75rem; }
.doc h2 { font: 400 1.2rem/1.3 var(--page-font); color: var(--heading); margin: 2.25rem 0 .5rem; }
.doc p { margin: 0 0 1rem; }
.doc ol, .doc ul { padding-left: 1.4rem; margin: 0 0 1rem; }
.doc li { margin: .35rem 0; padding-left: .2rem; }
.doc code { font: .9em var(--mono); overflow-wrap: anywhere; }
.doc a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.lead { font-size: 1.05rem; max-width: 36rem; color: #c9d1d9; }
.muted, .small { color: var(--muted); font-size: 13px; }
.section-label { margin: 0 0 .5rem !important; color: var(--muted); font-size: 13px; }
.numbered { counter-reset: sec; }
.numbered h2::before { counter-increment: sec; content: counter(sec) ". "; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Fields and buttons (inner pages) ---------- */
.doc input:is([type=text], [type=url], [type=email], [type=file]) {
	width: 100%; min-width: 0; height: auto; min-height: 34px; padding: .4rem .6rem;
	font: 15px var(--page-font); color: var(--text);
	background: var(--field); border: 1px solid var(--field-bd); border-radius: 3px; box-shadow: none;
}
.doc input:is([type=text], [type=url], [type=email]):hover { border-color: #4a5f80; }
.doc input:is([type=text], [type=url], [type=email]):focus { border-color: #3d8bfd; box-shadow: 0 0 0 3px #3d8bfd33; outline: none; }
.doc input::placeholder { color: #66758a; }
.doc button { min-height: 34px; padding: 0 1.1rem; font: 14px var(--page-font); }

/* ======================================================================
   Landing page
   ====================================================================== */
.hero { margin: 0 0 2rem; }
.doc .hero h1 {
	margin: 0 0 .4rem;
	font: 300 clamp(1.65rem, 6.2vw, 2.7rem)/1.1 var(--page-font);
	letter-spacing: -.012em;
	color: #fff;
	text-shadow: 0 0 28px #3d9bff70;
}
.nowrap { white-space: nowrap; }
@media (max-width: 420px) { .nowrap { white-space: normal; } .doc .hero h1 { text-wrap: balance; } }
.doc .hero .lead { margin: 0; color: #b8c6d8; font-size: 1.06rem; text-wrap: pretty; }

/* ---------- Steps: a numbered rail that lights up as you go ---------- */
.doc .steps { list-style: none; margin: 0; padding: 0; }
.steps > .step {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	grid-template-areas: "dot title" "rail body";
	column-gap: 14px;
	margin: 0; padding: 0;
}
.step::before { /* the rail down to the next step */
	content: ""; grid-area: rail; justify-self: center;
	width: 2px; margin: 6px 0 4px; border-radius: 2px;
	background: var(--rule);
	transition: background-color .4s, box-shadow .4s;
}
.step:last-child::before { visibility: hidden; }
.step[data-state=done]::before { background: linear-gradient(var(--green), #2b86ff); box-shadow: 0 0 10px #2b86ff66; }

.step-dot {
	grid-area: dot; position: relative;
	display: grid; place-items: center;
	width: 30px; height: 30px; border-radius: 50%;
	font: 600 14px/1 var(--page-font); color: #a9b8cc;
	background: linear-gradient(#ffffff26, #ffffff0a 48%, #0000 50%), #17223a;
	border: 1px solid #ffffff2a;
	box-shadow: inset 0 1px #ffffff30, 0 1px 3px #0009;
	transition: background-color .3s, box-shadow .3s, color .3s;
}
.step-dot svg { display: none; width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.step[data-state=now] .step-dot {
	color: #fff; border-color: #0a3f86;
	background: linear-gradient(#ffffff8c, #ffffff26 48%, #0000 50%), radial-gradient(circle at 50% 110%, #6fe0ff, #0000 70%), var(--aero);
	box-shadow: 0 0 0 4px #2b86ff2e, 0 0 18px #2b86ffa0, inset 0 1px #fffa;
}
.step[data-state=done] .step-dot {
	border-color: #126b2c;
	background: linear-gradient(#ffffff80, #ffffff1f 48%, #0000 50%), radial-gradient(circle at 50% 110%, #b6ff9c, #0000 70%), #20a447;
	box-shadow: 0 0 14px #2fc25a80, inset 0 1px #fffa;
}
.step[data-state=done] .step-num { display: none; }
.step[data-state=done] .step-dot svg { display: block; filter: drop-shadow(0 1px 1px #0006); }

.doc .step-title { grid-area: title; align-self: center; margin: 0; font: 600 1.05rem/1.3 var(--page-font); color: var(--text); }
.step-title label { cursor: pointer; }
.step-body { grid-area: body; min-width: 0; padding: .7rem 0 2rem; }
.step:last-child .step-body { padding-bottom: 0; }

/* Step 2 waits, dimmed, until there's a link to share. */
#step-share[data-state=todo] .step-title { color: var(--muted); }
#step-share[data-state=todo] .step-body { opacity: .45; }
.step-body { transition: opacity .35s; }

/* ---------- Step 1: the address field ---------- */
.field {
	display: flex; align-items: center; gap: 10px;
	height: 56px; padding: 0 7px 0 15px;
	background: var(--field);
	border: 1px solid var(--field-bd); border-radius: 9px;
	box-shadow: inset 0 2px 5px #000a, 0 1px #ffffff14;
	transition: border-color .2s, box-shadow .2s;
	cursor: text;
}
.field:hover { border-color: #46608a; }
.field:focus-within { border-color: #4aa3ff; box-shadow: inset 0 2px 5px #000a, 0 0 0 3px #3d9bff40, 0 0 22px #3d9bff40; }
.field.is-ok { border-color: #2fae58; }
.field.is-ok:focus-within { box-shadow: inset 0 2px 5px #000a, 0 0 0 3px #2fc25a33, 0 0 22px #2fc25a33; }
.field.is-error { border-color: #e2725a; }
.field.is-error:focus-within { box-shadow: inset 0 2px 5px #000a, 0 0 0 3px #e2725a33, 0 0 22px #e2725a33; }
.field-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: #6f86a6; stroke-width: 1.9; stroke-linecap: round; }
.field:focus-within .field-icon { stroke: var(--sky); }
.doc .field input,
.doc .field input:hover,
.doc .field input:focus {
	flex: 1; width: auto; min-width: 0; height: 100%; min-height: 0; padding: 0;
	font: 17px var(--page-font); color: #fff;
	background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none;
}
.doc .field input::placeholder { color: #5d6f88; }

.doc .field-btn {
	all: unset; box-sizing: border-box; flex: none;
	display: inline-grid; place-items: center;
	height: 42px; min-width: 42px; padding: 0 16px; border-radius: 7px;
	font: 600 14px var(--page-font); color: #dbe9f8; cursor: pointer;
	background: linear-gradient(#ffffff2a, #ffffff0f 48%, #ffffff05 50%, #ffffff12);
	border: 1px solid #ffffff2e !important;
	box-shadow: inset 0 1px #ffffff2a;
	transition: background-color .15s !important;
}
.doc .field-btn::before, .doc .field-btn::after { content: none; }
.doc .field-btn:hover { background-color: #ffffff14; }
.doc .field-btn:active { background-color: #00000040; }
.doc .field-btn:focus { animation: none; }
.doc .field-btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.doc .field-btn[hidden] { display: none; }
.doc .field-clear { padding: 0; }
.field-clear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.doc .hint { margin: .55rem 0 0; min-height: 1.5em; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.doc .hint.is-ok { color: #86e3a4; }
.doc .hint.is-error { color: #ffa08c; }
.hint.is-ok::before { content: "✓ "; font-weight: 700; }

/* ---------- Step 2: the link and the two actions ---------- */
.result {
	position: relative; overflow: hidden;
	display: flex; align-items: center;
	height: 50px; padding: 0 15px;
	border-radius: 9px;
	background: linear-gradient(#10264a, #0b1a33);
	border: 1px solid #22477a;
	box-shadow: inset 0 1px #ffffff14;
}
.doc .result input,
.doc .result input:hover,
.doc .result input:focus {
	width: 100%; min-height: 0; height: 100%; padding: 0;
	font: 500 16px var(--page-font); color: #d8ecff;
	background: transparent; border: 0; box-shadow: none; outline: none;
	text-overflow: ellipsis;
}
.doc .result input::placeholder { color: #6a7f9e; }
.result:focus-within { border-color: #4aa3ff; }
/* The moment the link appears, a beam of light runs across it (same beam as the card page). */
.result::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: #e3f3ff; box-shadow: 0 0 8px 1px #7cc8ff, 0 0 34px 10px #2b7fff55;
	transform: scaleX(0); opacity: 0; pointer-events: none;
}
.result.flash::after { animation: beam .9s cubic-bezier(.16, 1, .3, 1); }
.result.flash { animation: lit 1.2s ease-out; }
@keyframes beam {
	0% { transform: scaleX(0); opacity: 1; }
	55% { transform: scaleX(1); opacity: 1; }
	100% { transform: scaleX(1); opacity: 0; }
}
@keyframes lit {
	0%, 30% { background-color: #1d4f8f; box-shadow: inset 0 1px #ffffff14, 0 0 26px #2b86ff70; }
}

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.doc .btn {
	all: unset; box-sizing: border-box; position: relative; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	height: 52px; padding: 0 18px; border-radius: 9px;
	font: 600 16px/1 var(--page-font); color: #fff; text-shadow: 0 1px 1px #0007;
	cursor: pointer; user-select: none; text-align: center;
	border: 1px solid var(--bd) !important;
	transition: filter .15s, box-shadow .2s, transform .08s !important;
	--mx: 50%; --my: 100%;
}
.doc .btn::before { /* Aero hover glow that follows the pointer, like the Windows 7 taskbar */
	content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
	background: radial-gradient(130px circle at var(--mx) var(--my), var(--glow), transparent 70%);
	border-radius: inherit; box-shadow: none;
	transition: opacity .2s;
}
.doc .btn::after { content: none; }
.doc .btn > * { position: relative; z-index: 1; }
.doc .btn:hover::before { opacity: 1; }
.doc .btn:active { transform: translateY(1px); filter: brightness(.9); }
.doc .btn:focus { animation: none; }
.doc .btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px #0006); }
.btn .i-x { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.btn .i-done { display: none; stroke-width: 3; }
.btn.is-done .i-copy { display: none; }
.btn.is-done .i-done { display: block; }

.doc .btn-blue {
	--bd: #0b3f87; --glow: #9fe9ffaa;
	background: linear-gradient(#ffffff70, #ffffff1c 49%, #0000 50%), linear-gradient(#3aa2ff, #1463d4);
	box-shadow: inset 0 1px #ffffffb0, inset 0 0 0 1px #ffffff26, 0 3px 10px #1a6fe055, 0 1px 2px #0008;
}
.doc .btn-blue.is-done {
	--bd: #126b2c; --glow: #d4ffb0aa;
	background: linear-gradient(#ffffff70, #ffffff1c 49%, #0000 50%), linear-gradient(#4fd16f, #1c9a3f);
	box-shadow: inset 0 1px #ffffffb0, inset 0 0 0 1px #ffffff26, 0 3px 12px #2fc25a55, 0 1px 2px #0008;
}
.doc .btn-x {
	--bd: #474d57; --glow: #ffffff40;
	background: linear-gradient(#ffffff38, #ffffff0d 49%, #0000 50%), #0b0d11;
	box-shadow: inset 0 1px #ffffff50, 0 3px 10px #0007;
}
.doc .btn-x, .doc .btn-x:hover, .doc .btn-x:focus { color: #fff; text-decoration: none; }
.doc .btn:disabled, .doc .btn[aria-disabled=true] { cursor: default; filter: saturate(.25) brightness(.75); box-shadow: none; }
.doc .btn:disabled::before, .doc .btn[aria-disabled=true]::before { display: none; }
.doc .btn:disabled:active, .doc .btn[aria-disabled=true]:active { transform: none; }

/* ---------- Step 3: the post, styled like X in dark mode ---------- */
.tweet {
	display: grid; grid-template-columns: 40px 1fr; gap: 12px;
	box-sizing: border-box; max-width: 600px; padding: 12px 16px; /* X's timeline column is 600px wide */
	background: var(--x-bg); color: var(--x-text);
	border: 1px solid var(--x-border); border-radius: 16px;
	font: 15px/20px var(--x-font);
	box-shadow: 0 18px 40px -16px #000, 0 0 0 1px #ffffff08;
}
.tweet-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #6ec1ff, #1d4fd8 60%, #0b1d3a); }
.tweet-main { min-width: 0; }
.tweet-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tweet-name { font-weight: 700; white-space: nowrap; }
.tweet-meta { color: var(--x-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tweet-more { width: 18px; height: 18px; margin-left: auto; fill: var(--x-muted); flex: none; }
.doc .tweet-text { margin: 2px 0 12px; }

/* The card is a <button>, and 7.css styles every button like Windows 7.
   Reset it once here, then pin the few things 7.css changes on hover/focus/press. */
.tweet .xcard {
	all: unset; box-sizing: border-box;
	display: flex; width: 100%; cursor: pointer;
	border: 1px solid var(--x-border) !important; /* 7.css recolors button borders on hover */
	border-radius: 16px; overflow: hidden;
	font: 15px/20px var(--x-font); color: var(--x-text);
	background: transparent;
	transition: background-color .2s !important;
}
.tweet .xcard::before, .tweet .xcard::after { content: none; }
.tweet .xcard:hover { background: #080808; }
.tweet .xcard:focus { box-shadow: none; animation: none; outline: none; }
.tweet .xcard:focus-visible { outline: 2px solid #1d9bf0; outline-offset: 2px; }
.xcard-media { position: relative; flex: none; width: 130px; aspect-ratio: 1; background: #16181c; border-right: 1px solid var(--x-border); }
.xcard-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xcard-play {
	position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; translate: -50% -50%;
	display: grid; place-items: center; border-radius: 50%;
	background: rgb(15 20 25 / .75); transition: background-color .2s, scale .2s;
}
.xcard-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.xcard:hover .xcard-play { background: rgb(29 155 240 / .9); scale: 1.06; }
.xcard-text { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 12px; }
.xcard-host, .xcard-desc { color: var(--x-muted); }
.xcard-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xcard-title, .xcard-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.xcard.is-loading .xcard-text { opacity: .55; }
.xcard.is-loading .xcard-media { background: linear-gradient(100deg, #16181c 30%, #23262c 50%, #16181c 70%) 0 0 / 300% 100%; animation: shimmer 1.2s linear infinite; }
.xcard.is-loading .xcard-media img { opacity: 0; }
.xcard.no-image .xcard-media img { visibility: hidden; }
@keyframes shimmer { to { background-position: -150% 0; } }

.xplayer { position: relative; border: 1px solid var(--x-border); border-radius: 16px; overflow: hidden; background: #000; }
.xplayer iframe { display: block; width: 100%; aspect-ratio: 1; border: 0; }
.doc .xplayer-close {
	all: unset; box-sizing: border-box; position: absolute; top: 8px; right: 8px;
	display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px;
	font: 600 13px var(--x-font); color: #fff; cursor: pointer;
	background: rgb(15 20 25 / .8); border: 1px solid #ffffff30 !important;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.doc .xplayer-close::before, .doc .xplayer-close::after { content: none; }
.doc .xplayer-close:hover { background: rgb(39 44 51 / .9); }
.doc .xplayer-close:focus { animation: none; }
.doc .xplayer-close:focus-visible { outline: 2px solid #1d9bf0; outline-offset: 2px; }
.xplayer-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

.tweet-actions { display: flex; align-items: center; gap: 4px; margin-top: 12px; color: var(--x-muted); font-size: 13px; }
.tweet-actions span { display: flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
.tweet-actions .tweet-actions-end { flex: none; gap: 14px; }
.tweet-actions svg { width: 18.75px; height: 18.75px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.doc #play-hint { margin-top: .75rem; }

/* "Blank box?" help, closed until asked for */
.help { margin-top: .4rem; font-size: 14px; }
.help summary {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .3rem 0; color: var(--link); cursor: pointer; list-style: none;
}
.help summary::-webkit-details-marker { display: none; }
.help summary::before {
	content: ""; width: 7px; height: 7px; margin-right: 2px;
	border: solid currentColor; border-width: 0 2px 2px 0; rotate: -45deg;
	transition: rotate .2s;
}
.help[open] summary::before { rotate: 45deg; }
.help summary:hover { text-decoration: underline; text-underline-offset: 2px; }
.help summary:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 3px; }
.doc .help p {
	margin: .4rem 0 0; padding: .75rem .9rem;
	background: var(--note-bg); border: 1px solid var(--note-bd); border-radius: 6px; color: var(--note-text);
}
.help code { color: #fff3c4; }

/* "Customize the preview": same disclosure style as the help, opening onto three small fields */
.custom { margin-top: .5rem; }
.custom summary .muted { margin-left: .2rem; font-size: 13px; color: var(--muted); }
.custom-fields {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem .8rem; align-items: center;
	margin-top: .45rem; padding: .9rem;
	background: var(--surface-2); border: 1px solid var(--rule); border-radius: 9px;
}
.custom-fields label { color: var(--muted); font-size: 14px; }
.doc .custom-fields input { min-height: 38px; border-radius: 6px; }
/* (more specific than ".doc .help p", which turns help text into a yellow note box) */
.doc .help .custom-hint {
	grid-column: 1 / -1; margin: .15rem 0 0; padding: 0;
	background: none; border: 0; font-size: 13px; line-height: 1.45; color: var(--muted);
}
.doc .help .custom-hint.is-error { color: #ffa08c; }

/* Windows 7 progress bar in the status bar while a preview loads */
.status-busy { display: flex; align-items: center; gap: 6px; }
.w7-progress {
	position: relative; overflow: hidden; display: inline-block;
	width: 72px; height: 10px; border: 1px solid #5f6670; border-radius: 2px;
	background: linear-gradient(#f2f2f2, #d6d6d6);
}
.w7-progress::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
	background: linear-gradient(#bdf5bd, #37d05a 45%, #14a335 50%, #59e07a);
	animation: marquee 1.3s linear infinite;
}
@keyframes marquee { to { left: 100%; } }

/* ---------- Notes (inner pages) ---------- */
.note, .error {
	background: var(--note-bg); border: 1px solid var(--note-bd); border-radius: 4px; color: var(--note-text);
	padding: .7rem .9rem; font-size: 14px; margin-top: 1.5rem;
}
.note code { color: #fff3c4; }

/* ---------- Footer on the desktop ---------- */
.site-footer {
	max-width: 46rem; margin: 1.25rem auto 0;
	display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
	font: 13px/1.5 var(--page-font); color: #c6d2e0;
	text-shadow: 0 1px 2px #000, 0 0 8px #0009;
}
.app ~ .site-footer { max-width: 724px; }
.site-footer a, .site-footer a:hover, .site-footer a:focus { color: #d8e2ee; text-decoration: underline; text-underline-offset: 2px; }
.site-footer .copyright { margin-left: auto; }

/* ---------- Forms on inner pages (advertise, admin) ---------- */
.doc form:not(.address-bar):not(.field) > label { display: block; margin: 1rem 0; }
.doc fieldset { margin: 1rem 0; border-color: var(--field-bd); }
.doc legend { color: var(--muted); }
.slot, .check { margin: .5rem 0; }
.slot label, .check label { font: 14px/1.45 var(--page-font); color: var(--text); }

/* ---------- Ad banners ---------- */
[data-ad-slot]:empty { display: none; }
.ad { position: relative; margin: 0 0 1.75rem; }
[data-ad-slot="2"] .ad { margin: 2rem 0 0; }
.ad a { display: block; aspect-ratio: 728 / 90; overflow: hidden; border: 1px solid var(--rule); border-radius: 3px; }
.ad img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-label {
	position: absolute; top: 4px; right: 4px; padding: 0 .4rem; font-size: 11px; line-height: 1.6;
	background: #000c; color: #ddd; border-radius: 2px;
}
.ad a.ad-empty {
	display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px;
	border: 1px dashed #3a4a62; color: var(--heading); text-decoration: none; text-align: center; line-height: 1.3;
}
.ad a.ad-empty:hover { background: #121c2c; border-color: #5b7a9c; }
.ad a.ad-empty span { font-size: 13px; color: var(--muted); }

/* ---------- Admin table ---------- */
.scroll { overflow-x: auto; }
.doc table { border-collapse: collapse; width: 100%; font-size: 13px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: .45rem; border: 1px solid var(--rule); }
.doc th { background: var(--surface-2); font-weight: 600; }
.doc td form { display: inline; }
.doc td button { min-height: 0; padding: .25rem .6rem; font-size: 12px; margin: 0 .25rem .25rem 0; }

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
	body { font-size: 14px; }
	.site-footer .copyright { margin-left: 0; width: 100%; }
	/* Steps go full width: the number sits beside the title, the rail goes away. */
	.steps > .step { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "dot title" "body body"; column-gap: 10px; }
	.step::before { display: none; }
	.step-dot { width: 26px; height: 26px; font-size: 13px; }
	.step-body { padding: .65rem 0 1.75rem; }
	.hero { margin-bottom: 1.6rem; }
	.field { height: 54px; padding-left: 12px; gap: 8px; }
	.doc .field input { font-size: 16px; } /* 16px stops iOS from zooming in */
	.custom-fields { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
	.custom-fields label:not(:first-child) { margin-top: .45rem; }
	.doc .custom-fields input { font-size: 16px; }
	.tweet { padding: 12px; gap: 10px; grid-template-columns: 36px 1fr; }
	.tweet-avatar { width: 36px; height: 36px; }
	.xcard-media { width: 104px; }
	.xcard-play { width: 46px; height: 46px; }
	.xcard-play svg { width: 22px; height: 22px; }
	.xcard-text { padding: 10px; }
}
@media (max-width: 350px) {
	.actions { grid-template-columns: 1fr; }
	.tweet-actions { font-size: 12px; }
	.tweet-actions .tweet-actions-end { gap: 8px; }
	.tweet-actions svg { width: 17px; height: 17px; }
	.field-icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	button { animation: none !important; } /* 7.css pulses the default button */
	.result.flash, .result.flash::after, .w7-progress::after, .xcard.is-loading .xcard-media { animation: none !important; }
	.doc .btn, .step-dot, .step::before, .step-body { transition: none !important; }
}