/* ============================================================================
   In-app help — the Help window and the vocabulary its content pages use.

   Loaded by all six spring-type pages. The window itself is built by
   js/shared/help.js (nothing in any page's markup), and the pages are plain
   HTML fragments under content/help/ that get dropped into #help-read.

   THE POINT OF THIS FILE: a content page never carries its own styling. It
   uses the small vocabulary below and nothing else, so 21 pages written by
   different people at different times still look like one manual. If a page
   needs something that isn't here, add it here rather than inline — then every
   page can use it.

   Vocabulary:
       <p> <b> <i> <code> <h3> <ul> <ol>
       <ol class="steps">              numbered procedure
       <div class="note">              "worth knowing" aside
       <div class="warn">              a real warning, sparingly
       <table class="hd">             reference table
       <dl class="defs">              term / definition pairs
       <figure class="fig">           screenshot with numbered callout pins
       <span class="kbd">             a key or on-screen control name
       <a data-go="page-id">          internal link to another help page
   ========================================================================= */

/* ------------------------------------------------------------------ window */
#help-shell {
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
	font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
}

#help-top {
	flex: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background-color: #fcfcfd;
}

#help-search-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #c8c8d0;
	border-radius: 3px;
	background-color: #fff;
	padding: 5px 8px;
	font-size: 12.5px;
	color: rgba(0, 0, 0, 0.54);
}
#help-search {
	border: 0;
	outline: 0;
	font: inherit;
	font-size: 12.5px;
	flex: 1;
	min-width: 0;
	color: rgba(0, 0, 0, 0.87);
	background-color: transparent;
}
#help-search-clear {
	cursor: pointer;
	padding: 0 2px;
	color: rgba(0, 0, 0, 0.4);
}
#help-search-clear:hover { color: rgba(0, 0, 0, 0.7); }

#help-crumbs {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	color: rgba(0, 0, 0, 0.54);
	min-height: 17px;
}
#help-crumbs .cur { color: rgba(0, 0, 0, 0.87); }

#help-main { flex: 1; min-height: 0; display: flex; }

/* ----------------------------------------------------------------- sidebar */
/* 196px wide. On a 1920 screen that leaves ~760px to read in; below about
   620px of window it is too expensive, so help.js collapses it to a Contents
   button and adds .help-narrow to the shell. */
#help-side {
	flex: none;
	width: 196px;
	border-right: 1px solid rgba(0, 0, 0, 0.12);
	overflow-y: auto;
	background-color: #fbfbfc;
	padding: 3px 0;
}
.help-narrow #help-side { display: none; }
.help-narrow.help-contents-open #help-side {
	display: block;
	width: 100%;
	border-right: 0;
}
.help-narrow.help-contents-open #help-read { display: none; }

#help-side .help-sect {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.54);
	padding: 10px 10px 4px;
}
#help-side .help-item {
	padding: 5px 9px 5px 15px;
	font-size: 12px;
	line-height: 1.35;
	cursor: pointer;
	border-left: 3px solid transparent;
	display: flex;
	gap: 5px;
	align-items: baseline;
}
#help-side .help-item:hover { background-color: whitesmoke; }
#help-side .help-item.cur {
	background-color: #d9dcf0;
	border-left-color: #3f51b5;
	color: #20295b;
	font-weight: 600;
}
/* A page that exists but doesn't apply to this spring type. Shown greyed rather
   than hidden, so the reader can see the feature exists and simply isn't here. */
#help-side .help-item.na {
	color: rgba(0, 0, 0, 0.3);
	cursor: default;
}
#help-side .help-item.na:hover { background-color: transparent; }

/* -------------------------------------------------------------- reading pane */
#help-read {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
	padding: 15px 18px 24px;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(0, 0, 0, 0.87);
}
/* Long-form text does not want to be 900px wide even when the window is. */
#help-read > .help-page { max-width: 68em; }

