/* The three problems, each told before and with OTTO: native drawings, no screenshots, each one
   something to try. */

/* A story: OTTO's line before, the drawing, OTTO's line with. Both lines keep their place in the layout,
   and both states of each part share one grid cell, so turning from one state to the other never moves
   the page. The inactive state is transparent and ignores the pointer, but stays readable to assistive
   technology, so the whole story is told in order. */
.story { display: grid; gap: .75rem; min-width: 0; }
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; min-width: 0; }
.story[data-state="before"] [data-only="with"],
.story[data-state="with"] [data-only="before"] { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .story [data-only] { transition: opacity .45s var(--ease) .1s; }
  .story[data-state="before"] [data-only="with"],
  .story[data-state="with"] [data-only="before"] { transition: opacity .25s var(--ease); }
}
/* With the script there is one OTTO for the whole section (stories.js): the story bubbles become its places,
   invisible but keeping their size and readable to assistive technology. Without the script each story
   shows its with line. */
.story .story-say { transition: none; }
.rifts { position: relative; }
.rifts.has-otto .story .story-say { opacity: 0; }
/* The places hold still: a place sliding in, as the page's other guides do, would be measured mid-slide. */
.rifts.has-otto .story .story-say .guide-mark, .rifts.has-otto .story .story-say .guide-say { animation: none; }
/* The one OTTO: the logo travels, its words hang off the side its place puts them on. It can be picked up
   by the logo or the words and carried about; let go, it goes back to its place. Its own box takes no
   pointer, so the page under it stays usable. */
.otto-say { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.otto-say .guide-mark, .otto-say .guide-say { pointer-events: auto; touch-action: none; cursor: grab; }
.otto-say.is-dragging .guide-mark, .otto-say.is-dragging .guide-say { cursor: grabbing; }
.otto-say .guide-say { position: absolute; bottom: calc(.35rem * var(--k)); left: calc(100% + .6rem * var(--k)); margin: 0; }
.otto-say[data-align="end"] .guide-say { left: auto; right: calc(100% + .6rem * var(--k)); }
/* In flight the words are put away; they come back where OTTO lands. */
.otto-say.is-moving .guide-say { display: none; }
/* Before the first scroll OTTO waits off the right of the screen (--away, from stories.js). Its logo slides in
   and bounces into place, and its words open as it gets there. Back at the top of
   the page it leaves the way it came, without the bounce. Only this first arrival slides in. */
.otto-say.is-away .guide-mark { opacity: 0; transform: translateX(var(--away, 8rem)); pointer-events: none; }
.otto-say.is-quiet .guide-say { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .otto-say:not(.is-still) .guide-mark { transition: transform 1s cubic-bezier(.34, 1.56, .64, 1), opacity .2s linear; }
  @supports (transition-timing-function: linear(0, 1)) {
    .otto-say:not(.is-still) .guide-mark { transition-timing-function: linear(0, .36 12%, .86 26%, 1.12 38%, 1.17 44%, 1.12 52%, .99 64%, .965 71%, .99 80%, 1.008 88%, 1), linear; }
  }
  .otto-say.is-away:not(.is-still) .guide-mark { transition: transform .5s cubic-bezier(.5, 0, .9, .5), opacity .2s linear .3s; }
  .otto-say:not(.is-still, .is-dragging) { transition: transform .45s cubic-bezier(0.33, 1, 0.68, 1); }
  /* The words are there almost as OTTO lands. */
  .otto-say .guide-say { animation: otto-says .06s linear; }
}
@keyframes otto-says { from { opacity: 0; } }
/* Each bubble is as wide as its words and set to one side of the drawing or its middle, so the move from
   one place to the other reads as a slide: the map's goes left to right, the room's right to left, the
   review's from the right to the middle. At an edge OTTO sits on that side of its words; in the middle,
   on the left. */
.story-say { position: relative; z-index: 1; justify-self: start; max-width: none; align-items: flex-end; }
.story-say .guide-say { max-width: 36rem; }
.story-say[data-align="center"] { justify-self: center; }
/* Narrower in the middle, so it reads as the middle and not as a near edge. */
.story-say[data-align="center"] .guide-say { max-width: 26rem; }
.story-say[data-align="end"] { justify-self: end; flex-direction: row-reverse; }
/* OTTO here is the size of the homepage hero's floating guide: twice the other guides (--k), half as much
   again on a phone. The places and the one OTTO share every measure, so OTTO lands exactly on its place. */
.story-say, .otto-say { --k: 2; }
.story-say { gap: calc(.6rem * var(--k)); }
.story-say .guide-mark, .otto-say .guide-mark { width: calc(3.25rem * var(--k)); height: calc(3.25rem * var(--k)); }
.story-say .guide-mark .logo, .otto-say .guide-mark .logo { width: calc(2.15rem * var(--k)); }
.story-say .guide-say, .otto-say .guide-say { padding: calc(.65rem * var(--k)) calc(.9rem * var(--k)); border-radius: calc(var(--r-bubble) * var(--k)); border-bottom-left-radius: calc(4px * var(--k)); font-size: 1.25rem; line-height: 1.4; }
.story-say .guide-say { margin-bottom: calc(.35rem * var(--k)); }
.story-say .guide-say::before, .otto-say .guide-say::before { left: calc(-.28rem * var(--k)); bottom: calc(.55rem * var(--k)); width: calc(.7rem * var(--k)); height: calc(.7rem * var(--k)); }
.story-say[data-align="end"] .guide-say, .otto-say[data-align="end"] .guide-say { border-bottom-left-radius: calc(var(--r-bubble) * var(--k)); border-bottom-right-radius: calc(4px * var(--k)); }
.story-say[data-align="end"] .guide-say::before, .otto-say[data-align="end"] .guide-say::before { left: auto; right: calc(-.28rem * var(--k)); }
@media (max-width: 39.99rem) {
  .story-say, .otto-say { --k: 1.5; }
  .story-say .guide-mark, .otto-say .guide-mark { width: calc(2.75rem * var(--k)); height: calc(2.75rem * var(--k)); }
  .story-say .guide-mark .logo, .otto-say .guide-mark .logo { width: calc(1.8rem * var(--k)); }
}

.offer { padding: clamp(1rem, 3vw, 1.75rem); border-radius: var(--r); background: var(--surface); color: var(--ink); }
.offer button:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
/* What can be pressed says so itself: a ring beckons from every choice not yet taken, until the first
   press in that drawing (stories.js adds is-used). With motion reduced the ring holds still. */
.beckon { position: absolute; inset: -4px; border: 2px solid var(--amber); border-radius: inherit; opacity: 0; pointer-events: none; }
.story[data-state="with"] .offer:not(.is-used) [aria-pressed="false"] .beckon { opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  .story[data-state="with"] .offer:not(.is-used) [aria-pressed="false"] .beckon { animation: beckon 2.4s ease-out infinite; animation-delay: calc(var(--i, 0) * .3s); }
}
@keyframes beckon { 0% { opacity: .9; transform: scale(.94); } 60%, 100% { opacity: 0; transform: scale(1.1, 1.3); } }
.graph-head { font: 500 .8rem/1.3 var(--sans); color: var(--muted); text-align: center; }

/* Knowledge map, with OTTO: sources, concepts and training units, the chosen unit's support lit. */
.offer-graph { --head: 1.75rem; position: relative; height: clamp(17rem, 27vw, 21rem); }
.offer-graph .graph-head { position: absolute; top: 0; left: var(--x); width: 27%; transform: translateX(-50%); }
.graph-links { position: absolute; left: 0; top: var(--head); width: 100%; height: calc(100% - var(--head)); fill: none; stroke: var(--line); stroke-width: 2; }
.graph-links path { vector-effect: non-scaling-stroke; }
.graph-links .is-lit { stroke: var(--amber); stroke-width: 3; }
.graph-node { position: absolute; top: calc(var(--head) + (100% - var(--head)) * var(--y)); display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 3.25rem; padding: .55rem .45rem; border: 0; border-radius: var(--r); background: var(--bg); color: var(--muted); text-align: center; font: 500 clamp(.75rem, 1vw, .875rem)/1.3 var(--sans); transform: translate(-50%, -50%); }
.graph-source { left: 15%; width: 27%; }
.graph-concept { left: 50%; width: 26%; }
.graph-unit { left: 85%; width: 27%; color: var(--ink); }
.graph-node { cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.graph-node.is-lit { color: var(--ink); box-shadow: inset 0 0 0 1px var(--amber); }
.graph-concept.is-lit { background: var(--amber-tint); }
/* A lit source or concept also carries a dot, so the link never rests on colour alone. */
.graph-source.is-lit::before, .graph-concept.is-lit::before { content: ''; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--amber); }
.graph-node[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); }
.graph-node[aria-pressed="true"]::before { background: var(--on-amber); }
.graph-node:hover:not([aria-pressed="true"]) { background: var(--border); }

/* Knowledge map, before: two brains that never meet. What is written down on one side, what your
   engineers carry in their heads on the other, and a broken line between them. */
