:root {
  color-scheme: light;
  --goli-parent-canvas: #eef7dd;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--goli-parent-canvas);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "PingFang SC",
    "Microsoft YaHei", "Segoe UI", sans-serif;
}

.app-shell {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--goli-parent-canvas);
}

.app-shell[data-route="welcome"] {
  --goli-parent-canvas: #eef7dd;
}

.app-shell[data-route="plan"] {
  --goli-parent-canvas: #f8faf4;
}

.app-shell[data-route="result"] {
  --goli-parent-canvas: #f7fbef;
}

.app-shell[data-canvas-route="profile"] {
  --goli-parent-canvas: #ecf1e6;
}

.screen-frame,
.profile-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
}

.screen-frame {
  position: absolute;
  inset: 0;
  background: var(--goli-parent-canvas);
  transition: opacity 120ms ease-out, visibility 0s linear 0s;
}

.screen-frame[hidden] {
  display: none;
  pointer-events: none;
}

.profile-frame {
  position: absolute;
  z-index: 30;
  inset: 0;
  background: transparent;
  transition: opacity 120ms ease-out, visibility 0s linear 0s;
}

.profile-frame[hidden] {
  display: none;
}

.app-shell[data-viewport-stabilized="false"]
  > :is(.screen-frame:not([hidden]), .profile-frame:not([hidden])) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-shell[data-viewport-stabilized="true"]
  > :is(.screen-frame:not([hidden]), .profile-frame:not([hidden])) {
  opacity: 1;
  visibility: visible;
}