.help-page h2 {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	border: 0;
	padding: 0;
	text-wrap: balance;
}
.help-page .help-lede {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.54);
}
.help-page h3 {
	margin: 20px 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #3f51b5;
	border: 0;
	padding: 0;
}
.help-page p { margin: 0 0 10px; }
.help-page a { color: #1565c0; text-decoration: none; cursor: pointer; }
.help-page a:hover { text-decoration: underline; }
.help-page code {
	font-family: Consolas, ui-monospace, monospace;
	font-size: 12px;
	background-color: #f2f2f6;
	padding: 1px 4px;
	border-radius: 3px;
}
.help-page ul, .help-page ol { margin: 0 0 10px; padding-left: 20px; }
.help-page li { margin-bottom: 5px; }

/* ---- numbered procedure -------------------------------------------------- */
/* Numbers are drawn, not list markers, so they line up with the callout pins
   on the screenshot above. Keep the numbering in step with the pins. */
.help-page ol.steps {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	counter-reset: helpstep;
}
.help-page ol.steps > li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 9px;
	counter-increment: helpstep;
}
.help-page ol.steps > li::before {
	content: counter(helpstep);
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #3f51b5;
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* ---- callout key --------------------------------------------------------- */
/* Expands on the numbered pins of the figure above, for when there is more to say
   than will sit in a caption.

   Deliberately NOT ol.steps. A step is an instruction and its number is an order
   of operations; a callout entry is a label and its number points INTO the picture.
   Separating them is what makes it safe for these circles to carry the pin's red -
   red numbers on a procedure would imply a figure that is not there - and it lets
   check-help.py check a key has as many entries as the figure has pins.

   Grey rather than italic: this is annotation rather than body text, and grey says
   so without the fatigue of reading several italic lines. It is the same secondary
   tone a dd already uses. */
.help-page ol.callouts {
	margin: -2px 0 14px;
	padding: 0 0 0 10px;      /* set in from the figure's edge, so it reads as belonging to it */
	list-style: none;
	counter-reset: helpcallout;
}
.help-page ol.callouts > li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 7px;
	counter-increment: helpcallout;
	color: rgba(0, 0, 0, 0.7);
}
.help-page ol.callouts > li::before {
	content: counter(helpcallout);
	position: absolute;
	left: 0;
	top: 1px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background-color: #d0342c;   /* exactly .pin's red - the point of the whole block */
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}

/* ---- asides -------------------------------------------------------------- */
.help-page .note,
.help-page .warn {
	margin: 16px 0;
	padding: 9px 12px;
	border-radius: 0 3px 3px 0;
}
.help-page .note {
	border-left: 3px solid #1565c0;
	background-color: #f4f8fd;
}
/* For something that loses work or leaves the account. Not for emphasis — a
   page with three warnings has none. */