.map-loose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); gap: 1rem; height: clamp(17rem, 27vw, 21rem); }
.loose-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.loose-head { display: grid; gap: .15rem; text-align: center; font: 600 1rem/1.3 var(--sans); color: var(--ink); }
.loose-kicker { font-size: .8rem; font-weight: 500; color: var(--muted); }
.loose-docs, .loose-mind { display: grid; justify-items: center; gap: .7rem; width: 100%; margin-block: auto; padding: 0; list-style: none; }
.loose-doc { display: flex; align-items: center; gap: .7rem; width: min(100%, 11rem); padding: .8rem .9rem; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 500 1rem/1.3 var(--sans); }
.loose-doc:nth-child(1) { transform: translateX(-4%) rotate(-3deg); }
.loose-doc:nth-child(2) { transform: translateX(5%) rotate(2.5deg); }
/* A sheet of paper: an outline with three ruled lines. */
.loose-sheet { flex: none; width: 1.35rem; height: 1.7rem; border: 1.5px solid var(--muted); border-radius: 2px; background: linear-gradient(var(--muted), var(--muted)) 50% 30% / 60% 1.5px no-repeat, linear-gradient(var(--muted), var(--muted)) 50% 50% / 60% 1.5px no-repeat, linear-gradient(var(--muted), var(--muted)) 30% 70% / 40% 1.5px no-repeat; }
.loose-gap { display: grid; align-content: center; justify-items: center; gap: .7rem; min-width: 0; }
.loose-break { display: flex; align-items: center; gap: .5rem; width: 100%; }
.loose-break span { flex: 1; border-top: 2px dashed var(--line); }
.loose-break svg { flex: none; width: 2rem; height: 2rem; fill: none; stroke: var(--muted); stroke-width: 1.75; stroke-linecap: round; }
.loose-gap p { color: var(--ink); text-align: center; font: 500 .95rem/1.3 var(--sans); text-wrap: balance; }
.loose-person { width: 2.4rem; height: auto; fill: var(--teal); }
.loose-bits { display: grid; justify-items: center; gap: .5rem; margin: 0; padding: 0; max-width: 100%; list-style: none; }
.loose-bits li { max-width: 100%; padding: .45rem .75rem; border-radius: 999px; background: var(--teal-tint); color: var(--ink); text-align: center; font: 500 .9rem/1.3 var(--sans); }
.loose-bits li:nth-child(1) { transform: translateX(-8%) rotate(-2.5deg); }
.loose-bits li:nth-child(2) { transform: translateX(8%) rotate(2deg); }
.loose-bits li:nth-child(3) { transform: translateX(-3%) rotate(-1.5deg); }

