/* NOT part of the JUSTYEAR DYNAMICS package. Added by the Justyear site: a way
   back to the site's home page from inside the laboratory.

   The app's own JS and CSS are untouched. This is one link in index.html and
   this stylesheet, loaded from the same origin, so the laboratory's CSP
   (style-src 'self') admits it without any change to the policy.

   It sits in the empty stretch of the app's header right after the DYNAMICS
   wordmark. The app's logo button is not reused: it already does something
   ("Open Twin Lorenz"). The offsets follow the app's own breakpoints, read from
   its stylesheet (760 / 1100 / 1400 px) and measured in the browser: the
   wordmark ends at 303, 269, 217 and 176 px in those four bands, and the next
   header control never starts before 344 px above 760, or before 253 px below
   it (at a 360 px screen) - so each band gets a label that fits its gap. */
.jy-home {
  position: fixed; top: 12px; left: 323px; z-index: 2147483000;
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 11px 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(63, 182, 201, .45);
  background: rgba(3, 10, 14, .85);
  color: #9fe9f2;
  font: 600 12px/1 "Open Sans", system-ui, sans-serif; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
  transition: border-color .2s, color .2s, background-color .2s;
}
.jy-home:hover, .jy-home:focus-visible {
  border-color: #7DEFF7; color: #fff; background: rgba(13, 123, 148, .35);
}
.jy-home:focus-visible { outline: 2px solid #7DEFF7; outline-offset: 2px; }
.jy-home svg { width: 14px; height: 14px; flex: none; }
.jy-home__short { display: none; }

@media (max-width: 1400px) { .jy-home { left: 289px; } }
@media (max-width: 1100px) {
  .jy-home { left: 237px; }
  .jy-home__long { display: none; }
  .jy-home__short { display: inline; }
}
/* Re-measured on 2026-10-09 against the laboratory update that put an EN | PT
   switch in its header. Where the wordmark ends and the switch starts, per band:
   above 1400 304 / w-645; 1101-1400 270 / w-552; 761-1100 226 / w-524;
   361-760 179 / w-159; 360 and below 153 / w-149. So:
   - 836-1100: Site fits (66 px);
   - 797-835: the arrow alone (28 px);
   - 761-796 (an iPad held upright is 768): nothing fits in the header - 18 px
     at 768 - so the arrow moves to the empty stretch of the sidebar's
     WORKSPACE row, between its label and its collapse button;
   - phones: the arrow alone, centred in the gap, which is 37 px at 375;
   - 361-374 and below 340, where the header has no gap: see the last rule. */
@media (max-width: 835px) {
  .jy-home { width: 28px; padding: 0; justify-content: center; }
  .jy-home__short { display: none; }
}
@media (max-width: 796px) {
  .jy-home { top: 66px; left: 112px; }
}
@media (max-width: 760px) {
  .jy-home { top: 10px; left: min(188px, calc((100vw - 8px) / 2)); }
}
@media (max-width: 360px) {
  .jy-home { left: min(162px, calc((100vw - 24px) / 2)); }
}
/* Two rare phone widths where the header has no room at all (23 px at 361,
   18 px at 320): the arrow floats, round, at the bottom-left corner instead,
   just above the laboratory's status bar. */
@media (min-width: 361px) and (max-width: 374px), (max-width: 339px) {
  .jy-home { top: auto; bottom: 40px; left: 10px; width: 36px; height: 36px; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }
}
@media (prefers-reduced-motion: reduce) { .jy-home { transition: none; } }

/* Also added by the Justyear site: */
/* The laboratory's loading screen. The same on both sides of the jump: the
   site shows it when a laboratory button is clicked, and the laboratory shows
   it from its first paint until its app has mounted. A Lorenz attractor - the
   system the laboratory opens on - drawn as a faint path with a point of light
   running along it, the name, and a thin line of light sweeping under it.
   Black and silver (the owner asked for it on 2026-10-09), and slow.
   SVG and CSS only: nothing to load, nothing to run. */
.jy-loader {
  position: fixed; inset: 0; z-index: 2147483646;
  display: grid; place-content: center; justify-items: center; gap: 22px;
  background: #000;
}
.jy-loader__art { width: min(260px, 62vw); height: auto; overflow: visible; }
.jy-loader__art use { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.jy-loader__trail { stroke: rgba(205, 212, 216, .16); stroke-width: 1.2; }
.jy-loader__tail { stroke: rgba(214, 220, 224, .78); stroke-width: 1.8; stroke-dasharray: 110 890; animation: jy-run 4.6s linear infinite; }
.jy-loader__head { stroke: #FFFFFF; stroke-width: 2.8; stroke-dasharray: 10 990; animation: jy-run-head 4.6s linear infinite; filter: drop-shadow(0 0 5px rgba(226, 232, 236, .9)); }
@keyframes jy-run { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes jy-run-head { from { stroke-dashoffset: 900; } to { stroke-dashoffset: -100; } }
.jy-loader__name {
  margin: 0; padding-left: .34em;
  font: 600 11.5px/1 "Open Sans", system-ui, sans-serif; letter-spacing: .34em;
  color: rgba(214, 220, 224, .78);
}
.jy-loader__bar { position: relative; width: 132px; height: 1px; overflow: hidden; background: rgba(205, 212, 216, .16); }
.jy-loader__bar::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(90deg, rgba(220, 226, 230, 0), #E4E9EC, rgba(220, 226, 230, 0));
  animation: jy-bar 2.2s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes jy-bar { from { transform: translateX(-110%); } to { transform: translateX(240%); } }
@media (prefers-reduced-motion: reduce) {
  .jy-loader__tail, .jy-loader__head, .jy-loader__bar::after { animation: none; }
  .jy-loader__head { display: none; }
}
/* Up from the first paint; it goes once the app has put anything in #root,
   a moment later so the first frame is drawn under it. If that never happens,
   it still goes after eight seconds rather than hide the page for good. */
/* It stays a moment and a half once the app is up, then fades slowly: the
   owner found the screen gone before it could be seen. */
.jy-loader { animation: jy-loader-safety 0s linear 8s forwards; }
body:has(#root > *) .jy-loader { opacity: 0; visibility: hidden; transition: opacity 900ms ease 1500ms, visibility 0s linear 2400ms; }
@keyframes jy-loader-safety { to { opacity: 0; visibility: hidden; } }