* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:
    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}

:root {
  --bg: #e0f7fa;
  --fg: #111;
  --border: #111;
}

.dark {
  --bg: #111;
  --fg: #e0f7fa;
  --border: #e0f7fa;
}

body {
  margin: 0;
  overflow: hidden;
  background-color: var(--bg);
}

.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.title {
  color: var(--fg);
}

.btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4rem;
  gap: 1rem;
}

.switch-btn {
  border: solid 1px var(--border);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  background-color: transparent;
  color: var(--fg);
  cursor: pointer;
  font-size: 1rem;
  width: 100px;
}

/* CIRCLE && STAR */
::view-transition-new(root) {
  /* mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="white"/></svg>')
    center / 0 no-repeat; */
  mask: url('data:image/svg+xml,<svg fill="white" width="40px" height="40px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m19.555 23.411-6.664-3.285c-.163-.082-.355-.13-.559-.13-.235 0-.455.064-.643.175l.006-.003-6.416 3.75c-.086.05-.19.079-.3.079-.336 0-.609-.273-.609-.609 0-.033.003-.064.007-.096v.003l.994-7.542c.007-.049.011-.105.011-.162 0-.364-.155-.691-.403-.92l-.001-.001-4.571-4.247c-.248-.231-.402-.56-.402-.924 0-.625.454-1.144 1.05-1.246l.007-.001 5.987-1.108c.421-.078.765-.355.935-.727l.003-.008 2.491-5.663c.204-.444.646-.746 1.157-.746.48 0 .897.266 1.114.659l.003.007 2.881 5.471c.197.365.558.62.981.666h.006l6.045.681c.647.061 1.149.601 1.149 1.259 0 .332-.128.635-.338.86l.001-.001-4.27 4.562c-.211.224-.341.527-.341.86 0 .088.009.173.026.256l-.001-.008 1.52 7.453c.009.04.015.086.015.134 0 .337-.273.61-.61.61-.095 0-.185-.022-.265-.061l.004.002z"/></svg>')
    center / 0 no-repeat;
  animation: scale 1s;
  animation-fill-mode: both;
}

::view-transition-old(root),
.dark::view-transition-old(root) {
  animation: none;
  animation-fill-mode: both;
  z-index: -1;
}
.dark::view-transition-new(root) {
  animation: scale 1s;
  animation-fill-mode: both;
}

@keyframes scale {
  to {
    mask-size: 200vmax;
  }
}