.help-page .warn {
	border-left: 3px solid #c62828;
	background-color: #fdf4f4;
}
.help-page .note .h,
.help-page .warn .h {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.help-page .note .h { color: #1565c0; }
.help-page .warn .h { color: #c62828; }
.help-page .note p:last-child,
.help-page .warn p:last-child { margin-bottom: 0; }

/* ---- reference table ----------------------------------------------------- */
.help-page .table-wrap { overflow-x: auto; margin: 0 0 12px; }
.help-page table.hd {
	border-collapse: collapse;
	font-size: 12.5px;
	width: 100%;
}
.help-page table.hd th,
.help-page table.hd td {
	text-align: left;
	vertical-align: top;
	padding: 5px 10px 5px 0;
	border-bottom: 1px solid #ececf2;
}
.help-page table.hd th {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.54);
	white-space: nowrap;
}
.help-page table.hd td:first-child { font-weight: 600; white-space: nowrap; }
.help-page table.hd td.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	padding-right: 0;
}

/* ---- term / definition --------------------------------------------------- */
/* Term and definition side by side rather than stacked. Stacking reads fine for a
   prose definition but is wasteful for nomenclature, where the term is one symbol -
   R, G, d, D, n took two rows each, which looked especially poor in the narrow
   right-hand column of an .eqside.

   fit-content(35%) sizes the term column to the longest term - roughly 1ch for a
   symbol list, wider for "Shared libraries" - while never letting a long term crowd
   out the definition when the pane is narrow. */
.help-page dl.defs {
	display: grid;
	grid-template-columns: fit-content(35%) 1fr;
	column-gap: 14px;
	row-gap: 6px;
	margin: 0 0 12px;
}
.help-page dl.defs dt {
	font-weight: 600;
	margin: 0;
}
.help-page dl.defs dd {
	margin: 0;
	color: rgba(0, 0, 0, 0.7);
}

/* ---- a key or on-screen control ------------------------------------------ */
.help-page .kbd {
	font-family: Consolas, ui-monospace, monospace;
	font-size: 11.5px;
	border: 1px solid #c8c8d0;
	border-bottom-width: 2px;
	border-radius: 3px;
	background-color: #fbfbfd;
	padding: 0 5px;
	white-space: nowrap;
}

/* ---- figures ------------------------------------------------------------- */
/* The image is a plain <img>; the numbered callouts are HTML pins positioned in
   per-cent over it. Three reasons that matters: re-taking a screenshot costs
   nothing (no re-annotating in an image editor), the numbers stay crisp at any
   width, and they are real text — so they translate and read aloud. */
/* The figure SHRINKS TO ITS IMAGE rather than filling the column. Two reasons,
   and the second is a correctness one:

   1. A small screenshot should not be blown up. This was `width: 100%`, which
      stretched a 300px crop across a 760px column and made it soft (Richard,
      2026-08-28).
   2. The callout pins are positioned in PER CENT of .fig-img. If that box were
      wider than the image inside it, every pin would land short of where it was
      placed. Hugging the image keeps the percentages meaning what the author
      measured.

   It also aligns the caption to the image instead of to the column, which is what
   you want for anything narrower than full width.

   To scale an image DOWN deliberately — a 2x capture, or a big screenshot you want
   smaller — put a `width` attribute on the <img> in CSS pixels:
       <img src="..." width="380" alt="...">
   max-width below still keeps it inside the column on a narrow window. */
.help-page figure.fig {
	margin: 15px 0;
	width: fit-content;
	max-width: 100%;
}
.help-page .fig-img {
	position: relative;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 3px;
	overflow: hidden;
	background-color: #fff;
	line-height: 0;
	max-width: 100%;
}
.help-page .fig-img img { display: block; max-width: 100%; height: auto; }
.help-page .pin {
	position: absolute;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background-color: #d0342c;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
	line-height: 19px;
	text-align: center;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
}
.help-page figure.fig figcaption {
	font-size: 11.5px;
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.54);
	padding: 6px 2px 0;
}

/* Two figures side by side, a caption under each - a comparison (before/after,
   desktop/web) where stacking would separate the things being compared. Each child
   is an ORDINARY figure: pins, captions and the missing-image placeholder all work
   unchanged, and each still hugs its own image, which is what keeps the per-cent
   pins honest (see above). min-width: 0 lets two wide images share the row - flex
   shrinks the figures together and the img's max-width: 100% scales each picture
   down inside its own box. Deliberately NO wrap: the block exists to keep the two
   in one glance, so cap the images with width attributes rather than letting a
   narrow window quietly stack them. */
.help-page .figpair {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 15px 0;
}
.help-page .figpair figure.fig {
	margin: 0;
	min-width: 0;
}

/* Screenshot not taken yet. help.js swaps a failed <img> for this, so the page
   states which file it is waiting for instead of showing a broken-image icon —
   and the caption and pins still render, so the page reads. */
.help-page .fig-missing {
	border: 1px dashed #c3c3ce;
	border-radius: 3px;
	background: repeating-linear-gradient(135deg, #fafafc 0 8px, #f2f2f6 8px 16px);
	padding: 22px 14px;
	text-align: center;
	line-height: 1.5;
	/* The figure hugs its content, and a placeholder is only a couple of lines of
	   text — without this it would shrink to a caption-width sliver instead of
	   reading as the slot where a picture is going. */
	min-width: min(420px, 100%);
}
.help-page .fig-missing .h {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a5a00;
	margin-bottom: 4px;
}
.help-page .fig-missing .p {
	font-family: Consolas, ui-monospace, monospace;
	font-size: 11.5px;
	color: rgba(0, 0, 0, 0.6);
	word-break: break-all;
}
/* Pins would land on nothing, so they are hidden while the image is missing. */
.help-page .fig-img.missing .pin { display: none; }

/* ---- the video, above the text ------------------------------------------- */
/* Compact strip by default. An open 16:9 player is 214px tall in a 440px window
   and 434px in a 996px one — either way it is most of the first screen, and a
   reader who prefers text should not have to scroll past it on every page. */
.help-page .help-video {
	margin: 0 0 16px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	background-color: #fbfbfd;
	overflow: hidden;
}
.help-page .help-video-bar {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 8px 10px;
	cursor: pointer;
}
.help-page .help-video-bar:hover { background-color: whitesmoke; }
.help-page .help-video-thumb {
	flex: none;
	width: 76px;
	height: 43px;
	border-radius: 3px;
	position: relative;
	background: linear-gradient(150deg, #2b3585, #3f51b5 55%, #5c6bc0);
}
.help-page .help-video-thumb::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-45%, -50%);
	width: 0;
	height: 0;
	border-left: 11px solid rgba(255, 255, 255, 0.94);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}
