body { display: block; place-items: normal; padding: 0; margin: 0; min-height: 100vh; zoom: normal; }

.frame { display: flex; flex-direction: column; height: 100vh; }

.frame-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  background-color: #bfe3ff;
  background-image: url(../img/clouds.svg);
  background-repeat: repeat-x;
  background-size: 170px auto;
  background-position: 0 center;
  animation: navclouds 35s linear infinite;
  border-bottom: 4px solid var(--peach);
  position: relative;
  z-index: 2;
}
@keyframes navclouds { to { background-position-x: -170px; } }
@media (prefers-reduced-motion: reduce) { .frame-nav { animation: none; } }
.frame-brand {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

.frame-title { font-weight: 700; }

.frame-meta { font-size: 1.1rem; color: var(--ink); white-space: nowrap; }
.frame-user { color: var(--accent); text-decoration: none; font-weight: 600; }
.frame-user:hover { text-decoration: underline; }
@media (max-width: 640px) { .frame-meta { display: none; } }

.frame-main { flex: 1; min-height: 0; }
.frame-main iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

.frame-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 1rem;
  background: #AACDDC;
  border-top: 4px solid var(--peach);
  color: var(--muted);
  position: relative;
  z-index: 2;
}
.frame-foot-brand {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  padding: 0 0.5rem;
  font-size: 0.66rem;
  line-height: 1;
  box-shadow: 3px 3px 0 0 #000;
}
.frame-foot-brand:hover { transform: translateY(-50%) translate(1px, 1px); box-shadow: 2px 2px 0 0 #000; }
.frame-foot-brand:active { transform: translateY(-50%) translate(3px, 3px); box-shadow: 0 0 0 0 #000; }

.visit-cloud {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 38px;
  height: 20px;
  padding: 0 10px 2px;
  background: #fff;
  border-radius: 11px;
  color: #3f5b68;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}
.visit-cloud::before,
.visit-cloud::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: inherit;
  border-radius: 50%;
}
.visit-cloud::before { width: 12px; height: 12px; left: 7px; top: -5px; }
.visit-cloud::after { width: 16px; height: 16px; right: 7px; top: -7px; }