/* 3D room: one drawing. Before, your engineer walks colleagues through it; with OTTO, labelled points. */
.offer-spatial { position: relative; width: min(100%, 38rem); aspect-ratio: 640 / 350; margin: .75rem auto 0; }
.room-diagram { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.room-floor { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
.room-wall { fill: #20232a; stroke: var(--line); stroke-width: 1.5; }
.room-wall-back { fill: #171a20; stroke: var(--line); stroke-width: 1.5; }
.room-seams { fill: none; stroke: var(--line); stroke-width: 1; opacity: .5; }
.room-equipment { fill: #242933; stroke: #7c8593; stroke-width: 1.5; stroke-linejoin: round; }
.room-monitor { fill: var(--bg); }
.room-signal { fill: none; stroke: var(--muted); stroke-width: 2; }
.story[data-state="with"] .offer-spatial[data-selected="1"] [data-equipment="1"],
.story[data-state="with"] .offer-spatial[data-selected="2"] [data-equipment="2"],
.story[data-state="with"] .offer-spatial[data-selected="3"] [data-equipment="3"] { stroke: var(--amber); }
.room-engineer { fill: var(--teal); }
.room-learner { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }
/* With OTTO each new colleague is at a point of their own; the chosen point's is lit with its equipment. */
.story[data-state="with"] .offer-spatial[data-selected="1"] [data-learner="1"],
.story[data-state="with"] .offer-spatial[data-selected="2"] [data-learner="2"],
.story[data-state="with"] .offer-spatial[data-selected="3"] [data-learner="3"] { fill: var(--amber); stroke: var(--amber); }
.offer-spatial .room-labels, .room-points, .room-tags { position: absolute; inset: 0; display: block; pointer-events: none; }
.story[data-state="with"] .room-point { pointer-events: auto; }
.room-point, .room-tag { position: absolute; display: flex; align-items: center; gap: .5rem; max-width: 46%; min-height: 2.75rem; padding: .45rem .65rem; background: var(--surface); color: var(--ink); text-align: left; font: 500 .8rem/1.25 var(--sans); }
.room-point { border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.room-point:hover { background: var(--border); }
.room-point-dot { position: relative; }
.room-point-dot .beckon { inset: -5px; border-radius: 50%; }
.room-point-1 { left: 0; top: 24%; }
.room-point-2 { left: 47%; top: 6%; }
.room-point-3 { right: 0; bottom: 4%; }
.room-point-dot, .room-tag-mark { flex: none; width: .6rem; height: .6rem; border: 1.5px solid currentColor; border-radius: 50%; }
.room-point[aria-pressed="true"] { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.room-point[aria-pressed="true"] .room-point-dot { background: currentColor; }
.room-tag { min-height: 0; padding: .3rem .5rem; }
.room-tag-engineer { left: 25%; bottom: 0; color: var(--teal); }
.room-tag-engineer .room-tag-mark { background: currentColor; }
.room-tag-queue { right: 0; bottom: 0; max-width: 36%; }

/* What your expert knows, kept: the expert is on shift, off shift or retired, and a crew asks a question.
   Before, the answer is only there while the expert is; with OTTO it stays. */
.keep-picks { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.keep-picks-label { margin-right: .25rem; font: 500 .8rem/1.3 var(--sans); color: var(--muted); }
.keep-pick { position: relative; min-height: 2.75rem; padding: .55rem .9rem; border: 0; border-radius: var(--r); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 500 .85rem/1.2 var(--sans); cursor: pointer; }
.keep-pick:hover:not([aria-pressed="true"]) { background: var(--border); }
.keep-pick[aria-pressed="true"] { background: var(--teal-tint); box-shadow: inset 0 0 0 1px var(--teal); color: var(--teal); }
.keep-workspace { display: grid; gap: .75rem; margin-top: 1.25rem; }
/* The drawing: your expert on the left, the crews who need the answer on the right. Before, every crew
   asks the expert, and the lines are cut when the expert is away. With OTTO the expert approves the
   training once, and it reaches every crew whoever is in. Lines and places share one 640 by 200 frame. */
.keep-flow { position: relative; height: 12.5rem; background: var(--bg); }
.keep-links { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 2; }
.keep-links path { vector-effect: non-scaling-stroke; }
.keep-link-ask { stroke: var(--muted); stroke-dasharray: 5 6; }
.offer-keep[data-answered="false"] .keep-link-ask { stroke: var(--line); }
.keep-link-ok { stroke: var(--teal); }
.keep-link-out { stroke: var(--amber); }
.keep-expert { position: absolute; left: 0; top: 50%; width: 28%; display: grid; justify-items: center; gap: .25rem; padding-inline: .4rem; text-align: center; transform: translateY(-50%); }
.keep-person { width: 2.4rem; height: auto; margin-bottom: .3rem; overflow: visible; fill: var(--teal); stroke: var(--teal); stroke-width: 1.5; }
.offer-keep[data-keep="off"] .keep-person { fill: var(--teal-tint); }
.offer-keep[data-keep="retired"] .keep-person { fill: none; stroke: var(--muted); stroke-dasharray: 3 3; }
.keep-name { font-size: var(--fs-small); font-weight: 600; }
.keep-line { font-size: .8rem; line-height: 1.35; color: var(--muted); }
.keep-cut, .keep-tick { position: absolute; top: 50%; display: grid; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bg); transform: translate(-50%, -50%); }
.keep-cut svg, .keep-tick svg { width: 100%; height: 100%; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.keep-cut { left: 36%; }
.keep-cut svg { stroke: var(--muted); }
.offer-keep[data-answered="true"] .keep-cut { display: none; }
.keep-tick { left: 34.5%; }
.keep-tick svg { stroke: var(--teal); stroke-width: 1.6; }
.keep-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.keep-ring { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--amber) 40%, transparent); }
.keep-ring .logo { width: 2.5rem; height: auto; fill: var(--amber); }
.keep-hub p { position: absolute; top: calc(100% + .4rem); left: 50%; width: max-content; max-width: 9rem; color: var(--ink); text-align: center; font: 500 .8rem/1.3 var(--sans); transform: translateX(-50%); }
.keep-crews { position: absolute; inset: 0 0 0 auto; width: 28%; margin: 0; padding: 0; list-style: none; }
.keep-crews li { position: absolute; left: 0; right: 0; top: var(--y); display: flex; align-items: center; gap: .5rem; font: 500 .85rem/1.25 var(--sans); transform: translateY(-50%); }
/* Each crew's mark: filled when the answer reaches them, an open question when it does not. */
.keep-mark { flex: none; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--ink); color: var(--muted); font: 600 .8rem/1 var(--sans); }
.story[data-state="with"] .keep-mark { background: var(--amber); }
.offer-keep[data-answered="false"] .keep-mark { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--muted); }
.offer-keep[data-answered="false"] .keep-mark::after { content: '?'; }
.offer-keep[data-answered="false"] .keep-crews li { color: var(--muted); }
.keep-card { display: grid; align-content: start; gap: .5rem; padding: 1.25rem; background: var(--bg); }
.keep-asks { font-size: .8rem; color: var(--muted); }
.keep-question { font-size: 1rem; font-weight: 500; line-height: 1.4; }
.keep-reply { display: grid; align-content: start; gap: .7rem; min-height: 8.5rem; margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.keep-answer { font-size: var(--fs-small); line-height: 1.5; }
.keep-source { display: flex; align-items: center; gap: .45rem; font-size: .8rem; line-height: 1.4; color: var(--teal); }
.keep-source svg { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.keep-wait { align-self: stretch; display: grid; place-items: center; min-height: 6.5rem; padding: 1rem; border: 2px dashed var(--line); color: var(--muted); text-align: center; font-size: var(--fs-small); line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .keep-reply > *, .keep-line { animation: otto-says .3s var(--ease); }
}

@media (max-width: 39.99rem) {
  .offer { padding: 1rem .6rem; }
  .offer-graph { --head: 1.5rem; height: 19rem; }
  .offer-graph .graph-head { font-size: .75rem; }
  .graph-node { padding: .45rem .3rem; min-height: 3rem; }
  .graph-source.is-lit::before, .graph-concept.is-lit::before { display: none; }
  .graph-source.is-lit, .graph-concept.is-lit { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: .25em; }
  .map-loose { height: 19rem; gap: .4rem; grid-template-columns: minmax(0, 1fr) minmax(0, .6fr) minmax(0, 1fr); }
  .loose-head { font-size: .85rem; }
  .loose-kicker { font-size: .75rem; }
  .loose-doc { flex-direction: column; gap: .4rem; padding: .6rem .4rem; font-size: .85rem; text-align: center; }
  .loose-doc:nth-child(n) { transform: rotate(-3deg); }
  .loose-doc:nth-child(2) { transform: rotate(2.5deg); }
  .loose-break { gap: .2rem; }
  .loose-break svg { width: 1.5rem; height: 1.5rem; }
  .loose-gap p { font-size: .8rem; }
  .loose-person { width: 2rem; }
  .loose-bits li { padding: .35rem .5rem; font-size: .8rem; }
  .loose-bits li:nth-child(n) { transform: rotate(-2deg); }
  .loose-bits li:nth-child(2) { transform: rotate(2deg); }
  .offer-spatial { width: 100%; aspect-ratio: auto; }
  .room-diagram { position: static; display: block; height: auto; aspect-ratio: 640 / 350; }
  .offer-spatial .room-labels { position: static; display: grid; margin-top: .5rem; }
  .room-points, .room-tags { position: static; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
  .room-point, .room-tag { position: static; max-width: none; font-size: .75rem; padding: .4rem; }
  .room-tag { padding-block: .2rem; }
  .keep-workspace { gap: .6rem; margin-top: .9rem; }
  .keep-flow { height: 13rem; }
  .keep-expert { width: 30%; padding-inline: .2rem; }
  .keep-person { width: 2rem; }
  .keep-name, .keep-line { font-size: .75rem; }
  .keep-ring { width: 3.5rem; height: 3.5rem; }
  .keep-ring .logo { width: 1.9rem; }
  .keep-hub p { max-width: 5.5rem; font-size: .75rem; }
  .keep-crews li { gap: .3rem; font-size: .75rem; }
  .keep-mark { width: 1.1rem; height: 1.1rem; font-size: .7rem; }
  .keep-card { padding: 1rem; }
  .keep-picks { padding-inline: .3rem; }
  .keep-picks-label { flex-basis: 100%; }
}
@media (forced-colors: active) {
  .offer { border: 1px solid CanvasText; }
  .graph-node[aria-pressed="true"], .room-point[aria-pressed="true"], .keep-pick[aria-pressed="true"] { outline: 2px solid Highlight; }
  .graph-links, .room-diagram path { stroke: CanvasText; }
  .graph-links .is-lit { stroke: Highlight; }
  .graph-source.is-lit::before, .graph-concept.is-lit::before { forced-color-adjust: none; background: Highlight; }
}