.help-page .help-video-thumb .dur {
	position: absolute;
	right: 3px;
	bottom: 3px;
	background-color: rgba(0, 0, 0, 0.62);
	color: #fff;
	font-size: 9px;
	padding: 0 3px;
	border-radius: 2px;
	font-variant-numeric: tabular-nums;
}
.help-page .help-video-tx { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; }
.help-page .help-video-tx b { display: block; font-weight: 600; }
.help-page .help-video-tx span { color: rgba(0, 0, 0, 0.54); font-size: 11px; }
.help-page .help-video-chev { flex: none; color: rgba(0, 0, 0, 0.54); font-size: 11px; }
.help-page .help-video-player {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	aspect-ratio: 16 / 9;
	width: 100%;
	background-color: #000;
}
.help-page .help-video-player iframe,
.help-page .help-video-player video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
/* A self-hosted clip not exported yet. Same treatment as a missing screenshot:
   a labelled placeholder naming the file reads as a to-do, a broken player
   reads as a bug. */
.help-page .help-video-missing {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: repeating-linear-gradient(135deg, #fafafc 0 8px, #f2f2f6 8px 16px);
	text-align: center;
	padding: 14px;
}
.help-page .help-video-missing .h {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a5a00;
}
.help-page .help-video-missing .p {
	font-family: Consolas, ui-monospace, monospace;
	font-size: 11.5px;
	color: rgba(0, 0, 0, 0.6);
	word-break: break-all;
}
/* Points at a clip in the existing IST library (Tutorials & Learning) covering
   the theory rather than the software — a different question, so it sits under
   the walkthrough rather than replacing it. */
.help-page .help-video-alt {
	font-size: 11px;
	color: rgba(0, 0, 0, 0.54);
	padding: 6px 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	background-color: #fff;
}
/* A page can point at a background clip WITHOUT having a walkthrough of its own,
   in which case this line is the whole box and has nothing to be divided from. */
.help-page .help-video-alt:first-child { border-top: 0; }

/* Not recorded yet. Same slot, so the page does not reflow when it arrives. */
.help-page .help-video.pending .help-video-bar { cursor: default; }
.help-page .help-video.pending .help-video-thumb {
	background: repeating-linear-gradient(135deg, #e8e8ee 0 6px, #dedee6 6px 12px);
}
.help-page .help-video.pending .help-video-thumb::after { border-left-color: rgba(0, 0, 0, 0.2); }
.help-page .help-video.pending .help-video-tx b { color: rgba(0, 0, 0, 0.45); font-weight: 500; }

/* ---- equations ----------------------------------------------------------- */
/* Native MathML - no library. Written in LaTeX in the help editor, which stores
   the result as <math> (and the LaTeX on it as data-tex, for re-editing). Every
   current browser renders MathML Core; it prints and reads aloud. A displayed
   equation gets breathing room; an inline one just sits in the sentence. */
.help-page math { font-size: 1.05em; }
.help-page math[display="block"] {
	display: block;
	/* Centred, because that is what a displayed equation should look like - and
	   because the editor shows it centred the moment you type it (temml sets an
	   inline display:block math, which the serializer then strips on save). Doing
	   it with the BOX - fit-content plus auto side margins - rather than relying on
	   math layout keeps the two views identical in every browser. max-width holds
	   the overflow-x behaviour for an equation wider than the column. */
	width: fit-content;
	max-width: 100%;
	margin: 14px auto;
	overflow-x: auto;
}

/* An equation with its nomenclature BESIDE it instead of under it, so an
   equation-heavy page does not run to twice the length. The definitions reuse
   dl.defs, so they look like every other definition list and the editor's
   existing "Add term" button works on them unchanged.

   No breakpoint: flex-wrap plus a flex-basis on each column means the two sit
   side by side while there is room for them and drop to stacked when there is
   not. That responds to the width of the READING PANE, which is what matters -
   a viewport media query would be wrong here, because the help window is sized
   by help.js and is usually far narrower than the browser. Stacked, each column
   grows to the full width, so the narrow form reads as an ordinary equation
   followed by its key. */
.help-page .eqside {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
	margin: 14px 0;
}
.help-page .eqside > .eq {
	flex: 2 1 280px;
	min-width: 0;          /* lets a wide equation scroll rather than widen the row */
}
.help-page .eqside > dl.defs {
	flex: 1 1 220px;
	margin: 0;
}
/* In an equation key the terms ARE the variables, so they should look like the
   variables in the equation: italic, and regular weight, because MathML renders
   <mi> italic and unbolded. Deliberately scoped to .eqside - a plain definition
   list holds prose terms ("Crossover loop", "The Goodman line") which would read
   oddly in italic. */
.help-page .eqside dl.defs dt {
	font-style: italic;
	font-weight: 400;
}

/* The equation already has vertical margin from the row. */
.help-page .eqside > .eq math[display="block"] {
	margin: 0 auto;
}

/* ---- See also ------------------------------------------------------------ */
.help-page .seealso {
	margin-top: 22px;
	padding-top: 12px;
	border-top: 1px solid #ececf2;
}
.help-page .seealso .h {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.54);
	margin-bottom: 7px;
}
.help-page .seealso a { display: block; font-size: 12.5px; padding: 3px 0; }

/* ---- draft marker -------------------------------------------------------- */
/* Every page starts as a draft. help.js adds this from the manifest's
   draft: true flag, and it is what tells a reader (and us) that the words have
   not been signed off. Delete the flag as each page is reviewed. */
.help-page .draft {
	display: flex;
	gap: 8px;
	align-items: baseline;
	margin: 0 0 14px;
	padding: 6px 10px;
	border: 1px solid #f0dcb4;
	background-color: #fff8ea;
	border-radius: 3px;
	font-size: 11.5px;
	color: #8a5a00;
}
.help-page .draft b {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ----------------------------------------------------------------- pager */
#help-foot {
	flex: none;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	background-color: #fcfcfd;
	display: flex;
	font-size: 12px;
}
#help-foot button {
	appearance: none;
	background-color: transparent;
	border: 0;
	font: inherit;
	font-size: 12px;
	color: #1565c0;
	cursor: pointer;
	padding: 8px 11px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
#help-foot button:hover:not(:disabled) { background-color: whitesmoke; }
#help-foot button:disabled { color: rgba(0, 0, 0, 0.26); cursor: default; }
#help-foot button .k {
	font-size: 9.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.54);
}
#help-foot button .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#help-foot .next { margin-left: auto; text-align: right; align-items: flex-end; }
#help-foot .count {
	display: grid;
	place-items: center;
	padding: 0 10px;
	font-size: 11px;
	color: rgba(0, 0, 0, 0.54);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	border-left: 1px solid rgba(0, 0, 0, 0.12);
	border-right: 1px solid rgba(0, 0, 0, 0.12);
}

/* Contents button, only in the narrow layout. */
#help-contents-btn { display: none; }
.help-narrow #help-contents-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #c8c8d0;
	border-radius: 3px;
	background-color: #fff;
	padding: 5px 9px;
	font-size: 12px;
	cursor: pointer;
	color: rgba(0, 0, 0, 0.87);
}
#help-contents-btn:hover { background-color: whitesmoke; }

/* ------------------------------------------------------------------ states */
.help-msg {
	padding: 18px;
	font-size: 12.5px;
	color: rgba(0, 0, 0, 0.54);
	line-height: 1.5;
}
.help-msg b { color: rgba(0, 0, 0, 0.87); }