@font-face {
  font-family: "DM Sans";
  src: url("assets/dm-sans-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/dm-sans-medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #203247;
  --muted: #657585;
  --ice: #e5f4ff;
  --edge: #d8e2eb;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
.masthead {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  padding: 22px 32px;
}
.clock {
  display: flex;
  justify-content: center;
  gap: 36px;
  font-size: .8125rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.clock time { min-width: 68px; }
.clock time:first-child { min-width: 82px; }
.language {
  position: absolute;
  right: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}
.language img {
  display: block;
  width: 19px;
  height: 13px;
  object-fit: cover;
  border-radius: 1px;
}
.language:hover { background: var(--ice); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
main { display: flex; flex-direction: column; min-width: 0; }
.mark-stage {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 280px;
  padding: 24px 32px 54px;
}
.mark {
  position: relative;
  width: min(clamp(320px, 34vw, 480px), 50svh);
  max-width: 100%;
  aspect-ratio: 420 / 400;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.mark.is-dragging { cursor: grabbing; }
.mark.is-pointer-focused { outline: none; }
.mark canvas, .mark-fallback { display: block; width: 100%; height: 100%; }
.mark canvas { visibility: hidden; }
.mark-fallback { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
.mark.is-ready canvas { visibility: visible; }
.mark.is-ready .mark-fallback { visibility: hidden; }
.introduction { padding: 0 32px 54px; max-width: 490px; }
h1 {
  margin: 0 0 16px;
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.055em;
}
.introduction p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  max-width: 410px;
}
.contact {
  display: inline-block;
  margin-top: 22px;
  color: inherit;
  font-size: .9375rem;
  line-height: 1.5;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-decoration-line: underline;
  cursor: pointer;
}
.contact:hover { text-decoration-thickness: 2px; }
footer {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  padding: 0 32px 24px;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.6;
}
footer p { margin: 0; }
.company-details { text-align: left; }
.company-details span { padding: 0 4px; }
@media (min-width: 1600px) {
  .masthead { min-height: 100px; }
  .mark-stage { padding-bottom: 100px; }
  .introduction { padding-bottom: 70px; }
}
@media (max-width: 600px) {
  .masthead { min-height: 76px; padding: 20px 24px; }
  .clock { gap: 24px; }
  .language { right: 12px; }
  .mark-stage { min-height: 270px; padding: 28px 24px 50px; }
  .mark { width: min(340px, 82vw, 50svh); }
  .introduction { padding: 0 24px 40px; max-width: 425px; }
  h1 { font-size: 1.5rem; margin-bottom: 14px; }
  .introduction p { max-width: 360px; }
  footer { flex-direction: column; gap: 9px; padding: 0 24px 24px; }
}
@media (max-width: 350px) {
  .clock { gap: 14px; font-size: .75rem; }
  .masthead { padding-right: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}
.sr-only, .bot-field { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }